UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?

Sonja Hoffmann Última atualização em 21.10.2020
8 min.
Usabilidade UX Design
Última atualização em 21.10.2020

Experiência do Usuário (UX) Design, Usabilidade, Design da Interface Humana e Design Centrado no Ser Humano - estes são apenas alguns termos com os quais nos confrontamos cada vez mais. Mas o que é realmente? Por que você deveria estar interessado na usabilidade e na experiência do usuário como web designer? E como você pode alcançar valor agregado através do UX, mesmo que você não tenha um designer UX em sua equipe?

No meu último artigo sobre web design harmonioso, mostrei-lhe como criar as suas próprias directrizes de design. No entanto, o web design harmonioso é moldado por vários factores - por isso, hoje vou apresentar-vos a experiência do utilizador:

UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?

Por que eu deveria me preocupar com o UX?

Muitos português es designers que conheço têm um forte background em design de comunicação - por isso eles vêm da direção da mídia impressa. Eles criam composições sofisticadas que apresentam uma mensagem precisa.

No design impresso, o caminho de comunicação é claro: há um remetente (por exemplo, um cartaz ou uma brochura) e um destinatário (a pessoa a quem o meio é dirigido). O destinatário não tem mais nada a fazer do que receber a mensagem, compreendê-la e depois tomar uma decisão (de compra).

O web design, por outro lado, é interativo: não é apenas enviar uma mensagem, é criar uma conversa. 

Experiência do usuário: a experiência do usuário

Desde os primórdios da internet, as empresas têm olhado para os aspectos psicológicos dessas interações. No entanto, naquela época eles não falavam sobre designers UX, mas sobre designers de interação humana - e a profissão era geralmente muito menos comum do que é hoje.

O que é a Experiência do Usuário?

A experiência do usuário pelos padrões de hoje não começa quando você visita um site e não termina quando você o deixa. Ao contrário, descreve toda a experiência que um utilizador tem com a marca ou produto - desde o primeiro até ao último contacto.

No entanto, gostaria de me limitar apenas à sub-área que está directamente relacionada com um website: a usabilidade. O caminho através do nosso produto deve, portanto, ser o mais agradável e sem problemas possível. Entretanto, não se deve desconsiderar o orçamento e as especificações internas da empresa.

A boa usabilidade pode ter um impacto não insignificante nos seus números de vendas. O que me motiva pessoalmente é o dever como operador de um website de não frustrar o usuário.

Acordos, Significadores e Feedback

Em termos simples, a Affordance descreve o que é geralmente possível. Usando uma tela de desktop como exemplo, esta seria a capacidade de "clicar". Como seria ocioso e frustrante se você tivesse que clicar aleatoriamente em qualquer lugar no site, nós construímos significantes (indicadores). Estes mostram ao utilizador onde algo é possível e o quê. 

Um dos significantes mais conhecidos é um botão. Ele delimita a área de interação. Sabemos que se clicarmos aqui, algo vai acontecer. Isto é normalmente reforçado por efeitos de pairar - ou quando o cursor se transforma num dedo indicador quando eu pairar sobre ele. Estes também são significantes.

O que são Affordances, Signifiers e Feedback?

A Affordance descreve que interação é geralmente possível. Os significantes sinalizam que uma interação é possível. O feedback, por outro lado, garante que o utilizador sabe que a sua interacção desencadeou algo.

O estado activo do botão mostra-me como feedback que algo aconteceu quando eu cliquei nele. Todos os três processos entram um no outro e podem ajudar como perguntas básicas para tornar o seu site mais fácil de usar em primeiro lugar.

  1. Que interacções são geralmente possíveis?
  2. Como posso mostrar aos meus utilizadores que eles são possíveis?
  3. Como é que eles sabem que fizeram a coisa "certa"?

A possibilidade de interação é muitas vezes definida pelo dispositivo utilizado para acessar o site: Não é possível deslizar e tocar num computador (padrão) de secretária, enquanto não houver efeito de pausa nos dispositivos móveis.

Isto é exatamente o que precisa ser considerado ao escolher os significantes. Por exemplo, os links só são claros quando eu pairo sobre eles com o mouse? Então, um visitante móvel não reconhece que uma interação é possível em absoluto. 

Os usuários interagem física e digitalmente

Os preços e os significantes também podem ir além da interface do seu site. O seu visitante pode ser influenciado por circunstâncias externas, ou utilizar determinadas interacções de forma diferente da originalmente pretendida. Por exemplo, o botão voltar do navegador é uma circunstância que é externa ao seu site. 

Se o visitante tiver navegado acidentalmente para uma parte do seu site onde não consegue encontrar o que quer, há uma boa chance de navegar usando o botão voltar - em vez dos links no seu site. 

Como as interações são usadas deliberadamente "incorretamente" - um exemplo

Frequentemente reservo voos através de um prestador de serviços estrangeiro cuja página não é exibida por defeito nem em alemão nem em inglês. De repente não consegui encontrar as configurações de idioma através da versão móvel. No entanto, lembrei-me que já tinha acedido ao site através do aplicativo, onde tudo era então exibido em inglês por defeito. Desde então, só acedo ao site móvel através do desvio "aplicativo", porque me lembro disso e porque prefiro fazer mais dois cliques do que clicar na frustração de uma página móvel.

Você também deve estar ciente de que não pode "reeducar" seus usuários. Você não pode impedi-los de fazer as coisas da maneira errada, mas você pode planejar esse comportamento e ter certeza de que há alternativas suficientes.

Outro bom exemplo que tem causado dores de cabeça para todos nós é o - infelizmente ainda muito difundido - uso de navegadores desatualizados ou Internet Explorer. Alguns layouts não se mostram tão criativamente valiosos como no Firefox ou no Chrome, por exemplo. Mesmo que isto seja irritante, temos de desenhar e programar o mesmo para estes utilizadores.

Porque pior do que acessar o site através do aplicativo, por exemplo, ou usando o botão voltar, é quando o visitante do site desiste completamente - seja porque usar nosso site cria muita frustração ou porque há muito poucas alternativas de tratamento de erros.

Por que testar a usabilidade?

A propósito, a melhor maneira de descobrir tais comportamentos é através da observação. Quem testa o site é relativamente sem importância. Não é necessário encontrar pessoas que realmente utilizem o site posteriormente. Porque ocorrem erros de usabilidade realmente grosseiros com quase todos os usuários. 

É importante não dizer ao testador o que fazer ou como chegar onde. A chave é identificar e anotar possíveis obstáculos e complicações, a fim de tornar o seu site mais fácil de usar. Quanto menos se diz ao inquirido, mais imparciais são os resultados.

Os 4 indicadores diferentes

Que sinais você pode definir na sua página para destacar interações? Distinguimos quatro categorias diferentes, que vos vou apresentar brevemente.

1. significante explícito

Os significantes explícitos consistem em um prompt em forma de texto, tal como "clique aqui". Você os encontrará frequentemente em conjunto com outros indicadores, tais como formulários de contato ou botões. Estes devem ser tão claros e concisos quanto possível. Além disso, por uma questão de simplicidade, você deve se basear em frases familiares e evitar formulações supostamente criativas. 

O valor de reconhecimento permite ao usuário saber com um grau justo de certeza qual o resultado a esperar de uma interação.

"VER MAIS" é um exemplo de um simples significante explícito.

UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?
https://www.lonelyplanet.com/portugal/lisbon

2. padrões de design: padrões e convenções

Os padrões de desenho referem-se a desenhos recorrentes, aos quais nos habituámos tanto que já não necessitam de explicação ou referência adicional. Há relativamente muitos deles. 

Todos devem saber, por exemplo, que clicar no logotipo leva de volta para a página de índice. Ou aquele texto azul sublinhado representa um link. A barra de navegação de um site - como a usamos hoje - também é um fenômeno assim. Esperamos que eles estejam em certos lugares de uma página. Sabemos que a barra de navegação serve como nosso guia de conteúdo, conduzindo-nos através do site. Uma barra de menu que se transforma em um ícone de hambúrguer em dispositivos móveis também não precisa de mais explicações. 

Padrões comuns que aprendemos ao longo dos últimos anos

O surpreendente é que estes padrões têm frequentemente validade internacional. Você pode ver isso particularmente bem se você quiser se orientar em um site cuja língua você não fala. Por isso vale a pena não reinventar a roda aqui. Ao invés disso, é recomendado para uma melhor usabilidade do seu site, se você lidar com os padrões estabelecidos. 

Isto é bem visível no exemplo de uma página de um restaurante (seleccionado aleatoriamente) em Moscovo. Embora eu não fale russo nem saiba ler cirílico, eu vejo imediatamente como posso navegar pela página. Posso ver em que ponto de navegação estou e posso filtrar as informações mais importantes (contacto) imediatamente.

UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?
https://bulka.cafe/

