Design Principles

 

“Products should be like good waiters: unassuming and unobtrusive, but always anticipating needs and learning preferences.”

~ Kim Goodman – Designing For a digital age

Design principles are a tool to help you clarify what personality is right for your product, and then to ensure as you progress that you are designing an experience with this personality.  Even though our Persona’s goals guided our decision when getting into the design details it we looked to design principles to ensure that best practices were being applied to our designs as we iterated.

Getting the basics right with Gestalt Principles

Basic graphic design principles were applied to the prototype from an early stage. We utilised gestalt principles to ensure that our prototype was was pleasing to use.

Proximity

Screenshot 2017-02-06 20.36.58.png

When designing the results view, it was important for user to easily distinguish that there were two columns of train times. We used proximity to visuality chunk the time cards together for their respective columns and we by combined the the column with clear labelling, the user could easily understand the the two columns meant outward and return listings.

Similarity

We applied the similarity principle by having a consistent header across the the entire user journey. In addition, we ensured that the each button and link held the same meaning across the entire journey. For instance, the reserved the green colour for primary call to actions so that it would draw the user and ensure that know what the button will do when when they see it.

Figure-Ground

Because our project dealt with a lot of different types of information throughout the user journey we applied the figure-ground principle so that our users would easily understand the areas they should focus their attention.

Focal Point

Screenshot 2017-02-05 12.15.30.png

We reserved the user of the primary and secondary colours for call to action buttons so that our users understand that the buttons would visually capture the user’s attention.

Communicating flow, hierarchy and relationships

Visual hierarchy

Good design makes it easy to find the most important information and controls by drawing attention to them and by downplaying less important items (Goodwin, K 2009). We used visual hierarchy to emphasise  important information and controls. Because there were multiple areas on each section displaying different information it was important to properly label each section and give the heading more visual prominence so that they could be easily read.

 

Repeat elements for unity

unity and flow.png
Example of repeating the breadcrumb and header for unity

 

Going beyond basic principles principles

Map visual flow to workflow

In Western cultures, the tools and information used at the beginning of the scenario belong at the top left, while those used later belong at the bottom or toward the right (Goodwin, K 2009).

  • Show flow of the final designs

Align elements for readability and simplicity

Although it’s been said that top-aligned labels tend to reduce form completion times the most because labels and input fields are in close proximity (Wroblewski, 2008), we decided to left align our form fields because 1) the shear amount of field we had on our homepage form and 2) we wanted to clearly signify that the form has three different parts.

labelling.png

From a basic usability point we looked to align elements along a grid that offers and visible set of columns and rows to guide the placement of each element (Goodwin, K. 2009).

aligning to grid.jpg
An example of how my I designed to a 12 column grid in the final iteration of the prototype

 

References

  1. Goodwin, K. (2009). Designing for the digital age: how to create human-centered products and services. Wiley.
  2. Wroblewski, L. (2008). Web form design: filling in the blanks. Brooklyn, NY: Rosenfeld Media.

 

Advertisements