Published on

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.

Published in: Design


  1. 1. USABILITY - experiencing reality - Vincenzo Di Maria 15.11.2012USABILITY
  3. 3. Vincenzo Di MariaUSABILITY
  4. 4. empathyUSABILITY
  5. 5. pleased to meet youUSABILITY
  6. 6. what’s your project about? @vdmdesign #usabilityUSABILITY
  7. 7. UXDESIGN - a creative process -USABILITY
  8. 8. design?USABILITY
  9. 9. ?USABILITY
  10. 10. USABILITY
  11. 11. USABILITY
  12. 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 5A 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 CannoB 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 HamC 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 HillD 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 BridgeE 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 BecF 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 9MAYOR OF LONDON Transport for LondoUSABILITY
  13. 13. USABILITY
  14. 14. USABILITY
  15. 15. USABILITY
  16. 16. USABILITY
  17. 17. chair [product] sitting [behaviour]USABILITY
  18. 18. USABILITY
  19. 19. USABILITY
  20. 20. USABILITY
  21. 21. findings ! ideas ! ! ! ! ! iterate design problems ? ? solutions ? ? ? ?USABILITY
  22. 22. design as iterative & creative problem solving processUSABILITY
  23. 23. #SDS2011 Visualising the creative process The Squiggle by Damien Newman, Central Inc.USABILITY
  24. 24. #SDS2011 The double-diamond model: Design Council 2005 DISCOVER DEFINE DEVELOP DELIVERThe Double Diamond as described by the Design Council USABILITY
  25. 25. USABILITY
  26. 26. Design Thinking: diverging, converging, iteratingUSABILITY
  27. 27. Service Design applicationsUSABILITY
  28. 28. Service Design:multichannel user experienceUSABILITY
  29. 29. ?USABILITY
  30. 30. ?USABILITY
  31. 31. UCD - understanding users -USABILITY
  32. 32. USABILITY
  33. 33. people-centred process www.humancentereddesign.orgUSABILITY
  34. 34. Malkovich bias: tendency to believe that everyone uses the web like you doUSABILITY
  35. 35. USABILITY
  36. 36. understanding people: ageing suitUSABILITY
  37. 37. USABILITY
  38. 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. 39. Steve KrugUSABILITY
  40. 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
  41. 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 Rule 5: TestingUSABILITY
  42. 42. A good exampleUSABILITY
  43. 43. USABILITY
  44. 44. USABILITY
  45. 45. USABILITY
  46. 46. © soopahgroverUSABILITY
  47. 47. EXPERIENCE - useful, usable, enjoyable, memorable -USABILITY
  48. 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 GroupUSABILITY
  49. 49. USABILITY
  50. 50. USABILITY
  51. 51. © Dan SafflerUSABILITY
  52. 52. © Envis PreciselyUSABILITY
  53. 53. USABILITY
  54. 54. USABILITY
  55. 55. © Ben MelbourneUSABILITY
  56. 56. © Ben MelbourneUSABILITY
  57. 57. From UX to multi-channel experiencesUSABILITY
  58. 58. On-line servicesUSABILITY
  59. 59. Count levels of interactionUSABILITY
  60. 60. Mapping user journeys [nForm]USABILITY
  61. 61. USABILITY
  62. 62.
  63. 63. comparative study & user experience workflowUSABILITY
  64. 64. USABILITY
  65. 65. what works for meUSABILITY
  66. 66. USABILITY
  67. 67. what doesn’t work for meUSABILITY
  68. 68. USABILITY
  69. 69. what I really likeUSABILITY
  70. 70. USABILITY
  71. 71. One last exerciseUSABILITY
  72. 72. USABILITY
  73. 73. USABILITY
  74. 74. ?USABILITY
  75. 75. What do we learn from Amazon?USABILITY
  76. 76. TOP TIPS: - Understand you user’s needs and behaviours - Test as much as you canUSABILITY
  77. 77. OBRIGADO Vincenzo Di Maria @vdmdesignUSABILITY
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.