O tempo médio que um usuário passa em uma página/tela online é menor que 10 segundos (1). Nesse intervalo, precisa entender não só a estrutura de navegação, como ver se o layout o atrai, perceber se o conteúdo o interessa e o que deve fazer a seguir.

Para atender a estímulos tão imediatos, as páginas de mídias digitais têm características genéricas que a maioria dos usuários está acostumada a encontrar, como:

 Identidade visual, affordances (elementos que mostram seu potencial de uso) e percepção de valor claros ao primeiro contato, de modo que pelas sugestões e influências do layout os usuários se apercebem rapidamente da relevância do canal e se vale a pena examiná-lo. As informações mais importantes devem ser valorizadas, com ênfase nos elementos e ações mais críticos à comunicação – consequentemente, os elementos menos importantes devem ser desvalorizados visualmente.

 Solução visual mais simples possível, para minimizar o esforço cognitivo necessário ao uso e favorecer o reconhecimento de elementos familiares, com a simplificação de metáforas da vida real.

 Elementos visuais e funcionais convencionais em diversas plataformas, de modo que os usuários não precisam aprender a usá-los em cada situação – botões facilmente identificáveis, caixa de busca no canto superior direito,  logotipo no canto superior esquerdo, link para a home no logotipo.

Exemplos de elementos pontuais de uso aceito e legitimado pela maioria dos usuários:

 Carrinho de compras em site de comércio – armazena as mercadorias durante a seleção e decisão de compra.

 Migalhas de pão, ou trilhas de navegação – facilitam a orientação dos usuários dentro da estrutura geral.

 Mapa do site – modelo de visualização da arquitetura da informação e dos relacionamentos entre áreas e unidades.

 Contato – informações de acesso à pessoa empresa que publica um site.

 Políticas de privacidade – garantias de proteção dos dados fornecidos pelo usuário.

O uso de convenções não significa que o layout tenha que ficar parecido com o de outros produtos. Pelo contrário, as convenções são usadas para criar experiências de diferenciação, que se sobressaem das demais, para identificar a marca associada ao canal.

  Uso de enclosures (conjuntos de elementos que resumem visualmente eventos funcionais – como avisos de notificações e mensagens, áreas do usuário, informações de mesma natureza) encontrados em diversas plataformas. Grupos próximos alinhados criam identidades entre os elementos.

Numa página com três colunas, cada uma cria agrupamentos de elementos associados entre si. Na mesma coluna, novos agrupamentos são criados quando os alinhamentos são alterados.

Navegação/ação progressiva com resumo da relação entre ações e o conteúdo – inclui a gramática (conjuntos de símbolos articulados) entre a ação do usuário e os objetos da interface. A estrutura funcional se baseia nas tarefas prioritárias e secundárias dos usuários.

 Consistência na padronização de elementos funcionais –  a experiência do usuário se mantém uniforme na resposta às funcionalidades, com o desestímulo a usos não apropriados (em barras de navegação, menus, botões, janelas, mensagens, formulários).

Para um aplicativo em Android, é importante usar padrões do Android. O mesmo para plataformas para Apple, Microsoft, etc. O uso de padrões diminui o esforço/tempo aplicado no uso e provê uma experiência familiar, facilmente reconhecível, para os usuários.

Padronizações incluem também a ordenação do uso de botões, por exemplo. O botão “Cancelar” normalmente fica posicionado depois do botão “Ok”, ou “Salvar”. Em formulários, o nome da pessoa a ser registrada antecede a maioria dos outros campos.

 Consistência na aplicação de padrões de layout e usabilidade – a consistência (nas aplicações da identidade visual, como cores, fontes, localização de elementos,  ícones) aumenta as chances de reconhecimento da marca e dos elementos de uso, provê sentido de pertencimento dos elementos a um sistema integrado e reforça a percepção de como a interface funciona, diminuindo o tempo de aprendizado.

 Textos em cores contratadas, com tamanhos redimensionáveis, alinhados à esquerda, para facilitar a leitura para idosos e deficientes visuais.

 Textos em cores com alto contraste, com tamanhos redimensionáveis, alinhados à esquerda, para facilitar a leitura para idosos e deficientes visuais.