3. significante oculto

Você só pode vê-los realizando uma determinada ação, como pairar e rolar. 

Os significantes ocultos têm a vantagem de fazer o layout parecer limpo e arrumado. Para que eles possam tornar o seu design mais simplificado. 

No entanto, eles também têm algumas desvantagens. Eles só são encontrados pelo usuário se ele souber que eles estão presentes ou se ele acidentalmente realizar a interação desencadeadora. Portanto, estes sinais não são adequados para chamadas importantes, mas, no máximo, para chamadas secundárias para acção.

Além disso, ao usar significadores ocultos, você deve ter em mente que uma solução separada pode ter que ser encontrada para cada dispositivo final.

O Pinterest dá um bom exemplo:

Pinterest

Na versão desktop, novas chamadas para ações aparecem ao pairar. Como o usuário clica intuitivamente na imagem para adicioná-la à sua coleção, o recurso provavelmente não passará despercebido, mas os designers desenvolveram um Plano B: Clicando na imagem, obtém-se uma visão ampla, na qual todas as interacções possíveis são visíveis.

É interessante como tudo se resolve na variante touch-screen. Também aqui existem interacções ocultas - mas para outros fins.

UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?

A imagem da esquerda mostra a visão geral da página. O menu na parte inferior só se retrai quando o usuário rola para cima - o que parece incomum no início, mas também é muito intuitivo. Quando procuramos a navegação, costumamos rolar para cima. 

No entanto, as chamadas adicionais - como na versão desktop - só estão disponíveis quando você realmente clicou na imagem. Assim, eles não são mais significantes ocultos. 

No entanto, fiquei surpreendido por o Pinterest usar dois ícones diferentes para a mesma interacção nas duas versões. De uma perspectiva de usabilidade, acho que isto não é aconselhável. Se o usuário mudar da versão móvel para a versão desktop, ou vice-versa, o uso dos mesmos ícones levaria a uma orientação mais rápida. Isto torna o uso mais suave. A usabilidade é assim melhorada de forma positiva.

4. Significado metafórico

Uma lupa, que sinaliza que o campo de busca está localizado aqui. O envelope que representa o envio de mensagens. O botão que sinaliza que você pode pressioná-lo. Todos os princípios têm em comum que nós os conhecemos do mundo real. 

A sua utilidade no mundo digital tornou-se um padrão de design. Tens de ter cuidado aqui, no entanto: Se você usar um indicador metafórico com um símbolo modificado, isso pode confundir seus usuários.

Se você usar uma caixa de correio em vez do envelope familiar, por exemplo, isso pode prejudicar a usabilidade do seu site. Porquê? O usuário tem que parar e pensar no próximo passo. Ele deve questionar se este símbolo corresponde ao que ele quer alcançar.

UX Design e Funcionalidade da Web: O que está por trás da experiência do utilizador?
Copyright: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusão

A usabilidade não significa apenas que os seus visitantes encontrem de alguma forma o seu caminho através do site. Pelo contrário, a usabilidade significa que o foco aqui é holisticamente colocado no visitante - a "viagem" através do seu site deve ser o mais perfeita possível. 

Cada interrupção - ou seja, cada vez que o usuário tem que fazer uma pausa e se perguntar "O que está realmente sendo oferecido aqui? O que acontece se eu clicar nele? Voltarei outra vez? Onde é que eu estou localizado? Como é que eu cheguei aqui?" - é contraproducente a este respeito.

É possível construir uma página de tal forma que não haja interrupção? Muito provavelmente não. Dependendo da informação apresentada, algumas interrupções, pensamento dirigido e uma leve frustração podem até ser desejáveis.

É importante conhecer as diferentes ferramentas para poder utilizá-las em seu próprio projeto.

Leitura recomendada

Um dos livros mais famosos sobre usabilidade é"Don't make me think!" de Steve Krug. O título diz tudo e é, no final das contas, o que está em jogo em cada abordagem de usabilidade.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability", Steve Krug.
  • "O Desenho das Coisas do Dia-a-Dia", Donald A. Norman.
  • https://www.uxpin.com/ oferece alguns e-books muito interessantes para download gratuito
Suas perguntas sobre a Experiência do Usuário

Que perguntas você tem sobre usabilidade da web e design da experiência do usuário? Que processos você pode recomendar? Esteja à vontade para usar a função de comentários. Quer mais dicas sobre web design e desenvolvimento? Depois siga-nos no Twitter, Facebook ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.