Design

5 Dicas: UX e UI Design

Dec 6, 2016

É muito comum ver no mercado de software produtos lindos, mas que desconsideram a interação com o seu próprio usuário. O design de UX e UI vêm para tornar o produto mais eficiente, agradável e funcional, garantindo a sua entrega de valor.

Em primeiro lugar, é importante explicar — pelo menos de uma forma abrangente — o que é UX e UI, pois estes conceitos são comumente confundidos apesar de possuirem diferenças relevantes.

O UX, User Experience — em tradução livre Experiência do Usuário — , é normalmente confundido com o UI justamente por ser algo apresentado pela interface, pelo visual, mas, na verdade, UX é a sensação que se tem ao navegar por esta interface.

A experiência do usuário leva em consideração um problema a ser resolvido, e como este será resolvido; como o fluxo de navegação deste usuário será por todo o produto; qual a hierarquia da informação nesta interface, como apresentar a função principal deste produto da melhor forma possível; como atrair este usuário e fazê-lo voltar e revisitar esta experiência. UX é usabilidade, criação de personas, pesquisa com o usuário final, criação e aplicação de testes, manifestação de uma cultura, voz e tom, design de interação e prototipação em conjunto com o trabalho dos desenvolvedores, programadores e engenheiros de software.

UI é a abreviação de User Interface, em uma tradução livre para o português temos Interface do Usuário. Quando falamos em interface, pensamos logo em como a tela se apresenta, suas cores e formas. Porém o design de interface é mais do que isso. É a apresentação das ferramentas certas para o seu usuário poder alcançar os seus objetivos. É mais que os botões, o menu, os formulários, os links que estão presentes na página. É o que muitos chamam de “mão invisível” que guia o usuário pela experiência que o produto quer proporcionar de forma fácil e até imperceptível.

Inclusive por isso que me sinto segura em dizer que não existe uma boa User Interface sem uma boa User Experience (UX design), pois a UI é aquilo com o que uma pessoa interage como parte de uma experiência, manifestado em layout, texto e elementos gráficos.

Tendo esta explicação inicial em mente, reuni 5 dicas (e boas práticas) para o desenvolvimento de um bom produto, de acordo com o UI e UX design.

1. Conheça o seu usuário

Todo designer trabalha para o seu usuário, e se estamos falando de Experiência e Interface do Usuário, temos que colocar ele no topo da pirâmide de importância quando se projeta um produto digital. Saiba para quem você está projetando, quais são suas necessidades, o que busca no seu produto, qual o objetivo ao usar aquele produto. Descubra qual o processo lógico deste quando usa seu produto ou navega pelo seu website ou aplicativo. Qual o background de conhecimento dele?

Inclusive é uma boa prática estar em comunicação direta com o seu público-alvo e deixá-lo testar o seu projeto, ainda em desenvolvimento, para colher feedbacks, mas faça isso de forma inteligente! Por exemplo, é mais interessante fazer testes de usabilidade (nem que seja apenas observar o seu usuário usando o seu produto) do que colher informações por meio de questionários e entrevistas, pois o seu projeto pode virar um monstro de 7 cabeças se você levar em consideração tudo o que o usuário quer, e no final pode acabar não resolvendo o problema.

2. Seja simples e consistente

Por simplicidade quero dizer que seu produto seja fácil de entender e usar, e não necessariamente um produto com estilo minimalista sem nenhuma forma ou elemento gráfico animado. Seu usuário precisa que seu produto não necessite de instruções para ser navegado. Para o seu usuário ter uma experiência tranquila e prazerosa enquanto usa o seu produto, ele tem que sentir consistência na tipografia escolhida (de uma a duas famílias tipográficas, por exemplo), uma paleta de cores bem definida e formas e traços semelhantes (uso prioritário de linhas, ou de flat design ou de fotografias em detrimento de uma combinação em mesma proporção de todos estes).

Quando se apresenta ao seu usuário muita informação de uma vez ou até muitas opções de ação, é muito provável que ele fique perdido e não complete a ação principal para o qual o seu produto digital foi planejado, prejudicando a efetividade do produto. Esse exagero pode imprimir uma grande quantidade de esforço por parte do seu usuário para que ele complete esta ação, podendo deixar ele cansado, preguiçoso ou até não conseguir alcançar o objetivo em uma visita futura. Tudo isso pode fazer com que o seu cliente abandone o seu produto completamente por se sentir frustrado, custando a sua fidelidade.

3. Otimize

Esta dica tem conexão com a anterior, por mais uma vez falar em consistência, mas desta vez falando do conteúdo em exibição em si. As pessoas hoje em dia não lêem tudo o que lhes é disposto, sendo online ou não. Os jornais impressos sabem disso há anos, projetando uma boa capa e sabendo captar seus leitores com manchetes meticulosamente pensadas.

