UX Pres MIni version!

588 views
493 views

Published on

Mini version of Rik and I's Introduction to UX. Given at General Assembly, London.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
588
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • hiya!\n
  • jessi\n
  • Products, spaces, phones, theme parks, coffee shops... today we are focusing on UX design for screens; web sites and applications, across multiple devices; mobile, tablet etc...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • jessi\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • replace sketch images\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1 page, key page\n
  • \n
  • \n
  • \n
  • if finding the retweet button ment clicking 3 different buttons would you bother?\n
  • how do i buy something!!?\n
  • do you have a clear call to action on each page\nno more than 3 things that stand out above all other clickable locations?\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Google maps demo\n
  • \n
  • \n
  • example responsive web design - mediaqueri.es\n
  • \n
  • example responsive web design - mediaqueri.es\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • roleplay\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Scissors + blue tack!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • UX Pres MIni version!

    1. 1. UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
    2. 2. What’s UX!?
    3. 3. User Experience Design
    4. 4. “Anyone can make thesimple complicated.Creativity is making thecomplicated simple.” - Charles Mingus
    5. 5. The design ofexperiences
    6. 6. The design ofexperiencesHuman centred
    7. 7. The design ofexperiencesHuman centredInteractions
    8. 8. The design ofexperiencesHuman centredInteractionsDifferent to UI
    9. 9. The design ofexperiencesHuman centredInteractionsDifferent to UIAccess to value
    10. 10. Examples of good UX
    11. 11. POST (& other apps) by Meri Media
    12. 12. Dollar Shave Club
    13. 13. dribbble
    14. 14. Rdio product site
    15. 15. myownbike.de
    16. 16. path app
    17. 17. Bus o clock
    18. 18. IdeaSelect a platform for yourMVPGoals and tasksPersonasInformation Architecture
    19. 19. What is awireframe?
    20. 20. No fontsNo colourNo graphics
    21. 21. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Software Prototype
    22. 22. Why makewireframes?
    23. 23. Concept Exploration
    24. 24. Concept ExplorationLayout Content on Pages
    25. 25. Concept ExplorationLayout Content on PagesBrainstorm Interactions
    26. 26. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
    27. 27. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
    28. 28. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
    29. 29. Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
    30. 30. Sketching
    31. 31. Demo –Facebook Profile Page
    32. 32. Exercise –Draw a sketch of the Twitterprofile page on the web version orthe app version
    33. 33. Guess thewireframe!
    34. 34. 8 tips forwireframing
    35. 35. Have clear objectives
    36. 36. Make it functional
    37. 37. Keep it clean
    38. 38. User Interface is not User Experience
    39. 39. Repetition. Repetition. Repetition.
    40. 40. Consider dependencies
    41. 41. Don’t be lazy
    42. 42. Know when to stop
    43. 43. Demo –Sketch of PopDown
    44. 44. Exercise –Draw a sketch for your idea.
    45. 45. Assessment
    46. 46. Do your key functions standout?
    47. 47. Why designs fail?
    48. 48. Why designs fail?Users aren’t motivated to achieve goals
    49. 49. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
    50. 50. Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
    51. 51. States
    52. 52. Errors, alerts & successes
    53. 53. No content
    54. 54. Events (e.g. click, hover, tap andswipe)
    55. 55. Hover mode - Google maps
    56. 56. Responsive design and orientation
    57. 57. Responsive web design examples
    58. 58. User flows & Scenarios
    59. 59. User Flow for 1 scenario
    60. 60. User flow for multiple scenarios
    61. 61. User flow for multiple scenarios
    62. 62. User flow for all scenarios
    63. 63. Scenarios help you design and test
    64. 64. Demo-Scenario for PopDown andwireframing of the user flow
    65. 65. Excercise -Chose a scenario for your projectand wireframe of the user flowwith less than 3 key screens
    66. 66. Paper prototyping
    67. 67. Demo-Paper Prototype for PopDown
    68. 68. Popdown Paper Prototype - Home screen
    69. 69. Popdown Paper Prototype - Shop mode
    70. 70. Popdown Paper Prototype - select a category
    71. 71. Popdown Paper Prototype - after a category is selected
    72. 72. Popdown Paper Prototype - shop view hover mode
    73. 73. Popdown Paper Prototype - product view
    74. 74. Exercise –Paper prototype your site/app
    75. 75. Making a case for wireframes
    76. 76. Agencies
    77. 77. Creativity is in the making
    78. 78. Making changes in Photoshop orcode will take much longer than inwireframes
    79. 79. Start-ups
    80. 80. You’re broke! So it’s even moreimportant to get it right in a lo-fiway...
    81. 81. Customer experience will help youwrite certain aspects of yourbusiness plan
    82. 82. Mock-up Software
    83. 83. Balsamiq http://www.balsamiq.com/ Mockingbirdhttps://gomockingbird.com/KeynoteOmnigraffle http://www.omnigraffle.com
    84. 84. Libraries....Mockups to gohttps://mockupstogo.mybalsamiq.com/Keynotopia http://keynotopia.com/Graffletopia http://graffletopia.com/
    85. 85. Code Prototypes
    86. 86. 960.gs http://960.gs/Twitter Bootstraphttp://twitter.github.com/bootstrapZurb Foundationhttp://foundation.zurb.comNapkee
    87. 87. User Testing
    88. 88. Tools for Testing
    89. 89. Silverback http://silverbackapp.com/Realizer http://www.realizerapp.comAirDisplay http://avatron.com/apps/air-displayUser Testing http://
    90. 90. Any questions?
    91. 91. Thanks! Rik Lomas Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net

    ×