Shadowlands: detalhes do redesign da interface de criação de personagem

O lançamento de Shadowlands trouxe uma nova oportunidade de simplificar e reorganizar o processo de criação de personagem. Confira os bastidores na companhia do designer de interface sênior Jeff Liu para saber mais sobre o raciocínio por trás dessa recriação.

Saudações, habitantes de Azeroth! Meu nome é Jeff Liu, e eu sou designer de interface sênior na equipe de interface de usuário de World of Warcraft. Estou aqui para compartilhar algumas informações sobre o design da Criação de Personagem que foi lançado com Shadowlands. Com todas as novas opções de personalização que foram introduzidas recentemente, achamos que era uma ótima hora de abrir as cortinas e mostrar algumas das escolhas de design que fizemos na interface de usuário (IU).

Eu já tinha trabalhado na reformulação do Sistema de Transmogrificação e da Casa de Leilões. Remodelar interfaces antigas é o meu tipo de projeto preferido, por isso o redesign da tela de criação de personagem me deixou empolgadíssimo.

Isso fez parte da iniciativa de Experiência de Jogador Novo, que incluía o Rincão do Exílio, a nova área inicial. A criação de personagem é a primeira tela com a qual o recém-chegado interage, por isso queríamos dar uma modernizada para causar uma boa impressão. Como a equipe de arte de personagem também estava adicionando várias opções de personalização em Shadowlands, o momento era perfeito para a atualização da interface.

O novo visual

Para referência, a tela de criação de personagem antiga era assim:

Uma das primeiras coisas que tentamos foi dividir as telas de seleção de classe e de raça. Você escolheria sua classe na primeira tela e, na segunda, sua raça:

Neste exemplo, se quisesse jogar com um Elfo Noturno, você teria que voltar para a tela anterior, escolher outra classe e ficar indo e voltando de uma tela para outra para ver todas as opções.

É, era bem desajeitado.

Isso não deu certo, então acabamos praticamente mantendo o layout antigo e atualizando a arte. Num brainstorm de última hora, os designers de interface Cled Reed e Ray Oligan sugeriram um conceito em que as raças ficariam em lados opostos:

Um destaque dessa disposição é que a oposição entre a Horda e a Aliança transmite instantaneamente a ideia de guerra entre facções. Adoramos a simplicidade e a inovação do design, por isso fomos em frente a todo vapor!

Siga seus instintos

Com o novo layout definido, eu reavaliei a quantidade de informações apresentadas aos jogadores nesta tela. A tela de criação de personagem antiga trazia muitas informações na forma de descrição:

O problema de apresentar informações demais (mesmo que elas sejam úteis) é que isso pode impedir que alguém faça uma escolha simples.

Nós pensamos a nova tela de criação de personagem de forma a ajudar os novos jogadores a evitar o que é conhecido como paralisia por análise. Cortamos grande parte do texto e recorremos a elementos visuais e sonoros para explicar as raças e classes. Para nós, era melhor mostrar do que descrever um mago lançando uma bola de fogo.

A maioria dos jogadores novos já conhece esses arquétipos de fantasia por meio da cultura pop. Quase todo mundo sabe que um guerreiro empunha uma espada, usa uma armadura relativamente pesada e luta corpo a corpo.

Nós organizamos as classes em uma ordem que ajudaria novos jogadores a identificar rapidamente uma classe conhecida:

Os três primeiros são os arquétipos mais fortes, mais bem estabelecidos. Os três seguintes são um pouco menos fortes. Por exemplo, alguém que nunca jogou videogame pode não saber o que um sacerdote faz. Depois, vêm as classes híbridas, que são mais complexas.

É importante ressaltar que essa escolha de design não tinha a ver com a dificuldade de se jogar com cada classe, e sim com a facilidade de compreensão dos conceitos por trás de cada uma e da sua função sem a necessidade de explicar mais.

As raças são basicamente uma escolha estética. Não queríamos que novatos se preocupassem com habilidades raciais, por isso nós as escondemos:

