USABILITY

USABILITY- experiencing reality -

Vincenzo Di Maria 15.11.2012

USABILITY

USABILITY

Vincenzo Di Maria

USABILITY

empathy

USABILITY

pleased to meet you

USABILITY

what’s your project about?

@vdmdesign#usability

USABILITY

UXDESIGN- a creative process -

USABILITY

design?

USABILITY

?

USABILITY

USABILITY

USABILITY

River Thames

A

B

C

D

E

F

1 2 3 4 5 6 7 8 9

1 2 3 4 5 76 8 9

A

B

C

D

E

F

2 2

22

2

5

8 8 6

2

4

4

65

41

32

43

3

36 3 1

1

3

3

59 7 7Special fares apply

5

5

4

4

4

AmershamChorleywood

Mill Hill East

Rickmansworth

Perivale

KentishTown West

CamdenRoad

Dalston Kingsland

Wanstead Park

Vauxhall

Hanger Lane

Edgware

Burnt Oak

Colindale

Hendon Central

Brent Cross

Golders Green

West Silvertown

Pontoon Dock

London City Airport

Woolwich Arsenal

King George V

Hampstead

Belsize Park

Chalk Farm

Chalfont &Latimer

Chesham

New Cross Gate

Moor Park

NorthwoodNorthwoodHills

Pinner

North Harrow

Custom House for ExCeL

Prince Regent

Royal Albert

Beckton Park

Cyprus

Gallions Reach

Beckton

Watford

Croxley

Fulham Broadway

LambethNorth

HeathrowTerminal 4

Harrow-on-the-Hill

KensalRise

BethnalGreen

Westferry

SevenSisters

Blackwall

BrondesburyPark

HampsteadHeath

HarringayGreen Lanes

LeytonstoneHigh Road

LeytonMidland Road

Hackney Central

NorthwickPark

PrestonRoad

RoyalVictoria

WembleyPark

Rayners Lane

Watford High Street

RuislipGardens

South Ruislip

Greenford

Northolt

South Harrow

Sudbury Hill

Sudbury Town

Alperton

Pimlico

Park Royal

North Ealing

Acton Central

South Acton

Ealing Broadway

Watford Junction

West Ruislip

Bushey

Carpenders Park

Hatch End

North Wembley

West Brompton

Ealing Common

South Kenton

Kenton

Wembley Central

Kensal Green

Queen’s Park

Gunnersbury

Kew Gardens

Richmond

Stockwell

Bow Church

Stonebridge Park

Harlesden

Camden Town

Willesden Junction

Headstone Lane

Parsons Green

Putney Bridge

East Putney

Southfields

Wimbledon Park

Wimbledon

Island Gardens

Greenwich

Deptford Bridge

South Quay

Crossharbour

Mudchute

Heron Quays

West India Quay

Elverson Road

Oakwood

Cockfosters

Southgate

Arnos Grove

Bounds Green

Theydon Bois

Epping

Debden

Loughton

Buckhurst Hill

WalthamstowQueen’s Road

Woodgrange Park

Leytonstone

Leyton

Wood Green

Turnpike Lane

Manor House

Stanmore

Canons Park

Queensbury

Kingsbury

High Barnet

Totteridge & Whetstone

Woodside Park

West Finchley

Finchley CentralWoodford

South Woodford

Snaresbrook

Hainault

Fairlop

Barkingside

Newbury Park

East Finchley

Highgate

Archway

Devons Road

Langdon Park

All Saints

Tufnell Park

Kentish Town

Neasden

Dollis Hill

Willesden Green

South Tottenham

Swiss Cottage

ImperialWharf

Brixton

Kilburn

West Hampstead

Blackhorse Road

Acton Town

CanningTown

Finchley Road

Highbury &Islington

Canary Wharf

Stratford

StratfordInternational

FinsburyPark

Elephant & Castle

Stepney Green

Barking

East Ham

Plaistow

Upton Park

Poplar

West Ham

Upper Holloway

PuddingMill Lane

Kennington

Borough

Elm ParkDagenham

East

DagenhamHeathway

Becontree

Upney

Heathrow Terminal 5

