UI Design: prototipação e animações interativas

Fluxo e baixa fidelidade - Introdução

Apresentando o instrutor e o curso

Olá! Meu nome é Thiago Marques, sou designer de produto, pesquisador em interação humano-computador e instrutor na Alura. Sejam bem-vindos ao curso de Prototipagem Avançada.

Audiodescrição: Thiago é um homem de pele branca, com cabelos, olhos e barba castanho-escuros. Ele veste uma camiseta preta. Está no estúdio da Alura, com luzes que variam do azul ao roxo ao fundo, além de uma estante com vários livros e plantas.

Introduzindo a abordagem prática do curso

Neste curso, preparamos uma abordagem prática para aqueles que já fazem parte da nossa trilha de carreiras. O objetivo é que possamos criar protótipos utilizando diversos recursos do Figma. Ao final do curso, esperamos que todos saibam como preparar e ter um protótipo pronto para testes de usabilidade.

Para dar uma visão geral do que aprenderemos, começamos com a criação de uma tela de login no Figma, onde podemos implementar animações de hover (passagem do mouse sobre um botão). Vamos ensinar como fazer essas animações e microinterações.

Explorando animações e microinterações

Além disso, abordaremos animações de loading na página, um recurso essencial para fornecer feedback ao usuário sobre processos em andamento no back-end. Todas essas microinterações serão ensinadas, incluindo a simulação de entrada de dados em uma tela de login, essencial para testes de usabilidade.

Após a entrada de dados, aprenderemos a criar uma página de onboarding com microinterações, como um slider que avança conforme o usuário interage. Também desenvolveremos a tela inicial do aplicativo que criamos, o Wikimood, que permite às pessoas registrarem seu humor diário. À medida que interagimos com o protótipo, tornamos a experiência mais interativa.

Utilizando variáveis e gamificação no Figma

Para que isso aconteça, estamos utilizando as variáveis do próprio Figma. As variáveis são um recurso muito importante e interessante para trazer mais funcionalidades aos nossos protótipos, tornando-os mais avançados. À medida que a pessoa usuária clica para escolher, por exemplo, seus moods (humores), conseguimos alimentar variáveis do Figma, e essas variáveis fazem com que o que foi escolhido anteriormente se reflita na tela.

Temos também recursos de contagem. Assim que a pessoa usuária atinge um número específico, no caso, sete, completando uma semana de acompanhamento, oferecemos uma insígnia. Trabalhamos com gamificação no aplicativo e aprendemos por que a gamificação é importante.

Criando chatbots e aplicando padrões de design

Além disso, vimos durante este curso como criar um chatbot com IA. Discutimos bastante a importância de trazer isso, os padrões de design existentes atualmente, como o Material Design e o Liquid Glass da Apple, que é uma tendência forte de design para os próximos anos. Aprendemos a aplicar esses conceitos em outros tipos de tela, além de aplicativos.

Desenvolvendo landing pages e interações para a web

Por exemplo, mostramos uma landing page onde colocamos animações e micro interações em hover de botão, além de animações em cards. Falamos bastante sobre esse processo de criação e sua importância. No final, aprendemos a aplicar micro interações e interações em outros tipos de dispositivos e interfaces. Criamos uma página para a web, uma landing page, aplicando tudo o que aprendemos, como animações, status de hover para botões e diferentes animações e interações que podemos ter nas nossas páginas, usando todos os princípios que aprendemos, tanto na parte de motion quanto nas interações no Figma.

Convidando para o curso e encerrando

Este curso é focado em pessoas que já têm uma base de Figma e que desejam aplicar esses conhecimentos para criar protótipos interativos. Convidamos você a fazer parte deste curso, que é bastante prático. Temos a parte teórica, mas queremos que, a cada aula, você saia com uma tarefa que possa aplicar no seu dia a dia, no seu trabalho ou projeto. As partes se conectam ao todo, e cada parte que aprendemos pode ser aplicada assim que você concluir cada aula.

Nos vemos neste curso de prototipação avançada. Até breve!

Fluxo e baixa fidelidade - Panorama

Introduzindo a importância da prototipação

