Guia de UX & UI
Dicas e práticas para criar cenas em que os players 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 a sua criatividade em toda a sua extensão. Isto é essencial para que a Decentraland se torne um lugar recompensador para explorar. No entanto, também é importante ter em mente que as cenas na Decentraland serão visitadas por uma grande variedade de utilizadores e queremos torná-las acessíveis a todos. Por isso, não podemos ignorar a necessidade de estabelecer critérios de design unificados, um guia que possa garantir que os jogadores terão uma experiência homogénea, intuitiva e agradável, independentemente da cena em que estejam.
Neste documento partilhamos os Valores de Design da Decentraland, com o objetivo de promover o que consideramos serem as melhores práticas para conceber a interface e a experiência dos jogadores. Esperamos que estes 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 concebidas tendo estes valores em mente:
Acolhedor: O jogador sente-se calorosamente bem-vindo.
Fácil de usar: A UI é fácil e divertida de usar – deves evitar reinventar a roda
Fácil de aprender: Os jogadores consideram a UI familiar e intuitiva. Os padrões devem ser usados de forma consistente ao longo da scene.
Fornecer orientação: A cena dá uma ajuda. Texto, movimento, som e gráficos vão conduzir e indicar aos jogadores a direção certa.
Reativa: Ação-reação clara ao input dos jogadores.
Minimalista: Menos é mais. Os jogadores podem concentrar a sua atenção no que importa.
Interessante: A cena tira partido das coisas que tornam a Decentraland única e digna de visita.
Com propósito: Os jogadores têm uma forte razão para voltar.
Agradável: Os jogadores apreciam a forma como as coisas parecem, soam e se sentem
Experiência do utilizador
Por onde começar?
Qual é o objetivo da tua cena? É oferecer uma paisagem bonita para contemplar e explorar? É um museu? É um jogo para um jogador? Um jogo competitivo? Ou segue um fluxo linear de narrativa?
É importante ter este objetivo bem presente em cada etapa do processo de design; ele deve orientar todas as tuas decisões, que podem afetar profundamente a experiência do visitante.
Para cenas que seguem um fluxo linear, em que cada passo depende do anterior, recomendamos delimitar a cena e estabelecer um ou vários pontos de entrada fixos, para evitar que os jogadores se deparem com coisas pela ordem errada. Aliás, os pontos de entrada são um excelente local para mostrar uma mensagem de boas-vindas ao jogador e explicar qual deve ser o seu objetivo na cena.
Se a experiência do jogador na tua cena não se destinar a ser linear, mas ainda precisares de fornecer algumas instruções básicas para garantir que ele a aproveita plenamente, podes mostrar instruções num pop-up. É possível apresentar um popup no ecrã do jogador assim que entra, independentemente da direção de onde venha, e dessa forma garantir que os jogadores saberão sempre o essencial.
📔 Nota: Garante que o popup não é demasiado intrusivo e que é fácil de fechar ao clicar em qualquer parte.
Uma mensagem de boas-vindas deve comunicar ao jogador o seguinte:
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) Controlos. Maioritariamente úteis se a tua cena usar eventos globais de botão. Caso contrário, os próprios itens indicam como usá-los ao passar o rato por cima.
Motivação
Provavelmente vais querer que os teus visitantes continuem a voltar à tua cena; pensa em formas de os motivar a fazê-lo! Pergunta a ti próprio: “O que faria com que um jogador quisesse regressar à minha cena, ou recomendá-la a um amigo?”
Por exemplo, podes desafiá-los, dando-lhes algo a alcançar que seja suficientemente difícil para exigir várias tentativas. Também podes organizar eventos multijogador competitivos, que são igualmente uma oportunidade interessante para socializar. Torna a tua cena num lugar dinâmico onde os jogadores sintam que gostam de passar tempo lá!
Feedback e Som
O som desempenha um duplo papel fundamental, não percas a oportunidade de o usar! Por um lado, é vital para gerar imersão, muitas coisas não parecerão reais se não forem acompanhadas por som. A outra coisa crucial para a qual o som serve é fornecer feedback às ações do jogador. Se dependeres apenas de pistas visuais, não podes ter a certeza de que o jogador estará a olhar na direção certa para ver os efeitos das suas ações. Ao usar som, podes garantir que ele sabe que algo aconteceu. Se usares pistas visuais e sonoras em combinação, ouvir o som convida o jogador a procurar a pista visual, caso não a tenha visto.
Tem em mente que alguns jogadores podem estar a jogar com o som desligado. Se estiveres a usar som como forma de fornecer instruções da cena ou uma peça-chave nas mecânicas de jogo, tenta também fornecer algo visual que indique a mesma direção. Por exemplo, poderias mostrar texto na parte inferior da UI para acompanhar estes sons, como legendas num filme.
Interface do utilizador
Esta secção tem como objetivo ajudar-te a construir uma narrativa através do design da tua cena que leve o foco do jogador para os elementos que mais importam. Fazer bom uso das ferramentas descritas aqui pode tornar a sua experiência muito mais imersiva e bem-sucedida.
Não podemos subestimar quão valiosos são a cor, os ícones, o movimento e a escala para transmitir a mensagem certa: tudo na cena comunica um significado, lembra-te disso.
Layout
Tem cuidado ao colocar a tua UI em regiões do ecrã que se sobrepõem aos elementos padrão da UI da Decentraland. No cliente de desktop, a UI padrão da Decentraland (sidebar, minimapa, chat, etc.) foi concebida para ocupar apenas os 25% do lado esquerdo do ecrã (assinalados a vermelho na imagem). O espaço restante do ecrã é uma zona segura que os criadores de conteúdo são livres de usar.
Não existem restrições para colocar elementos de UI nos 25% do lado esquerdo do ecrã, mas tem em mente que o Explorer está continuamente a fazer alterações e melhorias ao seu design. Qualquer espaço que hoje não esteja oculto nessa região poderá ficar coberto em versões futuras.
📱 Zona segura para mobile: O cliente mobile tem as suas próprias zonas reservadas — o lado esquerdo (chat, pesquisa, perfil, joystick, emotes), o canto superior direito (controlos de perfil e câmara), e o canto inferior direito (botão de interação). Ao desenhar para mobile, mantém a UI crítica no centro ou no centro superior do ecrã e segue a zona segura para mobile. Usa isMobile() para alternar layouts quando as restrições de desktop e mobile não coincidirem.
📔 Nota: Os elementos de UI de scenes e smart wearables aparecem sempre numa camada atrás da UI padrão da Decentraland.
Tem sempre uma grelha em mente e usa-a como principal critério ao organizar espacialmente a tua UI. Se estiveres a trabalhar numa cena onde é necessário um HUD, podes começar por agrupar todos os consumíveis (por exemplo, moeda, comida, vida) e, do outro lado, os itens armazenáveis, como ferramentas ou armas. Tenta ser consistente quanto às métricas da grelha e ao espaçamento. Torna claro o feedback para cada ação do jogador.
Cor
É importante escolher uma paleta de cores, pois isso dá identidade à tua cena e também sinaliza relações e hierarquia entre elementos.
Ao montar uma paleta de cores, começa por selecionar uma cor principal e, opcionalmente, uma secundária. Depois deves decidir se queres que a paleta seja análoga, complementar, triádica, etc., em relação a essa cor principal.
💡 Dica: Geradores gratuitos de paletas de cores 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 usada nos componentes da tua UI. Se a tua paleta não tiver uma cor secundária, podes 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 tua cena. As cores secundárias funcionam melhor para realces, controlos de seleção (sliders e switches), links e títulos.
Lembra-te de que cada cor tem as suas próprias qualidades expressivas únicas; aproveita isso para comunicar mensagens através delas. Por exemplo, o vermelho é frequentemente associado a conotações negativas, enquanto o verde é associado a conotações positivas.
Também podes usar as cores estrategicamente para indicar mudanças de estado; por exemplo, mudar a cor de um elemento para indicar se está ativo ou inativo.
📔 Nota: Os estados comunicam o estado dos elementos de UI. Os estados de um elemento devem manter uma certa continuidade, mas têm de ter affordances claras e ser facilmente distinguíveis de outros estados e do layout envolvente.
Atenção! Ao selecionar cores que serão mostradas em superposição, tem especial cuidado em garantir que são legíveis quando usadas em conjunto. Aqui está uma regra fundamental: as cores dos elementos mostrados em conjunto devem sempre ter bastante contraste entre si. Tem em conta que alguns jogadores podem estar a ver os seus ecrãs sob condições de iluminação subótimas, o que dificulta a leitura.
Hierarquia tipográfica
Tenta definir uma escala de, pelo menos, 3 tipos para Títulos, Subtítulos e Corpo de texto. Tem cuidado com o uso da cor e do tamanho da fonte. Todos os tamanhos de fonte devem ser 12 px ou superiores.
Se fores colocar texto apresentado sobre imagens (ou sobre o mundo), vais certamente precisar de experimentar a sua legibilidade. Nesses casos, sugerimos que adiciones uma área sólida colorida, numa camada entre o texto e as imagens, para garantir que o texto permanece legível.
Ícones
Os ícones sintetizam informação, ajudando-te a identificar ações através de imagens. São uma ferramenta incrivelmente poderosa para fornecer input que pode ser interpretado rapidamente, em oposição a usar texto para rotular coisas, o que exige mais atenção e tempo do jogador. Também é útil mostrar ícones em combinação com texto, pois isso ajuda a desambiguar os seus significados.
Movimento
Usa o movimento para fornecer feedback e guiar o caminho quando necessário. O movimento ajuda os jogadores a focar a sua atenção e ajuda a manter a continuidade à medida que a UI muda.
Escrita e estrutura do conteúdo
O texto da UI pode tornar as interfaces mais utilizáveis e dá aos jogadores mais confiança nas suas ações. Torna sempre 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 demasiado longo não será lido pela maioria dos jogadores.
Recebe os teus jogadores com uma Mensagem de Boas-vindas e diz-lhes o objetivo da cena. Começa por clarificar o seu objetivo na cena e depois as ações necessárias para o alcançar. Depois podes revelar informação progressivamente à medida que ela for necessária; desta forma, os jogadores não se sentirão sobrecarregados logo no início da experiência. Tal como com os recursos gráficos, tenta usar palavras consistentes nas tuas funcionalidades de UI e na narrativa.
Novas funcionalidades do SDK - Em breve!
Interações com objetos Agora não é possível os jogadores saberem quais os objetos interativos e quais não são, até realmente clicarem neles ou premirem botões sobre eles. Temos trabalhado numa nova funcionalidade para que os criadores possam mostrar mensagens toast personalizadas ao apontar para um objeto interativo. Esta mensagem transmite qual o input a usar e pode ter texto personalizado para descrever os efeitos de interagir com ele. Recomendamos vivamente que a uses quando for lançada; a tua scene parecerá mais natural e fácil de usar.
Câmara em 3.ª pessoa Estamos atualmente a experimentar adicionar suporte para uma câmara em 3.ª pessoa. Podes experimentá-la no Explorer premindo a tecla ‘V’. (Nota: ainda não é suportada numa pré-visualização da scene). Podes começar a pensar em desenvolver novas experiências ou jogos incríveis que poderão ser muito mais apelativos graças a uma câmara em 3.ª pessoa!
Atualizado