Introdução ao design de interfaces

Fala, galera o/

Voltando a ativa aqui apenas porque deixei um assunto pendente: tutoriais de design.

Quem é mais antigo vai lembrar que prometi iniciar uma série há um bom tempo, você pode encontrar o primeiro arquivo nest link.

Eu não estou mais na área de game making, apesar da participação ativa que tive por aí entre 2001 até 2009 (tô velho) e é por isso que acabei não aparecendo mais por aqui também. Agora vamos ao que interessa.

Minha ideia inicial era uma série de tutoriais sobre os conceitos do design, o ABC da coisa, porém analisando a seção de projetos atualmente percebi que isso não era o ideal e agora vou manter o foco no que é útil para os desenvolvedores da comunidade, tentar ajudar as pessoas na parte gráfica dos seus projetos.

Temas abordados: Interfaces, composição gráfica e hierarquia, direção de arte. Tudo exclusivamente voltado aos games.

Os artigos que serão postados são longos, material para estudo mesmo, mas é para quem realmente quer se dedicar e compreender o assunto. Chega de enrolação, bora trabalhar!

A mágica das interfaces

Uma interface gráfica é a conexão entre o sistema e o usuário, ela é a responsável por fazer com que a pessoa entenda e interaja com o que é exibido na tela.


A interface gráfica do Photoshop.


Exemplo de interface do jogo Colin McRae Dirt.

"A melhor interface é aquela que você não percebe."

Não me lembro em qual livro estava essa frase, mas ela resume bem o caminho a ser pensado na criação de uma interface gráfica. Ela deve ser natural, intuitiva, quanto menos o usuário tiver que pensar para utilizar uma interface, melhor ela é.

De início, vamos analisar a tela de abertura de um game, que apesar de parecer simples é de extrema importância já que em geral é a primeira coisa que o jogador encontra.



O objetivo da tela de abertura é muito simples: permitir que o jogador inicie o game. Seja uma nova campanha ou restaurar do ponto aonde parou através da opção de load game.

Aqui o design deve ser simples, direto, o player não pode ter trabalho algum para iniciar uma partida, porém também deve ser atrativa e interessante, causar impacto. Quanto estivermos falando de direção de arte iremos ver de forma mais detalhada as questões estéticas, nossa meta aqui é a funcionalidade.

Vamos imaginar as três opções básicas: Novo jogo, carregar e opções. Junto às opções, também é preciso dar foco no logo ou título do game, identificar o que o player está prestes a começar.



Deve-se evitar concorrência entre as opções e logo, espaçar as coisas, permitir que o conteúdo em questão atraia os olhos automaticamente.

Se eu bater, tem que doer

Toda ação deve ter uma resposta, quando o usuário agir na interface, ele precisa de um reforço visual que confirme essa ação. Um botão de muda de cor ou posição já é suficiente para que o player reconheça que sua ação deu resultado. Também é comum adicionar um marcador gráfico para indicar a opção ativa atualmente.

A resposta é ainda mais importante em casos que o controle é feito por um joystick, nesse caso não a ação de clique do mouse e a navegação pelas opções do menu fica inviável sem indicar onde o cursor está atualmente.


Veja o ícone que indica a opção atualmente selecionada.

O companheiro de aventura, o HUD
HUD = heads-up display

Em um games você pode coletar moedas, acumular pontos, sofrer dano reduzindo sua energia, morrer um determinado número de vezes e mais uma infinidade de opções que variam entre cada produto.



O primeiro passo é definir o que você precisa que seja exibido na tela. Muitos desenvolvedores apenas vão distribuindo as informações sem planejamento, é muito importante que se faça uma lista prévia — pode ser no papel mesmo — com todos os itens necessários, e evitando o que é dispensável.

Para ajudar, segue uma lista de perguntas que você deveria responder.

1 - No game há alguma forma de pontuação?
Se for o caso, vamos pensar como ela irá funcionar.

1.1 - Com que frequência o jogador vai receber pontos
Se for constante, como as moedas frequentes em Super Mario World, é interessante a pontuação estar na tela o tempo todo.

Se os eventos que adicionam a pontuação ocorrem muito espaçados na fase, é conveniente que a pontuação só seja exibida por alguns segundos na hora de adicionar os novos pontos, evitando poluição visual com um elemento que é pouco alterado.

A pontuação é uma soma de ações realizadas durante o estágio, como velocidade e número de inimigos mortos, você pode deixar para exibir os pontos obtidos apenas no final da fase.

2 - O jogador sofre dano? E a estamina?

