Gran Sasso Science Institute

Ivano Malavolta

User-centred design

Roadmap

Definition of design

Design principles

User-centred design

The etymology of design goes back to the Latin

DE + SIGNAREto do something, to distinguish it with a sign, give it meaning,

designate it in relation to other things, owners, users

Based on this original meaning, you can say, design is making sense (of things)

Klaus Krippendorff, 1989

DESIGN???

DESIGN is universal

Roadmap

Definition of deisgn

Design principles

User-centred design

Design principles

There are four main design principles:

• Axis

• Simmetry

• Hierarchy

• Rhythm

http://learndesignprinciples.com by Melissa Mandelbaum

1 - Axis

An imaginary line that is used to organize a group of elements in a design

Axis is mainly used to alignelements

Users enjoy designs that are ordered because they feel more stable and comfortable

http://learndesignprinciples.com by Melissa Mandelbaum

Axis reinforcement

You can make axis more apparentif the edges of surroundingelements are well defined

Example:

timeline in the Twitter app wherea vertical axis helps define a section for avatars on the left and a section for tweet content on the right

http://learndesignprinciples.com by Melissa Mandelbaum

Infinite axis

If an end point is undefined, youwill follow the axis until you reachsomething of interest or are tiredof interacting with the axis

Example:

the main feed of the Pinterest app, it encourages you to scroll down the page for as long as you’reinterested in viewing pins

http://learndesignprinciples.com by Melissa Mandelbaum

2 - Simmetry

Elements are arranged in the sameway on both sides of an axis

Perfect symmetry is whenelements are exactly the same on both sides

The design feels armonious and itis easy to read, both top-bottom and left-right

http://learndesignprinciples.com by Melissa Mandelbaum

Simmetry example

Arrangement of music covers in the Rdio app

Elements on both sides of the screen are the same format

http://learndesignprinciples.com by Melissa Mandelbaum

3 - Hierarchy

When an element appears more important in comparison to otherelements in a design

Achieved by:

• Size

• Shape

• Placement

http://learndesignprinciples.com by Melissa Mandelbaum

Hierarchy by size

An element will get our attentionwhen it is larger than otherelements in a design

We naturally look first at the largest element in a design

Example: article list in the Pocket app

http://learndesignprinciples.com by Melissa Mandelbaum

Hierarchy by shape

An element will get our attentionwhen it is different than otherelements in a design

We naturally look first at the irregular shape in a design

Example: the profile page in the Instagram app

http://learndesignprinciples.com by Melissa Mandelbaum

Hierarchy by placement

The end of an axis is naturallymore hierarchical than pointsalong the line

We naturally look first at the start and stop of an axis

Example: the timeline in the Pathapp

http://learndesignprinciples.com by Melissa Mandelbaum

4 - Rhythm

Rhythm is the movement createdby a repeated pattern of forms

Pattern: structured element whichis repeated across the app

When using the app, you beginfamiliar with the rhythm and know exactly where to look for elements in the patterns

http://learndesignprinciples.com by Melissa Mandelbaum

Example of pattern for rhythm

Example: the feed in the Airbnbapp

When scanning the feed, the usersalready know where the price, title, and features of an ad are placed

http://learndesignprinciples.com by Melissa Mandelbaum

Breaks

A break in a repeated pattern getsmore hierarchical

Example: in the profile feed of the Twitter app, the rhythm is brokenby a section with suggestions of people to follow (it gets more attention)

http://learndesignprinciples.com by Melissa Mandelbaum

Exercises

1. Select an app from the Google Play Store and identify which design principles have been applied there

2. Define the main strategic aspects of the app:– goal

– context• physical

• media

• modal

– prioritized tasks

Roadmap

Definition of design

Design principles

User-centred design

The visual part of a design is only the tip of the iceberg

Foundation ofa successful design: user-centred designProcess (UCD)

htt

p:/

/paz

no

w.s

3.a

maz

on

aws.

com

/Use

r-C

entr

ed-D

esig

n.p

df

Good design?

User Centered-Design (UCD) is …

“a design philosophy and a process in which the needs,wants, and limitations of the end user of an interface ordocument are given extensive attention at each stageof the design process”

Definition of UCD (from Wikipedia)

UCD is a development cycle which takes into consideration what users really need and makes adjustments by exploring, testing and tuning the design until these needs are satisfied

The result of this is a high level of usability

More formally…

UCD can be applied to all design practices that have the aim to provide a good user experience

Ex.

• websites

• architecture

• magazines

• graphics

• …

UCD is Universal

Designers have to:

1. analyze and foresee how users are likely to use an interface

2. test the validity of their assumptions in real worldtests with actual users

UCD is a process

Analysis & Planning

Launch

htt

p:/

/paz

no

w.s

3.a

maz

on

aws.

com

/Use

r-C

entr

ed-

Des

ign

.pd

f

These will be the main parts of your project!

The UCD Process

Evaluation

Analysis & Planning

Concept

Design

We will cover these steps later in this course…

Implementation & Launch

Chapter 7

References