Design Ux
Explorando o Design Multimodal - Um Tutorial do Adobe XD
Uma mãe se preparando para preparar o jantar em casa abre um aplicativo de culinária em seu iPad ou SmartTV. Usando toque e voz, ela interage com o aplicativo, dizendo ao vídeo para pausa , avançar rápido , ou repetir uma seção específica. Se ela quiser, ela pode tocar na tela em vez de usar a voz.
Usar vários modos de interação é o que design multimodal é baseado em.
Antes de explorar o design multimodal, vamos começar com uma compreensão básica de dois tipos de interações: computador para humano e humano para computador . Cada uma dessas interações inclui várias modalidades, como voz, toque e feedback tático .
Modalidades humano-computacionais
As modalidades computador-humano (ou computador-para-humano) ajudam um computador a entender o que o usuário deseja. As modalidades humanas mais comuns dependem da visão, audição e habilidades táteis. Alguns exemplos são gráficos de computador, reprodução de áudio, vibrações de telefone e feedback taptic do smartwatch.
Modalidades Homem-Computador
Inventamos várias maneiras de interagir com computadores. Alguns exemplos são teclados, mouses, telas sensíveis ao toque, trackpads e reconhecimento de fala. Nesse caso, os usuários contam com vários mecanismos para se comunicar e comandar os computadores.
Exemplos mais complexos são acelerômetros, giroscópios e magnetômetros que ajudam na detecção de movimento. Pense em jogar uma partida de tênis em um console e usar o gamepad para emular o movimento da raquete. Isso traz muito mais oportunidades para criar uma experiência de usuário única e envolvente [multimodal].
Por que design multimodal
A ideia por trás do design multimodal é combinar várias modalidades para melhorar a experiência do usuário de um produto. Como todos usam produtos de maneiras diferentes e em contextos diferentes, os usuários recebem vários mecanismos de feedback e várias maneiras de interagir com seu computador.
Designers facilitam a vida dos usuários ao incorporar e automatizar ações por meio de diferentes modalidades. Se houvesse apenas um mecanismo de modalidade, isso afetaria negativamente a experiência do usuário e o design “falharia” na mente do usuário.
Um exemplo é um sistema de infoentretenimento para automóveis. A maioria desses sistemas permite que os usuários interajam com voz e toque. Ao dirigir, a escolha óbvia é usar nossa voz para fazer uma ligação ou navegação, mas quando estacionado, é mais fácil usar a tela sensível ao toque ou uma roda de rolagem para interagir com o sistema.
Aqui estão mais alguns exemplos que comumente encontramos em design multimodal:
- Uma interface gráfica de usuário depende de nossa visão para interagir, por exemplo, com um site ou um outdoor digital.
- Uma interface de usuário de voz depende de nossos recursos auditivos para interagir. Isso inclui qualquer assistente de voz, como Alexa, Google Assistant ou Siri.
- Tácticas, gestos e movimentos dependem de nossa percepção do toque (habilidades táteis) para desencadear uma interação. Receber uma mensagem ou deslizar para a esquerda para pular uma música são dois exemplos.
O design multimodal também é útil ao projetar para pessoas com certas limitações e deficiências.
Um exemplo de design multimodal simples: o SmartHome
Robert chega em casa após um longo dia. Seu sistema de automação residencial é acionado assim que ele chega a um quilômetro de sua garagem. O sistema reconhece que ele chegou e inicia uma sequência de ações automatizadas. Por exemplo, acende as luzes, ajusta o aquecimento e o resfriamento e desativa o sistema de alarme.
Em seguida, Robert pode usar um controle remoto ou pedir ao assistente habilitado para IA para diminuir o aquecimento quando ele entrar.
Uma experiência de design multimodal complexo: saúde
Agora somos capazes de capturar entradas mais complexas de usuários que usam dispositivos inteligentes. Podemos medir informações como níveis de estresse, batimentos cardíacos, ciclos de sono, ingestão de água e, em um futuro próximo, níveis de glicose.
Uma vez que essas entradas são armazenadas, dispositivos e serviços como Fitbit e Primeiros socorros da Cruz Vermelha fornecem avisos valiosos que salvam vidas na forma de um alerta vibratório, uma “batida” táctica no pulso ou um alarme sonoro.
Este é um uso mais complexo do projeto multimodal porque o equilíbrio entre as entradas e as saídas precisa ser calculado corretamente. O design não deve dar alarmes falsos, podendo levar o usuário ao pânico.
Seja projetando experiências multimodais simples ou complexas, uma das melhores maneiras de entender melhor o projeto multimodal é começar a projetar com ele em mente. Vejamos como podemos conseguir isso usando Adobe XD .
Prototipando uma experiência multimodal em Adobe XD
Adobe XD, uma popular ferramenta de design UX, recentemente adicionou comandos de voz e reprodução ao seu arsenal de recursos. Tirando proveito deles, podemos adicionar modalidades como fala e reprodução de áudio para criar uma experiência de usuário multimodal.
Como exemplo, vamos criar um protótipo da jornada móvel para um aplicativo de culinária. Um chef está mostrando como cozinhar um bife e as pessoas podem dizer ao aplicativo para pausar, repetir ou continuar usando a voz ou o toque.
Primeiro, fazemos o protótipo de todas as telas necessárias para ilustrar a experiência:
Clique para ver a imagem em tamanho real. A seguir, adicionamos um comando de voz que emulará uma modalidade de voz. No modo de protótipo, começamos conectando a primeira e a segunda tela. Então nós selecionamos voz sob desencadear e escrever um enunciado sob comando para acionar essa transição. Se quisermos adicionar dois ou mais comandos de voz, precisaremos adicionar um conector para cada um.
Clique para ver a imagem em tamanho real. Para a próxima tela, queremos que o sistema responda ao usuário. Fazemos isso criando um gatilho de tempo e adicionando reprodução de fala em ação. Como queremos criar uma reação imediata, definimos o tempo para 0 segundos.
Clique para ver a imagem em tamanho real. Também podemos adicionar gatilhos tradicionais. Neste exemplo, vamos adicionar um gatilho de toque no segundo elemento da lista. Quando o usuário toca neste elemento, o aplicativo avança para a próxima tela. Combinar comandos de voz e comandos de toque é um ótimo exemplo de como fornecer uma experiência de usuário melhor e mais cuidadosa usando design multimodal.
Clique para ver a imagem em tamanho real. A seguir, queremos ilustrar como o usuário pode pausar e continuar a experiência no aplicativo. Como estamos projetando este aplicativo com o Amazon Echo em mente, queremos adicionar um comando de voz como “Echo, pause”.
Clique para ver a imagem em tamanho real. Para fazer o vídeo continuar, vamos realizar a mesma ação adicionando o comando de voz “Eco, continuar”.
Clique para ver a imagem em tamanho real. Este é um exemplo básico de design multimodal usando o acionador de voz. Gatilhos adicionais incluem tocar, arrastar e usar o teclado ou um gamepad para controlar o protótipo.
É fácil cair na armadilha de usar gatilhos simplesmente porque eles existem. Para projetar uma melhor experiência do usuário com design multimodal, designers desejará testar e aprender quais interações fazem mais sentido e em que horas.
Design Multimodal e Modelos Mentais
Ao projetar usando modalidades, é importante lembrar que os usuários têm um conjunto pré-concebido de expectativas ( modelos mentais ) para saber como uma interação deve ocorrer. Por exemplo, a maioria dos usuários espera que uma tela se mova acima quando eles rolam baixa em um trackpad ou com uma roda de rolagem do mouse.
Observe que, em muitos casos, esses modelos mentais ainda estão sendo formados. Tremendo o telefone é um exemplo. Ainda é uma interação obscura, pois alguns fornecedores a usam para 'desfazer' a digitação, enquanto outros a usam para embaralhar as músicas.
É importante estar ciente desses modelos mentais ao escolher quais modalidades colocar no design do produto. O uso de modalidades familiares pode aprimorar a experiência do usuário. Modalidades que ainda estão em formação podem confundir os usuários e degradar a experiência.
Modalidades emergentes: Design de conversação
Duas modalidades que estão ganhando muita força são chatbots e interfaces de usuário de voz . Às vezes chamadas de interfaces de usuário conversacionais, o foco principal são as interações de texto e fala.
Um chatbot pode usar uma interface para receber entradas, como texto, e é capaz de mostrar gráficos, links, mapas e diálogos de conversação. Alguns chatbots podem receber comandos por voz e, em seguida, exibir os resultados como texto ou usando voz sintetizada.
As interações de voz pura também estão surgindo. Pense na expansão do Siri ou Alexa para dispositivos domésticos inteligentes onde os usuários não digitam nada, mas sim interações completas apenas com voz. Isso é importante para designers porque quase toda experiência em design de conversação é multimodal.
Um ótimo exemplo é Lily de Maybe . Um bot que ensina chinês (e outros idiomas) e funciona em diferentes canais. As conversas podem ocorrer no aplicativo ou falando com o bot.
Resumo
Usando voz, toque, texto e feedback tático, o design multimodal combina diferentes modalidades para criar melhores experiências de usuário. As interações computador-homem e homem-computador podem ser combinadas para criar experiências de produto únicas.
O design multimodal também apresenta novas oportunidades e desafios para designers . Ferramentas como Adobe XD tornar mais fácil prototipar produtos usando várias modalidades, mas existe uma arte e ciência em usá-los juntos.
Alcançar o equilíbrio perfeito, combinado com o surgimento de novas modalidades, desafiará os designers a elevar o padrão na melhoria da experiência do usuário.
• • •
Leituras adicionais no ApeeScape Design Blog:
- Design com precisão - uma revisão do Adobe XD
- Explorando as razões para as críticas do Design Thinking
- Chatbot UX - Dicas e considerações sobre design
- The Chat Crash - Quando um Chatbot falha
- A importância do design centrado no ser humano no design de produtos
Compreender o básico
O que é design multimodal?
O design multimodal utiliza várias modalidades para melhorar a experiência do usuário nos produtos. Isso inclui interações de computador para humano e de humano para computador, como voz, texto, toque e feedback tático. Os designers integram esses tipos de interações em produtos e os combinam para uma melhor experiência do usuário.
Para que é usado o Adobe XD?
Adobe XD é uma ferramenta de design que pode ser usada em vários estágios do processo de design. É mais conhecido pela prototipagem; no entanto, ele pode ser usado para wireframes, maquetes e como um sistema de design para comunicação com os desenvolvedores.
Por que a multimodalidade é importante?
A multimodalidade, a interação entre computadores e humanos, é importante porque melhora a experiência do usuário ao introduzir vários mecanismos de interação. Com várias modalidades em jogo, os usuários têm mais opções ao interagir com os produtos, o que significa que há menos chance de 'falhas' de UX.
O Sketch é melhor que o Adobe XD?
Tanto o Sketch quanto o Adobe XD são excelentes ferramentas de design. Sketch não é melhor, nem Adobe XD. Adobe XD, sendo o mais novo na cena, está rapidamente alcançando o Sketch. A principal diferença é que o Sketch usa plug-ins para estender a funcionalidade, enquanto a Adobe está tentando incluir tudo nativamente dentro do XD.
O Adobe XD faz parte da Creative Cloud?
Adobe XD faz parte do pacote Creative Cloud da Adobe. O Create Cloud inclui outros aplicativos da Adobe, bem como o XD, e permite armazenamento em nuvem e atualizações automáticas.
