Your SlideShare is downloading. ×
User-Centered Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User-Centered Design


Published on

Mobile Applications Development - Lecture 3 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. User-centered Design Ivano Malavolta ivano.malavolta@univaq.it
  • 2. Roadmap• User-Centered Design• The Elements of User Experience
  • 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. A World without User-Centered Design…
  • 5. What did we learned?
  • 6. Intuition behind UCD Let’s focus on the USER!
  • 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. 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. 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. 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. Planning Analysis & The UCD Process project! 3 parts of your These will be the Launch
  • 12. Evaluation
  • 13. Analysis & Planning
  • 14. Concept
  • 15. Design
  • 16. Implementation & LaunchWe will cover these steps later in this course…
  • 17. Roadmap• User-centered Design• The Elements of User Experience
  • 18. The User Experience 5 planesdesignconcept
  • 19. Planes dependenciesEach plane depends on the planes below
  • 20. Planes dependenciesRipple effect. If you choose an option out-of-bounds, effect you have to rethink lower options
  • 21. Be elastic!
  • 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. PersonasInvent fictional characters with their own story
  • 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. 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. SitemapsThey represent:• relationship of content to other content and• how the user travels through the information space
  • 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. Lo-fi Wireframes• Views + user interaction + navigation – a refinement of sitemaps
  • 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. Hi-fi Wireframes• Detailed, realistic wireframes
  • 31. Prototypes• Wireframes cannot represent complex interactions prototyping• Different kinds of prototype – paper prototype – context prototype – HTML prototype
  • 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. References Chapter 7(until page 94)