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 px que ocorrerá em sistemas Base5 . Pixels com. Os deslocamentos de 5px exibirão uma borda que parece borrada devido ao anti-serrilhamento daquele meio pixel. 

Padrão para recursos incorporados (vídeos e imagens)

Ao criar ambientes RV, os clientes tendiam a querer que as formas irregulares da mídia se ajustassem a espaços de formatos estranhos. Nós lutamos para ajustar nossos espaços 3D para acomodar mídias com formatos únicos. A padronização dos tamanhos de mídia simplificou nossos projetos para que não tentássemos encaixar um número infinito de formas em nossos ambientes 3D.

A maneira mais simples de restringir isso era definir um número limitado de proporções de aspecto suportadas:

9:16 (16: 9) 

3: 4 (4: 3) 

1: 1 

Garantir que todas as mídias se encaixem em um desses formatos limitados simplificou a implementação e eliminou uma tonelada de retrabalho, uma vez que não precisávamos mais ajustar nossos ambientes para acomodar mídias de todos os tamanhos.

Quais especificações eram exclusivas do design da RV?

Descobrimos uma variedade de categorias de design que usamos para ajudar a estabelecer a presença do usuário no mundo virtual. Esta seção apresentará as principais categorias que identificamos.

Animação

Era fundamental que as animações obedecessem à física e se movessem de maneira natural. Isso significava que os objetos não se moviam linearmente, o que não parece natural ao olho humano.

Os mesmos princípios básicos de animação que usamos em outras mídias foram tão importantes em nossos designs de RV. Declaramos que todas as animações devem usar curvas de atenuação com a duração correta (geralmente 200ms - 500ms).

Na realidade virtual, os usuários percebiam a física não natural de forma muito mais negativa do que na mídia da web.

Áudio

Em ambientes de RV, o uso de áudio de maneira eficaz era uma parte crítica da experiência do usuário.

Espacial

O áudio espacial é reativo à posição do usuário no espaço. Resumindo, o volume do som é função da distância. Isso significa que quanto mais próximo um usuário estiver de um painel de conteúdo ou de outro usuário, maior será o volume do áudio.

Uma maneira eficaz de dar ao usuário um senso de direção é fazer um barulho mais alto vindo de uma direção. Por exemplo: se o seu amigo estiver à sua esquerda e falando com você, o seu ouvido esquerdo ouvirá o som um pouco mais alto e mais cedo do que o direito. A falta de um bom áudio espacial pode tornar um ambiente plano.

Definir esse detalhe foi bastante complicado. Por exemplo, para obter um bom som de 360 ​​graus, precisamos considerar a forma da sala e “refletir” o som com base nisso.

Áudio ambiente

Este é um som que toca silenciosamente durante toda a experiência para estabelecer e reforçar o clima. Como o nome sugere, deve adicionar ambiente, não distrair da experiência geral. O áudio ambiente pode ajudar a evitar um silêncio anormal quando outro feedback não está presente.

Descobrimos que, com o áudio ambiente, é melhor aumentar gradualmente o áudio, em vez de explodir o usuário. Quando o usuário silencia, preferimos que o áudio fique instantaneamente silencioso. Evitamos o áudio alto que impedia a audição de outro conteúdo e sempre silenciamos o áudio ambiente quando outra mídia estava sendo reproduzida.

Feedback de áudio

Usamos gatilhos de som para guiar o usuário em ambientes imersivos. Por exemplo, quando o usuário fecha uma porta, reproduzimos um som de confirmação para fornecer outro nível de feedback. Esse tipo de feedback costumava ser melhor do que os métodos visuais usados ​​em projetos 2D.

Avatar

A forma como o usuário é representado no espaço virtual impacta diretamente sua presença . Quando o avatar consegue imitar com sucesso seus movimentos no mundo real, a experiência fica ainda melhor. O usuário se sentirá mais parecido com o avatar quando o movimento for realista e intuitivo - reforçando aquele importante senso de presença.

Limitações de avatares

Fazer com que um avatar imite as interações do mundo real com sucesso é muito difícil e, quando não é feito corretamente, frustra os usuários e os tira da experiência. Representações digitais ruins podem cair no vale misterioso , dando ao usuário uma sensação de desconforto.

Se avatares totalmente representativos não estivessem disponíveis, um excelente compromisso seria usar um pequeno vídeo ou imagem de perfil. Esta foi uma extensão natural e confortável de como os usuários se representam regularmente em videoconferências. Adornamos as imagens do perfil com emblemas informativos indicando a localização ou o status mudo.

Navegação

Quando começamos a discutir o controle da câmera e a navegação, percebemos rapidamente que esse era um assunto extremamente complicado. Na verdade, decidimos que precisava ser sua própria especificação, não apenas uma seção em nossas especificações de design.

Decidimos definir os seguintes detalhes:

Perspectiva da câmera 

Precisávamos definir quais ângulos de câmera na realidade virtual suportaria. Isso pode variar entre uma visão de 1ª pessoa , uma visão de 3ª pessoa / casa de bonecas ou um mapa do mundo superior em 2D . Cada uma dessas perspectivas exigia muitas descrições detalhadas.

Layout de controle

Precisávamos definir como o usuário controlava a câmera e seu movimento no ambiente.

Aprendemos rapidamente que ter controles intuitivos era importante. Descobrimos que existem muitos mecanismos de controle diferentes, e a “melhor” maneira varia bastante entre os usuários.

Por exemplo, há suporte para comandos de tecla WASD padrão, mas alguns usuários preferem usar as teclas de seta ou o mouse para se mover. Essas especificações eram ainda mais complicadas porque não podíamos depender de o usuário ter acesso a nossos determinados controles. Por exemplo, os dispositivos móveis exigiam joysticks virtuais quando um teclado não estava disponível.

Locomoção e navegação

A locomoção e a navegação foram importantes para garantir uma experiência positiva do usuário. A facilidade com que eles podiam se mover e o movimento simulado enquanto se moviam eram essenciais para evitar o enjôo.

Menor distância

Precisávamos considerar como era fácil para um usuário se mover em nosso ambiente. Se fosse tedioso andar de um lado a outro da sala, o usuário ficaria frustrado. Definimos distâncias máximas entre quartos e priorizamos como o usuário fluiria em nossos ambientes para minimizar a distância percorrida.

Lições que aprendemos

Ao adaptar nosso sistema de design para o RV, aprendemos que muitas das razões fundamentais pelas quais as especificações tradicionais funcionam são universais e se traduzem diretamente em design e desenvolvimento 3D. Isso não foi surpreendente, porque estávamos usando padrões de design estabelecidos que foram bem pesquisados, portanto, esperávamos que eles se traduzissem bem.

Descobrimos muitas maneiras adicionais de ajudar nossos usuários a se sentirem presentes e usamos especificações para estabelecer padrões para garantir que nossos usuários tivessem experiências positivas. Ao projetar experiências para o RV, descobrimos que é muito importante ter empatia pelo usuário e será fundamental para o sucesso dos produtos direcionados à plataforma.