Prototyping for effective UX

1,841 views
1,573 views

Published on

Choosing Prototyping Tools
And finding inspiration for innovative UX design

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

No Downloads
Views
Total views
1,841
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
33
Comments
0
Likes
8
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

×