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.
9. KPS digital GmbH, ein Unternehmen der KPS AG
EIGHTIES, ONE
COMPUTER ONE USER
10. KPS digital GmbH, ein Unternehmen der KPS AG
TODAY,
Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
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. Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
13. KPS digital GmbH, ein Unternehmen der KPS AG
90% CHANGE THE DEVICES
IN A TASK
SEQUENTIAL SCREENING ACTIVITIES
14. WE HAVE AN ECOSYSTEM
OF DEVICES
Bild: http://www.webdesignerdepot.com/2015/03/the-future-of-responsive-web-design/
19. THE GOAL OF PROTOTYPING
IS TO PROVIDE A REALISTIC
AND COHESIVE IMPRESSION
OF THE VISUAL DESIGN.
20. KPS digital GmbH, ein Unternehmen der KPS AG
MANY TOOLS AND
APPROACHES FOR
PROTOTYPING
ORDERED BY
VISUAL & FUNCTIONAL FIDELITY
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. 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. 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. 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. KPS digital GmbH, ein Unternehmen der KPS AG
WIREFRAME
SKETCHES
PROTOTYPE
MOCKUP
31. KPS digital GmbH, ein Unternehmen der KPS AG
WIREFRAMES ARE A LOW-
FIDELITY REPRESENTATION
OF A DESIGN
32. LOW-PROTOTYPE:
A PLAN FOR HOW IT WORKS
NOT HOW IT LOOKS
http://marvelcinematicuniverse.wikia.com/wiki/Iron_Man_(film)
33. KPS digital GmbH, ein Unternehmen der KPS AG
THINK ABOUT USE CASES
AND USER FLOW
34. KPS digital GmbH, ein Unternehmen der KPS AG
THINK ABOUT INTERACTION
AND ANIMATION
INTERACTIVE WIREFRAMES
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. KPS digital GmbH, ein Unternehmen der KPS AG
TARGET AUDIENCE
RELEVANCE
PARETO PRINCIPLE
37. KPS digital GmbH, ein Unternehmen der KPS AG
OBJECT RELEVANCE
PERCEPTUAL PSYCHOLOGY
38. KPS digital GmbH, ein Unternehmen der KPS AG
ORGANIZATION OF CONTENT
AND STRUCTURE
STORYBOARD WIREFRAME
39. KPS digital GmbH, ein Unternehmen der KPS AG
EXPLORATORY PERSONAS
THE VARIOUS TARGET
AUDIENCES ARE ASSIGNED
VALUE CREATION POTENTIALS
56. 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
57. 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
58. 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
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
63. 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
64. KPS digital GmbH, ein Unternehmen der KPS AG
SKETCHES, WIREFRAME,
PROTOTYPE, MOCKUP:
LOOK DIFFERENT, THEY COMMUNICATE
SOMETHING DIFFERENT AND THEY SERVE
DIFFERENT PURPOSES.
65. KPS digital GmbH, ein Unternehmen der KPS AG
CRITERIA FOR PICKING THE
RIGHT TOOL
75. 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
78. KPS digital GmbH, ein Unternehmen der KPS AG
Personas
User Flows
Information Architecture
Wireframe
Prototypes
User Testing
Review
UX
UI
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
UI
80. 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
81. KPS digital GmbH, ein Unternehmen der KPS AG
LOW FIDELITY
MEDIUM FIDELITY
HIGH FIDELITY
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
83. 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
84. KPS digital GmbH, ein Unternehmen der KPS AG
CUSTOMER-DRIVEN DESIGN
Wireframe
Personas
User Flows
Information Architecture
Prototypes
User Testing
Review
UX
85. KPS digital GmbH, ein Unternehmen der KPS AG
THE BENEFITS OF
CUSTOMER-DRIVEN DESIGN
DUE TO EARLY TESTING
86. KPS digital GmbH, ein Unternehmen der KPS AG
REFINE THE PAGE FLOW,
NOT THE PAGES