Para nós, não tem problema se um jogador novo não criar seu “personagem definitivo” na primeira tentativa. Você aprende muito mais sobre as raças e classes jogando do que poderíamos explicar na tela de criação de personagem.

Nós só queremos que os novatos escolham a raça acharem mais legal, optem por um arquétipo de classe favorito e sigam em frente!

Mostre, não conte

Depois de remover todo o texto, nós decidimos fazer novas animações para ajudar a dar o tom da classe.

Começamos explorando o nível de elaboração dessas animações. Uma coisa que nos preocupava especialmente era a duração, pois não queríamos nada muito demorado.

As primeiras propostas criadas pelo líder dos animadores Ian Lang:

Observação: o último clipe mostra um conceito inicial que testamos, de um fundo grande de tecido com seu personagem em um pedestal. Veja outra proposta:

Depois de decidir uma direção, a equipe de animação criou uma sequência para cada classe, trabalhando com a equipe de efeitos para escolher os melhores efeitos especiais para acompanhar as habilidades mostradas. Com isso definido, um designer de áudio adicionou som às animações.

Acho que todos vão concordar que as equipes de animação, efeitos e áudio fizeram um trabalho incrível, conferindo a essas classes um tom heroico. As animações acabaram sendo um dos maiores destaques da nova tela de criação de personagens.

Mantenha o foco

Um dos nossos principais objetivos era concentrar sua atenção no modelo do personagem no meio da tela. Queríamos que a sensação fosse a de criar um super-herói. Essa filosofia foi o nosso norte para muitas decisões que tomamos na criação dessa tela.

Em vez do estilo tradicional da interface de WoW, adotamos uma estética mais minimalista. Removemos elementos elaborados das laterais, como os estandartes das facções, pois eles distraíam muito, roubando o foco do personagem.

Colocamos uma sombra grande na borda da tela para dar ao personagem um efeito de holofote, criando uma vinheta.

Também posicionamos os elementos da interface de modo a atrair o olhar para pontos específicos.

Para finalizar, borramos o fundo quando a câmera se aproxima na hora da personalização. Com isso, o personagem ganha ênfase e você pode se concentrar nas características dele.

Novos jogadores

Jogadores novatos e veteranos veem versões diferentes da criação de personagem. Meu intuito era simplificar a experiência para quem está começando.

Para dar um exemplo, só as raças principais são mostradas, com os nomes indicados sob os retratos.

Depois, há algumas diferenças mais sutis.

O primeiro personagem que os veteranos veem é uma combinação totalmente aleatória de raça e classe. Para novos jogadores, o primeiro personagem será sempre um guerreiro humano ou orc (de sexo aleatório). Isso dialoga com a ideia de simplificar os primeiros passos para os novos jogadores mostrando algo que eles já conheçam.

Os personagens aleatórios também são um pouco diferentes para novatos. Como é possível que sejam os primeiros passos de algumas pessoas no universo de Warcraft, eu achei que era crucial que cada raça tivesse um visual bem definido. Por esse motivo, desativamos todas as opções que cobrem o rosto — como tatuagens, pintura de guerra e adereços de cabeça — quando o personagem é gerado aleatoriamente.

Mas não se preocupe, quando entrar no modo de personalização, o jogador terá acesso a essas opções.

Por fim, novos jogadores veem uma dica na tela de personalização:

Um coisa que observamos nos testes com usuários foi que alguns jogadores ficavam ansiosos na hora de finalizar o personagem. Faz sentido, não faz? Se acha que é a sua última chance de personalizar seu personagem, você leva mais tempo para conferir se está tudo perfeito. A dica permite que eles prossigam com confiança e entrem no jogo mais rápido.

Personalização de personagem

Falando em personalização de personagem, vamos dar uma olhada nos primeiros modelos dessa tela. Dá para ver como o design evoluiu em relação ao visual antigo:

Em um determinado momento, fiz testes com um layout mais livre, em que as opções não ficavam dentro de caixas:

O visual sobrecarregado não agradou, mas como nós gostamos da amplidão, eu incorporei algumas das ideias anteriores, como o agrupamento das opções em categorias:

