Este artigo será uma análise de várias lições de UX / UI que aprendemos observando cuidadosamente na exposição algumas centenas de pessoas que estavam testando as primeiras versões do nosso jogo Steamhounds .


Para entender o contexto, direi que o Steamhounds é um jogo baseado em turnos, uma mistura de JRPG e combate tático no grid. Os jogadores podem lutar contra a IA, mas tentamos motivá-los a jogar um contra o outro sempre que possível, sentados ao lado de monitores diferentes.

Em geral, antes de realizar esse experimento, o layout básico e a apresentação das informações em nosso jogo não eram absolutamente terríveis. Jogadores e usuários experientes que estão familiarizados com o gênero geralmente lidam com o jogo sem nossa interferência. Mas em tais eventos ao vivo, existem pessoas que nunca assistiram a esses jogos, e esses jogadores nos ajudam muito, mostrando as esquisitices e suposições ocultas que criamos para o design do jogo.

Portanto, sem mais delongas, vamos às nossas observações:

Problema 1: as pessoas não lêem texto

Eu acho que a maioria dos desenvolvedores está ciente desse problema. Surpreendentemente, uma grande proporção de jogadores pula qualquer texto que você lhes mostre. Descobrimos que a grande maioria (> 80%) dos jogadores simplesmente clicou na tela de instruções que adicionamos no início da demo, que descrevia o básico da jogabilidade:


Menu com instruções. Apenas 20% dos jogadores se preocupam em lê-lo (e 100% deles vencem a batalha)

Também pecamos nisso - para ser sincero, quem lê as instruções ao comprar um novo gadget? Esperamos que seja fácil de usar e possamos aprender mais ou menos a usá-lo com a ajuda da intuição e da experimentação.

Estávamos esperando por isso, o problema mais sério era que, mesmo durante o jogo, muitos jogadores também perdiam as instruções na tela . Isso afetou mais a experiência do usuário quando não notou instruções dizendo o que fazer a seguir:

Solução

Sabemos que geralmente o texto na tela é a última coisa que os jogadores costumam recorrer quando ficam paralisados. Então, vamos tornar impossível perder:


Usamos o movimento para chamar a atenção para a dica de ferramenta quando ela aparece e, em seguida, continuamos a animar até o jogador seguir as instruções .

Costumava ser difícil perceber. Tendo forçado o jogador a prestar atenção nele, praticamente nos livramos das situações em que os jogadores perguntavam: “o que devo fazer a seguir?”.

Provavelmente, poderíamos melhorar o sistema animando o texto e organizando-o para chamar a atenção para os blocos nos quais você precisa clicar para selecionar uma posição.

---

Problema 2: Objetos interativos devem estar visíveis

Omitimos o óbvio: os botões devem se parecer com botões e o jogador deve entender quais opções estão disponíveis a ele a qualquer momento.

Em Steamhounds, um jogador deve escolher uma ação no menu (alguma habilidade, por exemplo, "ataque à distância" ou "postura defensiva") no seu turno. Quando isso acontece, um menu é exibido:


Isso funciona muito bem - um prompt de áudio claro é reproduzido e uma animação de rotação que atrai a atenção quando o menu é expandido para uma parte maior da tela. Ninguém teve problemas para entender que você precisa clicar em um desses botões. O problema é que, depois de escolher uma ação, o menu desaparece e o jogador deve escolher um lugar no campo de batalha onde sua habilidade precisa ser direcionada.

Percebemos que nesta fase alguns jogadores ficam presos, vasculhando a tela com o mouse em busca de elementos com os quais você pode interagir :


O jogador está procurando o que você pode clicar na tela e sua irritação aumenta a cada segundo

Solução

Embora destacemos os blocos nos quais você pode clicar, eles se destacam um pouco. A situação é agravada pelo fato de os jogadores frequentemente darem uma breve olhada no oponente antes de escolher uma ação, sem perceber que as alocações de peças aparecem. Veja como resolvemos esse problema:


Ladrilhos cintilantes chamam a atenção de um jogador

Se o jogador não mover o cursor sobre um bloco adequado por algum tempo, ativamos o flicker.

Essa mudança simples teve o efeito desejado - na próxima sessão do teste, raramente tivemos que informar o jogador que, para continuar, ele precisava clicar no ladrilho. Novamente, aplicamos o conhecido princípio - você pode usar movimento / animação para atrair atenção . Quando a tremulação atrai sua atenção, eles inevitavelmente movem o mouse sobre uma das peças e a seleção subsequente torna seu objetivo óbvio.

---

Problema 3: as chamadas à ação devem ser instantâneas / contextuais

Os desenvolvedores independentes geralmente falam sobre a idéia de um "apelo à ação" no marketing de jogos - os usuários precisam "assinar o boletim", "adicionar o jogo à lista de desejos!" ou "escreveu resenhas no Steam!" Mas também no jogo, há momentos em que o jogador deve fazer uma escolha ou executar uma determinada ação. Então, por que não aplicar alguns desses princípios para tornar o próximo clique ou decisão do jogador o mais claro possível?

