it-swarm-pt.tech

OK / Cancelar à esquerda / direita?

Devemos OK botão estar à esquerda de Cancel botão ou vice-versa?

Existem estudos sugerindo alguma das soluções?

349
Art

Como em tudo: teste do usuário! Felizmente, o herói da usabilidade Jakob Nielsen salta para o resgate aqui em seu artigo da Alertbox sobre os botões OK/Cancelar :

O botão OK deve aparecer antes ou depois do botão Cancelar? As convenções de plataforma a seguir são mais importantes do que subotimizar uma caixa de diálogo individual.

Kostya estava certa ao aconselhar a adesão às diretrizes da plataforma. Mas e as plataformas baseadas na Web?

Se você estiver projetando um aplicativo baseado na Web, a decisão será mais difícil, mas provavelmente você deve optar pela plataforma preferida pela maioria dos usuários. Os logs do servidor mostrarão a porcentagem de usuários do Windows vs. Mac para o seu site ou intranet específico. Obviamente, o Windows geralmente tem muito mais usuários; portanto, se você não puder se preocupar em verificar os logs, a diretriz que será aplicada à maioria das situações será OK primeiro, Cancelar por último.

Ele também menciona duas diretrizes importantes adicionais que você pode considerar ao criar botões OK/Cancelar:

  • Geralmente, é melhor nomear um botão para explicar o que ele faz do que usar um rótulo genérico (como "OK"). Um rótulo explícito serve como "ajuda just-in-time", dando aos usuários mais confiança na seleção da ação correta.
  • Torne o botão mais comumente o padrão e destaque-o (exceto se a ação for particularmente perigosa; nesses casos, você deseja que os usuários selecionem explicitamente o botão em vez de ativá-lo acidentalmente pressionando Enter).
202
Rahul

A resposta está nas diretrizes da interface do usuário para o sistema que você usa.

Para Windows

Apresente os botões de confirmação na seguinte ordem:

  • OK/[Faça]/Sim
  • [Não faça]/Não
  • Cancelar
  • Aplicar (se houver)
  • Ajuda (se presente)

Portanto, o botão Cancelar está sempre à direita do botão OK.

Para MacOS

Um botão que inicia uma ação está mais à direita. O botão Cancelar está à esquerda deste botão.

Portanto, para usuários de MacOS, o Cancel está à esquerda do botão OK.

Para Android

A ação de desprezo de um diálogo está sempre à esquerda. Ações descartadas retornam ao usuário para o estado anterior.

As ações afirmativas estão à direita. As ações afirmativas continuam o progresso em direção à meta do usuário que acionou o diálogo.

Para Android, o botão Cancelar está à esquerda do botão OK.

Para outros sistemas, consulte as diretrizes.

142
Kostya

Pense na metáfora da "leitura". Os ocidentais leem da esquerda para a direita, nossos cérebros estão condicionados a fluir da esquerda para a direita. CANCELAR é basicamente um passo para trás (esquerda) e OK/SUBMIT/YES/Etc., São um passo à frente (direita).

64
GoodShovel

Parece que a convenção do Windows OK/Cancel fez muito condicionamento cerebral para os usuários. Portanto, os testes de usabilidade certamente sairiam com muitas pessoas procurando um botão OK à esquerda e Cancelar à direita.

Mas isso não muda o instinto mais básico de alguém que está interagindo com o sistema sem pré-condicionamento. Meu instinto básico diz que o botão OK/Aprovação/Avançar, independentemente da cor ou tamanho que você aplicar a ele, precisa estar na borda direita da caixa de diálogo.

Considere esta caixa de diálogo, sem rótulos ou realces de cores:

enter image description here

Onde você clicaria? Eu clicaria no botão no Edge direito, se pretender enviar o formulário. O motivo é que, antes do Windows, eu fui condicionada ao meu instinto das seguintes maneiras:

  • O idioma inglês flui da esquerda para a direita.
  • A navegação do navegador funciona Voltar (esquerda) e Avançar (Direita). enter image description here
  • Jogos 2D antigos, como Dangerous Dave, movem o personagem para a direita, quando estão progredindo.

enter image description here

  • Os números na linha numérica aumentam para a direita e diminuem para a esquerda.

  • Os pesos atômicos na tabela periódica aumentam para a direita.

  • O relógio bate à direita.

  • O calendário aumenta as datas para a direita.

Acho que a plataforma Windows criou um antipadrão com OK/Cancel, que agora é tão difundido que seus estudos de validação de usabilidade. Mas se você considerar os fatores acima, acredito que manter o botão principal à direita é justificado e uma posição defensável.

EDIT: Um fator adicional a considerar é a consistência. Se você espera botões adicionais em suas caixas de diálogo, o botão principal no Edge direito ajudará a manter a consistência com o posicionamento. Um exemplo visual deixaria isso claro:

enter image description here

39
Adnan Khan

Para usuários cujo idioma é lido da esquerda para a direita, sugiro colocar o botão OK à esquerda, pois esses usuários atribuem maior importância à primeira coisa que veem.

Isso permitiria que esse subconjunto de usuários concluísse sua tarefa o mais rápido possível.

17
Ryan Shripat

IMHO, não importa muito onde você colocará o botão "OK": para a esquerda ou para a direita. Não importa que tipo de usuário visite seu site (com idiomas hebraico ou árabe). Não importa que tipo de software eles usam. As estatísticas nos dizem que 55% dos usuários querem ver o botão "OK" da direita, mas se o colocarmos à direita, os outros 45% de usuários ficarão insatisfeitos.

A melhor solução é enfatizar o botão "OK" (torná-lo mais proeminente que "Cancelar") e todos os usuários indicarão o botão "OK" facilmente como o botão mais importante e principal.

O Google e outras empresas usam essa abordagem em seus softwares.

enter image description here

16
webvitaly

