Definition of design Design principles User-centred design This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015. http://www.ivanomalavolta.com

1. Gran Sasso Science Institute
Ivano Malavolta
User-centred design

2. Roadmap
Definition of design
Design principles
User-centred design

3. The etymology of design goes back to the Latin
DE + SIGNARE
to 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???

4. DESIGN is universal

5. Roadmap
Definition of deisgn
Design principles
User-centred design

6. Design principles
There are four main design principles:
• Axis
• Simmetry
• Hierarchy
• Rhythm
http://learndesignprinciples.com by Melissa Mandelbaum

7. 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

8. 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

9. 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

10. 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

11. 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….

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. Roadmap
Definition of deisgn
Design principles
User-centred design

20. The visual part of a design is
only the tip of the iceberg
Foundation of
a successful design: a user-
centred design
Process (UCD)
http://paznow.s3.amazonaws.com/User-Centred-Design.pdf
Good design?

21. What did we learn?

22. 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)

23. 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…

24. 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

25. 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

26. Analysis &
Planning
Launch
http://paznow.s3.amazonaws.com/User-Centred-
Design.pdf
These will be the
3 parts of your
project!
The UCD Process

27. Evaluation

28. Analysis & Planning

29. Concept

30. Design

31. We will cover these steps later in this course…
Implementation & Launch

32. Chapter 7
References

33. 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