Wireframes vs prototypes
•
2 likes•893 views
Talk given to UX Designers meetup group. When do you use wireframes and why? Is prototyping more effective than using wireframes? Should there be two different delivery systems and what information do you need to convey in order to make the best choice for your stakeholders and development team?
Recommended
More Related Content
Viewers also liked
Viewers also liked (8)
Similar to Wireframes vs prototypes
Similar to Wireframes vs prototypes (20)
Recently uploaded
Recently uploaded (20)
Wireframes vs prototypes
- 1. Wireframes VS Prototypes Someone asked me: “Why wouldn’t you always go straight to building a prototype?”
- 2. Wireframes flow charts - grey box frames
- 4. Wireframes high fid - visual design
- 5. Prototypes HTML / app code - paper - animation
- 6. Prototypes clickable prototypes: Axure, Omnigraffle, Balsamiq, etc.
- 7. Wireframe Static Used to map a system Used to communicate a design Prototype Interactive Used to user test Used to communicate an interaction Low fidelity High fidelityMed fidelity Wireframe Prototype
- 8. Wireframe Static Used to map a system Used to communicate a design Prototype Interactive Used to user test Used to communicate an interaction Clickable wireframe ?
- 9. Wireframe Prototype It’s all about communication
- 10. It’s all about communication User journey Feature location Content location Screen layout Unique Interactions Sign off User testing Experience Development StakeholdersVisual designers Users UX designers Wireframe Prototype
- 11. Wireframe Audience must see all of the screens Looking at details You’re there to talk through it Prototype Emphasize interactions It’s ok if they miss some screens / details Audience can go through it themselves
- 12. Discussion 1. How long does it take you to create a prototype vs. a wireframe? 2. What’s your preferred wireframing/prototyping tool?
- 13. Example: Aviva • Aviva Life Insurance UK - a set of web applications to quote and apply for Aviva insurance through partnerships with prominent UK banks. • Working with: – Project Owners – Business Analysts – Solution Designers – Legal/Insurance Experts – Project Managers – Developers (in-house and off-shore) – Testers – Graphics Designers – Copywriters
- 14. I had… 1) set of detailed wireframes (about 300) 2) set of high level wireframes (about 30) 3) working prototypes
- 15. Communication Dev team (off-shore) -> detailed wireframes Dev team (local) -> detailed wireframes / click prototypes Content writers -> detailed wireframes QA -> detailed wireframes Documentation -> detailed wireframes Sign off -> high level wireframes
- 16. Communication Decision making -> high level wireframes Visual design -> high level wireframes User tests -> prototypes Demos -> prototypes
- 17. So many versions !?!?!?!
- 18. Discussion 1. What situations do you feel are better served by a. Wireframes b. Prototypes 2. At what point does it become worth it to spend extra time building a prototype?
- 19. Activity Egg Make an egg-holding platform - Highest platform wins - Must be able to carry the egg in it (no touching the egg) 7 minutes – wireframe it - 1 piece of paper to use to communicate your design (must stand alone) 15 minutes – prototype design - 3 pieces of paper (no cutting) - 1 piece tape - Can trade 1 piece of paper for extra piece of tape
Editor's Notes
- Many types of wireframes - Flow charts, grey box frames, low-fidelity, , med-fidelity, high-fidelity
- Many types of wireframes - Flow charts, grey box frames, low-fidelity, , med-fidelity, high-fidelity
- Many types of wireframes - Flow charts, grey box frames, low-fidelity, , med-fidelity, high-fidelity
- I’d challenge that need to move from Wireframe to Prototype as you move from low to high fidelity You might START with a prototype (I encourage it) It’s really about using the right tool for the specific communication you’re trying to get across
- Working with partner banks whose requirements didn’t always line up with Aviva’s. Full team was made up of over 100 people.
- Detailed wireframes: down to each error message High level wireframes: one of each different screen; different subsets for different audiences Prototypes: hooked up / clickable versions of the wireframes ALL of these had to be kept up to date!
- Offshore dev team: needed to build without me there to explain; language barrier Local dev team: liked having an HTML version of the screens Content writers: needed to see each and every instance of content QA: checking each detail of the design; their work was done after I’d moved off of the project Documentation: financial company; needed an extensive paper trail of the design Sign off: official approval from stakeholders; had no patience for the fully detailed set
- Making decisions: sending screens over to our partners; many different sets of high level wireframes Visual design: sent it over to the graphics design and branding team; only needed to know all of the main screens User tests: both in-person and remote; many different prototypes, depending on what was being tested Demos: to prospective new partners (show off our flashy features); to show interesting interactions to our partners (e.g. sliders)