UI Design: criando o design de um protótipo

Usabilidade e comportamento - Apresentação

Boas-vindas ao segundo curso da formação de UI da Alura. Imagino que você já me conheça do curso anterior, mas caso tenha caído de paraquedas, muito prazer, meu nome é Mateus Villain, eu sou instrutor da escola de UX & Design da Alura e vou ser o seu parceiro, o seu amigo ao longo desse conteúdo que, em português, costumamos chamar de Design de Interface Para a Pessoa Usuária.

Mas antes de qualquer coisa, vamos àquilo que você já sabe, #acessibilidade, muito importante. Eu sou uma pessoa de pele clara, cabelo, sobrancelhas, olhos e barba castanho-escuro, tenho um cabelo bem curto, uma barba bem longa que chega até a metade do meu pescoço. Na minha frente tem o microfone, atrás de mim tem uma estante com alguns livros, alguns bonecos, uma grade com alguns quadros e é isso.

Como eu falei, estamos no segundo curso da formação. Caso você não tenha passado pelo primeiro curso, não sabia que existe esse esquema de formação da Alura, temos um primeiro curso falando sobre UI, entendendo o que é a área, como começar.

É extremamente importante que você passe por esse curso, para conseguir acompanhar todos os conteúdos que veremos agora, porque esse curso é uma evolução direta do projeto que começamos no curso passado.

Falando sobre o que vamos aprender neste curso, vamos evoluir nas questões em que já estávamos nos desenvolvendo. Esses são os conteúdos que vamos conferir neste curso: na primeira aula, vamos aprender sobre práticas de usabilidade e comportamento de uso.

Na segunda aula, vamos entender de ferramentas e começar o nosso primeiro processo de interface. Na terceira aula, falaremos sobre prototipagem e daremos início à forma inicial do nosso produto. E na última aula, vamos criar a estrutura visual do nosso protótipo.

Eu quero deixar bem ressaltado que este curso, apesar de ter o foco para pessoas que querem trabalhar com UI, querem ser designers, querem construir telas, o curso não é feito só para elas.

Digamos que você seja uma pessoa programadora, gestora, cientista de dados, independentemente da sua área, se você tiver o mínimo de interesse em UI, quiser aprender como funciona a parte de construção de interfaces de produtos digitais, como os designers lidam com cada coisa, entender mais sobre o que o seu colega está fazendo, te dou boas-vindas para estudar e praticar conosco.

Te vejo no próximo vídeo, para começarmos a levantar os nossos conteúdos, começando por heurísticas de usabilidade. Nos vemos lá, valeu!

Usabilidade e comportamento - As heurísticas

Quando começamos a falar em UI, a estudar, ou até mesmo quando olhamos por fora, ainda sem entender muito, é fácil remetermos isso à criação de tela de fato, pensando mais no quesito visual, por exemplo, o momento em que entramos em um site e achamos ele bonito, bem organizado, com formas e ilustrações legais, gostamos da tipografia, das cores em degradê.

Da mesma forma como vemos, por exemplo, o site da Alura, um site de fato muito bonito. Vamos ser sinceros: a beleza é realmente importante. Quando entramos em um site, quando uma pessoa usuária acessa uma página, ela espera ver algo bonito que chame a atenção dela, porque querendo ou não, o ser humano julga o livro pela capa. Isso é normal, isso vai continuar acontecendo ao longo dos anos, e não são os produtos digitais que vão mudar essa realidade. Essa prática vai continuar existindo.

No entanto, o visual não é a coisa mais importante. Como eu disse, ele chama a atenção, a pessoa gosta, elogia, pode até mostrar para outras pessoas como determinado site é bonito, mas esse não é o principal fator que fará com que a pessoa entre no site da Alura, por exemplo, e queira continuar navegando nele. Ela só vai querer continuar navegando se o site tiver uma boa usabilidade, se ele responder às dúvidas, se ele atender exatamente às necessidades dessa pessoa.

Se eu entrasse agora no site da Alura, por exemplo, quisesse encontrar algo muito específico e não conseguisse entender como mexer no site, não conseguisse achar essa informação e ele fosse muito complicado de navegar, eu não iria querer continuar mexendo nele, eu fecharia e pesquisaria por outra coisa no Google, o que geraria um retorno negativo tanto para a Alura quanto para outras empresas, pois isso acontece diariamente.

É por isso que pensamos na usabilidade de um produto. Quando falamos em usabilidade, existe a referência mestre. Quando eu digo a referência, é A referência. Na tela, vemos a foto do Jakob Nielsen, um designer especialista extremamente focado em usabilidade. Inclusive, se pesquisarmos por "Jakob Nielsen" no Google, temos a informação de que ele é consultor de usabilidade para web.

E o que é mais interessante? O site que eu estou acessando é o da NN/g, ou Nielsen Norman Group, uma das maiores empresas referência em user experience no mundo; não é no Brasil, não é nos Estados Unidos, é no mundo. Tanto que está no subtítulo do site: “World Leaders”, isto é, líderes mundiais.

No início da construção da web, antes dela ser o que é hoje, quando estava sendo lançada para o público, ela ficou privada a princípio, mas isso é uma história para outro dia. Em 1994, nesse primeiro período, antes mesmo da linguagem CSS, com poucos estilos para colocar dentro de websites, o Jakob já atuava com isso.

Naquela época, ele já havia pensado em como melhorar a usabilidade, a navegação, o entendimento em produtos digitais, nesse caso, em sites. É evidente que o tempo mudou, muitas coisas evoluíram, hoje não acessamos sites somente pelo computador, mas também pelo celular, por tablets, também temos aplicativos para smartphones, para tablet, para smartwatch, temos uma variedade de coisas, até geladeira hoje em dia tem tela.

Mas desde aquela época, ele pensou nessas questões de usabilidade, para podermos criar produtos que fáceis, tranquilos e bons de serem utilizados pelas pessoas usuárias.

Com isso, ele criou as 10 heurísticas de usabilidade para design de interface da pessoa usuária, ou como você normalmente vai se referir, como eu também me refiro, e como você vai encontrar mais pesquisas pela internet, as 10 heurísticas de Nielsen, que é o próprio criador.

Basicamente, ele pensou em dez boas recomendações; não precisa focar na palavra “heurística”, eu sei que pode ter sido a primeira vez que você a ouviu, mas não se preocupa com o significado.

Nielsen criou dez boas recomendações sobre como devemos produzir um produto digital, na época em questão, os sites, para que ao utilizá-los, a pessoa usuária tivesse um período de uso extremamente confortável e, obviamente, quisesse voltar àquele site para continuar interagindo e o recomendasse, gerando boas recomendações, bons feedbacks para esse produto.

Nesse caso, ele gerou todas essas dez heurísticas exibidas na tela. Obviamente, ele não foi a pessoa que ditou que deve ser dessa forma; muitas pessoas já faziam isso, mas ele foi a pessoa que cunhou tudo em um documento que ficou chamativo e teve relevância. Tanto que, conforme vimos, desde 1994 até os dias atuais isso é muito bem trabalhado, as pessoas ainda utilizam muito e vão continuar utilizando, porque continua fazendo sentido.

Algo que eu preciso elucidar: as 10 heurísticas não são mandamentos, não são leis, não são obrigações. Você não precisa necessariamente trabalhá-las em cada projeto; haverá projeto em que você nem vai utilizar todas as dez, apenas algumas delas. Além disso, não significa que elas estão 100% certas, que tudo está escrito em pedras. Obviamente, pode ser que no futuro isso evolua.

As 10 heurísticas também não cortam inovações: elas são muito bem-vindas a depender do contexto; não vale sempre reinventar a roda, porque isso pode dar problemas, mas ainda assim, elas são muito bem vistas, extremamente aplicáveis, e é por isso que eu quero trazê-las logo no começo do curso. Esse é um conteúdo extremamente importante para qualquer pessoa que vá trabalhar com produtos digitais.

Mesmo que ela não vá pensar na criação de interfaces diretamente, como quem faz UI Design, é bom ter algum conhecimento a respeito das 10 heurísticas, sobre como se trabalha com a visibilidade do status do sistema, a relação entre o sistema e o mundo real. O que eu estou te mostrando na tela é a postagem oficial das dez heurísticas no blog da NN/g, cuja publicação é de 24 de abril de 1994.

Eu gosto de utilizar essa publicação para mostrar que é original, que tem fonte, tem conteúdo, e obviamente, o conteúdo está em inglês. Existem algumas heurísticas que possuem um artigo complementar com mais informações. Eu recomendo que você acesse o artigo complementar, o full article, como eles chamam, o artigo completo, somente nos casos em que você tiver um tempo para estudar e quiser entender mais. O texto inicial já basta para entender perfeitamente como trabalhar cada heurística.

Mas, obviamente, eu quero facilitar a sua vida, nós da Alura queremos facilitar a sua vida, e esse é um conteúdo tão importante que resolvemos trazer para o nosso blog em português. Logo após esse vídeo, você terá acesso ao Para saber mais, onde estará disponibilizado o link desse artigo em português para você estudar com calma.

Não é uma leitura longa nem complexa; todas as heurísticas têm exemplos de produtos reais que utilizamos diariamente, inclusive a própria Alura é utilizada como exemplo, por ser um produto que você acessa com frequência. Então tire um momento para estudar esse conteúdo.

Eu preferi não passar por cada uma das heurísticas em vídeo, porque senti que ficaria um conteúdo muito maçante. Como são 10 heurísticas, mesmo eu te dizendo não ser nada complexo ou longo, por vídeo, poderia ficar um pouco chato, então eu prefiro te dar esse momento para parar e estudar quando achar melhor.

Seja de noite, de manhã, após tomar um café, fique à vontade, estude, e depois retorne, porque esse é um conteúdo extremamente importante que vamos utilizar nas aulas seguintes.

Te vejo no próximo vídeo, em que falaremos sobre bons comportamentos de utilização de produto. Nos vemos lá, valeu!

Usabilidade e comportamento - Boas práticas

No vídeo anterior, eu comentei brevemente sobre inovações, sobre elas serem bem-vindas na construção de um produto digital, desde que não reinventemos a roda. O que é "reinventar a roda" nesse caso?

Vamos pensar no cenário em que você vai fazer login em uma plataforma, da mesma forma que você fez na Alura; se você está me assistindo, é porque você foi na página de login, clicou no botão chamado “Entrar”, digitou o seu e-mail, a sua senha, clicou no botão e entrou na plataforma para explorar formações, cursos, e os demais tipos de conteúdo que a Alura possui.

Esse processo para fazer login é o mesmo que usaríamos, por exemplo, no Instagram, no Facebook, no Mercado Livre, é o mesmo que vamos utilizar em todo tipo de plataforma em que seja possível fazer login, criar uma conta, se registrar.

Agora, imagine que você fosse entrar em uma plataforma, quisesse fazer login, mas ela não tivesse um campo de e-mail, um campo de senha, nem aqueles botões para fazer login direto com conta da Google, do Facebook, da Apple, enfim, tivesse outra forma completamente diferente que nem conseguimos pensar, reinventa tanto a roda que chega a ser absurdo.

O reinventar a roda, de forma resumida, é basicamente pegarmos algo que já existe e funciona perfeitamente bem, e querermos inventar outra forma. Isso estragaria completamente a experiência da pessoa usuária.

Repare todos os exemplos que citei: seja Twitter, Facebook, Instagram, Mercado Livre, ou Alura, todas essas páginas de login possuem diferenças visuais e até de interação, mas elas possuem a similaridade na forma como você vai se conectar à sua conta, que será pelo e-mail, pela senha, haverá uma mensagem indicando o que deve ser feito, mesmo que você já saiba, e a depender da situação, haverá também botões para fazer login com uma conta, como acontece bastante com a Google.

Sendo assim, se formos muito para fora disso, estragamos a experiência. Devemos, então, manter essa similaridade dentro do que as empresas já atuam, porque a pessoa usuária já sabe como interagir com isso. Fazer de forma diferente, de uma forma que ela nunca viu, vai estragar a experiência e tornar a interface difícil para ela mexer, fazendo com que ela vá para outra plataforma buscando uma experiência boa de fato.

Quando eu falo de todos esses tipos de comportamentos, essas similaridades e diferenças, remeto diretamente aos UI Patterns, ou padrões de design de interface para a pessoa usuária. O UI-Patterns.com, cujo link está disponibilizado no Faça como eu fiz após esse vídeo, é a plataforma principal para você entender todos esses tipos de comportamento.

Vou clicar no primeiro menu chamado “Design Patterns”, a página vai carregar, e ao descer, encontro diversas categorias, subcategorias, e vários links na cor laranja. Cada um desses links é referente a um tipo de comportamento que todas as empresas grandes, empresas de tecnologia e outras novas, já utilizam como consenso para trabalhar em cada tipo de cenário.

