UML per il Web: User Centric Design

transcript

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 (ivano.malavolta@univaq.it)

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

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”

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

UCD is Universal

UCD can be applied to all design practices that have the aim to provide a good user experience

» websites

» 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

world tests with actual users

The UCD Process

Analysis & Planning

Launch

http://paznow.s3.amazonaws.com/User-

http://paznow.s3.amazonaws.com/User

Centred-Design.pdf

Analysis & Planning

Design Decisions -QOC

ConceptRequirements

Abstraction and Prioritization

Scenarios

DesignDiscussion

“Looks-like” or “Works-like” prototypes

Evaluation

Roadmap

» User-centered Design

» The Elements of User Experience

The User Experience 5 planes

design

concept

Planes dependencies

Each plane depends on the planes below

Planes dependencies

Ripple effect. If you choose an option out-of-

bounds, you have to rethink lower options

Be elastic!

RUP-like

Strategy

Product overview

Planning out the objectives and goals of the project

Product overview

» business goals

» sketch product features

» competitors

• user research

– needs & goals

– segmentation

– no context

• PERSONAS

Personas

Invent fictional characters with their own story

» Features of the app

> what does it do

Definition of requirements, functional specifications, datasources, scenarios

It is 100% about

> 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

» 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

Hierarchical

Matrix

Sequential

Sitemaps

They represent:

» relationship of content to other content and

» how the user travels through the information

Does this diagramreminds youanything?

Skeleton

» (Graphical) Interface Design> buttons, checkboxes, lists, etc.

Designing GUI elements and how to arrange and group them

> 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

Surface

» typography, colour palette, alignment, texture,

The look and feel of the product

» typography, colour palette, alignment, texture,

layouts, etc.

» HI-FI WIREFRAMES (close to mockups)

» PROTOTYPES

Hi-fi Wireframes

» Detailed, realistic wireframes

Prototypes

» Wireframes cannot

represent complex

interactions

� prototyping

» Different kinds of prototype

> paper prototype

> context prototype

> HTML prototype

Summary

Lo-fi wireframes+ wayfinding info

Hi-fi wireframes+ prototypes (if needed)

Product overview + objectives+ Personas + competitors

Scenarios (with ctx) + Reqs + functionalities + data prov.

Sitemap + contentnomenclature

UML per il Web: User Centric Design

Education