Web Engineering L8: User-centered Design (8/8)
1 like194 views
The document outlines user-centered design (UCD) as a crucial approach in web application development, emphasizing the importance of understanding user needs throughout the design process. It describes the various phases of UCD, including analysis, design decisions, evaluation, and the creation of personas and prototypes. Moreover, the document discusses information architecture, navigation design, and the transition from low-fidelity to high-fidelity wireframes in the design workflow.
Web Engineering L8: User-centered Design (8/8)
- 1. Progettazione di Applicazioni Web corso del Master in Web Technology a.a. 2017-2018 https://app.schoology.com/course/1511186315/ Henry Muccini Università degli Studi dell’Aquila 8. User-centered Design for the Web
- 2. MWT– Progettazione di Applicazioni Web Henry Muccini 2 Acknowledgment Il materiale presentato in queste slide e’ stato estratto dal libro The Elements of User Experience di J.J. Garrett Un ringraziamento ad Ivano Malavolta che ha prodotto parte di questo materiale http://www.jjg.net/elements/
- 3. MWT– Progettazione di Applicazioni Web Henry Muccini 3 Roadmap User-Centered Design The Elements of User Experience
- 4. MWT– Progettazione di Applicazioni Web Henry Muccini 4 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”
- 5. MWT– Progettazione di Applicazioni Web Henry Muccini 5 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 satisfied The result of this is a high level of usability, the design is: effective efficient engaging easy to learn
- 6. MWT– Progettazione di Applicazioni Web Henry Muccini 6 UCD is Universal UCD can be applied to all design practices that have the aim to provide a good user experience Ex. websites architecture magazines graphics …
- 7. MWT– Progettazione di Applicazioni Web Henry Muccini 7 UCD is a process Designers have to: 1. analyze and foresee how users are likely to use an interface 2. test the validity of their assumptions in real world tests with actual users
- 8. MWT– Progettazione di Applicazioni Web Henry Muccini 8 The UCD Process Analysis & Planning Launch http://paznow.s3.amazonaws.com/User- Centred-Design.pdf
- 9. MWT– Progettazione di Applicazioni Web Henry Muccini 9 Analysis & Planning Design Decisions - QOC
- 10. MWT– Progettazione di Applicazioni Web Henry Muccini 10 Concept Abstraction and Prioritization Scenarios Requirements
- 11. MWT– Progettazione di Applicazioni Web Henry Muccini 11 Design Discussion “Looks-like” or “Works-like” prototypes Sketches, wireframe, storyboard
- 12. MWT– Progettazione di Applicazioni Web Henry Muccini 12 Evaluation
- 13. MWT– Progettazione di Applicazioni Web Henry Muccini 13 Roadmap User-centered Design The Elements of User Experience
- 14. MWT– Progettazione di Applicazioni Web Henry Muccini 14 The User Experience 5 planes concept design
- 15. MWT– Progettazione di Applicazioni Web Henry Muccini 15 Planes dependencies Each plane depends on the planes below
- 16. MWT– Progettazione di Applicazioni Web Henry Muccini 16 Planes dependencies Ripple effect. If you choose an option out-of- bounds, you have to rethink lower options
- 17. MWT– Progettazione di Applicazioni Web Henry Muccini 17 Be elastic! RUP-like
- 18. MWT– Progettazione di Applicazioni Web Henry Muccini 18 Strategy Product overview business goals sketch product features competitors Planning out the objectives and goals of the project User • user research – needs & goals – segmentation • PERSONAS
- 19. MWT– Progettazione di Applicazioni Web Henry Muccini 19 Personas Invent fictional characters with their own story
- 20. MWT– Progettazione di Applicazioni Web Henry Muccini 20 Esempio 1: NdR 2017 ► UnivAq Street Science & SHARPER ► 114 eventi ► Un solo giorno ► Un’unica app
- 21. MWT– Progettazione di Applicazioni Web Henry Muccini 21 Esempio 2: Uffizi
- 22. MWT– Progettazione di Applicazioni Web Henry Muccini 22 Esempio 3: DNE
- 23. MWT– Progettazione di Applicazioni Web Henry Muccini 23 Scope Features of the app – what does it do Prioritized Requirements – constraints, rules, etc. Type of managed content – data provenance (external API, web service, DB …) Scenarios (using personas) – describe how personas may interact with the app Definition of requirements, functional specifications, data sources, scenarios
- 24. MWT– Progettazione di Applicazioni Web Henry Muccini 24 Structure how the user moves through and makes sense of tasks and information – INFORMATION ARCHITECTURE • views definition and content nomenclature – interaction design • navigation among views (design software that works best for the people who use it) – SITEMAP Structural design of the information space
- 25. MWT– Progettazione di Applicazioni Web Henry Muccini 25 Information Architecture Information architecture consists in the organization and navigation of information A node can correspond to any piece or group of information Hierarchical Matrix Sequential
- 26. MWT– Progettazione di Applicazioni Web Henry Muccini 26 Sitemaps They represent: relationship of content to other content and how the user travels through the information space Does this diagram reminds you anything?
- 27. MWT– Progettazione di Applicazioni Web Henry Muccini 27 Skeleton (Graphical) Interface Design – buttons, checkboxes, lists, etc. Navigation Design – how the user travels among views Information Design – how to arrange and group info + wayfinding WIREFRAMES – a bare-bones depiction (as the name suggests) of all the components of a page and how they fit together. Designing GUI elements and how to arrange and group them
- 28. MWT– Progettazione di Applicazioni Web Henry Muccini 28 Wireframes Views + user interaction + navigation – a refinement of sitemaps
- 29. MWT– Progettazione di Applicazioni Web Henry Muccini 29 Surface typography, colour palette, alignment, texture, layouts, etc. HI-FI WIREFRAMES (close to mockups) PROTOTYPES The look and feel of the product
- 30. MWT– Progettazione di Applicazioni Web Henry Muccini 30 Hi-fi Wireframes Detailed, realistic wireframes
- 31. MWT– Progettazione di Applicazioni Web Henry Muccini 31 Prototypes Wireframes cannot represent complex interactions prototyping Different kinds of prototype – paper prototype – context prototype – HTML prototype
- 32. MWT– Progettazione di Applicazioni Web Henry Muccini 32 Summary Product overview + objectives + Personas + competitors Scenarios (with ctx) + Reqs + functionalities + data prov. Sitemap + content nomenclature Lo-fi wireframes + wayfinding info Hi-fi wireframes + prototypes (if needed)