1.
CROSS-DEVICE
EXPERIENCE DESIGN
WITH HTML-PROTOTYPING
WEBTECHCON, 23. - 27. OKTOBER 2016, MÜNCHEN

2.
PETER ROZEK

3.
SENIOR UX MANAGER
KPS digital GmbH, ein Unternehmen der KPS AG

4.
KPS DIGITAL GMBH
KPS AG
KPS digital GmbH, ein Unternehmen der KPS AG

5.
WEBINTERFACE
KPS digital GmbH, ein Unternehmen der KPS AG

6.
KPS digital GmbH, ein Unternehmen der KPS AG
@Giles Colborne
„People use any platform
to do anything.“

7.
KPS digital GmbH, ein Unternehmen der KPS AG
EIGHTIES,

8.
KPS digital GmbH, ein Unternehmen der KPS AG
EIGHTIES, ONE
COMPUTER

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/

15.
KPS digital GmbH, ein Unternehmen der KPS AG
USERS & THEIR
NEEDS?

16.
KPS digital GmbH, ein Unternehmen der KPS AG
CROSS-DEVICE
EXPERIENCE !
TO DO ANYTHING ON ANY PLATFORM

17.
HOW CAN INCREASE
PROTOTYPING THE CROSS
DEVICE EXPERIENCE?

18.
SIMULATES USER
INTERFACE INTERACTION

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

26.
SKETCHES
AS RESEARCH TOOL

27.
KPS digital GmbH, ein Unternehmen der KPS AG
CREATING A SHARED
COMMUNICATION

28.
KPS digital GmbH, ein Unternehmen der KPS AG
VALIDATING UX DIRECTION
WITH STAKEHOLDERS

29.
KPS digital GmbH, ein Unternehmen der KPS AG
INVITES CRITIQUE

30.
WIREFRAME

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

40.
KPS digital GmbH, ein Unternehmen der KPS AG
PARETO
WIREFRAME

41.
KPS digital GmbH, ein Unternehmen der KPS AG
PARETO
WIREFRAME

42.
KPS digital GmbH, ein Unternehmen der KPS AG
EACH LEVEL DENOTES A DIFFERENT
ATTENTION VALUE THAT IS “TRIGGERED” IN
THE USER:

43.
KPS digital GmbH, ein Unternehmen der KPS AG
RELEVANCE

44.
KPS digital GmbH, ein Unternehmen der KPS AG
FINAL
STORYBOARD
WIREFRAME

45.
MOCKUP

46.
KPS digital GmbH, ein Unternehmen der KPS AG
WIREFRAMES ARE
SKELETON. MOCKUPS ARE
SKIN.

47.
KPS digital GmbH, ein Unternehmen der KPS AG
HIGH FIDELITY UI MOCKUP
FULL OF FINISHED MATURE
IDEAS

48.
PROTOTYPE

49.
KPS digital GmbH, ein Unternehmen der KPS AG
VALIDATING UX-DESIGN
EVALUATING THE USABILITY OF PROPOSED
UX DESIGNS FOR AN EXISTING SYSTEM

50.
KPS digital GmbH, ein Unternehmen der KPS AG
EXPERIENCE ACTUAL
CONTENT

51.
KPS digital GmbH, ein Unternehmen der KPS AG
INTERACT WITH THE UI IN A
WAY SIMILAR TO THE FINAL
PRODUCT

52.
KPS digital GmbH, ein Unternehmen der KPS AG
PREDICT AND SOLVE
USABILITY PROBLEMS
BEFORE FURTHER
DEVELOPMENT

53.
KPS digital GmbH, ein Unternehmen der KPS AG
WIREFRAMES AND
PROTOTYPING WITH HTML

54.
KPS digital GmbH, ein Unternehmen der KPS AG
{{mustache.js}}

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.
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.
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.
KPS digital GmbH, ein Unternehmen der KPS AG
mustache + JSON = HTML

59.
KPS digital GmbH, ein Unternehmen der KPS AG
Testing in real devices

60.
USES OF PROTOTYPES

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.
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.
KPS digital GmbH, ein Unternehmen der KPS AG
SKETCHES, WIREFRAME,
PROTOTYPE, MOCKUP:
LOOK DIFFERENT, THEY COMMUNICATE
SOMETHING DIFFERENT AND THEY SERVE
DIFFERENT PURPOSES.

64.
KPS digital GmbH, ein Unternehmen der KPS AG
CRITERIA FOR PICKING THE
RIGHT TOOL

65.
KPS digital GmbH, ein Unternehmen der KPS AG
AUDIENCE

66.
KPS digital GmbH, ein Unternehmen der KPS AG
INTENT

67.
KPS digital GmbH, ein Unternehmen der KPS AG
FAMILIARITY AND
LEARNABILITY

68.
KPS digital GmbH, ein Unternehmen der KPS AG
COST

69.
KPS digital GmbH, ein Unternehmen der KPS AG
COLLABORATION

70.
KPS digital GmbH, ein Unternehmen der KPS AG
DISTRIBUTION

71.
KPS digital GmbH, ein Unternehmen der KPS AG
THROWAWAY VERSUS
REUSABLE

72.
KPS digital GmbH, ein Unternehmen der KPS AG
IMPLEMENTING
PROTOTYPING IN THE
PROCESS

73.
KPS digital GmbH, ein Unternehmen der KPS AG
PROCESS

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.
KPS digital GmbH, ein Unternehmen der KPS AG
UX

76.
KPS digital GmbH, ein Unternehmen der KPS AG
UX
UI

77.
KPS digital GmbH, ein Unternehmen der KPS AG
Personas
User Flows
Information Architecture
Wireframe
Prototypes
User Testing
Review
UX
UI

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.
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.
KPS digital GmbH, ein Unternehmen der KPS AG
LOW FIDELITY
MEDIUM FIDELITY
HIGH FIDELITY

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.
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.
KPS digital GmbH, ein Unternehmen der KPS AG
CUSTOMER-DRIVEN DESIGN
Wireframe
Personas
User Flows
Information Architecture
Prototypes
User Testing
Review
UX

84.
KPS digital GmbH, ein Unternehmen der KPS AG
THE BENEFITS OF
CUSTOMER-DRIVEN DESIGN
DUE TO EARLY TESTING

85.
KPS digital GmbH, ein Unternehmen der KPS AG
REFINE THE PAGE FLOW,
NOT THE PAGES

86.
GET BETTER AND MORE
HONEST FEEDBACK

87.
KPS digital GmbH, ein Unternehmen der KPS AG
GREAT FOR A/B TESTING

88.
KPS digital GmbH, ein Unternehmen der KPS AG
WORK FROM LOW-FIDELITY
TO HIGH-FIDELITY

89.
KPS digital GmbH, ein Unternehmen der KPS AG
THE BENEFITS OF HTML
PROTOTYPING

90.
KPS digital GmbH, ein Unternehmen der KPS AG
TESTING IN THE BROWSER

91.
KPS digital GmbH, ein Unternehmen der KPS AG
TESTING WITH REAL
DEVICES

92.
KPS digital GmbH, ein Unternehmen der KPS AG
PORTRAIT- AND LANDSCAPE

93.
KPS digital GmbH, ein Unternehmen der KPS AG
PERFORMANCE TESTING

94.
KPS digital GmbH, ein Unternehmen der KPS AG
INTERACTION ON A REAL
DEVICES

95.
THANKS FOR YOUR TIME!

96.
PETER.ROZEK@KPS.DE
QUESTION?
FOR ELLEN
KPS digital GmbH, ein Unternehmen der KPS AG