Date post: | 28-Jan-2015 |
Category: |
Education |
Upload: | henry-muccini |
View: | 105 times |
Download: | 1 times |
UserUserUserUser----centeredcenteredcenteredcentered
Design Design Design Design forforforfor
the Webthe Webthe Webthe Web
Master in Web
TechnologyCorso di: Modellazione UML per il WebDocente: Henry Muccini
VIII Edizione 2012/2013Dipartimento di Ingegneria e Scienze dell’Informazione e MatematicaUniversità degli Studi dell’Aquila
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 ([email protected])
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
http://www.jjg.net/elements/
Roadmap
» User-Centered Design
» The Elements of User Experience
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
an interface or document are given extensive
attention at each stage of the design process”
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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
The result of this is a high level of usability, the design is:
» effective
» efficient
» engaging
» easy to learn
UCD is Universal
UCD can be applied to all design practices that have the aim to provide a good user experience
Ex.
» websites
» architecture
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
» architecture
» magazines
» graphics
» …
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
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
2. test the validity of their assumptions in real
world tests with actual users
The UCD Process
Analysis & Planning
Launch
http://paznow.s3.amazonaws.com/User-
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
http://paznow.s3.amazonaws.com/User
Centred-Design.pdf
Analysis & Planning
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Design Decisions -QOC
ConceptRequirements
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Abstraction and Prioritization
Scenarios
DesignDiscussion
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
“Looks-like” or “Works-like” prototypes
Evaluation
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Roadmap
» User-centered Design
» The Elements of User Experience
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
The User Experience 5 planes
design
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
concept
Planes dependencies
Each plane depends on the planes below
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Planes dependencies
Ripple effect. If you choose an option out-of-
bounds, you have to rethink lower options
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Be elastic!
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
RUP-like
Strategy
Product overview
Planning out the objectives and goals of the project
User
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Product overview
» business goals
» sketch product features
» competitors
User
• user research
– needs & goals
– segmentation
– no context
• PERSONAS
Personas
Invent fictional characters with their own story
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Scope
» Features of the app
> what does it do
Definition of requirements, functional specifications, datasources, scenarios
It is 100% about
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
> 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
It is 100% aboutthis UML-WEB
course!!!
Structure
» how the user moves through and makes sense of
Structural design of the information space
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
» 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
Information Architecture
» Information architecture consists in the
organization and navigation of information
» A node can correspond to any piece or group of
information
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Hierarchical
Matrix
Sequential
Sitemaps
They represent:
» relationship of content to other content and
» how the user travels through the information
space
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Does this diagramreminds youanything?
Skeleton
» (Graphical) Interface Design> buttons, checkboxes, lists, etc.
Designing GUI elements and how to arrange and group them
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
> 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.
Wireframes
» Views + user interaction + navigation
> a refinement of sitemaps
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Surface
» typography, colour palette, alignment, texture,
The look and feel of the product
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
» typography, colour palette, alignment, texture,
layouts, etc.
» HI-FI WIREFRAMES (close to mockups)
» PROTOTYPES
Hi-fi Wireframes
» Detailed, realistic wireframes
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Prototypes
» Wireframes cannot
represent complex
interactions
� prototyping
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
» Different kinds of prototype
> paper prototype
> context prototype
> HTML prototype
Summary
Lo-fi wireframes+ wayfinding info
Hi-fi wireframes+ prototypes (if needed)
Master in Web Technology VIII Edizione 2012/2013 | Henry Muccini: UML for Web Applications
Product overview + objectives+ Personas + competitors
Scenarios (with ctx) + Reqs + functionalities + data prov.
Sitemap + contentnomenclature