Para começarmos nossos trabalhos sobre prototipação, queremos mostrar por que estamos aqui. Será um diálogo com reflexões para introduzir este assunto tão interessante. Primeiramente, é importante transformar ideias em experimentos testáveis. Sabemos que, durante todo o processo de design, seguimos algumas fases. Por exemplo, utilizamos o Design Thinking e o Double Diamond, nos quais convergimos e divergimos ideias e problemas. A partir de um problema central, realizamos pesquisas e, em determinado momento, validamos esse problema e começamos a idear. Criamos ideias e, a partir delas, fazemos um protótipo para ser testado com pessoas. Transformar ideias em experimentos testáveis é uma das missões do nosso protótipo.

Além disso, o protótipo ajuda a reduzir riscos antes do desenvolvimento. Imagine o cenário: como pessoas designers, temos um problema central, como pessoas não conseguindo fazer compras em um aplicativo de e-commerce de uma loja de roupas. Se trouxermos isso apenas das nossas ideias, podemos estar enviesados, pois talvez não sejamos o consumidor final que utilizará aquela loja ou aquelas roupas. Precisamos reduzir esses riscos, pois, ao começar a fazer um protótipo, mesmo utilizando técnicas de design, é necessário testar com o consumidor final, a pessoa que realmente utilizará o produto. Reduzindo riscos durante o pré-desenvolvimento, também reduzimos custos. Caso contrário, teríamos que, após o desenvolvimento, voltar para reconstruir e melhorar, o que, no final, representa custos financeiros.

Explorando e validando através de protótipos

Vamos explorar, comunicar, validar e iterar. O protótipo tem essa missão. Durante o desenvolvimento do protótipo, exploramos diversas maneiras de realizar uma mesma interação. Comunicamos ideias para interações e formas visuais, e validamos e iteramos constantemente. Quanto mais cedo erramos, mais rápido acertamos. O protótipo é feito para testar, e o teste aumenta a possibilidade de erro. O protótipo acelera nosso trabalho, e quanto mais rápido conseguimos testar em um ambiente com diferentes profissionais, como em uma empresa, melhor. O protótipo valida nossas ideias e ajuda a provar que o que está na tela funcionará com usuários finais após o desenvolvimento.

Também validamos interações complexas. Nos dias de hoje, existem diversas formas de criar produtos e interações, muitas das quais são complexas. Devemos validar essas interações. Podemos simular comportamentos reais das pessoas, como, por exemplo, ao desenvolver um aplicativo para celular, entender como as pessoas se comportarão ao utilizá-lo. Por fim, testamos fluxos de ponta a ponta, desde um cadastro até o checkout no carrinho de compras. O protótipo nos permite fazer isso.

Criando experiências de usabilidade fiéis

Criamos experiências mais fiéis para testes de usabilidade. É importante testar, independentemente do estágio em que estamos no desenvolvimento de um produto. Podemos criar experiências mais fiéis. Hoje, existem diversas ferramentas e formas de criar protótipos rapidamente, o que nos ajuda a entregar uma experiência quase final no momento do teste para o usuário. Existem diversas formas de prototipagem, incluindo alta fidelidade, que é basicamente entregar um produto quase final. O sentimento que a pessoa terá ao navegar no protótipo será o mesmo após o desenvolvimento.

Na média fidelidade, ainda não estamos no estágio final, mas já começamos a transmitir uma sensação de como será o produto final. Nesse estágio, não é necessário entregar tudo o que será o protótipo final, como ilustrações, todas as interações e tudo bem formatado utilizando um Design System, por exemplo. No entanto, já conseguimos dar uma ideia do que o aplicativo pode ser.

Explorando diferentes formas de prototipagem

No contexto de produtos de software e nossa vida digital, existem diversas formas de entregar um protótipo. Quando falamos de baixa fidelidade, estamos nos referindo a wireframings ou até mesmo a protótipos em papel. Tudo que é testável é considerado um protótipo. Lembro-me de vários casos no início da minha carreira, quando comecei a interagir com a comunidade de design e a entender mais sobre o assunto. Participei de muitos hackathons, onde as pessoas gostam de testar ideias. Em um desses eventos, o que me chamou a atenção foi que, embora tivéssemos um problema específico, o que era testável não era necessariamente algo digital. Precisávamos fazer testes com o que chamamos de Rabisco Frames, utilizando papel para simular telas e testar dessa forma. Isso não era por falta de tecnologia, mas sim para estimular diversas formas de teste.

