Questa lezione spiega i principi dell'User Centric Design per la modellazione in UML di applicazioni web. Tale lezione e' parte del corso di "Modellazione UML per il WEB", del Master in Web Technology, Universita' degli Studi dell'Aquila (http://www.di.univaq.it/mwt/)

1. User-
User-centered
Design for
the Web
Master in Web
Technology
Corso di: Modellazione UML per il Web
Docente: Henry Muccini
VIII Edizione 2012/2013
Dipartimento di Ingegneria e Scienze dell’Informazione e Matematica
Università degli Studi dell’Aquila

2. Acknowledgment
» Buona parte del materiale in queste slide
proviene da una lezione tenuta da Ivano
Malavolta nell’ambito del Corso di Applicazioni
per Dispositivi Mobili (ivano.malavolta@univaq.it)
http://www.jjg.net/elements/
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

3. Roadmap
» User-Centered Design
» The Elements of User Experience
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

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”
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

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
» …
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

8. The UCD Process
Analysis & Launch
Planning
http://paznow.s3.amazonaws.com/User-
http://paznow.s3.amazonaws.com/User
Centred-Design.pdf
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

9. Analysis & Planning
Design Decisions -
QOC
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

10. Concept
Requirements
Scenarios Abstraction and
Prioritization
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

11. Design
Discussion
“Looks-like” or “Works-like”
prototypes
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

12. Evaluation
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

13. Roadmap
» User-centered Design
» The Elements of User Experience
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

14. The User Experience 5 planes
design
concept
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

15. Planes dependencies
Each plane depends on the planes below
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

16. Planes dependencies
Ripple effect. If you choose an option out-of-
bounds, you have to rethink lower options
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

17. Be elastic!
RUP-like
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

18. Strategy
Planning out the
objectives
and goals of the project
Product overview User
» business goals • user research
» sketch product features – needs & goals
» competitors – segmentation
– no context
• PERSONAS
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

19. Personas
Invent fictional characters with their own story
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

20. Scope
Definition of requirements,
functional specifications, data
sources, scenarios
» Features of the app
> what does it do It is 100% about
this UML-WEB
» Prioritized Requirements
course!!!
> 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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

21. Structure
Structural design of the
information space
» 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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

22. Information Architecture
» Information architecture consists in the
organization and navigation of information
» A node can correspond to any piece or group of
information
Matrix
Sequential
Hierarchical
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

23. Sitemaps
They represent:
» relationship of content to other content and
» how the user travels through the information
space
Does this diagram
reminds you
anything?
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

24. Skeleton
Designing GUI elements and how
to arrange and group them
» (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.
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

25. Wireframes
» Views + user interaction + navigation
> a refinement of sitemaps
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

26. Surface
The look and feel of the
product
» typography, colour palette, alignment, texture,
layouts, etc.
» HI-FI WIREFRAMES (close to mockups)
» PROTOTYPES
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

27. Hi-fi Wireframes
» Detailed, realistic wireframes
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

28. Prototypes
» Wireframes cannot
represent complex
interactions
prototyping
» Different kinds of prototype
> paper prototype
> context prototype
> HTML prototype
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications

29. Summary
Hi-fi wireframes
+ prototypes (if needed)
Lo-fi wireframes
+ wayfinding info
Sitemap + content
nomenclature
Scenarios (with ctx) + Reqs +
functionalities + data prov.
Product overview + objectives
+ Personas + competitors
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications