Práticas recomendadas de design de interface do usuário para melhor digitalização

Os designers de produtos geralmente comunicam muitas informações em um curto período de tempo. Aqueles que entendem o termo “digitalização”, padrões comuns de rastreamento ocular e princípios de design modernos estão mais bem equipados para criar conteúdo facilmente consumível e “UIs fixas”.

Todos os dias, a internet está se expandindo com novos aplicativos, sites, artigos e muito mais. Está se tornando cada vez mais difícil prender a atenção de usuários sobrecarregados de informações que acham difícil filtrar informações relevantes de conteúdo irrelevante. O especialista em marketing David Zheng descobriu que em mais de 60% dos casos, os visitantes desistem e saem de um site em menos de 15 segundos .

A pesquisa indica que os usuários não leem tudo o que veem palavra por palavra – eles escaneiam e então determinam se o material vale o seu tempo. Ao tornar o conteúdo apropriado instantaneamente digitalizável, um designer de produto pode converter um visitante de curto prazo em um usuário de longa duração. Abaixo está uma seleção de práticas recomendadas de design de interface do usuário para ajudar a ampliar o importante fator de design de usabilidade que muitas vezes é esquecido: escaneabilidade .

O que é escaneabilidade?

Especialistas em UX do Nielsen Norman Group realizaram pesquisas para responder à pergunta: como as pessoas leem na web? Suas descobertas foram simples. Eles não.

O grupo descobriu que apenas 16% dos visitantes que visitam um site pela primeira vez provavelmente o lêem palavra por palavra. Os outros 84% ​​procurarão rapidamente por elementos de gancho, como títulos, frases, imagens ou animações antes de decidir se aprofundar no material. Esse comportamento não se limita a interfaces digitais. Por exemplo, as pessoas raramente lêem cada palavra em um jornal. Em vez disso, eles examinam os mesmos elementos – manchetes, imagens, etc. – para determinar o que vale a pena dedicar seu tempo.

A escaneabilidade é, portanto, a abordagem de dispor o conteúdo para que seja fácil de escanear. Muitas vezes, há apenas um curto período de tempo para impressionar um visitante com conteúdo valioso na tela, tornando essencial otimizar totalmente uma interface para como os usuários leem na web. Seja o produto digital um site, aplicativo ou outro tipo de interface do usuário, a escaneabilidade é um dos fatores mais significativos do design amigável.

Os benefícios de uma interface digitalizável

A maneira ideal de determinar a escaneabilidade de um produto digital é observá-lo da perspectiva do usuário e responder a estas perguntas-chave:

1. O conteúdo da página corresponde às expectativas do público?
2. A mensagem principal da página é fácil de entender em um curto período de tempo?

Embora as interfaces escaneáveis ​​exijam esforço para serem produzidas, compensa a longo prazo ao criar um design de interface do usuário fixo. O estudo do Nielsen Norman Group mostra que as páginas otimizadas para escaneabilidade se tornam muito mais eficazes das seguintes maneiras:

• Os usuários têm tempos de conclusão de tarefas mais rápidos
• Os usuários podem definir facilmente se o conteúdo é adequado para eles
• Os usuários cometem menos erros de memória
• Os usuários têm uma noção melhor da estrutura de uma página
• Um site recebe classificações subjetivas mais favoráveis ​​para credibilidade e qualidade do conteúdo
• As taxas de rejeição são reduzidas
• A probabilidade de visitas de retorno é aumentada
• A otimização do mecanismo de pesquisa (SEO) é aprimorada

O poder dos hábitos do usuário nos padrões de digitalização

Todo mundo consome conteúdo de forma diferente. No entanto, por meio de pesquisas, surgiram padrões de rastreamento ocular bem definidos. Saber como os usuários interagem com as interfaces nos primeiros segundos pode ajudar os designers a priorizar o conteúdo, colocar informações importantes nas zonas visíveis primárias e estabelecer uma forte hierarquia visual.

De acordo com o Nielsen Norman Group, existem sete padrões comuns nos quais os usuários verificam uma interface:

• O famoso padrão F: Doze anos após sua descoberta, esse padrão ainda é o padrão de varredura mais comum, mesmo ao digitalizar interfaces móveis. O olho se move horizontalmente, como é típico durante a leitura, depois pula para o conteúdo abaixo. Isso pode ser feito lenta e sistematicamente ou rapidamente com um mapa de calor mais pontual.
• Padrão Z: O modelo zig-zag é típico em páginas web com apresentação uniforme das informações e hierarquia visual fraca.
• Padrão Layer Cake: Os usuários seguem esse padrão ao digitalizar títulos e subtítulos para determinar rapidamente onde (e se) as informações que estão procurando podem ser encontradas na página.
• Padrão manchado: os criativos geralmente seguem esse modelo de digitalização, em que pulam grandes partes do texto e digitalizam componentes visuais como cor, formas e anomalias de proporção para encontrar uma informação específica.
• Padrão de marcação: como um dançarino se fixando em um objeto para ficar equilibrado enquanto gira, os usuários mantêm o olho focado em um lugar enquanto rolam – um padrão muito comum para UX móvel.
• Ignorando Padrão: Os usuários deliberadamente pulam as primeiras palavras de uma linha quando várias linhas de texto em uma lista começam com a(s) mesma(s) palavra(s).
• Padrão de Compromisso: Este é um padrão raro e só ocorre quando um usuário está altamente interessado no conteúdo e motivado a consumir todo ele.

Os padrões adotados pelo usuário estarão relacionados principalmente à motivação para visitar a página da web: Que tipo de informação ele está procurando? Quanto tempo eles estão dispostos a dedicar para encontrá-lo? Existem outros sites que poderiam fornecer essas informações mais rapidamente?

Agregando valor por meio de pesquisa de usuários e padrões de varredura

O Dr. Donald Norman, o pesquisador de ciências cognitivas que cunhou o termo “ design centrado no usuário ”, escreveu: “Não basta construir produtos que funcionem, que sejam compreensíveis e utilizáveis, também precisamos construir produtos que tragam alegria e entusiasmo. , prazer e diversão, e sim, beleza na vida das pessoas.”

A pesquisa do usuário é a base do design centrado no usuário e das práticas recomendadas de design de interface do usuário. Subsequentemente, para melhorar a escaneabilidade de uma interface digital, um designer deve entender o usuário final. Quando os padrões de interface do usuário são projetados da perspectiva do usuário final, ocorre uma experiência natural e intuitiva.

Soluções impactantes não são feitas de abstrações. Abaixo está um conjunto de produtos digitais que são bonitos, viáveis ​​e sustentáveis. Cada equipe de design definiu o público-alvo, usou padrões de rastreamento ocular e projetou layouts de conteúdo para produzir uma interface de usuário fixa.

A Instacart aproveita o design centrado no usuário por meio de seus padrões de design de interface do usuário. Uma parcela significativa de seu público é formada por idosos e usuários com deficiência visual, por isso os itens estão listados em uma grade de alto contraste com destaque claro para os principais CTAs. O design permite que o modo de digitalização de padrão manchado acomode visitantes de longa duração.

O Yelp atende usuários que procuram os melhores restaurantes, compras, vida noturna, comida, etc. As pessoas provavelmente avaliarão as avaliações com base em seus próprios critérios pessoais e pesquisas completas, tornando o Padrão F o modelo de digitalização mais aplicável. O Yelp, portanto, apresenta o conteúdo de uma forma facilmente digitalizável, com ênfase em elementos específicos, como classificações, imagens e endereços.

O Airbnb é sem dúvida um dos aplicativos mais amados por aí, e é em grande parte devido à pesquisa de usuários. Como eles sabem que seus usuários geralmente estão em dispositivos móveis, eles projetam para acomodar o padrão de marcação. A interface limpa e intuitiva é projetada para enfatizar as imagens de apartamentos grandes e de largura total. Eles intencionalmente mantiveram o número de imagens de capa por tela limitados a duas para que o usuário pudesse dedicar seu tempo adequadamente e ver se a lista chama sua atenção ou não.

Um fator a ter em mente ao melhorar a escaneabilidade de um produto digital é definir o tipo de dispositivo no qual ele será visualizado. A plataforma móvel do Airbnb recebe tráfego significativo. Conforme visto no mapa de calor do uso do polegar, o Airbnb colocou estrategicamente os elementos de interface do usuário mais usados, como “Explorar” e “Pesquisas salvas”, de fácil acesso durante a rolagem e a digitalização.

Práticas recomendadas de design de interface do usuário para melhor digitalização

Crie uma hierarquia visual adequada

A hierarquia visual de uma interface digital refere-se à disposição e apresentação de elementos de design de interface do usuário para comunicar níveis de importância para que os usuários possam digitalizar rapidamente as informações desejadas. Existem vários fatores na criação de um layout com hierarquia visual adequada:

• Tamanho
• Cor
• Contraste
• Proximidade
• Alinhamento
• Espaço negativo
• Repetição

Ao levar esses padrões de design de interface do usuário em consideração ao criar um design de layout de interface do usuário, um designer garantirá que o produto final tenha um layout de ótima aparência, harmonioso e intuitivamente digitalizável.

A página de resultados de pesquisa do Google usa todos os fatores de hierarquia visual para aumentar a escaneabilidade. As manchetes são enfatizadas pelo uso de cor, tamanho e, posteriormente, contraste. O espaço negativo em torno de cada título contribui para que seja a primeira coisa que um usuário digitalizará.

Quando um usuário encontra um título relevante, ele pode verificar a credibilidade do link – um elemento que é facilmente reconhecível devido à cor e à proximidade. Em seguida, para avaliar melhor o resultado, eles pesquisarão a cópia do conteúdo que é consistente em cor, tamanho e proximidade. Além desses fatores, a repetição e o alinhamento tornam os resultados de pesquisa do Google geralmente fáceis de verificar.

