Navegação de Utilitários Como Influencia o Design da Experiência do Usuário

Para projetar uma navegação eficaz e fácil de usar, não precisamos apenas pensar em como agrupar nosso conteúdo em menus bem estruturados para permitir que os usuários encontrem facilmente o que desejam, mas também sobre como projetar as ferramentas necessárias para interagir com o site

A navegação que não está estritamente relacionada ao conteúdo e ajuda os usuários a executar ações diferentes é chamada navegação utilitária, e é um aspecto menos amplamente discutido, mas extremamente importante do design da experiência do usuário. Barras de pesquisa, formulários de login e inscrição, assinar, compartilhar e imprimir botões, carrinhos de compras, menus contextuais e ferramentas que permitem aos usuários alternar idiomas ou tamanhos de fonte são exemplos típicos de navegação de utilitários.

Projetá-los não é tão fácil quanto parece à primeira vista, requer consideração para descobrir quais elementos precisamos, onde colocar e como exibi-los para garantir que nossos visitantes possam encontrá-los rapidamente e entender como eles funcionam.

Como a navegação de utilitário impacta o UX

Quando projetamos a navegação de utilitários, precisamos decidir como queremos que nossos usuários interajam com nosso site. Precisamos fornecer a eles um estrutura de interação que se ajusta aos nossos objetivos de negócios, leva os usuários pela jornada do cliente, oferece opções fáceis de entender e proporciona uma experiência de usuário agradável.

Em primeiro lugar, eles precisam ser capazes de executar rapidamente as ações que eles querem. Se permitirmos que eles façam isso, a satisfação do cliente aumentará e os usuários satisfeitos tenderão a gastar mais tempo e mais dinheiro em websites.

A página inicial do AirBnB segue este princípio UX, e seu menu superior contém apenas ferramentas utilitárias. Não é uma solução comum, mas se dermos uma olhada na incrível taxa de crescimento da AirBnB, é a escolha perfeita para eles.

Os 4 principais itens de menu são direcionados às 4 principais pessoas que costumam visitar o site da AirBnB: pessoas interessadas em se tornar um host (“Torne-se um host”), pessoas que querem resolver um problema que ocorreu enquanto usavam o serviço (“Socorro”), usuários novos e recorrentes (“Inscrever-se” e “Entrar”). A página inicial da AirBnB voltada para utilidade também contém uma barra de pesquisa rápida que é uma ferramenta crucial em um site de aluguel de acomodação..

Em segundo lugar, os usuários não precisam de utilitários supérfluos, pois muita confusão distrai a atenção e reduz o foco. Quais ferramentas são necessárias em nossa navegação de utilitários e quais não dependem da natureza do nosso site. Por exemplo, pode ser útil incluir uma visualização de impressão em um blog ou site de notícias, mas o mesmo recurso pode ser uma distração desnecessária em um fórum ou em um site de mídia social..

O Washington Post, por exemplo, exibe a navegação do utilitário em suas páginas de postagem única de maneira diferente da página inicial. Dessa forma, os usuários só atendem às ferramentas de utilidade que são relevantes e não são importunados com opções que eles não desejariam usar de qualquer maneira.

Existem 3 itens de navegação do utilitário que os visitantes podem querer usar em todo o site. Estes são inteligentemente incluídos na barra fixa superior (ferramenta de pesquisa, “Assinar em”, e “Se inscrever”), mas os usuários não precisam pensar em opções relacionadas a postagens únicas, como “Lista de leitura” quando eles estão navegando na home page ou em uma das páginas da categoria.

Em terceiro lugar, os usuários precisam entender rapidamente o que podem fazer em nosso site. Os visitantes não sabem necessariamente o que querem, por isso precisamos sempre fornecer informações sobre as opções que eles têm.

Se você der uma olhada na imagem abaixo, verá que o The New York Times informa os usuários sobre a disponibilidade de três edições diferentes: americano, Internacional, e chinês, e também permite que eles alternar rapidamente entre os três. Este excelente exemplo de navegação inteligente de utilitário mostra aos usuários opções menos óbvias que eles provavelmente não encontrariam por conta própria, de uma maneira não obstrutiva e elegante..

