2 - Princípios no design de interfaces gráficas

Eu tinha um professor que sempre dizia que tudo na vida era uma solução de custo-benefício: o que você quer versus o que você pode comprar. Claramente, ele não conhece o pessoal lá em Brasília... No design de interface, esse tipo de balanceamento e escolha está muito presente na dualidade Simplicidade x Profundidade.

Uma interface é simples quando ela apresenta poucos elementos visuais para o usuário. Isso significa manter poucos elementos ou opções em uma mesma tela. Se precisamos colocar muita informação de uma vez só, é normal que ela seja quebrada em várias telas ou menus diferentes para que se possa manter cada um deles mais simples, e fácil de visualizar por parte do usuário. Claro, às vezes é necessário ter uma interface mais complexa: o número de elementos é alto, mas existe uma conexão lógica entre eles que não permite a divisão para outras telas, até para não prejudicar o sentido das informações e, por tabela, o entendimento do jogador!

A profundidade de uma interface se refere ao encadeamento das telas do jogo: quanto maior a sequência de ações ou telas que o usuário tiver que navegar para chegar a uma informação, mais profunda dizemos que é a interface. Por exemplo, se para chegar em um menu de equipamento do usuário, você precisa ir para uma tela de informações do jogo, depois uma tela do personagem, uma tela de itens e por fim selecionar o equipamento, você passou por quatro telas distintas para chegar na informação desejada. Logo a profundidade dessa interface é 4.

E é aí que está o balanceamento entre profundidade e simplicidade: o ideal é que o usuário acesse qualquer informação do jogo com poucas ações (uma profundidade de no máximo 3 é uma boa prática). Para garantir uma profundidade curta, por vezes é necessário inserir mais informações em cada uma das telas, aumentando a sua complexidade para o usuário. O projeto da interface fica então dependente de o quanto conseguimos deixar ela simples, sem aumentar demais a profundidade de navegação! É o tipo da coisa que só se começa a ter um feeling quando você faz ou joga muitos jogos, e conhece vários tipos de interface. Quem nunca pegou um jogo e intuitivamente achou a interface horrorosa? Estou falando de você, Oblivion!

Uma das principais críticas a essa interface é que não fizeram uma boa portabilidade para computador, mantendo um esquema voltado para o controle dos consoles. Outro problema dela é a proporção de uso de espaço na tela, mas falamos disso já já!

Outro aspecto importante em uma interface é a organização visual: como os itens são alinhados e espaçados entre si. O cérebro humano tem TOC, então ele gosta de ver padrões e coisas certinhas, isso deixa a gente confortável. Coisas desalinhadas fazem a gente querer arrumá-las, dá um senso de instabilidade muito grande! O alinhamento se refere ao posicionamento dos elementos em função de um referencial maior, como a tela. O espaçamento diz respeito ao quão distantes eles estão um do outro.

Também existe contraponto quando tocamos na questão de unidade visual x variação: normalmente agrupamos padrões de acordo com características visuais dos objetos, como formato, cor, tamanho. É outra coisa que o danado do cérebro gosta de fazer: estabelecer relações entre itens parecidos. Dessa forma, elementos que estão dando um determinado tipo de informação costumam possuir uma representação visual similar, e dizemos então que eles reforçam a unidade visual da interface. Por outro lado, elementos que apresentam contraste em um dos seus atributos facilitam a separação lógica de itens e agrupamento visual de conjuntos de informações diferentes. Eles adicionam à variação de elementos visuais.

Um conceito importante a que se deve atentar ao criar uma interface é a noção de movimento que os elementos do desenho podem passar para jogador: interfaces com linhas angulares que se projetam inclinadas passam uma maior sensação de fluidez e movimentação. Como se a linha estivesse fugindo da tela, e a gente fosse correr atrás dela! Uma coisa muito importante que até já falamos quando abordamos a composição de imagens: a forma como os elementos são dispostos na tela conduzem os olhos do jogador, e a forma como se planeja essa movimentação pode ser feita para facilitar que ele enxergue as informações da tela. Perceba como na figura abaixo, o traçado da curva leva seus olhos direto até o horizonte, para observar a sua rota.

Outro tópico é a questão do balanceamento de uma interface. Isso refere-se à concentração de elementos em regiões específicas da interface. Se os elementos estão todos agrupados em uma única região (na parte de baixo, ou na lateral), significa que o jogador estará prestando mais atenção nessas partes da tela, e elas passam a ter mais “peso” (importância) para o jogador.

Existem duas formas padrão de se balancear uma interface. O balanceamento simétrico divide os elementos visuais por igual, de forma que se passarmos uma linha cortando a interface no meio, teríamos a mesma quantidade de elementos visuais em cada lado da imagem. Já no balanceamento assimétrico, normalmente se tem uma ideia de que as “massas” de elementos visuais são iguais: podemos ter um objeto enorme na esquerda, e vários objetos menores na direita. O que importa é que, se juntássemos tudo, eles estariam em tamanhos equivalentes! Claro que também existe a opção de deixar a interface desbalanceada intencionalmente, como parte da sensação que se deseja passar ao jogador!

Um dos pontos críticos na questão do balanceamento de uma interface é o uso do espaço de tela para a HUD: queremos que o jogador tenha uma boa visualização do mundo do jogo, logo essa interface tende a ser desbalanceada por natureza, com a concentração de informações, menus e botões ficando nas extremidades da tela. É essencial que exista uma avaliação de quais informações serão exibidas na HUD, para evitar o uso de espaço de tela com dados que não serão do interesse do jogador. Existem jogos inclusive que exibem as informações da HUD de forma temporária, apenas no momento em que há alguma alteração importante para o jogador.

Um item muito importante é a noção de Ponto de Foco de uma interface: quando criamos uma tela para dar informações de itens do usuário, é desejável que a interface seja pensada para dar destaque a essa informação! Isso pode inferir em um maior espaço de tela, um destaque acentuado em cores ou em zoom para a informação detalhada, dentre outras técnicas. O importante é que a informação principal que se deseja apresentar esteja fácil de ver e realçada em comparação com os outros elementos da tela. Na imagem abaixo, o foco é direcionado para o botão Play (Jogar), a principal ação do menu: