Guia de UX & UI
Dicas e práticas para construir cenas onde os jogadores vão querer ficar e voltar!
É de vital importância para nós que os criadores de conteúdo da Decentraland tenham liberdade para usar sua criatividade ao máximo. Isso é essencial para que a Decentraland se torne um lugar gratificante para explorar. No entanto, também é importante ter em mente que as cenas na Decentraland serão visitadas por uma grande variedade de usuários e queremos tornar as cenas acessíveis a todos. Por isso, não podemos ignorar a necessidade de estabelecer critérios de design unificados, um guia que garanta que os jogadores encontrem uma experiência homogênea, intuitiva e agradável, independentemente da cena em que estejam.
Neste documento compartilhamos os Valores de Design da Decentraland, com o objetivo de promover aquilo que consideramos as melhores práticas para projetar a interface e a experiência para os jogadores. Esperamos que esses critérios possam servir como ponto de partida para construir e/ou melhorar as cenas que compõem o Metaverse.
Valores de design
Todas as cenas na Decentraland devem ser projetadas com esses valores em mente:
Acolhedora: O jogador se sente calorosamente bem-vindo.
Amigável ao usuário: A UI é fácil e divertida de usar – evite reinventar a roda
Fácil de aprender: Os jogadores acham a UI familiar e intuitiva. Padrões devem ser usados de forma consistente por toda a cena.
Fornecer orientação: A cena oferece uma mão amiga. Texto, movimento, som e elementos gráficos conduzirão e indicarão aos jogadores a direção correta.
Reativa: Ação-reação clara às entradas dos jogadores.
Minimalista: Menos é mais. Os jogadores podem focar sua atenção no que importa.
Interessante: A cena aproveita os elementos que tornam a Decentraland única e digna de ser visitada.
Com propósito: Os jogadores têm um forte motivo para voltar.
Agradável: Os jogadores apreciam como as coisas parecem, soam e se sentem
Experiência do usuário
Por onde começar?
Qual é o objetivo da sua cena? Oferecer uma paisagem bonita para contemplar e explorar? Um museu? Um jogo single player? Competitivo? Ou segue um fluxo de narrativa linear?
É importante estar bem ciente desse objetivo em cada etapa do processo de design; ele deve orientar todas as suas decisões, todas as quais podem afetar profundamente a experiência do visitante.
Para cenas que seguem um fluxo linear, onde cada etapa depende da anterior, recomendamos delimitar a cena e estabelecer um ou vários pontos de entrada fixos, para evitar que os jogadores encontrem coisas na ordem errada. A propósito, os pontos de entrada são um excelente local para exibir uma mensagem de boas-vindas ao jogador e explicar qual deve ser seu objetivo na cena.
Se a experiência do jogador na sua cena não for linear, mas você ainda precisar fornecer algumas instruções básicas para garantir que eles a aproveitem plenamente, você pode mostrar instruções em um pop-up. É possível exibir um pop-up na tela do jogador assim que ele entrar, independentemente da direção de onde veio, e dessa forma garantir que os jogadores sempre saibam o essencial.
📔 Nota: Certifique-se de que o pop-up não seja muito intrusivo e que seja fácil de fechar clicando em qualquer lugar.
Uma mensagem de boas-vindas deve comunicar o seguinte ao jogador:
O título da cena
Dar as boas-vindas ao jogador
Objetivo final e motivação para o jogador
Instruções/Próximos passos
(Opcional) Controles. Principalmente úteis se sua cena usa eventos globais de botões. Caso contrário, os próprios itens indicam como usá-los ao passar o cursor sobre eles.
Motivação
Você provavelmente vai querer que seus visitantes voltem à sua cena; pense em maneiras de motivá-los a fazer isso! Pergunte-se “O que faria um jogador querer retornar à minha cena, ou recomendá-la a um amigo?”
Por exemplo, você pode desafiá-los, oferecendo algo a ser alcançado que seja difícil o suficiente para requerer várias tentativas. Você também pode organizar eventos multiplayer competitivos, que são uma oportunidade interessante para socializar. Faça da sua cena um lugar dinâmico onde os jogadores sintam prazer em passar o tempo!
Feedback e Som
O som desempenha um duplo papel importante, não deixe de usá-lo! Por um lado, é vital para gerar imersão; muitas coisas não parecerão reais se não forem acompanhadas por som. A outra função crucial do som é fornecer feedback às ações do jogador. Se você confiar apenas em sinais visuais, não pode ter certeza de que o jogador estará olhando na direção certa para ver os efeitos de suas ações. Usando som, você pode garantir que eles percebam que algo aconteceu. Se usar sinais visuais e sonoros em combinação, ouvir o som convida o jogador a procurar o sinal visual, caso não o tenha visto.
Tenha em mente que alguns jogadores podem jogar com o som desligado. Se você estiver usando som como forma de fornecer instruções da cena ou uma peça-chave na mecânica do jogo, tente também fornecer algo visual para indicar a mesma direção. Por exemplo, você pode exibir texto na parte inferior da UI para acompanhar esses sons, como legendas em um filme.
Interface do Usuário
Esta seção tem como objetivo ajudar você a construir uma narrativa por meio do design da sua cena que direcione o foco do jogador para os elementos que mais importam. Fazer bom uso das ferramentas descritas aqui pode tornar a experiência deles muito mais imersiva e bem-sucedida.
Não podemos subestimar o quão valiosos são cor, ícones, movimento e escala para transmitir a mensagem correta: tudo na cena transmite um significado, lembre-se disso.
Layout
Tenha cuidado ao colocar sua UI em regiões da tela que se sobreponham aos elementos padrão da UI da Decentraland. A UI padrão da Decentraland, incluindo minimapa, chat, etc., foi projetada para cobrir apenas os 25% esquerdo da tela. O restante da área da tela é uma zona segura, livre para uso pelos criadores de conteúdo.
Não há restrições para posicionar elementos de UI nos 25% esquerdo da tela, mas lembre-se de que o Explorer está continuamente fazendo mudanças e melhorias em seu design. Qualquer espaço que hoje não esteja ocluído nessa região pode ser coberto em versões futuras.
📔 Nota: Os elementos de UI das cenas e dos smart wearables sempre aparecem em uma camada atrás da UI padrão da Decentraland.
Tenha sempre uma grade em mente e use-a como seu principal critério ao organizar espacialmente sua UI. Se você está trabalhando em uma cena onde um HUD é necessário, pode começar colocando todos os consumíveis juntos (por exemplo, moeda, comida, vida) e, do outro lado, itens armazenáveis, como ferramentas ou armas. Procure ser consistente quanto às métricas da grade e ao espaçamento. Torne o feedback para cada ação do jogador claro.
Cor
É importante escolher uma paleta de cores, pois isso dá identidade à sua cena e também sinaliza relações e hierarquias entre os elementos.
Ao montar uma paleta de cores, comece selecionando uma cor principal e, opcionalmente, uma secundária. Em seguida, decida se deseja que a paleta seja análoga, complementar ou triádica, etc., em relação à cor principal.
💡 Tip: Geradores de paleta de cores grátis que recomendamos: Coolors, Adobe Color CC, Colour Lovers, Color Hunt, Color by Hailpixel, Colour Code, Sip, Color Scheme Designer by Paletton, Cohesive Colors, Colr
A cor principal deve ser a mais utilizada em seus componentes de UI. Se sua paleta não tiver uma cor secundária, você pode acentuar elementos combinando a cor principal com preto ou branco. Ter uma cor secundária não é obrigatório, mas ajuda a enfatizar e distinguir os elementos da UI da sua cena. Cores secundárias funcionam melhor para destaques, controles de seleção (sliders e switches), links e manchetes.
Lembre-se de que cada cor tem qualidades expressivas únicas; aproveite isso para comunicar mensagens por meio delas. Por exemplo, o vermelho costuma ser associado a conotações negativas enquanto o verde é associado a conotações positivas.
Você também pode usar cores estrategicamente para indicar mudanças de estado, por exemplo mudando a cor de um elemento para indicar se está ativo ou inativo.
📔 Nota: Os estados comunicam o status dos elementos de UI. Os estados de um elemento devem manter certa continuidade, mas devem ter affordances claras e ser facilmente distinguíveis de outros estados e do layout ao redor.
Aviso! Ao selecionar cores que serão mostradas em sobreposição, tenha especial cuidado em garantir que sejam legíveis quando usadas em conjunto. Aqui vai uma regra fundamental: as cores dos elementos mostrados juntas devem sempre ter bastante contraste entre si. Tenha em mente que alguns jogadores podem estar olhando para suas telas sob condições de iluminação subótimas, o que torna a leitura mais difícil.
Hierarquia tipográfica
Tente definir pelo menos uma escala de 3 tipos para Títulos, Subtítulos e Corpo. Tenha cuidado com o uso de cor e tamanho da fonte. Todos os tamanhos de fonte devem ser 12 px ou maiores.
Se você vai colocar texto exibido sobre imagens (ou sobre o mundo), certamente precisará experimentar sua legibilidade. Nesses casos, sugerimos adicionar uma região sólida colorida, em uma camada entre o texto e as imagens; assim você pode garantir que o texto permaneça legível.
Ícones
Ícones sintetizam informações, ajudando a identificar ações por meio de imagens. São uma ferramenta extremamente poderosa para fornecer entrada que pode ser interpretada rapidamente, em oposição ao uso de texto para rotular coisas, o que demanda mais atenção e tempo do jogador. Também é útil mostrar ícones em combinação com texto, pois isso ajuda a desambiguar seus significados.
Movimento
Use movimento para fornecer feedback e guiar quando necessário. O movimento ajuda os jogadores a focar sua atenção e mantém a continuidade conforme a UI muda.
Redação e estrutura de conteúdo
O texto da UI pode tornar as interfaces mais utilizáveis e dá mais confiança aos jogadores em suas ações. Sempre mantenha o texto da UI o mais conciso possível. Os jogadores estão lá para jogar, não para ler. Qualquer texto que pareça muito longo não será lido pela maioria dos jogadores.
Receba seus jogadores com uma Mensagem de Boas-vindas e diga a eles o objetivo da cena. Comece esclarecendo sua meta na cena, depois as ações necessárias para alcançá-la. Em seguida, revele informações progressivamente conforme necessário, assim os jogadores não se sentirão sobrecarregados no início da experiência. Como com recursos gráficos, procure usar palavras consistentes em todas as funcionalidades da UI e na narrativa.
Novos Recursos do SDK - Em breve!
Interações com objetos Agora não é possível para os jogadores saber quais objetos são interativos e quais não são, até que realmente cliquem ou pressionem botões neles. Temos trabalhado em um novo recurso para que os criadores possam mostrar mensagens toast personalizadas ao mirar em um objeto interativo. Essa mensagem indica qual entrada usar e pode ter texto personalizado para descrever os efeitos de interagir com ele. Recomendamos fortemente que você o utilize quando for lançado; sua cena ficará mais natural e fácil de usar.
Câmera em 3ª pessoa Atualmente estamos experimentando adicionar suporte para uma câmera em 3ª pessoa. Você pode testá-la no Explorer pressionando a tecla 'V'. (Observação: ainda não é suportada na pré-visualização de cena). Você pode começar a pensar em desenvolver novas experiências ou jogos incríveis que possam ser muito mais atraentes graças à câmera em 3ª pessoa!
Atualizado