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

Sonja Hoffmann Atualizado em 21.10.2020
8 min.
Usabilidade UX Design
Última actualizaçã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 dos termos com os quais nos confrontamos cada vez mais. Mas o que é isso na verdade? Porque é que a usabilidade e a experiência do utilizador o devem interessar em particular como web designer? E como você pode alcançar valor agregado através do UX, mesmo que você não tenha um UX Designer em sua equipe?

No meu último artigo sobre webdesign harmonioso Eu mostrei-te como criar as tuas próprias directrizes de design. No entanto, o web design harmonioso é influenciado por vários factores - é por isso que vou apresentar-vos hoje 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 lidar com a 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 brochura) e um receptor (aquele a que o meio se destina). O destinatário não tem mais nada a fazer aqui do que receber a mensagem, compreendê-la e depois tomar uma decisão (de compra).

O web design, por outro lado, é interactivo: não só é enviada uma mensagem, mas também é criada uma conversa. 

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

Desde os primeiros tempos da Internet, as empresas têm lidado com os aspectos psicológicos destas interacçõ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 atuais não começa ao visitar um site e não pára ao sair dele. Em vez disso, descreve toda a experiência que um utilizador tem com a marca ou produto - desde o primeiro ao último contacto.

No entanto, gostaria de me limitar à parte do site que está directamente relacionada com um site: a usabilidade. O caminho através do nosso produto deve, portanto, ser o mais agradável e sem problemas possível. No entanto, você não deve ignorar o orçamento e as diretrizes internas da empresa.

A boa usabilidade pode ter um impacto significativo 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, significantes e feedback

Simplificando, a affordance descreve o que é geralmente possível. Usando o exemplo de uma tela de desktop, esta seria a possibilidade de "clicar". Uma vez que seria inútil e frustrante clicar aleatoriamente em qualquer lugar do site, incluímos significantes. Estes mostram ao utilizador onde algo é possível e o quê. 

Um dos significantes mais famosos é um botão. Limita a área de interação. Nós sabemos que quando clicamos aqui, algo acontece. Isto é normalmente intensificado por efeitos de pairar - ou quando o cursor se transforma num dedo indicador quando eu me movo sobre ele (hovere). Estes também são significantes.

O que são os recursos, significantes e feedback?

A Affordance descreve que interação é geralmente possível. Os significantes (indicadores) 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 ativo do botão me mostra como feedback que algo aconteceu quando eu cliquei nele. Todos os três processos estão interligados e podem ajudar a tornar o seu site mais fácil de usar desde o início.

  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: Em um computador de mesa (padrão), não é possível deslizar e tocar, enquanto não houver efeito de pausa nos dispositivos móveis.

Isto é exatamente o que deve ser levado em consideração na escolha dos significantes. Por exemplo, os links só se tornam claros quando eu passo o mouse sobre eles? Então um visitante móvel não reconhece que uma interação é mesmo possível. 

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 funcionalidade que se encontra fora do seu site. 

Se o visitante tiver navegado acidentalmente para uma parte da sua página onde não consegue encontrar o que procura, é provável que navegue usando o botão voltar em vez dos links da sua página. 

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

Muitas vezes reservo voos através de um prestador de serviços estrangeiro cujo site não é exibido em alemão ou inglês por padrão. Usando a versão móvel, de repente não consegui encontrar as configurações de idioma. No entanto, lembrei-me que já tinha acedido ao site através do aplicativo, onde tudo era 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 frustrado em uma página móvel.

Mas você também deve estar ciente de que não pode "reeducar" seus usuários. Você não pode "dissuadi-los" de tal comportamento "errado", mas pode planejar este comportamento e também certificar-se de que existem alternativas suficientes.

Outro bom exemplo, que já causou dores de cabeça para todos nós, é o - infelizmente ainda muito difundido - uso de navegadores desatualizados ou o Internet Explorer. Alguns layouts não são exibidos com tanta criatividade como no Firefox ou no Chrome, por exemplo. Embora isto seja irritante, temos de desenhar e programar para estes utilizadores da mesma forma.

Pior do que usar o aplicativo para acessar a página ou o botão voltar, por exemplo, é quando o visitante da página desiste completamente - ou porque usar nosso site cria muita frustração ou porque há muito poucas alternativas para o tratamento de erros.

Por que testar a usabilidade?

A propósito, a melhor maneira de descobrir tal comportamento é observá-lo. Quem quer que teste o site é relativamente insignificante. Não é necessário encontrar pessoas que irão realmente usar o site depois. Porque ocorrem erros de usabilidade realmente grosseiros com quase todos os usuários. 

