Prototyping for effective UX

  • Published on
    21-Oct-2014

  • View
    826

  • Download
    0

Embed Size (px)

DESCRIPTION

Choosing Prototyping Tools And finding inspiration for innovative UX design

Transcript

Slide 1

Axure: High-Fi Interactive Prototype

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

High-end:Axure, Just-in-mind, Indigo StudioOffice:PowerPoint, Visiosketching: Balsamiq, Pen & Paper, whiteboardVisual design:Fireworks, Photoshop, OmniGraffleCode: HTML & JavaScript

The Common Prototyping Tools

5

Balsamiq: Rough Sketch

=

Pencil

More cool tools

8

Power Mockups plugin for PowerPoint

More cool tools

9

10

Choose your tools according to the required fidelity

11

12

Fidelity

The Fidelity Spectrum

high fidelityInteractive prototype

Rough sketch

13

Wireframe

Interactive wireframe

Mockup/ Demo

The Fidelity Spectrum

14

High fidelityInteractiveprototype

Rough sketch

Higher Fidelity

Visual design InteractionContentCode

Elements of Fidelity

15

Fidelity/Tool

16

Interactionfidelity

Visual fidelity

High

Low

High

Low

The realproduct

HTML& JS

AxureJustInMindIndigo,

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.

wireframe

Interactive wireframe

Mockup/ Demo

Choosing the Prototype Fidelity

18

Rough sketch

TimeSkillsDecision making

- Requires more

Higher fidelity

High fidelityInteractiveprototype

The Effort

19

1.5 Day ofan expert

45 Minutesof a novice

Wireframe

Interactive Wireframe

Mockup/ Demo

Choosing the Prototype Fidelity

20

Rough 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 dialogor a result of it?

What Is The Prototype Purpose?

22

Making discussionvs.SalesIs the prototype in-house toolor 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

Explorationvs.Focusing

25

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

Loremipsum dolor sitamet consectetur adipisicingelit seddo eiusmodtempor incididunt utlabore etdolore magna aliqua utenim adminim veniam

Browser

http://www.website.com/

Search

28

Focusing:Picking the right idea

Focusing

29

Let's play...

30

Design the homepage ofStartup Nation Today A news site about Israeli startups

Exploration

31

Target audience:Israeli EntrepreneursInternational 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

High-end:Axure, Just-in-mind, Indigo StudioOffice:PowerPoint, Visiosketching: Balsamiq, Pen & Paper, whiteboardVisual design:Fireworks, Photoshop, OmniGraffleCode: HTML & JavaScript

The Common Prototyping Tools

41

Check -

More tools

42

Pencil%

Power Mockups

Wirify

Get creative by tapping in to sources of inspirationfrom different contexts

Inspiration

43

44

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

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

44