26 November 2013

MapBox Design Principles

These are the guiding principles that the MapBox team used for the redesign of mapbox.com.

Also check out the article Redesigning mapbox.com to learn about entire redesign process and how these Design Principles fits in.

Source: Redesigning mapbox.com


The principles

  1. Interaction is the basic unit of design

    Begin the design process by identifying the user's origin point, their goal, and the steps in between. A successful design makes every step along the way clear while keeping the user focused on their goal.

  2. Transitional interfaces are easier to learn and more pleasant to use

    Take advantage of animation and conditional visibility to guide users between steps and to add rhythm and momentum to interactions.

  3. Interactions should be delightful and surprising

    Design these interactions so that they're enjoyable to perform again and again. Minimize the effort required to complete tasks, enable users to recover from mistakes, and ensure that they receive feedback after taking any action.

  4. Focus the user on one primary action at a time

    Avoid sidebars, widgets, and multi-column layouts. Rather than confronting the user with a multitude of possibilities, use visual hierarchy to help users make meaningful decisions and allow actions to unfold across multiple steps. At the same time, be sure to make it easy for the user to move efficiently between primary actions in case they need to change gears.

1. Interaction is the basic unit of design

Begin the design process by identifying the user's origin point, their goal, and the steps in between. A successful design makes every step along the way clear while keeping the user focused on their goal.

2. Transitional interfaces are easier to learn and more pleasant to use

Take advantage of animation and conditional visibility to guide users between steps and to add rhythm and momentum to interactions.

3. Interactions should be delightful and surprising

Design these interactions so that they're enjoyable to perform again and again. Minimize the effort required to complete tasks, enable users to recover from mistakes, and ensure that they receive feedback after taking any action.

4. Focus the user on one primary action at a time

Avoid sidebars, widgets, and multi-column layouts. Rather than confronting the user with a multitude of possibilities, use visual hierarchy to help users make meaningful decisions and allow actions to unfold across multiple steps. At the same time, be sure to make it easy for the user to move efficiently between primary actions in case they need to change gears.

Tags

  • Interaction Design
  • UX

Related collections

10 Usability Heuristics for User Interface Design

10 principles


Jakob Nielsen

Shneiderman's "Eight Golden Rules of Interface Design"

8 principles


Ben Shneiderman

Don Normans Principles of Design

6 principles


Don Norman

20 Guiding Principles for Experience Design

20 principles


Whitney Hess

37 Signals Principles

8 principles


37 Signals