Regras de UX

• A tela deve ser facilmente encontrada pelo usuário.
• Se a tela deve ser chamada a partir de um menu, ela deve estar usando os critérios lógicos de hierarquia dos menus
• O nome do item do menu e da tela deve ser consistente com o que ela representa
• Se a tela for acessada através de uma guia de uma outra interface, seu nome deve ser consistente com o que ele representa
• Neste caso, se a entidade é um "detail" de um "master", então o título na guia deve estar no plural.
• Se a tela for acessada através de uma ação (botão), então o nome do botão deve estar adequado.
• A partir da tela analisada, existe uma indicação clara do seu objetivo e quais ações estão disponíveis para o usuário?
• Os termos e expressões apresentados são apropriados, consistentes, e familiares para o usuário?
• As informações apresentadas estão organizadas de forma natural e lógica?
• A tela ajuda o usuário na tomada de decisão e como executar a sua atividade?
• A tela previne o usuário de cometer erros?
• Existem diálogos de confirmação para ações que não podem ser desfeitas?
• Existem recursos que impeçam o usuário executar o processo de forma errada?
• A tela ajuda ao usuário a preencher os dados corretamente? Os dados podem ser automaticamente interpretados e ajustados aos formatos exigidos?
• Ao executar cada uma das ações disponíveis, o feedback produzido é claro e facilmente identificado pelo usuário?
• O usuário consegue entender o que o sistema fez ou está fazendo?
• Durante a execução de uma ação "demorada" (mais do que 2 segundos), o usuário fica informado do que está acontecendo?
• No caso da ação encontrar algum erro, as mensagens apresentadas são suficientemente claras? Existe uma indicação de como corrigir?
• Existem atalhos para acelerar a execução da tarefa por usuários experientes?
• A interface facilita a execução da tarefa para usuários novatos?
• As informações mais importantes tem uma visibilidade promovida?
• Existem informações menos importantes tirando o foco das informações realmente importantes?
• Existe algum tipo de ajuda e indicação de como se obter ajuda?
• A interface é consistente com o resto do sistema?
• Os casos de uso mais comuns são executados com o menor número de interações possível? Existem interações que poderiam ser omitidas?
• As ações tem um tempo de resposta compatível com a operação ? (ações frequentes devem levar no máximo 1 segundo, ações comuns devem demorar no máximo 4 segundos)
• A UI é agradável para o usuário? (máximo 7 cores, máximo 4 tamanhos de fonte, máximo 3 tipos de fonte)
• Existem mecanismos de segurança que protegem informações pessoais ou privadas?
• O escopo das ações e interações é claro e intuitivo? (ações de um campo, ações de um registro x ações de formulário x ações de tela)
• Os menus estão organizados de uma forma coerente com as atividades exercidas? Existe um número exagerado de níveis (mais de 3) ?
• O cursor é automaticamente posicionado no campo mais utilizado?

O que é uma interface "fácil de usar"?

• Deve ser simples:
• Opções de ação claras e visíveis
• Indicação clara do que a interface faz
• Conter somente as informações necessárias para executar a tarefa
• Informações consistentes e com conceito fácil de entender (nomes de labels adequados)
• Respostas claras para as ações dos usuários
• Deve ser fácil de encontrar

Best Practices: Label Alignment

• For reduced completion times & familiar data input: use top aligned labels.
• When vertical screen space is a constraint: use right aligned labels.
• For unfamiliar, or advanced data entry: use left aligned labels.

Best Practices: Required and Optional Fields

• Try to avoid optional fields.
• If most fields are required: indicate optional fields.
• If most fields are optional: indicate required fields.
• Text is best, but * often works for required fields.
• Associate indicators with labels.

Best Practices: Field Lengths

• When possible, use field length as an affordance.
• Otherwise consider a consistent length that provides enough room for inputs.

Best Practices: Content Grouping

• Use relevant content groupings to organize forms.
• Use the minimum amount of visual elements necessary to communicate useful relationships.

Best Practices: Form Actions

• Not all form actions are equal (Reset, Cancel, & Go Back are secondary actions: rarely need to be used (if at all), Save, Continue, & Submit are primary actions: directly responsible for form completion).
• The visual presentation of actions should match their importance.
• Avoid secondary actions if possible. Otherwise, ensure a clear visual distinction between primary & secondary actions.
• Align primary actions with input fields for a clear path to completion.

Best Practices: Help & Tips

• Help & Tips are useful when asking for unfamiliar data, where users may question why data is being requested, where there are recommended ways of providing data or if certain data requests are optional.
• However, Help & Tips can quickly overwhelm a form if overused. In these cases, you may want to consider a dynamic solution (Automatic inline exposure, user activated inline exposure, user activated section exposure).

Best Practices: Path to Form Completion

• Remove all unnecessary data requests.
• Enable smart defaults.
• Employ flexible data entry.
• Illuminate a clear path to completion.
• For long forms, show progress & save.
• Remember to account for tabbing behavior.
• Use the tabindex attribute to control tabbing order.
• Consider tabbing expectations when laying out form (e.g. multi-column forms vs single-column form behavior).
• Map progressive disclosure to prioritized user needs (e.g. don't show all paths to c ompletion at once if not all are applicable for certain options chosen).
• Maintain a consistent approach.

Best Practices: User Feedback

• Use inline validation for inputs that have potentially high error rates.
• Use input fields that reflect the information asked for (e.g. use a checkbox for Yes/No response, not a free-form text field).
• Communicate field limits (e.g. characters allowed, field length).
• Clearly communicate an error has occurred: top placement, visual contrast.
• Provide actionable remedies to correct errors.
• Associate responsible fields with primary error message.
• ?Double? the visual language where errors have occurred.
• Provide indication of tasks in progress.
• Disable ?submit? button after user clicks it to avoid duplicate submissions.

Best Practices: Data Submission

• Clearly communicate a data submission has been successful.
• Provide feedback in context of data submitted.