Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enabling Design for a Complex Reality

Florian Plank
November 07, 2014

Enabling Design for a Complex Reality

Responsive Design was the reaction of creators on the web to cope under the mobile revolution. Exponentially growing fragmentation in screen resolution and density, processing power and memory, input devices and bandwidth pushed classic design approaches to it’s limits.

With the rise of the ‘internet of things’, the second coming of Augmented Reality and the ‘ubiquitous browser’ we have reached an unseen level of UI complexity. — Strategic design for this new reality requires better tools than box models and Photoshop.

Prototypes to the rescue! — The web and the browser as platform have become truly ubiquitous and allow us to build prototypes for a large variety of web and non–web environments with a well understood, progressively developed and comparably simple technology stack in very small time frames. Design for complex circumstances becomes transparent, tangible and before all else — it becomes fast again.

This talk will explore our approach to design through prototyping, show why we believe that prototypes are the way to go and explain how we’re using a technology stack selected for change to our advantage.

Florian Plank

November 07, 2014
Tweet

More Decks by Florian Plank

Other Decks in Design

Transcript

  1. DESIGN FOR A
    COMPLEX REALITY

    View Slide

  2. TRUTH

    View Slide

  3. ”If good design tells the truth, poor
    design tells a lie, a lie usually related
    to the getting or abusing of power.”
    !
    ROBERT GRUDIN

    View Slide

  4. The missing design proof

    View Slide

  5. Deceptive design
    vs.
    Incorrect design

    View Slide

  6. http://darkpatterns.org/

    View Slide

  7. View Slide

  8. View Slide

  9. “Agile” all the things!

    View Slide

  10. The wrong tools

    View Slide

  11. A complex reality

    View Slide

  12. How did we get here?

    View Slide

  13. View Slide

  14. http://wikipedia.org/

    View Slide

  15. http://flickr.com/photos/adactio/

    View Slide

  16. Responsive design

    View Slide

  17. View Slide

  18. Fragmentation of screen sizes
    is just one of many symptoms

    View Slide

  19. Mobile first

    View Slide

  20. Offline first

    View Slide

  21. View Slide

  22. But wait, there’s more!

    View Slide

  23. http://macrumors.com/

    View Slide

  24. http://pcmag.com/

    View Slide

  25. http://androidpolice.com/

    View Slide

  26. http://androidpolice.com/

    View Slide

  27. The “tweeting fridge”–problem

    View Slide

  28. http://wikipedia.org/

    View Slide

  29. Still more?

    View Slide

  30. View Slide

  31. The upcoming generation
    will exclusively use mobile devices

    View Slide

  32. The upcoming generation
    will no longer distinguish
    between online and offline

    View Slide

  33. It’s a blurry mess but at least it
    plugs into the internet.

    View Slide

  34. Blaming the tools

    View Slide

  35. ”Men have become the tools
    of their tools.”
    !
    HENRY DAVID THOREAU

    View Slide

  36. (WARNING: Metaphor ahead)

    View Slide

  37. View Slide

  38. — And that’s pretty much it.*
    (*Slight exaggeration for effect.
    Please don’t send me angry emails.)

    View Slide

  39. Just kidding,
    we still have box models.

    View Slide

  40. View Slide

  41. We need new tools

    View Slide

  42. Prototyping as Tool
    for Strategic Design

    View Slide

  43. ”We can only see a short distance
    ahead, but we can see plenty there
    that needs to be done.”
    !
    ALAN TURING

    View Slide

  44. A design proof

    View Slide

  45. Work across silos

    View Slide

  46. Support short iterations

    View Slide

  47. Involve the user

    View Slide

  48. Involve designers early–on

    View Slide

  49. Enable sustainable solutions,
    not just another product

    View Slide

  50. The 10.000ft view

    View Slide

  51. POC
    Business
    prototype
    Production

    View Slide

  52. The rules

    View Slide

  53. Assumption is the root of all evil.
    1

    View Slide

  54. Every step of ideation must be
    followed by a step of validation.
    2

    View Slide

  55. Design should happen as close as
    possible to the client.
    3

    View Slide

  56. Constant change is not only
    anticipated but supported
    by all used tools.
    4

    View Slide

  57. 5
    Prototypes don’t have to be
    dead ends.

    View Slide

  58. The expectation

    View Slide

  59. Allow for high
    development speeds

    View Slide

  60. Adapt to change

    View Slide

  61. Increase transparency

    View Slide

  62. Simplify variations

    View Slide

  63. The process

    View Slide

  64. Prototyping
    Business prototype
    Feature
    Prototype
    Production
    Invalid feature
    Validation
    Integration

    View Slide

  65. Workflow
    Concept Design Implementation
    Prototyping

    View Slide

  66. A word on education

    View Slide

  67. Prototyping using
    Web Technology

    View Slide

  68. View Slide

  69. Enabling Innovation

    View Slide

  70. 1. Web technology (HTML, CSS, JavaScript)
    2.Meta languages (Haml, Slim, Sass, CoffeeScript)
    3.Development stack built on interpreted languages
    (Ruby, JavaScript)
    Speed

    View Slide

  71. 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

    View Slide

  72. 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

    View Slide

  73. 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

    View Slide

  74. 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

    View Slide

  75. Example

    View Slide

  76. 1. Flexible
    2.Extendable
    3.Modular
    4. Convention over configuration
    Requirements on the stack

    View Slide

  77. Example stack
    Server Client Instances
    WS
    Server
    External inputs

    View Slide

  78. Server
    Server
    1. Ruby
    2.Middleman
    3.Rack

    View Slide

  79. Client Instances
    Client instances
    1. HTML
    2.CSS
    3.JavaScript
    4. SVG templating

    View Slide

  80. WS Server
    1. JavaScript
    2.Node.js
    3.Express
    4. Einaros/WS
    5. API/Access
    WS
    Server

    View Slide

  81. Components
    1. Mark–up
    2.Styles
    3.Functionality

    View Slide

  82. Shared resources
    1. Versioned
    2.Isolated
    3.Development using Bundler
    4. Distributed as Ruby Gem via Github

    View Slide

  83. View Slide

  84. Danke!
    [email protected] / @polarblau
    www.siili.fi

    View Slide