Em geral existe uma forma de energia no game, o jogador precisa saber a quantidade de erros que ele pode cometer.

Assim como a pontuação, a exibição de energia vai depender da frequência em que ela pode ser alterada. Se o risco não é frequente, não há motivo para ser exibida o tempo todo. A ausência de uma barra de energia visível a todo momento também pode contribuir para a ambientação do game, sem um indicativo constante de que o player está com pouca ou muita energia pode ajudar a transferir o foco e atenção do jogador ao cenário e outros elementos do game.

3 - Os equipamentos mudam com frequência?

O jogador pode usar metralhadoras, espadas, um cogumelo que te deixa gigante ou uma flor que te permite disparar bola de fogo. Se os equipamentos são uma constante em seu projeto, a interface DEVE indicar o que está equipado atualmente ou na reserva.

Se o há um limite de uso para o equipamento, não esqueça de deixar na tela o quanto o gamer ainda pode usa-lo.



Seja criativo

Você não precisa se prender à uma barra de energia no topo ou um número de balas no canto inferior, existem meios mais interessantes para indicar ao jogador sua situação. Vamos a exemplos.

A energia do Mario é indicada pelo estado do personagem.


Em Dead Space, a "barra de energia" está ligado ao personagem. Também perceba que o indicador de munição está anexo a arma.


E quando a situação complica

Finalizando os elementos básicos, vamos pensar quando o game precisa de uma interface mais complexa, como em um RPG. Agora nós temos muitas informações e interações para prever, o assunto é tão grande que talvez eu reserve um artigo separado apenas para detalhar esse gênero, por ora vamos nos focar apenas no básico.


Mass effect é um excelente jogo, mas em sua primeira edição possuía alguns problemas no design de seus menus que os tornavam trabalhosa algumas ações simples, principalmente nos consoles. Revisar os equipamentos em seu inventário e fazer as trocas necessárias não era tão prático.


Na série Legend of Zelda, ter uma grande quantidade de equipamentos e outros itens a serem utilizados na sua jornada é algo constante, o que complica ainda mais é que durante o jogo será preciso efetuar trocas muito frequentes desses equipamentos. Entenda a solução encontrada no Ocarina of Time e como funciona melhor do que o modelo presente em Mass Effect.

Quanto menos categorias o jogador tiver que ver para encontrar um uma poção ou menos de cliques necessários para equipar uma espada, melhor é sua interface. Lembre que o principal objetivo da boa interface é ser ágil e intuitiva, o jogador precisa poder resolver rápido o que deseja para poder voltar sua atenção àquele Boss super difícil.

Alguns fatores permitem um planejamento inicial de sua interface:

- Evite muitos scrolls, exiba o máximo que puder na tela sem que o usuário tenha que ficar usando uma barra de rolagem ou trocando de tela.
- Utilize modos prático de usar / equipar um item. Botões de atalho, como por exemplo A equipa e X exclui agiliza muito a organização de um inventário.
- Em caso de uma ação que não pode ser desfeita, como vender um item ou joga-lo fora, SEMPRE PEÇA CONFIRMAÇÃO DO JOGADOR. "Você tem certeza que deseja excluir/vender este item?"

-=-=-=-=-

Assim termina nossa introdução sobre design para games e interfaces. Eu queria poder usar alguns exemplos reais aqui da seção de projetos do site, mas pensei que alguns usuários podiam se sentir desrespeitados com críticas a seu projeto. Se alguém tiver interesse em ter seus projetos analisados no quesito, indique ele aqui no tópico que vou fazer comentários e sugestões para deixar seu jogo cada vez melhor.

O próximo artigo será um projeto de interface, aplicando toda a teoria apresentada aqui, mas leia com calma, estude, o conhecimento teórico é importante no planejamento e execução de um bom jogo.
-=-=-=-=-

Este tipo de artigo da muito trabalho para ser feito e não sei se essa seção do fórum é muito visitada, então por favor, comentem dizendo suas opiniões de dúvidas e indiquem este tópicos aos amigos de fórum quando perceberem que seu projeto está com problemas no visual. Valeu!

-=-=-=-=-
Para quem não me conhece, segue o tradicional perfil de assinatura.

Henrique-HB
Diretor de arte em publicidade e web.
Um dos responsáveis por trazer o game maker para o Brasil no início dos anos 2000. Fez parte do primeiro fórum de game maker brasileiro, a ThunderStorm em 2004 e marcou presença nos que se seguiram.

Ex-administrador do extinto site BRMaker, já escreveu também para as antigas comunidades da Maker Universe, Castelo RPG, Gaming Brasil e Unidev.

