Primeiras aulas do curso UI Design Patterns: Usabilidade em interfaces mobile

UI Design Patterns: Usabilidade em interfaces mobile

O que são UI design patterns? - Introdução

Olá! Meu nome é Letícia, e nesse curso a gente vai aprender sobre padrões de interface mobile o UI Design Patterns, que são soluções elegantes para a gente trabalhar problemas de usabilidade, que acontecem com muita frequência.

Nesse curso então, a gente vai trabalhar com esse projeto de uma e-commerce. A gente recebeu uma versão deles de aplicativo que não estava convertendo. Os usuários não estavam curtindo muito. Então, a gente analisou os testes que eles tinham. Tinha primeiramente essa tela, que era uma informação muito blocada o usuário já dava de cara com isso, e já deu um feedback super negativo.

Logo depois, ele tinha um montão de informações, ficava travado mais uma vez. Isso tudo pelos testes de usabilidade mostrando pra gente como ele ficava frustrado com essas travas, logo no começo, e no momento em que ele começava a interagir com as telas, tinha um monte de informações que eram importante, relevante, e ficou super delegada para segundo plano. Tinha um menu que ocupava um espação. Era um feedback negativo, também em relação a quanto de conversão a gente conseguia, engajamento dos usuários com isso.

Quando ele navegava entre os produtos que eles queriam vender nesse e-commerce, tinha essa forma de apresentação que era super esquisita, parecia só uma listagem, não aparecia nada interativo, o que também foi um feedback negativo. As informações ficaram um pouco perdidas à medida que ele interagia com muitos resultados.

Na página de produto mesmo, quando ele entrava não tinha muita informação, os usuários achavam ruim o fato de não poder ter essa comparação, do que eles queriam ou não comprar, então, também foi um feedback super negativo. E não estava conseguindo vender os produtos, o que foi realmente uma coisa muito negativa pra marca e pro produto também.

A gente chegou nessa outra solução, justamente usando o UI Design Patterns, a gente retrabalhou o que a gente tinha antes, e chegou nessa outra solução, colocando aquela coisa blocada e travada que tinha antes a gente trabalhou de uma forma diferente, colocando as coisas mais divididas, com um apelo visual mais interessante.

Depois passa para a tela inicial com outra forma de navegação, com a priorização adequada. O que era relevante a gente colocou no primeiro plano, para o usuário poder chegar nas informações que a gente queria que ele chegasse.

Na parte de navegação a gente tentou solucionar essa forma de organizar informação com um padrão que realmente se encaixava bem pra aquela situação problemática que a gente viu no teste de usabilidade.

E mesmo na página de produto, o que tinha de reclamação é que não tinha nada de comparativo, a gente trabalhou bem melhor, colocou algumas coisas que realmente faziam sentido pra aquela experiência dos usuários, tanto para uma situação quanto para outra. A gente colocou outras formas de interagir com essa página.

Então, o que a gente vai ver nesse curso, é como a gente consegue analisar o que a gente tem de negativo, tudo baseando em testes de usabilidade, que a gente já teve um lançamento. Como a gente trabalha isso, utilizando UI Design Patterns pra melhorar toda a usabilidade, e ajudar na conversão desse usuário que vai interagir com o nosso aplicativo.

Então fica o convite pra você acompanharem com a gente e ver como que a gente saiu dessa versão ruim e chegou nessa versão super legal. E como a gente conseguiu agradar bastante o cliente, com essa solução e aplicando esses conhecimentos super legais.

O que são UI design patterns? - Trabalhando com Splash Screen

Oi pessoal a gente vai começar a falar sobre o UI Design Patterns e para começar a falar disso a gente vai usar o nosso projeto desenvolvido com a loja "Nó na gravata", que é uma loja de roupas sociais para homens e mulheres. Então, o que eles pediram pra gente foi refaturar o aplicativo que ele tinham de e-commerce, pensando em uns testes de usabilidade que eles fizeram que apontaram umas coisas negativas que eles tinham com aplicativo deles.

Para isso a gente começou a estudar o aplicativo desde o momento em que ele abria até as outras interações, as outras telas que o usuário passava.

A primeira coisa que a gente fez então, a gente registrou aqui no vídeo, como que a gente interage a primeira vez. Clica no ícone, fica com essa tela em branco, e de repente aparece a primeira tela do aplicativo.

Eu vou deixar maior pra todo mundo ver. Aqui, de novo agente clica, fica essa tela em branco um tempinho e depois aparece a tela. A gente viu que ficava esse tempo bem grande sem fazer nada, então, para reforçar o nosso teste e validar depois com os testes de usabilidade a gente colocou um cronômetro pra ver se essa página em branco ficou muito tempo ocupando esse espaço.

Agora na segunda versão com cronômetro.

Então agente consegue ver aqui, tem 5 segundos de espera. Eu vou passar mais uma vez. A gente tem 5 segundos de espera com uma tela em branco sem nada só falando, até que aparece a primeira tela.

