10 Principles of Effective Wireframes

10 Principles of Effective Wireframes

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

D2e0d836be0ce8685ad40291e4547dc6?s=128

bcarlson41

June 13, 2020
Tweet

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
  22. None
  23. None
  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
  26. None
  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
  29. None
  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
  32. None
  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
  35. None
  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
  38. None
  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
  41. None
  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
  44. None
  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
  47. None
  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
  50. None
  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