UI Design: melhorando a experiência de um app com UI Patterns

Design Patterns - Apresentação

Mateus: Boa-vindas ao curso de UI Design: Melhorando a experiência de um app com UI Patterns. Meu nome é Mateus Villain, e se você não me conhece ainda, eu sou o instrutor de UX aqui na plataforma da Alura. E serei teu amigo, teu brother ao longo do conteúdo que veremos neste curso.

Falando em conteúdo, já vou falar o que vamos aprender. Primeiro de tudo, vamos entender nesse curso o que são design patterns. Em seguida vamos entender o que são dark patterns. Então, veremos sobre patterns de onboarding, de navegação, que lidam com dados e que obtém informações.

Todo o conteúdo que vamos estudar será voltado para o aplicativo E-ticket, um aplicativo de ingressos digitais e que vem com cinco interfaces que vamos aprimorar. Vamos criar interfaces novas. Vamos deixar esse aplicativo zerado, vamos chegar em todas essas telas como resultado no final do nosso curso, melhorando muito a interface desse produto. Nós não estamos sozinhos nesse curso. Conosco também está a Gabi.

Gabi: Oi tudo bem? Eu sou a Gabi Lima e vim te ajudar em algumas atividades aprimoradas e especiais. Vim para te dar um suporte. Eu sou instrutora e Scuba Team na Alura, e vim para te dar uma ajuda especial em três atividades específicas.

A primeira é Pull-to-refresh, a segunda é Search Filter e a terceira é Calendar Picker. Tudo bem que essas palavras podem estar um pouco confusas para você agora, mas, ao longo das aulas o professor Mateus vai explicar uma por uma. Logo depois eu entro com uma atividade e com uma explicação com minha cara, explicando para você porque tal coisa estava certa e tal coisa errada, enfim, te dando um suporte. Até daqui a pouco.

Mateus: Por ser um curso que tem um nível mais intermediário, não falaremos sobre coisas básicas de UI e sim partindo direto para os elementos das patterns no caso e ir direto para programas de prototipação, recomendo que antes de começar esse curso, caso você ainda não entenda muito bem de prototipação, de criação de interfaces, que você volte para o curso Figma: design visual de um site mobile.

Porque lá o professor irá ensinar muito bem como criar interfaces digitais, passará muito bem os fundamentos do Figma. Esse é o caminho ideal para você começar e então depois sim você aprimora as tuas habilidades com os UI Patterns, que é o que veremos.

Para responder a qualquer tipo de dúvida: Para quem é esse curso aqui? Esse curso é para quem já entende o básico de UI, mas quer se aprimorar, dar um upgrade fundamental. Também é para pessoas que buscam entender os padrões para interfaces digitais. Porque temos algumas regras interessantes que devem ser seguidas.

Estamos falando muito sobre designers, mas o curso também é para programadores que querem entender mais sobre o UI design, sobre esses patterns específicos para interfaces digitais.

Afinal, eles criam telas e obviamente, faz total sentido eles quererem se aprimorar dentro disso e melhorar o código deles para poder criar interfaces mais harmônicas e condizentes. Espero que você goste muito desse curso. Clica no botão para ir para o próximo curso, se matricula e nos vemos no próximo vídeo.

Design Patterns - Visão geral

Antes de começarmos o nosso curso, vamos dar uma pincelada bem rápida no conteúdo que veremos nos vídeos a seguir. No Figma, trabalharemos nesse projeto que estou chamando de E-Ticket.

Basicamente, é uma plataforma de ingressos, na qual você vai poder comprar ingressos para shows, eventos, cinemas, para ver filmes. Enfim, qualquer coisa que envolva ingressos, estaremos utilizando o E-Ticket. Essa é a proposta dele.

Vamos simular que a empresa, que a marca E-ticket recorreu a nós, para consertarmos a interface deles. Porque eles viram, através de muitas reclamações de pessoas usuárias do aplicativo, que eles não estavam conseguindo completar os objetivos deles. A experiência não estava sendo das melhores.

Muitas vezes, os objetivos que eles queriam concluir, podiam ser resumidos. Eles tinham um trabalho muito maior do que deveriam ter. Ou seja, não deveria ser trabalho algum. Para isso, vamos pegar todas as telas atuais desse aplicativo e vamos melhorar seguindo as design patterns.

Temos uma comparação. Peguei duas telas desse aplicativo, porque não quero dar um spoiler, vamos trabalhar e vê-las ao longo das aulas. Temos a tela de cadastro e a tela de home. Na esquerda são as telas atuais, e na direita são as telas novas atualizadas que iremos trabalhar.

Na tela de cadastro, repara como as duas estão bem menores. O que fiz nas duas não foi excluir informações e sim melhorar a forma como elas estão sendo apresentadas em cada uma dessas telas. Não excluí nada, simplesmente melhorei a forma de como vou mostrar isso para essa pessoa que estará utilizando, de forma que ela não tenha uma bagunça mental.

Que ela consiga navegar tranquilamente, que não seja uma rolagem que pareça muito longa e cansativa. Vamos melhorar isso tudo. Vamos ajustar as telas que forem necessárias e criar telas novas caso seja necessário também.

