user-centred design
TRANSCRIPT
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 align elements
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 apparent if the edges of surrounding elements are well defined
Example:
timeline in the Twitter app where a 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, you will follow the axis until you reach something of interest or are tired of 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’re interested in viewing pins
http://learndesignprinciples.com by Melissa Mandelbaum
2 - Simmetry
Elements are arranged in the same way on both sides of an axis
Perfect symmetry is when elements are exactly the same on both sides
The design feels armonious and it is 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
Let’s come back to Pinterest….
3 - Hierarchy
When an element appears more important in comparison to other elements in a design
Achieved by:
• Size
• Shape
• Placement
http://learndesignprinciples.com by Melissa Mandelbaum
Hierarchy by size
An element will get our attention when it is larger than other elements 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 attention when it is different than other elements 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 naturally more hierarchical than points along the line
We naturally look first at the start and stop of an axis
Example: the timeline in the Path app
http://learndesignprinciples.com by Melissa Mandelbaum
4 - Rhythm
Rhythm is the movement created by a repeated pattern of forms
Pattern: structured element which is repeated across the app
When using the app, you begin familiar with the rhythm and know exactly where to look for elements in the patterns
Example: the feed in the Airbnb app
http://learndesignprinciples.com by Melissa Mandelbaum
Example of pattern for rhythm
Example: the feed in the Airbnb app
When scanning the feed, the users already knows where the price, title, and features of an ad are placed
http://learndesignprinciples.com by Melissa Mandelbaum
Breaks
A break in a repeated pattern gets more hierarchical
Example: in the profile feed of the Twitter app, the rhythm is broken by a section with suggestions of people to follow (it gets more attention)
http://learndesignprinciples.com by Melissa Mandelbaum
Roadmap
Definition of deisgn
Design principles
User-centred design
The visual part of a design is only the tip of the iceberg
Foundation ofa successful design: a user-centred designProcess (UCD)
htt
p://
pazn
ow
.s3
.am
azo
naw
s.co
m/U
ser-
Cen
tred
-Des
ign
.pd
f
Good design?
What did we learn?
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 or document are given extensive attention at each stage of 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 world tests with actual users
UCD is a process
Analysis & Planning
Launch
htt
p://
pazn
ow
.s3
.am
azo
naw
s.co
m/U
ser-
Cen
tred
-D
esig
n.p
df
These will be the 3 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
Exercises
• Select an app from the Google Play Store and identify which design principles have been applied there
• Define the main strategic aspects of your app:– context
• physical• media• modal
– goal– prioritized tasks
• Sketch down the elevator pitch