Primeiras aulas do curso Microinterações: Enriquecendo a experiência de interação

Microinterações: Enriquecendo a experiência de interação

O que são microinterações - Introdução

Olá! Meu nome é Letícia e serei sua instrutora neste curso da Alura. Aprenderemos sobre microinterações, isto é, entenderemos os detalhes da interação do usuário dentro da interface. São esses detalhes que farão toda a diferença na experiência de uso de uma aplicação.

Em nossa simulação de aplicativo, temos o seguinte problema: em uma tela de login que apresenta os campos de e-mail e senha, ao clicar em um dos campos o rótulo desaparecia, então o usuário perdia o contexto do que estava sendo escrito.

A solução que encontramos foi de fazer o label transicionar, ficando um pouco menor durante a digitação do campo.

Trabalharemos, ainda, na mensagem de erro do formulário e a melhor maneira de implementá-la. Também aprenderemos à fazer um feedback de carregamento no botão "Acessar conta".

Por último, já dentro da aplicação, veremos os campos de preenchimento para dados de cartão de crédito. Nesse contexto, inserimos um reforço na orientação ao usuário.

Passaremos pelo processo de elaboração, discussão e criação da documentação das microinterações, e então utilizaremos o after effects para criar uma animação para mostrar para a equipe o resultado e isso ser passado para o pessoal do desenvolvimento.

Vamos lá?

O que são microinterações - Análise de contexto

Para aprender a inserir as microinterações dentro de um projeto, usaremos de base o aplicativo "Nó na Gravata", mais especificamente a parte de check-out, ao analisar como se dá esse fluxo de navegação. Temos alguns números que correspondem ao item a ser comprado pelo usuário, como valor de frete e custo do produto.

Trabalharemos também com a identificação do usuário pelo login.

Uma vez identificado o usuário, teremos algumas informações do endereço de entrega da compra. A próxima etapa é "Pagamento", é exibida uma revisão das informações de envio, valor de frete e opção de formas de pagamento. Por últimos teremos uma página com contém todas as informações do produto e a confirmação da compra. Trabalharemos com usuários já castrados no app.

Esse foi o fluxo desenhado para este aplicativo. Feito isso, fizemos uma planilha de testes para medir o nível de satisfação do usuário para cada tela da aplicação, como "carrinho de compras", "login", "Informações de entrega" e assim por diante.

Analisaremos tela por tela para criar soluções personalizadas para cada questão. Na tela de login, a experiência do usuário foi média. Um dos argumentos é de que o contexto do input é perdido, temos ainda não sabia que a aplicação estava carregando.

Temos, basicamente, um problema de feedback ineficiente e de orientação não clara. Na tela de login, ao clicarmos sobre o campo de email, o label desaparecia. O mesmo vale pelo campo de senha. Como estamos trabalhando com apenas dois campos e ainda dispomos de alguns reforços visuais, a chance do usuário ficar incomodado é pequena, mas ela existe. Outro ponto apontado é que ao clicar em "Acessar conta", o usuário não recebia qualquer tipo de referência de que os dados de fato foram submetidos e aplicação estava em fase de carregamento.

Na tela de cadastro, os mesmos problemas ocorrem. Na tela de cadastro de um novo endereço, também encontramos a perda do contexto do input. Quando estamos lidando com as informações de entrega, e o usuário se depara com um formulário bem mais extenso, então a perda de contexto passa a ser um problema muito mais grave. Na tela cadastro de uma nova forma de pagamento, os usuários gostariam de confirmar as informações do cartão, antes que elas fossem submetidas. As pessoas precisam se sentir mais seguras ao inserir dados financeiros importantes, como a numeração de um cartão de crédito, então precisamos criar ferramentas interativas que forneçam essa segurança e credibilidade.

Agora que temos todas essas informações sobre a experiência dos usuários, o que faremos?

Precisamos fazer com que a informação seja compartilhada com o restante do time. Utilizaremos o user flow para discutirmos os pontos com toda a equipe. O user flow é o fluxo de interações do usuário, isto é, quais são os caminhos dentro da aplicação percorridos.

É importante mantermos o user flow sempre aberto, pois no momento em que encontramos problemas em alguma tela, saberemos como ele pode interferir em outros processos da aplicação.

O que são microinterações - Pensando a solução

Entendemos como se dá o funcionamento do user flow e como ele pode beneficiar nosso processo de solução com microinterações. Vamos retomar quais são os problemas nas respectivas telas segundo nosso teste com usuários:

TelaProblema
LoginFeedback ineficiente Sem feedback de carregamento
CadastroSem feedback de carregamento
Informações de EntregaPerde-se o contexto do input
Pagamento novo cartãoOrientação para confirmação das informações

Antes de começar a pensar nas soluções, precisamos analisar quais são os erros recorrentes. Temos problemas repetidos em várias telas, como é o caso de perda do contexto do input. Trabalharemos diretamente na tela de Login, já que o problema em uma única tela é significativo para as outras neste curso e evitaremos retrabalho. Não estamos aplicando as microinterações com intenção de mudar as telas, mas analisar o teste de usabilidade e encontrar soluções que serão aplicadas às diversas telas ou formulários.

Antes disso tudo, vamos entender com mais clareza o que são microinterações. A prerrogativa desse tipo de interação é encontrar soluções para problemas pontuas na UI. Não lidamos com ações complexas que modificam totalmente a interface, e sim com problemas localizados.

Primeiramente, lidaremos com a questão de perda do contexto do input. O label do campo desaparecia assim que o usuário começava a digitar a informação. A primeira solução pensada foi manter o label fixo no formulário.

O problema dessa proposta, é que ela prejudica a formatação do texto e fragmenta a informação. Outra proposta é manter o um label mas com tamanho reduzido, de forma que o texto do formulário se mantenha íntegro.

Porém, temos um outro problema com essa saída: a legibilidade do label fica prejudicada, em uma experiência mobile isso pode ser ainda mais grave. Trata-se, ainda, de uma questão de acessibilidade.

Passar por essas propostas e analisar seus pontos fracos, nos ajuda a elaborar uma terceira alternativa. Manteremos o label grande para não prejudicar a legibilidade no formulário, e assim que o usuário começar a digitar os dados, reduziremos o label. Portanto, criamos um formulário que contém dois estados, mas como faremos a conexão entre eles?

Para tanto, usaremos motion em UI. Estamos falando de uma animação, um recurso bastante utilizado para que tenhamos mais flexibilidade em um projeto, não usando apenas telas estáticas. As animações podem ter diversos fins, mas neste caso estamos lidando com uma proposta funcional: não quereremos perder em legibilidade ou prejudicar a orientação do texto.

O motion nos ajuda a contextualizar a microinteração e possuía uma consistência na UI. Para este ponto, é importante que você tenha conhecimentos de After Effects. Aqui na Alura possuímos o curso de animação 2D, e seu conteúdo é crucial, já que não retomaremos conceitos básicos de After, e sim, usaremos a ferramenta para implementar a motion no projeto.

Sobre o curso Microinterações: Enriquecendo a experiência de interação

O curso Microinterações: Enriquecendo a experiência de interação possui 245 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana