prototyping for effective ux

Prototyping

Ran LironUX lead, NICE Enterprise

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

I am going to talk about...

3

Tools Fidelity Inspiration

4

Prototyping Tools

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

Balsamiq: Rough Sketch

=

Axure: High-Fi Interactive Prototype

8

Pencil

More cool tools

9

Power Mockups plugin for PowerPoint

More cool tools

10

Choose your tools according to the required

fidelity

11

12

Fidelity

The Fidelity Spectrum

high fidelityInteractive prototype

Rough sketch

13

14

WireframeInteractive wireframe

Mockup/ Demo

The Fidelity Spectrum

High fidelityInteractiveprototype

Rough sketch

Higher Fidelity

15

Visual design

Interaction

Content

Code

Elements of Fidelity

Fidelity/Tool

16

Interactionfidelity

Visual fidelityHigh

Low

HighLow

The realproduct

HTML &JS

AxureJustInMind

Indigo,

Photoshop

Visio

PowerPoint

Whiteboard

Fireworks

Pen & paper

Pencil

Balsamiq

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.

18

wireframeInteractive wireframe

Mockup/ Demo

Choosing the Prototype FidelityRough sketch

TimeSkills

Decision making

-Requires moreHigher fidelity

High fidelityInteractiveprototype

The Effort

19

1.5 Day ofan expert

1.5 Day ofan expert

45 Minutesof a novice

45 Minutesof a novice

20

WireframeInteractive Wireframe

Mockup/ Demo

Choosing the Prototype FidelityRough Sketch

creates a commitment

High fidelityInteractiveprototype

What am I going to do with this prototype?

Ask Yourself

21

Making discussionvs.

DocumentationIs the prototype part of a dialog

or a result of it?

What Is The Prototype Purpose?

22

Making discussionvs.

SalesIs the prototype in-house tool

or a way to impress a customer?

What Is The Prototype Purpose?

23

Early planningvs.

Testing

Will it be used for usability testing?

What Is The Prototype Purpose?

24

25

Explorationvs.

Focusing

26

Exploration: Playing with Ideas

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

28

Focusing:Picking the right

idea

29

Focusing

30

Let's play...

Design the homepage of

“Startup Nation Today “

A news site about Israeli startups

Exploration

31

Target audience: Israeli Entrepreneurs

International investors

Design two completely different options

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

Exploration

32

Where?

Somewhere completely different.

Searching for Inspiration

33

34

http://www.wirify.com/

35

36

37

Conclusion

38

The UX mantra is always right –

It depends...

The Bottom Line

39

Which Tool? What Fidelity?

40

Fit to usage

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

Check -

More tools

42

Pencil%

Power Mockups

Wirify

Get creative by tapping in to

sources of inspiration

from different contexts

Inspiration

43

44

Ran.Liron@nice.com054-5-99-99-47

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