Luke Wroblewski escreveu um livro sobre formulários da web (Design de formulários da web: preenchendo os espaços em branco) e também abordou alguns princípios como: "Ações primárias e secundárias" (http: // www.lukew.com/resources/articles/psactions.asp ), "Rótulos de formulário alinhados superior, direito ou esquerdo" (http: // www.lukew.com/ff/entry.asp?504) ou "caminho para a conclusão" etc. etc. (você também pode ler http : //www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php )

Portanto, na IMO, dependendo de qual posicionamento do rótulo você tem (preferencialmente na vertical) e da esquerda para a direita + regras de cima para baixo, para ter um bom caminho para a conclusão, você deve colocar a ação principal primeiro (OK) e as secundárias (+ + Cancelar)

EDIT: Colocação de etiquetas em formulários, por Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

15
Ecaterina Moraru

Acho que todo mundo deu um bom ponto, mas há mais um ponto-chave a ser mencionado aqui.

Botões como Ok/Enviar/Salvar etc. são chamados de botões de ação positiva. Da mesma forma, botões como Cancelar/Redefinir etc. são chamados de botões de ação negativa.

Agora, para responder à consulta, a maioria deles tem alguns bons pontos, mas aqui está outra percepção de que o Teste do Usuário de um aplicativo geralmente decide a maioria dos problemas. Afinal, qualquer aplicativo criado é apenas para usuários.

Houve alguns testes de momento ocular e testes térmicos nos usuários, que ainda estão sendo realizados, dependendo da disponibilidade do laboratório. O melhor cenário é que a maioria dos usuários começa a olhar para o aplicativo da Web ou qualquer outro aplicativo da esquerda para a direita e do canto superior e começa a rolar para a parte inferior, escolhendo os principais pontos ativos e geralmente termina na parte inferior esquerda. sempre bom manter o botão de ação positivo à esquerda e os botões de ação negativa à direita.

Além disso, não negando o fato de que essas pesquisas são baseadas em poucos usuários, não é necessário que isso seja sempre bom, mas na maioria das vezes será.

Há mais um ponto-chave aqui é que deve haver mais espaço entre os botões de ação positivo e negativo, para que os usuários levem um pouco mais de tempo para acessar os botões negativos e, portanto, darão a eles tempo suficiente para pensar e reagir.

Tentei explicar que alguns pontos são baseados na minha experiência e em trabalhos de pesquisa.

Comente, para que eu também possa aprender mais.

Atenciosamente Deepak Bajaj

9
Deepak Bajaj

Muitos aplicativos estão mudando para usar estilos diferentes para os botões OK x Cancelar. Uma interface comum é ter o botão OK, mas um botão tradicional, enquanto o botão Cancelar é um botão de link. Isso fornece uma distinção visual muito clara entre os dois e, embora leve o usuário a clicar em OK, a distinção visual acaba destacando a diferença e ajuda o usuário a escolher o que realmente deseja.

Eu já vi isso em aplicativos da Web e de desktop.

7
Sam

Apenas para esclarecer o raciocínio:

É considerado "mais correto" colocar o botão principal (OK) no canto exato da caixa de diálogo, uma vez que é mais fácil de acessar (houve várias perguntas/discussões anteriores sobre isso).

No entanto, isso também depende do que os usuários estão acostumados - se você estiver criando um site ou aplicativo para usuários do Windows, é melhor seguir os padrões do Windows.

Verifique se "Enter" no teclado está associado corretamente ao OK - muitas pessoas também o usarão.

5
Dan Barak

Uau! Tantas respostas discutindo esquerda ou direita.

Eu mesmo realizei testes e os achei estatisticamente inconclusivos.

A melhor resposta que encontrei foi que realmente não importa em que ordem eles são executados, desde que a ação principal esteja claramente marcada - sempre uso um botão colorido para [Do it]/go/submit/etc e apenas um texto menor para [Não fazer]/cancelar/limpar/etc.

Muito parecido com os botões 'Poste sua resposta' e 'descartar' na parte inferior de um formulário de resposta aqui no UX StackExchange!

4
Andrew Martin

Você pode encontrar uma opinião interessante aqui ; Anthony T. sugere que colocar o botão "OK" à direita de "Cancelar" é melhor:

Com o botão "Ok" à direita, as fixações visuais são menores e fluem em uma direção [...]

Compare isso com a ação principal colocada à direita da caixa de diálogo e a ação secundária colocada à esquerda. Os usuários começam com os olhos na ação secundária e movem os olhos para a ação primária para clicar no botão. Isso cria um total de duas fixações visuais em uma direção, oferecendo aos usuários um fluxo visual mais rápido. Os usuários fixam em cada botão apenas uma vez e terminam no botão de ação principal. Colocar a ação principal para a esquerda pode facilitar o acesso dos usuários, mas quando você analisa a velocidade em termos de processos mentais e fixações visuais, colocar a ação principal à direita de uma caixa de diálogo é realmente mais rápido.

4
Claudiu Constantin

Para aplicativos da Web ASP.NET, depois de tomar muita aspirina para lidar com problemas de botão padrão (o que será acionado quando a tecla Enter for pressionada), basta colocar meu botão padrão à esquerda para que ele seja o primeiro na marcação.

Navegadores diferentes manipularão vários botões de envio de maneira diferente quando a tecla Enter for pressionada (especialmente quando o cursor estiver dentro de uma caixa de texto no momento em que a tecla Enter for pressionada). Alguns navegadores apenas usam o primeiro botão da marcação para enviar o formulário, o que pode não ser o que você deseja (especialmente se você precisar fazer algo no servidor posteriormente).

Se você não estiver usando javascript personalizado para lidar com cenários de botões padrão e estiver contando com o comportamento padrão do navegador da Web, provavelmente deverá colocar o botão padrão à esquerda.

4
Adam Toth

Se possível, sugiro omitir completamente o botão Cancelar, resolvendo assim seu dilema. - Às vezes é desnecessário e geralmente é ativado por engano.

De http://www.nngroup.com/articles/reset-and-cancel-buttons/ :

A maioria dos formulários da Web teria melhor usabilidade se o botão Redefinir fosse removido. Os botões Cancelar também costumam ter pouco valor na Web.

Ofereça um botão Cancelar quando os usuários tiverem medo de se comprometerem com algo que desejam evitar. Ter uma maneira explícita de cancelar fornece uma sensação extra de segurança que não é garantida simplesmente saindo.

O cancelamento é útil principalmente para diálogos com várias etapas em que o usuário passou uma ou mais páginas com ações. No momento, pressionar o botão Voltar não desfaz essas ações e seria melhor se o usuário clicasse em Cancelar.

4
Adam George

Por fim (especialmente depois de ler todas as respostas acima), vejo essa discussão resumindo-se à convenção de plataforma versus usabilidade 'objetiva'. O que quero dizer com "objetivo" é como algo utilizável seria para usuários que não estão familiarizados com nenhuma convenção de SO. Mais especificamente:

OK à direita
Esse padrão ganha força no argumento de usabilidade objetivo SE os usuários não estiverem condicionados à convenção menos utilizável do Windows (consulte artigo ). Como o artigo discute, ter o OK à direita se alinha à nossa convenção de leitura da esquerda para a direita, fluxo de tarefas mais eficiente, é um alvo de esquina melhor, também o fato de pensarmos nas linhas de tempo como executadas da esquerda para a direita (portanto, um 'voltar'/'cancelar' à direita faz sentido, visto que é um padrão de volta no tempo).

OK à esquerda
Convenção do Windows

É uma realidade infeliz, mas padrões mal projetados (como OK à esquerda) podem se tornar uma convenção e os usuários esperam por eles. Tentar fazer outra coisa, mesmo que objetivamente, seja um padrão mais utilizável, resultará em pouca usabilidade. Um exemplo clássico é o sistema de medição métrico versus imperial - o sistema métrico tem tudo a seu favor em termos de usabilidade, facilidade de conversão de unidades, etc; mas se você forçar os americanos de cidades pequenas a pensar em metros e centímetros quando estão acostumados a polegadas/pés, terá uma usabilidade ruim e usuários muito frustrados. Acho que a lição é trabalhar muito para garantir que nunca introduzamos más convenções!

Pessoalmente, ao projetar para a web, escolho colocar o botão OK à esquerda, também insisto em indicar minha altura em centímetros e meu peso em quilogramas, mesmo quando falo com pessoas de mente imperial. É realmente uma guerra de desgaste, mas lentamente o sistema imperial desaparecerá, e esperançosamente a convenção do Windows 'OK à esquerda' também :)

