User-centered User-centered Design Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta
Jan 27, 2015
User-centeredUser-centeredDesign
Ivano MalavoltaIvano Malavolta
http://www.di.univaq.it/malavolta
Roadmap
• User-Centered Design• User-Centered Design
• The Elements of User Experience
Good Design?
The visual part of a The visual part of a design is only the tip of the iceberg
Foundation ofa successful design: a
http
://p
azno
w.s3.am
azon
aws.co
m/U
ser-
a successful design: a useruseruseruser----centredcentredcentredcentred designdesigndesigndesignProcessProcessProcessProcess (UCD)
http
://p
azno
w.s3.am
azon
aws.co
m/U
ser
Cent
red-
Design
A World without User-Centered Design…
http://bit.ly/w1rYO1
What did we learned?
Intuition behind UCD
Let’s focus on Let’s focus on the USER!
Definition of UCD (from Wikipedia)
User Centered-Design (UCD) is …
“a design philosophy and a process in which theneeds, wants, and limitations of the end userof an interface or document are givenextensive attention at each stage of theextensive attention at each stage of thedesign process”
More formally…
UCD is a development cycle development cycle development cycle development cycle which takes into consideration what users really need and makes consideration what users really need and makes adjustmentsadjustmentsadjustmentsadjustments by exploring, testing and tuning the design until these needs are satisfied
The result of this is a high high high high level of level of level of level of usabilityusabilityusabilityusability, the design is:
• effective
• efficient
• engaging
• easy to learn
UCD is Universal
UCD can be applied to all all all all design practices design practices design practices design practices that have the aim to provide a good user experiencehave the aim to provide a good user experience
Ex. • websites• architecture• magazines• magazines• graphics• …
UCD is a process
Designers have to:
1.1.1.1. analyze analyze analyze analyze and foresee and foresee and foresee and foresee how users are likely to use an interface
2.2.2.2. testtesttesttest the validity of their assumptions in real world tests with actual usersworld tests with actual users
The UCD ProcessAnalysisAnalysisAnalysisAnalysis & & & & PlanningPlanningPlanningPlanning
LaunchLaunchLaunchLaunch
http
://p
azno
w.s3.am
azon
aws.co
m/U
ser-
These will be the
http
://p
azno
w.s3.am
azon
aws.co
m/U
ser
Cent
red-
Design
These will be the 3 parts of your
project!
Evaluation
Analysis & Planning
Concept
Design
Implementation & Launch
We will cover these steps later in this course…
Roadmap
• User-centered Design• User-centered Design
• The Elements of User Experience
The User Experience 5 planes
design
concept
Planes dependencies
Each plane dependsdependsdependsdepends on the planes below
Planes dependencies
RippleRippleRippleRipple effecteffecteffecteffect. If you choose an option out-of-bounds, you have to rethink lower optionsyou have to rethink lower options
Be elastic!
Strategy
Planning out the objectives and goals of the project
ProductProductProductProduct overviewoverviewoverviewoverview
• business goals
• sketch product features
and goals of the project
UserUserUserUser
• user research
– needs & goals• sketch product features
• competitors
– needs & goals
– segmentation
– no context
• PERSONASPERSONASPERSONASPERSONAS
Personas
Invent fictional characters with their own story
Scope
Definition of scope, user needs, requirements,
• Features of the app– what does it do
• Prioritized Requirements– constraints, rules, etc.
• Type of managed content
requirements, functional specifications
• Type of managed content– how does it manage text, video, audio – data provenance (external API, web service, DB …)
• Scenarios (using personas)– describe how personas may interact with the app
Structure
Structural design of the information space
• how the user moves through and makes sense of taskstaskstaskstasks and informationinformationinformationinformation
– information architecture
information space
– information architecture• views definition and content nomenclature
– interaction design • navigation among views
– SITEMAPSITEMAPSITEMAPSITEMAP
Sitemaps
They represent:
• relationshiprelationshiprelationshiprelationship of content to other content and• relationshiprelationshiprelationshiprelationship of content to other content and
• how the user travelstravelstravelstravels through the information space
Skeleton
Designing how information is presented to facilitate understanding
• Interface Design– buttons, checkboxes, lists, etc.
• Navigation Design– how the user travels among views
• Information Design
presented to facilitate understanding
• Information Design – how to arrange and group info + wayfinding
• LOLOLOLO----FI WIREFRAMESFI WIREFRAMESFI WIREFRAMESFI WIREFRAMES– low fidelity for preventing confusion of visual design concepts
with information design concepts
Lo-fi Wireframes
• Views + user interaction + navigation– a refinement of sitemaps– a refinement of sitemaps
Surface
The look and feel of the product
• typography, colour palette, alignment, texture, layouts, etc.
• HIHIHIHI----FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES (close to mockups)
The look and feel of the product
• PROTOTYPESPROTOTYPESPROTOTYPESPROTOTYPES
Hi-fi Wireframes
• Detailed, realistic wireframes
Prototypes
• Wireframes cannot representcomplex interactions
� prototypingprototypingprototypingprototyping
• Different kinds of prototype
– paperpaperpaperpaper prototype
– ccccontextontextontextontext prototype– ccccontextontextontextontext prototype
– HTMLHTMLHTMLHTML prototype
Summary
Hi-fi wireframes+ prototypes (if needed)
Scenarios (with ctx) + Reqs +
Sitemap + content nomenclature
Lo-fi wireframes + wayfinding info
Product overview + objectives+ Personas + competitors
Scenarios (with ctx) + Reqs + functionalities + data prov.
References
Chapter 7 (until page 94)