This lecture focusses on User-centered Design (UCD). It covers the "The Elements of User Experience" book by Garrett. The topics covered are: - the UCD process - Personas - Scope - Information Architecture - Sitemaps - Wireframes - Prototypes The output of this course consists in a list of artifacts and principles to be used when engineering Web applications. The list is availabe at https://trello.com/b/z49P8z3b

1. Progettazione di Applicazioni Web
corso del Master in Web Technology
a.a. 2017-2018
https://app.schoology.com/course/1511186315/
Henry Muccini
Università degli Studi dell’Aquila
8. User-centered Design for the Web

2. MWT– Progettazione di Applicazioni Web Henry Muccini
2
Acknowledgment
Il materiale presentato in queste slide e’ stato estratto
dal libro The Elements of User Experience di J.J.
Garrett
Un ringraziamento ad Ivano Malavolta che ha
prodotto parte di questo materiale
http://www.jjg.net/elements/

3. MWT– Progettazione di Applicazioni Web Henry Muccini
3
Roadmap
User-Centered Design
The Elements of User Experience

4. MWT– Progettazione di Applicazioni Web Henry Muccini
4
Definition of UCD (from Wikipedia)
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”

5. MWT– Progettazione di Applicazioni Web Henry Muccini
5
More formally…
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, the design is:
effective
efficient
engaging
easy to learn

6. MWT– Progettazione di Applicazioni Web Henry Muccini
6
UCD is Universal
UCD can be applied to all design practices that have
the aim to provide a good user experience
Ex.
websites
architecture
magazines
graphics
…

7. MWT– Progettazione di Applicazioni Web Henry Muccini
7
UCD is a process
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

8. MWT– Progettazione di Applicazioni Web Henry Muccini
8
The UCD Process
Analysis &
Planning
Launch
http://paznow.s3.amazonaws.com/User-
Centred-Design.pdf

9. MWT– Progettazione di Applicazioni Web Henry Muccini
9
Analysis & Planning
Design Decisions -
QOC

10. MWT– Progettazione di Applicazioni Web Henry Muccini
10
Concept
Abstraction and
Prioritization
Scenarios
Requirements

11. MWT– Progettazione di Applicazioni Web Henry Muccini
11
Design Discussion
“Looks-like” or “Works-like”
prototypes
Sketches, wireframe,
storyboard

12. MWT– Progettazione di Applicazioni Web Henry Muccini
12
Evaluation

13. MWT– Progettazione di Applicazioni Web Henry Muccini
13
Roadmap
User-centered Design
The Elements of User Experience

14. MWT– Progettazione di Applicazioni Web Henry Muccini
14
The User Experience 5 planes
concept
design

15. MWT– Progettazione di Applicazioni Web Henry Muccini
15
Planes dependencies
Each plane depends on the planes below

16. MWT– Progettazione di Applicazioni Web Henry Muccini
16
Planes dependencies
Ripple effect. If you choose an option out-of-
bounds, you have to rethink lower options

17. MWT– Progettazione di Applicazioni Web Henry Muccini
17
Be elastic!
RUP-like

18. MWT– Progettazione di Applicazioni Web Henry Muccini
18
Strategy
Product overview
business goals
sketch product features
competitors
Planning out the objectives
and goals of the project
User
• user research
– needs & goals
– segmentation
• PERSONAS

19. MWT– Progettazione di Applicazioni Web Henry Muccini
19
Personas
Invent fictional characters with their own story

20. MWT– Progettazione di Applicazioni Web Henry Muccini
20
Esempio 1: NdR 2017
► UnivAq Street Science
& SHARPER
► 114 eventi
► Un solo giorno
► Un’unica app

21. MWT– Progettazione di Applicazioni Web Henry Muccini
21
Esempio 2: Uffizi

22. MWT– Progettazione di Applicazioni Web Henry Muccini
22
Esempio 3: DNE

23. MWT– Progettazione di Applicazioni Web Henry Muccini
23
Scope
Features of the app
– what does it do
Prioritized Requirements
– constraints, rules, etc.
Type of managed content
– data provenance (external API, web service, DB …)
Scenarios (using personas)
– describe how personas may interact with the app
Definition of requirements,
functional specifications, data
sources, scenarios

24. MWT– Progettazione di Applicazioni Web Henry Muccini
24
Structure
how the user moves through and makes sense
of tasks and information
– INFORMATION ARCHITECTURE
• views definition and content nomenclature
– interaction design
• navigation among views (design software that works best for the
people who use it)
– SITEMAP
Structural design of the
information space

25. MWT– Progettazione di Applicazioni Web Henry Muccini
25
Information Architecture
Information architecture consists in the organization
and navigation of information
A node can correspond to any piece or group of
information
Hierarchical
Matrix
Sequential

26. MWT– Progettazione di Applicazioni Web Henry Muccini
26
Sitemaps
They represent:
relationship of content to other content and
how the user travels through the information space
Does this diagram
reminds you anything?

27. MWT– Progettazione di Applicazioni Web Henry Muccini
27
Skeleton
(Graphical) Interface Design
– buttons, checkboxes, lists, etc.
Navigation Design
– how the user travels among views
Information Design
– how to arrange and group info + wayfinding
WIREFRAMES
– a bare-bones depiction (as the name suggests) of all the components of a
page and how they fit together.
Designing GUI elements and how to
arrange and group them

28. MWT– Progettazione di Applicazioni Web Henry Muccini
28
Wireframes
Views + user interaction + navigation
– a refinement of sitemaps

29. MWT– Progettazione di Applicazioni Web Henry Muccini
29
Surface
typography, colour palette, alignment, texture,
layouts, etc.
HI-FI WIREFRAMES (close to mockups)
PROTOTYPES
The look and feel of the product

30. MWT– Progettazione di Applicazioni Web Henry Muccini
30
Hi-fi Wireframes
Detailed, realistic wireframes

31. MWT– Progettazione di Applicazioni Web Henry Muccini
31
Prototypes
Wireframes cannot represent
complex interactions
 prototyping
Different kinds of prototype
– paper prototype
– context prototype
– HTML prototype

32. MWT– Progettazione di Applicazioni Web Henry Muccini
32
Summary
Product overview + objectives
+ Personas + competitors
Scenarios (with ctx) + Reqs +
functionalities + data prov.
Sitemap + content nomenclature
Lo-fi wireframes +
wayfinding info
Hi-fi wireframes
+ prototypes (if needed)