sketching the user experience

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

Upload: antonio-de-pasquale

Post on 21-Apr-2017

53.388 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Sketching the user experience

Sketchingthe UX Experience

Antonio De PasqualeSenior Interaction Designer at frog

@myinteraction

Page 2: Sketching the user experience

My name is Antonio De PasqualeI'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

Page 3: Sketching the user experience

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

Page 4: Sketching the user experience

Interaction & Visual

In reality is like this

Page 5: Sketching the user experience

Sketchingthe UX Experience

Introduction

A different design approachThe responsive ageVisualizing the UX

Design prototype

Levels of fidelityThe right toolMake it real!

Page 6: Sketching the user experience

INTRODUCTION

Page 7: Sketching the user experience

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

Page 8: Sketching the user experience

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.

Page 9: Sketching the user experience

Research Concept Wireframe Visual Develop User testDocument

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

Page 10: 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

Page 11: Sketching the user experience

YesterdayDesktop app, fixed grid, mobile interfaces

Introduction A different design approach

Sketching the user experience

Page 12: 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

Page 13: Sketching the user experience

Introduction A different design approach

Sketching the user experience

TodaySmart Tv, Web App, Mobile, Console, Responsive design

Page 14: Sketching the user experience

Amazon Kindle Fire HD - 150€http://www.youtube.com/watch?v=ryYPduoGNjc

Introduction A different design approach

Sketching the user experience

Page 15: Sketching the user experience

A different design workflowThings are changing.

We need to evolve the process

Introduction A different design approach

Sketching the user experience

Wireframe Visual

Develop

User test

PrototypeSketch

Review

Research Concept

Page 16: Sketching the user experience

Research Concept

A different design workflowThings are changing.

We need to evolve the process

Introduction A different design approach

Sketching the user experience

Wireframe Visual

Develop

User test

PrototypeSketch

Review

Page 17: Sketching the user experience

The responsive age

2

Form follows functionDIETER  RAMS

Page 18: Sketching the user experience

The responsive age

Sketching the user experience

Introduction

Page 19: Sketching the user experience

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

Page 20: Sketching the user experience

Clear, iphone & Mac apphttps://vimeo.com/51690799

Video

Introduction

Sketching the user experience

The responsive age

Page 21: Sketching the user experience

Sketching the user experience

The responsive age

Same contents, different shapesWeb site, application, digital software is not anymore a static template.

It's a frame in an extended fluid experience

Introduction

Page 22: Sketching the user experience

Sketching the user experience

The responsive age

1920 px

1440 px

1024 px

320 px

Design for the responsive ageWe 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

Page 23: Sketching the user experience

From templates to the experience

Sketching the user experience

The responsive ageIntroduction

Page 24: Sketching the user experience

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 ageIntroduction

Page 25: Sketching the user experience

Unified design language system across

products & services

Sketching the user experience

The responsive age

Consistent

Introduction

Page 26: Sketching the user experience

Sketching the user experience

The responsive age

Tailored unique brand experience that makes the products

distinguishable with a consistent interaction model

Signature

Introduction

Page 27: Sketching the user experience

Continuos

Synchronize your data, creating a continuos

multiscreen experience

Sketching the user experience

The responsive ageIntroduction

Page 28: Sketching the user experience

Enable content shifting across multiple devices,

sharing screens or in case of simultaneous use

Sketching the user experience

The responsive age

Transferable

Introduction

Page 29: Sketching the user experience

Shareable

Allow multiple actors to have a simultaneous

interaction, or share and customize the same device

The responsive age

Sketching the user experience

Introduction

Page 30: Sketching the user experience

Augmented

Physical interactions go far beyond the

digital screens

The responsive age

Sketching the user experience

Introduction

Page 31: Sketching the user experience

Visualizing the UX

3

We like design to be visually powerful, intellectually elegant, and above all timeless.

MASSIMO  VIGNELLI

Page 32: Sketching the user experience

Introduction Visualizing the UX

Sketching the user experience

Setting a visionShaping an idea is a continuous process that needs

many iterations cycles for making it in focus

Page 33: Sketching the user experience

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

Page 34: Sketching the user experience

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

Page 35: Sketching the user 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

Page 36: Sketching the user experience

Introduction Visualizing the UX

Sketching the user experience

Low fidelity / No interactive

Page 37: Sketching the user experience

Paper prototyping

Introduction Visualizing the UX

Sketching the user experience

Low fidelity / Low interaction

Page 38: Sketching the user experience

Introduction Visualizing the UX

Sketching the user experience

Page 39: Sketching the user experience

Introduction Visualizing the UX

Sketching the user experience

Medium fidelity / Low interaction

Interactive wireframes

Page 40: Sketching the user experience

Interactive wireframes

Introduction Visualizing the UX

Sketching the user experience

Medium fidelity / Medium interaction

Page 41: Sketching the user experience

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

Page 42: Sketching the user experience

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

Page 43: Sketching the user experience

HTML Design

Introduction Visualizing the UX

Sketching the user experience

High fidelity / High interaction

Page 44: Sketching the user experience

Paper prototyping Interactive wireframes Motion wireframes HTML Design

Introduction Visualizing the UX

Sketching the user experience

LoveQuick  and  dirtyEasy  to  doFast  feedbackVery  inclusive  

HateNot  quick  enoughToo  dirtyHard  to  shareNot  self  explaining

LoveDetailed  and  solidGood  for  defining  content  &  explain  behaviours

HateHard  for  user  tesCngTo  funcConal  with  lessexperience  of  the  flow

The good and the bad

LoveEmoConalHigh  quality  feedbackTesCng  dynamic  behaviours

HateTime  to  build  themSoHware  knowledgeWork  beJer  in  an  advanced  state

LoveTest  interacCvityPerfect  for  tesCng  process  &  flowExperience  in  contest

HateSoHware  knowledgeTime  for  building  the  prototypeLimiCng  the  design  process

Page 45: Sketching the user experience

DESIGN PROTOTYPE

Page 46: Sketching the user experience

Levels of fidelity

1

It’s the little details that are vital. Little things make big things happen.

COACH  JOHN  WOODEN

Page 47: Sketching the user experience

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

Page 48: Sketching the user experience

Sketching the user experience

Release Early, Release OftenAlways test, to verify all the different aspects of your design

with different levels of fidelity according to the stage of the project

Levels of fidelityDesign prototype

Page 49: Sketching the user experience

Sketching the user experience

Fail Early, Fail OftenIt'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 fidelityDesign prototype

Page 50: Sketching the user experience

High fidelityLow fidelity

User testConcept 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  

prototypeFull  funcConal  prototype

Levels of fidelityDesign prototype

Page 51: Sketching the user experience

The right tool

2

Give me a lever andI can move the world.

ARCHIMEDE  DI  SIRACUSA

Page 52: Sketching the user experience

FunctionalExperience

TechnologistDesigner

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 toolDesign prototype

Page 53: Sketching the user experience

Short cycleLong &

progressive

A prototype life cycleThe life of a prototype is directly connected to the problem it has to solve

Design

Evaluate

CommunicateIterate

More cycles, more refinements: better results!

The right toolDesign prototype

Sketching the user experience

Page 54: Sketching the user experience

What is relevant is

CommunicateThat's our job

The right toolDesign prototype

Sketching the user experience

Page 55: Sketching the user experience

FunctionalExperience

HTML/CodeAdobe  edgeFireworksAGer  effectsKeynotePaper  prototype Proto  UIInteracNve  pdf

The right tool is the one that helps youin 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 toolDesign prototype

Sketching the user experience

Page 56: Sketching the user experience

Make it real

3

What would life be if we had no courage to attempt anything?

VINCENT  VAN  GOGH

Page 57: Sketching the user experience

FURTHER READING

Page 58: Sketching the user experience

Further readingSketching the user experience

Sketching the user experience

Sketching User Experiences: Getting the Design Right and the Right Design

Bill Buxton2007

Designing interactions

Bill Moggridge2007

Page 59: Sketching the user experience

Further readingSketching the user experience

Sketching the user experience

Prototype toolsUX 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  wireframesare  concerned

http://uxmag.com/articles/where-wireframes-are-concerned

Design  beJer  &  fasterwith  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/

Page 60: Sketching the user experience

Thanks!Follow me on twitter @myinteraction

to continue the discussion!