Já iniciou mais de 50 projetos independentes e não terminou nenhum até descobrir que é melhor em criar e planejar do que programar. Participou de projetos de advergames e aplicativos em agências de publicidade.

Excelente artigo!
As imagens com certeza foram muito úteis.
Espero pelos próximos.

Muito obrigado!

Excelente!

Assim como fazer uma casa não é simplesmente empilhar tijolos fazer games não é, desculpe o termo, apenas cuspir código na tela. Há toda uma ciência por de trás relacionada há experiencia de usuário que o game proporciona. Eu vejo que a maioria do pessoal está tão focado no computador e na programação do jogo que se esquece que o elemento final é humano, e o publico esta mais preocupado com a experiencia, a sensação que o game proporciona que ao código poeticamente escrito por trás.

Seu artigo destaca bem a importância de uma interface humana, intuitiva, simples e visualmente bem estruturada, ou seja, para pessoas, gostei do uso de imagens para ilustrar e de todas as dicas. Estou ansioso por mais!

Abraços!  

Bom tópico acho que eu nunca tinha pensado muito sobre esse assunto,seu tópico vai ser de grande ajuda.
Pode usar o meu projeto se quiser,o nome é The Stars Fall Down está na seção de projetos em andamento lá tem a imagem da tela inicial e da hud do game e também um demo,ficaria grato em ouvir sua opinião.

Realmente muito bom.

Me lembro da primeira vez que joguei Dead Space.
Todas as interfaces são paineis projetados e/ou fazem parte do próprio ambiente, a imersão que isso proporciona é incrível.

Toda a HUD de Diablo 3 por exemplo, é feita com tantos detalhes que eles provavelmente devem ter uma equipe só para isso durante todo o projeto.

PedroX escreveu:Excelente artigo!
As imagens com certeza foram muito úteis.
Espero pelos próximos.

Muito obrigado!

Valeu, já estou preparando o próximo e espero conseguir publicar logo.

Tiago Lima escreveu:Excelente!

Assim como fazer uma casa não é simplesmente empilhar tijolos fazer games não é, desculpe o termo, apenas cuspir código na tela. Há toda uma ciência por de trás relacionada há experiencia de usuário que o game proporciona. Eu vejo que a maioria do pessoal está tão focado no computador e na programação do jogo que se esquece que o elemento final é humano, e o publico esta mais preocupado com a experiencia, a sensação que o game proporciona que ao código poeticamente escrito por trás.

Seu artigo destaca bem a importância de uma interface humana, intuitiva, simples e visualmente bem estruturada, ou seja, para pessoas, gostei do uso de imagens para ilustrar e de todas as dicas. Estou ansioso por mais!

Abraços!  

Isso é uma coisa que eu realmente vejo como falha na comunidade de gamer maker brasileira, são poucos que se preocupam em estudar a parte conceitual da área, o foco tem sido muito técnico. Um bom game não é feito apenas pela etapa de programação.

wellingtonmr escreveu:Bom tópico acho que eu nunca tinha pensado muito sobre esse assunto,seu tópico vai ser de grande ajuda.
Pode usar o meu projeto se quiser,o nome é The Stars Fall Down está na seção de projetos em andamento lá tem a imagem da tela inicial e da hud do game e também um demo,ficaria grato em ouvir sua opinião.

Vou dar uma olhada no seu projeto depois. Valeu!

Kabeção escreveu:Realmente muito bom.

Me lembro da primeira vez que joguei Dead Space.
Todas as interfaces são paineis projetados e/ou fazem parte do próprio ambiente, a imersão que isso proporciona é incrível.

Toda a HUD de Diablo 3 por exemplo, é feita com tantos detalhes que eles provavelmente devem ter uma equipe só para isso durante todo o projeto.

A blizzard capricha em cada detalhe de seus jogos, se não me engano a equipe de interface deles é até um pouco grande até, tudo é muito bem projetado.

Pra quem se interessar aqui tem um videos legais.
Concept art da ui de Darksiders se fosse portado para iPad: https://www.youtube.com/watch?v=zCBBQm2QAFY
E o desenvolvimento da ui the Knightmare Tower: https://www.youtube.com/watch?v=IwIFzb9NxIk

E minha coleção de referencias no Pinterest: http://www.pinterest.com/christianafonso/user-interfaces/

Existe até mesmo um site asiático de exposição de arte especifico para designer de interface: http://www.gameui.cn/

Como qualquer coisa na área de criação, quanto mais você vê, mas criativo será.