Mas muitos outros conceitos, exclusivos para ambientes 3D, exigiam muita definição. Tive grande sucesso usando sistemas de design no desenvolvimento de produtos de software. Eles são uma ótima maneira de permitir que desenvolvedores e designers desenvolvam rapidamente produtos envolventes e consistentes em todas as plataformas.

Estou desenvolvendo um espaço de realidade virtual comunicativo – incluindo ambientes de RV – e já estendemos os princípios que estabelecemos em nosso sistema de design 2D para permitir os mesmos aumentos de produtividade que experimentamos ao construir para outras plataformas.

Aprendemos que existem muitos lugares onde os padrões de design existentes podem ser aplicados diretamente na realidade virtual. Mas muitos outros conceitos, exclusivos para ambientes 3D, exigiam muita definição.

Este artigo discutirá as lições que aprendemos ao adaptar nosso sistema de design para guiar o design e o desenvolvimento na realidade virtual.

 

Considerações de alto nível

 

As experiências 2D e 3D se beneficiam das especificações a seguir baseadas em princípios fundamentais de design. Essas restrições orientam o design e o desenvolvimento do produto em direção a experiências de usuário consistentes e positivas e protegem contra uma personalização excessiva.

Padrões são diretrizes, não mandatos rígidos, então houve momentos em que os padrões existentes não atendiam às nossas necessidades. Isso estava bem e era esperado. Permitimos exceções quando necessário e – o que é crucial – certificamo-nos de documentar claramente a exceção, para que todos os envolvidos pudessem entender por que a mudança foi feita.

Basear nossos padrões de realidade virtual em princípios fundamentais de design garantiu que essas experiências se integrassem bem aos nossos produtos existentes. Nossas experiências na web, em dispositivos móveis e impressas são desenvolvidas usando a mesma linguagem de design fundamental.

 

Presença

 

O objetivo de projetar uma boa experiência na realidade virtual era garantir que o ambiente parecesse natural, que o usuário se sentisse confortável em nosso espaço e fosse capaz de experimentar o conteúdo de forma significativa (em vez de escapar para o mundo real para lidar com a navegação ou distrações visuais). O termo usado em RV para se sentir como se realmente existisse é “presença”. Este termo foi cunhado pela primeira vez na teoria da presença de Mel Slater.

O objetivo de nossa especificação de design relacionada ao RV era estabelecer padrões para garantir que o usuário se sentisse confortável e pudesse interagir com o conteúdo de forma natural. Aprendemos que poderíamos usar especificações de design para reforçar a ilusão de incorporação pessoal e estabelecer padrões de interação que reforçassem a ilusão de interação física.

 

Quais especificações 2D foram traduzidas diretamente?

 

Descobrimos que muitos de nossos padrões de design tradicionais podem ser aplicados diretamente a ambientes 3D. Afinal, a realidade virtual ainda é um meio visual construído por código que deve ser implementado por desenvolvedores.

 

Tokens de design

 

Criamos tokens de design consistentes e legíveis para várias cores, dimensões e especificações de tipografia. Isso tornou o processo de design e desenvolvimento muito mais simples porque havia um número limitado de tokens padrão usados. Esses tokens rapidamente se tornaram a linguagem usada em nossos modelos de design, permitindo que nossa equipe se comunique usando uma linguagem consistente.

Ao garantir que todas as especificações de design usassem os mesmos nomes semânticos, reduzimos a probabilidade de que valores personalizados fossem introduzidos.

 

SIM: AccentColor, SideMargin, Headline4

NÃO: # bada55, 16px, Montserrat / 14px / Bold

 

Cor

 

Não suportamos todas as cores do espectro; em vez disso, definimos uma paleta de cores limitada com um número mais gerenciável de valores. Tivemos sucesso usando apenas algumas opções vinculadas a tokens específicos.

Usar um número limitado de cores específicas da marca gerou uma estética consistente em todas as plataformas que suportamos. Isso garantiu que nossas experiências na realidade virtual correspondessem à nossa marca 2D ou mídia impressa.

Como as cores eram centralizadas e consistentes, poderíamos facilmente trocá-las para uma nova marca. Esse controle ajudou a manter nossos aplicativos acessíveis, pois pudemos garantir que cada cor atendesse aos requisitos mínimos de contraste.

No entanto, descobrimos que a gama limitada de cores que usamos para designs 2D não se traduzia necessariamente em espaços imersivos. Espaços de realidade virtual envolvem iluminação e apelam à nossa necessidade intuitiva de apreender a profundidade do que nos rodeia. Precisávamos oferecer suporte a uma gama mais ampla de cores para ambientes imersivos.

A seleção de paletas de cores precisava ser feita com a intenção e o clima de uma sala em mente. Para espaços 3D, usamos as mesmas cores básicas especificadas em nosso sistema de design, mas permitimos que os designers ajustassem seu brilho ou saturação. Isso permitiu mais variação, mas manteve a estética geral consistente com nossa marca.

A iluminação em ambientes imersivos define o clima, por isso definimos os níveis de brilho mínimo e máximo para lidar com isso. A iluminação afetará a legibilidade do texto e a acessibilidade geral do aplicativo, por isso observamos de perto. Usamos uma gama menor de cores complementares e contrastantes suaves e fortes para permitir pontos focais fortes ao destacar determinado conteúdo.

 

Tipografia

 

Os benefícios 2D de criar um pequeno número de estilos de tipografia se traduzem diretamente na RV, e não mudamos nada. Isso não afetou diretamente a presença , mas tornou o processo de desenvolvimento muito mais simples.

 

Espaçamento

 

Era importante definir o alcance do nosso sistema espacial com um número base memorável e documentar expectativas claras sobre como ele é usado. Isso resultou em nossos layouts alinhados a uma grade, o que é visualmente agradável para o usuário.

Usamos um sistema Base8 (permite dimensões divisíveis por 8). Usamos isso porque correspondia ao tamanho da fonte de base de muitos navegadores de 16 px (8 × 2) e porque muitos tamanhos de tela populares são divisíveis por 8 em um eixo.

As medições Base8 são sempre divisíveis por 2, portanto, evitamos problemas de dimensionamento que resultam em um deslocamento de 0,5 p