A gente fez isso e tentou repassar de novo com os testes de usabilidade para ver o que os usuários trouxeram, e basicamente o feedback que eles deram nessa primeira interação deles, assim que ele abrem o aplicativo, é que fica muito tempo sem nada, com aquela tela em branco eles ficaram confusos, começaram a especular, "será que deu algum problema", "será que foi um bug", enfim, várias interpretações surgiram no meio do caminho e o usuário ficou frustrado justamente porque ele ficou perdido.

Então, agente ficou pensando, como a partir do teste de usabilidade e do teste que a gente fez. Como a gente poderia dar algum feedback para o usuário, como a gente poderia explicar que estava acontecendo alguma coisa, que tava realmente rodando aplicativo antes de ele ficar frustrado porque nada acontecia.

A primeira coisa que a gente encontrou de solução foi essa aqui.

Então, nossa primeira solução ainda tinha os 5 segundos de carregamento, só que agora a gente colocou um loader, uma barrinha que mostrava que tava carregando alguma coisa, então, aquele momento de tela em branco para o usuário que estava confuso, que não sabia se tinha acontecido alguma coisa ou não. A gente aplicou essa solução, que foi mostrar realmente um feedback visual de carregamento, de que estava funcionando.

A gente repetiu os testes de usabilidade, e deu certo. Segundo os testes a gente tinha esses 5 segundos ainda, mais os usuários agora estavam mais orientados, ficaram menos frustrados com o que acontecia.

Funcionou, a gente pensou, "legal, nossa solução atendeu". Essa solução que a gente chegou, na verdade tem um nome, a gente não chegou aleatoriamente. A gente se baseou em um padrão, que pensa justamente nessa lacuna, entre o início do carregamento do aplicativo e a abertura efetiva dele. O nome desse padrão é tela de lançamento, em inglês, que é o termo mais utilizado é launch screen.

Então, essas telas de lançamento, que foi essa do loader que a gente chegou. Elas trabalham justamente para esse momento em que o aplicativo demora um pouquinho para dar algum feedback para o usuário, enquanto ele termina de carregar os outros componentes dele, para não ficar aquele tempo sem nada, sem instrução nenhuma.

A gente tinha essa primeira solução com o loader, só que a gente olhando pra isso, o time olhando pra isso, a gente percebeu que era uma solução meio genérica. A gente resolveu, o usuário ficou mais satisfeito, só que ficou meio sem graça. A gente poderia aplicar essa solução em qualquer aplicativo, não tem muito a agregar para o usuário, fora o fato do feedback. Então, ficou uma experiência meio impessoal.

Então, pensando nisso como que a gente poderia colocar esse 5 segundos espera agregando um pouco de valor, além de dar o feedback, como que agente agrega um pouco de valor para essa experiência. Afinal de contas, desde o momento que ele abre até o momento em que ele finaliza, é muito importante a gente considerar a experiência.

A gente chegou em uma segunda solução, agora desde o início ainda com o cronômetro. E a gente aplicou essa segunda solução, agora pensando em uma nova abordagem. Já que a gente queria agregar valor. Vamos ver maior aqui?

Já que a gente queria agregar algum valor a gente colocou essa tela no meio, que é a tela com o logo da empresa, e o slogan, a identidade visual as cores, tudo. Então o que a gente tinha de 5 segundos a gente conseguiu reaproveitar, não só com o loader, a gente passou um feedback para o usuário do que estava acontecendo, afinal de contas, abriu alguma coisa do aplicativo, que é essa página, que é essa tela.

E a gente conseguiu fazer uma breve propaganda da marca. Então, pensando nisso. Essa tela que a gente criou, agregando valor, que era o que a gente queria a princípio. A gente usou a identidade da marca, e fez essa promoção rapidinho. É uma tela de lançamento também, só que a gente fez ela mais customizada, mais trabalhada, e dentro do contexto de launch screens, de tela de lançamento, a gente chama de splash screens. Então, existe algumas formas de se abordar esse tempo de espera do usuário. Uma delas é usar essa propaganda rapidinho que a gente faz do aplicativo. E esse padrão dentro do contexto de launch screens se chama splash screens.

Isso que a gente viu até agora, de splash screens, o que a gente estava tentando atender era justamente fazer uma renderização rápida. Então, é o que atende na splash screen também, afinal de contas é uma coisa simples, um tempo curto. Ele renderiza rápido. Ele deu o feedback ao usuário, assim como as telas de lançamento procuram fazer, e agregou valor, que foi a coisa mais legal da splash screen, porque ele colocou não só aquela tela genérica ele colocou um pouco da identidade, um pouco de informação a mais para o usuário.

Isso tudo que a gente falou até agora, nada mais são do que os padrões de interface, padrões de design de interface, que é o que a gente vai tratar nesse curso, UI Design Patterns em inglês, que são soluções elegantes para problemas comuns de usabilidade. Então, quando a gente fala de padrões de design a gente esta pensando em trabalhar em contextos muito recorrentes, de problemas de usabilidade. E alguns grupos foram desenvolvendo alguns estudos pra ver que padrões se encaixam melhor nesses problemas recorrentes.

