Os botões OK / Cancelar devem estar alinhados à direita ou centralizados?
Onde devo colocar os botões OK/Cancelar nas minhas caixas de diálogo? Na parte inferior centralizada ou alinhada, certo? Eu já vi os dois e pessoalmente não me importo, mas quero criar uma aparência consistente em meu aplicativo. Existem diretrizes para isso ou devo fazer o que eu quiser?
Eu acho que isso se aplica a esta pergunta também e responde:
(Spoiler: Não importa .)
Em casos como esse, geralmente não importa o que você faz. Qualquer uma das opções tem bons argumentos a seu favor, e nenhuma opção provavelmente causará catástrofes de usabilidade. Alguns usuários podem economizar 0,1 segundos se você escolher a opção "certa" para determinadas circunstâncias, mas simplesmente não vale a pena realizar pesquisas suficientemente elaboradas para descobrir qual é essa escolha. Melhor gastar seus recursos de usabilidade em coisas que podem alterar seus principais indicadores de desempenho em 83% ou mais.
Mais informações: seit.com/alertbox/ok-cancel.html
Quando estritamente falando sobre alinhamento, não há resposta certa além de ser consistente.
No entanto, o alinhamento dos botões está relacionado ao posicionamento ou ordem lógica dos botões .
Existem dois paradigmas gerais que podem ser aplicados ao posicionamento dos botões **.
- Ordem de leitura - O primeiro botão encontrado na ordem de leitura é primário (Ok) e tem prioridade sobre as opções subseqüentes (Cancelar)
- Avançar/Voltar - O progresso ou a ação do avanço (Ok) está associado ao movimento para a direita, enquanto retroceder ou desfazer (Cancelar) está associado ao movimento para a esquerda.
O alinhamento dos botões pode influenciar o paradigma percebido do usuário. Como tal, algumas combinações de alinhamentos e posições podem ser conflitantes e, portanto, confusas para os usuários.
** isto assume leitura da esquerda para a direita; talvez não seja o mesmo para os idiomas de leitura da direita para a esquerda.
Faça o que se encaixa no seu aplicativo e no sistema operacional de destino.
No entanto, como você ressalta, ser consistente em seu aplicativo é provavelmente mais importante.
Eu acho que é melhor (e mais genérico) tê-los alinhados corretamente.
Eles estão sempre à direita e o usuário espera que eles estejam à direita. Espaço suficiente e dê estilos diferentes para destacar a ação principal.
Prefiro posicionar a ação mais provável (OK neste caso) à direita e dar a ela algum tipo de cor para facilitar a localização e a ação menos provável (Cancelar neste caso) à esquerda colorida em cinza ou uma cor ao longo das linhas do plano de fundo do formulário.
Eu acho que é um design ruim colocá-los um ao lado do outro. Seguindo a abordagem "não me faça pensar", quando preciso cancelar - paro e procuro o botão, mas em todos os outros momentos eu só quero agir automaticamente.
Depende da sua plataforma. O Windows coloca os botões no lado direito na ordem <OK> <Cancelar> e o Mac OSX na ordem <Cancelar> <OK>. Como outras respostas ... seja consistente. Para o posicionamento do botão, eu preferiria o lado inferior direito.
eu acho que "OK" ou seu botão de ação priorizado deve estar à esquerda devido ao seguinte motivo 1: Boa porcentagem de usuários usa teclado em formulários ou caixas de diálogo e o usuário levará menos tempo para alcançar uma ação mais favorável via tabulação, se estiver do lado esquerdo . 2: Rotação ocular ou Lei de Fitt 3: Pense nas pessoas cegas (semi-cegas) ou no uso do aplicativo quando estiver dirigindo ou acessando o aplicativo no modo de fala. 4: por último, não menos importante, use verbos como sua ação
Existem muitos tópicos disponíveis neste fórum, os pls passam por eles
Lembre-se também de que minhas sugestões não são para dispositivos pequenos.
Para um processo linear (como um instalador), alinhar os botões "Avançar" à direita (em um ambiente ocidental) pode ser mais intuitivo.
Eu diria que a ordem dos seus botões é mais importante. No Windows, o "botão OK" está sempre à esquerda e o "botão Cancelar" à direita. Como os usuários não lêem, trocar os botões OK e Cancelar (como alguns aplicativos portados do Mac fazem) confunde o usuário.
Eu acho que depende do design. Se você estiver usando um design padrão para seu formulário, eu colocaria os botões OK/Cancelar no lado direito (http://bit.ly/9IzQo0), mas se você estiver usando CSS para alterar seus formulários, eu os colocaria no centro (http://www.tumblr.com/register).
Se os campos do seu formulário estiverem alinhados à esquerda, parece fazer sentido alinhar à esquerda seus botões também. Aqui estão algumas pesquisas sobre onde os olhos dos usuários realmente vão e com que rapidez eles reagem: http://www.lukew.com/ff/entry.asp?571
Isso sugere que o alinhamento à esquerda dessas duas opções é a melhor opção de design - especialmente quando os controles do formulário acima também são alinhados à esquerda. Colocar os botões "Enviar" e "Cancelar" à esquerda significava que os olhos das pessoas tinham menos distância para viajar.
Em termos de movimentos oculares, as pessoas foram menos eficientes ao usar [uma opção com botões alinhados à direita].
Eu acho que é fácil criticar tópicos como esses caso a caso, mas acho que todos deveriam considerar um sistema inteiro de design e/ou biblioteca de padrões ao expressar suas opiniões e/ou resultados de testes. O fato é que, dependendo do conteúdo e dos testes, alguns podem mostrar uma conversão mais alta com OK à esquerda e OK à direita.
No entanto, ao considerar um sistema de design inteiro, você considera a consistência melhor do que quando funciona melhor em testes individuais de esquerda/direita? Concordo que você deseja inverter intencionalmente a ação "forward" quando houver externalidades negativas consideráveis, como "Excluir perfil de pagamento", algo que não seja reversível etc., colocando o CTA - nesses casos - à esquerda e cancele a direita.
Mas, mesmo com isso em mente, vamos imaginar que a maioria dos usuários são usuários do Windows (no momento) e você está seguindo um fluxo de check-out progressivo. Você esperaria "checkout" ou "Continuar" à direita, com as costas ou o cancelamento à esquerda. Esse também é o caso da maioria dos usos modais de cancelamento/layout Ok (exceto para o Foundation), mas isso não é bom para as pessoas que discutem testes A/B individuais ou que usam testes que resultaram em uma conversão mais alta. a esquerda, vs a direita.
Pessoalmente, na experiência de teste, os CTAs funcionam melhor à direita, mas estou sempre curioso sobre quais métricas as pessoas têm que têm um guia de estilo ou padrão de design mostrando CTAs na posição mais à esquerda.
- A ordem não importa, desde que eles estejam próximos, o que implica que são irmãos. Ou seja, os botões OK e Cancelar fazem coisas diferentes, mas afetam o mesmo elemento.
- Para um idioma da esquerda para a direita, eu colocaria os botões no centro ou nivelados à direita.
- Eu enfatizaria o botão OK com uma cor que corresponda à marca.
Geralmente uso OK à esquerda e Cancelar à direita.
O único caso em que eu pude ver a alteração desse padrão (e isso é rachar os cabelos, lembre-se) seria por ações irrevogáveis por parte do usuário (por exemplo, excluir minha conta, matar todos os seres humanos etc.) e então eu poderia deseja se desviar para forçá-los a pensar sobre a ação ou forçar a ação padrão a ser a opção mais segura.
De acordo com Diagrama de Gutenberg , a área do terminal (onde o site apresenta sua chamada final após o usuário digitalizar o conteúdo da página) fica no canto inferior direito da tela. Devido ao padrão natural de leitura dos leitores ocidentais, o fato de os botões nesse local reduzirem a fadiga do usuário, pois eles terminam a navegação nesse local. Se os botões estiverem localizados no canto inferior esquerdo, os usuários geralmente terminam na área do terminal e precisam retornar à esquerda com base no recall para executar suas ações. Esse padrão se aplica tanto a pop-ups quanto a telas de edição/adição.
Esse padrão geral também se aplica à ordem em que os botões são posicionados. Se você listar OK antes de Cancelar, o usuário quase sempre exibirá todas as suas opções antes de selecionar a que deseja. Na maioria dos casos, o usuário deseja clicar em OK em Cancelar. Isso significa que eles visualizam OK, depois Cancelar e depois voltam para OK. Muito pequeno, mas ainda adicionou trabalho.
Ótimas respostas aqui. O que ninguém mencionou é a Lei de Fitt, que governa a velocidade (e a facilidade) de clicar em alvos em uma GUI. Dá alguma ciência difícil sobre onde colocar os botões principais.
Basicamente, a Lei Fitts ( https://en.wikipedia.org/wiki/Fitts%27s_law ) afirma que o tamanho do alvo e a distância agem de maneira previsível no tempo necessário para atingir o alvo. Quando um botão está no canto de uma "caixa", o tamanho do alvo é indiscutivelmente infinito (os únicos tamanhos de alvo realmente infinitos são os cantos da tela do computador em que o cursor para por si só). Embora a velocidade nem sempre seja uma consideração primordial, o conforto (facilidade de uso) deve ser.
Demonstração interativa (sem cantos!): http://simonwallner.at/ext/fitts/