Aqui ao lado temos nosso plano de aula, onde nessa primeira aula iremos falar sobre design patterns. Será uma aula 100% teórica, mas não se preocupa porque será uma aula muito rápida. Primeiro precisamos entender de fato o que são design patterns e alguns detalhes a mais.

Fora o manual que estaremos nos baseando ao longo do curso. A partir da aula 2 até a aula 5, será prática. Somos nós mergulhados aqui no Figma, trabalhando em cima desse aplicativo. A partir da aula 2, já entramos dentro dos patterns, que começam com Onboarding, depois vão para patterns de navegação, tratamento de dados e, por fim, fechamos com patterns de e-commerce.

Até porque, como é uma plataforma para venda de tickets, ele se encaixa dentro da categoria chamada de e-commerce. Sem enrolação, vamos fechar esse vídeo e eu te espero no próximo para falarmos sobre o que são design patterns. Te vejo lá!

Design Patterns - O que são Design Patterns

Vamos entender o que são design patterns, por que afinal esse é o tema do nosso curso. Design patterns (padrões de design), são soluções para problemas comuns que podem acontecer em produtos.

Dentro da gama do guarda-chuva que é a área de experiência do usuário, quando uma pessoa estiver usando um produto, vamos imaginar um site, ela pode ter uma experiência boa que será positiva ou uma experiência ruim que será negativa.

Pega esses problemas comuns que acabei de mencionar e se colocarmos eles dentro dos produtos digitais, a pessoa vai ficar frustrada. Ela não vai conseguir completar os objetivos dela. Vai ficar triste e irritada. Vai parar de utilizar aquele produto. Você vai perder um cliente, uma pessoa usuária, e ela vai para o concorrente.

Quem sai perdendo de fato é você, que está com esses problemas comuns dentro teu produto. E a pessoa vai para outro produto, onde estão com design patterns já muito bem aplicados. Para entendermos, trago esse site ui-patterns.com que será nosso guia ao longo do curso.

Todos os padrões de design que veremos e trabalharemos ao longo das aulas estão aqui. Se clicarmos no menu design patterns no topo, ele abre essa área cheia de categorias, subcategorias e vários links com vários padrões diferentes.

Você pode até me perguntar: “Mateus, preciso decorar tudo isso?”. Não, não precisa. Obviamente, com o tempo vamos olhar alguns. Se você olhar, ele não tem grandes explicações. É bem sucinto e direto. Ele sempre mostra um resumo, mostra o que é o problema em poucas linhas. Mostra um exemplo, em uma imagem de um produto. E sempre é um produto real, que já existe. Por exemplo, aqui é o Dropbox.

Embaixo ele mostra mais algumas informações, uma lista de como utilizar. Abaixo mais exemplos e soluções. Ele tem todo um conteúdo muito completo explicando como trabalha com esse problema de forma que você resolva qual é o problema comum que normalmente pode acontecer dentro de um produto digital.

Porque os design patterns são bons? Porque eles já foram todos validados. Todos esses links que você está vendo já foram validados anteriormente por designers e outros profissionais. Por isso que os design patterns nasceram. Eles pegaram todos os problemas mais comuns que acontecem nos produtos digitais e entenderam como trabalhar da melhor forma com essas situações. Sejam elementos simples, sejam elementos complexos como componentes.

Ou seja, páginas, a estrutura de uma página inteira em si. E tem para vários casos: formulários, temos sessão de navegação, temos shopping para trabalhar com e-commerce, lojas virtuais, social, trabalhando com datas, com Onboarding. Tem muita coisa, muito link para explorar.

Como falei, não precisa decorar nada disso. Vamos lendo as coisas com calma, sempre que precisarmos saber de alguma coisa, consultamos, colocamos em prática. Exatamente o fator de colocar em prática é que nos ajuda a memorizar e aprender o conteúdo de fato.

Não veremos todos esses ao longo do curso, até porque ficaria muito extenso nas nossas aulas. Mas veremos aqueles circunstanciais, que são mais frequentes. Problemas que acontecem bastante em produtos digitais, olharemos para a construção do nosso aplicativo.

Não é porque tem design no nome design patterns, que é especifico só para designers. Temos por exemplo design patterns voltados para programadores. Por exemplo, depois que terminar esse vídeo, vai no LinkedIn, procura por “Vagas para front-end”, que é mais comum aparecer isso para programadores, front-end. Você vai reparar nos requisitos que muitas vezes vai aparecer que eles precisam entender sobre design patterns.

Não são esses mesmo padrões que estamos vendo aqui. Para front-end, para programação, existem alguns padrões diferentes que envolvem arquitetura e código. Não vou arriscar citar coisas porque não entendo muito bem de código, mas são padrões mais voltados para aquela área. Da mesma forma que aqui estamos falando de padrões voltados pra UI, para User Interface.

Existe design patterns para diversos casos diferentes. Mas aqui, como estaremos trabalhando com produto digital e aplicativo, vamos focar nesses específicos para interfaces digitais. Nos vemos no próximo vídeo para falar de dark patterns.

Sobre o curso UI Design: melhorando a experiência de um app com UI Patterns

O curso UI Design: melhorando a experiência de um app com UI Patterns possui 159 minutos de vídeos, em um total de 46 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:

• Design Patterns
• Onboarding
• Navegação
• Lidando com dados
• Obtendo informações