Então, quando a gente está falando de UI Design Patterns ainda assim a gente tem que considerar algumas coisas. A primeira delas é as necessidades que a gente está tentando atender, as limitações que a gente tem com que esses padrões nesse projeto e o propósito que a gente quer atingir.

Afinal de contas, existem vários padrões, e padrões até para o mesmo problema então a gente tem que aprender a escolher melhor qual que encaixa, no contexto em que a gente tem. E para validar isso, a gente faz os testes de usabilidade, para ver se realmente faz sentido ou não, afinal das contas, todos os padrões tem prós e contras pra serem utilizados e cabe a gente fazer esses testes para validar.

Então, isso que a gente viu até agora eram as launch screens, e as splash screens, dentro do contexto de launch screens são um exemplo de Design Patterns que a gente vai trabalhar ao longo do curso, pensando nesse projeto que a gente está desenvolvendo junto com a empresa "Nó na gravata".

Padrões de onbording - Apresentando o produto

Oi pessoal! Então, a gente falou um pouco sobre splash screens, sobre como funciona essa interação do usuário desde o começo do aplicativo, quando ele abre, o carregamento do aplicativo e tudo. E a gente continua interagindo. Continuamos passando pelos processos de interação com o aplicativo do nosso cliente.

E quando a gente abria o aplicativo, a primeira tela que apareceria era essa aqui. Uma tela com o texto meio blocado, grande, explicativo e que parece na verdade eu aviso sério. Esse foi o feedback do teste de usabilidade, os usuários acharam que foi meio impactante, porque parecia um aviso meu sério, "alguma coisa de termos que tem que concordar", "que será que é isso", justamente por esse fato de ser uma tela bem seca. Aparece do nada com um montão de informação.

Só que se a gente for olhar aqui, no texto está "este é um app para venda de roupas sociais para homens e mulheres." Enfim, é um texto basicamente explicativo, a gente não deveria ter esse impacto todo para o usuário. Ele só tá falando um pouco do que ele vai ter pela frente na interação.

Então, a gente ficou olhando para esse teste e para essa tela, como a gente poderia deixar esse impacto menos negativo. Tirar essa sobrecarga nessa tela. Então, a gente repensou levantando os pontos principais que tinham esse texto, porque, afinal de contas já que a gente está falando de aplicativo. O que tem de interessante que eles querem promover?

Então, a gente leu esse texto, e separou alguns pontos que é primeiro: "nós vendemos roupas sociais", então "esse é um app para venda de roupas sociais", primeiro ponto importante que está nesse texto. O segundo que a gente identificou é "todos os dias temos promoções diferentes", então, promoções todos os dias é um diferencial para o nosso aplicativo.

E aqui "você poderá adicionar seus produtos favoritos em uma página", então salvar os seus produtos favoritos é uma página é um feature interessante para usuário saber que a gente tem. E aqui, abrir o aplicativo no final.

OK, a gente levantou esses três pontos, e começou a separar cada um deles numa frase mais concisa. Retrabalhou o texto. Então, aquele primeiro que a gente falou, de roupas sociais, que é o que a gente vende, a frase mais apelativa que a gente encontrou é: "encontre as melhores marcas de roupas sociais". Afinal de contas, é uma loja com roupas especificas disso, então, "encontre as melhores marcas de roupas sociais com a gente".

"Salve as roupas que mais curtir." aquela feature importante, de poder salvar as coisas que você mais gostou. "Confira as promoções especiais todos os dias" então, sim é legal ter promoções sempre para o nosso aplicativo, "confira as promoções especiais todos os dias".

E, aquele botão que tinha só "Abrir app", a gente mudou o texto e deixou o botão um pouco mais apelativo. Afinal de contas ele ia começar a interagir com o aplicativo. E a gente mudou esse texto para "Comece a explorar!". Então, não é simplesmente "Abre o nosso aplicativo" é começa a explorar suas promoções, seus produtos, o que tiver de interessante para você ali.

Então a gente chegou aqui, com esses 3 pontos. A gente levantou as três coisas mais importantes daquele texto, diminuiu um pouco o impacto e colocou um botão com um Call to Action, uma chamada pra ação mais interessante.

Só que agora a gente podia olhar para esse resultado. A gente deixou um pouco menos impactante. Só que a gente pensou em trabalhar um pouco mais no aspecto visual dessa tela. A gente chegou num resultado menos blocado, mas a gente ainda pode trabalhar um pouco mais nela.

Sobre o curso UI Design Patterns: Usabilidade em interfaces mobile

O curso UI Design Patterns: Usabilidade em interfaces mobile possui 83 minutos de vídeos, em um total de 53 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface 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:

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

  • 1247 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

  • 1247 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

  • 1247 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

  • 1247 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
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas