Skip to content

Instantly share code, notes, and snippets.

@hektech
Created March 16, 2015 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hektech/03dd87b3b1d90751841a to your computer and use it in GitHub Desktop.
Save hektech/03dd87b3b1d90751841a to your computer and use it in GitHub Desktop.
ESG - Design Principles

1. Design Principles

1.1 Be Simple

Simplicity of tasks, white spaces, and an intuitive navigation are the perfect combination that users expect from a web application. Reducing extra effort avoids frustration and early abandonment.

Don´t

UIs become cluttered and complex when too much data is displayed; it can produce confusion and can make the application more difficult to learn.

principles 03

Do

Design Patterns such as Progressive and Staged Disclosure can be applied. Focus is always on reducing user effort.

principles 04

1.2 Be Concise

Users need their tasks to be done quickly and effectively. Give brief and precise instructions so users do not waste time completing unnecessary information or thinking too much about how to proceed.

Don´t

The user is discouraged when seeing that too much information must be completed.

principles 01

Do

Account Registration Design Pattern can be applied. The less information required, the more satisfying the action will be.

principles 02

1.3 Be Consistent

Users feel lost when everything changes as they move around a web application. Visual consistency makes UIs easier to use, gives an overall impression of professionalism and reliability, and reduces the slope of the UI learning curve, which is one of the main “enemies” of the user experience.

Don´t

Changes between screens of the same application are evidence of missing guidelines.

principles 05

Do

Conventions are made to be followed. Preset guidelines ensure uniformity. The usability heuristic “consistency and standards” explains this.

principles 06

1.4 Give Continual Feedback

Feedback is an essential property of a usable product, and necessary to avoid confused or frustrated users. It is critical for the user to naturally flow through the UI without wondering what is happening. Notify the user that all actions he or she is performing are being processed, made, or verified at all times (as necessary).

Don´t

Users need to have control over the application. If it doesn´t respond as expected, they get impatient quickly and can end up frustrated.

principles 07

Do

A spinner can be an effective solution to avoid dissatisfaction among users. Suggestion: use visibility of system status (usability heuristic) to prevent these kinds of unresponsiveness issues.

principles 08

1.5 Being friendly always works

Language is the most important way to communicate between people, but communication channels and codes vary a lot when a system is involved. Show that systems are developed by people; avoid technical words or codes, and be gentle in the way things are stated.

Don´t

People who are not involved in the world of coding do not understand technical language commonly used by developers.

principles 09

Do

Using simple, understandable, and kind language will be welcomed and appreciated by the user. Take into account the usability heuristic calling for a match between the system and the real world.

principles 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment