Padrões de projeto IU: Soluções comprovadas para problemas comuns de usabilidade

11 min.
Padrões de projeto IU

Como deve ser estruturado o menu do seu site? Por que é mais fácil para alguns proprietários de sites conseguir assinantes do que outros? O que faz com que os usuários preencham o formulário em seu site ou o ignorem? Como designer, tenho lidado com questões sobre design de interface de usuário e usabilidade da web - você pode encontrar as respostas neste artigo.

O que são padrões de design de interface do usuário (IU)?

Padrões de Design de Interface de Usuário (IU) são bibliotecas de problemas de usabilidade que já foram analisados e resolvidos com sucesso. No entanto, eles não devem ser adotados um a um. No entanto, eles fornecem uma base abrangente para uma experiência de usuário harmoniosa. Os padrões da IU estão lá para facilitar e acelerar o seu fluxo de trabalho.

Mais dicas sobre design UX e usabilidade da Web

Como em neste artigo uma boa usabilidade ajuda a guiar os seus utilizadores suavemente através do seu site, do seu produto ou da sua marca.

Fórmula para padrões de design de IU

Como você sabe quais padrões de design são apropriados para o seu site e como usá-los corretamente? O Chris Bank escreveu sobre isto no seu e-book. Padrões de design de IU móvel o seguinte procedimento é trabalhado:

  • Identificação de problemas: O que o usuário está tentando alcançar em seu site e que problemas ele encontra? Tente formular os problemas em uma única frase.
  • Solução: Os outros designers já resolveram este problema? Se sim, como?
  • Real-Life-Example: Veja os exemplos e passe por eles como um usuário. Tente analisar o que o ajudou a resolver uma determinada tarefa. Pense sobre o que o fez pensar - ou talvez até ficar inquieto - sobre a tarefa. 
  • Utilização: Faça um resumo dos resultados da sua análise. Como você pode implementá-los em seu site para que eles ofereçam valor agregado aos visitantes? Que padrões de design você deve evitar usar? Se você tem um guia de estilo, você deve incluir seus resultados lá.
Padrões de projeto IU: Soluções comprovadas para problemas comuns de usabilidade

4 categorias de Padrões de Desenho de IU

Os Padrões de Desenho de IU podem ser divididos em quatro categorias, que irei apresentar brevemente nesta secção. Infelizmente não poderei cobrir todos os padrões de design da IU. Se você quer se aprofundar no tema, a web oferece possibilidades quase ilimitadas para ler mais. Alguns recursos úteis sobre o tópico de padrões de design de IU são:

1. Os elementos de navegação mais comuns

A navegação é um dos elementos de interacção mais importantes para o utilizador: não só funciona como uma tabela de conteúdos para a sua página, mas também como um guia de orientação. O facto de ser normalmente colocado no topo ou no lado da página foi originalmente por razões hierárquicas. Com a navegação mostramos ao utilizador, num relance, o que ele pode fazer no nosso site e onde ele está no momento.

Graças a anos de prática, internalizamos este conhecimento a tal ponto que a tendência para o minimalismo não tem que parar na navegação. Os padrões de design são, portanto, bastante personalizáveis - ou têm mesmo de ser individualizados para o seu site para que funcionem.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Website de Castor & Pollux

Castor et Pullex seguiram as regras do padrão UI e ainda as adaptaram ao seu site: uma navegação que está localizada na tela superior direita e se torna "pegajosa" ao rolar. O logotipo que sempre traz o usuário de volta ao "porto seguro" - a home page.

Um site que permite muita interação e por isso parece quase caótico, obtém uma usabilidade agradável ao utilizar soluções de design já conhecidas.

A navegação "pegajosa", como descrita no exemplo acima, é uma invenção maravilhosa em web design. Eles não só podem ser usados para exibir animações impressionantes - eles também garantem que os visitantes do seu website passem de "A para B" mais rapidamente. Com One Pager eles também funcionam como um fio vermelho: O usuário sabe onde ele está e o que já viu.

É semelhante com migalhas de pão: Não fazem muito sentido com páginas pequenas. Mas para páginas mais complexas elas podem fazer maravilhas. Eles não só ajudam o usuário a se orientar, mas também a pular de volta para qualquer local desejado na navegação.

Outra forma de usar estes padrões é mostrada no exemplo a seguir:

Os criadores deste site adoptaram o conhecimento do menu hambúrguer móvel: Por um lado, para facilitar uma navegação minimalista do seu site, que não é alheia ao utilizador. Por outro lado, eles queriam dar ao seu produto espaço suficiente para ficar de pé em primeiro plano.

screenshot-demodern.com
Exemplo de projeto de Demoders

Algo fora de moda - mas pelo menos tão útil - são os chamados tabs na navegação. Eles fazem lembrar um sistema de arquivamento e são rápida e intuitivamente compreendidos pelos usuários. Aqui, também, na versão mais fina, o trabalho semi-especializado é tão bom quanto na versão original.

Entretanto, as abas são cada vez mais utilizadas como guias modais para exibir conteúdos que devem estar ligados entre si de forma a poupar espaço. Como abas modais, elas também têm a vantagem de não precisarem ser completamente recarregadas para mostrar outros conteúdos. Especialmente nas páginas de produtos das lojas baseadas em que os vemos frequentemente WooCommerce - como nos exemplos seguintes: 

Padrões de projeto IU: Soluções comprovadas para problemas comuns de usabilidade
vista de Pátio Atlântico

A seguir, um exemplo menos minimalista para comparação:

Padrões de projeto IU: Soluções comprovadas para problemas comuns de usabilidade
página de amostra de roupas de bambu

Os padrões de IU são muitas vezes baseados em interações no mundo real. Portanto, é importante nunca perder de vista as propriedades físicas e/ou mudá-las intencionalmente. Porque isso leva ao fato de que o usuário não pode mais entender intuitivamente essas ações e suas conseqüências. Para que isto fique claro para vocês, eu adaptei o exemplo acima uma vez:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

As propriedades físicas da estrutura da pasta não são mais dadas. As abas agora parecem elementos de navegação deslocados. A filiação dos elementos perde-se um pouco - eles parecem quase aleatoriamente dispostos.

Menus de transbordo e botões "Saltar para a seção".

Para que a nossa lista esteja completa, não devem faltar os menus de transbordo e os botões "Saltar para Secção". "Os botões saltar para a secção estão normalmente localizados no canto inferior esquerdo. Eles permitem ao usuário navegar de volta ao topo da página com um clique. Especialmente com One Pager, os botões Saltar para Secção fazem sentido: poupam tempo e evitam a frustração com a entediante rolagem.

Menus drop down têm sua origem menos na melhoria da usabilidade das páginas. Foram desenvolvidos para poupar espaço e para acomodar mais conteúdo na navegação. Eles também tornam o seu design mais arrumado e claro. Os menus drop down pertencem aos Design Patterns, que são frequentemente chamados de Anti-Patterns - porque eles não facilitam realmente a navegação pelo site. No entanto, o uso de menus drop down ainda é recomendado. Afinal de contas, a sua função é conhecida e aprendida. Os indicadores para um menu suspenso são muitas vezes os padrões de espinha de peixe que apontam para baixo.

Padrões de projeto IU: Soluções comprovadas para problemas comuns de usabilidade
Website de Ehire

Botões e links são intencionalmente mencionados apenas brevemente neste artigo, uma vez que devem ser suficientemente familiares a todos os designers. Quase não há limites para o design e animação de botões. Seu estilo geralmente depende do layout visual da informação oferecida. Eles devem ser claramente visíveis no Cor primária da página e colocados de forma a serem agrupados com o conteúdo relevante.

O mesmo se aplica aos links: Eles não precisam mais ser exibidos em azul com um sublinhado, como era anteriormente o caso. Mas a sua existência deve ser clara e, acima de tudo, uniforme. Extenso conhecimento sobre botões que você obtém aqui.

A paginação - a partilha de conteúdos em múltiplas páginas - é especialmente importante para as lojas de comércio electrónico que oferecem um grande número de produtos. Com a ajuda da paginação, o conteúdo é oferecido em várias páginas, o tempo de carregamento é reduzido e o conteúdo é dividido em seções facilmente digeríveis. Jornais, como o FAZ, também usam a Paginação para dividir artigos mais longos.

screenshot-www.faz.net-2020.06.13-15-49-43
Exemplo da FAZ

Além disso, o chamado "rodapé gordo", que se tornou uma tendência nos últimos anos, é agora um dos padrões aprendidos da IU. Aqui você pode, por exemplo, criar links para subpáginas frequentemente visitadas, armazenar seus dados de contato e exibir conteúdo legal que não tem lugar na navegação principal. 