3
M.A.X

Eu iria com "Ok" à direita. Por causa da direção de leitura ocidental, que vai da esquerda para a direita. E "Cancelar" não o levaria adiante, mas "Ok" o levaria.

Mas uma abordagem totalmente diferente. Não use "Ok" e escreva nos botões o que eles fazem. Por exemplo, "Salvar" ou "Não salvar" não exige que o usuário leia o texto da descrição. Economiza tempo e evita erros de entrada.

2
erikrojo

Lol Não posso deixar de rir de muitas dessas respostas. Parece um caso de não ver a floresta para as árvores. Como todo problema de UX, fundamentalmente, depende de como o formulário é organizado. Por exemplo, Etiquetas superior, campos abaixo ou etiquetas esquerda, ao lado. Veja a página inteira e como os olhos de um usuário fluem pelo formulário. Existe uma linha de visão clara para o botão final 'Enviar'?

Conforme declarado em um post anterior, Luke Wroblewski livro sobre formulários da Web Design de formulários da Web: Preenchendo os espaços em branco contém alguns dos melhores conselhos sobre criação de formulários da Web, bem como um grande paradigma de formulários da perspectiva do usuário - Os formulários são um meio para atingir um objetivo e são tolerados por causa do resultado final pretendido (ou seja, comprar algo, criar uma conta para ter acesso a algum lugar etc.). Teste do usuário, teste AB sim, claro, se você puder. O objetivo final é que quanto mais fácil for o seu formulário, melhor.

