Dicas comuns de usabilidade de aplicativos da web?

Menus suspensos CSS/Javascript que não possuem um atraso especificado, para que você experimente o "problema diagonal" (via Jakob Nielsen )

Não colocando rótulos clicáveis ​​nas caixas de seleção e outros campos do formulário.

É tão fácil de fazer. Veja a tag HTML <label> .

Design de validação de formulário incorreto.

Eu odeio quando envio um formulário que falha na validação e o aplicativo executa um dos seguintes procedimentos:

• Os campos ficam em branco quando o formulário é recarregado. Isso aconteceu comigo durante a inscrição em um aplicativo Web no meu iPhone. Eu estava muito chateado porque havia mais de 8 campos.
• Exibe apenas um erro de validação por envio de formulário.
• Não apresenta um resumo dos erros na parte superior do formulário.
• Não destaca visualmente as entradas de campo inválidas.

Design ruim quando se trata de botões de ação Primário x Secundário nos formulários.

http://www.lukew.com/resources/articles/psactions.asp

Os usuários usam os botões voltar e avançar no navegador (ou no mouse). E eles também usam o botão de atualização. Portanto, tenha cuidado com as postagens de formulário em seu site.

Ninguém gosta disso ...

Essa caixa de diálogo aparece quando você atualiza a página na qual os dados são postados. Felizmente, isso pode ser evitado usando method = "get" quando possível, ou method = "post" seguido imediatamente por um redirecionamento, quando necessário. Se você precisar usar uma postagem por motivos de tamanho ou segurança, o redirecionamento deverá ir para um URL diferente da ação do formulário para evitar esta mensagem.

links JavaScript. Você não pode clicar com o botão direito do mouse para abrir uma nova guia para javascript:loadPage(34576).

Solicitar informações pessoais obrigatórias em formulários de registro quando não forem necessárias.

Exemplos :

• pedindo um endereço em um site onde essas informações são inúteis
• Forçando a digitar um nome "real"
• ...

Tornar essas informações obrigatórias é a melhor maneira de obter um banco de dados realmente poluído, cheio de "dummy", "[email protected]" etc. etc. porque a maioria das pessoas não gosta de fornecer esse tipo de informação quando não é realmente necessário.

Além disso, não poder modificar nenhuma dessas informações é um design muito ruim.

target = "_ blank" nas âncoras é um dos mais comuns e o que eu mais odeio. Existem alguns casos em que isso faz sentido, na minha opinião.

Aqui está uma lista bastante conhecida dos 10 principais erros no design da Web: http://www.useit.com/alertbox/9605.html

Quando a funcionalidade do botão voltar é desativada ou alterada do que o usuário esperaria. Eu vejo isso muito em aplicativos que usam caixas de diálogo/caixas de luz/iframes personalizados.

Fazendo-me caçar o "esqueceu sua senha?" link e, depois que eu clicar nele, me enviar minha senha de forma clara ¹ uma vez que eu o encontro. Nosso querido Jeff Atwood falou muito bem disso em " Você provavelmente está armazenando senhas incorretamente "

_{¹ É certo que esta parte é mais um problema de programação , mas também considero um problema de usabilidade.}

Usando caixas de seleção como botões de opção e vice-versa.

Nenhum lugar para fechar sua conta ou dificultar a localização de onde encerrar sua conta.

Idealmente, você deseja uma seção "Conta" ou algo semelhante à palavra, e nessa página, além de todas as outras coisas que você deseja, um link ou botão claramente identificado que diz "fechar minha conta". Você pode seguir isso com uma página que pergunta aos usuários por que eles estão saindo ou os convida a dar feedback, mas todas essas coisas devem ser desvalorizadas em comparação com a chamada à ação real "fechar minha conta" (ou excluir, remover etc.) .

• Campos com validação super estrita. Por exemplo, se você digitou um código postal e "V5X4O4" funciona, mas "V5X 4O4" não.

• Ícones sem rótulo ou título textual (em foco ou não).

• Se um título estiver sendo truncado, acho que você poderá ver uma dica de ferramenta com o título completo em foco.

• Quando botões importantes são ofuscados pelos usuários finais em favor de anúncios ou material promocional. Pense no botão "Continuar sem uma conta" do Paypal.

  • ÁUDIO QUE Toca SEM PERMISSÃO! Lol - Além disso, nenhum botão mudo.

Seu site não é degradado normalmente quando o JavaScript está desativado.

A questão é um pouco geral e, na verdade, é mais uma discussão.

Eu posso contribuir com uma coisa que já vi várias vezes:

Formulários com um botão "limpar tudo".

• Alguns deles até projetam os botões "enviar" e "limpar tudo" da mesma forma, dando a eles o mesmo peso.
• Sem mencionar que já vi exemplos (não tenho um link específico em mente agora ...) em que o "clear" está à esquerda e o "submit" à direita, fazendo com que alguns usuários pressionem o primeiro botão mais próximo do cursor ao sair do último campo.

Não vejo nenhuma razão para um botão "claro", mas se você absolutamente insistir, basta usar um link muito sutil, permitindo apenas uma ação simples e óbvia para o usuário.

Ter que se registrar para executar algumas operações básicas que realmente não precisam de registro. Ou permita um método de registro com "um clique".
O usuário deve ter o direito de decidir. Acabo com muitas contas de "uso único" em tantos sites!

Alguns exemplos em que não deve ser necessário:

• download de arquivos (quantos sites de "código" solicitam que você se registre para permitir o download de um arquivo de amostra?)
• pesquisa (sim, alguns fóruns desativam a pesquisa de usuários não registrados)
• acessar um artigo (quando o acesso é gratuito)
• ...

Sites com barras de status flutuantes

Como barra Meebo . Estes são desagradáveis ​​e raramente fornecem funcionalidade útil. Eles ocupam espaço desnecessário e estouram balões que distraem.

Ser "criativo" e colocar a barra de pesquisa atrás de uma guia/link/etc. Se você oferece pesquisa, basta disponibilizar uma caixa, em vez de precisar procurá-la!

Minha maior preocupação são os sites que, por um motivo ou vários , não suportam corretamente os sinais de adição nos endereços de e-mail . Muitas vezes, os sites não validam um endereço de e-mail com um '+' antes do '@'. O pior é que um site aceita o endereço, mas não escapa e/ou tira os dados corretamente e tenta enviar um email para um endereço com um espaço nele ou com os dois lados do '+' esmagados .

Este validador gratuito escrito em PHP supostamente segue todas as RFCs e suas erratas associadas.

Muitos sites não usam cores diferentes para links visitados .

Jakob Nielsen: Alterar a cor dos links visitados

Aplicativos Web executados em uma conexão HTTPS segura, mas carregam conteúdo de uma conexão HTTP. Por um lado, isso é totalmente bom, mas para os usuários IE em particular (normalmente não para mim)) o aviso de segurança é estranho e confuso para os usuários ...

Não é apenas altamente irritante descartar em todas as páginas, mas o texto é estranho e as ações dos botões são diferentes para o IE (6 e 7) vs. o IE8 +

Antigo IE:

Nova caixa de diálogo IE:

Portanto, se como usuário você "apenas deseja carregar a página inteira" (por exemplo, está procurando o botão "ir embora") ... é o padrão Yes no IE6 e IE7, mas o padrão não é No no IE8 +.

Nota: Estou plenamente consciente como desenvolvedor qual é o objetivo da caixa de diálogo e até por que a Microsoft a alterou, mas para os usuários finais, apenas as confunde, especialmente no IE8. Os usuários finais veem uma caixa de diálogo solicitando "permissão", "confirmação" etc. e esperam clicar na opção "ok" ou "yes" porque não lêem a caixa de diálogo. Pode-se argumentar que os usuários devem lê-lo, mas é mais fácil se os desenvolvedores garantirem que eles não têm conteúdo misto, se é que isso pode ser evitado.

Ter que procurar o link de logout. Faço logon em uma página e, em algumas, quando terminar, tenho que procurar o botão ou link de logout.

Recentemente, notei algo que nunca considerei um problema de usabilidade:

Passe o mouse para disponibilizar ações. Como, por exemplo, no Twitter.com, onde pairar um Tweet exibe os comandos de retweet e resposta.

Isso simplesmente não funciona em dispositivos baseados em toque. Não há pairar!

Outro problema meu são sites que não abrem links externos em uma nova guia. Olha, eu estou navegando em uma árvore. Espero que todos os domínios em que eu represente um ramo, quando terminar, fecharei a guia. Eu certamente não quero clicar em 'voltar' dez vezes para viajar pelo ramo.

Ocultando o que os usuários desejam e dando a eles o que VOCÊ deseja que eles desejem.

Um exemplo é o suporte ao cliente. Em vez de listar uma caixa grande e gorda com número de telefone/e-mail, etc, algumas empresas mostram um FAQ como meio de obter ajuda e não têm nenhuma informação de contato nessa página.

Sites que possuem estruturas de menu que "flutuam" para cima e para baixo em ambos os lados da tela enquanto você rola. Posso ver por que eles fizeram isso, mas muitas vezes é muito perturbador e, na maioria das vezes, não é tão "liso" quanto o designer obviamente esperava.

Um exemplo ao qual estou me referindo pode ser visto aqui: http://www.deluxe-menu.com/floatable-menu-sample.html

Sites de controle de qualidade que exibem a resposta aceita duas vezes.

A List Apart tem um artigo de Aza Raskin: "Nunca use um aviso quando você quiser desfazer".

http://www.alistapart.com/articles/neveruseawarning/

Os usuários tendem a ignorar ou não gostar de pop-ups de "aviso", mas oferecer ao usuário a chance de "desfazer" é muito mais fácil de usar.

Captchas

embora eles sejam bastante populares hoje em dia, também são considerados um problema de acessibilidade, especialmente para pessoas que não reconhecem palavras que não conhecem (ou que nem sequer têm caracteres especiais como ýáěíč no teclado)

pessoalmente, prefiro usar perguntas racionais simples para servir a essa funcionalidade

exemplo: escreva o próximo número inteiro que vem depois do número onze

Sites que usam muita CPU e memória

Normalmente, tenho várias guias abertas com perguntas/respostas de programação de várias listas de discussão e muitos desses sites têm algum javascript pesado (a instalação do adblock ajudou, mas ainda existem sites pesados). Com Chrome, finalmente posso ver quais guias estão causando isso.

A nova pesquisa aprimorada de imagens do Google coloca meu CPU em trabalhos pesados ​​e ocupa várias centenas de megabytes. Muita fome de recursos.

Ter elementos estáticos em sua página que mudam de cor se você colocar o cursor sobre eles, mas não fará nada se clicar neles. Na mesma liga: hiperlinks ou botões em que a região clicável é limitada ao texto.

Redirecionando do URI raiz para um subdiretório ou subdomínio (não removendo/adicionando o www).