Eles vão desde interfaces em tamanho maior, telas completas, como telas de cadastro e de login, até interfaces menores, como um simples componente medidor de senha, o “Password Strength Meter”, responsável por dizer se a senha está fraca, média, ou boa, com caracteres especiais, 20 caracteres, enfim, desde os mínimos detalhes até os maiores.

Essa seção é a central perfeita para você entender o tipo de comportamento para cada situação que formos construir. Por exemplo: na nossa arquitetura, colocamos uma página de FAQ; qual é o bom comportamento de uma página de FAQ?

Obviamente, podemos pegar diversas referências, explorar, ver como a Alura faz a página de FAQ dela, como o Dropbox faz a página de FAQ deles, mas também podemos ir à categoria “Dealing with data”, isto é, lidando com informações, onde há um link chamado “Frequently asked questions”, cuja sigla é FAQ.

Nessa seção, entendemos o comportamento desse tipo de página: qual problema ela traz, como isso resolve, quais são os comportamentos de utilização ideais. Temos também alguns exemplos; mesmo que de telas mais antigas, ainda são exemplos bons para termos uma referência, e obviamente, na parte de baixo há um texto mais completo falando sobre a solução, explicando de forma mais longa.

O que eu mais gosto nessa plataforma é que, em menos de uma linha, em poucas palavras, e com um exemplo grande no topo, ela já consegue te explicar perfeitamente como trabalhar com a página de FAQ ou outros determinados tipos de página.

Eu gosto de mostrar isso porque, quando formos começar a construir as nossas telas, você vai reparar que muito do que está nessas categorias será aplicado; muito do que formos utilizar na nossa criação de produto, já possui um link explicando como fazer isso.

Então já quero te apresentar a plataforma caso você queira explorar. Se o seu inglês não for tão bom, não tem problema! Use o Google Tradutor ou a sua plataforma de tradução preferida. Plataformas de tradução são ótimas, na medida do possível, para traduzir esse tipo de conteúdo, então fique à vontade. Se o seu inglês for bom, você já vai estar em casa para entender todo o conteúdo.

Nós vamos revisitar todos esses padrões, todos esses comportamentos ao longo da nossa criação de produto, para termos o cheque de “Breadcrumbs”, por exemplo. Breadcrumbs são links que aparecem no topo da página indicando os fluxos que percorremos, as páginas anteriores que andamos, para saber onde estamos, de onde viemos, o que podemos fazer, para a pessoa se localizar dentro do produto e não se perder.

Antes de encerrar, gostaria de dizer que, apesar de ter o nome patterns, da mesma forma que as heurísticas, isso não é um padrão dito por lei, não está escrito em pedra, não é obrigatório!

Tudo isso são boas recomendações, perfeitas recomendações, digamos assim, porque a maioria das empresas já utiliza isso nos seus produtos por ser uma convenção comum que todas as pessoas já sabem utilizar. As crianças, hoje em dia, já nascem com o celular, sabem fazer login, sabem que precisam colocar e-mail, senha, e clicar no botão de entrar para acessar a conta.

Portanto, essa é a sua referência principal para entender o comportamento para cada tipo de situação. Vou te dar um tempo para entrar na plataforma e explorar. Não precisa decorar cada item, longe disso! A plataforma está online para isso: para que sempre que você precisar, tê-la como referência.

Além disso, apesar de ter o nome “design”, não significa que as referências são restritas somente a designers. Você já sabe: a pessoa designer de interface é a pessoa que cria o visual, as telas, as interações do produto, mas ele também atua com a pessoa programadora, tão importante quanto a designer para saber como utilizar os user interface design patterns.

Acho que agora falei tudo o que precisava. Vou te dar um tempo para explorar a plataforma; conforme criarmos nossos produtos, vamos revisitar essa página para entender alguns comportamentos. Vejo você na próxima aula. Até lá, valeu!

Sobre o curso UI Design: criando o design de um protótipo

O curso UI Design: criando o design de um protótipo possui 87 minutos de vídeos, em um total de 26 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:

• Usabilidade e comportamento
• Dinâmicas iniciais
• Protótipo em baixa fidelidade
• Protótipo em média fidelidade