Melhores Práticas e Princípios para o projeto GUI [fechado]

StackOverflow https://stackoverflow.com/questions/90813

  •  01-07-2019
  •  | 
  •  

Pergunta

Qual é a sua melhor design de interface de usuário de fácil utilização prática ou princípio?

Por favor envie essas práticas que você encontra realmente torna as coisas realmente úteis - não importa o que - se ele funciona para os usuários, compartilhá-lo

!

Resumo / Agrupamento

Princípios

  1. KISS.
  2. Seja claro e específico no que uma opção vai conseguir: por exemplo, o uso de verbos que indicam a ação que seguirá em uma escolha (ver:. Impl 1).
  3. Usar ações padrão óbvio apropriar do que as necessidades do usuário / quer alcançar.
  4. Ajustar a aparência eo comportamento da interface do usuário para o meio ambiente / processo / público: stand-alone, web-page, análise científica portátil, flash-game, profissionais / crianças, ...
  5. Reduzir a curva de aprendizado de um novo usuário.
  6. Ao invés de desativar ou opções escondendo, considere dar uma mensagem útil onde o usuário pode ter alternativas, mas apenas quando existem essas alternativas. Se não existem alternativas, o seu melhor para desativar a opção - que visualmente, em seguida, afirma que a opção não está disponível -. Não ocultar as opções indisponíveis, e explicar em um pop-up mouse sobre por que ele está desativado
  7. Fique consistente e em conformidade com as práticas, e colocação de controles, como é implementado em aplicações de sucesso amplamente utilizados.
  8. Levar as expectativas do usuário e deixe o seu programa se comportam de acordo com essas expectativas.
  9. Vara ao vocabulário e conhecimento do usuário e não usar a terminologia programador / implementação.
  10. seguir os princípios básicos de concepção:. De contraste (obviedade), repetição (consistência), de alinhamento (aparência), e de proximidade (agrupamento)

Implementação

  1. (ver a resposta por paiNie) "Tente usar verbos em suas caixas de diálogo."
  2. Permitir / implementar undo e redo.