Ícones sintéticos e associados visualmente a uma família, testados para avaliação da sua compreensão pelo público.

 Combinação de títulos+textos+imagens, com alinhamentos uniformes, para facilitar o acesso a conteúdo mais denso. O uso de múltiplas mídias combinadas aumenta a densidade do processamento das informações. Em sites de treinamento, o uso de vídeos com imagens e textos, bem como o acréscimo de questões e tarefas individuais e em grupo, aumenta o entendimento e a memorização do conteúdo.

Elementos (botões, mensagens, ações) de mesma funcionalidade com layout relacionado, ou semelhante. O oposto também se aplica: elementos com diferentes funções diferentes visualmente.

Rótulos (labels) de mesma funcionalidade sempre com o mesmo texto. Textos diferentes sugerem diferentes ações ou diferentes resultados.

O uso de elementos interativos deve mostrar a resposta, de modo que os usuários saibam que sua ação foi reconhecida. Quando a resposta não fica visível, as pessoas tendem a repetir a ação, o que pode acarretar erros (uma compra pode ser feita diversas vezes, por exemplo).

O uso de padrões está relacionado a elementos e funcionalidades afins. O uso de soluções diferentes das consagradas pelo uso deve ser associado a elementos e funcionalidades não previamente existentes. Caso se escolha criar soluções não existentes para elementos e funcionalidades de uso já aceito pelo público, estas soluções devem aperfeiçoar os modelos pré existentes.

 Consistência na relação entre partes e todo – aplica-se tanto a partes  e todos de uma interface quanto a uma interface em relação ao conjunto de interfaces existentes num contexto.

Funcionalidades restritas às essenciais – a interface não precisa contemplar todas as possibilidades funcionais. Na maior parte dos programas apenas uma pequena parcela das funcionalidades é usada, a maioria é ignorada pelos usuários.

O excesso de opções atrapalha a atividade mental, aumentando o tempo que o usuário leva para tomar uma decisão (lei de Hick,  sobre a capacidade cognitiva informacional em experimentos baseados em escolhas). (Wikipédia)

A disponibilização inicial de elementos genéricos, com o detalhamento posterior, caso o usuário demande, é bastante comum em redes sociais, em que textos maiores aparecem apenas se o usuário solicita que apareça inteiro.

 Minimação de ações negativas, com medidas para evitar erros, como mensagens pedindo a confirmação (“Você tem certeza que quer sair desta página sem enviar a mensagem?”, “Você tem certeza que deseja excluir xxx dos seus amigos?”) ou o cancelamento de uma ação.

Também é importante o uso de ferramentas de suporte para realizar ações ou cancelar ações realizadas por engano. É comum achar explicações aninhadas aos rótulos de formulários, para detalhar as informações solicitadas, por exemplo.

Em formulários, pode-se criar affordances ou alertas sobre o preenchimento adequado de alguns campos, como de números telefônicos, datas, e outros dados com números de dígitos padronizados.

Conceitos editorial e comercial determinam como vários tipos de informação são exibidas.

É importante também considerar as características específicas da página Principal e das páginas internas.

Características como essas contribuem para a criação de relações de confiança, que estimulam o usuário a retornar ao canal, cadastrar-se, realizar uma compra. O canal fica diretamente associado à criação de valor. Para os usuários e seus criadores.

(Atualizado em 27.2.2017)

 

Referências

1) How long users stay on web pages ? (Nielsen Norman Group, acesso em 9.2011)

Cartilha de usabilidade – e-Gov (acesso em 2.11.2010)

Design patterns (Usability Body of Knowledge, acesso em 20.3.2009)

Livro: Coordinating user interfaces for consistency, Jakob Nielsen

The truth about Google’s so-called “simplicity”, Don Norman (jnd.org, acesso em 2.7.2009)

→ Clickstream study reveals dynamic web (WebSiteOptimization, acesso em 29.7.2006)

 

Ferramentas

Patternry (acesso em 27.2.2017)

Ui-Patterns (acesso em 27.2.2017)