User Interface: conceitos de UI para Product Designers

Usabilidade do sistema - Apresentação

Então, quer dizer que você é a pessoa que está trilhando a carreira para começar a trabalhar com Product Design?

Então, eu já te dou boas-vindas ao curso de UI aqui na formação de Product Design da Alura.

O meu nome é Mateus Villain, vou ser o teu instrutor, mentor, e parceiro ao longo das aulas que vão seguir e, antes de começar, hashtag acessibilidade.

Eu sou uma pessoa de pele clara, meu cabelo, minha sobrancelha, minha barba e os meus olhos são de cor castanhos escuros. Meu cabelo é curto, minha barba é longa, ela chega até a metade do meu pescoço.

Aqui na minha frente tem um microfone que está sendo segurado por um braço articulado e atrás de mim tem uma estante com alguns livros, uma câmera fotografia antiga aparecendo e uns bonecos de Harry Potter.

Nesse curso vamos aprender um conhecimento extremamente importante, especialmente para você que quer começar a trabalhar ou já está trabalhando ou estudando sobre Product Design.

Você já deve saber nesse caminho que está trilhando que o Product Designer tem diversos conhecimentos a respeito da produção de um produto, que nesse caso, é a Alura Livros, um produto digital.

E, por isso, saber alguns conceitos de Design de Interfaces é extremamente importante e esses conceitos que nós vamos aprender são os seguintes.

Você vai aprender a analisar problemas de usabilidade de um produto digital. Como preparar um projeto de Design de Interface, quais são a etapas que você tem que fazer antes de botar a mão na massa.

Você vai criar um guia de estilo para a Alura Livros entendendo como que é a identidade dele dentro do ambiente digital.

É claro que você também vai recriar o produto Alura Livros entendendo como que ele está atualmente e como que ele pode ser melhorado para facilitar a vida das pessoas que vão estar utilizando ele.

E, por último, mas não menos importante, você também vai aprender a como aplicar um teste de usabilidade.

Então, é isso. Eu te espero no próximo vídeo para começarmos a se aprofundar melhor aqui no conteúdo. Eu te vejo lá. Valeu.

Usabilidade do sistema - Visão geral

Antes de nós começarmos a falar do nosso conteúdo aqui do curso, é importante eu só dar uma visão geral do conteúdo, de fato, que nós vamos ver.

Só explicar o que você vai aprender nas aulas seguintes e antes de qualquer coisa, um disclaimer bem importante.

Esse curso aqui não foca em uma ferramenta de Design de Interface. Você vai reparar que ao longo das aulas eu vou estar utilizando o Figma, mas especificamente, porque é a minha ferramenta de prototipagem favorita.

Se você tiver no Sketch, no Adobe XD, no InVision, em qualquer outra ferramenta de Design, até mesmo que não esteja nessa lista, nessa pequena lista que eu coloquei no slide.

Não tem problema, porque nós vamos falar sobre conceitos de User Interface e esses conceitos transcendem o uso de qualquer ferramenta de design.

Então, não se preocupe, pode usar ferramenta que você preferir, porque todos os conhecimentos que você aprender vai conseguir aplicá-los em qualquer lugar.

Seguindo, vamos lá. Na nossa primeira aula nós vamos falar sobre a usabilidade do sistema. Então, vamos olhar para alguns itens que são importantes, quase como requisitos para nós criarmos um produto que seja fácil de usar.

E vamos ver como faremos essa análise dentro do nosso produto digital que é a Alura Livros.

Na segunda aula nós vamos falar sobre as primeiras definições que temos que analisar antes de nós botamos a mão na massa para começar a construir alguma coisa na ferramenta de prototipagem.

Na terceira aula, aí sim abrimos a nossa ferramenta da prototipagem e começamos a projetar o Guia de Estilo ou, em inglês, o Style Guide.

Que são as primeiras definições de elementos que nós temos que construir para podermos chegar na aula 4 e aí sim utilizar para pode fazer o redesign do nosso aplicativo que é a Alura livros, mais uma vez mencionando.

Para fechar o nosso curso com chave de ouro, a quinta aula, verificando a usabilidade para nós pegarmos a técnica, uma das técnicas, senão a mais importante de UX dentro de Product Design que é o teste de usabilidade.

Que é quando nós vamos chamar algumas pessoas que são foco de uso do nosso produto para poder utilizar e nós entendermos ser o nosso aplicativo realmente está funcionando da maneira que nós planejamos.

E tudo isso, obviamente, vai ser para pegar o nosso estágio atual do produto e melhorá-lo, seja de uma forma esteticamente visual, deixando ele mais bonito, quanto deixando a sua navegação, os seus fluxos muito mais fáceis de serem utilizados.

Lembrando que qualquer coisa, qualquer dúvida, você pode aparecer no fórum e no Discord, que nós da Alura vamos nos mobilizar para te ajudar independente do que for, te vejo no próximo vídeo. Valeu.

Usabilidade do sistema - As heurísticas de Nielsen

Há mais de três décadas, esse velhinho simpático que você está vendo na tela chamado Jakob Nielsen, inventou algo que na época, por volta de 1990, ele imaginou que não ia viralizar, as pessoas não iam ficar comentando sobre isso e muito menos utilizar no seu dia a dia de trabalho.

O que eu estou falando são as 10 heurísticas de usabilidade para de design de interface de usuário ou como nós normalmente chamamos e como você também vai encontrar na internet quanto for pesquisar, as 10 heurísticas de Nielsen.

Dá só uma olhada. Na página do site oficial da Nielsen Norman Group, da NNG, uma empresa fundada pelo Jakob Nielsen e pelo John Norman.

E esse é o artigo oficial sobre as 10 heurísticas de usabilidade de user interface design, design de interface do usuário. Repara que foi publicado em 1994, mas as heurísticas foram inventadas em 1990.

Enfim, as datas não importam, o que importa é o conteúdo. Na página desse site você vai encontrar cada uma das 10 heurísticas de Nielsen, todas elas muito bem descritas com exemplos, informações e link para mais detalhes.

Mas, antes de nós falarmos das 10 heurísticas, pode ser que você esteja chegando aqui agora e não sabe quem é Jakob Nielsen, nem o que são as 10 heurísticas de usabilidade para design de interface usuário.

Não sabe nem o que é uma heurística. Vamos lá, first things first. Primeiramente, as 10 heurísticas de Nielsen, as 10 heurísticas para usabilidade para design de interface do usuário, como você preferir chamar.

Elas são o que nós chamamos de boas recomendações para criar, para produzir produtos digitais. Por que boas recomendações?

Primeiro de tudo porque não existem regras absolutas, nada está escrito em pedra e isso não significa que você não pode inovar, que tem que seguir à risca tudo isso.

Não, você pode fugir, pode ir um pouco fora da casinha em determinadas situações, se for o ideal. Mas, a recomendação, e é por isso que nós falamos, que são as recomendações, não são regras.

De seguir as 10 heurísticas de Nielsen, é porque é algo que já está validado há muito tempo, mais de 30 anos e pensa, lá atrás quando ele pensou nessas heurísticas.

Ele é um cientista da computação vendo o comportamento, estudando como as pessoas utilizam os produtos, como elas esperam que as coisas aconteçam.

Ele foi analisando e projetou essas 10 heurísticas pensando nisso e lá atrás os sites ainda estávamos no começo, não estavam no mesmo corpo, na mesma estrutura que está hoje.

E se nós pensarmos em 2020, 21, 22, nós temos muito mais produtos do que tinha antigamente.

Os celulares evoluíram para smartphones pequenos que foram crescendo e aumentando de tamanho e hoje em dia parecem tablets.

Agora estamos na moda dos smartphones dobráveis, nós temos relógio digital. Daqui a pouco nós vamos até estar falando de óculos digital, que nós vamos conseguir ligar a tela do WhatsApp pela lente, interagir pela íris.

Está vindo cada vez mais produtos novos, diversas coisas estão sendo criadas agora e independente do produto, nós vamos poder interagir, não é verdade?

E se nós podemos interagir, se a pessoa usuária pode interagir, então, significa que ela vai querer que seja fácil de utilizar.

Que as coisas correspondam da maneira como deveriam acontecer, que os objetivos que ela tem sejam cumpridos de forma tranquila, fácil e que ela não precise pensar muito e muito menos se sentir frustrada, com raiva, triste.