Aproveite o espaço negativo

O brilhante Claude Debussy disse uma vez: “A música é o espaço entre as notas”. O mesmo sentimento vale para a escaneabilidade – espaço negativo entre os elementos é o que torna um layout bem-sucedido. A quantidade adequada de espaço negativo (branco) em torno dos elementos da interface do usuário traz o foco para os próprios elementos. Ele enfatiza o conteúdo e fornece o espaço necessário para garantir que o layout não pareça confuso. Sem espaço para respirar, o cérebro humano é menos propenso a escanear pontos de interesse e mais propenso a ficar confuso.

Use subtítulos para resumir o conteúdo

As pessoas geralmente respondem negativamente a grandes pedaços de texto. Isso pode desencadear a suposição de que eles perderão tempo se o parágrafo não corresponder aos seus interesses. As práticas recomendadas de design de interface do usuário oferecem uma solução para esse problema. Ao adicionar subtítulos breves no início de artigos longos, o usuário tem uma visão definitiva sobre o tópico.

Ao escrever o subtítulo, é crucial mantê-lo direto ao ponto. Simplesmente comunique a mensagem principal que o conteúdo abaixo está oferecendo.

Criar listas com marcadores e numeradas

O cérebro humano é muito sistemático – observa o conteúdo e depois o agrupa em unidades significativas. Portanto, é mais provável que um usuário compreenda uma lista com marcadores ou numerada do que vários pontos mesclados em um parágrafo textual.

O espaço negativo criado pelas listas facilita a verificação do usuário, por isso é benéfico procurar cuidadosamente as oportunidades. Se mais de dois pontos dentro de um texto são paralelos e cada um deles não requer mais do que duas frases para descrever, este é um forte candidato para uma lista. O Nielsen Norman Group fornece ainda mais informações sobre a criação de conteúdo digital com marcadores.

Visualize o conteúdo

Os usuários digitais modernos são naturalmente visuais e nem sempre tendem a responder bem ao conteúdo textual (mesmo que seja perfeitamente estruturado e siga todas as dicas de design de interface do usuário para escaneabilidade ideal). Ambientes externos sempre serão um fator. Portanto, para compensar layouts com muito texto, o uso de imagens e gráficos oferece quebras visuais informativas e emocionalmente atraentes. Como diz o ditado, uma imagem vale mais que mil palavras!

Visuais originais (ilustrações, fotos atraentes, etc.) podem facilmente capturar a atenção do usuário e apoiar o conceito estilístico geral. Além disso, eles podem melhorar a hierarquia visual e tornar o texto mais fácil de digerir. No entanto, existe o perigo de que um gráfico possa causar um efeito contrário se não for usado corretamente. Antes de transformar ideias-chave em gráficos, é fundamental que os designers entendam completamente o conteúdo que estão projetando.

Definir ênfase apropriada nos CTAs

A maioria das experiências digitais visa obter uma ação específica do usuário. Embora os botões de call-to-action (CTA) geralmente pareçam muito simples, eles são estrategicamente projetados para ajudar o usuário a concluir uma ação, como comprar, adicionar a uma cesta ou simplesmente ir para outra página.

As melhores práticas de design de interface do usuário sugerem posicionar o CTA próximo ao conteúdo que descreve a ação, tornando-o intuitivo para o usuário. Uma maneira eficaz de testar se o CTA está bem proporcionado, colorido e posicionado é converter temporariamente o design final em escala de cinza. Se o CTA permanecer distintamente visível e enfatizado, a interface do usuário fixa está bem feita.

A importância da escaneabilidade

Existem muitos elementos que determinam se um design de layout de interface do usuário será bem recebido pelas pessoas, como relevância do conteúdo, soluções da concorrência e lógica de negócios. De acordo com a Forbes , a escaneabilidade pode ser o fator mais negligenciado do marketing de conteúdo. Ao criar conteúdo escaneável, um visitante de curto prazo pode se tornar um usuário de longa duração.

O conteúdo escaneável demonstra ao usuário final que seu tempo é valorizado e oferece a oportunidade de entender a mensagem principal simplesmente olhando um design de layout. O blogueiro viral e professor de jornalismo Kim Keller aponta para os designers que “você está iniciando uma conversa com alguém que você quer como cliente. É um relacionamento, e nenhum relacionamento pode sobreviver se você não passar tempo juntos. Respeite o tempo deles e faça valer a pena.”

• • •

Leia mais no Blog Toptal Design:

• Práticas recomendadas de design de interface do usuário e erros comuns
• Estados vazios – o aspecto mais negligenciado do UX
• Simplicidade é a chave - Explorando o design mínimo da Web
• Princípios heurísticos para interfaces móveis
• Projetando para legibilidade - um guia para tipografia da Web