0
User-  User-centered  Design for  the WebMaster in WebTechnologyCorso di: Modellazione UML per il WebDocente: Henry Muccin...
Acknowledgment      » Buona parte del materiale in queste slide        proviene da una lezione tenuta da Ivano        Mala...
Roadmap      » User-Centered Design      » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013...
Definition of UCD (from Wikipedia)      User Centered-Design (UCD) is …      “a design philosophy and a process in which t...
More formally…    UCD is a development cycle which takes into     consideration what users really need and makes     adjus...
UCD is Universal      UCD can be applied to all design practices that have the        aim to provide a good user experienc...
UCD is a process      Designers have to:    1. analyze and foresee how users are likely to use       an interface    2. te...
The UCD Process                                        Analysis &                                           Launch        ...
Analysis & Planning                                                                         Design Decisions -            ...
Concept        Requirements                Scenarios                       Abstraction and                                ...
Design              Discussion                                                  “Looks-like” or “Works-like”              ...
EvaluationMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Roadmap      » User-centered Design      » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013...
The User Experience 5 planes             design           conceptMaster in Web Technology VIII Edizione 2012/2013 | Henry ...
Planes dependencies      Each plane depends on the planes belowMaster in Web Technology VIII Edizione 2012/2013 | Henry Mu...
Planes dependencies      Ripple effect. If you choose an option out-of-        bounds, you have to rethink lower optionsMa...
Be elastic!         RUP-likeMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Strategy                                         Planning out the                                         objectives      ...
Personas      Invent fictional characters with their own storyMaster in Web Technology VIII Edizione 2012/2013 | Henry Muc...
Scope                                 Definition of requirements,                                 functional specification...
Structure                                            Structural design of the                                             ...
Information Architecture      » Information architecture consists in the        organization and navigation of information...
Sitemaps      They represent:      » relationship of content to other content and      » how the user travels through the ...
Skeleton                                 Designing GUI elements and how                                 to arrange and gro...
Wireframes      » Views + user interaction + navigation           > a refinement of sitemapsMaster in Web Technology VIII ...
Surface                                  The look and feel of the                                  product      » typograp...
Hi-fi Wireframes      » Detailed, realistic wireframesMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UM...
Prototypes   » Wireframes cannot     represent complex     interactions        prototyping   » Different kinds of prototyp...
Summary            Hi-fi wireframes            + prototypes (if needed)                      Lo-fi wireframes             ...
Upcoming SlideShare
Loading in...5
×

UML per il Web: User Centric Design

539

Published on

Questa lezione spiega i principi dell'User Centric Design per la modellazione in UML di applicazioni web. Tale lezione e' parte del corso di "Modellazione UML per il WEB", del Master in Web Technology, Universita' degli Studi dell'Aquila (http://www.di.univaq.it/mwt/)

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
539
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "UML per il Web: User Centric Design"

  1. 1. User- User-centered Design for the WebMaster in WebTechnologyCorso di: Modellazione UML per il WebDocente: Henry MucciniVIII Edizione 2012/2013Dipartimento di Ingegneria e Scienze dell’Informazione e MatematicaUniversità degli Studi dell’Aquila
  2. 2. Acknowledgment » Buona parte del materiale in queste slide proviene da una lezione tenuta da Ivano Malavolta nell’ambito del Corso di Applicazioni per Dispositivi Mobili (ivano.malavolta@univaq.it) http://www.jjg.net/elements/Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  3. 3. Roadmap » User-Centered Design » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  4. 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”Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  5. 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 learnMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  6. 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 » …Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  7. 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 usersMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  8. 8. The UCD Process Analysis & Launch Planning http://paznow.s3.amazonaws.com/User- http://paznow.s3.amazonaws.com/User Centred-Design.pdfMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  9. 9. Analysis & Planning Design Decisions - QOCMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  10. 10. Concept Requirements Scenarios Abstraction and PrioritizationMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  11. 11. Design Discussion “Looks-like” or “Works-like” prototypesMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  12. 12. EvaluationMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  13. 13. Roadmap » User-centered Design » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  14. 14. The User Experience 5 planes design conceptMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  15. 15. Planes dependencies Each plane depends on the planes belowMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  16. 16. Planes dependencies Ripple effect. If you choose an option out-of- bounds, you have to rethink lower optionsMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  17. 17. Be elastic! RUP-likeMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  18. 18. Strategy Planning out the objectives and goals of the project Product overview User » business goals • user research » sketch product features – needs & goals » competitors – segmentation – no context • PERSONASMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  19. 19. Personas Invent fictional characters with their own storyMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  20. 20. Scope Definition of requirements, functional specifications, data sources, scenarios » Features of the app > what does it do It is 100% about this UML-WEB » Prioritized Requirements course!!! > constraints, rules, etc. » Type of managed content > data provenance (external API, web service, DB …) » Scenarios (using personas) > describe how personas may interact with the appMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  21. 21. 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 (design software that works best for the people who use it) > SITEMAPMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  22. 22. Information Architecture » Information architecture consists in the organization and navigation of information » A node can correspond to any piece or group of information Matrix Sequential HierarchicalMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  23. 23. Sitemaps They represent: » relationship of content to other content and » how the user travels through the information space Does this diagram reminds you anything?Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  24. 24. Skeleton Designing GUI elements and how to arrange and group them » (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.Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  25. 25. Wireframes » Views + user interaction + navigation > a refinement of sitemapsMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  26. 26. Surface The look and feel of the product » typography, colour palette, alignment, texture, layouts, etc. » HI-FI WIREFRAMES (close to mockups) » PROTOTYPESMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  27. 27. Hi-fi Wireframes » Detailed, realistic wireframesMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  28. 28. Prototypes » Wireframes cannot represent complex interactions prototyping » Different kinds of prototype > paper prototype > context prototype > HTML prototypeMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  29. 29. Summary Hi-fi wireframes + prototypes (if needed) Lo-fi wireframes + wayfinding info Sitemap + content nomenclature Scenarios (with ctx) + Reqs + functionalities + data prov. Product overview + objectives + Personas + competitorsMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×