UML per il Web: User Centric Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UML per il Web: User Centric Design

  • 595 views
Uploaded 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......

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/)

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
595
On Slideshare
595
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Roadmap » User-Centered Design » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. 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. 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. 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. 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. Analysis & Planning Design Decisions - QOCMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 10. Concept Requirements Scenarios Abstraction and PrioritizationMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 11. Design Discussion “Looks-like” or “Works-like” prototypesMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 12. EvaluationMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 13. Roadmap » User-centered Design » The Elements of User ExperienceMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 14. The User Experience 5 planes design conceptMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 15. Planes dependencies Each plane depends on the planes belowMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. Be elastic! RUP-likeMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. Personas Invent fictional characters with their own storyMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. 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. 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. 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. 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. Wireframes » Views + user interaction + navigation > a refinement of sitemapsMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. Hi-fi Wireframes » Detailed, realistic wireframesMaster in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
  • 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. 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