PT-br

Enquanto jogava o game eletrônico Hitman, eu sentia muita dificuldade em entender o menu de opções do jogo. Ao apertar pause durante uma seção, você tem diversas alternativas de modo de jogo como Campanha, Jogar Online, Destinos, Opções, etc. 

Após muita frustração, decidir fazer um estudo com sugestões de melhorias em navegabilidade e estética em geral. Focando em melhorias, também poderia aprender melhor sobre design de UI para games, algo que não tive oportunidade de criar.

Processo e problemas

Primeiro identifiquei os pontos que achava crítico, que são: 

  1. Hierarquia de informação

Sobre hierarquia, identifiquei que o menu de navegação horizontal estava escondendo itens e apesar de estar no topo, a solução estética utilizada não destacava o menu nem transmitia um entendimento claro de qual seção você está. Dentro da seção, os títulos e subtítulos das opções estão muito deslocados em relação ao conteúdo, desrespeitando os conceitos de proximidade da Gestalt.

  1. Navegabilidade

No quesito navegabilidade, a opção de botão a ser pressionado no controle (X-Box One) não são muito naturais, utilizando os botões traseiros (LB e RB) do controle ao invés dos comando direcionais.

  1. Iconografia

A família de ícones original funciona, porém misturavam estilos sólidos com line work. Em algumas ocasiões os ícones se repetiam mesmo ilustrando opções diferentes.

  1. Refinamento estético

Sobre refinamento estético, identifiquei que em alguns soluções originais, a opção utilizada não fazia sentido com a identidade visual da marca do logo, que é um retângulo sólido e simples. Utilizaram cantos arredondados para sinalizar uma opção seleciona e mesmo assim essa opção se perdia com as outras, pois no contexto de carrossel não há nenhuma outra informação desse feedback.

Soluções e hipóteses

Reorganizei totalmente os elementos na tela, fazendo várias alterações que supus serem importantes. Primeiro reservei o topo e o rodapé para informações secundárias e acrescentei o logo do game para identificação imediata.

Criei um novo menu vertical onde deixei todas as opções visíveis, assim como um esquema de hierarquia visual com cores, tamanho e peso das fontes para identificar qual seção você está observando.

Escolhi uma família de ícones em line work, aumentando seu tamanho e seguindo boas práticas de usabilidade, assim o novo menu ficou com uma rápida identificação dos item.

Também alinhei os títulos e subtítulos das opções com suas ilustrações, assim o relacionamento entre os dois elementos ficaram com maior coerência.

Já no menu “Options”, criei um submenu seguindo os mesmos conceitos visuais comentados anteriormente, mantendo assim a consistência dos componentes e a experiência do usuário.

EN

While playing the Hitman video game, I had a hard time understanding the game’s options menu. When pausing during a gameplay, you have several game mode alternatives such as Campaign, Play Online, Destinations, Options, etc.

After much frustration, I decided to make a study with suggestions for improvements in navigation and aesthetics in general. By focusing on these improvements, I could also learn better about the UI design for games, something you do not have the opportunity to create.

Process and problem identification

First I identified the points that I considered critical, which are:

  1. Information hierarchy

Regarding the hierarchy, the horizontal navigation menu is hiding items and, although it is at the top, the aesthetic solution used do not highlight the menu nor does it convey a clear understanding of which section you are. Within the section, the option titles and subtitles are very out of place in relation to the content, disregarding Gestalt’s proximity concepts.

  1. Navigability

The buttons you need to press on the controller (X-Box One) to change between items in the menu are not very natural, using the rear buttons (LB and RB), instead using the directional buttons.

  1. Iconography

The original icon family works, but they are mixed with solid and outline styles. On some occasions, the same icons are repeated, illustrating different options.

  1. Aesthetic refinement

Regarding the aesthetic refinement, some options does not make sense with the visual identity of the logo brand, which is a solid and simple rectangle. Was used rounded corners to show a selected option and it looks lost beside others.

Solutions and hypotheses

I completely rearrange the elements on the screen, making several changes that I considered important. First I reserve the top and footer for secondary information and add the game logo for immediate identification.

I created a new vertical menu where all options are visible, such as a visual hierarchy scheme with cores, font size and weights to identify which section you are looking at.

For the icon`s family I have opted for an outline style, changed their size and followed some good usability practices. The new menu has a better and quick identification of the items.

The titles and subtitles of the options with their illustrations are also displayed next to each other and the relationship between the two elements became more coherent.

In the “Options” menu, I created a submenu following the same visual concepts previously used, thus maintaining the consistency of the components and the user experience.