Prototyping for effective UX
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Prototyping for effective UX

  • 1,024 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
1,024
On Slideshare
1,002
From Embeds
22
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
5

Embeds 22

https://twitter.com 22

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