O importante é que você não deve dizer ao testador o que fazer ou como chegar aonde. O mais importante é identificar e anotar possíveis obstáculos e complicações para tornar o seu site mais fácil de usar. Quanto menos se diz à pessoa de teste, mais imparcial é o resultado.

Os 4 indicadores diferentes

Que tipo de sinais você pode colocar no seu site 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". Muitas vezes estes podem ser encontrados em conjunto com outros indicadores, tais como formulários de contacto ou botões. Estes devem ser tão claros e concisos quanto possível. Além disso, por uma questão de simplicidade, deve-se recorrer a formulações familiares e evitar formulações supostamente criativas. 

O valor de reconhecimento permite ao utilizador saber com um elevado grau de certeza qual o resultado que pode esperar de uma interacçã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 destes. 

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 - é outro desses fenômenos. Esperamos que apareça em certos lugares de uma página. Sabemos que o Nav Bar nos serve como uma tabela de conteúdos e nos guia através do site. Uma barra de menu que se transforma em um ícone de Hamburgo 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 desenhos muitas vezes têm 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. Em vez disso, para uma melhor usabilidade do seu site, é recomendado lidar com os padrões estabelecidos. 

Isto é claramente visível no exemplo de um lado de um restaurante (seleccionado aleatoriamente) em Moscovo. Embora eu não fale russo nem consiga ler cirílico, vejo imediatamente como posso navegar através da página. Posso ver em que ponto de navegação estou e sou capaz de filtrar as informações mais importantes (contacto) à primeira vista.

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

3. Significadores ocultos

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 fazer o seu design parecer mais fino. 

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 de ação (chamada para ações).

Ao usar significadores ocultos, você também deve ter em mente que pode ser necessário encontrar uma solução separada para cada dispositivo final.

Um bom exemplo é o Pinterest:

Pinterest

Na versão desktop aparecem novas Call-To-Actions 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 ver como tudo isso é resolvido na versão touch screen. Aqui também há interações ocultas - mas com propósitos diferentes.

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

Na foto da esquerda você pode ver 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. 

As funções adicionais de Chamada - como na versão desktop - só estão disponíveis depois de ter clicado na imagem. Portanto, já não são significantes escondidos. 

O que me surpreendeu, porém, foi que o Pinterest usa dois ícones diferentes para a mesma interação nas duas versões. De um ponto de vista de usabilidade, não acho que isto seja recomendável. Se o usuário mudar da versão móvel para a versão desktop, ou vice-versa, usar os mesmos ícones facilitaria encontrar o seu caminho. Isto torna o uso mais suave. A usabilidade é positivamente melhorada.

4. Significadores metafóricos

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. 

O seu uso no mundo digital evoluiu para um padrão de design. No entanto, tens de ter cuidado aqui: Usar um indicador metafórico com um símbolo modificado pode confundir seus usuários.

Por exemplo, se você usar uma caixa de correio em vez do envelope familiar, isso pode prejudicar a usabilidade do seu site. Porquê? O usuário deve fazer uma pausa e considerar o próximo passo. Ele tem que 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?
Direitos de autor: 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 encontrarão de alguma forma o seu caminho através do site. Usabilidade significa que o foco é o visitante como um todo - a "viagem" pelo seu site deve ser o mais perfeita possível. 

Cada interrupção - ou seja, cada vez que o usuário tem que parar e se perguntar "O que realmente é oferecido aqui? O que acontece quando eu clico nele? Eu volto então? Onde é que eu me encontro? Como é que eu cheguei aqui?" - é contraproducente.

É possível construir uma página para que não haja interrupção? Muito provavelmente não. Dependendo da informação apresentada, certas interrupções, pensamento orientado e ligeira frustração podem até ser desejáveis.

É importante conhecer as diferentes ferramentas a fim de poder utilizá-las adequadamente para o seu próprio projeto.

Leitura recomendada

Um dos livros mais famosos sobre usabilidade é "Não me faça pensar!"por Steve Krug. O título é o programa aqui e no final é disso que se trata toda e qualquer abordagem de usabilidade.

  • "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability", Steve Krug
  • "O Desenho das Coisas do Cotidiano", 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 questões sobre usabilidade da web e design da experiência do usuário você tem? Que processos você pode recomendar? Por favor, use a função de comentários. Você quer mais dicas sobre web design e desenvolvimento? Então segue-nos no TwitterFacebook 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 * .