Misturando o tangível e o intangível: projetando interfaces multimodais usando o Adobe XD

(Este artigo foi gentilmente patrocinado pela Adobe.) As interfaces do usuário estão evoluindo. As interfaces habilitadas por voz estão desafiando o longo domínio das interfaces gráficas de usuário e estão rapidamente se tornando uma parte comum de nossas vidas diárias. Progresso significativo em reconhecimento automático de fala (APS) e processamento de linguagem natural (NLP), juntamente com uma base de consumidores impressionante (milhões de dispositivos móveis com assistentes de voz integrados), influenciaram o rápido desenvolvimento e adoção de interface baseada em voz.

Os produtos que usam voz como interface principal estão se tornando cada vez mais populares. Só nos EUA, 47,3 milhões de adultos têm acesso a um alto-falante inteligente (um quinto da população adulta dos EUA), e o número está crescendo. Mas as interfaces de voz têm um futuro brilhante não apenas no uso pessoal e doméstico. À medida que as pessoas se acostumam com as interfaces de voz, elas também passam a esperá-las em um contexto de negócios. Imagine que em breve você poderá acionar um projetor de sala de conferência dizendo algo como “Mostrar minha apresentação”.

É evidente que a comunicação homem-máquina está se expandindo rapidamente para abranger a interação escrita e falada. Mas isso significa que as interfaces futuras serão apenas de voz? Apesar de alguns retratos de ficção científica, a voz não substituirá completamente as interfaces gráficas do usuário. Em vez disso, teremos uma sinergia de voz, visual e gesto em um novo formato de interface: uma interface multimodal habilitada para voz.

Neste artigo, vamos:

• explorar o conceito de uma interface habilitada para voz e revisar diferentes tipos de interfaces habilitadas para voz;
• descobrir por que interfaces de usuário multimodais habilitadas para voz serão a experiência de usuário preferida;
• veja como você pode criar uma interface do usuário multimodal usando o Adobe XD.

O estado das interfaces de usuário de voz (VUI)

Antes de mergulhar nos detalhes das interfaces de usuário de voz, devemos definir o que é entrada de voz. A entrada de voz é uma interação humano-computador na qual um usuário fala comandos em vez de escrevê-los. A beleza da entrada de voz é que é uma interação mais natural para as pessoas — os usuários não estão restritos a uma sintaxe específica ao interagir com um sistema; eles podem estruturar sua entrada de muitas maneiras diferentes, assim como fariam em uma conversa humana.

As interfaces de usuário de voz trazem os seguintes benefícios para seus usuários:

• Menor custo de interação
  Embora o uso de uma interface habilitada para voz envolva um custo de interação, esse custo é menor (em teoria) do que o de aprender uma nova GUI.
• Controle mãos-livres
  As VUIs são ótimas para quando as mãos dos usuários estão ocupadas – por exemplo, enquanto dirige, cozinha ou se exercita.
• Velocidade
  A voz é excelente quando fazer uma pergunta é mais rápido do que digitá-la e ler os resultados. Por exemplo, ao usar a voz em um carro, é mais rápido dizer o local para um sistema de navegação, em vez de digitar o local em uma tela sensível ao toque.
• Emoção e personalidade
  Mesmo quando ouvimos uma voz, mas não vemos a imagem de um orador, podemos imaginar o orador em nossa cabeça. Isso tem uma oportunidade de melhorar o envolvimento do usuário.
• Acessibilidade
  Usuários com deficiência visual e usuários com deficiência de mobilidade podem usar a voz para interagir com um sistema.

Três tipos de interfaces habilitadas para voz

Dependendo de como a voz é usada, pode ser um dos seguintes tipos de interfaces.

Agentes de voz em dispositivos de tela inicial

O Apple Siri e o Google Assistant são os principais exemplos de agentes de voz. Para esses sistemas, a voz atua mais como um aprimoramento da GUI existente. Em muitos casos, o agente atua como o primeiro passo na jornada do usuário: o usuário aciona o agente de voz e fornece um comando via voz, enquanto todas as outras interações são feitas usando a tela sensível ao toque. Por exemplo, quando você faz uma pergunta à Siri, ela fornece respostas no formato de uma lista e você precisa interagir com essa lista. Como resultado, a experiência do usuário se torna fragmentada — usamos a voz para iniciar a interação e, em seguida, mudamos para o toque para continuá-la.

Dispositivos somente de voz

Esses dispositivos não têm telas visuais; os usuários contam com áudio para entrada e saída. Os alto-falantes inteligentes Amazon Echo e Google Home são os principais exemplos de produtos nesta categoria. A falta de uma exibição visual é uma restrição significativa na capacidade do dispositivo de comunicar informações e opções ao usuário. Como resultado, a maioria das pessoas usa esses dispositivos para realizar tarefas simples, como tocar música e obter respostas para perguntas simples.

Dispositivos de voz

Com sistemas de voz, o dispositivo aceita entrada do usuário principalmente por meio de comandos de voz, mas também possui uma tela integrada. Isso significa que a voz é a interface principal do usuário, mas não a única. O velho ditado, “Uma imagem vale mais que mil palavras” ainda se aplica aos modernos sistemas habilitados por voz. O cérebro humano tem habilidades incríveis de processamento de imagens – podemos entender informações complexas mais rapidamente quando as vemos visualmente. Comparados aos dispositivos somente de voz, os dispositivos que priorizam a voz permitem que os usuários acessem uma quantidade maior de informações e tornem muitas tarefas muito mais fáceis.

O Amazon Echo Show é um excelente exemplo de dispositivo que emprega um sistema de voz. As informações visuais são gradualmente incorporadas como parte de um sistema holístico — a tela não é carregada com ícones de aplicativos; em vez disso, o sistema incentiva os usuários a tentarem comandos de voz diferentes (sugerindo comandos verbais como “Experimente 'Alexa, mostre-me o tempo às 17h'”). A tela ainda facilita muito as tarefas comuns, como verificar uma receita enquanto cozinha - os usuários não precisam ouvir com atenção e manter todas as informações em suas cabeças; quando eles precisam da informação, eles simplesmente olham para a tela.

Apresentando interfaces multimodais

Quando se trata de usar voz no design de interface do usuário, não pense na voz como algo que você pode usar sozinho. Dispositivos como o Amazon Echo Show incluem uma tela, mas empregam a voz como o principal método de entrada, proporcionando uma experiência de usuário mais holística. Este é o primeiro passo para uma nova geração de interfaces de usuário: interfaces multimodais.

Uma interface multimodal é uma interface que combina voz, toque, áudio e diferentes tipos de recursos visuais em uma única interface de usuário perfeita. O Amazon Echo Show é um excelente exemplo de dispositivo que aproveita ao máximo uma interface multimodal habilitada para voz. Quando os usuários interagem com o Show, eles fazem solicitações exatamente como fariam com um dispositivo somente de voz; no entanto, a resposta que eles recebem provavelmente será multimodal, contendo respostas de voz e visuais.

Os produtos multimodais são mais complexos do que os produtos que dependem apenas de recursos visuais ou apenas de voz. Por que alguém deveria criar uma interface multimodal em primeiro lugar? Para responder a essa pergunta, precisamos dar um passo atrás e ver como as pessoas percebem o ambiente ao seu redor. As pessoas têm cinco sentidos, e a combinação de nossos sentidos trabalhando juntos é como percebemos as coisas. Por exemplo, nossos sentidos trabalham juntos quando estamos ouvindo música em um show ao vivo. Remova um sentido (por exemplo, audição) e a experiência assume um contexto totalmente diferente.

Por muito tempo, pensamos na experiência do usuário como exclusivamente design visual ou gestual. É hora de mudar esse pensamento. O design multimodal é uma maneira de pensar e projetar experiências que conectam nossas habilidades sensoriais.

As interfaces multimodais parecem uma maneira mais humana para o usuário e a máquina se comunicarem. Eles abrem novas oportunidades para interações mais profundas. E hoje é muito mais fácil projetar interfaces multimodais porque as limitações técnicas que no passado limitavam as interações com os produtos estão sendo eliminadas.

A diferença entre uma GUI e uma interface multimodal

A principal diferença aqui é que interfaces multimodais como o Amazon Echo Show sincronizam interfaces visuais e de voz. Como resultado, quando estamos projetando a experiência, a voz e o visual não são mais partes independentes; eles são partes integrantes da experiência que o sistema oferece.

Canal visual e de voz: quando usar cada um

É importante pensar em voz e recursos visuais como canais de entrada e saída. Cada canal tem seus próprios pontos fortes e fracos.

Vamos começar com o visual. É claro que algumas informações são mais fáceis de entender quando as vemos, e não quando as ouvimos. Os recursos visuais funcionam melhor quando você precisa fornecer:

• uma longa lista de opções (ler uma longa lista levará muito tempo e será difícil de seguir);
• informações com muitos dados (como diagramas e gráficos);
• informações sobre produtos (por exemplo, produtos em lojas online; provavelmente, você gostaria de ver um produto antes de comprar) e comparação de produtos (como na longa lista de opções, seria difícil fornecer todas as informações usando apenas voz) .

Para algumas informações, no entanto, podemos facilmente confiar na comunicação verbal. A voz pode ser adequada para os seguintes casos:

• comandos do usuário (a voz é uma modalidade de entrada eficiente, permitindo que os usuários dêem comandos ao sistema rapidamente e contornando menus de navegação complexos);
• instruções de usuário simples (por exemplo, uma verificação de rotina em uma receita);
• avisos e notificações (por exemplo, um aviso sonoro emparelhado com notificações de voz durante a condução).

Embora esses sejam alguns casos típicos de visual e voz combinados, é importante saber que não podemos separar os dois um do outro. Podemos criar uma experiência de usuário melhor apenas quando a voz e o visual funcionam juntos. Por exemplo, suponha que queremos comprar um novo par de sapatos. Poderíamos usar a voz para solicitar ao sistema: “Mostre-me os sapatos New Balance”. O sistema processaria sua solicitação e forneceria visualmente informações sobre o produto (uma maneira mais fácil de comparar sapatos).

O que você precisa saber para projetar interfaces multimodais habilitadas para voz

A voz é um dos desafios mais emocionantes para os designers de UX. Apesar de sua novidade, as regras fundamentais para o design de interface multimodal habilitada para voz são as mesmas que usamos para criar designs visuais. Os designers devem se preocupar com seus usuários. Eles devem ter como objetivo reduzir o atrito para o usuário, resolvendo seus problemas de maneira eficiente e priorizando a clareza para tornar claras as escolhas do usuário.

Mas também existem alguns princípios de design exclusivos para interfaces multimodais.

Certifique-se de resolver o problema certo

O design deve resolver problemas. Mas é vital resolver os problemas certos; caso contrário, você pode gastar muito tempo criando uma experiência que não agrega muito valor aos usuários. Assim, certifique-se de estar focado em resolver o problema certo. As interações de voz devem fazer sentido para o usuário; os usuários devem ter um motivo convincente para usar a voz sobre outros métodos de interação (como clicar ou tocar). É por isso que, quando você cria um novo produto – mesmo antes de iniciar o design – é essencial realizar pesquisas de usuários e determinar se a voz melhoraria o UX.

Comece criando um mapa de jornada do usuário. Analise o mapa da jornada e encontre lugares onde incluir a voz como canal beneficiaria o UX.

• Encontre lugares na jornada onde os usuários possam encontrar atrito e frustração. Usar a voz reduziria o atrito?
• Pense no contexto do usuário. A voz funcionaria para um contexto específico?
• Pense no que é habilitado exclusivamente pela voz. Lembre-se dos benefícios exclusivos do uso da voz, como a interação com as mãos e sem os olhos. A voz poderia agregar valor à experiência?

Criar fluxos de conversa

Idealmente, as interfaces que você projeta devem exigir custo zero de interação: os usuários devem ser capazes de atender às suas necessidades sem gastar tempo extra aprendendo como interagir com o sistema. Isso acontece apenas quando a interação por voz se assemelha a uma conversa real, não a uma caixa de diálogo do sistema envolvida no formato de comandos de voz. A regra fundamental de uma boa interface do usuário é simples: os computadores devem se adaptar aos humanos, e não o contrário.

As pessoas raramente têm conversas planas e lineares (conversas que duram apenas um turno). É por isso que, para fazer com que a interação com um sistema pareça uma conversa ao vivo, os designers devem se concentrar na criação de fluxos de conversação. Cada fluxo de conversação consiste em diálogos — os caminhos que ocorrem entre o sistema e o usuário. Cada diálogo inclui os prompts do sistema e as possíveis respostas do usuário.

Um fluxo conversacional pode ser apresentado na forma de um diagrama de fluxo. Cada fluxo deve se concentrar em um caso de uso específico (por exemplo, definir um despertador usando um sistema). Para a maioria dos diálogos em um fluxo, é vital considerar caminhos de erro, quando as coisas saem dos trilhos.

Cada comando de voz do usuário consiste em três elementos principais: intenção, enunciado e slot.

• A intenção é o objetivo da interação do usuário com um sistema habilitado para voz.
  Uma intenção é apenas uma maneira elegante de definir o propósito por trás de um conjunto de palavras. Cada interação com um sistema traz ao usuário alguma utilidade. Seja uma informação ou uma ação, a utilidade está na intenção. Compreender a intenção do usuário é uma parte crucial das interfaces habilitadas para voz. Quando projetamos a VUI, nem sempre sabemos com certeza qual é a intenção do usuário, mas podemos adivinhar com alta precisão.
• Enunciado é como o usuário formula sua solicitação.
  Normalmente, os usuários têm mais de uma maneira de formular um comando de voz. Por exemplo, podemos definir um despertador dizendo “Definir despertador para 8h”, ou “Despertador 8h amanhã” ou até mesmo “Preciso acordar às 8h”. Os designers precisam considerar todas as variações possíveis de enunciado.
• Slots são variáveis ​​que os usuários usam em um comando. Às vezes, os usuários precisam fornecer informações adicionais na solicitação. Em nosso exemplo do despertador, “8 da manhã” é um slot.

Não coloque palavras na boca do usuário

As pessoas sabem falar. Não tente ensinar-lhes comandos. Evite frases como “Para enviar um compromisso de reunião, você precisa dizer 'Calendário, reuniões, criar uma nova reunião'”. Se você precisar explicar comandos, precisará reconsiderar a maneira como está projetando o sistema. Sempre procure conversar em linguagem natural e tente acomodar diversos estilos de fala).

Esforce-se pela consistência

Você precisa alcançar consistência na linguagem e na voz em todos os contextos. A consistência ajudará a construir familiaridade nas interações.

Sempre forneça feedback

A visibilidade do status do sistema é um dos princípios fundamentais de um bom design de GUI. O sistema deve sempre manter os usuários informados sobre o que está acontecendo por meio de feedback apropriado dentro de um prazo razoável. A mesma regra se aplica ao design VUI.

• Avise o usuário de que o sistema está escutando.
  Mostre indicadores visuais quando o dispositivo estiver ouvindo ou processando a solicitação do usuário. Sem feedback, o usuário pode apenas adivinhar se o sistema está fazendo alguma coisa. É por isso que mesmo dispositivos somente de voz, como Amazon Echo e Google Home, nos dão um bom feedback visual (luzes piscando) quando estão ouvindo ou procurando uma resposta.
• Forneça marcadores de conversação.
  Os marcadores de conversação informam ao usuário onde ele está na conversa.
• Confirme quando uma tarefa for concluída.
  Por exemplo, quando os usuários perguntam ao sistema doméstico inteligente habilitado por voz “Apague as luzes da garagem”, o sistema deve informar ao usuário que o comando foi executado com sucesso. Sem confirmação, os usuários precisarão entrar na garagem e verificar as luzes. Ele anula o propósito do sistema de casa inteligente, que é facilitar a vida do usuário.

Evite frases longas

Ao projetar um sistema habilitado para voz, considere a maneira como você fornece informações aos usuários. É relativamente fácil sobrecarregar os usuários com muitas informações quando você usa frases longas. Primeiro, os usuários não podem reter muitas informações em sua memória de curto prazo, então podem esquecer facilmente algumas informações importantes. Além disso, o áudio é um meio lento – a maioria das pessoas pode ler muito mais rápido do que pode ouvir.

Respeite o tempo do seu usuário; não leia longos monólogos de áudio. Quando você está criando uma resposta, quanto menos palavras você usar, melhor. Mas lembre-se de que você ainda precisa fornecer informações suficientes para que o usuário conclua sua tarefa. Assim, se você não puder resumir uma resposta em poucas palavras, exiba-a na tela.

Forneça as próximas etapas sequencialmente

Os usuários podem ficar sobrecarregados não apenas com frases longas, mas também com o número de opções ao mesmo tempo. É vital dividir o processo de interação com um sistema habilitado para voz em pedaços pequenos. Limite o número de opções que o usuário tem a qualquer momento e certifique-se de que ele saiba o que fazer a cada momento.

Ao projetar um sistema ativado por voz complexo com muitos recursos, você pode usar a técnica de divulgação progressiva: Apresente apenas as opções ou informações necessárias para concluir a tarefa.

Tenha uma forte estratégia de tratamento de erros

Obviamente, o sistema deve evitar a ocorrência de erros em primeiro lugar. Mas não importa quão bom seja seu sistema habilitado para voz, você deve sempre projetar para o cenário em que o sistema não entende o usuário. Sua responsabilidade é projetar para esses casos.

Aqui estão algumas dicas práticas para criar uma estratégia:

• Não culpe o usuário.
  Na conversa, não há erros. Tente evitar respostas como “Sua resposta está incorreta”.
• Forneça fluxos de recuperação de erros.
  Ofereça uma opção de idas e vindas em uma conversa, ou até mesmo de sair do sistema, sem perder informações importantes. Salve o estado do usuário na jornada, para que ele possa se engajar novamente com o sistema de onde parou.
• Permita que os usuários reproduzam informações.
  Forneça uma opção para fazer o sistema repetir a pergunta ou resposta. Isso pode ser útil para perguntas ou respostas complexas em que seria difícil para o usuário comprometer todas as informações em sua memória de trabalho.
• Fornecer texto de parada.
  Em alguns casos, o usuário não estará interessado em ouvir uma opção e desejará que o sistema pare de falar sobre ela. Parar de redacção deve ajudá-los a fazer exatamente isso.
• Lide com enunciados inesperados com elegância.
  Não importa o quanto você invista no projeto de um sistema, haverá situações em que o sistema não entenderá o usuário. É vital lidar com esses casos com elegância. Não tenha medo de deixar o sistema admitir uma falta de compreensão. O sistema deve comunicar o que entendeu e fornecer alertas úteis.
• Use análises para melhorar sua estratégia de erro.
  A análise pode ajudá-lo a identificar curvas erradas e interpretações errôneas.

Acompanhe o contexto

Certifique-se de que o sistema entenda o contexto da entrada do usuário. Por exemplo, quando alguém diz que deseja reservar um voo para São Francisco na próxima semana, pode se referir a “ela” ou “a cidade” durante o fluxo da conversa. O sistema deve lembrar o que foi dito e ser capaz de combiná-lo com as informações recém-recebidas.

Saiba mais sobre seus usuários para criar interações mais poderosas

Um sistema habilitado para voz se torna mais sofisticado quando usa informações adicionais (como contexto do usuário ou comportamento anterior) para entender o que o usuário deseja. Essa técnica é chamada de interpretação inteligente e requer que o sistema aprenda ativamente sobre o usuário e seja capaz de ajustar seu comportamento de acordo. Esse conhecimento ajudará o sistema a fornecer respostas até mesmo para perguntas complexas, como "Que presente devo comprar para o aniversário da minha esposa?"

Dê uma personalidade à sua VUI

Todo sistema habilitado por voz tem um impacto emocional no usuário, quer você planeje ou não. As pessoas associam a voz a humanos em vez de máquinas. De acordo com a pesquisa Speak Easy Global Edition, 74% dos usuários regulares de tecnologia de voz esperam que as marcas tenham vozes e personalidades únicas para seus produtos habilitados para voz. É possível construir empatia por meio da personalidade e alcançar um nível mais alto de engajamento do usuário.

Tente refletir sua marca e identidade únicas na voz e no tom que você apresenta. Construa uma persona de seu agente habilitado para voz e confie nessa persona ao criar diálogos.

Ganhar confiança

Quando os usuários não confiam em um sistema, eles não têm motivação para usá-lo. É por isso que construir confiança é um requisito do design do produto. Dois fatores têm um impacto significativo no nível de confiança construído: recursos do sistema e resultado válido.

Construir confiança começa com a definição das expectativas do usuário. As GUIs tradicionais têm muitos detalhes visuais para ajudar o usuário a entender do que o sistema é capaz. Com um sistema habilitado para voz, os designers têm menos ferramentas para confiar. Ainda assim, é vital tornar o sistema naturalmente detectável; o usuário deve entender o que é e o que não é possível com o sistema. É por isso que um sistema habilitado para voz pode exigir a integração do usuário, onde ele fala sobre o que o sistema pode fazer ou o que sabe. Ao projetar a integração, tente oferecer exemplos significativos para que as pessoas saibam o que ela pode fazer (exemplos funcionam melhor do que instruções).

Quando se trata de resultados válidos, as pessoas sabem que os sistemas habilitados para voz são imperfeitos. Quando um sistema fornece uma resposta, alguns usuários podem duvidar que a resposta esteja correta. isso acontece porque os usuários não têm nenhuma informação sobre se sua solicitação foi entendida corretamente ou qual algoritmo foi usado para encontrar a resposta. Para evitar problemas de confiança, use a tela para evidências de suporte — exiba a consulta original na tela — e forneça algumas informações importantes sobre o algoritmo. Por exemplo, quando um usuário pergunta: “Mostre-me os cinco melhores filmes de 2018”, o sistema pode dizer: “Aqui estão os cinco melhores filmes de 2018 de acordo com a bilheteria nos EUA”.

Não ignore a segurança e a privacidade de dados

Ao contrário dos dispositivos móveis, que pertencem ao indivíduo, os dispositivos de voz tendem a pertencer a um local, como uma cozinha. E geralmente, há mais de uma pessoa no mesmo local. Imagine que outra pessoa possa interagir com um sistema que tenha acesso a todos os seus dados pessoais. Alguns sistemas VUI, como Amazon Alexa, Google Assistant e Apple Siri, podem reconhecer vozes individuais, o que adiciona uma camada de segurança ao sistema. Ainda assim, isso não garante que o sistema seja capaz de reconhecer usuários com base em sua assinatura de voz exclusiva em 100% dos casos.

O reconhecimento de voz está melhorando continuamente e será difícil ou quase impossível imitar uma voz em um futuro próximo. No entanto, na realidade atual, é vital fornecer uma camada de autenticação adicional para garantir ao usuário que seus dados estão seguros. Se você criar um aplicativo que funcione com dados confidenciais, como informações de saúde ou detalhes bancários, convém incluir uma etapa extra de autenticação, como uma senha ou impressão digital ou reconhecimento facial.

Realizar testes de usabilidade

O teste de usabilidade é um requisito obrigatório para qualquer sistema. Teste cedo, teste com frequência deve ser uma regra fundamental do seu processo de design. Reúna dados de pesquisa do usuário desde o início e itere seus projetos. Mas testar interfaces multimodais tem suas próprias especificidades. Aqui estão duas fases que devem ser levadas em consideração:

• Fase de ideação
  Teste seus diálogos de amostra. Pratique a leitura de diálogos de amostra em voz alta. Depois de ter alguns fluxos de conversa, grave os dois lados da conversa (as declarações do usuário e as respostas do sistema) e ouça a gravação para entender se soam naturais.
• Estágios iniciais de desenvolvimento do produto (testes com protótipos lo-fi)
  O teste do Mágico de Oz é adequado para testar interfaces de conversação. O teste do Mágico de Oz é um tipo de teste no qual um participante interage com um sistema que acredita ser operado por um computador, mas na verdade é operado por um ser humano. O participante do teste formula uma pergunta e uma pessoa real responde do outro lado. Este método recebe o nome do livro The Wonderful Wizard of Oz de Frank Baum. No livro, um homem comum se esconde atrás de uma cortina, fingindo ser um bruxo poderoso. Este teste permite mapear todos os cenários possíveis de interação e, como resultado, criar interações mais naturais. Say Wizard é uma ótima ferramenta para ajudá-lo a executar um teste de interface de voz do Wizard of Oz no macOS.
• Estágios posteriores de desenvolvimento do produto (testes com protótipos de alta fidelidade)
  Em testes de usabilidade de interfaces gráficas de usuário, muitas vezes pedimos aos usuários que falem em voz alta quando interagem com um sistema. Para um sistema habilitado para voz, isso nem sempre é possível porque o sistema estaria ouvindo essa narração. Portanto, pode ser melhor observar as interações do usuário com o sistema, em vez de pedir que falem em voz alta.

Como criar uma interface multimodal usando o Adobe XD

Agora que você tem uma compreensão sólida do que é uma interface multimodal e quais regras devem ser lembradas ao projetá-las, podemos discutir como fazer um protótipo de uma interface multimodal.

A prototipagem é uma parte fundamental do processo de design. Ser capaz de dar vida a uma ideia e compartilhá-la com outras pessoas é extremamente importante. Até agora, os designers que queriam incorporar a voz na prototipagem tinham poucas ferramentas nas quais confiar, sendo a mais poderosa um fluxograma. Imaginar como um usuário interagiria com um sistema exigia muita imaginação de alguém olhando para o fluxograma. Com o Adobe XD, os designers agora têm acesso ao meio de voz e podem usá-lo em seus protótipos. O XD conecta perfeitamente a prototipagem de tela e voz em um aplicativo.

Novas experiências, mesmo processo

Embora a voz seja um meio totalmente diferente do visual, o processo de prototipagem de voz no Adobe XD é praticamente o mesmo que a criação de protótipos para uma GUI. A equipe do Adobe XD integra a voz de uma forma que parecerá natural e intuitiva para qualquer designer. Os designers podem usar acionadores de voz e reprodução de fala para interagir com protótipos:

• Os acionadores de voz iniciam uma interação quando um usuário diz uma determinada palavra ou frase (enunciado).
• A reprodução de fala dá aos designers acesso a um mecanismo de conversão de texto em fala. O XD falará palavras e frases definidas por um designer. A reprodução de voz pode ser usada para muitas finalidades diferentes. Por exemplo, pode atuar como um reconhecimento (para tranquilizar os usuários) ou como orientação (para que os usuários saibam o que fazer em seguida).

O melhor do XD é que ele não força você a aprender as complexidades de cada plataforma de voz.

Chega de palavras — vamos ver como funciona em ação. Para todos os exemplos que você verá abaixo, usei pranchetas criadas usando o kit Adobe XD UI para Amazon Alexa (este é um link para baixar o kit). O kit contém todos os estilos e componentes necessários para criar experiências para o Amazon Alexa.

Suponha que temos as seguintes pranchetas:

Vamos entrar no modo de prototipagem para adicionar algumas interações de voz. Começaremos com os acionadores de voz. Junto com gatilhos como tocar e arrastar, agora podemos usar a voz como gatilho. Podemos usar qualquer camada para acionadores de voz, desde que tenham uma alça que leve a outra prancheta. Vamos conectar as pranchetas juntas.

Assim que fizermos isso, encontraremos uma nova opção de “Voz” em “Trigger”. Quando selecionamos esta opção, veremos um campo “Command” que podemos usar para inserir um enunciado — é isso que o XD realmente escutará. Os usuários precisarão falar este comando para ativar o gatilho.

Isso é tudo! Definimos nossa primeira interação de voz. Agora, os usuários podem dizer algo e um protótipo responderá a isso. Mas podemos tornar essa interação muito mais poderosa adicionando a reprodução de fala. Como mencionei anteriormente, a reprodução de fala permite que um sistema fale algumas palavras.

Selecione uma segunda prancheta inteira e clique na alça azul. Escolha um gatilho “Time” com um atraso e defina-o para 0,2s. Sob a ação, você encontrará “Reprodução de Fala”. Vamos escrever o que o assistente virtual nos responde.

Estamos prontos para testar nosso protótipo. Selecione a primeira prancheta e clique no botão play no canto superior direito para abrir uma janela de visualização. Ao interagir com a prototipagem de voz, verifique se o microfone está ligado. Em seguida, mantenha pressionada a barra de espaço para falar o comando de voz. Essa entrada aciona a próxima ação no protótipo.

Use a animação automática para tornar a experiência mais dinâmica

A animação traz muitos benefícios ao design de interface do usuário. Ele serve a propósitos funcionais claros, como:

• comunicar as relações espaciais entre objetos (De onde vem o objeto? Esses objetos estão relacionados?);
• comunicação de affordance (O que posso fazer a seguir?)

Mas propósitos funcionais não são os únicos benefícios da animação; animação também torna a experiência mais viva e dinâmica. É por isso que as animações de interface do usuário devem ser uma parte natural das interfaces multimodais.

Com “Auto-Animate” disponível no Adobe XD, fica muito mais fácil criar protótipos com transições animadas imersivas. O Adobe XD faz todo o trabalho pesado para você, então você não precisa se preocupar com isso. Tudo o que você precisa fazer para criar uma transição animada entre duas pranchetas é simplesmente duplicar uma prancheta, modificar as propriedades do objeto no clone (propriedades como tamanho, posição e rotação) e aplicar uma ação de Animação automática. O XD animará automaticamente as diferenças nas propriedades entre cada prancheta.

Vamos ver como isso funciona em nosso design. Suponha que temos uma lista de compras existente no Amazon Echo Show e queremos adicionar um novo objeto à lista usando voz. Duplique a seguinte prancheta:

Vamos introduzir algumas mudanças no layout: Adicionar um novo objeto. Não estamos limitados aqui, então podemos modificar facilmente quaisquer propriedades como atributos de texto, cor, opacidade, posição do objeto — basicamente, qualquer alteração que fizermos, o XD irá animar entre elas.

Quando você conecta duas pranchetas no modo de protótipo usando a Animação automática em "Ação", o XD anima automaticamente as diferenças nas propriedades entre cada prancheta.

E aqui está como a interação ficará para os usuários:

Uma coisa crucial que requer menção: Mantenha os nomes de todas as camadas iguais; caso contrário, o Adobe XD não poderá aplicar a animação automática.

Conclusão

Estamos no início de uma revolução na interface do usuário. Uma nova geração de interfaces — interfaces multimodais — não apenas dará mais poder aos usuários, mas também mudará a maneira como os usuários interagem com os sistemas. We will probably still have displays, but we won't need keyboards to interact with the systems.

At the same time, the fundamental requirements for designing multimodal interfaces won't be much different from those of designing modern interfaces. Designers will need to keep the interaction simple; focus on the user and their needs; design, prototype, test and iterate.

And the great thing is that you don't need to wait to start designing for this new generation of interfaces. You can start today.

Este artigo faz parte da série de design UX patrocinada pela Adobe. A ferramenta Adobe XD é feita para um processo de design de UX rápido e fluido, pois permite que você vá da ideia ao protótipo mais rapidamente. Projete, prototipe e compartilhe - tudo em um aplicativo. Você pode conferir mais projetos inspiradores criados com o Adobe XD no Behance e também se inscrever no boletim informativo de design de experiência da Adobe para se manter atualizado e informado sobre as últimas tendências e insights para design de UX/UI.