Encontre o melhor lugar

Existem canais típicos para a navegação de utilitários, em que os usuários procuram intuitivamente essas ferramentas, pois é com isso que eles se acostumaram na maioria dos sites. A quebra de convenções de web design é considerada uma prática ruim para a experiência do usuário, e é especialmente verdadeiro para a navegação de utilitários que, na maioria dos casos, é mais sobre usabilidade do que criatividade.

Como a navegação do utilitário é secundária à navegação baseada em conteúdo na maioria dos sites, ela é frequentemente colocada em áreas menos proeminentes, mas ainda visíveis. Isso geralmente significa o (1) canto superior direito dos sites e a (2) parte inferior do rodapé. Está uma boa ideia seguir estas convenções, Como estes são os lugares onde a maioria dos usuários procura por ferramentas de utilidade primeiro.

Como você pode ver abaixo, a Reuters posicionou a maioria de suas ferramentas utilitárias nessas duas áreas típicas, no canto superior direito do site, e na parte inferior do rodapé abaixo da navegação baseada em conteúdo. A solução única aqui é o rodapé extra fixo com 2 itens de utilidade que os projetistas consideraram os mais importantes: “Entre ou registre-se” e “Últimas do My Wire”.

É interessante notar que a área de navegação extra do utilitário ainda é colocada em um tipo de rodapé onde os usuários normalmente procurariam ferramentas similares, então os designers da Reuters foram criativo de uma forma mas ainda seguiu convenções de web design para manter a usabilidade.

Construa uma estrutura lógica

O agrupamento de ferramentas utilitárias em uma estrutura lógica é crucial se quisermos criar um site com uma alta taxa de conversão. Isso pode ser um desafio, mesmo se não quisermos fornecer aos usuários muitas opções, mas a Amazon leva a complexidade da navegação do utilitário para o próximo nível. A Amazon tem uma navegação utilitária incrivelmente complicada com muitas opções, mas se usarmos a Amazon regularmente, não aparece. Esta é a magia do design inteligente.

Eles não apenas colocaram a navegação do utilitário no canto superior direito onde os usuários esperam encontrá-la, mas também a dividiram em 3 grupos principais: (1) uma barra de pesquisa, (2) informações relacionadas ao usuário (abaixo da barra de pesquisa). ) e (3) ações que os usuários podem executar no site.

É inteligente porque, graças às sugestões visuais, como o carrinho de compras ou o ícone de pesquisa, os clientes podem decidir em um piscar de olhos que grupo querem usar e, a partir de então, podem ignorar os outros dois. Há apenas um grupo (“Sua conta”, “Tente Prime”, “Cesta”, e “Lista de Desejos”) que tem submenus que também são logicamente estruturados, e os diferentes grupos de submenus são divididos por separadores discretos mas visíveis para ajudar os usuários a encontrar rapidamente o que querem.

Crie um design visual eficaz

O design visual da navegação efetiva de utilitários precisa seguir o famoso princípio KISS (Keep It Simple, Stupid). É recomendável fornecer ícones com rótulos de texto, fazer controles parecidos com controles e enfatizar visualmente as ações mais importantes. Também pode ser uma boa ideia distinguir a navegação baseada em conteúdo e utilidade usando um design ligeiramente diferente..

Dois grandes exemplos de design visual efetivo podem ser encontrados no site do Walmart e da Etsy. Os designers colocaram a navegação da utilidade no topo dos dois sites e destacaram-na com cores que variam do restante da navegação, o Walmart com um plano de fundo azul e o Etsy com fontes azuis..

Ambos os sites enfatize as ações mais importantes do usuário com diferentes elementos de design visual, O Walmart usa amarelo para os botões Pesquisar e Entrar, enquanto o Etsy dá uma borda azul discreta ao botão Entrar e inclui um ícone de carrinho de compras cinza acima do menu Carrinho.

Este é o único lugar onde o Etsy usa um ícone em seu menu utilitário, enquanto o Walmart exibe um ícone ao lado de cada item, mas ainda não se esquece de incluir as etiquetas de texto necessárias ao lado dos ícones.