Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cross Device Experience with HTML Prototyping

679 views

Published on

Users use different devices at different times of the day. Typical sequential screening activities are, for example, when the user starts on one device and continues his activity on another. The content takes a central position. A sustainable cross-device experience in the context of responsive web design addresses coherence, fluidity and adaptability. The content should adapt to the respective terminal and address the usage context. How can concept, design and development effectively test users' behavioral patterns and meet the device agnostic approach? The talk shows the benefits of HTML prototypes and how they can be effectively combined with other prototyping techniques.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Cross Device Experience with HTML Prototyping

  1. 1. CROSS-DEVICE EXPERIENCE DESIGN 
 WITH HTML-PROTOTYPING WEBTECHCON, 23. - 27. OKTOBER 2016, MÜNCHEN
  2. 2. PETER ROZEK
  3. 3. SENIOR UX MANAGER KPS digital GmbH, ein Unternehmen der KPS AG
  4. 4. KPS DIGITAL GMBH KPS AG KPS digital GmbH, ein Unternehmen der KPS AG
  5. 5. WEBINTERFACE KPS digital GmbH, ein Unternehmen der KPS AG
  6. 6. KPS digital GmbH, ein Unternehmen der KPS AG @Giles Colborne „People use any platform 
 to do anything.“
  7. 7. KPS digital GmbH, ein Unternehmen der KPS AG EIGHTIES,
  8. 8. KPS digital GmbH, ein Unternehmen der KPS AG EIGHTIES, ONE 
 COMPUTER
  9. 9. KPS digital GmbH, ein Unternehmen der KPS AG EIGHTIES, ONE 
 COMPUTER ONE USER
  10. 10. KPS digital GmbH, ein Unternehmen der KPS AG TODAY, Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
  11. 11. KPS digital GmbH, ein Unternehmen der KPS AG TODAY, CONNECTED USERS WITH MULTIPLE DEVICES Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
  12. 12. Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
  13. 13. KPS digital GmbH, ein Unternehmen der KPS AG 90% CHANGE THE DEVICES IN A TASK SEQUENTIAL SCREENING ACTIVITIES
  14. 14. WE HAVE AN ECOSYSTEM OF DEVICES Bild: http://www.webdesignerdepot.com/2015/03/the-future-of-responsive-web-design/
  15. 15. KPS digital GmbH, ein Unternehmen der KPS AG USERS & THEIR NEEDS?
  16. 16. KPS digital GmbH, ein Unternehmen der KPS AG CROSS-DEVICE EXPERIENCE ! TO DO ANYTHING ON ANY PLATFORM
  17. 17. HOW CAN INCREASE PROTOTYPING THE CROSS DEVICE EXPERIENCE?
  18. 18. SIMULATES USER INTERFACE INTERACTION
  19. 19. THE GOAL OF PROTOTYPING IS TO PROVIDE A REALISTIC AND COHESIVE IMPRESSION OF THE VISUAL DESIGN.
  20. 20. KPS digital GmbH, ein Unternehmen der KPS AG MANY TOOLS AND APPROACHES FOR PROTOTYPING ORDERED BY 
 VISUAL & FUNCTIONAL FIDELITY
  21. 21. KPS digital GmbH, ein Unternehmen der KPS AG Visual Fidelity Functional Fidelity Sketches Interactive Sketches Wireframe Sketch Design Comp Interactive Wireframe Rich Interactive Wireframe Proof of Concept Prototype Production „Ready“ Mockup Visual Design Prototype
  22. 22. KPS digital GmbH, ein Unternehmen der KPS AG Visual Fidelity Functional Fidelity Sketches Interactive Sketches Wireframe Sketch Design Comp Interactive Wireframe Rich Interactive Wireframe Proof of Concept Prototype Production „Ready“ Mockup Visual Design Prototype Pen & Paper Paper Prototyping Pen & Paper
 Balsamiq Axure Axure Photoshop Photoshop Style Tiles
  23. 23. KPS digital GmbH, ein Unternehmen der KPS AG Visual Fidelity Functional Fidelity Sketches Interactive Sketches Wireframe Sketch Design Comp Interactive Wireframe Rich Interactive Wireframe Proof of Concept Prototype Production „Ready“ Mockup Visual Design Prototype Pen & Paper Paper Prototyping Pen & Paper
 Balsamiq Axure Axure Photoshop Photoshop Style Tiles HTML + CSS + jQuery HTML + CSS + jQuery
  24. 24. KPS digital GmbH, ein Unternehmen der KPS AG Visual Fidelity Functional Fidelity Sketches Interactive Sketches Wireframe Sketch Design Comp Interactive Wireframe Rich Interactive Wireframe Proof of Concept Prototype Production „Ready“ Mockup Fast & cheap Slow & expensive Slow & expensive Visual Design Prototype Pen & Paper Paper Prototyping Pen & Paper
 Balsamiq Axure Axure Photoshop Photoshop Style Tiles HTML + CSS + jQuery HTML + CSS + jQuery
  25. 25. KPS digital GmbH, ein Unternehmen der KPS AG WIREFRAME SKETCHES PROTOTYPE MOCKUP
  26. 26. SKETCHES AS RESEARCH TOOL
  27. 27. KPS digital GmbH, ein Unternehmen der KPS AG CREATING A SHARED COMMUNICATION
  28. 28. KPS digital GmbH, ein Unternehmen der KPS AG VALIDATING UX DIRECTION WITH STAKEHOLDERS
  29. 29. KPS digital GmbH, ein Unternehmen der KPS AG INVITES CRITIQUE
  30. 30. WIREFRAME
  31. 31. KPS digital GmbH, ein Unternehmen der KPS AG WIREFRAMES ARE A LOW- FIDELITY REPRESENTATION OF A DESIGN
  32. 32. LOW-PROTOTYPE:
 A PLAN FOR HOW IT WORKS NOT HOW IT LOOKS http://marvelcinematicuniverse.wikia.com/wiki/Iron_Man_(film)
  33. 33. KPS digital GmbH, ein Unternehmen der KPS AG THINK ABOUT USE CASES AND USER FLOW
  34. 34. KPS digital GmbH, ein Unternehmen der KPS AG THINK ABOUT INTERACTION AND ANIMATION INTERACTIVE WIREFRAMES
  35. 35. KPS digital GmbH, ein Unternehmen der KPS AG NIEHAUS WIREFRAME TECHNIQUE 3 CONVERSION STRATEGY COMPONENTS https://www.closedloop.com/the-niehaus-wireframe-technique
  36. 36. KPS digital GmbH, ein Unternehmen der KPS AG TARGET AUDIENCE RELEVANCE PARETO PRINCIPLE
  37. 37. KPS digital GmbH, ein Unternehmen der KPS AG OBJECT RELEVANCE PERCEPTUAL PSYCHOLOGY
  38. 38. KPS digital GmbH, ein Unternehmen der KPS AG ORGANIZATION OF CONTENT AND STRUCTURE STORYBOARD WIREFRAME
  39. 39. KPS digital GmbH, ein Unternehmen der KPS AG EXPLORATORY PERSONAS THE VARIOUS TARGET AUDIENCES ARE ASSIGNED VALUE CREATION POTENTIALS
  40. 40. KPS digital GmbH, ein Unternehmen der KPS AG PARETO 
 WIREFRAME
  41. 41. KPS digital GmbH, ein Unternehmen der KPS AG PARETO 
 WIREFRAME
  42. 42. KPS digital GmbH, ein Unternehmen der KPS AG EACH LEVEL DENOTES A DIFFERENT ATTENTION VALUE THAT IS “TRIGGERED” IN THE USER:
  43. 43. KPS digital GmbH, ein Unternehmen der KPS AG RELEVANCE
  44. 44. KPS digital GmbH, ein Unternehmen der KPS AG FINAL 
 STORYBOARD 
 WIREFRAME
  45. 45. MOCKUP
  46. 46. KPS digital GmbH, ein Unternehmen der KPS AG WIREFRAMES ARE SKELETON. MOCKUPS ARE SKIN.
  47. 47. KPS digital GmbH, ein Unternehmen der KPS AG HIGH FIDELITY UI MOCKUP FULL OF FINISHED MATURE IDEAS
  48. 48. PROTOTYPE
  49. 49. KPS digital GmbH, ein Unternehmen der KPS AG VALIDATING UX-DESIGN EVALUATING THE USABILITY OF PROPOSED UX DESIGNS FOR AN EXISTING SYSTEM
  50. 50. KPS digital GmbH, ein Unternehmen der KPS AG EXPERIENCE ACTUAL CONTENT
  51. 51. KPS digital GmbH, ein Unternehmen der KPS AG INTERACT WITH THE UI IN A WAY SIMILAR TO THE FINAL PRODUCT
  52. 52. KPS digital GmbH, ein Unternehmen der KPS AG PREDICT AND SOLVE USABILITY PROBLEMS BEFORE FURTHER DEVELOPMENT
  53. 53. KPS digital GmbH, ein Unternehmen der KPS AG WIREFRAMES AND PROTOTYPING WITH HTML
  54. 54. KPS digital GmbH, ein Unternehmen der KPS AG {{mustache.js}}
  55. 55. KPS digital GmbH, ein Unternehmen der KPS AG <h1>{{header}}</h1> {{#bug}} {{/bug}} {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} {{#empty}} <p>The list is empty.</p> {{/empty}} mustache
  56. 56. KPS digital GmbH, ein Unternehmen der KPS AG { "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ], "empty": false } JSON
  57. 57. KPS digital GmbH, ein Unternehmen der KPS AG <h1>Colors</h1> <li><strong>red</strong></li> <li><a href="#Green">green</a></li> <li><a href="#Blue">blue</a></li> HTML
  58. 58. KPS digital GmbH, ein Unternehmen der KPS AG mustache + JSON = HTML
  59. 59. KPS digital GmbH, ein Unternehmen der KPS AG Testing in real devices
  60. 60. USES OF PROTOTYPES
  61. 61. KPS digital GmbH, ein Unternehmen der KPS AG Sketches Visual Design Prototype Proof of Concept Prototype Interactive Wireframe Rich Interactive Wireframe Production „Ready“ Mockup As research tool Content + Layout UI DesignLayout + Interaction Content + Layout + Interaction + UI Wireframe
 Sketches
  62. 62. KPS digital GmbH, ein Unternehmen der KPS AG Sketches Visual Design Prototype Proof of Concept Prototype Interactive Wireframe Rich Interactive Wireframe Production „Ready“ Mockup As research tool Content + Layout UI DesignLayout + Interaction Content + Layout + Interaction + UI Wireframe
 Sketches HTML + CSS HTML + CSS
  63. 63. KPS digital GmbH, ein Unternehmen der KPS AG SKETCHES, WIREFRAME, PROTOTYPE, MOCKUP: LOOK DIFFERENT, THEY COMMUNICATE SOMETHING DIFFERENT AND THEY SERVE DIFFERENT PURPOSES.
  64. 64. KPS digital GmbH, ein Unternehmen der KPS AG CRITERIA FOR PICKING THE RIGHT TOOL
  65. 65. KPS digital GmbH, ein Unternehmen der KPS AG AUDIENCE
  66. 66. KPS digital GmbH, ein Unternehmen der KPS AG INTENT
  67. 67. KPS digital GmbH, ein Unternehmen der KPS AG FAMILIARITY AND LEARNABILITY
  68. 68. KPS digital GmbH, ein Unternehmen der KPS AG COST
  69. 69. KPS digital GmbH, ein Unternehmen der KPS AG COLLABORATION
  70. 70. KPS digital GmbH, ein Unternehmen der KPS AG DISTRIBUTION
  71. 71. KPS digital GmbH, ein Unternehmen der KPS AG THROWAWAY VERSUS REUSABLE
  72. 72. KPS digital GmbH, ein Unternehmen der KPS AG IMPLEMENTING PROTOTYPING IN THE PROCESS
  73. 73. KPS digital GmbH, ein Unternehmen der KPS AG PROCESS
  74. 74. KPS digital GmbH, ein Unternehmen der KPS AG Personas User Flows Information Architecture Wireframe Prototypes User Testing Mockups Implementation HTML & CSS User Testing Review Validation PROCESS
  75. 75. KPS digital GmbH, ein Unternehmen der KPS AG UX
  76. 76. KPS digital GmbH, ein Unternehmen der KPS AG UX UI
  77. 77. KPS digital GmbH, ein Unternehmen der KPS AG Personas User Flows Information Architecture Wireframe Prototypes User Testing Review UX UI
  78. 78. KPS digital GmbH, ein Unternehmen der KPS AG Personas User Flows Information Architecture Wireframe Prototypes User Testing Review UX User Testing Mockups Implementation HTML & CSS Review UI
  79. 79. KPS digital GmbH, ein Unternehmen der KPS AG Personas User Flows Information Architecture Wireframe Prototypes User Testing Review UX User Testing Mockups Implementation HTML & CSS Review HTML + CSS + jQuery HTML + CSS + jQueryUI
  80. 80. KPS digital GmbH, ein Unternehmen der KPS AG LOW FIDELITY MEDIUM FIDELITY HIGH FIDELITY
  81. 81. KPS digital GmbH, ein Unternehmen der KPS AG LOW FIDELITY MEDIUM FIDELITY HIGH FIDELITY Wireframe Personas User Flows Information Architecture Prototypes User Testing Review UX
  82. 82. KPS digital GmbH, ein Unternehmen der KPS AG LOW FIDELITY MEDIUM FIDELITY HIGH FIDELITY Wireframe Personas User Flows Information Architecture Prototypes User Testing Review UX User Testing Mockups Implementation HTML & CSS Review UI
  83. 83. KPS digital GmbH, ein Unternehmen der KPS AG CUSTOMER-DRIVEN DESIGN Wireframe Personas User Flows Information Architecture Prototypes User Testing Review UX
  84. 84. KPS digital GmbH, ein Unternehmen der KPS AG THE BENEFITS OF CUSTOMER-DRIVEN DESIGN DUE TO EARLY TESTING
  85. 85. KPS digital GmbH, ein Unternehmen der KPS AG REFINE THE PAGE FLOW, NOT THE PAGES
  86. 86. GET BETTER AND MORE HONEST FEEDBACK
  87. 87. KPS digital GmbH, ein Unternehmen der KPS AG GREAT FOR A/B TESTING
  88. 88. KPS digital GmbH, ein Unternehmen der KPS AG WORK FROM LOW-FIDELITY TO HIGH-FIDELITY
  89. 89. KPS digital GmbH, ein Unternehmen der KPS AG THE BENEFITS OF HTML PROTOTYPING
  90. 90. KPS digital GmbH, ein Unternehmen der KPS AG TESTING IN THE BROWSER
  91. 91. KPS digital GmbH, ein Unternehmen der KPS AG TESTING WITH REAL DEVICES
  92. 92. KPS digital GmbH, ein Unternehmen der KPS AG PORTRAIT- AND LANDSCAPE
  93. 93. KPS digital GmbH, ein Unternehmen der KPS AG PERFORMANCE TESTING
  94. 94. KPS digital GmbH, ein Unternehmen der KPS AG INTERACTION ON A REAL DEVICES
  95. 95. THANKS FOR YOUR TIME!
  96. 96. PETER.ROZEK@KPS.DE QUESTION? FOR ELLEN KPS digital GmbH, ein Unternehmen der KPS AG

×