Resumo Rápido: Usabilidade e a utilidade, e não o design visual, determinam o sucesso ou fracasso de um site. Uma vez que o visitante da página é a única pessoa que clica no mouse e, portanto, decide tudo, o design centrado no usuário estabeleceu-se como um padrão para o design de sites bem-sucedidos e lucrativos. Afinal, se os usuários não conseguem usar um recurso, ele pode muito bem não existir.

Este artigo foi gentilmente apoiado por nossos queridos amigos da Creative Brand Design, que se concentram em criar experiências web personalizadas e interativas para empresas e empreendimentos emergentes e estabelecidos. Obrigado!

Usabilidade e utilidade, e não o design visual, determinam o sucesso ou fracasso de um website. Uma vez que o visitante da página é a única pessoa que clica no mouse e, portanto, decide tudo, o design centrado no usuário tornou-se um padrão para o design web bem-sucedido e orientado para o lucro. Afinal, se os usuários não conseguirem usar uma funcionalidade, ela pode muito bem não existir.

Não vamos discutir os detalhes da implementação do design (por exemplo, onde a caixa de pesquisa deve ser colocada), pois já foi feito em vários artigos; em vez disso, focamos nos princípios principais, heurísticas e abordagens para um design web eficaz – abordagens que, usadas corretamente, podem levar a decisões de design mais sofisticadas e simplificar o processo de percepção das informações apresentadas.

Por favor, observe que você pode estar interessado nos artigos relacionados à usabilidade que publicamos anteriormente:

Princípios de Design de Site Bom e Diretrizes de Design Web Eficaz

Para usar os princípios corretamente, precisamos primeiro entender como os usuários interagem com os sites, como eles pensam e quais são os padrões básicos de comportamento dos usuários.

Como os usuários pensam?

Basicamente, os hábitos dos usuários na web não são muito diferentes dos hábitos dos clientes em uma loja. Os visitantes olham para cada nova página, escaneiam algum do texto e clicam no primeiro link que chama a atenção deles ou que de alguma forma se assemelha àquilo que eles estão procurando. Na verdade, existem grandes partes da página que eles nem sequer olham.

A maioria dos usuários procura por algo interessante (ou útil) e clicável; assim que alguns candidatos promissores são encontrados, os usuários clicam. Se a nova página não atender às expectativas dos usuários, o botão Voltar é clicado e o processo de busca é continuado.

Usuários não leem, eles escaneiam. Observe como áreas “quentes” abruptamente no meio de frases. Isso é típico do processo de digitalização.

A leitura sequencial não funciona na Web. A captura de tela correta na imagem abaixo descreve o caminho de varredura de uma determinada página.

1 . Não faça os usuários pensarem

De acordo com a primeira lei de usabilidade de Krug, a página da web deve ser óbvia e autoexplicativa. Quando você está criando um site, o seu trabalho é eliminar os sinais de interrogação – as decisões que os usuários precisam tomar conscientemente, considerando prós, contras e alternativas.

Se a navegação e a arquitetura do site não forem intuitivas, o número de interrogações aumenta e torna mais difícil para os usuários compreenderem como o sistema funciona e como chegar do ponto A ao ponto B. Uma estrutura clara, pistas visuais moderadas e links facilmente reconhecíveis podem ajudar os usuários a encontrar o caminho para o seu objetivo.

Vamos dar uma olhada em um exemplo. O Beyondis.co.uk afirma ser “além dos canais, além dos produtos, além da distribuição”. O que isso significa? Uma vez que os usuários tendem a explorar sites de acordo com o padrão “F”, essas três afirmações seriam os primeiros elementos que os usuários verão na página assim que ela for carregada.

Embora o design seja simples e intuitivo, o usuário precisa procurar a resposta para entender o que a página se trata. É isso que uma interrogação desnecessária é. É tarefa do designer garantir que o número de interrogações seja próximo de 0. A explicação visual é colocada no lado direito. Trocar ambos os blocos aumentaria a usabilidade.

O ExpressionEngine usa a mesma estrutura que o Beyondis, mas evita as interrogações desnecessárias. Além disso, o slogan se torna funcional, pois os usuários têm a opção de experimentar o serviço e baixar a versão gratuita.

Ao reduzir a carga cognitiva, você facilita para os visitantes compreenderem a ideia por trás do sistema. Uma vez que isso é alcançado, você pode comunicar por que o sistema é útil e como os usuários podem se beneficiar dele. As pessoas não usarão o seu site se não conseguirem navegar nele.

2 . Não desperdice a paciência dos usuários

Em cada projeto, quando você estiver oferecendo aos seus visitantes algum serviço ou ferramenta, tente manter os requisitos de usuário mínimos. Quanto menos ação for necessária dos usuários para testar um serviço, mais provável é que um visitante aleatório realmente o experimente. Visitantes de primeira vez estão dispostos a brincar com o serviço, sem preencher longos formulários da web para uma conta que eles talvez nunca usem no futuro. Deixe os usuários explorarem o site e descobrirem seus serviços sem forçá-los a compartilhar dados privados. Não é razoável forçar os usuários a inserir um endereço de e-mail para testar o recurso.

Como Ryan Singer, o desenvolvedor da equipe 37Signals, afirma, os usuários provavelmente estariam ansiosos para fornecer um endereço de e-mail se lhes fosse pedido depois que eles tivessem visto o recurso funcionar, para que eles tivessem alguma ideia do que receberiam em troca.

Stikkit é um exemplo perfeito de um serviço amigável ao usuário que exige quase nada do visitante, sendo discreto e acolhedor. E é isso que você deseja que seus usuários sintam em seu site.

Aparentemente, o Mite requer mais. No entanto, o registro pode ser feito em menos de 30 segundos – já que o formulário tem orientação horizontal, o usuário nem precisa rolar a página.

Idealmente, remova todas as barreiras, não exija assinaturas ou registros primeiro. Um registro de usuário sozinho é suficiente como um impedimento à navegação do usuário para reduzir o tráfego de entrada.

3 . Gerenciar a atenção dos usuários

Como os sites fornecem conteúdo tanto estático quanto dinâmico, alguns aspectos da interface do usuário chamam mais atenção do que outros. Obviamente, as imagens são mais atraentes do que o texto – assim como as frases marcadas em negrito são mais atraentes do que o texto simples.

O olho humano é um dispositivo altamente não linear, e os usuários da web podem reconhecer instantaneamente bordas, padrões e movimentos. É por isso que os anúncios baseados em vídeo são extremamente irritantes e distrativos, mas, do ponto de vista de marketing, eles fazem perfeitamente o trabalho de capturar a atenção dos usuários.

A humanizada perfeitamente usa o princípio de foco. O único elemento que é diretamente visível aos usuários é a palavra “gratuito”, que é atraente e atraente, mas ainda calma e puramente informativa. Dicas sutis fornecem aos usuários informações suficientes sobre como encontrar mais sobre o produto “gratuito”.

Focar a atenção dos usuários em áreas específicas do site com um uso moderado de elementos visuais pode ajudar seus visitantes a chegar do ponto A ao ponto B sem pensar em como isso deve ser feito. Quanto menos ponto de interrogação os visitantes tiverem, melhor será a orientação e mais confiança eles podem desenvolver em relação à empresa que o site representa. Em outras palavras: quanto menos pensamento precisar acontecer por trás das cenas, melhor será a experiência do usuário, que é o objetivo da usabilidade em primeiro lugar.

4 . Busque por exposição de recursos

Designs web modernos são geralmente criticados devido ao seu enfoque em guiar os usuários com passos visuais atraentes de 1-2-3-feito, botões grandes com efeitos visuais, etc. Mas, do ponto de vista do design, esses elementos na verdade não são ruins. Pelo contrário, essas orientações são extremamente eficazes, pois levam os visitantes através do conteúdo do site de uma maneira muito simples e amigável.

Dibusoft combina o apelo visual com uma estrutura de site clara. O site tem 9 opções de navegação principais que são visíveis à primeira vista. A escolha de cores pode ser um pouco clara, no entanto.

Permitir que o usuário veja claramente quais funções estão disponíveis é um princípio fundamental para o design de interface de usuário bem-sucedido. Na verdade, não importa muito como isso é alcançado. O que importa é que o conteúdo seja bem compreendido e os visitantes se sintam confortáveis com a forma como interagem com o sistema.

5 . Use a escrita eficaz

Como a Web é diferente da impressão, é necessário ajustar o estilo de escrita às preferências e hábitos de navegação dos usuários. Escrita promocional não será lida. Blocos de texto longos sem imagens e palavras-chave marcadas em negrito ou itálico serão ignorados. Linguagem exagerada será ignorada.

Fale a língua dos negócios. Evite nomes engraçados ou inteligentes, nomes induzidos por marketing, nomes específicos da empresa e nomes técnicos desconhecidos. Por exemplo, se você descrever um serviço e quiser que os usuários criem uma conta, “registre-se” é melhor do que “comece agora!” que é melhor do que “explore nossos serviços”.

Eleven2.com vai direto ao ponto. Sem palavras fofas, sem declarações exageradas. Em vez disso, um preço: exatamente o que os visitantes estão procurando.

Uma solução ótima para escrever de forma eficaz é:

6 . Busque a Simplicidade

O princípio “mantenha-o simples” (KIS) deve ser o objetivo principal do design do site. Os usuários raramente estão em um site para desfrutar do design; além disso, na maioria dos casos, eles estão procurando informações, independentemente do design. Busque a simplicidade em vez da complexidade.

Do ponto de vista dos visitantes, o melhor design de site é um texto puro, sem anúncios ou outros blocos de conteúdo que correspondam exatamente à consulta dos visitantes ou ao conteúdo que eles estão procurando. Esta é uma das razões pelas quais uma versão de impressão amigável para páginas da web é essencial para uma boa experiência do usuário.

Finch apresenta claramente as informações sobre o site e dá aos visitantes uma escolha de opções sem sobrecarregá-los com conteúdo desnecessário.

7 . Não tenha medo do espaço em branco

Na verdade, é realmente difícil subestimar a importância do espaço em branco. Não só ajuda a reduzir a carga cognitiva para os visitantes, como também torna possível perceber as informações apresentadas na tela. Quando um novo visitante se aproxima de um layout de design, a primeira coisa que ele/ela tenta fazer é digitalizar a página e dividir a área de conteúdo em pedaços digeríveis de informação.

Estruturas complexas são mais difíceis de ler, digitalizar, analisar e trabalhar. Se você tiver a escolha entre separar dois segmentos de design por uma linha visível ou por algum espaço em branco, geralmente é melhor usar a solução de espaço em branco. Estruturas hierárquicas reduzem a complexidade (Lei de Simon): quanto melhor você conseguir fornecer aos usuários um senso de hierarquia visual, mais fácil será o seu conteúdo para ser percebido.

O espaço em branco é bom. O Cameron.io usa o espaço em branco como elemento de design primário. O resultado é um layout bem legível que dá ao conteúdo a posição dominante que merece.

8 . Comunique-se efetivamente com uma “linguagem visível”

Em seus trabalhos sobre comunicação visual eficaz, Aaron Marcus estabelece três princípios fundamentais envolvidos no uso da chamada “linguagem visível” – o conteúdo que os usuários veem na tela.

9 . Convenções são nossos amigos.

Design convencional de elementos de site não resulta em um site web chato. Na verdade, as convenções são muito úteis, pois reduzem a curva de aprendizado, a necessidade de descobrir como as coisas funcionam. Por exemplo, seria um pesadelo de usabilidade se todos os sites tivessem uma apresentação visual diferente dos feeds RSS. Isso não é muito diferente de nossa vida regular, onde tendemos a nos acostumar com princípios básicos de como organizamos dados (pastas) ou fazemos compras (disposição dos produtos).

Com convenções, você pode ganhar a confiança, a confiança, a confiabilidade dos usuários e provar sua credibilidade. Siga as expectativas dos usuários – entenda o que eles esperam de uma navegação de site, estrutura de texto, posicionamento de pesquisa, etc.

Um exemplo típico de sessões de usabilidade é traduzir a página para o japonês (supondo que seus usuários da web não conheçam o japonês, por exemplo, com o Babelfish) e fornecer aos seus testadores de usabilidade uma tarefa para encontrar algo na página de língua diferente. Se as convenções forem bem aplicadas, os usuários serão capazes de alcançar um objetivo não muito específico, mesmo que não entendam uma palavra disso.

Steve Krug sugere que é melhor inovar somente quando você sabe que realmente tem uma ideia melhor, mas aproveite as convenções quando você não tiver.

10. Teste cedo, teste frequentemente

Esse chamado princípio TETO deve ser aplicado a cada projeto de design da web, pois os testes de usabilidade costumam fornecer insights cruciais sobre problemas e questões significativas relacionadas a um determinado layout. Teste não tarde demais, nem de menos e nem por motivos errados. No último caso, é necessário entender que a maioria das decisões de design são locais; isso significa que você não pode responder universalmente se algum layout é melhor do que o outro, pois precisa analisá-lo a partir de um ponto de vista muito específico (considerando requisitos, stakeholders, orçamento, etc.).

Alguns pontos importantes a serem lembrados:

Em suma: se você quer um ótimo site, você precisa testar.