Page 2
DESIGN FOR A
COMPLEX REALITY
Page 4
”If good design tells the truth, poor design tells a lie, a lie usually related to the getting or abusing of power.”
!
ROBERT GRUDIN
Page 5
The missing design proof
Page 6
Deceptive design vs.
Incorrect design
Page 7
http://darkpatterns.org/
Page 10
“Agile” all the things!
Page 12
A complex reality
Page 13
How did we get here?
Page 15
http://wikipedia.org/
Page 16
http://flickr.com/photos/adactio/
Page 17
Responsive design
Page 19
Fragmentation of screen sizes is just one of many symptoms
Page 23
But wait, there’s more!
Page 24
http://macrumors.com/
Page 25
http://pcmag.com/
Page 26
http://androidpolice.com/
Page 27
http://androidpolice.com/
Page 28
The “tweeting fridge”–problem
Page 29
http://wikipedia.org/
Page 32
The upcoming generation will exclusively use mobile devices
Page 33
The upcoming generation will no longer distinguish
between online and offline
Page 34
It’s a blurry mess but at least it plugs into the internet.
Page 35
Blaming the tools
Page 36
”Men have become the tools of their tools.”
!
HENRY DAVID THOREAU
Page 37
(WARNING: Metaphor ahead)
Page 39
— And that’s pretty much it.*
(*Slight exaggeration for effect. Please don’t send me angry emails.)
Page 40
Just kidding, we still have box models.
Page 42
We need new tools
Page 43
Prototyping as Tool for Strategic Design
Page 44
”We can only see a short distance ahead, but we can see plenty there
that needs to be done.” !
ALAN TURING
Page 46
Work across silos
Page 47
Support short iterations
Page 49
Involve designers early–on
Page 50
Enable sustainable solutions, not just another product
Page 51
The 10.000ft view
Page 52
POC Business prototype
Production
Page 54
Assumption is the root of all evil.
1
Page 55
Every step of ideation must be followed by a step of validation.
2
Page 56
Design should happen as close as possible to the client.
3
Page 57
Constant change is not only anticipated but supported
by all used tools.
4
Page 58
5Prototypes don’t have to be
dead ends.
Page 60
Allow for high development speeds
Page 62
Increase transparency
Page 63
Simplify variations
Page 65
Prototyping
Business prototype
Feature
Prototype
Production
Invalid feature
Validation
Integration
Page 66
Workflow
Concept Design Implementation
Prototyping
Page 67
A word on education
Page 68
Prototyping using Web Technology
Page 70
Enabling Innovation
Page 71
1. Web technology (HTML, CSS, JavaScript)
2. Meta languages (Haml, Slim, Sass, CoffeeScript)
3. Development stack built on interpreted languages (Ruby, JavaScript)
Speed
Page 72
1. Deployed to publicly available servers with no dependencies on other systems
2. Accountability of the design
3. Accessible through modern and widely available browsers / no prerequisites
4. Higher availability of experts
5. Lower learning curve to build the skillset up
Transparency
Page 73
1. Different takes on features – support for branching and merging through SCM (Git)
2. Visual variations for e.g. map skinning, app skinning or condition-based permutations
3. Variations of UI features per device/client
Variations
Page 74
1. Multi-screen prototypes
2. Various input methods (touch, indirect, sensory)
3. Communication between devices (e.g. location sharing via a socket server)
4. Technology embeds
Extending the browser
Page 75
1. Tangible design process
2. Present design intent clearly or even bypass steps like wire framing
3. (Very) short iteration cycles
4. Enable user testing or validation early on
5. Possible to utilize web analytics to track user behaviour, detect potential pitfalls and identify opportunities from data with less resources
Validation
Page 77
1. Flexible
2. Extendable
3. Modular
4. Convention over configuration
Requirements on the stack
Page 78
Example stack
Server Client InstancesWS
Server
External inputs
Page 79
Server
Server
1. Ruby
2. Middleman
3. Rack
Page 80
Client Instances
Client instances
1. HTML
2. CSS
3. JavaScript
4. SVG templating
Page 81
WS Server
1. JavaScript
2. Node.js
3. Express
4. Einaros/WS
5. API/Access
WS
Server
Page 82
Components
1. Mark–up
2. Styles
3. Functionality
Page 83
Shared resources
1. Versioned
2. Isolated
3. Development using Bundler
4. Distributed as Ruby Gem via Github
Page 85
[email protected] / @polarblau
www.siili.fi