10 Principles of Effective Wireframes

Created by the Balsamiq Education team and presented at UX Camp: Home Edition 2020.

Transcript

1. Billy Carlson @ UX Camp | Saturday June 13th, 2020 10 Principles for Effective Wireframes
2. Wireframes should be part of every digital project. balsamiq.com/learn
3. anyone can do it! balsamiq.com/learn
4. anyone can do it! Wireframes aren't just for the design team balsamiq.com/learn
5. we don't care how pen and paper low-fidelity wireframes high-fidelity wireframes whiteboard sketches balsamiq.com/learn
6. wireframes help avoid situations like... balsamiq.com/learn
7. ! We don't need to wireframe anything, I'll just start coding it. balsamiq.com/learn
8. actual product https://www.bulkrenameutility.co.uk/ balsamiq.com/learn
9. ! I have an idea. Don't worry , it will be amazing! image found hastily googling "superman" balsamiq.com/learn
10. from one of the best episdoes of The Simpson's #unkyherb balsamiq.com/learn
11. ! It looks great! Can we try something else though? ! First I would move the top section down a bit and pull up some of the other info below. Also think about how it pops. I want people to understand us right away. Really get it, ya know. So also maybe make the phone number bigger. ! Kinda looks weird, right? balsamiq.com/learn google "scream clipart" for this gem
12. balsamiq.com/learn I'm getting lazy with my image selection now... right?
13. ! The Sales Team wants to add a dashboard Business needs to add its input ! Let's send it down to Finance for a look. We have six stakeholders to ensure the product is right Marketing wants to talk balsamiq.com/learn Um, someone from some team I've never heard of just informed me the project is cancelled.
14. balsamiq.com/learn such an awesome movie...
15. wireframing has many benefits balsamiq.com/learn
16. Get ideas out of your head Show, instead of tell Get everyone on the same page Anyone can create them balsamiq.com/learn They're disposable Fast to make Explore ideas cheaply wireframing has many benefits
17. They help designers... They help non-designers... Demonstrate the type of thinking and working that an organization should want balsamiq.com/learn
18. Image credit: Pam Daniels and Brandon Williams balsamiq.com/learn
19. Image credit: Pam Daniels and Brandon Williams Wireframes Wireframes Wireframes balsamiq.com/learn
20. balsamiq.com/learn The process always seems nice and neat, but it really looks and feels like this. basically took a popular image and removed the text. Boom.
21. Making ideas real-ish. Doing just enough work to get an answer to your question, then invest the time when you know its right Stay in low-fidelity until you have a clear path forward Wireframes... balsamiq.com/learn
24. Demonstrate an understanding of the problem balsamiq.com/learn " I'm hearing "x", so my solution is "y".
25. Helps with... Use as a Guide to... Demonstrate an understanding of the problem Educate externally why you are working this way Show how the current system is broken Clearing up communication Ensuring we’re all on the same page balsamiq.com/learn If you can’t, you know you there is more to learn before moving forward
27. Focus on User Needs balsamiq.com/learn Visitors Exit Pages " We can see which points our customers are getting confused Cooool Analytics Company:
28. Helps with... Use as a Guide to... Focus on User Needs Create empathy with your users. To understand what they need in order to be successful. Making sure your solving an actual problem balsamiq.com/learn
30. Thoroughly Explore Solutions balsamiq.com/learn
31. Involve everyone to give their input and design solutions with you Helps with... Use as a Guide to... Thoroughly Explore Solutions Generating a lot of ways for users to accomplish their task or their solve problem balsamiq.com/learn
33. Invite Discussion balsamiq.com/learn
34. Give people something to react to and be sure everyone’s voice is heard Invite Discussion Helps with... Use as a Guide to... Gathering input and feedback to build on Getting buy-in from all parties balsamiq.com/learn
36. Incorporate Ideas From Others balsamiq.com/learn
37. Generate more concepts or ways for users to accomplish a task Incorporate Ideas From Others Helps with... Use as a Guide to... Showing that your listening and that others are being heard balsamiq.com/learn
39. Don’t show more detail than necessary balsamiq.com/learn
40. Keep ideas rough and low fidelity to encourage as much feedback as possible Don’t show more detail than necessary Helps with... Use as a Guide to... Focusing only on what needs to be fixed balsamiq.com/learn
42. Functional, not fanciful balsamiq.com/learn
43. Ensure the problem is the focus, not the UI Functional, not fanciful Helps with... Use as a Guide to... Focusing on the structure and how a user will flow through the project balsamiq.com/learn
45. Follow UI design patterns balsamiq.com/learn
46. Educate why these patterns exist and how users benefit from them Follow UI design patterns Helps with... Use as a Guide to... Creating feasible solutions balsamiq.com/learn
48. Validate Solutions with Users and Teammates balsamiq.com/learn " I understand... # Dev Stakeholder " We can do that... Product ! Users will like this...
49. Test concepts with the very people who will be using the product Ensure that the idea is feasible for your organization to build Helps with... Use as a Guide to... Validate Solutions with Users and Teammates Being confident that your solution will work and solves a problem balsamiq.com/learn
51. Easy to Understand balsamiq.com/learn
52. Start simple, then continue to build in complexity after learning from previous iterations Easy to Understand Helps with... Use as a Guide to... Ensuring the proposed design is as simple as it can possible be balsamiq.com/learn
53. " balsamiq.com/learn How to Use Them (in real working situations) ! Great Clark! But let’s first be sure we fully understand the problem we need to solve. " Doh, fine… I have an idea. Don't worry , it will be amazing!
54. balsamiq.com/learn How to Use Them (in real working situations) ! Code First! " Doh, fine… ! Ohh Dumpy! We should really explore as many solutions as we can before jumping in!
55. " balsamiq.com/learn How to Use Them (in real working situations) Hey Bill, We’ve showed the concepts to users and they did not understand the new format. $ Have you made the updates to the TPS reports to include all of the exec teams notes? " riiiiiiiiiiiggght…
56. balsamiq.com/learn How to Use Them (in real working situations) Our New Official Design Process Checklist! Demonstrate an understanding of the problem Focus on user needs Thoroughly explore solutions Not show more detail than necessary Focus on functionality Did we make sure we…? Follow UI design patterns Invite discussion Incorporate ideas from others Communicate clearly Validate solutions with users and team members Do our wireframes…? *Note: I changed easy to understand to communicate clearly , so I could communicate clearly what I meant.
57. Balsamiq Wireframing Academy balsamiq.com/learn Thank You! find me online @billycarlson or at