Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Web Engineering L8: User-centered Design (8/8)

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 32 Anzeige

Web Engineering L8: User-centered Design (8/8)

Herunterladen, um offline zu lesen

This lecture focusses on User-centered Design (UCD). It covers the "The Elements of User Experience" book by Garrett.
The topics covered are:
- the UCD process
- Personas
- Scope
- Information Architecture
- Sitemaps
- Wireframes
- Prototypes
The output of this course consists in a list of artifacts and principles to be used when engineering Web applications. The list is availabe at https://trello.com/b/z49P8z3b

This lecture focusses on User-centered Design (UCD). It covers the "The Elements of User Experience" book by Garrett.
The topics covered are:
- the UCD process
- Personas
- Scope
- Information Architecture
- Sitemaps
- Wireframes
- Prototypes
The output of this course consists in a list of artifacts and principles to be used when engineering Web applications. The list is availabe at https://trello.com/b/z49P8z3b

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Web Engineering L8: User-centered Design (8/8) (20)

Weitere von Henry Muccini (20)

Anzeige

Aktuellste (20)

Web Engineering L8: User-centered Design (8/8)

  1. 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. 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. 3. MWT– Progettazione di Applicazioni Web Henry Muccini 3 Roadmap User-Centered Design The Elements of User Experience
  4. 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. 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. 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. 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. 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. 9. MWT– Progettazione di Applicazioni Web Henry Muccini 9 Analysis & Planning Design Decisions - QOC
  10. 10. MWT– Progettazione di Applicazioni Web Henry Muccini 10 Concept Abstraction and Prioritization Scenarios Requirements
  11. 11. MWT– Progettazione di Applicazioni Web Henry Muccini 11 Design Discussion “Looks-like” or “Works-like” prototypes Sketches, wireframe, storyboard
  12. 12. MWT– Progettazione di Applicazioni Web Henry Muccini 12 Evaluation
  13. 13. MWT– Progettazione di Applicazioni Web Henry Muccini 13 Roadmap User-centered Design The Elements of User Experience
  14. 14. MWT– Progettazione di Applicazioni Web Henry Muccini 14 The User Experience 5 planes concept design
  15. 15. MWT– Progettazione di Applicazioni Web Henry Muccini 15 Planes dependencies Each plane depends on the planes below
  16. 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. 17. MWT– Progettazione di Applicazioni Web Henry Muccini 17 Be elastic! RUP-like
  18. 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. 19. MWT– Progettazione di Applicazioni Web Henry Muccini 19 Personas Invent fictional characters with their own story
  20. 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. 21. MWT– Progettazione di Applicazioni Web Henry Muccini 21 Esempio 2: Uffizi
  22. 22. MWT– Progettazione di Applicazioni Web Henry Muccini 22 Esempio 3: DNE
  23. 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. 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. 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. 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. 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. 28. MWT– Progettazione di Applicazioni Web Henry Muccini 28 Wireframes Views + user interaction + navigation – a refinement of sitemaps
  29. 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. 30. MWT– Progettazione di Applicazioni Web Henry Muccini 30 Hi-fi Wireframes Detailed, realistic wireframes
  31. 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. 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)

×