Os estados de pairar são necessários?

Eu voto “sim”! É verdade que não se deve depender de eventos de foco porque os dispositivos de toque são muito populares. No entanto, Jon parece estar perguntando sobre os estados visuais de foco nos botões, o que é um pouco diferente.

Os estados de foco visual permitem “clickablity” . Você não deveria ter que clicar em algo para descobrir se for um botão. Os usuários de laptops e desktops esperam que coisas “clicáveis” reajam ao passar o mouse, e ter um botão “aceso” é uma dica útil.

Pense nisso como uma forma de aprimoramento progressivo . É útil para aqueles que podem usar e inofensivo para aqueles que não podem!

Comentários

• Na verdade, eu ‘ iria mais longe a ponto de dizer isso em um desktop No ambiente de navegação, o usuário pode quase pensar que há algo errado se nada além do cursor mudar – nós nos acostumamos a pairar sobre as mudanças.
• Esse foi meu argumento / pensamento mais forte. Nós ‘ nos acostumamos tanto com isso que ‘ seria estranho não tê-lo.
• Bom ponto no aprimoramento progressivo. Eu ‘ d adiciono mais uma coisa a "You shouldn't have to click something to find out if it's a button."; você não deve ‘ ter que passar o mouse sobre algo para descobrir se ele ‘ é um botão.
• Eu também diria que adicionar estados visuais de foco nos botões dá ao usuário um feedback positivo sobre sua ação ou uma sensação de um prêmio mental.
• Ter saído do Windows 7, que dependia muito de estados de foco e contornos ou painéis frequentemente usados para indicar botões, para o Windows 8, que geralmente nenhum no ” Metro ” interface de estilo, eu ‘ achei o Win 8 incrivelmente frustrante de usar às vezes. Pode ser o que a MS deseja que os designers codifiquem para o Win 8, mas IMX ‘ é claramente incorreto em fazê-lo.

Tento evitar estados de foco no design, tanto quanto possível. O principal motivo para isso é que eles não fazem sentido em dispositivos de toque.

Embora possa parecer que não se aplica quando você não está projetando para celular, muitas pessoas usam seus tablets ou outros dispositivos de toque para navegue nos mesmos sites ou use os mesmos aplicativos que tradicionalmente usaria apenas em um computador com um mouse.

Ao restringir-se para não usar eventos de foco, você não apenas torna a experiência boa independentemente do dispositivo que está usando, mas também torna mais fácil criar um aplicativo nativo específico de toque posteriormente.

Comentários

• Os estados de foco ainda são úteis em sites móveis. O CSS :hover efetivamente é tratado como :active quando visualizado em um dispositivo móvel. Isso fornece um feedback visual de que o dedo do usuário ‘ atingiu o alvo. Esse feedback é muito mais útil em designs móveis devido à paralaxe. À medida que sua linha de visão se desvia da linha perpendicular à tela, as chances de erros de toque aumentam.
• os estados de foco do @JoJo não são ‘ detectáveis no celular , e tocar equivale a clicar em um computador.
• John, em minha experiência vendo sites que ‘ projetei para desktop no celular, acredito que JoJo está correto ao dizer que o estado de foco [às vezes] atua como o estado ativo. Digo às vezes porque ‘ é um pouco enjoado e não ‘ sempre aparece.
• @Jon I ‘ Não estou discutindo como isso traduz, eu ‘ estou discutindo sobre como faz sentido traduzir. Se o foco se tornar ativo, como você seleciona? Toque duplo? Ele quebra todo o paradigma do toque.
• @JoJo nem sempre, eu não ‘ não acredito que o Chrome no Android acione o estado de foco e o Safari ‘ o estado de flutuação muitas vezes é estranho

Com o surgimento de o toque sendo a principal forma de interagir com o software, eu diria que as interações baseadas em hover são agora relegadas a “bom ter melhorias”, mas nunca deve ser um requisito para interagir com o software.

Costumo duplicar o estado: hover para: focus, pois esta é uma maneira útil de indicar o focus para um usuário apenas com teclado (que é necessário para atender às WCAG2 ). Indica que um item é interativo de alguma forma, sem a necessidade de um evento de clique que acionará uma ação que o usuário ainda não decidiu iniciar. Você pode definir o estilo para: focus sem: hover, mas na minha opinião a intenção das duas ações é a mesma e deve ter o mesmo efeito visual sempre que possível.

Também concordo com o ponto de vista de Sam de que os estados de foco podem ser considerados aprimoramento progressivo . Gostaria apenas de esclarecer um pouco isso.

De uma perspectiva móvel primeiro , os estados de foco não atendem realmente a nenhum propósito. Portanto, é melhor a IU permitir comportamentos clicáveis para objetos clicáveis sem um estado de foco (ou seja, os botões devem parecer como botões).

Se você puder suportar essa noção em um dispositivo móvel, essa mesma noção será suportada em dispositivos desktop / laptop também antes dos estados de foco serem introduzidos.

Incluir um estado de foco em dispositivos que oferecem suporte ao foco – laptops, desktops etc. – confirmará a percepção já existente do usuário de que um elemento específico da IU é de fato clicável.

Então, para recapitular:

1. Construa elementos de IU que são clicáveis de forma que eles proporcionem comportamento clicável para qualquer dispositivo.
2. Use estados de foco em dispositivos que suportam o recurso de pairar para suportam ainda mais a noção de que um elemento é clicável.

+1 a Sam por mencionar o aprimoramento progressivo.

Eu recomendo usar estados de foco se eles fornecerem alguma utilidade que aprimore a IU, mas eles nunca devem ser necessários para concluir uma tarefa.

Por exemplo, usá-los em uma página de lista de produtos para fornecer um pouco de informação sobre o item ao passar o mouse sobre a imagem, antes de o usuário navegar por ela. Essas informações também devem estar disponíveis na própria página do produto. Portanto, não prejudica o experiência do usuário de tela de toque, mas adiciona alguma utilidade adicional para aqueles que fazem vê-lo. 🙂

Só porque você está projetando para desktops e dispositivos móveis não significa que os designs devem ser os mesmo. A interação com a qual os usuários móveis podem estar acostumados pode não ser aparente para os usuários de desktop.

Por exemplo, cartões brancos com um circunflexo no lado direito. Para usuários móveis, isso é obviamente algo em que você pode tocar. Para usuários de desktop, não tanto (especialmente se o cartão for mais largo no desktop), mas quando eles passam o mouse e veem um estado de pairar, fica óbvio que é clicável.

Principalmente agora que a animação está se tornando cada vez mais comum, um estado de foco é uma animação básica que dá aos usuários feedback de que eles estão fazendo o que pretendiam.

Não usar um estado de foco para a área de trabalho é preguiçoso e deixa as pessoas tristes.

Não acredito :hover que os estados são essenciais; Os elementos da interface do usuário na área de trabalho passaram sem eles para sempre e os objetos claramente projetados para permitir o clique (como o botão “Publique sua resposta” aqui no UX.SE) testam bem em minha própria experiência. Isso não quer dizer que não seja útil ; apenas que não é essencial.

Sim, no entanto, considere :focus e especialmente :active estados essenciais; o O último, especialmente, é aquele que vejo ignorado em muitos sites. Um estado ativo claro ajuda o usuário a saber que o clique do botão foi registrado imediatamente ( que é extremamente importante para ajudar os usuários a sentir que estão manipulando diretamente um objeto na IU ). Os controles do sistema, como botões e menus, também tornaram esse estado esperado, o que torna esquecê-los ainda mais imperdoável.

Eu sugeriria que os estados de foco fornecem feedback positivo para a expectativa do usuário de que o elemento em questão é interativo, removendo assim o potencial para sentimentos mais negativos de dúvida e ambigüidade .

Os designs fornecem uma série de dicas de que um elemento é interativo – forma, tamanho, posição, cor, um sublinhado, etc. Diferentes usuários exigirão dicas diferentes s, e talvez o efeito cumulativo de um número diferente de pistas, para perceber (e ter certeza de que) o elemento é interativo. Alterar um elemento ao pairar é uma oportunidade de fornecer mais dicas.

A maioria (se não todos) dos navegadores fornece dicas ao passar o mouse por padrão, alterando o cursor para um ponteiro. Claro que temos controle sobre isso e poderíamos remover o estado de foco removendo esse efeito. Mas imagino que para a maioria de nós (pare um momento para imaginar) isso introduziria dúvidas significativas em nossa experiência de navegação. Os navegadores (e depois os designers) estabeleceram um precedente para pistas adicionais ao passar o mouse que não fornecer pistas seria uma contradição significativa de quaisquer pistas percebidas anteriormente de que o elemento é interativo.

Remoção do padrão do navegador A sugestão é, portanto, um exemplo útil do valor do estado de flutuação. Para mim, a questão não é se as dicas visuais de interatividade ao pairar são valiosas, mas quais e quantas dicas são ideais.

Existem algumas precedentes familiares úteis, mas a resposta a esta pergunta dependerá da aplicação e do público-alvo.

Eu sugeriria passar o mouse quando não houver ícone no botão. Se supor que haja um ícone colorido no botão dessa vez, não é necessário atribuir o estado ao passar o mouse ao botão. Ex: inscreva-se usando o botão do Google.

Hovers são uma obrigação para todos os sites que desejam uma boa resposta online. Eu usei alguns sites que abandonou o status de pairar no meu laptop, e foi muito frustrante.Qualquer bom designer sabe que as pessoas online estão com pressa para encontrar o que desejam, e se um botão não vai dizer se é ou não e você precisa abri-lo em uma nova guia para descobrir – isso é um grande falha!

Correto, hovers não são necessários para dispositivos móveis. Mas, você sempre pode desativá-los para dispositivos móveis. Além disso, não podemos esquecer que os botões para celular precisam ser muito maiores do que os online. E, de qualquer forma, eles não são criados em duas folhas de estilo diferentes?

Comentários

• Para sites, mudar o estilo do cursor para uma mão (ou equivalente) é o efeito de foco no qual eu ajo.
• Eu acredito que ainda precisa mostrar o hover, apenas uma mão confunde o usuário, pois queremos que a web funcione o mais realista possível, e quando clicamos em coisas da vida real – elas refletem. Além disso, do ponto de vista do ‘ do estrategista, você gostaria que seu site fosse mais seguro e ‘ o fato de que a maioria sites de golpes não ‘ não se incomodam em instalar o efeito hover – portanto, quando os usuários não ‘ não veem o efeito, começam a parecer estranhos por dentro.