As referências

  1. Windows Vista User Experience Guidelines [ http://msdn.microsoft. com / en-us / library / aa511258.aspx]
  2. sites holandeses - diretrizes "Drempelvrij" [ http://www.drempelvrij.nl/richtlijnen]
  3. Web Content Accessibility Guidelines (WCAG 1.0) [ http://www.w3.org/ TR / WCAG10 /]
  4. Consistência [ http://www.amazon.com/Design-Everyday-Things -Donald-Norman / dp / 0385267746]
  5. Não me faça pensar [ http://www.amazon.com/ Dont-Make-Me-Pense-Usabilidade / dp / 0321344758 / ref = pdbbssr_1? ie = UTF8 & s = livros & qid = 1221726383 & sr = 8-1]
  6. Seja poderosa e simples [ http://msdn.microsoft.com /en-us/library/aa511332.aspx]
  7. leis projeto da Gestalt [ http://www.squidoo.com/gestaltlaws]
Foi útil?

Solução

Tente usar verbos em suas caixas de diálogo.

Isso significa uso

text alt

em vez de

text alt

Outras dicas

Eu testar a minha GUI contra minha avó.

Siga princípios básicos de design

  • C Ontrast - fazer as coisas que são diferentes olhar diferente
  • R epetition - Repita o mesmo estilo em uma tela e para outras telas
  • A lignment - elementos da tela Linha acima! Sim, que inclui textos, imagens, controles e etiquetas.
  • P roximity - Grupo relacionado elementos juntos. Um conjunto de campos de entrada para inserir um endereço devem ser agrupadas e ser distinto do grupo de campos de entrada para inserir informações de cartão de crédito. Isso é básico Gestalt design Leis .

Nunca perguntar "Você tem certeza?". Apenas permita ilimitada, undo confiável / redo.

Tente pensar sobre o que o usuário quer alcançar, em vez de quais são os requisitos.

O usuário vai entrar no seu sistema e usá-lo para alcançar um objetivo. Quando você abrir calc que você precisa para fazer um simples cálculo rápido de 90% do tempo é por isso que por padrão é configurado para o modo simples.

Portanto, não pensar sobre o que o aplicativo deve fazer, mas pensa sobre o usuário que será fazê-lo, provavelmente entediado, e tentar projetar com base no que as suas intenções são, tente fazer sua vida mais fácil.

Se você está fazendo nada para a web, ou qualquer aplicativo de software de frente para esse assunto, você realmente deve a si mesmo para ler ...

Não me faça pensar - Steve Krug

Breadcrumbs em webapps:
Diga -> A -> Usuário -> Onde -> Ela -> está no sistema

Isso é muito difícil de fazer em sistemas "dinâmicos" com vários caminhos para os mesmos dados, mas que muitas vezes ajuda a navegar pelo sistema.

Eu tento adaptar ao ambiente.

Ao desenvolver para um aplicativo do Windows, eu uso as Diretrizes de experiência do usuário Windows Vista mas quando eu estou desenvolvendo uma aplicação web que eu uso as diretrizes apropriadas, porque eu desenvolver sites holandeses eu uso o diretrizes "Drempelvrij" que se baseiam na web Content Accessibility Guidelines (WCAG 1.0) pelo World Wide web Consortium (W3C).

A razão de eu fazer isso é reduzir a curva de aprendizado de um novo usuário.

Eu recomendaria para obter uma boa compreensão sólida do projeto GUI através da leitura do livro O projeto de Everyday Things . Embora a impressão principal é um comentário de Joel Spolsky : Quando o comportamento dos difere de aplicativos para o que o usuário espera que aconteça, então você tem um problema com sua interface gráfica do usuário.

O melhor exemplo é, quando swaps alguém ao redor do OK e Cancelar botão em alguns sites da web. O usuário espera que o botão OK para estar à esquerda, e o botão Cancelar para ser à direita. Assim, em breve, quando a aplicação de comportamento difere do que os espera usuário o que acontecer, então você tem um problema de design de interface de usuário.

Embora, o melhor conselho, em não importa o desenho ou padrão de design que você segue, é manter o projeto e convenções consistente em toda a aplicação.

Evite pedindo ao usuário para fazer escolhas sempre que você pode (ou seja, não criam uma bifurcação com uma janela de configuração!)

Para cada opção e cada caixa de mensagem, pergunte-se: pode I vez chegar a algum comportamento padrão razoável de que

  • faz sentido?
  • não fica no caminho do usuário?
  • é fácil o suficiente para saber que custa pouco para o usuário que impor esse sobre ele?

Eu posso usar meu computador de mão Palm como um exemplo: as definições são realmente minimalista, e estou muito feliz com isso. As aplicações básicas são bem desenhados suficiente para que eu pode simplesmente usá-los sem sentir a necessidade de ajustes. Ok, há algumas coisas que não posso fazer, e na verdade eu meio que tive que me adaptar à ferramenta (em vez do contrário), mas, no final, isso realmente faz minha vida mais fácil.

Este site é um outro exemplo:. Você pode qualquer coisa não configure, e ainda acho que é realmente agradável de usar

padrões razoáveis ??pode ser difícil de descobrir, e testes de usabilidade simples podem fornecer uma série de pistas para ajudá-lo com isso.

Mostrar a interface para uma amostra de usuários. Peça-lhes para realizar uma tarefa típica. Preste atenção para os seus erros. Ouvir seus comentários. Fazer alterações e repetição.

O Projeto de Everyday Things - Donald Norman

Um cânone da tradição de design e a base de muitos cursos de IHC em universidades ao redor do mundo. Você não vai projetar uma grande GUI em cinco minutos com alguns comentários de um fórum na web, mas alguns princípios irá obter o seu pensamento apontou o caminho certo.

-

MC

Ao construir mensagens de erro tornar a mensagem de erro ser as respostas a estas 3 perguntas (nessa ordem):

  1. O que aconteceu?

  2. Por que isso aconteceu?

  3. O que pode ser feito sobre isso?

Isto é de "Human Interface Guidelines: A Apple Desktop Interface"(1987, ISBN 0-201-17753-6), mas pode ser utilizada para qualquer lugar mensagem de erro. Há um atualizados versão para Mac OS X. A página Microsoft interface do usuário Mensagens diz a mesma coisa:" ... no caso de uma mensagem de erro, você deve incluir o problema, a causa e a ação do usuário para corrigir o problema. "

Também incluir qualquer informação que é conhecida pelo programa, não apenas alguma corda fixa. Por exemplo. para o "Por que isso aconteceu" parte do uso mensagem de erro "arquivo espectro Raw L: \ refDataForMascotParser \ TripleEncoding \ Q1LCMS190203_01Doub não leArg.wiff não existe "em vez de apenas" File faz não existe".

Contraste isso com a mensagem de erro infame: "Um erro happend "..

(Stolen de Joel: o))

Do opções não disable / remove -. Sim dar uma mensagem útil quando o usuário clique / selecioná-lo

Como meu professor de estrutura de dados hoje pontas: Dê instruções sobre como o programa de seus trabalhos para o usuário médio. Nós programadores muitas vezes acho que estamos bastante lógico com os nossos programas, mas o usuário médio provavelmente não saberá o que fazer.

  1. Use discreta / simples recursos para criar transições suaves de uma seção a outra animado. Isso ajuda o usuário a criar um mapa mental de navegação / estrutura.

  2. Use curto (uma palavra, se possível) títulos sobre os botões que descrevem claramente a essência da ação.

  3. Use zoom semântico sempre que possível (um bom exemplo é a forma como zooming obras no Google / Bing Maps, onde mais informações é visível quando você se concentrar em uma área).

  4. Criar pelo menos duas maneiras de navegar: Vertical e horizontal. Vertical quando você navegar entre as diferentes seções e horizontal quando você navegar dentro do conteúdo da seção ou subseção.

  5. Mantenha sempre as opções principais nós de sua estrutura visível (onde o tamanho da tela e o tipo de dispositivo permite que ele).

  6. Quando você ir fundo na estrutura sempre manter uma dica visível (ou seja, como na forma de um caminho), indicando onde você está.

  7. Ocultar elementos quando você deseja que o usuário se concentrar em dados (como ler um artigo ou visualizar um projeto). -. No entanto cuidado com o ponto # 5 e # 4

ser poderosa e simples

Oh, e contratar um designer / aprender habilidades de design. :)

Com GUIs, os padrões são do tipo específico da plataforma. Por exemplo. Ao desenvolver GUI em Eclipse neste link fornece orientação decente.

Eu li a maioria dos acima e uma coisa que eu não estou vendo mencionado:

Se os usuários são destinadas a usar a interface ONCE, mostrando apenas o que eles precisam para uso, se possível, é grande.

Se a interface do usuário vai ser usado repetidamente pelo mesmo usuário, mas talvez não muito frequentemente, desabilitando controles é melhor do que escondê-los: o usuário interface de mudança e características ocultas não ser óbvia (ou lembrado) por um usuário ocasional é frustrante para o usuário.

Se a interface do usuário vai ser usado muito regularmente pelo mesmo usuário (e não há um monte de volume de negócios no trabalho ou seja, não um monte de novos usuários que vêm em linha o tempo todo) desactivar controlos é absolutamente útil e o usuário vai se acostumar com as razões por que as coisas acontecem, mas impedindo-os de usar controles acidentalmente em contextos inadequados apreciado e erros previne.

Apenas a minha opinião, mas tudo vai voltar para entender seu perfil de usuário, não apenas o que uma única sessão de usuário pode acarretar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top