Prototyping for effective UX

  • 769 views
Uploaded on

Choosing Prototyping Tools …

Choosing Prototyping Tools
And finding inspiration for innovative UX design

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
769
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10. Choose your tools according to the required fidelity
  • 11. Fidelity
  • 12. The Fidelity Spectrum high fidelity Interactive prototypeRough sketch
  • 13. Wireframe Interactive wireframe Mockup / Demo The Fidelity Spectrum High fidelity Interactive prototype Rough sketch Higher Fidelity
  • 14. Visual design Interaction Content Code Elements of Fidelity
  • 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. 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. wireframe Interactive wireframe Mockup / Demo Choosing the Prototype Fidelity Rough sketch Time Skills Decision making - Requires moreHigher fidelity High fidelity Interactive prototype
  • 18. The Effort 1.5 Day of an expert 45 Minutes of a novice
  • 19. Wireframe Interactive Wireframe Mockup / Demo Choosing the Prototype Fidelity Rough Sketch creates a commitment High fidelity Interactive prototype
  • 20. What am I going to do with this prototype? Ask Yourself
  • 21. Making discussion vs. Documentation Is the prototype part of a dialog or a result of it? What Is The Prototype Purpose?
  • 22. Making discussion vs. Sales Is the prototype in-house tool or a way to impress a customer? What Is The Prototype Purpose?
  • 23. Early planning vs. Testing Will it be used for usability testing? What Is The Prototype Purpose?
  • 24. Exploration vs. Focusing
  • 25. Exploration: Playing with Ideas
  • 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. Focusing: Picking the right idea
  • 28. Focusing
  • 29. Let's play... 
  • 30. 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. http://www.wirify.com/
  • 34. Conclusion
  • 35. The UX mantra is always right – It depends... The Bottom Line
  • 36. Which Tool? What Fidelity? Fit to usage
  • 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. Check - More tools Pencil % Power Mockups Wirify
  • 39. Get creative by tapping in to sources of inspiration from different contexts Inspiration
  • 40. Ran.Liron@nice.com 054-5-99-99-47 This Presentation is available online at SlideShare – www.slideShare.com/RanLiron