top of page
Buscar

100 Dicas de Design de Experiência que Todo Designer Instrucional deve Assimilar


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


0 visualização0 comentário

Comments

bottom of page