2
mike

Eu realmente gosto de alguns sites onde não há botão (visualmente) por ação negativa, apenas um link. Dessa forma, não preciso perder tempo olhando os botões, sei mais que o botão funciona. E se eu sei que não quero fazer o que as páginas querem, levo algum tempo para ver como seria melhor continuar (procure o botão Fechar, o botão Cancelar)

então, em vez de:

[NOOOOO!] [CLIQUE-ME! CLIQUE-ME!]

haveria:

Não, obrigada! [Sim, por favor!]

Dessa forma, não é realmente importante onde você posiciona o botão, existe apenas um visualmente e, portanto, fácil de localizar.

1
fallenboy

Nos meus aplicativos, estou usando cores visuais para destacar a finalidade do botão de ação. Então não importa se é esquerda ou direita. Pessoalmente, prefiro ter o botão "ok" à direita (porque sou destro e/ou usuário osx - e na verdade esse é o link ..)

  • grande botão verde para validação
  • grande botão vermelho para exclusão
  • botão cinza (grande ou não) para cancelar
1
Marc D

Para mim, essa seria a ordem lógica:

<LeftRight>

<PreviousNext>

<BackForward>

<BackDone

Do nothingDo it

CancelOK

Exceto OK deve ser substituído pela ação real, como SaveDeleteAcceptExit ou Send.

Quando eu encontro pessoas discutindo por colocar OK à esquerda, eu sempre peço para eles colocarem Left vs RightPrevious vs NextBack vs Forward, e deixe-os discutir por que os colocam nessa ordem, antes de deixá-los argumentar por que OK deve estar à esquerda.

1
Ole Tange

Em ordem de prioridade, use a primeira solução disponível:

  • diretrizes da plataforma
  • começo ao fim (onde o início para os idiomas ocidentais geralmente fica à esquerda, no entanto, pode ser diferente, por exemplo, o árabe começa à direita e termina à esquerda)
  • da maneira que o usuário mais espera

No entanto, no caso de leitores de tela e ferramentas de acessibilidade similares, ter a ação principal no início (deixada nas culturas ocidentais) pode economizar muito tempo a esses usuários com necessidades especiais!

1
straya

É claro que existem muitos argumentos a favor e contra os dois lados.

Eu colocaria desta maneira embora. "Você acredita que o posicionamento negativo-positivo é o melhor? Não ou Sim?"

O ponto é que "Sim ou Não" flui melhor quando falado, o que provavelmente explica por que a ordem dos botões positivo-negativo foi escolhida pela Microsoft.

Por outro lado, o fluxo positivo-negativo é frequentemente usado na retórica e no debate, a fim de adicionar peso ao argumento positivo e mantê-lo fresco na mente de uma pessoa. "Você quer ver seus filhos sofrerem nas mãos do partido adversário? Ou você quer votar no nosso partido e garantir seu futuro?" E assim por diante.

0
Seth Jeffery

Supondo que seja necessário tomar uma decisão sobre se a ação positiva deve estar disponível à esquerda ou à direita e desconsiderando o viés do uso de certos sistemas operacionais ou aparelhos físicos (livros), construções abstratas (fluxo do formulário do assistente) etc., a ciência do comportamento parece sugerir que a opção mais à esquerda estatisticamente é escolhida com mais frequência como primeira opção.

Isso implica que a colocação de uma ação positiva (OK ou etiqueta de ação explícita) à esquerda deve ser preferida se nenhum outro fator for considerado.

Fonte: São apenas os seres humanos que contam da esquerda para a direita?

0
too