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

Transcript

1. User-centered User-centered Design Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
2. Roadmap • User-Centered Design • User-Centered Design • The Elements of User Experience
3. Good Design? The visual part of a The visual part of a design is only the tip of the iceberg Foundation of a successful design: a http://paznow.s3.amazonaws.com/User- a successful design: a user user user user- - - -centred centred centred centred design design design design Process Process Process Process (UCD) http://paznow.s3.amazonaws.com/User Centred-Design.pdf
4. A World without User-Centered Design… http://bit.ly/w1rYO1
5. What did we learned?
6. Intuition behind UCD Let’s focus on 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 extensive attention at each stage of the design process”
8. More formally… UCD is a development cycle development cycle development cycle development cycle which takes into consideration what users really need and makes consideration what users really need and makes adjustments adjustments adjustments adjustments by exploring, testing and tuning the design until these needs are satisfied The result of this is a high high high high level of level of level of level of usability usability usability usability, the design is: • effective • efficient • engaging • easy to learn
9. UCD is Universal UCD can be applied to all all all all design practices design practices design practices design practices that have the aim to provide a good user experience have the aim to provide a good user experience Ex. • websites • architecture • magazines • magazines • graphics • …
10. UCD is a process Designers have to: 1. 1. 1. 1. analyze analyze analyze analyze and foresee and foresee and foresee and foresee how users are likely to use an interface 2. 2. 2. 2. test test test test the validity of their assumptions in real world tests with actual users world tests with actual users
11. The UCD Process Analysis Analysis Analysis Analysis & & & & Planning Planning Planning Planning Launch Launch Launch Launch http://paznow.s3.amazonaws.com/User- These will be the http://paznow.s3.amazonaws.com/User Centred-Design.pdf These will be the 3 parts of your project!
12. Evaluation
13. Analysis & Planning
14. Concept
15. Design
16. Implementation & Launch We will cover these steps later in this course…
17. Roadmap • User-centered Design • User-centered Design • The Elements of User Experience
18. The User Experience 5 planes design concept
19. Planes dependencies Each plane depends depends depends depends on the planes below
20. Planes dependencies Ripple Ripple Ripple Ripple effect effect effect effect. If you choose an option out-of-bounds, you have to rethink lower options you have to rethink lower options
21. Be elastic!
22. Strategy Planning out the objectives and goals of the project Product Product Product Product overview overview overview overview • business goals • sketch product features and goals of the project User User User User • user research – needs & goals • sketch product features • competitors – needs & goals – segmentation – no context • PERSONAS PERSONAS PERSONAS PERSONAS
23. Personas Invent fictional characters with their own story
24. Scope Definition of scope, user needs, requirements, • Features of the app – what does it do • Prioritized Requirements – constraints, rules, etc. • Type of managed content requirements, functional specifications • 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 tasks tasks tasks and information information information information – information architecture information space – information architecture • views definition and content nomenclature – interaction design • navigation among views – SITEMAP SITEMAP SITEMAP SITEMAP
26. Sitemaps They represent: • relationship relationship relationship relationship of content to other content and • relationship relationship relationship relationship of content to other content and • how the user travels travels travels 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 presented to facilitate understanding • Information Design – how to arrange and group info + wayfinding • LO LO LO LO- - - -FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES – 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 – a refinement of sitemaps
29. Surface The look and feel of the product • typography, colour palette, alignment, texture, layouts, etc. • HI HI HI HI- - - -FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES FI WIREFRAMES (close to mockups) The look and feel of the product • PROTOTYPES PROTOTYPES PROTOTYPES PROTOTYPES
30. Hi-fi Wireframes • Detailed, realistic wireframes
31. Prototypes • Wireframes cannot represent complex interactions prototyping prototyping prototyping prototyping • Different kinds of prototype – paper paper paper paper prototype – c c c context ontext ontext ontext prototype – c c c context ontext ontext ontext prototype – HTML HTML HTML HTML prototype
32. Summary Hi-fi wireframes + prototypes (if needed) Scenarios (with ctx) + Reqs + Sitemap + content nomenclature Lo-fi wireframes + wayfinding info Product overview + objectives + Personas + competitors Scenarios (with ctx) + Reqs + functionalities + data prov.
33. References Chapter 7 (until page 94)