O Design da Experiência do Usuário (UXD ou UX) é o processo que visa aumentar a satisfação do usuário, melhorando a usabilidade, acessibilidade e eficiência da interação do usuário com os sites. Vamos compartilhar algumas das melhores práticas e estatísticas que todo designer deve seguir:
Fluxo
1. Pense no site como uma estrada de tijolos amarelos: mova os usuários perfeitamente de uma seção para a outra, entendendo as metas e necessidades das personas
2. É mais provável que os usuários notem itens próximos à parte superior da página, em ordem de importância
3. Interfaces da web consistentes e fáceis de usar ajudam os usuários a se concentrarem no conteúdo
4. Evite criar páginas sem saída em sites. Eles causam confusão e criam trabalho adicional para os usuários
5. Use padrões e interfaces comuns de sites; não faça com que os usuários aprendam algo novo
Rolagem
6. Os usuários rolarão a página da Web desde que fique claro que informações adicionais relevantes estão abaixo
7. Seu site sempre deve fornecer uma forte indicação visual da direção da rolagem e se há mais conteúdo disponível
8. Quanto mais longa a página do site, menor a probabilidade de alguém rolar para baixo
9. A execução de páginas da web é boa porque a rolagem é mais rápida do que o clique
Contraste e cor
10. Design para usuários daltônicos. Converta seus projetos em escala de cinza para garantir que todos os usuários possam ler informações importantes
11. Não use a cor azul para nenhum texto em sites que não sejam links
12. Esteja ciente do contraste nos sites para celular. O brilho da tela pode tornar seu site inutilizável
13. Reserve uma cor para os CTAs no seu site e não use mais nada.
14. Cores quentes e brilhantes aparecem e cores frias e escuras ficam no fundo
Carregamento
15. Certifique-se de que os usuários do site possam concluir seu objetivo principal com rapidez e facilidade
16. O que mais importa para os usuários é que seu site se sente rápido (mesmo que seja apenas a percepção deles)
Mobilidade
21. É difícil tocar com precisão nos elementos da interface móvel se forem pequenos ou próximos
22. O tamanho mínimo para um alvo de toque em celulares deve ser 1cm x 1cm com preenchimento adequado
23. Alguém usando um dedo mindinho no seu site ou aplicativo móvel significa que os destinos da interface são muito pequenos
24. Ao segurar um tablet, os lados e a parte inferior da tela são mais facilmente alcançados com o polegar
25. Não exija deslizar verticalmente para outra coisa que não seja a rolagem normal da página da Web
26. Não use toques duplos em dispositivos móveis. Certifique-se de que os usuários possam interagir com um único toque
Navegação
28. Sempre tenha uma maneira óbvia de acessar o menu de navegação no seu site.
29. Se a hierarquia do seu site tiver mais de 3 a 4 níveis de profundidade, é hora de redesenhar
30. Considere o uso de menus fixos, especialmente em páginas da web mais longas ou quando for necessário acesso rápido.
31. A boa navegação no site não está no caminho, desaparece em segundo plano
32. Torne a sua navegação consistente; não deve mudar em todo o site Clique para Tweet
33. Especifique as etiquetas de navegação, com não mais do que 2-3 palavras e comece com o máximo de informações com a palavra
34. Informe aos usuários onde eles estão no site usando farinha de rosca
35. Navegação móvel: mostre as opções mais usadas e oculte as outras no menu de hambúrguer
36. Os menus de hambúrguer nos computadores de mesa são menos perceptíveis, menos familiares, aumentam o custo de interação e diminuem o cheiro das informações
37. Para navegação secundária em celulares, use as páginas de entrada da categoria, os submenus ou os menus da página.
38. As listas suspensas do menu devem estar na vertical, não na horizontal; é muito mais difícil rolar horizontalmente
39. Megamenus deve ser mais estreito que a página, para que seja fácil “clicar para fora” deles
40. Se estiver usando megamenus, organize os links em grupos e faça a distinção entre itens clicáveis e não clicáveis
41. Não esconda recursos de login ou pesquisa nos menus do site
Formulários
42. Alinhe rótulos e campos de formulário em uma única linha vertical para permitir uma digitalização rápida
43. Os rótulos dos campos devem estar fora do campo de texto, não dentro, para que os usuários não os percam de vista.
44. Divida as seções com os separadores para tornar os formulários da Web mais fáceis de usar
45. Coloque erros de formulário ao lado dos campos que causam erros em todos os formulários da Web.
46. As mensagens de erro devem ser úteis, utilizáveis, concisas e fáceis de entender
47. Mostrar todos os campos que causam erros de uma só vez, ao lado de cada campo problemático, para que os usuários de dispositivos móveis não percam o aviso
Links
48. Os links dos sites devem se destacar - use texto em azul e / ou sublinhado para indicar hiperlinks
49. Os links devem sempre parecer com links
50. Um usuário não precisa clicar em um link para descobrir para onde ele leva. O texto do link deve indicar a eles
51. Não use texto azul ou sublinhado para elementos não vinculados em sites ou aplicativos
52. Uma referência a um URL completo em qualquer lugar do site deve sempre estar vinculada a essa página
53. Certos elementos, como imagens ou críticas de produtos, sempre devem ser clicáveis
54. Use uma cor diferente para os links visitados em sites para reduzir a carga de memória dos usuários.
Botões
55. Os botões nos sites devem parecer clicáveis e ter espaço suficiente para os usuários clicarem ou tocarem confortavelmente.
56. Ações frequentes em sites ou aplicativos devem ser botões grandes, colocados em zonas de fácil acesso
57. Cores de fundo, bordas e rótulos orientados para a ação em um site sinalizam aos usuários que um elemento é clicável
58. Para designs planos, verifique se os botões de ação são feitos em cores contrastantes com um rótulo orientado para a ação.
59. Um site deve ter uma dica visual de que o clique de um botão foi bem-sucedido dentro de 0,1 segundos após a interação.
60. Os botões que alteram ou excluem dados em celulares devem exigir mais esforço para tocar para evitar toques acidentais
Search (Busca/Procura)
61. A menos que você tenha um site muito pequeno, com pouco conteúdo, sempre tenha um campo de pesquisa
62. O campo de pesquisa deve sempre parecer uma caixa de texto em uma área de trabalho. O ícone de pesquisa está OK para uso em dispositivos móveis
63. Facilite a localização do campo de pesquisa. Os usuários normalmente procuram no canto superior direito
64. Ao procurar pesquisas em sites, os usuários geralmente procuram por uma "caixinha para digitar"
65. Os campos de pesquisa nos sites devem ser amplos o suficiente para ver toda a consulta de pesquisa
17. A percepção da velocidade do site é baseada no tempo de carregamento, no comportamento do carregamento, nos tempos de espera e na suavidade das animações
18. Mostre um esqueleto dos elementos do site para comunicar o layout durante o carregamento
19. O texto do site deve carregar antes das imagens para que os usuários possam começar a ler antes do carregamento do restante do site
20. Atrasos que ultrapassam alguns segundos geralmente fazem com que os usuários deixem o site
Ajuda e Dicas
75. O principal objetivo de cada página da web deve ser óbvio para o usuário
76. Os usuários relutam em usar a Ajuda no seu site. Coloque-o em contexto e ofereça assistentes e perguntas frequentes quando apropriado
77. Exibir dicas em sites e aplicativos em contexto e somente quando necessário
78. A ajuda e as instruções devem ser curtas e visualmente diferentes de outros elementos da interface.
79. Apenas apresente uma dica de cada vez em sites e aplicativos móveis. Isso reduz a carga de memória
Ícones
80. Os ícones devem descrever visualmente sua função e finalidade. Torne-os simples, familiares e significativos
81. Os ícones devem ser utilizados apenas quando necessário. Evite usá-los demais e não os use simplesmente para decoração
Conteúdo
82. As informações mais importantes da sua página da web devem sempre se destacar como o mais visualmente destacado
83. Coloque as principais informações em primeiro lugar. Os usuários começam no canto superior esquerdo e as primeiras 2 a 3 palavras são digitalizadas mais
84. Coloque o conteúdo de alta prioridade na parte superior da página do site. Use a análise para determinar prioridades em diferentes dispositivos
85. Use contraste de cores e tamanhos no seu site para diferenciar informações primárias e detalhes de suporte
86. Prioridades, como contexto, localização e informações de emergência, são mais importantes para usuários móveis.
87. Prioridades para dispositivos móveis: localização, eventos, número de telefone, informações de emergência, informações sensíveis ao tempo e informações necessárias em movimento
88. Termos simples e óbvios são melhores que o jargão da indústria ou termos modernos para navegação no site
Legibilidade
89. A maioria dos usuários verifica primeiro e depois lê. Use variedade visual e texto significativo para facilitar a digitalização
90. A legibilidade não é apenas se você pode ler algo - mas também se você deseja lê-lo
91. Use um espaçamento maior entre linhas com marcadores, listas numeradas, linhas e parágrafos para aumentar a legibilidade
92. Ao escolher uma fonte de site, considere sua legibilidade, legibilidade, pesos e estilos.
93. Em sites e aplicativos para dispositivos móveis, considere aumentar a altura x de uma fonte para melhorar sua legibilidade
94. Evite fontes pequenas em todos os dispositivos, especialmente para cópias longas. Não use fontes condensadas no texto do corpo
95. Verifique se o tamanho do texto das manchetes de um site para celular é tão responsivo quanto o restante do conteúdo
96. Aumente o tamanho da fonte em sites para celular - sempre reduza o tamanho da fonte ao tamanho da tela
97. Cegueira de banner: os usuários se esforçam para não olhar para nada que pareça banners publicitários
98. Facilite a leitura de blocos de texto longos, incluindo apenas uma ideia por parágrafo
99. Texto em itálico é mais difícil de ler, especialmente para leitores disléxicos
100. Não use caixa alta nos títulos. É muito mais difícil ler
IDI - Institituto de Desenho Instrucional
#desenhoinstrucional #EaD #conteudogital #criarcursoonline #elearning #cursosonline #treinamentosonline #treinamento #desenvolvimento #conteudosead #experienciasdeaprendizagem #rh #dho #EducaçãoCorporativa #Aprendizagem #GestãoDePessoas #GestãoDoConhecimento #professor #professora #professores #professoras #ux #uxdesigner #uxdesign #learningdesign
Comments