Impulsione seu UX com hierarquia visual clara

O conceito de hierarquia visual tem sido aplicado no design desde que a internet era uma fantasia distante, e é tão importante no design moderno de produtos quanto no auge do anúncio impresso.

A hierarquia visual determina a ordem em que as pessoas recebem e processam informações em uma página, independentemente de ser digital ou impressa. É uma parte vital da criação de uma experiência de usuário ideal.

Simplificando, um senso claro de hierarquia visual orienta as pessoas em direção ao conteúdo ou ações importantes. Em um anúncio impresso, esse seria o slogan, enquanto em um produto digital, poderia ser a mensagem da marca ou uma chamada à ação principal.

É uma maneira incrivelmente útil de criar uma experiência do cliente ordenada e objetiva, enquanto melhora as chances de alcançar um resultado estratégico.

Aqui estão algumas etapas que os designers de UX podem seguir para obter um senso claro de hierarquia visual em produtos digitais e levar as experiências do cliente para o próximo nível.

Definir UX e objetivos da marca

Usando uma variedade de métodos, muitas equipes de produto já estão definindo as metas de UX para cada seção de seu produto.

Moldar a definição de metas de UX atendendo aos critérios da metodologia SMART ( específico, mensurável, acionável , relevante, rastreável ) é uma maneira popular de fazer isso. Tem um bom artigo sobre isso aqui.

Igualmente importantes são os objetivos da marca. Eles refletem os objetivos gerais do negócio, tanto do ponto de vista comercial quanto da marca. Um exemplo de objetivos de marca para uma landing page de serviço automotivo seria: a) estabelecer a marca como um serviço premium, eb) incentivar buscas de carros.

A maneira mais fácil e eficaz de documentar os objetivos de UX e marca das várias fases da jornada do cliente é realizar um workshop colaborativo de hierarquia visual.

Usando uma ferramenta de colaboração de tela ampla, como Milanote, ou mesmo Sketch, disponha as telas de protótipo em ordem cronológica ampla. Convide os principais profissionais para uma reunião online ou física, certificando-se de que haja representação das perspectivas de UX e de marca.

Em seguida, compartilhe a tela (ou conecte a um monitor) e comece a anotar!

Isso inicia o processo de identificação dos objetivos de UX e de marca para cada seção da experiência do cliente e aciona um fluxo de trabalho estratégico que pode ser aproveitado em todo o restante do processo de design.

Classifique as ações e o conteúdo para uma hierarquia visual clara

Agora que os objetivos de UX e marca estão definidos, é hora de definir a hierarquia visual apropriada de cada ação ou conteúdo e documentá-la para referência durante o trabalho de design subsequente.

Em primeiro lugar, é necessária uma taxonomia. É melhor usar uma escala de 1 a 3, sendo 1 o mais importante e 3 o menos.

Usando o formato de tela ampla descrito anteriormente, comece a anotar colaborativamente o layout do protótipo.

Neste exemplo, há um objetivo de UX de “ Quero saber mais sobre o serviço desta marca para determinar se ele se encaixa no meu orçamento, necessidades e preferências ”. Os objetivos da marca são a) estabelecer a marca como um serviço premium eb) incentivar a busca por carros.

À luz disso, a mensagem da marca Encontre seu carro ideal entre mais de 500 carros recebeu uma hierarquia de 1, assim como o formulário e o CTA que o acompanham.

Apesar de sua importância para a experiência geral do cliente, o logotipo real (e a navegação) recebeu um 2, pois não desempenha um papel tão importante no cumprimento dos objetivos da UX e da marca.

O conteúdo de suporte é marcado com 3, o que pode parecer contra-intuitivo. No entanto, ele adere ao fluxo narrativo que está começando a tomar forma, com as mensagens da marca e a funcionalidade “começar” como foco principal, depois o logotipo e a navegação para estabelecer a identidade e a estrutura premium do serviço, depois o conteúdo de suporte para tranquilizar, fornecer contexto e inspirar o cliente.

À medida que os designers se acostumam a levar em conta a hierarquia visual, é fácil começar a apreciar as possibilidades narrativas que ela revela, adicionando profundidade real às interfaces de usuário e às histórias que elas contam.

Construir hierarquia visual no sistema de design

Agora que os objetivos e os rankings de hierarquia visual estão definidos, a linguagem visual que vai dar vida a eles pode ser criada. Vamos supor que já existe um sistema de design em vigor (se não, isso deve ser feito primeiro!) e que uma variedade de elementos de interface do usuário já foi projetada.

O primeiro lugar para começar é a composição - o layout dos modelos necessários. Considere onde os elementos altamente classificados devem aparecer (como descrito anteriormente, nem sempre é o mais esperado). Várias variações podem ser necessárias para atender a uma variedade de cenários. Para garantir que nada seja esquecido mais tarde no projeto, os designers devem dedicar um tempo para criá-los agora.

Mais tarde no processo de design, vários modelos de exemplo podem ser incluídos no documento do sistema de design, com símbolos ativos de padrões de interface do usuário (para que os designers que trabalham no projeto tenham as versões mais recentes).

Uma vez que uma ideia ampla da composição tenha sido estabelecida, variantes de elementos de interface do usuário podem começar a ser criadas.

Pegue o humilde cabeçalho da página. Neste exemplo de um projeto recente para uma consultoria de RH, existem três variantes no sistema de design para atender aos diversos níveis de hierarquia visual.

Os designers podem expandir isso com os blocos de construção de sua interface do usuário. Por exemplo, em um projeto recente para um aplicativo de recrutamento popular, a profundidade foi usada para diferenciar os painéis de conteúdo – quanto maior a profundidade, maior a hierarquia visual.

A hierarquia visual pode ser projetada em praticamente todos os elementos da linguagem visual de uma marca: composição, tipografia, profundidade, imagens, iconografia e tom de voz. Quanto mais profundo for o design, mais coesa e focada será a experiência do cliente.

Embrulhar

A incorporação de um fluxo de trabalho de hierarquia visual no processo de design resulta em experiências de usuário consideravelmente melhores. Ele faz isso dando aos designers um meio de atribuir uma classificação a diferentes tipos de conteúdo, resultando em interfaces de usuário que não apenas parecem ordenadas e intuitivas, mas também permitem que os objetivos principais da marca sejam atendidos.

A hierarquia visual clara não apenas impulsiona seu UX, mas também estabelece um fluxo de trabalho sustentável que dá ao processo de design um foco estratégico - essencial em um ambiente moderno de design de produto.

Leia mais no Blog Toptal Design:

• Princípios de Design: Introdução à Hierarquia
• Práticas recomendadas de design de interface do usuário e erros comuns
• Explorando os Princípios de Design da Gestalt
• O Guia Completo para Arquitetura da Informação
• Impulsione seu UX com estes princípios de design de interação bem-sucedidos