Design de UI e UX

A interface do usuário (UI) combina design visual artístico com design de informação centrado na comunicação para produzir menus, layouts de loja, displays de cabeçalho (HUDs) e outras interfaces com as quais os jogadores interagem. A experiência do usuário (UX) se relaciona a como os jogadores interagem com o jogo, como fazem suas escolhas conhecidas e como se movem de uma escolha para a próxima. Embora UI e UX frequentemente trabalhem colaborativamente, a UX tem um foco mais significativo na interatividade e na experiência do jogador do que no design visual e informativo da UI.

UI

A UI compartilha informações vitais como pontos de vida, objetivos de missão e preços que permitem que os jogadores tomem decisões e naveguem pelo jogo. Como geralmente é a principal forma pela qual os jogos se comunicam com o jogador, a UI é crítica para a experiência dos jogadores. Uma UI mal designada pode deixar os jogadores confusos e frustrados, levando a uma baixa retenção, enquanto uma UI bem projetada pode contribuir para o envolvimento e monetização. Uma UI efetivamente projetada emprega os seguintes princípios:

• Priorização
• Atenção
• Linguagem Visual
• Convenções
• Consistência

Priorização

Compartilhar a informação mais significativa primeiro é conhecido como a Hierarquia da Informação. Isso é particularmente crucial em jogos onde os jogadores frequentemente tomam decisões instantâneas com base em um conjunto restrito de informações. Ao priorizar a UI, identifique o que é essencial ou mais relevante para a experiência do jogador e assegure-se de que é acessível e fácil de localizar. Considere estas perguntas:

• O que o jogador está fazendo neste momento?
• Qual é a coisa mais importante para eles estarem cientes ou terem acesso?
• Que escolhas eles precisam fazer?
• Que informações eles precisam para fazer essas escolhas?
• Com que frequência eles se envolverão nessas escolhas?

Informações e características importantes mudam dependendo de fatores como o papel que o jogador assume, sua localização no mundo 3D e os itens que eles seguram. A UI pode ser projetada para apresentar apenas o que importa contextualmente – trocando os botões e informações dependendo do que é útil em cada contexto. Isso assegura que os jogadores sempre tenham o que precisam, sem a desordem de tudo que não precisam.

Exemplos

Elementos irrelevantes podem causar confusão e distração. Spellbound RPG tem uma UI limpa e minimalista que é particularmente crucial para interfaces móveis, pois telas pequenas podem facilmente ser sobrecarregadas com botões, telas e textos excessivos.

Em Super Striker League, as interações dos jogadores variam dependendo de estarem ou não controlando a bola. Sem a bola, os jogadores podem Correr e Tacklear para recuperar o controle. Uma vez em posse, os botões mudam para Driblar e Passar, permitindo que os jogadores desviem de oponentes e passem a bola. Ao alternar entre esses botões, a UI continua contextualmente útil, evitando distrações desnecessárias.

Em The Survival Game, os jogadores precisam estar cientes de sua saúde e nível de fome e ter acesso rápido ao seu mapa, inventário e ferramentas. Essas informações permitem que eles tomem decisões e priorizem ações para a sobrevivência. Se essas informações ou ferramentas forem difíceis de encontrar ou estiverem faltando, a sobrevivência se torna mais desafiadora e desnecessariamente frustrante.

Atenção

Apesar de uma UI minimalista, priorizada e contextualizada, os jogadores podem ainda precisar de ajuda para localizar o que precisam. Designers de UI podem usar várias ferramentas visuais para capturar e guiar a atenção dos jogadores, como:

• Cor: Cores brilhantes atraem mais atenção do que cores opacas. Use tons vibrantes para textos cruciais, botões e outros elementos, e tons mais suaves para menos significativos. Esse contraste melhora a visibilidade e reduz distrações.
• Tamanho: Elementos maiores são mais conspícuos e percebidos como importantes em comparação com menores.
• Espaço: Elementos cercados por amplo espaço negativo ou preenchimento chamam a atenção.
• Proximidade: Elementos agrupados implicam uma conexão. Ao colocar características e itens relacionados próximos uns dos outros, os jogadores podem entender sua associação e localizá-los mais facilmente.
• Movimento: Elementos animados atraem atenção. Mesmo um leve movimento pode fazer um elemento se destacar em meio a contrapartes estáticas. Efeitos de partículas, botões balançando e setas animadas são frequentemente usados em tutoriais para orientação.

