User-centred design
-
Upload
gran-sasso-science-institute -
Category
Technology
-
view
398 -
download
2
Transcript of User-centred design
![Page 1: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/1.jpg)
Gran Sasso Science Institute
Ivano Malavolta
User-centred design
![Page 2: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/2.jpg)
Roadmap
Definition of design
Design principles
User-centred design
![Page 3: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/3.jpg)
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???
![Page 4: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/4.jpg)
DESIGN is universal
![Page 5: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/5.jpg)
Roadmap
Definition of deisgn
Design principles
User-centred design
![Page 6: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/6.jpg)
Design principles
There are four main design principles:
• Axis
• Simmetry
• Hierarchy
• Rhythm
http://learndesignprinciples.com by Melissa Mandelbaum
![Page 7: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/7.jpg)
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
![Page 8: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/8.jpg)
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
![Page 9: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/9.jpg)
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
![Page 10: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/10.jpg)
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
![Page 11: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/11.jpg)
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….
![Page 12: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/12.jpg)
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
![Page 13: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/13.jpg)
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
![Page 14: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/14.jpg)
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
![Page 15: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/15.jpg)
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
![Page 16: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/16.jpg)
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
![Page 17: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/17.jpg)
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
![Page 18: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/18.jpg)
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
![Page 19: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/19.jpg)
Roadmap
Definition of deisgn
Design principles
User-centred design
![Page 20: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/20.jpg)
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?
![Page 21: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/21.jpg)
What did we learn?
![Page 22: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/22.jpg)
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)
![Page 23: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/23.jpg)
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…
![Page 24: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/24.jpg)
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
![Page 25: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/25.jpg)
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
![Page 26: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/26.jpg)
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
![Page 27: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/27.jpg)
Evaluation
![Page 28: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/28.jpg)
Analysis & Planning
![Page 29: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/29.jpg)
Concept
![Page 30: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/30.jpg)
Design
![Page 31: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/31.jpg)
We will cover these steps later in this course…
Implementation & Launch
![Page 32: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/32.jpg)
Chapter 7
References
![Page 33: User-centred design](https://reader030.fdocuments.us/reader030/viewer/2022032421/55a71f261a28ab564a8b477a/html5/thumbnails/33.jpg)
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