A IDEO, uma empresa renomada na área de design thinking, oferece diversas formas de prototipagem e testagem com pessoas. Eles utilizam muitas técnicas de prototipação fora do ambiente digital para testar, por exemplo, processos de educação e design de serviço. Essas abordagens ajudam a resolver problemas mundiais, como a fome e questões ambientais, criando soluções e testando-as com usuários finais.

Focando na prototipagem digital

No nosso curso, vamos focar no digital. Durante as interações, discutiremos microinterações, status de hover quando o usuário passa o mouse sobre um botão, carregamentos de telas e transições entre telas, evitando cortes secos. Podemos criar interações entre telas para tornar a experiência mais agradável e chamativa para o usuário. Também abordaremos motion, animações e como simular dados reais, um aspecto importante da prototipação. Queremos tornar o protótipo o mais real possível, evitando o uso excessivo de Lorem Ipsum.

Trabalharemos com variantes inteligentes no Figma, que nos permitem criar protótipos mais fiéis ao real. Discutiremos condicionais e regras dentro do Figma, que facilitam a criação de protótipos interativos de maneira complexa, mas que também simplificam nosso dia a dia. Essa complexidade ajuda a tornar nosso trabalho mais valioso.

Convidando para a prática e interação

Nosso papel como designers é estar próximos de stakeholders, gerentes de produto, pessoas de negócios e líderes executivos. Quando conseguimos entregar algo de valor, provamos a importância do nosso papel durante todo o processo de desenvolvimento de um produto. A prototipação, do básico ao mais avançado, é extremamente importante.

Convido todos a participar das próximas aulas, que serão muito práticas. Sugiro que, caso queiram acompanhar, pausem o vídeo e pratiquem junto, ou assistam até o final e realizem a atividade proposta em casa. Se houver dúvidas, estamos à disposição para respondê-las. Tenho certeza de que vocês vão se divertir muito fazendo protótipos conosco. Vamos lá?

Fluxo e baixa fidelidade - Arquitetura com IA

Introduzindo o desafio do Wikimood

Nesta aula prática, vamos iniciar com um desafio que nos acompanhará ao longo do curso. O desafio consiste em criar um aplicativo chamado Wikimood. Este aplicativo tem como objetivo auxiliar as pessoas a acompanharem seus sentimentos ao longo da semana, em um contexto onde saúde mental, autoconsciência e bem-estar são temas centrais. Aplicativos de mood tracking (rastreamento de humor) se tornaram ferramentas valiosas para ajudar usuários a entender seus padrões emocionais.

Pensando nisso, nós e nossa equipe fomos convidados a criar a experiência inicial do Wikimood. Trata-se de um aplicativo simples, moderno e intuitivo, que ajuda o usuário a registrar seu humor ao longo da semana e visualizar padrões emocionais. Nosso primeiro desafio é mapear o fluxo do usuário.

Mapeando o fluxo do usuário

Estamos em uma simulação onde participamos de todo o processo de design, já conhecemos as dores dos usuários e vamos começar a entender qual seria o fluxo dentro do aplicativo. Utilizaremos o FigJam para isso, e faremos juntos, com validações utilizando inteligência artificial para nos auxiliar.

Inicialmente, temos três formas para facilitar o processo. A forma inicial, representada em amarelo, inclui ações e decisões. Começamos pelo início: o usuário entra no aplicativo. Se for um usuário novo, será necessário realizar o cadastro, que inclui informações como nome e e-mail. Validaremos quais informações são importantes para o nosso aplicativo. Se não for um usuário novo, ele fará o login.

Criando a experiência inicial do usuário

Após o cadastro ou login, o usuário acessa a página inicial. Tanto para o cadastro quanto para o login, após a conclusão, direcionamos o usuário para a página inicial. Na página inicial, o usuário pode completar seu perfil, pois desejamos mais informações. Além disso, podemos incluir um onboarding, que apresenta o aplicativo ao usuário, mostrando para que ele serve.

O usuário pode registrar seu humor diário, visualizar seus dados e registros, e compartilhar em redes sociais. Criamos um user flow que, para o nosso primeiro MVP, funcionaria dessa forma. Vamos validar se esquecemos algo.

Utilizando inteligência artificial para prototipação

O Figma agora oferece funcionalidades integradas com inteligência artificial, que ajudam no dia a dia. No FigJam, clicamos em ações, depois em modelos e diagramas, e solicitamos à inteligência artificial que crie um fluxograma. Copiamos parte do nosso desafio: "Eu e minha equipe fomos convidados a criar a experiência inicial de um novo aplicativo chamado Wikimood. Um app simples, moderno e intuitivo que ajuda o usuário a editar seu humor ao longo da semana e visualizar padrões emocionais." Solicitamos que a inteligência artificial faça um diagrama de user flow para auxiliar na prototipação. Vamos ver o que será gerado.

Estamos explorando possibilidades e aguardando um pouco. Foi criado um diagrama que inicialmente parece um pouco confuso, com muitas conexões sobrepostas, mas vamos analisar o que foi gerado. Acreditamos que podemos aproveitar algo.

Ajustando o fluxo de onboarding e funcionalidades

Quando o usuário abre o aplicativo pela primeira vez, ele é direcionado para a tela de onboarding. Essa primeira interação é importante para nós. Assim, quando um novo usuário entra no aplicativo, verificamos se é a primeira vez que ele está usando. Se sim, ele é direcionado para a tela de onboarding. Vamos ajustar isso: após o login, se for a primeira vez usando, o usuário vai para o onboarding. Caso contrário, ele acessa a tela inicial diretamente. O fluxo é editável, e a tela inicial deve estar após o onboarding. O cadastro no aplicativo requer obrigatoriamente a passagem pelo onboarding. Após o login, se for a primeira vez, o usuário vai para o onboarding; caso contrário, acessa a tela inicial diretamente. Conseguimos conectar essas etapas.

A inteligência artificial nos trouxe algumas sugestões: tela de onboarding, explicação e solicitação de permissão para notificações. No entanto, não teremos notificações inicialmente, pois estamos em fase de testes. Há também a opção de configurar um lembrete diário opcional. Na tela principal, há a visão semanal. Se o modo "hoje" não estiver registrado, o usuário é direcionado para a tela de registro, onde escolhe um emoji para registrar seu humor diário. Podemos adicionar uma nota opcional após a escolha do emoji. Conectamos o fluxo do usuário e, posteriormente, alinharemos tudo adequadamente.

Explorando funcionalidades adicionais e próximos passos

Outras sugestões incluem a edição do humor, que pode ser implementada, mas não vamos sobrecarregar o aplicativo com funcionalidades agora. Queremos validar a ideia inicial. Temos a tela de configurações e a tela de histórico. Podemos incluir gráficos e padrões em insights. Após acessar a tela inicial, o usuário pode realizar diversas ações, não necessariamente de forma linear. Após completar o perfil, que será feito sob demanda, o usuário pode acessar configurações ou visualizar dados. A opção de compartilhar em redes sociais estará disponível após a visualização dos dados. O registro do humor também pode ser acessado diretamente.

Criamos um fluxo básico de usuário. Algumas ideias da inteligência artificial, como botões de voltar e animações de confirmação, serão trabalhadas na interação do protótipo. Conseguimos desenvolver uma ideia inicial com base em nossa experiência como designers. Algumas coisas podem estar faltando, mas isso é normal. O próximo passo é testar esse fluxo. Podemos mostrar para usuários, colegas e stakeholders para validação. Criar um protótipo nos permitirá testar se o fluxo pensado para o aplicativo funciona. Vamos começar a desenvolver nosso protótipo.

Sobre o curso UI Design: prototipação e animações interativas

O curso UI Design: prototipação e animações interativas possui 221 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

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

• capitulo