Antes do início da batalha em Steamhounds, os jogadores precisam definir as posições e racks iniciais ("formações") para seu esquadrão. O processo de definir a formação não se torna imediatamente aparente para todos os jogadores.

Aqui está a aparência da tela:


Instruções aborrecidas e detalhadas para configurar uma formação de esquadrão

Embora ele diga ao jogador tudo o que você precisa saber para definir a formação, surgem alguns problemas - (a) os jogadores não leem o texto e (b) as instruções são apresentadas como um único bloco de texto que não parece um apelo à ação claro . Coisa ruim.

Solução

Como já implementamos um texto bonito e atraente, por que não aplicá-lo para quebrar esse bloco chato de instruções?


Agora, orientamos o jogador passo a passo - primeiro ele precisa "clicar no personagem para definir seu rack", depois "escolher um rack", "escolher uma posição" etc.

Use dicas contextuais dizendo o que os jogadores precisam fazer agora . Assim, eles passam por todo o processo em etapas e não se assustam com longas folhas de instruções.

---

Problema: terminologia breve e técnica deve ser usada com moderação

Estudamos o design do jogo e dominamos uma linguagem muito específica usada para descrever as regras do jogo. Conhecemos descrições com palavras-chave que podem ser encontradas nas cartas de Magic: o Gathering ou no livro de regras do jogo de tabuleiro - “ataque uma criatura” , “descarte 3 cartas” , “causa dano a todos os personagens vizinhos” . Se você está acostumado a esse idioma, essas instruções são absolutamente claras e inequívocas para você. Mas tenho certeza de que você jogou com jogadores mais casuais, que às vezes interpretam as regras de uma maneira que seu cérebro de design acha completamente imprevisível.

No Steamhounds, a maior parte do texto com descrições longas de regras está nas dicas de ferramentas que aparecem quando você seleciona uma das habilidades do personagem. Inicialmente, queríamos tornar essas descrições o mais concisas e rigorosas possível - no final, não precisamos de grandes linhas pop-up de texto nessas dicas de ferramentas. Portanto, tentamos reduzi-los a uma, no máximo duas, frases curtas:


Uma descrição agradavelmente breve, mas problemática, da habilidade Foco: “Dá Foco”

Tudo parece certo, certo? Mas percebemos que os jogadores usam essa habilidade muito raramente .

Solução

Achamos que a principal razão da impopularidade do Focus é que os jogadores que não leram as regras cuidadosamente mostradas anteriormente, simplesmente não têm o contexto necessário para entender a importância ou as vantagens da habilidade . Muitos jogadores ignoram a familiarização com as regras e passam o mouse sobre esse botão, pela primeira vez, encontram a menção da mecânica do Focus. Portanto, fizemos a seguinte alteração:


Uma descrição um pouco mais detalhada: “Dá foco. Desbloqueia suas habilidades mais poderosas. ”

Sim, a descrição tornou-se um pouco detalhada. Mas percebemos que a proporção de pessoas que usam essa capacidade aumentou. O novo texto "vende" simultaneamente a capacidade do jogador e fornece um contexto adicional para que ele possa entender sua importância na própria dica, mesmo que não tenha lido as regras.

A partir desse problema, extraímos um princípio geral: descrever as coisas de uma maneira interessante ou atraente, e nos esforçar para tornar óbvios os principais efeitos da mecânica para todos os jogadores, e não apenas para aqueles que já aprenderam informações de outro lugar .

---

Problema 5: as pessoas são tendenciosas em relação a certas palavras

Fizemos observações interessantes sobre como a linguagem que usamos faz com que alguns jogadores interpretem as regras de maneira inesperada. Achamos que esse é o resultado de associações profundamente enraizadas com essas palavras que eles possuem.


Descrição antiga de Vigor Potion: “Escolha um alvo. O próximo ataque dela causará dano duplo. "

Qual é o problema aqui? A palavra "alvo" tem uma conotação agressiva .

A palavra "alvo" é freqüentemente usada no texto das regras como um termo neutro para tudo o que a habilidade visa. Jogadores experientes já podem se acostumar com isso, e entendem que a habilidade descrita acima é obviamente uma melhoria que você precisa usar em seus próprios personagens. Mas a associação entre a palavra “alvo” e o ataque foi tão forte que alguns jogadores acreditavam que essa habilidade deveria ser usada no inimigo, para que o próximo ataque causasse dano adicional.

Solução

Parecia que tivemos que deixar de usar uma linguagem tão técnica. Veja como resolvemos o problema:


Descrição aprimorada: “Fortalece um aliado. Seu próximo ataque causará o dobro de dano.

Para o designer, essa abordagem é bastante dolorosa - essa descrição parece muito detalhada. No entanto, percebemos que o novo texto eliminou essencialmente o mal-entendido sobre o efeito dessa habilidade, e os jogadores pararam de tentar direcioná-lo para seus inimigos. Os desenvolvedores devem considerar as tonalidades de significado e o público-alvo e encontrar um equilíbrio no que mais lhe convém. Texto muito longo das regras é definitivamente um problema, mas uma leve redundância permite enfatizar o estilo e o caráter do jogo.

Lição útil: observe os testadores para verificar se as opções de terminologia têm consequências inesperadas . Mesmo entre usuários que falam inglês, isso pode ser altamente dependente da cultura.

---

Problema 6: as pessoas têm associações com determinadas cores

Esse problema é semelhante ao tópico anterior sobre conotação de palavras. As cores também estão associadas a certos sentimentos ou conceitos. Nós já usamos isso no jogo, criando destaque de peças para demonstrar efeitos de habilidade. Vermelho - agressão, verde - apoio / defesa, etc.


Azulejos vermelhos assustadores destacando

Na maioria dos casos, isso funcionou perfeitamente. Mas havia uma associação que não podíamos prever e confundia alguns jogadores. Eles associaram a cor vermelha não à agressão , mas à ação errada . Portanto, quando eles passaram o mouse sobre um alvo para atacá-lo, ficaram confusos - eles pensaram que o jogo lhes conta sobre a impossibilidade de mirar nesse personagem (na verdade, o jogo simplesmente não mostra o bloco se não for o alvo certo).

Solução

Tentamos evitar as “interseções” de associações conflitantes. Nossa solução:


Azulejos de destaque vermelho-laranja quase os mesmos (mas não exatamente)

Acabamos de mudar a luz de fundo vermelha para mais perto de um tom levemente laranja. Resta saber se isso realmente resolveu o problema (que realmente afetou apenas alguns jogadores). Mas o engraçado é que ninguém mais estava errado dessa maneira.

Portanto, repito, verifique duas vezes se sua interpretação não afeta negativamente as associações que existem na mente dos jogadores .

---

Problema 7: cliques extras são ruins

Já estávamos cientes disso, então projetamos e configuramos a interface do usuário para eliminar cliques desnecessários. O problema surgiu após um complemento feito no último minuto na montagem do jogo, projetado especialmente para demonstração em eventos.

No final da batalha, as fanfarras são reproduzidas e uma grande mensagem “Vitória” ou “Derrota” aparece na tela:


Em seguida, o jogador pode clicar em qualquer lugar da tela para sair da batalha e retornar ao menu principal. Mudamos a montagem da demonstração para que, após sair da batalha, o jogador veja a caixa de diálogo de inscrição na lista de discussão.

Parecia uma ótima idéia, mas ela tinha uma falha fatal. O momento em que a mensagem “vitória” ou “derrota” aparece na tela é exatamente o momento em que os jogadores apertam as mãos (ou começam a brigar) e se levantam de seus lugares. A batalha acabou, e não há mais sentido em sentar-se ao computador. Então eles saíram sem sequer ver a caixa de diálogo da lista de discussão .

Solução

Após alguns segundos, o jogo deve exibir automaticamente a tela de assinatura do boletim.


Para ser sincero, deveríamos ter previsto isso com antecedência, mas a função foi adicionada no último momento. No entanto, uma simples alteração - eliminando um clique opcional - aumentou o número de assinaturas de nossa newsletter em três vezes em comparação com o resultado anterior. Para o inferno com esses cliques opcionais!

---

Conclusões

• Use movimento / animações para chamar a atenção para dicas de texto
• Tornar óbvios os elementos interativos da interface do usuário
• Pense nas pistas como apelos à ação. Torne-os instantâneos e contextuais.
• Não pesquise com linguagem técnica e se esforce para transmitir contexto para ajudar os jogadores a entender suas decisões
• Verifique se há associações mentais inesperadas com cores, palavras, etc.
• Navegação na interface do usuário suave, eliminando cliques opcionais

Espero que os princípios descritos neste artigo sejam úteis no seu próprio jogo. Mas acima de tudo, esperamos poder convencê-lo do valor da abordagem padrão: observe os novos jogadores, encontre momentos em que eles ficam presos ou confusos e, em seguida, derivam os princípios básicos e os aplicam a todo o jogo.


Dados e observações coletados na PlayExpo London. Adoro planilhas.

Adicionamos um código de coleta de métricas à montagem da demonstração sobre os resultados das batalhas, a frequência da escolha e capacidade de cada personagem, várias informações sobre o tempo de uso da interface do usuário. Definitivamente, isso nos ajudou e tornou possível, do ponto de vista científico, abordar as medidas do impacto das mudanças que fizemos. Mas provavelmente a parte principal das lições foi recebida da maneira antiga e boa de "observar o jogador de lado e guardar anotações manuscritas".

Nenhum de nós era especialista em UX (e não oficialmente, este artigo foi intitulado "7 erros de UX que podemos evitar"). Como a maioria das equipes de desenvolvimento que não têm um especialista em UI / UX dedicado, tentamos seguir o bom senso e seguir as recomendações mais simples. Mas quando você está tão imerso em seu próprio projeto, é difícil avaliar objetivamente todas as suas rugas. A nova aparência do novo testador de jogo é incrivelmente valiosa - use-o o mais rápido possível!