User-centeredUser-centeredDesign

Ivano MalavoltaIvano Malavolta

ivano.malavolta@univaq.it

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

.pdf

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

.pdf

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)