User-Centered Design

Download User-Centered Design

Post on 27-Jan-2015




2 download

Embed Size (px)


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 LAquila (Italy).


<ul><li> 1. User-centeredDesign Ivano Malavoltaivano.malavolta@univaq.it</li></ul> <p> 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 UCDLets focus onthe USER! 7. Definition of UCD (from Wikipedia)User Centered-Design (UCD) is a design philosophy and a process in which theneeds, wants, and limitations of the end userof an interface or document are givenextensive attention at each stage of thedesign process 8. More formallyUCD is a development cycle which takes intoconsideration what users really need and makesadjustments by exploring, testing and tuning thedesign 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 thathave 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 &amp;The UCD Process project!3 parts of your These will be the Launch 12. Evaluation 13. Analysis &amp; Planning 14. Concept 15. Design 16. Implementation &amp; 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, effectyou have to rethink lower options 21. Be elastic! 22. Strategy Planning out the objectives and goals of the projectProduct overviewUser business goals user research sketch product features needs &amp; 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 theinformation space how the user moves through and makes sense oftasks 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 WIREFRAMESLO- 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 representcomplex 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. ReferencesChapter 7(until page 94) </p>