Levando em consideração que os usuários normalmente “passam o olho” por cima do conteúdo, tente otimizar seus blocos de texto, utilizando de tamanho de fonte grande para títulos e talvez um itálico ou um tom de cinza para subtítulos (uma opção possível), deixando claro a hierarquia da informação e o processo de leitura daquele conteúdo. Tente também dividir o seu conteúdo de forma visual, utilizando de recursos gráficos como fotografias, infográficos, ícones e até algumas animações ou recursos audio-visuais para mostrar em destaque alguma informação relevante ou que chame a atenção do seu usuário para o que ele quer fazer naquele momento. Assim esta entrega de conteúdo vai ajudar o seu usuário a imergir no seu produto e acompanhá-lo de forma progressiva e que faça sentido. Além de permiti-lo ter uma experiência objetiva, onde ele consuma apenas aquilo que estava procurando sem ter que passar por todo o conteúdo disponível para extrair apenas aquela parte.

4. Saiba usar design patterns

Padrões de design (tradução para design patterns) são nossos amigos. Reduzem tempo e custo para os profissionais envolvidos no desenvolvimento do produto. Porém, assim como criar consistência na User Experience entre produtos digitais, é importante tomar certos cuidados quanto ao uso desses padrões.

Antes de sair copiando escolhas e usabilidades amplamente utilizadas é bom testar com o seu usuário antes de tomar uma decisão positiva ao seu uso. Um exemplo de padrão de design muito usado é o menu hambúrguer, que voltou a ser popular com o design responsivo. Às vezes este padrão pode não funcionar com o seu público (idosos por exemplo, ou outros grupos de pessoas que não tiveram contato com esse signo como representação de menu oculto) fazendo com que o seu produto não tenha o sucesso esperado.

É importante saber também que não é porque uma feature é amplamente usada que ela seja necessariamente boa. Teste sempre sua usabilidade, pesquise, indague o porquê daquele recurso ser tão amado, para assim usá-lo com a certeza de que a experiência do seu usuário é plena e bem sucedida.

5. Faça uso do storytelling

E por fim (pelo menos por enquanto) engaje o seu usuário com uma história bem contada. Além de ajudar a guiar o seu público pela mensagem que se quer passar com o seu produto ou vender a ideia, uma história permite que o seu usuário sinta algo pelo seu produto e, consequentemente, se envolva de forma emocional. Ou seja, o seu cliente, que visitou o seu produto racionalmente atrás de uma ação ou informação específica, pode se engajar e continuar a utilizar o seu produto se ele tiver um enredo a ser “lido”.

Uma boa história vai usar de artefatos visuais e de linguagem acolhedora (mais uma vez atrelada às expectativas do seu público-alvo) para vender aquela experiência. E quanto maior o investimento em storytelling, o seu usuário fica mais propenso a buscar novamente o seu produto digital. É mais eficaz engajar e até fidelizar seu cliente por uma UI bem estruturada do que por conteúdos meramente dispostos em uma interface.

Confesso que essas dicas são um apanhado geral, algo mais básico e global relacionado a User Interface e User Experience. Vou detalhar e dar dicas mais pontuais nas próximas publicações, mas espero que como um passo inicial para trabalhar com essa área este texto tenha sido proveitoso, tanto para designers curiosos na área de produtos digitais, quanto para profissionais de áreas afins.

Se você leitor tem alguma controvérsia ou algo a adicionar a este texto, por favor deixe seu comentário abaixo e vamos discutir sobre o assunto. Afinal não existem verdades absolutas no design, e eu adoraria aprender mais com vocês. Até a próxima!

Fontes:

building possible futures

Contact us

hello@novatics.com.br

Brasília

SEPN 516, Bloco E, Sala 301

Ed. Carlton Center, Brasília, Brasil

70770-520

São Paulo

Av. Paulista 1374, Bela Vista

São Paulo, Brasil

01310-100

Califórnia

1020 B St, San Raphael

Califórnia, USA

94901

building possible futures

Contact us

hello@novatics.com.br

Brasília

SEPN 516, Bloco E, Sala 301

Ed. Carlton Center, Brasília, Brasil

70770-520

São Paulo

Av. Paulista 1374, Bela Vista

São Paulo, Brasil

01310-100

Califórnia

1020 B St, San Raphael

Califórnia, USA

94901

building possible futures

Contact us

hello@novatics.com.br

Brasília

SEPN 516, Bloco E, Sala 301

Ed. Carlton Center, Brasília, Brasil

70770-520

São Paulo

Av. Paulista 1374, Bela Vista

São Paulo, Brasil

01310-100

Califórnia

1020 B St, San Raphael

Califórnia, USA

94901

English