A moderação é fundamental com essas ferramentas. O uso excessivo de elementos brilhantes e em movimento pode sobrecarregar e confundir os jogadores em vez de ajudá-los.

Exemplos

Na UI do passe de temporada de Jailbreak, uma faixa de amarelo dourado está abaixo dos ícones exclusivos do passe de temporada, atraindo atenção para as recompensas premium e tornando-as visualmente distintas das gratuitas.

Em Dragon Adventures, a prioridade visual é dada ao pacote de moedas de maior valor aumentando seu tamanho e separando-o com mais preenchimento, para diferenciá-lo de pacotes menores.

Em Tower Defense Simulator, tanto o tamanho quanto a proximidade são utilizados para agrupar e distinguir as Skins Diárias de Torres dos Caixas Diários.

Linguagem visual

Além de direcionar a atenção dos jogadores para os elementos mais importantes na tela, os designers de UI desenvolvem uma linguagem visual para ajudar os jogadores a entenderem o que estão vendo. Uma linguagem visual é um conjunto de escolhas de design deliberadas e consistentes que fornecem informações à primeira vista sobre o propósito, status, associações e relevância de um elemento. A linguagem é construída com ferramentas como forma, cor e estilo. Alguns dos usos da linguagem visual incluem:

Ícones

Ícones podem empregar uma identidade visual que transmite significado e associações. Por exemplo, ícones relacionados a estatísticas específicas podem compartilhar uma paleta de cores e formas semelhantes, permitindo que os jogadores reconheçam e entendam sua função.

Botões

Como uma forma prevalente de entrada do jogador, os botões devem ser fáceis de identificar. Colocar botões em um recipiente, como uma cor ao redor do texto ou ícone, os distingue do fundo, fazendo-os parecer interativos. Adicionar destaques ou sombras pode aumentar seu apelo tátil, sugerindo profundidade 3D.

Texto

Cabeçalhos e títulos que contêm informações significativas de alto nível devem ser maiores e mais ousados do que o texto do corpo. Cores que são altamente legíveis e contrastam bem com a cor de fundo sobre a qual serão exibidas devem ser consideradas. Escolhas estilísticas como cor e negrito podem destacar informações importantes como itens do jogo, estatísticas ou habilidades. Sempre priorize a legibilidade ao escolher uma fonte.

Uma vez que a linguagem visual foi projetada, ela pode ser documentada em um Guia de Estilo, um conjunto de regras e exemplos que ajudam todos na equipe a entender como aplicar a linguagem de maneira consistente em todo o jogo.

Convenções

Convenções são escolhas de design frequentemente aplicadas que são vistas em muitos jogos diferentes. Alguns exemplos incluem:

• Um símbolo X em um botão que fecha o diálogo quando pressionado
• A cor cinza aplicada a botões que estão atualmente indisponíveis
• Um ícone de cadeado sobre um botão ou recurso para indicar que o jogador ainda não o ganhou ou desbloqueou

Dada sua ampla utilização, os jogadores geralmente estão familiarizados com tais convenções. Aproveitar essa familiaridade pode tornar uma interface mais intuitiva e reduzir a necessidade de instruções específicas do jogo. Jogar jogos dentro do seu gênero alvo pode ajudar a identificar convenções que os jogadores podem reconhecer. Um designer de UI pode optar por uma abordagem única para se adaptar melhor ao seu jogo, mas conhecer essas convenções informa seu processo de tomada de decisões.

Consistência

Quaisquer decisões que um designer de UI tome, ele deve aplicá-las de maneira consistente ao longo do jogo. A consistência ajuda os jogadores a aprenderem a navegar pelo jogo de maneira mais eficiente e previne confusões e frustrações.

Aqui estão alguns exemplos de consistência de UI em um jogo:

• A estatística "Saúde" aparece em verde em todos os textos, ícones relacionados e na barra de saúde.
• Sempre que o diálogo de NPC menciona um item do jogo, ele é destacado em negrito.
• Botões de fechar são sempre quadrados, vermelhos e contêm um X branco, aparecendo apenas no canto superior direito de um diálogo.
• Sempre que um jogador não pode pagar por um item na loja, o preço é exibido em vermelho.

Essas escolhas são deliberadas, visando facilitar a compreensão e navegação do jogador. Ao aplicá-las de forma consistente, permitem que os jogadores associem elementos relacionados, identifiquem itens importantes, desenvolvam memória muscular, tomem decisões informadas rapidamente e passem mais tempo imersos no jogo.

UX

O design de UX relaciona-se a como os jogadores interagem com o jogo, como eles fazem suas escolhas conhecidas e como se movem de uma escolha para a próxima. Embora a UX frequentemente trabalhe em conjunto com a interface do usuário (UI), ela foca mais na interatividade e na experiência do jogador do que no design visual e informativo da UI.

Entendendo os jogadores

Um objetivo principal do designer de UX é criar interações e fluxos que sejam intuitivos, não intrusivos e convenientes para os jogadores usarem. Esse processo começa com um entendimento dos próprios jogadores, o público-alvo para um jogo. Ao identificar os jogadores de um jogo, considere o seguinte:

• Demografia: A demografia ajuda a informar as escolhas de design revelando informações generalizadas sobre um grupo de jogadores. Por exemplo, jogadores mais jovens são geralmente mais propensos a jogar em dispositivos móveis ou tablets do que em computadores pessoais, portanto, jogos destinados a esse público costumam priorizar o design e o aprimoramento da experiência do usuário móvel.

• Nível de experiência: Desenvolvedores podem optar por projetar para jogadores com pouca experiência em jogos, uma quantidade significativa ou em algum lugar intermediário. Interações que são familiares para jogadores experientes, como pressionar uma tecla numérica para equipar um item na barra de ferramentas ou pressionar "c" para agachar, podem não ser óbvias para jogadores inexperientes, exigindo mensagens ou treinamentos adicionais.

• Familiaridade com o gênero: Semelhante ao nível de experiência geral, a familiaridade com o gênero reflete o nível de experiência dos jogadores com um tipo específico de jogo. Jogos que se enquadram em gêneros populares no Roblox, como interpretação de papéis, sobrevivência e tiro em primeira pessoa, são propensos a ter muitos jogadores potenciais que já jogaram um gênero semelhante antes. Jogos em outros gêneros podem ter menos jogadores experientes, mas essa lacuna de experiência pode ser superada através de tutoriais e usabilidade.

• Estilo de jogo: Os jogadores geralmente preferem tipos específicos de jogo, que vão desde competição e coleta de conquistas até exploração e cooperação. Essas preferências não são apenas refletidas nas mecânicas de jogo que os jogadores preferem, mas também influenciam as decisões de UX. Designers consideram quais interações priorizar, quais polir e quais apresentar aos jogadores. Eles também levam em conta o estado de espírito que os jogadores terão ao se envolver com essas interações e as emoções que esperam evocar a partir delas.

Após considerar esses fatores e selecionar um grupo de jogadores-alvo (ou grupos), conheça-os encontrando-os, jogando com eles e aprendendo sobre seus objetivos e preferências para informar melhor as escolhas de design.

Design de interações

Interações são recursos que permitem que os jogadores experimentem e comuniquem suas escolhas em um jogo. Designers de UX querem que essas interações sejam intuitivas e exijam o mínimo de explicação possível. Para isso, eles utilizam:

• Convenções
• Metáforas
• Feedback

Convenções

Convenções são designs e princípios de UX com os quais os jogadores podem já estar familiarizados de outros jogos.

Exemplos de convenções incluem:

• O prompt de proximidade "E" que os desenvolvedores do Roblox usam para sinalizar aos jogadores que um item é interativo se eles estiverem perto o suficiente para que apareça.
• A tecla "C" permitindo que o avatar do jogador se agache para que ele possa se abaixar sob obstruções ou caber em espaços apertados.
• Teclas numéricas equipando itens da barra de ferramentas nas mãos do avatar para que possam ser usados.
• Andar em círculos no chão para enfileirar-se para uma partida.

