User-Centered Design


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).

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User-Centered Design

  1. 1. User-centered Design Ivano Malavolta ivano.malavolta@univaq.it
  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 iceberg Foundation of a successful design: a user-centred design user-Centred-Design.pdf Process (UCD)
  4. 4. A World without User-Centered Design…
  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. 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)