Sistemas de mira de mecas, menus de capacete, contadores de munição, ícones de ação do personagem, menus de gerenciamento de distrito, diagnósticos de espaçonave, indicadores de telecinese em cadeiras, interfaces para criar armas, e menus de assassinato. São todas UI ou "interfaces de usuário" e são criadas por designers de UI.
Aqui vou mostrar tudo sobre design de UI, sua relação com design visual e qual a diferença do design de UX.
Interface de usuário, ou UI, é a interface pela qual o jogador interage com o jogo. UI é às vezes chamada de UX, mas as duas significam coisas diferentes.
UI é a interface de usuário em si ou, basicamente, todos os elementos que formam a interface de usuário.
UX, porém, é a abreviação de (user experience) "experiência de usuário". A experiência de usuário é toda a arquitetura de informações de um jogo. Basicamente, ela aborda onde guardar toda a informação do jogo e como essa informação é acessada pelo jogador.
Na prática, um designer de UX geralmente trabalha primeiro. Seu foco é tornar a interface uma boa experiência, ajudando os jogadores a obter as informações de que precisam com o mínimo de ações.
Essencialmente, eles cultivam o fluxo, ou a jornada do jogador ao interagir com diferentes partes do jogo.
Os designers de UI pegam essa experiência mapeada e criam os elementos visuais e os detalhes, possivelmente tornando o fluxo ainda mais intuitivo e fácil de navegar para os jogadores. No fim, designers de UI e UX precisam trabalhar juntos e bem próximos e às vezes são até combinados na mesma função.
Certo, agora vamos mergulhar nos fundamentos básicos desta arte.
O design de UI segue os princípios fundamentais do design visual.
Design visual pode remeter a muitas coisas: logotipos, tipografia, embalagens, layouts de impressão, sites, basicamente qualquer coisa relacionada à estética de um produto.
Mas na sua essência, design visual tem a ver com apresentar informações complexas de maneira simples de modo que seu público entenda e interaja intuitivamente.
E é por isso que conhecer seu público é tão importante. Para criar um sistema que seu público possa navegar de maneira fácil e intuitiva, você precisa conhecer muito bem quem ele é e como pensam.
Como, com que tipo de coisas eles se conectam? Como e onde eles estarão ao interagir com a UI? Que tipo de informações estão buscando? E quando?
Por exemplo, jogar um jogo no computador é bem diferente de jogar o mesmo jogo no celular ou console.
Se analisarmos a UI do “Fortnite”, podemos ver como essas diferenças alteram a interface no PC e no celular.
PC
Celular
E quanto ao gênero do jogo?
Alguns gêneros exigem uma UI robusta que exiba uma tonelada de informações de forma acessível e clara. Como um jogo de cartas, por exemplo “Eternal”.
É 90% UI. Assim como também jogos 4X e de simulação que têm muitas informações e precisam de muita UI.
Outros gêneros, como jogos mais narrativos, podem usar uma UI mínima se o jogador não precisar de tanta informação em tempo real, como por exemplo em GTA V.
Mas a UI é muito mais do que a barra de estados ou uma sobreposição na tela do jogo. Designers de UI precisam criar coisas como mapas de níveis, telas de seleção de personagens, telas de inventário, editores de níveis, árvores de talento sofisticadas, experiências de história e da web, janelas de missões e muitas outras coisas.
Como fazer tudo funcionar junto?
Uma característica única do design visual, principalmente na UI, é que somos responsáveis por criar um ecossistema para o jogo todo.
O objetivo é que cada parte da experiência de jogo seja unificada e tenha um bom fluxo. Isso significa que precisa haver consistência por toda a experiência de jogo. É preciso ter regras para o significado por trás de diferentes cores, texto, posição na tela...
Tudo que eles fazem afeta todo o resto no jogo. Dá para analisar o desenvolvimento da atualização do cliente de um jogo. Os designs começam a atualização do cliente definindo a temática base da UI. Depois criam regras e diretrizes específicas para o estilo, como tipografia, iconografia, cor, linguagem de formas, animação, tudo que você vê e interage no cliente.
Dentre todas as infinitas possibilidades, como escolher um layout?
Parece que o layout é uma parte muito importante do design visual e UI.
O layout é como um quebra-cabeça e descobrir todos os modos diferentes de montá-lo é uma das partes mais divertidas do design visual. O layout é crucial porque afeta a maneira que o espectador compreende as informações na tela.
Por exemplo, seu cérebro faz associações baseadas em coisas como proximidade de palavras e imagens. É, como colocar uma barra próxima ao nome de um inimigo nos diz que essa é a barra de Vida do inimigo, e colocar o contador de experiência ao lado de uma barra nos diz como está a progressão para o próximo nível.
Isso também afeta a velocidade com que o espectador navega essa informação. E, em jogos, geralmente precisamos obter informações cruciais muito rápido.
Parece que, se você gosta muito de layout e de organizar elementos visuais, design visual e design de UI podem ser perfeitos para você e as soluções são ilimitadas.
Não há uma única resposta certa e equilibrar a familiaridade e a intuição com disposições criativas é muito divertido. Você já deve ter notado que a UI e o design visual em jogos não são estáticos. Estão sempre se movendo, mudando e atualizando de acordo com a interação do jogador.
E é aí que o "motion graphics", ou "MoGraph", entra.
O "motion graphics", ou "MoGraph"
Se o objetivo do design visual é passar uma mensagem claramente compreendida, o objetivo do motion graphic é que essa mensagem seja sentida.
Então, o MoGraph apenas acrescenta polidez para melhorar a sensação?
Polidez e detalhes são divertidos e importantes, mas você não pode polir um design ruim até funcionar como você quer.
No design visual e no MoGraph, o processo de design dá prioridade à funcionalidade e experiência desejadas.
E a arte em si, sejam elementos de design visual ou animação MoGraph, precisa sempre complementar a informação repassada.
É uma pena que motion graphics não tenha uma lista de objetivos para a gente seguir. O motion graphics de UI é motivado por cinco objetivos.
Responsividade: interações são rápidas. Clicar é fluido e fácil.
Intenção: o foco leva para ações e caminhos conforme necessários.
Percepção: elementos se adaptam para responder a partir da localização.
Consistência: elementos e ações usam padrões de movimento repetidos para estabelecer comportamentos usuais.
Intuição física: elementos são estilizados para combinar com a marca do jogo e parecerem naturais. Por exemplo, que melhor forma de abrir o "Tironomicon" do que com um tiro? O movimento é afetado por forças como fricção e escala.
Fazer arte é tornar o invisível, visível. Marcel Duchamp disse isso há muitos anos e tudo que acabei de dizer contradiz completamente sua declaração.
A maioria das obras de arte é feita para ser vista e a maioria dos trabalhos de design existe para resolver um problema. Design de interface do usuário é uma fusão dos dois. É suposto resolver um problema e você nunca deveria pensar sobre isso, alguns jogos acertam isso excepcionalmente e alguns jogos erram isso excepcionalmente.
Mas, em última análise, é a única coisa que une todos os jogos quando se trata de UI em videogames, tendemos a separá-los em seis categorias distintas.
Cada uma dessas seis coisas se realiza em duas características principais sendo esse o mundo do jogo e a narrativa dos jogos. Qualquer design que você escolher tende a ligar e desligar uma dessas duas características.
Mais aqui só destacarei quatro delas (se quer saber mais sobre essas categorias clique aqui)
A interface do usuário não-Diegética fará com que o jogo informe as informações o mais rápido possível, sem se preocupar com a narrativa ou o mundo do jogo.
Elementos como barras de saúde em Street Fighter, minimapas em Call of Duty, a sobreposição de diablo e a sobreposição de League of Legends são ótimos exemplos disso. Dizendo-lhe informações e saindo do caminho.
A interface diegética é exatamente o oposto isso invoca tanto o mundo dos jogos quanto a narrativa dos jogos para transmitir informações ao jogador.
A diferença é que essas coisas têm que existir para o personagem no jogo.
Pense em Uncharted, onde Drake tem que pegar SEU caderno físico toda vez que VOCÊ quiser ver informações sobre o jogo, ou em Fallout 3, quando você tiver que pegar o pitboy para olhar seu inventário.
A interface do usuário espacial provavelmente está entre as mais interessantes do grupo, geralmente é o mais difícil de tirar e a maioria dos jogos se afasta muito, muito longe disso. Um jogo que faz esse estilo excepcionalmente bem é Splinter Cell Conviction. Quebra a narrativa para transmitir informações ao jogador, para que eles não precisem passar pelos menus ou parar o jogo.
Meta-representação é algo que é um pouco especial. Este é um aspecto ou um elemento que existe para o personagem no jogo, mas não existe para o jogador, então temos uma visão diferente.
Pense em algo como GTA 5, onde Franklin olhará para seu telefone ele olha para seu telefone físico, mas temos uma visão diferente. Modern Warfare 2 faz isso não dando ao jogador uma barra de saúde, mas sentimos sangue na tela.
Clique aqui para saber mais sobre os elementos de interfaces
O design da interface do usuário é realmente muito difícil de acertar e muito fácil de errar.
Imagine Dead Space tirando suas raízes de terror e suspense usando um sistema de interface do usuário não diegético ou imagine Uncharted arruinando seus recursos de exploração com uma linha de corrida dizendo exatamente para onde ir.
Todas essas coisas parecem óbvias em retrospectiva, mas na hora são coisas que tomam muito cuidado e atenção para realmente dar certo.
É por causa dessa dificuldade e dessa incerteza quando se trata de qual sistema de interface do usuário usar que eu sinto que design de interface do usuário e design de UX é algo que é muito subestimado quando se trata de videogames.
Comments