Prototyping
Ran Liron
UX lead, NICE Enterprise
Ran Liron
UX lead, Enterprise
And also
- UX mentor at Google Launchpad
- Lecturer at Shenkar
In the past
- UX team lead at...
I am going to talk about...
Tools Fidelity Inspiration
Prototyping Tools
High-end:
Axure, Just-in-mind, Indigo Studio
Office:
PowerPoint, Visio
sketching:
Balsamiq, Pen & Paper, whiteboard
Visual...
Balsamiq: Rough Sketch
=
Axure: High-Fi Interactive Prototype
Pencil
More cool tools
Power Mockups plugin for PowerPoint
More cool tools
Choose your tools according to
the required fidelity
Fidelity
The Fidelity Spectrum
high fidelity
Interactive prototypeRough sketch
Wireframe
Interactive
wireframe
Mockup
/ Demo
The Fidelity Spectrum
High fidelity
Interactive
prototype
Rough
sketch
Highe...
Visual design
Interaction
Content
Code
Elements of Fidelity
Fidelity/Tool
Interaction
fidelity
Visual fidelity
High
Low
HighLow
The real
product
HTML
& JS
Axure
JustInMind
Indigo,
Ph...
Prototype – Deliverables
Creating wireframes by designers is delaying the product
development process... I see that as a b...
wireframe
Interactive
wireframe
Mockup
/ Demo
Choosing the Prototype Fidelity
Rough
sketch
Time
Skills
Decision making
- R...
The Effort
1.5 Day of
an expert
45 Minutes
of a novice
Wireframe
Interactive
Wireframe
Mockup
/ Demo
Choosing the Prototype Fidelity
Rough
Sketch
creates a commitment
High fidel...
What am I going to do
with this prototype?
Ask Yourself
Making discussion
vs.
Documentation
Is the prototype part of a dialog
or a result of it?
What Is The Prototype Purpose?
Making discussion
vs.
Sales
Is the prototype in-house tool
or a way to impress a customer?
What Is The Prototype Purpose?
Early planning
vs.
Testing
Will it be used for usability testing?
What Is The Prototype Purpose?
Exploration
vs.
Focusing
Exploration: Playing
with Ideas
Trying Different Concepts
Browser
http://www.website.com/ Search
File Home View Page Layout Insert
Browser
http://www.webs...
Focusing:
Picking the right idea
Focusing
Let's play...

Design the homepage of
“Startup Nation Today “
A news site about Israeli startups
Exploration
Target audience:
 Israeli Entrepreneurs
 International investors
Design two completely different options
(that don't res...
Where?
Somewhere completely
different.
Searching for Inspiration
http://www.wirify.com/
Conclusion
The UX mantra is always right –
It depends...
The Bottom Line
Which Tool? What Fidelity?
Fit to usage
High-end:
Axure, Just-in-mind, Indigo Studio
Office:
PowerPoint, Visio
sketching:
Balsamiq, Pen & Paper, whiteboard
Visual...
Check -
More tools
Pencil
%
Power Mockups
Wirify
Get creative by tapping in to
sources of inspiration
from different contexts
Inspiration
Ran.Liron@nice.com
054-5-99-99-47
This Presentation is available online at SlideShare –
www.slideShare.com/RanLiron
Prototyping for effective UX
Prototyping for effective UX
Prototyping for effective UX
Prototyping for effective UX
Upcoming SlideShare
Loading in...5
×

Prototyping for effective UX

1,099

Published on

Choosing Prototyping Tools
And finding inspiration for innovative UX design

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,099
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Prototyping for effective UX

  1. 1. Prototyping Ran Liron UX lead, NICE Enterprise
  2. 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. 3. I am going to talk about... Tools Fidelity Inspiration
  4. 4. Prototyping Tools
  5. 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. 6. Balsamiq: Rough Sketch =
  7. 7. Axure: High-Fi Interactive Prototype
  8. 8. Pencil More cool tools
  9. 9. Power Mockups plugin for PowerPoint More cool tools
  10. 10. Choose your tools according to the required fidelity
  11. 11. Fidelity
  12. 12. The Fidelity Spectrum high fidelity Interactive prototypeRough sketch
  13. 13. Wireframe Interactive wireframe Mockup / Demo The Fidelity Spectrum High fidelity Interactive prototype Rough sketch Higher Fidelity
  14. 14. Visual design Interaction Content Code Elements of Fidelity
  15. 15. 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
  16. 16. 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.
  17. 17. wireframe Interactive wireframe Mockup / Demo Choosing the Prototype Fidelity Rough sketch Time Skills Decision making - Requires moreHigher fidelity High fidelity Interactive prototype
  18. 18. The Effort 1.5 Day of an expert 45 Minutes of a novice
  19. 19. Wireframe Interactive Wireframe Mockup / Demo Choosing the Prototype Fidelity Rough Sketch creates a commitment High fidelity Interactive prototype
  20. 20. What am I going to do with this prototype? Ask Yourself
  21. 21. Making discussion vs. Documentation Is the prototype part of a dialog or a result of it? What Is The Prototype Purpose?
  22. 22. Making discussion vs. Sales Is the prototype in-house tool or a way to impress a customer? What Is The Prototype Purpose?
  23. 23. Early planning vs. Testing Will it be used for usability testing? What Is The Prototype Purpose?
  24. 24. Exploration vs. Focusing
  25. 25. Exploration: Playing with Ideas
  26. 26. 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
  27. 27. Focusing: Picking the right idea
  28. 28. Focusing
  29. 29. Let's play... 
  30. 30. Design the homepage of “Startup Nation Today “ A news site about Israeli startups Exploration
  31. 31. Target audience:  Israeli Entrepreneurs  International investors Design two completely different options (that don't resemble Ynet, Pinterest or Facebook) Exploration
  32. 32. Where? Somewhere completely different. Searching for Inspiration
  33. 33. http://www.wirify.com/
  34. 34. Conclusion
  35. 35. The UX mantra is always right – It depends... The Bottom Line
  36. 36. Which Tool? What Fidelity? Fit to usage
  37. 37. 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
  38. 38. Check - More tools Pencil % Power Mockups Wirify
  39. 39. Get creative by tapping in to sources of inspiration from different contexts Inspiration
  40. 40. Ran.Liron@nice.com 054-5-99-99-47 This Presentation is available online at SlideShare – www.slideShare.com/RanLiron
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×