O rodapé funciona então em parte como uma tabela de conteúdos da sua página, estruturada de forma diferente. Mas também pode servir como uma espécie de teaser para mais informações. Uma vez que o utilizador tenha percorrido o seu site, o rodapé pode oferecer-lhe conteúdos relevantes - tais como artigos interessantes, links de redes sociais, etc. - que o manterão ocupado com o seu produto.

2. entrada e saída: Formulários de Contato e Assinatura

Além das diretrizes de proteção de dados, também vale a pena focar aqui nas necessidades dos usuários. Especialmente em dispositivos móveis, um formulário de entrada pode rapidamente levar à frustração: A já pequena tela, o ambiente físico durante o uso, o aspecto temporal e uma possível conexão instável pode rapidamente se tornar um teste de quebra de nervos. Felizmente, há alguns padrões de design que já lidaram exatamente com esses problemas.

Dica:

O mesmo se aplica aqui como geralmente na web: Tão curto quanto possível, tão longo quanto necessário. Estudos demonstraram que acrescentar perguntas inúteis é um colapso na participação e pode custar muito dinheiro.

A seguir, criei uma forma fictícia para mostrar-lhe os princípios mais importantes:

Formulário
Princípios para os formulários de entrada
  1. Testes de rastreio ocular descobriram que processamos informações mais rapidamente quando elas são organizadas de cima para baixo, em vez de da esquerda para a direita. Portanto, é aconselhável colocar o título acima do campo do formulário e criar apenas uma coluna.
  2. É útil dar ao utilizador um exemplo de entrada em espaços pré-definidos - desta forma, as informações necessárias são visualizadas com antecedência. Deve-se evitar entradas de números fragmentadas, pois elas só complicam a entrada. Além disso, devem ser programados de tal forma que sejam tolerantes aos espaços.
  3. O tratamento de erros é um tópico importante e complexo. O asterisco e o campo de entrada emoldurado a vermelho provaram ser padrões de IU. O ideal seria que os campos fossem auto-explicativos. No entanto, você deve sempre esperar que algo não funcione. Portanto, oferecer diferentes opções de ajuda. Há várias possibilidades para isso: Um botão de informação, que oferece ajuda quando se está a pairar. Ou o popup de pequenos modais, se o formulário não for enviado com sucesso.
  4. Faz sentido dar feedback já durante o input. Com as senhas, também provou ser útil dar ao usuário uma avaliação qualitativa de quão segura é a senha que ele escolheu. 
  5. O Formulário Multi-Passos tem várias vantagens psicológicas. Antes de mais, tem um efeito mais claro e menos dissuasivo. Se o usuário também é mostrado onde ele está na forma através de um indicador (aqui a barra de carga), ele sabe exatamente o que esperar. A probabilidade de que ele se rompa prematuramente é menor. As informações pessoais devem ser sempre solicitadas no final do formulário. Se o visitante do seu site já preencheu o formulário em grande parte, será mais difícil para ele desistir do tempo que já investiu sem resultados. Também é aconselhável pedir apenas as informações de que realmente precisa e dar as razões para o pedido. Se você pedir aos seus usuários para se inscreverem em algo, é aconselhável declarar um benefício para eles à la "Sempre conseguir as melhores ofertas primeiro". Na última etapa você deve dar uma pequena visão geral do que acontece a seguir - e o que o usuário pode esperar quando.

Além disso, seus formulários devem incluir o preenchimento automático (por dados armazenados no navegador) e o reconhecimento de informações (como a adição da cidade após inserir um código postal). Especialmente WordPress muitos formulários têm isto já incluído por defeito. 

Você deve evitar o uso de captchas, se possível, ou pelo menos mantê-las no mínimo. De acordo com deste estudo captchas pode levar a 30 por cento menos interação com a forma.

3. estruturando o seu conteúdo

Como operador do site, você deve prestar atenção especial à forma como o conteúdo do seu site é estruturado: Eles apoiam os seus visitantes para encontrar o seu caminho através do seu site? O seu conteúdo é de fácil acesso e a sua hierarquia pode ser compreendida? 

A questão da acessibilidade fácil apela particularmente aos utilizadores que visualizam o seu site sob condições alteradas. Por exemplo, pessoas com distúrbios de visão a cores e deficiências visuais. Se você gostaria de tratar o tópico de acessibilidade e liberdade de barreiras com mais detalhes, você encontrará mais informações aqui: 

Se você tem um blog ou uma revista online, você provavelmente conhece o problema: você tem um monte de conteúdo interessante que você gostaria de oferecer da maneira mais uniforme possível. Um padrão de design adequado para isso é a chamada "Lista de Artigos". Aqui você categoriza o seu conteúdo e mostra apenas uma pequena parte dele. Desta forma você pode mostrar muitos tópicos num relance sem inundar os seus usuários com informações. Um bom exemplo mostra aqui RAIDBOXES:

RAIDBOXES  WP unboxed
Vista da WordPress revista wp unboxed

Esta divisão permite ao usuário navegar por todo o conteúdo por áreas de interesse e assim encontrar o que lhe interessa mais rapidamente.

Para oferecer determinados conteúdos sem distração, você pode usar caixas modais. Estas caixas são colocadas sobre o resto do seu site e permitem que o usuário se concentre no conteúdo. Isto pode ser necessário e importante. Note, no entanto, que estes modais são também mais um anti-padrão: Basicamente, eles bloqueiam a liberdade de ação do usuário enquanto o modal estiver aberto.

Usadas correctamente, contudo, as caixas modais podem ajudar os seus visitantes a compreender melhor o seu conteúdo. No entanto, caixas modais demasiado frequentes ou aparentemente não provocadas podem rapidamente causar frustração e um sentimento de impotência.

A lightbox e o modo fullscreen também pertencem a esta categoria. Por um lado, elas permitem que o usuário veja de perto o conteúdo selecionado. Por outro lado, eles tornam impossível qualquer outra interacção. Por isso é sempre importante oferecer pelo menos um ponto de fuga. Especialmente conhecido é o clique sobre um X na parte superior direita da foto ou o clique fora da caixa para fechá-la novamente.

Os slideshows são também uma forma popular de exibir imagens. É feita uma distinção entre a reprodução automática e os slideshows navegados manualmente. As galerias são frequentemente listadas como imagens em miniatura e depois ampliadas usando slideshows e/ou caixas de luz.

Aqui você deve agir principalmente de acordo com a função: Que tipo de imagens você representa? Eles têm que estar disponíveis como tela cheia? E o que é mais importante: o seu conteúdo como um todo ou as imagens individuais? Vale a pena recorrer a outras possibilidades - como uma lupa que amplia as suas imagens quando está a pairar? Este último é especialmente popular no comércio electrónico.

Screenshot Unsplash-UI Design Patterns
Vista em miniatura de desenxadrar.com

desenxadrar.com usa uma mistura de galeria de imagens e caixas de luz. No entanto, as imagens não são exibidas como miniaturas. Porquê? Unsplash é uma plataforma que só oferece imagens para download. Isto significa que os usuários devem poder decidir a favor ou contra a imagem à primeira vista. Para poder tomar esta decisão, a resolução da imagem deve ser relativamente boa. As miniaturas seriam muito pequenas para isso. E clicar em cada imagem individualmente ou navegar através de um slideshow minimizaria a eficiência do site muitas vezes.

Ao longo de todo o processo de implementação e concepção você nunca deve perder de vista a questão da utilidade/valor agregado e importância.

4. Utilizar canais sociais.

Isto diz respeito aos padrões que ajudam a orientar os seus utilizadores para os seus canais de redes sociais e/ou a facilitar a interacção social. Você pode encontrar exemplos detalhados destes padrões aqui .

Conclusão

Em conclusão, eu posso recomendar duas abordagens em particular. Primeiro: Visite e analise o maior número possível de sites para obter inspiração: Como é que outros designers resolveram ou não certos problemas? O que me frustra quando eu navego na web? Quando foi a última vez que fiquei positivamente surpreendido - e porquê? 

Segundo, lembre-se sempre que você não é o usuário. Os visitantes do seu site pensam de forma surpreendentemente diferente do que você pensa. Eles podem ainda não conhecer o seu produto. Portanto, realize vários testes repetidamente a fim de avaliar como a usabilidade no seu site realmente é.

Que perguntas tem a Sonja sobre os Padrões da IU?

Usa a função de comentários. Queres ser informado sobre novos artigos e dicas de 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 * .