Ela tem que ficar feliz do início ao fim do fluxo, para isso estão ali as 10 heurísticas. São ótimas recomendações para você poder criar os produtos digitais que você vai se envolver de hoje em diante. Então, está aqui apresentado as 10 heurísticas.

Na página oficial da Nielsen Norman Group, todos os textos estão em inglês, pode ser que você não esteja tão familiarizado com o idioma, por isso estou disponibilizando, não só esse link.

Como também o link, créditos totais ao Gabriel Moma, que publicou as 10 heurísticas de Nielsen para o design de interface lá no UX Coletive.

Essa é uma tradução bem fiel ao artigo oficial, ele deixa alguns exemplos sensacionais e você vai conseguir ler tanto um quanto o outro e entender perfeitamente o que são, para que servem e como utilizá-los.

E ao longo da sua leitura é bem provável que você já tenha um bom uso com produto digital, saiba utilizar um computador, um celular.

Então, muita coisa você já vai estar familiarizado e vai até despertar um insight, "Já notei isso em diversos lugares, então, isso faz muito sentido", você já vai ter esse insight rolando o arquivo, lendo cada uma dessas recomendações.

Mas, por que eu acho mais interessante esse artigo oficial? Não só porque ele é o oficial, mas por causa disso, olha só.

Você viu que tanto em um quanto no outro os textos são bem curtinhos, não existe uma leitura densa. Entender as heurísticas não é um bicho de sete cabeças, é algo realmente muito simples.

Mas, dá só uma olhada. No artigo, na parte de Visibilidade do status sistema, encontramos um texto de quatro linhas e abaixo mais algumas informações e dicas para você.

E embaixo ele tem dois links para você entender melhor sobre o assunto. O primeiro deles, vai ver que em cada um deles tem o mesmo padrão.

Um artigo completo, um full article. Primeiro aqui, quatro linhas para poder entender, mas você tem um artigo muito mais completo falando desse assunto. Por que disso?

Por causa do seguinte, 1990, 2020, 21, 22, está evoluindo muito as coisas, novos produtos, como eu já falei.

Então, existe determinado aprofundamento para você entender melhor sobre cada uma das heurísticas, inclusive, ele traz mais exemplos, alguns mais recentes.

Aqui um iPhone, acho que um iPhone 5, iPhone 6. Enfim, são coisas mais recentes, mais atualizadas, porque os produtos vão inovando, vão melhorando. As tendências vão seguindo e as heurísticas têm que acompanhar tudo isso.

É uma leitura um pouco mais densa, de fato, e aqui não tem esse link puxado, um entendimento em português sobre cada uma delas.

Então, o que eu te recomendo? Eu não vou passar profundamente sobre cada uma delas em vídeo, porque vai ser muito chato e eu tenho certeza que vai ser muito pesado para um estudo em vídeo.

E é muito melhor você pegar um tempo seu, tranquilo, para ler, entender, procurar na internet, ver os exemplos e estudar no seu tempo e na sua prática mesmo.

E o que eu te recomendo? Vai ao site da NNG ou no site da UX Coletive, no post do Gabriel Moma.

Lê, entende certinho, pega para ler todas as 10 heurísticas no resumo delas e deixa um dia reservado para você pegar o artigo completo.

Se não sabe muito bem de inglês, usa o Google Translate, o Linguee, traduz para o português, não tem problema nenhum.

O importante é você ler e entender aprofundadamente o que aquela heurística quer dizer.

Então, faz isso, terminou esse vídeo, estuda legal isso no teu tempo, sem pressa.

Porque o vídeo a seguir a esse nós vamos trabalhar com análises heurísticas e obviamente para trabalhar com uma análise heurística, você precisa saber das heurísticas.

Então, vou esperar por você, estuda isso aqui tranquilo. Qualquer dúvida aparece no fórum, no Discord, bate um papo, nos marque, nós vamos te responder.

E eu te vejo no próximo vídeo para nós falarmos das análises heurísticas, te vejo lá, valeu.

Sobre o curso User Interface: conceitos de UI para Product Designers

O curso User Interface: conceitos de UI para Product Designers possui 143 minutos de vídeos, em um total de 43 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 do sistema
• Primeiras definições
• Style guide
• Ajustando o aplicativo
• Verificando a usabilidade