Agora estamos chegando perto da versão final!

Seletor de opções

Você vai perceber que as opções no último modelo são definidas por meio de controles deslizantes. Esse controle passou por diversas iterações durante o desenvolvimento.

A versão antiga contava com retratos grandes à direita, para mostrar uma prévia. Vendo esses exemplos, é difícil perceber a diferença entre as opções de rosto:

Eles também não se ajustam muito bem em termos de tamanho e se contrapõem ao nosso objetivo de manter o foco no personagem no meio da tela.

Por isso, decidimos encontrar um controle da interface que poderia substituir os retratos.

Eu não queria usar uma mistura de controles diferentes (como caixas de seleção, botões e seletores de cor), porque isso ia deixar a tela poluída, sobrecarregada. Eu queria um único controle que pudesse funcionar para todos os tipos de opção.

No entanto, o objetivo mais importante era permitir que você saltasse de uma opção para outra rapidamente, para poder comparar com facilidade.

Como as primeiras iterações não satisfaziam esse requisito, era um problema navegar entre opções distantes entre si.

Os controles deslizantes permitiam saltar rápido de uma para outra, mas com pouca precisão. Geralmente, esse tipo de controle também é usado para permitir saltos entre dois extremos (como alto e baixo), o que não era o caso para a maioria das opções.

No fim das contas, eu pensei em um menu suspenso de várias colunas que satisfazia todos os nossos objetivos:

1. Permite pular rapidamente de uma opção para outra.
2. Permite ver todas as opções ao mesmo tempo.
3. É um controle único e versátil que pode ser usado para nomes e cores. Em alguns casos, dá até para misturar os dois tipos no mesmo menu suspenso.
4. Seu foco fica no personagem no centro.
5. E talvez a parte mais bacana: ele mostra as opções em tempo real quando o cursor passa sobre elas.

Observação: eu sou fã de Overwatch. Quantas referências a Overwatch você consegue encontrar nos nomes das opções?

Ícones de categoria

Todas as opções de personalização estão divididas entre três categorias. Confira as categorias e os ícones evoluídos:

Originalmente, eu planejei cinco categorias, mas isso mudou depois de um teste no jogo.

Eu senti que não funcionava bem ter as opções de cabelo na segunda categoria, pois mudar o penteado é uma das primeiras coisas que você faz. Por isso, elas foram transferidas para a primeira, com as opções de rosto.

A maioria das raças não tem muitas opções de corpo e tatuagem, por isso também juntei essas duas categorias. Assim, terminamos com as três.

Barbearia

Talvez você lembre que a barbearia tinha uma interface completamente diferente da tela de criação de personagem. Com a reformulação, fazia muito sentido usar a mesma nos dois lugares.

Algumas barbearias acabavam ficando escuras demais, porque a iluminação era baseada no ambiente ao redor dela. Em alguns casos, isso também atrapalhava a percepção das cores, deixando um verde parecido com amarelo, por exemplo.

A equipe de arte resolveu esse problema aplicando uma luz completamente neutra ao redor do seu personagem quando você ativa a cadeira da barbearia. Agora, a iluminação deixa tudo claro e preciso.

Uma nova funcionalidade da barbearia é permitir a troca de gênero do personagem. Confira um vídeo da primeira troca de gênero, gravado pelo engenheiro que fez a implementação.

Bugs

Durante o projeto, encontramos muitos bugs visuais precisando de atenção:

Agradeça à equipe de controle de qualidade por poupar você desse verdadeiro pesadelo!

Até a próxima

A reformulação da criação de personagem foi um grande esforço colaborativo envolvendo artistas, animadores, produtores, analistas de teste, designers de áudio, especialistas em usabilidade e engenheiros (leia o artigo publicado anteriormente aqui!). Esperamos ter construído uma interface moderna e flexível capaz de facilitar a criação de milhões de personagens nos anos vindouros.

Espero que você tenha gostado de ver como nós reprojetamos a tela de criação de personagem. Obrigado por ler!

Jeff Liu
Designer de Interface Sênior, World of Warcraft