Finchley Road& Frognal

Crouch Hill

Northfields

Boston Manor

South Ealing

Osterley

Hounslow Central

Hounslow East

Clapham North

Oval

Clapham Common

Clapham South

Balham

Tooting Bec

Tooting Broadway

Colliers Wood

South Wimbledon

Arsenal

Holloway Road

Caledonian Road

Morden

West Croydon

HounslowWest

Hatton Cross

HeathrowTerminals 1, 2, 3

ClaphamJunction

WestHarrow

Brondesbury CaledonianRoad &

Barnsbury

TottenhamHale

WalthamstowCentral

HackneyWick

Homerton

WestActon

Limehouse EastIndia

Crystal Palace

ChiswickPark

RodingValley

GrangeHill

Chigwell

Redbridge

GantsHill

Wanstead

NorthGreenwichfor The O2

Ickenham

TurnhamGreen

Uxbridge

Hillingdon Ruislip

GospelOak

Mile End

Bow Road

Bromley-by-Bow

Upminster

Upminster Bridge

Hornchurch

Norwood Junction

Sydenham

Forest Hill

Anerley

Penge West

Honor Oak Park

Brockley

Harrow &Wealdstone

Cutty Sark for Maritime Greenwich

Ruislip Manor

Eastcote

Wapping

Shadwell

New Cross

CanadaWater

Surrey Quays

Whitechapel

Lewisham

Kilburn Park

Regent’s Park

KilburnHigh Road

EdgwareRoad

SouthHampstead

GoodgeStreet

Shepherd’s BushMarket

Goldhawk Road

Hammersmith

Bayswater

Warren Street

Aldgate

Euston

Farringdon

BarbicanRussellSquare

Kensington(Olympia)

MorningtonCrescent

High StreetKensington

Old Street

St. John’s Wood

Green Park

BakerStreet

NottingHill Gate

Victoria

AldgateEast

Blackfriars

Mansion House

Cannon Street

OxfordCircus

BondStreet

TowerHill

Westminster

PiccadillyCircus

CharingCross

Holborn

Tower Gateway

Monument

Moorgate

Leicester Square

London Bridge

St. Paul’s

Hyde Park Corner

Knightsbridge

StamfordBrook

RavenscourtPark

WestKensington

NorthActon

HollandPark

Marylebone

Angel

Queensway MarbleArch

SouthKensington

Earl’sCourt

SloaneSquare

Covent Garden

LiverpoolStreet

GreatPortland

Street

Bank

EastActon

ChanceryLane

LancasterGate

Warwick AvenueMaida Vale

Fenchurch Street

Paddington

BaronsCourt

GloucesterRoad St. James’s

Park Temple

Latimer RoadLadbroke Grove

Royal Oak

Westbourne Park

Bermondsey

Rotherhithe

ShoreditchHigh Street

Dalston Junction

Haggerston

Hoxton

Wood Lane

Shepherd’sBush

WhiteCity

King’s CrossSt. Pancras

EustonSquareEdgware

Road

Southwark

Embankment

Stratford High Street

Abbey Road

Star Lane

Waterloo

TottenhamCourt Road

Canonbury

This diagram is an evolution of the original design conceived in 1931 by Harry BeckCorrect at time of going to print, August 2011

Transport for LondonMAYOR OF LONDON

Transport for London

Key to lines

Northern

Metropolitan

Victoria

District

Circle

Central

Bakerloo

DLR

London Overground

Piccadilly

Waterloo & City

Jubilee

Hammersmith & City

Check before you travelBank Waterloo & City line open 0615 until 2148 Mondays to Fridays and 0800 until 1830 Saturdays. Closed Sundays and Public Holidays--------------------------------------------------------------------------------------Blackfriars Underground station closed until late 2011--------------------------------------------------------------------------------------Camden Town From 1300 until 1730 Sundays open for interchange and exit only--------------------------------------------------------------------------------------Canary Wharf Step-free interchange between Underground, Canary Wharf DLR and Heron Quays DLR stations at street level--------------------------------------------------------------------------------------Cannon Street Open until 2100 Mondays to Fridays. Closed Saturdays and Sundays--------------------------------------------------------------------------------------Heron Quays Step-free interchange between Heron Quays and Canary Wharf Underground station at street level--------------------------------------------------------------------------------------Hounslow West Step-free access for wheelchair users only--------------------------------------------------------------------------------------Tottenham Northern line trains will not stop Court Road at Tottenham Court Road until late 2011 --------------------------------------------------------------------------------------Turnham Green Served by Piccadilly line trains early mornings and late evenings only--------------------------------------------------------------------------------------Victoria Major escalator refurbishment works until early 2012. Use nearby stations or alternative routes--------------------------------------------------------------------------------------Waterloo Waterloo & City line open 0615 until 2148 Mondays to Fridays and 0800 until 1830 Saturdays. Closed Sundays and Public Holidays--------------------------------------------------------------------------------------West India Quay Not served by DLR trains from Bank towards Lewisham before 1900 on Mondays to Fridays--------------------------------------------------------------------------------------

Tube map

USABILITY

USABILITY

USABILITY

USABILITY

USABILITY

sitting [behaviour]chair [product]

USABILITY

USABILITY

USABILITY

USABILITY

? ??

?

?

! !!

!

!

!

?

problems

ideas

solutions

findings

designiterate

USABILITY

design as iterative & creative problem solving process

USABILITY

#SDS2011

The Squiggle by Damien Newman, Central Inc.

Visualising the creative process

USABILITY

#SDS2011

DISCOVER DEFINE DEVELOP DELIVER

The Double Diamond as described by the Design Council

The double-diamond model: Design Council 2005

USABILITY

USABILITY

Design Thinking: diverging, converging, iterating

USABILITY

Service Design applications

USABILITY

Service Design:multichannel user experience

USABILITY

?

USABILITY

?

USABILITY

UCD- understanding users -

USABILITY

USABILITY

people-centred process

www.humancentereddesign.org

USABILITY

Malkovich bias: tendency to believe that everyone uses the web like you do

USABILITY

USABILITY

understanding people: ageing suit

USABILITY

USABILITY

Usability

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

ISO 9241-11 (1998)

USABILITY

Steve Krug

USABILITY

Usability Principles

Perceivable: Information and user interface components must be perceivable by users

Operable: User interface components must be operable by users

Understandable: Information and operation of user interface must be understandable by users

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents

www.w3.org/TR/WAI-WEBCONTENT/

USABILITY

Rule 1: Know Your UsersRule 2: Make Your Mobile Website AccessibleRule 3: Keep It SimpleRule 4: Communicate Via ColorsRule 5: Testing

5 Mobile Website Usability Rules You Cannot Afford To Break

Alyssa Clarke on usabilitygeek.com

USABILITY

A good example

USABILITY

USABILITY

USABILITY

USABILITY

© soopahgrover

USABILITY

EXPERIENCE- useful, usable, enjoyable, memorable -

USABILITY

User Experience (also known as UX) encompasses several disciplines: interaction design, information architecture, human computer interaction, human factors engineering, usability and user interface (UI)/visual design.

*Definition by Nielsen Norman Group

USABILITY

USABILITY

USABILITY

© Dan Saffler

USABILITY

© Envis Precisely

USABILITY

USABILITY

USABILITY

© Ben Melbourne

USABILITY

© Ben Melbourne

USABILITY

From UX to multi-channel experiences

USABILITY

On-line services

USABILITY

Count levels of interaction

USABILITY

Mapping user journeys [nForm]

USABILITY

USABILITY

http://www.youtube.com/watch?v=HPyl2tOaKxM

USABILITY

comparative study & user experience workflow

USABILITY

USABILITY

what works for me

USABILITY

USABILITY

what doesn’t work for me

USABILITY

USABILITY

what I really like

USABILITY

USABILITY

One last exercise

USABILITY

USABILITY

USABILITY

?

USABILITY

What do we learn from Amazon?

USABILITY

TOP TIPS:- Understand you user’s needs and behaviours- Test as much as you can

USABILITY

OBRIGADO

Vincenzo Di Mariavincenzo@gotocommonground.com

www.gotocommonground.com@vdmdesign