Nielsen and Molish’s 10 UI Guidelines in Bullet Points

Visibility of System Status

  • Provide informative feedback for all actions.
    • Clear language.
    • No tech-speak (proportional to the problem).
    • No ambiguity.
  • Keep the user informed about what is going on.
  • Indicate progress in task performance.

Match Between System and The Real World

  • Mirror the language and concepts user would find in the real world based on who their target users are.
  • Contain familiar terms and natural language.
  • Mataphor from the real world.
  • Use user’s background knowledge.
    • Apply rules learned by users in the real world.
      • Meet expectations.
  • Follow real-world conventions.

User Control and Freedom

  • Undo and redo should be supported
    • Backspace to return is a pattern
  • Forgiveness: make actions reversible.
  • Ability to cancel or re-order tasks.
  • Allow the user to initiate and control tasks.

Consistency and Standards

  • Same things look the same.
    • Reduce the number of representations.
  • Conform to plataform interface conventions or popular conventions.
    • Reduce learning.
    • Reduce investigations of the digital space
    • Eliminate confusions.
    • Users apply rules learned in others products.
      • Meeting expectations.
  • Show similar info at the same place on each screen.
  • Icon that represents one category or concept should not represent a different concept too.
  • Apply UI element as they are originally.

Error Prevention

  • Potential erros are kept to a minimum
  • Prevent erros from occuring in the first place
  • Understand the user’s language
  • Indentity cues between actions and user’s goal.
  • Diferenciate primary to secondary actions (e.g. by size)
  • Lock buttons that should not be used.
  • Give suggestions to the users (e.g. autocomplete inputs)

Recognition Rather than Recall

  • Minimize the cognitive load
  • We are only caple of maintaining around five items in our short-term memory at one time.
  • Recognition involves perceiving cues that help us reach into out vast memory.
    • reduce the use of the short-term memory.
  • See-and-point instead  of remember-and-type.
  • Make the repertair of available actions salient
  • Provide a loist of coices and piciking from lists.
  • Visible objects, visible results.

Flexibility and Efficiency of Use

  • Less interaction that allow faster navigation.
  • Provide a great way to work for novices and shortcuts for advanced users.
    • Satisfy users at all levels of expertise.
    • Use shortcuts: Accelerator to speed up dialogue.
  • UI should be customizable by the users to suit their needs.
  • Physical interactions with system feels natural.

Aesthetic and Minimalist Design

  • The display must be reduced to only the necessary components for the current task.
  • Clearly visible.
  • Users can drilldown into more specific contents from a small number of options.
  • Keep screen clutter to a minimum.
  • Only give your user what they really need at that point.
  • More needed than ever
  • Try not to add more fuel to the fire than absolute necessary.
  • Try not to drown the users in information.
    • Information overload or infobesity ir infoxication

Help User Recognize, Diagnose and Recover from Errors

  • Complementation to the user needs of be informed of system status.
  • Assume the users are unable to understand technical terminology.

Help and Documentation

  • Depending on the type of solution, documentation may be necessary.
  • Use bullet points
  • Step-by-step instructions
  • Organize in categories
  • In small pockets, to limit the amount of info presented in one go.

Reference

Interaction Design Foundation

by Anastassia Elias / from beautifuldecay.com

 

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s