Design da Interface e UX

A interface do usuário (UI) combina design de visual artístico com design de informação centrado no usuário para produzir menus, layouts de loja, exibições de cabeça (HUDs) e outros recursos que os jogadores interagem. A experiência do usuário (Experiência do usuário) relaciona-

Interface

A interface do usuário compartilha informações vitais, como pontos de hit, metas de missão e preços que permitem que os jogadores tomem decisões e naveguem pelo jogo. Como é muitas vezes a maneira principal pela qual os jogos comunicam com o usuário, a UI é crucial para a experiência dos jogadores. Mal projetada, a UI pode deixar os jogadores confusos e frustrados e levar à baixa retenção, enquanto o design de excelência pode contribuir para a engajamento e monetiz

• Priorização
• Atenção
• Língua Visual
• Convenções
• Consistência

Priorização

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

• O que o jogador está fazendo neste momento?
• Qual é a coisa mais importante que eles devem estar cientes ou ter acesso?
• Que escolhas eles têm para fazer?
• Que informações eles precisam para fazer essas escolhas?
• Como eles se envolverão nessas escolhas com mais frequência?

Informações e recursos importantes mudam ao longo do curso de um jogo, dependendo de fatores como o papel que o jogador assumiu, sua localização no mundo do jogo e os itens que eles contêm. A interface do usuário 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 garante que os jogadores sempre tenham o que eles precisam, sem a bagunça de tudo o que eles não.

Exemplos

Elementos irrelevantes podem causar confusão e distração. RPG de feitiço vinculado tem uma interface limpa e minimalista que é particularmente crucial para interfaces móveis, pois pequenas telas podem facilmente se sobrecarregar com botões, telas e texto excessivos.

Em Super Striker League, as interações do jogador variam com o controle da bola. Sem a bola, os jogadores podem Correr e Enfrentar para recuperar o controle. Uma vez em posse, os botões são alterados para Deke e Pass, permitindo que os jogadores desviem dos oponentes e passem a bola. Ao alternar esses botões, a interface fica contextualmente útil, evitando distrações desnecessárias.

Em O Jogo de Sobrevivência, os jogadores precisam estar cientes de seu status de saúde e 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 estiverem difíceis de encontrar ou faltando, a sobrevivência se torna mais desafiadora e innecesariamente frustrante.

Atenção

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

• Cor: Cores brilhantes chamam a atenção mais do que cores opacas. Use tons vibrantes para textos, botões e outros elementos, e tons silenciosos para tons menos significativos. Isso aumenta a visibilidade e reduz a distração.
• Tamanho: Elementos maiores são mais visíveis e percebidos como importantes em comparação com os menores.
• Espaço: Elementos encirclados por espaço negativo amplo ou almofada são chamativos.
• Proximidade: Grupos de elementos implicam uma conexão. Ao colocar elementos e itens relacionados um ao outro, os jogadores podem entender sua associação e localizá-los mais facilmente.
• Movimento: Elementos animados são atraídos. Mesmo pequenos movimentos podem chamar a atenção. Efeitos de partículas, controle de controle e setas animadas são frequentemente usados em tutoriais para orientação.

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

Exemplos

In Jailbreak 's season pass UI, uma faixa de ouro amarelo dourado está abaixo dos ícones exclusivos da temporada, chamando a atenção para as recompensas premium e tornando-as visualmente distintas das gratuitas.

Em Dragon Adventures, a prioridade visual é dada ao maior conjunto de moedas pelo aumento de seu tamanho e separação com mais espaçamento, para distinguí-lo de conjuntos menores.

Em Tower Defense Simulator, tanto o tamanho quanto a proximidade são usados para visualizar e diferenciar skins diárias de caixas diárias.

Língua 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 entender o que estão vendo. Uma linguagem visual é um conjunto de escolhas de design deliberadas e consistentes que fornecem informações de uma olhada sobre o propósito, status, associações e relevância de um elemento. Algumas das utilidades para linguagem visual incluem:

Ícones

Ícones podem empregar uma identidade visual que transmite significado e associações. Por instância, í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 prevalecente de entrada do jogador, os botões devem ser fáceis de identificar. Habilitar botões em um contêiner, como uma cor ao redor do texto ou ícone, os distingue do fundo, fazendo-os parecer interativos. Adicionar destaques ou sombras pode melhorar sua aparência tátil ao sugerir profundidade 3D.

Texto

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

Loja de Roupas em Ventos da Fortuna ”

Uma vez que o idioma visual foi projetado, ele pode ser documentado em um Guia de Estilo, um conjunto de regras e exemplos que ajudam a todos na equipe a entender como aplicar o idioma consistentemente em todo o jogo.

Convenções

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

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

Dado o uso amplamente difundido, os jogadores geralmente estão familiarizados com tais convenções. Ao usar essa familiaridade, você pode tornar uma interface mais intuitiva e menos necessária para instruções no jogo. Jogar jogos dentro do gênero de seu alvo pode ajudar a identificar as convenções que os jogadores podem reconhecer. Um designer de UI pode optar por uma abordagem única para melhorar a adaptação de seu jogo, mas conhecer essas convenções informa sua decisão de fazer.

2> DOORS2>

Consistência

Seja qual for a decisão que um designer de UI tomar, ela deve ser consistente em todo o jogo. A consistência ajuda os jogadores a navegar no jogo mais eficientemente e impede confusão e frustração.

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

• A estatística "Saúde" aparece em verde em todo o texto, ícones relacionados e na barra de saúde.
• Qualquer vez que o diálogo do NPC menciona um item no jogo, ele é destacado em negrito.
• Os botões de fechamento sempre são redondos, vermelhos e contêm uma X branca, aparecendo apenas no canto superior direito de uma caixa de diálogo.
• Quando um jogador não pode pagar um item na comprar, o preço é exibido em vermelho.

Essas escolhas são deliberadas, visando facilitar a compreensão e a navegação do jogador. Aplicando-as consistentemente, os jogadores podem associar elementos relacionados, identificar itens importantes, desenvolver memória muscular, tomar decisões rápidas e passar mais tempo imersos no jogo.

Experiência do usuário

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

Entendendo Jogadores

Um objetivo primário 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 uma compreensão dos próprios jogadores, o público-alvo para um jogo. Ao identificar jogadores de uma experiência, considere o seguindo:

• Demografia: A demografia ajuda a informar as escolhas de design revelando informações genéricas sobre um grupo de jogadores. Por exemplo, os jogadores mais jovens geralmente são mais prováveis de jogar em dispositivos móveis ou tablets do que em computadores pessoais, o que geralmente prioriza a design e polimento da experiência do usuário móvel.

• Nível de Experiência: Os desenvolvedores podem optar por projetar para jogadores com pouca experiência de jogos, uma quantidade significativa ou algum lugar no meio. As interações que são familiares para jogadores experimentados, como tocar uma tecla para equipar um item em uma barra de ferramentas ou pressionar c para agachar, podem não ser óbvias para jogadores inexperientes e exigirão uma mensagem ou treinamento adicional.

• Familiaridade com Gêneros: Semelhante ao nível geral de experiência, a familiaridade com gêneros reflete o nível de experiência dos jogadores com um tipo específico de jogo. Jogos que caem em gêneros populares no Roblox, como Roleplay, Survival Horror e First-Person Shooter, geralmente têm muitos jogadores potenciais que jogaram um jogo similar antes. Jogos em outros gêneros

• Estilo de Jogabilidade: Os jogadores muitas vezes favor tipos específicos de jogar, como competição e coleta de conquistas, exploração e cooperação. Essas preferências não são apenas refletidas nas mecânicas de jogos que os jogadores preferem, mas também influenciam as decisões de UX. Os designers consideram quais interações priorizar, quais polir e quais apresentar aos jogadores. Eles também consideram as escolhas

Depois de considerar esses fatores e selecionar um grupo de jogadores alvo (ou grupos), conheça-os ao encontrá-los, jogar com eles e aprender sobre seus objetivos e preferências para melhor informar as escolhas de design.

Projetando Interações

Interações são recursos que permitem que os jogadores experimentem e comuniquem suas escolhas em um jogo. Os designers de UX querem que essas interações sejam intuitivas e exijam o menor número possível de explicações. Para fazer isso, eles utilizam:

• Convenções
• Metáforas
• Comentários

Convenções

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

Exemplos de convenções incluem:

• O prompt de proximidade "E" que os desenvolvedores do Roblox usam para sinalizar para os jogadores que um item é interagível se eles estiverem perto o suficiente para parecer.
• A tecla "C" permite que o avatar do jogador se agache para que eles possam pular sob obstruções ou caber em espaços apertados.
• Teclas de número equipando itens da barra de ferramentas para as mãos do avatar para que possam ser usados.
• Entrar em círculos no chão para entrar numa conferir.

As convenções se tornam estabelecidas quando uma escolha de implementação ou design cresce em popularidade devido à sua facilidade de uso. "C" para agachar, por exemplo, é fácil de lembrar devido a ser a primeira letra na palavra agachar, e está convenientemente localizado ao lado de WASD, as chaves que os jogadores usam para barra de navegação. É uma interação rápida e fácil de executar sob pressão, o que é ideal desde tent

Metáforas

Metáforas relacionam um conceito abstrato a um mais familiar, criando uma aba curta para compreensão. Neste exemplo do Spellbound Wizard RPG, o ato de jogar feitiços é realizado por desenhar cartas de um deck. A interface baseada em UI/UX do deck-based apresenta o ato de jogar feitiços, que não tem expressão real, em algo que os jogadores podem relacionar mais facilmente e rapidamente entender.

Feedback

A comunicação do jogo para o jogador é conhecida como feedback. O feedback ajuda os jogadores a entender que uma ação que eles tomaram teve um efeito no jogo. Isso pode contribuir para aprender como o jogo funciona e adicionar uma camada extra de polonês que torna uma característica mais satisfatória de usar. Alguns exemplos de feedback incluem:

• Um inimigo jogando sua animação de reação "hit" para indicar que recebeu dano da arma do jogador
• Um botão que muda a cor para indicar o estado de passar o flutuar, pressionado e solto (selecionado)
• Um efeito de som de caixa registradora "cha-ching!" toca quando o jogador completa uma comprar
• Uma barra de progresso preenche à medida que o jogador completa as metas da missão

Quando o feedback está faltando ou insuficiente, os jogadores podem não saber o que eles conseguiram, entender se os efeitos foram bons ou ruins ou até mesmo saber se a função que eles estão usando está funcionando corretamente ou experimentando bugs.

Projetando Fluxos

Múltiplas interações geralmente são necessárias para um jogador completar um gol. Os designers de UX estão preocupados com como os jogadores navegam de uma ação ou tela ou escolha para a próxima e garantir que esses caminhos sejam lógicos e convenientes.

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

• Encontre e toque no botão Avatar
• Selecione uma categoria de item (rosto, cabeça, pescoço, etc)
• Rolar para encontrar um item de interesse
• Toque no item para equipá-lo em seu avatar
• Encontre e toque no botão Feito para sair da personalização do avatar

Esses passos juntos representam o fluxo de personalização de avatar. Este fluxo é simples e direto, com o número mínimo de etapas possível necessárias para equipar um item. Como os jogadores não precisam realizar muitas ações ou pensar muito sobre o que precisam fazer, este fluxo é baixo em fricção, uma medida da força necessária para alcançar um objetivo.

Projetar fluxos eficientes e de baixa fricção requer cuidadosa consideração de casos de uso. Esses casos de uso podem ser expressos como metas de jogadores, como:

• Querer poder modificar rapidamente um avatar
• Encontrando itens facilmente ao modificar
• Vizualizando itens antes da seleção
• Remoção fácil de itens após a seleção

Esses objetivos então guiam o design da interface e do funcionalidade:

• Os jogadores acessam a personalização de avatar através de um botão prominente no HUD e podem imediatamente começar a equipar itens aos seus avatares
• As guias classificam os itens em categorias convenientes, e o campo de pesquisa permite que os jogadores procurem diretamente
• Os itens são pré-visualizados no avatar instantaneamente
• Os jogadores podem remover o item clicando nele novamente para selecionar, ou clicando nele na lista de itens equipados

Os designers podem então começar a planejar a UI e planejar os passos que os jogadores vão tomar para completar o objetivo de modificar seus avatares. Este processo pode ser auxiliado pela utilização de um fluxo de gráfico, que visualmente representa as ações dos jogadores à medida que eles navegam pela UI. Esses gráficos podem ajudar a identificar passos sobreposicionados, pontos de dor onde as ações não são claras ou desconvenientes e fric