As convenções se tornam estabelecidas quando uma implementação ou escolha de design particular cresce em popularidade devido à sua facilidade de uso. "C" para agachar, por exemplo, é fácil de lembrar devido a ser a primeira letra da palavra agachar, e está convenientemente localizada ao lado de WASD, as teclas que os jogadores usam para navegar. É uma interação fácil de realizar rapidamente e sob pressão, o que é ideal, uma vez que tentar se esconder ou fugir de uma ameaça iminente é um caso de uso comum para se agachar.

Metáforas

Metáforas relacionam um conceito abstrato a um mais familiar, criando um atalho para a compreensão. Neste exemplo de Spellbound Wizard RPG, o ato de lançar feitiços mágicos é realizado desenhando cartas de um baralho. A UI/UX baseada em baralho fundamenta o ato abstrato de lançar feitiços, que não tem uma expressão na vida real, em algo que os jogadores podem relacionar mais facilmente e entender rapidamente.

Feedback

A comunicação do jogo para o jogador é conhecida como feedback. O feedback ajuda os jogadores a entenderem que uma ação que eles tomaram. Pode contribuir para aprender como o jogo funciona e adicionar uma camada extra de polimento que torna um recurso mais satisfatório de usar. Alguns exemplos de feedback incluem:

• Um inimigo reproduzindo sua animação de reação de "acerto" para indicar que tomou dano da arma do jogador
• Um botão que muda de cor para indicar estado de hover, pressionado e liberado (selecionado)
• Um efeito sonoro de caixa registradora "cha-ching!" tocando quando o jogador completa uma compra
• Uma barra de progresso enchendo à medida que o jogador completa os objetivos da missão

Quando o feedback está ausente ou é insuficiente, os jogadores podem não saber o que realizaram, entender se os efeitos foram bons ou ruins, ou mesmo saber se o recurso que estão usando está funcionando corretamente ou apresentando falhas.

Design de fluxos

Múltiplas interações são frequentemente necessárias para que um jogador complete um objetivo. Designers de UX se preocupam com como os jogadores navegam de uma ação, tela de UI ou escolha para a próxima e garantem que esses caminhos sejam lógicos e convenientes.

Por exemplo, para equipar um item em um avatar em Berry Avenue RP, um jogador deve:

• Encontrar e tocar o botão Avatar
• Selecionar uma categoria de item (face, cabeça, pescoço, etc)
• Rolagem para encontrar um item de interesse
• Tocar no item para equipá-lo em seu avatar
• Encontrar e tocar no botão Concluído para sair da personalização do avatar

Esses passos realizados juntos representam o fluxo de personalização do avatar. Esse fluxo é simples e direto, com o menor número possível de passos necessários para equipar um item. Como os jogadores não precisam executar muitas ações ou pensar muito sobre o que precisam fazer, esse fluxo é baixo em fricção, uma medida do esforço necessário para alcançar um objetivo.

Projetar fluxos eficientes e de baixa fricção requer uma consideração cuidadosa dos casos de uso. Esses casos de uso podem ser expressos como objetivos do jogador, como:

• Querer poder modificar rapidamente um avatar
• Encontrar itens facilmente durante a modificação
• Visualizar itens antes da seleção
• Remoção fácil de itens após a seleção

Esses objetivos então guiam o design de UI e UX do recurso:

• Os jogadores acessam o recurso de personalização do avatar através de um botão proeminente no HUD e podem imediatamente começar a equipar itens em seus avatares
• Abas organizam os itens em categorias convenientes, e o campo de pesquisa permite que os jogadores procurem itens diretamente
• Os itens são visualizados no avatar instantaneamente
• Os jogadores podem remover o item tocando nele novamente para deselecionar, ou tocando nele na lista de itens equipados

Os designers podem então começar a dispor a UI e planejar os passos que os jogadores tomarão para completar o objetivo de modificar seus avatares. Esse processo pode ser auxiliado pelo uso de um fluxograma, que representa visualmente as ações dos jogadores enquanto navegam pela UI. Esses diagramas podem ajudar a identificar etapas negligenciadas, pontos problemáticos onde os passos são confusos ou inconvenientes, e fricção excessiva.