User-centered      Design         Ivano Malavolta    ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
Roadmap• User-Centered Design• The Elements of User Experience
Good Design?                                                 The visual part of a                                         ...
A World without User-Centered Design…http://bit.ly/w1rYO1
What did we learned?
Intuition behind UCD              Let’s focus on                the USER!
Definition of UCD (from Wikipedia)User Centered-Design (UCD) is …“a design philosophy and a process in which the  needs, w...
More formally…UCD is a development cycle which takes into  consideration what users really need and makes  adjustments by ...
UCD is UniversalUCD can be applied to all design practices that  have the aim to provide a good user experienceEx.• websit...
UCD is a processDesigners have to:1. analyze and foresee how users are likely to   use an interface2. test the validity of...
http://paznow.s3.amazonaws.com/Userhttp://paznow.s3.amazonaws.com/User-Centred-Design.pdf                                 ...
Evaluation
Analysis & Planning
Concept
Design
Implementation & LaunchWe will cover these steps later in this course…
Roadmap• User-centered Design• The Elements of User Experience
The User Experience 5 planesdesignconcept
Planes dependenciesEach plane depends on the planes below
Planes dependenciesRipple effect. If you choose an option out-of-bounds,       effect  you have to rethink lower options
Be elastic!
Strategy                   Planning out the objectives                   and goals of the projectProduct overview         ...
PersonasInvent fictional characters with their own story
Scope                   Definition of scope, user needs,                   requirements,                   functional spec...
Structure                       Structural design of the                          information space• how the user moves th...
SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
Skeleton                   Designing how information is                   presented to facilitate understanding• Interface...
Lo-fi Wireframes• Views + user interaction + navigation  – a refinement of sitemaps
Surface               The look and feel of the product• typography, colour palette, alignment, texture,  layouts, etc.• HI...
Hi-fi Wireframes• Detailed, realistic wireframes
Prototypes• Wireframes cannot represent  complex interactions     prototyping• Different kinds of prototype   – paper prot...
Summary     Hi-fi wireframes     + prototypes (if needed)            Lo-fi wireframes +            wayfinding infoSitemap ...
References  Chapter 7(until page 94)
Upcoming SlideShare
Loading in...5
×

User-Centered Design

1,762

Published on

Mobile Applications Development - Lecture 3

User-Centered Design

Information Architecture (sitemaps, wireframes, ...)

UI Design

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,762
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
146
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

User-Centered Design

  1. 1. User-centered Design Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  2. 2. Roadmap• User-Centered Design• The Elements of User Experience
  3. 3. Good Design? The visual part of a design is only the tip of the iceberghttp://paznow.s3.amazonaws.com/User-http://paznow.s3.amazonaws.com/User Foundation of a successful design: a user-centred design user-Centred-Design.pdf Process (UCD)
  4. 4. A World without User-Centered Design…http://bit.ly/w1rYO1
  5. 5. What did we learned?
  6. 6. Intuition behind UCD Let’s focus on the USER!
  7. 7. 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”
  8. 8. 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 satisfiedThe result of this is a high level of usability, the design is: usability• effective• efficient• engaging• easy to learn
  9. 9. UCD is UniversalUCD can be applied to all design practices that have the aim to provide a good user experienceEx.• websites• architecture• magazines• graphics• …
  10. 10. UCD is a processDesigners have to:1. analyze and foresee how users are likely to use an interface2. test the validity of their assumptions in real world tests with actual users
  11. 11. http://paznow.s3.amazonaws.com/Userhttp://paznow.s3.amazonaws.com/User-Centred-Design.pdf Planning Analysis & The UCD Process project! 3 parts of your These will be the Launch
  12. 12. Evaluation
  13. 13. Analysis & Planning
  14. 14. Concept
  15. 15. Design
  16. 16. Implementation & LaunchWe will cover these steps later in this course…
  17. 17. Roadmap• User-centered Design• The Elements of User Experience
  18. 18. The User Experience 5 planesdesignconcept
  19. 19. Planes dependenciesEach plane depends on the planes below
  20. 20. Planes dependenciesRipple effect. If you choose an option out-of-bounds, effect you have to rethink lower options
  21. 21. Be elastic!
  22. 22. Strategy Planning out the objectives and goals of the projectProduct overview User• business goals • user research• sketch product features – needs & goals• competitors – segmentation – no context • PERSONAS
  23. 23. PersonasInvent fictional characters with their own story
  24. 24. Scope Definition of scope, user needs, requirements, functional specifications• Features of the app – what does it do• Prioritized Requirements – constraints, rules, etc.• 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
  25. 25. 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 – SITEMAP
  26. 26. SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
  27. 27. 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 – how to arrange and group info + wayfinding• LO-FI WIREFRAMES LO- – low fidelity for preventing confusion of visual design concepts with information design concepts
  28. 28. Lo-fi Wireframes• Views + user interaction + navigation – a refinement of sitemaps
  29. 29. Surface The look and feel of the product• typography, colour palette, alignment, texture, layouts, etc.• HI-FI WIREFRAMES (close to mockups) HI-• PROTOTYPES
  30. 30. Hi-fi Wireframes• Detailed, realistic wireframes
  31. 31. Prototypes• Wireframes cannot represent complex interactions prototyping• Different kinds of prototype – paper prototype – context prototype – HTML prototype
  32. 32. Summary Hi-fi wireframes + prototypes (if needed) Lo-fi wireframes + wayfinding infoSitemap + content nomenclature Scenarios (with ctx) + Reqs + functionalities + data prov.Product overview + objectives+ Personas + competitors
  33. 33. References Chapter 7(until page 94)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×