prototyping for effective ux

44
Prototyping Ran Liron UX lead, NICE Enterprise

Post on 21-Oct-2014

857 views

Category:

Technology


1 download

DESCRIPTION

Choosing Prototyping Tools And finding inspiration for innovative UX design

TRANSCRIPT

Page 1: Prototyping for effective UX

Prototyping

Ran LironUX lead, NICE Enterprise

Page 2: Prototyping for effective UX

Ran LironUX lead, Enterprise

And also- UX mentor at Google Launchpad- Lecturer at Shenkar

In the past- UX team lead at Netcraft- Senior UX designer at Matrix- Lecturer at Netcraft Academy and John Bryce

Page 3: Prototyping for effective UX

I am going to talk about...

3

Tools Fidelity Inspiration

Page 4: Prototyping for effective UX

4

Prototyping Tools

Page 5: Prototyping for effective UX

5

High-end:Axure, Just-in-mind, Indigo Studio

Office:PowerPoint, Visio

sketching: Balsamiq, Pen & Paper, whiteboard

Visual design:Fireworks, Photoshop, OmniGraffle

Code: HTML & JavaScript

The Common Prototyping Tools

Page 6: Prototyping for effective UX

Balsamiq: Rough Sketch

=

Page 7: Prototyping for effective UX

Axure: High-Fi Interactive Prototype

Page 8: Prototyping for effective UX

8

Pencil

More cool tools

Page 9: Prototyping for effective UX

9

Power Mockups plugin for PowerPoint

More cool tools

Page 10: Prototyping for effective UX

10

Page 11: Prototyping for effective UX

Choose your tools according to the required

fidelity

11

Page 12: Prototyping for effective UX

12

Fidelity

Page 13: Prototyping for effective UX

The Fidelity Spectrum

high fidelityInteractive prototype

Rough sketch

13

Page 14: Prototyping for effective UX

14

WireframeInteractive wireframe

Mockup/ Demo

The Fidelity Spectrum

High fidelityInteractiveprototype

Rough sketch

Higher Fidelity

Page 15: Prototyping for effective UX

15

Visual design

Interaction

Content

Code

Elements of Fidelity

Page 16: Prototyping for effective UX

Fidelity/Tool

16

Interactionfidelity

Visual fidelityHigh

Low

HighLow

The realproduct

HTML &JS

AxureJustInMind

Indigo,

Photoshop

Visio

PowerPoint

Whiteboard

Fireworks

Pen & paper

Pencil

Balsamiq

Page 17: Prototyping for effective UX

Prototype – Deliverables

17

Creating wireframes by designers is delaying the product development process... I see that as a bad process and use of tools. Instead... Designers and engineers should work together on coding.hi-fidelity prototypes using HTML, CSS, and JavaScript

Tomer Sharon

Ran Liron

I disagree.

Page 18: Prototyping for effective UX

18

wireframeInteractive wireframe

Mockup/ Demo

Choosing the Prototype FidelityRough sketch

TimeSkills

Decision making

-Requires moreHigher fidelity

High fidelityInteractiveprototype

Page 19: Prototyping for effective UX

The Effort

19

1.5 Day ofan expert

1.5 Day ofan expert

45 Minutesof a novice

45 Minutesof a novice

Page 20: Prototyping for effective UX

20

WireframeInteractive Wireframe

Mockup/ Demo

Choosing the Prototype FidelityRough Sketch

creates a commitment

High fidelityInteractiveprototype

Page 21: Prototyping for effective UX

What am I going to do with this prototype?

Ask Yourself

21

Page 22: Prototyping for effective UX

Making discussionvs.

DocumentationIs the prototype part of a dialog

or a result of it?

What Is The Prototype Purpose?

22

Page 23: Prototyping for effective UX

Making discussionvs.

SalesIs the prototype in-house tool

or a way to impress a customer?

What Is The Prototype Purpose?

23

Page 24: Prototyping for effective UX

Early planningvs.

Testing

Will it be used for usability testing?

What Is The Prototype Purpose?

24

Page 25: Prototyping for effective UX

25

Explorationvs.

Focusing

Page 26: Prototyping for effective UX

26

Exploration: Playing with Ideas

Page 27: Prototyping for effective UX

Trying Different Concepts

27

Browser

http://www.website.com/ Search

File Home View Page Layout Insert

Browser

http://www.website.com/ Search

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do

eiusmod tempor incididunt ut labore

et dolore magna aliqua ut enim ad minim veniam

Browser

http://www.website.com/ Search

Page 28: Prototyping for effective UX

28

Focusing:Picking the right

idea

Page 29: Prototyping for effective UX

29

Focusing

Page 30: Prototyping for effective UX

30

Let's play...

Page 31: Prototyping for effective UX

Design the homepage of

“Startup Nation Today “

A news site about Israeli startups

Exploration

31

Page 32: Prototyping for effective UX

Target audience: Israeli Entrepreneurs

International investors

Design two completely different options

(that don't resemble Ynet, Pinterest or Facebook)

Exploration

32

Page 33: Prototyping for effective UX

Where?

Somewhere completely different.

Searching for Inspiration

33

Page 34: Prototyping for effective UX

34

http://www.wirify.com/

Page 38: Prototyping for effective UX

Conclusion

38

Page 39: Prototyping for effective UX

The UX mantra is always right –

It depends...

The Bottom Line

39

Page 40: Prototyping for effective UX

Which Tool? What Fidelity?

40

Fit to usage

Page 41: Prototyping for effective UX

41

High-end:Axure, Just-in-mind, Indigo Studio

Office:PowerPoint, Visio

sketching: Balsamiq, Pen & Paper, whiteboard

Visual design:Fireworks, Photoshop, OmniGraffle

Code: HTML & JavaScript

The Common Prototyping Tools

Page 42: Prototyping for effective UX

Check -

More tools

42

Pencil%

Power Mockups

Wirify

Page 43: Prototyping for effective UX

Get creative by tapping in to

sources of inspiration

from different contexts

Inspiration

43

Page 44: Prototyping for effective UX

44

[email protected]

This Presentation is available online at SlideShare –www.slideShare.com/RanLiron