Choosing Prototyping Tools And finding inspiration for innovative UX design

1. Prototyping
Ran Liron
UX lead, NICE Enterprise

2. Ran Liron
UX 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

3. I am going to talk about...
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

6. Balsamiq: Rough Sketch
=

7. Axure: High-Fi Interactive Prototype

8. Pencil
More cool tools

9. Power Mockups plugin for PowerPoint
More cool tools

11. Choose your tools according to
the required fidelity

12. Fidelity

13. The Fidelity Spectrum
high fidelity
Interactive prototypeRough sketch

14. Wireframe
Interactive
wireframe
Mockup
/ Demo
The Fidelity Spectrum
High fidelity
Interactive
prototype
Rough
sketch
Higher Fidelity

15. Visual design
Interaction
Content
Code
Elements of Fidelity

16. Fidelity/Tool
Interaction
fidelity
Visual fidelity
High
Low
HighLow
The real
product
HTML
& JS
Axure
JustInMind
Indigo,
Photoshop
Visio
PowerPoint
Whiteboard
Fireworks
Pen & paper
Pencil
Balsamiq

17. Prototype – Deliverables
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. wireframe
Interactive
wireframe
Mockup
/ Demo
Choosing the Prototype Fidelity
Rough
sketch
Time
Skills
Decision making
- Requires moreHigher fidelity
High fidelity
Interactive
prototype

19. The Effort
1.5 Day of
an expert
45 Minutes
of a novice

20. Wireframe
Interactive
Wireframe
Mockup
/ Demo
Choosing the Prototype Fidelity
Rough
Sketch
creates a commitment
High fidelity
Interactive
prototype

21. What am I going to do
with this prototype?
Ask Yourself

22. Making discussion
vs.
Documentation
Is the prototype part of a dialog
or a result of it?
What Is The Prototype Purpose?

23. Making discussion
vs.
Sales
Is the prototype in-house tool
or a way to impress a customer?
What Is The Prototype Purpose?

24. Early planning
vs.
Testing
Will it be used for usability testing?
What Is The Prototype Purpose?

25. Exploration
vs.
Focusing

26. Exploration: Playing
with Ideas

27. Trying Different Concepts
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...


31. Design the homepage of
“Startup Nation Today “
A news site about Israeli startups
Exploration

32. Target audience:
 Israeli Entrepreneurs
 International investors
Design two completely different options
(that don't resemble Ynet, Pinterest or Facebook)
Exploration

33. Where?
Somewhere completely
different.
Searching for Inspiration

34. http://www.wirify.com/

38. Conclusion

39. The UX mantra is always right –
It depends...
The Bottom Line

40. Which Tool? What Fidelity?
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

42. Check -
More tools
Pencil
%
Power Mockups
Wirify

43. Get creative by tapping in to
sources of inspiration
from different contexts
Inspiration

44. Ran.Liron@nice.com
054-5-99-99-47
This Presentation is available online at SlideShare –
www.slideShare.com/RanLiron