Not my field of expertise, learning a lot from my colleagues and other talented professionals. Generic Usability and UX introduction at noschool Lisboa. Credits go to Steve Krug, Andree Glusman, Anna Deyoung, Daniela Rosner and Dan Saffler who have inspired this presentation.

1. USABILITY
- experiencing reality -
Vincenzo Di Maria 15.11.2012
USABILITY

2. USABILITY

3. Vincenzo Di Maria
USABILITY

4. empathy
USABILITY

5. pleased to meet you
USABILITY

6. what’s your
project about?
@vdmdesign
#usability
USABILITY

7. UXDESIGN
- a creative process -
USABILITY

8. design?
USABILITY

9. ?
USABILITY

10. USABILITY

11. USABILITY

12. 1 2 3 4 5 6 7 8 9
Special fares apply
Chesham
9 Chalfont & 8 7 Watford Junction
8 7 6 5 Epping
Theydon Bois
Che
Bank
6
Latimer Watford High Street High Barnet
Watford Cockfosters Debden
Amersham Bushey Totteridge & Whetstone
Chorleywood Croxley Oakwood Loughton
5
A Carpenders Park Woodside Park Buckhurst Hill A ---------
Rickmansworth Moor Park Southgate
4
Roding Grange Blackf
Hatch End Mill Hill East West Finchley Valley
Northwood Arnos Grove Hill
West Ruislip Northwood Edgware
Hills Headstone Lane
Chigwell ---------
Stanmore Bounds Green
Hillingdon Ruislip Finchley Central Hainault Camd
4
Harrow & Burnt Oak
Ruislip Manor Pinner Wealdstone Wood Green Woodford
Canons Park
Uxbridge Ickenham East Finchley Fairlop
Colindale ---------
Eastcote North Harrow Kenton Harringay South Woodford
Queensbury Turnpike Lane Green Lanes
3
Hendon Central Highgate Barkingside Canar
Harrow- Northwick Preston Crouch Hill South Tottenham
on-the-Hill Kingsbury Snaresbrook
Ruislip Park Road
Rayners Lane Brent Cross Archway Manor House Seven Newbury Park
Gardens Blackhorse
Sisters Road
West South Kenton Gospel Redbridge
Harrow Golders Green
Neasden Oak Tufnell Park Upper Holloway
South Harrow North Wembley Hampstead Tottenham Walthamstow ---------
South Ruislip Wembley Hampstead Heath Hale Central Wanstead Gants
Arsenal Finsbury Hill Upminster Canno
B Wembley Central Park Dollis Hill Kentish Town Park Leytonstone B
Finchley Road Walthamstow Upminster Bridge
Sudbury Hill Stonebridge Park Willesden Green & Frognal Holloway Road Leyton Leytonstone
Kentish Queen’s Road
Belsize Park Town West Midland Road High Road ---------
3
Kilburn Caledonian Road Highbury & Hornchurch
Northolt Harlesden Heron
Kensal Brondesbury Islington
Chalk Farm Leyton
2
Sudbury Town Willesden Junction Rise Park West Hampstead Dalston Dagenham
Camden Kingsland Stratford East
International Elm Park
Finchley Road Road Caledonian Wanstead Park
Brondesbury Camden Town
Kensal Green Road & Canonbury Hackney Central ---------
Alperton Swiss Cottage Barnsbury
Dalston Junction Dagenham Houns
Queen’s Park Kilburn South Mornington Stratford Heathway
High Road Hampstead St. John’s Wood Crescent
Greenford Homerton Hackney
Becontree
2
King’s Cross Wick Woodgrange Park
Kilburn Park St. Pancras ---------
Edgware Haggerston Upney
Perivale Maida Vale Paddington Marylebone Great Totten
Road Portland Euston Stratford
Baker High Street Barking Cour
Warwick Avenue Street Street
Angel Hoxton Pudding
Royal Oak Mill Lane Abbey East Ham
C Hanger Lane
Old Street Bethnal Road C ---------
Westbourne Park Warren Street Euston Mile End
Edgware Square Green Upton Park
Road Farringdon
Turnh
Park Royal Regent’s Park Liverpool Bow Road Plaistow
Ladbroke Grove Shoreditch
Bayswater Russell Street High Street
Latimer Road Square Barbican Bromley- West Ham ---------
North Ealing Goodge Bow Church by-Bow
East White Shepherd’s Lancaster Chancery Moorgate Victor
Notting Bond Oxford Street
Acton City Bush Hill Gate Gate Street Circus Lane Devons Road
Stepney Green
Aldgate Star Lane
1 2 3 4
Ealing Broadway St. Paul’s
West North Holland Queensway Marble Tottenham Holborn East Langdon Park
Whitechapel
65 4 3 2 1
Acton Acton Park Arch Court Road Bank ---------
Wood Lane Covent Garden Aldgate Canning
All Saints Town Water
High Street Green Park Royal
Acton Central Kensington Leicester Square Shadwell Westferry Blackwall Victoria
Shepherd’s Bush Custom House for ExCeL
Ealing Common Market Hyde Park Corner Piccadilly
Kensington Cannon Street Limehouse Poplar
Circus Monument Tower East
South Acton (Olympia) Knightsbridge India Prince Regent
Goldhawk Road Mansion House Hill
D Fenchurch Street Tower Wapping West D ---------
Charing Gateway Royal Albert
Barons Gloucester Cross Blackfriars India Quay West Silvertown
Acton Town Court Road St. James’s West
Hammersmith River Thames
South Ealing Victoria Park Temple Beckton Park
Rotherhithe
Canary Wharf
Northfields North Pontoon Dock Cyprus
Chiswick Turnham Stamford Ravenscourt West Earl’s South Sloane Westminster Embankment
Park Green Brook Park Kensington Court Kensington Square London Bermondsey Canada Greenwich ---------
Boston Manor Bridge Water Heron Quays for The O2 Gallions Reach
London City Airport
2
Osterley West Brompton Waterloo Beckton Key t
2
South Quay
Gunnersbury Surrey Quays
Crossharbour King George V
Hounslow East Southwark
1
Pimlico
Hounslow Fulham Broadway
3
Kew Gardens Imperial Mudchute
West Hounslow Central
Wharf
Hatton Cross Parsons Green Lambeth Borough Island Gardens
3
Richmond
4
North
Heathrow Putney Bridge
E Terminals 1, 2, 3
Cutty Sark for Woolwich Arsenal E
Maritime Greenwich
2
Heathrow East Putney Vauxhall
Terminal 4 Elephant & Castle New Cross Gate New Cross Greenwich
Heathrow Terminal 5 5 Southfields
Clapham Oval Kennington
Brockley Deptford Bridge
4
Wimbledon Park Junction Honor Oak Park Elverson Road
Stockwell
Wimbledon Clapham North Forest Hill Lewisham
Clapham Common Sydenham
Brixton
Clapham South
Penge West
Balham
Anerley
3
Tooting Bec
F Crystal Palace Norwood Junction
F
Tooting Broadway
5
Colliers Wood West Croydon
4
South Wimbledon
Morden This diagram is an evolution of the original design conceived in 1931 by Harry Beck
Transport for London Correct at time of going to print, August 2011
1 2 3 4 5 6 7 8 9
MAYOR OF LONDON Transport for Londo
USABILITY

13. USABILITY

14. USABILITY

15. USABILITY

16. USABILITY

17. chair [product] sitting [behaviour]
USABILITY

18. USABILITY

19. USABILITY

20. USABILITY

21. findings
! ideas
!
! !
! !
iterate
design
problems
?
? solutions
?
? ?
?
USABILITY

22. design as iterative & creative
problem solving process
USABILITY

23. #SDS2011
Visualising the creative process
The Squiggle by Damien Newman, Central Inc.
USABILITY

24. #SDS2011
The double-diamond model: Design Council 2005
DISCOVER DEFINE DEVELOP DELIVER
The Double Diamond as described by the Design Council
USABILITY

25. USABILITY

26. Design Thinking: diverging, converging, iterating
USABILITY

27. Service Design applications
USABILITY

28. Service Design:
multichannel user experience
USABILITY

29. ?
USABILITY

30. ?
USABILITY

31. UCD
- understanding users -
USABILITY

32. USABILITY

33. people-centred process
www.humancentereddesign.org
USABILITY

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

35. USABILITY

36. understanding people: ageing suit
USABILITY

37. USABILITY

38. 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

39. Steve Krug
USABILITY

40. 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

41. 5 Mobile Website Usability Rules
You Cannot Afford To Break
Rule 1: Know Your Users
Rule 2: Make Your Mobile Website Accessible
Rule 3: Keep It Simple
Rule 4: Communicate Via Colors
Alyssa Clarke on usabilitygeek.com
Rule 5: Testing
USABILITY

42. A good example
USABILITY

43. USABILITY

44. USABILITY

45. USABILITY

46. © soopahgrover
USABILITY

47. EXPERIENCE
- useful, usable, enjoyable, memorable -
USABILITY

48. 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

49. USABILITY

50. USABILITY

51. © Dan Saffler
USABILITY

52. © Envis Precisely
USABILITY

53. USABILITY

54. USABILITY

55. © Ben Melbourne
USABILITY

56. © Ben Melbourne
USABILITY

57. From UX to multi-channel experiences
USABILITY

58. On-line services
USABILITY

59. Count levels of interaction
USABILITY

60. Mapping user journeys [nForm]
USABILITY

61. USABILITY

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

63. comparative study & user experience workflow
USABILITY

64. USABILITY

65. what works for me
USABILITY

66. USABILITY

67. what doesn’t work for me
USABILITY

68. USABILITY

69. what I really like
USABILITY

70. USABILITY

71. One last exercise
USABILITY

72. USABILITY

73. USABILITY

74. ?
USABILITY

75. What do we learn from Amazon?
USABILITY

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

77. OBRIGADO
Vincenzo Di Maria
vincenzo@gotocommonground.com
www.gotocommonground.com
@vdmdesign
USABILITY