Sketching the UX Experience Antonio De Pasquale Senior Interaction Designer at frog @myinteraction

My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan A little about me I'm specialized in digital interfaces & user experience I'm passioned about the "aesthetics" of movement I'm from Sicily and I love the sea. @myinteraction

Interaction Vs Visual Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow Motion prototype Prototype ... Concept Visual research Moodboard Grid design Iconography Typography UI Elements Screen design Motion design Prototype ... Most people think like this

Interaction & Visual In reality is like this

Sketching the UX Experience Introduction A different design approach The responsive age Visualizing the UX Design prototype Levels of fidelity The right tool Make it real!

INTRODUCTION

A different design approach 1 Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. ANTOINE  DE  SAINT  EXUPÉRY

What is the User Experience? Introduction A different design approach Sketching the user experience User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.

Research Concept Wireframe Visual Develop User test Document A typical waterfall UX design process From concept design to the final product on the market Introduction A different design approach Sketching the user experience

Waterfall model doesn’t make that much sense in the responsive age. That model worked 3/4 years ago when we lived in a different context with different devices It's over Introduction A different design approach Sketching the user experience

Yesterday Desktop app, fixed grid, mobile interfaces Introduction A different design approach Sketching the user experience

Introduction A different design approach Sketching the user experience N95 first release to the market in Italy: March 2007 - 700€ http://www.youtube.com/watch?v=U-PxHUdur9Q

Introduction A different design approach Sketching the user experience Today Smart Tv, Web App, Mobile, Console, Responsive design

Amazon Kindle Fire HD - 150€ http://www.youtube.com/watch?v=ryYPduoGNjc Introduction A different design approach Sketching the user experience

A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test Prototype Sketch Review Research Concept

Research Concept A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test Prototype Sketch Review

The responsive age 2 Form follows function DIETER  RAMS

The responsive age Sketching the user experience Introduction

The responsive age Sketching the user experience What is the shape of digital experiences? The evolution of technology is changing the boundaries of design Introduction

Clear, iphone & Mac app https://vimeo.com/51690799 Video Introduction Sketching the user experience The responsive age

Sketching the user experience The responsive age Same contents, different shapes Web site, application, digital software is not anymore a static template. It's a frame in an extended fluid experience Introduction

Sketching the user experience The responsive age 1920 px 1440 px 1024 px 320 px Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviors on different devices with different proportions & resolutions Our job now is to create future friendly design ecosystems Introduction

From templates to the experience Sketching the user experience The responsive age Introduction

Consistent Signature Continuos Transferable Shareable Augmented Context Users Patterns to help understand and define strategies for the multiscreen world Sketching the user experience The responsive age Introduction

Unified design language system across products & services Sketching the user experience The responsive age Consistent Introduction

Sketching the user experience The responsive age Tailored unique brand experience that makes the products distinguishable with a consistent interaction model Signature Introduction

Continuos Synchronize your data, creating a continuos multiscreen experience Sketching the user experience The responsive age Introduction

Enable content shifting across multiple devices, sharing screens or in case of simultaneous use Sketching the user experience The responsive age Transferable Introduction

Shareable Allow multiple actors to have a simultaneous interaction, or share and customize the same device The responsive age Sketching the user experience Introduction

Augmented Physical interactions go far beyond the digital screens The responsive age Sketching the user experience Introduction

Visualizing the UX 3 We like design to be visually powerful, intellectually elegant, and above all timeless. MASSIMO  VIGNELLI

Introduction Visualizing the UX Sketching the user experience Setting a vision Shaping an idea is a continuous process that needs many iterations cycles for making it in focus

Introduction Visualizing the UX Sketching the user experience Analyze problems & constrains. Refine ideas and explore all the details to make it possible Explore the details

Introduction Visualizing the UX Sketching the user experience Visualize & prototype your concept. Get the feel of the real impact in a physical way Feel the experience

Paper prototyping Interactive wireframe Motion wireframe HTML Design Our tools How we can sketch & prototype the user experience? Introduction Visualizing the UX Sketching the user experience

Introduction Visualizing the UX Sketching the user experience Low fidelity / No interactive

Paper prototyping Introduction Visualizing the UX Sketching the user experience Low fidelity / Low interaction

Introduction Visualizing the UX Sketching the user experience

Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Interactive wireframes

Interactive wireframes Introduction Visualizing the UX Sketching the user experience Medium fidelity / Medium interaction

Motion prototype Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Keynote Animated Prototype http://www.lukew.com/ff/entry.asp?1171

Introduction Visualizing the UX Sketching the user experience High fidelity / Low interaction Motion prototype Redefining Android (Frog) http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490

HTML Design Introduction Visualizing the UX Sketching the user experience High fidelity / High interaction

Paper prototyping Interactive wireframes Motion wireframes HTML Design Introduction Visualizing the UX Sketching the user experience Love Quick  and  dirty Easy  to  do Fast  feedback Very  inclusive   Hate Not  quick  enough Too  dirty Hard  to  share Not  self  explaining Love Detailed  and  solid Good  for  defining   content  &  explain   behaviours Hate Hard  for  user  tesCng To  funcConal  with  less experience  of  the  flow The good and the bad Love EmoConal High  quality  feedback TesCng  dynamic   behaviours Hate Time  to  build  them SoHware  knowledge Work  beJer  in  an   advanced  state Love Test  interacCvity Perfect  for  tesCng   process  &  flow Experience  in  contest Hate SoHware  knowledge Time  for  building  the   prototype LimiCng  the  design   process

DESIGN PROTOTYPE

Levels of fidelity 1 It’s the little details that are vital. Little things make big things happen. COACH  JOHN  WOODEN

Levels of fidelity Sketching the user experience It's a User centered design methodology for designing, communicating ad evaluating user interfaces but also for getting feedback as soon as possible and validating the interaction model What is Rapid prototyping? Design prototype

Sketching the user experience Release Early, Release Often Always test, to verify all the different aspects of your design with different levels of fidelity according to the stage of the project Levels of fidelity Design prototype

Sketching the user experience Fail Early, Fail Often It's not important to close everything for testing our design concept. Every stage is a possible entry point to verify, discuss, iterate, design. Levels of fidelity Design prototype

High fidelity Low fidelity User test Concept evaluation Sketching the user experience There is no such thing as high or low fidelity, only appropriate fidelity that allows you to achieve the goals you've set for doing a prototype Prototype archetype Vs Fidelity  Hand  Sketch Linked  pdf InteracCve   Wireframe   Video  simulaCon Semi  funcConal   prototype Full  funcConal   prototype Levels of fidelity Design prototype

The right tool 2 Give me a lever and I can move the world. ARCHIMEDE  DI  SIRACUSA

Functional Experience Technologist Designer What is the perfect tool? It depends. Depends on what you have to test, what is your audience, the stage of the project and also your personal skills ? Sketching the user experience The right tool Design prototype

Short cycle Long & progressive A prototype life cycle The life of a prototype is directly connected to the problem it has to solve Design Evaluate Communicate Iterate More cycles, more refinements: better results! The right tool Design prototype Sketching the user experience

What is relevant is Communicate That's our job The right tool Design prototype Sketching the user experience

Functional Experience HTML/Code Adobe  edge Fireworks AGer  effects Keynote Paper  prototype Proto  UI InteracNve  pdf The right tool is the one that helps you in communicate your concept We need to explain complex problems & big project in a simple way and test if they're clear and meaningful to people. There is no perfect tool The right tool Design prototype Sketching the user experience

Make it real 3 What would life be if we had no courage to attempt anything? VINCENT  VAN  GOGH

FURTHER READING

Further reading Sketching the user experience Sketching the user experience Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton 2007 Designing interactions Bill Moggridge 2007

Further reading Sketching the user experience Sketching the user experience Prototype tools UX Culture Design Workflow Wireframing Responsive  design   workflow  on  mulCple   touchpoints http://viljamis.com/blog/2012/ responsive-workflow/ Reference & Insights Design  process   in  the  responsive  age http://www.slideshare.net/ pkattera/design-process-for- responsive-web-design Does  form  follow   funcCon? http://www.smashingmagazine.com/ 2010/03/23/does-form-follow- function/ Embracing   the  UX  Spectrum http://uxmag.com/articles/ embracing-the-ux-spectrum Visualizing   the  user  experience http://www.slideshare.net/ grantrobinson/visualising-the- user-experience-2261349 Where  wireframes are  concerned http://uxmag.com/articles/where- wireframes-are-concerned Design  beJer  &  faster with  rapid  prototyping http://www.smashingmagazine.com/ 2010/06/16/design-better-faster-with- rapid-prototyping/ Proto.io   http://proto.io/ Paper  stencil  &  prototype   http://www.uistencils.com/

Thanks! Follow me on twitter @myinteraction to continue the discussion!