A interface de usuário (Experiência do usuário) combina design visual artístico com design de informação centrado em comunicação para produzir menus, layouts de loja, exibições de cabeça (HUDs) e outras interfaces com as quais os jogadores interagem.A experiência do usuário relaciona-se à forma como os jogadores interagem com o jogo, à maneira como eles tornam suas escolhas conhecidas ao jogo e à maneira como se movem de uma escolha para a outra.Embora a UI e a UX muitas vezes trabalhem de forma colaborativa, a UX carrega um foco mais significativo na interatividade e na experiência do jogador, em vez do design visual e informativo da UI.
UI
A interface compartilha informações vitais, como pontos de acerto, objetivos de missão e preços que permitem que os jogadores tomem decisões e naveguem pelo jogo.Porque muitas vezes é a principal maneira pela qual os jogos se comunicam com o jogador, a interface do usuário é crítica para a experiência do jogador.Uma interface de usuário mal projetada pode deixar os jogadores confusos e frustrados e levar à baixa retenção, enquanto uma interface de usuário projetada com perfeição pode contribuir para o engajamento e a monetização.A interface de usuário projetada eficaz 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 de 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 garanta que seja tanto acessível quanto fácil de localizar.Considere essas perguntas:
- O que o jogador está fazendo neste momento?
- Qual é a coisa mais importante para que eles estejam cientes ou tenham acesso?
- Que escolhas eles têm para fazer?
- Que informações eles precisam para fazer essas escolhas?
- Com que frequência eles se envolverão nessas escolhas?
Informações e recursos importantes mudam durante o curso de um jogo, dependendo de fatores como o papel que o jogador desempenha, sua localização no mundo do jogo e os itens que eles possuem.A interface de 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 precisam, sem a bagunça de tudo o que não têm.
Exemplos
Elementos irrelevantes podem causar confusão e distração. RPG Spellbound > tem uma interface de usuário limpa e minimalista que é particularmente crucial para interfaces móveis, pois pequenas telas podem facilmente ficar sobrecarregadas com botões, telas e texto excessivos.
Em Super Striker League, as interações do jogador variam dependendo de se eles controlam a bola.Sem a bola, os jogadores podem Correr e Enfrentar para recuperar o controle.Uma vez em posse, os botões mudam para Deke e Pass, permitindo que os jogadores desviem dos oponentes e passem a bola.Ao alternar esses botões, a interface permanece contextualmente útil, evitando distrações desnecessárias.
Em O Jogo de Sobrevivência, os jogadores precisam estar cientes de seu statusde 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 sobrevivência.Se essas informações ou ferramentas forem difíceis de encontrar ou ausentes, a sobrevivência se torna mais desafiadora e, desnecessariamente, frustrante.
Atenção
Apesar de uma interface minimalista, priorizada e contextualizada, os jogadores ainda podem precisar de ajuda para localizar o que 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 as chatas.Use tons vibrantes para texto crucial, botões e outros elementos, e tons suaves para os menos significativos.Este contraste aumenta a visibilidade e reduz a distração.
- Tamanho: Elementos maiores são mais conspícuos e percebidos como importantes em comparação com os menores.
- Espaço: Elementos cercados por espaço negativo amplo ou padding são chamativos.
- Proximidade: Elementos agrupados implicam em uma conexão.Colocando recursos e itens relacionados próximos uns dos outros, os jogadores podem entender sua associação e localizá-los mais facilmente.
- Movimento: Elementos animados chamam a atenção.Mesmo um leve movimento pode fazer com que um elemento se destaque em meio a contrapartes estáticas.Efeitos de partículas, botões remexendo e setas animadas são frequentemente usados em tutoriais para orientação.
Moderação é a chave 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 interface de usuário do passe de temporada de Fuga, uma faixa de dourado amarelo está abaixo dos ícones exclusivos do passe de temporada, chamando a atenção para as recompensas premium e tornando-as visualmente distintas das gratuitas.
Em Aventuras de Dragão, a prioridade visual é dada ao conjunto de moedas de maior valor aumentando seu tamanho e separando-o com mais espaço, para distinguir-lo de conjuntos menores.
Em Simulador de Defesa de Torre, tanto tamanho e proximidade são usados para agrupar e distinguir visualmente as Skins de Torre Diárias das Caixas Diárias.
Linguagem visual
Além de direcionar a atenção dos jogadores para os elementos mais importantes na tela, os designers de UI desenvolvem um idioma visual para ajudar os jogadores a entender o que estão vendo.Uma linguagem visual é um conjunto de escolhas deliberadas e consistentes de design que fornecem informações de um golpe de olho sobre o propósito, status, associações e relevância de um elemento.A linguagem é construída a partir de ferramentas como forma, cor e estilo.Alguns dos usos para linguagem visual incluem:
Ícones
Ícones podem empregar uma identidade visual que transmita 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 forma prevalente de entrada do jogador, os botões devem ser fáceis de identificar.Botões de habitação 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 seu apelo tátil sugerindo profundidade 3D.
Texto
Cabeçalhos e títulos que contêm informações de alto nível significativas devem ser maiores e mais ousados do que o texto do corpo.Cores que são altamente legíveis e contrastam bem contra a cor de fundo que elas 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 o idioma visual foi projetado, ele pode ser documentado em um Guia de Estilo, um conjunto de regras e exemplos que ajudam todos na equipe a entender como aplicar o idioma de forma consistente ao longo do jogo.
Convenções
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 o diálogo quando pressionado
- A cor cinza aplicada a botões que estão atualmente inutilizáveis
- Um ícone de bloqueio cobrindo um botão ou recurso para indicar que o jogador ainda não o ganhou ou desbloqueou
Devido ao seu uso generalizado, os jogadores são tipicamente 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 possam reconhecer.Um designer de UI pode optar por uma abordagem única para se encaixar melhor no seu jogo, mas conhecer essas convenções informa seu processo de tomada de decisão.
X Fechar Botões em Vento da Fortuna , Aventuras de Dragão , Simulador de Colisão de Bots e PORTAS >
Consistência
Seja qual for a decisão que um designer de UI tome, ela deve ser aplicada de forma consistente durante todo o jogo.A consistência ajuda os jogadores a aprender a navegar o jogo de forma mais eficiente e impede a confusão e a frustração.
Aqui estão alguns exemplos de consistência de UI em um jogo:
- O status "Saúde" aparece em verde em todo o texto, ícones relacionados e barra de saúde.
- Sempre que o diálogo do NPC menciona um item no jogo, ele é destacado em negrito.
- Botões de fechamento 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 um item na comprar, o preço é exibido em vermelho.
Essas escolhas são deliberadas, com o objetivo de facilitar a compreensão e navegação do jogador.Aplicando-as de forma consistente, elas 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.
Experiência do usuário
O design de UX se relaciona com a forma como os jogadores interagem com o jogo, como tornam suas escolhas conhecidas ao jogo e como se movem de uma escolha para a outra.Embora a UX muitas vezes funcione de mãos dadas com a interface do usuário (UI), ela é mais focada em interatividade e experiência do jogador do que no design visual e informativo da UI.
Entendendo jogadores
Um objetivo principal do designer de UX é criar interações e fluxos intuitivos, intrusivos e convenientes para os jogadores usarem.Esse processo começa com uma compreensão dos próprios jogadores, da audiência pretendida 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, jogadores mais jovens são, em geral, mais prováveis de jogar em dispositivos móveis ou tablets do que em computadores pessoais, portanto, jogos destinados a essa audiência muitas vezes priorizam projetar e polir a experiência do usuário móvel.
nívelde experiência: Os desenvolvedores podem optar por projetar para jogadores com pouca experiência de jogo, uma quantidade significativa ou em algum lugar no meio.Interações que são familiares para jogadores experientes, como clicar em uma tecla de número para equipar um item em uma barra de ferramentas ou pressionar c para agachar, podem não ser óbvias para jogadores inexperientes e exigem mensagens adicionais ou treinamento.
Familiaridade com gênero: Semelhante ao nível de experiência geral, a familiaridade com gênero reflete o nível de experiência dos jogadores com um tipo específico de jogo.Jogos que entram em gêneros populares no Roblox, como Roleplay, Survival Horror e First-Person Shooter, provavelmente terão muitos jogadores potenciais que já jogaram um jogo similar 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: Jogadores frequentemente favorecem tipos específicos de jogar, que variam de competição e coleta de conquistas a exploração e cooperação.Essas preferências não se limitam apenas às mecânicas de jogo 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 levam em consideração a mentalidade que os jogadores terão quando se envolverem com essas interações e as emoções que pretendem despertar neles.
Depois de considerar esses fatores e selecionar um grupo alvo de jogadores (ou grupos), conheça-os ao encontrá-los, jogar com eles e aprender sobre seus objetivos e preferências para informar melhor as escolhas de design.
Projete 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 a menor explicação possível.Para fazer isso, eles utilizam:
- Convenções
- Metáforas
- Comentários
Convenções
Convenções são designs e princípios de UX que os jogadores já podem 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 é interativamente se estiverem perto o suficiente para que ele apareça.
- A tecla "C" que permite que o avatar do jogador se agache para que possam mergulhar sob obstruções ou encaixar em espaços apertados.
- Itens de equipamento de teclas de número da barra de ferramentas para as mãos do avatar para que possam ser usados.
- Caminhar em círculos no chão para entrar na fila para uma conferir.
Convenções são estabelecidas quando uma implementação ou escolha de design específica ganha popularidade devido à sua facilidade de uso.“C” para se agachar, por exemplo, é fácil de lembrar porque é a primeira letra da palavra agachar e está convenientemente localizado ao lado de WASD, as teclas que os jogadores usam para barra de navegação.É 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 próxima é 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 de magia é realizado ao sortear cartas de um baralho.A interface baseada em cards torna o ato abstrato de lançar feitiços, que não tem expressão na vida real, algo que os jogadores possam se relacionar mais facilmente e entender rapidamente.
Comentários
A comunicação do jogo para o jogador é conhecida como feedback.Feedback ajuda os jogadores a entender que uma ação que eles tomaram teve um efeito no jogo.Pode contribuir para aprender como o jogo funciona e adicionar uma camada extra de polonês que torna um recurso mais satisfatório 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 de cor para indicar o estado de flutuar, depressão e liberação (selecionado)
- Um efeito de som de caixa registradora "cha-ching!" tocando quando o jogador completa uma comprar
- Uma barra de progresso enchendo à medida que o jogador completa os objetivos da missão
Quando os feedbacks estão faltando ou insuficientes, os jogadores podem não saber o que conseguiram, entender se os efeitos foram bons ou ruins ou até mesmo saber se o recurso que eles estão usando está funcionando corretamente ou enfrentando bugs.
Fluxos de design
Muitas interações são frequentemente necessárias para que um jogador complete um objetivo.Os designers de UX estão preocupados com a forma como os jogadores navegam de uma tela de ação ou 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:
- Encontre e toque no botão de Avatar
- Selecione uma categoria de item (rosto, cabeça, pescoço, etc)
- Rolar para encontrar um item de interesse
- Clique no item para equipá-lo em seu avatar
- Encontre e toque no botão Pronto para sair da personalização do avatar
Essas etapas tomadas juntas representam o fluxo de personalização de avatar.Este fluxo é simples e direto, com o mínimo de etapas possível necessárias para equipar um item.Porque os jogadores não precisam realizar muitas ações ou pensar muito sobre o que precisam fazer, esse fluxo é baixo em atrito, 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 metas do jogador, como:
- Querendo ser capaz de modificar rapidamente um avatar
- Encontrar itens facilmente enquanto modifica
- 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 da experiência da funcionalidade:
- Jogadores acessam a funcionalidade de personalização de avatar através de um botão proeminente no HUD e podem imediatamente começar a equipar itens em seus avatares
- As guias organizam os itens em categorias convenientes, e o campo de pesquisa permite que os jogadores pesquisem itens diretamente
- Itens são pré-visualizados no avatar instantaneamente
- Jogadores podem remover o item tocando nele novamente para desmarcar, ou tocando nele na lista de itens equipados
Os designers podem então começar a delinear a interface de usuário 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 diagrama de fluxo, que visualiza as ações dos jogadores à medida que navegam pela interface.Esses diagramas podem ajudar a identificar etapas esquecidas, pontos de dor onde as etapas são in claras ou inconvenientes e fricção excessiva.
