Wireframing + User Experience Design with Balsamiq

In this presentation at Columbia College Chicago we discuss what wireframes are, why we do them and traits of successful wireframes. We followed this up with a wireframing activity.

Transcript

1. Wireframing + User Experience Design BI LLY C AR L S O N @ COLU M BIA C OLL E G E | T H U R SD A Y N OV E M B E R 7 T H , 2 0 19
2. Design Education Writing, Content Strategy, Podcasting, Interviewing, Workshops, Courses Adjunct Professor Introduction to Human Centered Design aka Design Thinking and Doing User Experience Design
5. Director of User Experience Co-creation and Design Facilitation, Experience Design, UX Strategy, Product Design, Mobile Products, Ecommerce.
14. If you don’t have it, go to balsamiq.com/product to use it for today’s activities
20. What are Wireframes?
21. What is a Wireframe? A wireframe is a schematic, a blueprint, used to help designers and programmers (and more) think and communicate about the structure of the software or website they are building.
22. What is a Wireframe? A visual guide that represents the skeletal framework of a website.
23. What is a Wireframe? A wireframe is an illustration of an interface that focuses on space, prioritization of content, functionality, and intended behaviors.
24. Is this a Wireframe?
25. Is this a Wireframe?
29. Sketches Group Ideation When you are working together to generate lots of ideas, sketches are the best way to come up with broad, high-level views of concepts. Enhancing Existing Features If you have an existing app or website and you’re adding small feature or short page to it, sketches are great because there is an established site to use as the guide for designs. You’re using the sketch to show placement of content, and any interactions that need to be on the page and where.
30. Lo-fidelity Sharing Rough Ideas When working on a close-knit team and sharing design ideas for small projects, or pieces of one—rough, lo- fidelity wireframes are a great place to start. They allow you to work asynchronously, and play around with the placement of the content quickly.
31. Mid-fidelity Sharing Externally When you are presenting your wireframes to an external group, or you are presenting concepts for a totally new idea, mid-fidelity wires are great. They include real text, image placement, and a suggested layout. This would be the best fidelity for lots of different groups to review and make comments on.
32. High-fidelity Sharing with External Developers High-fidelity wireframes are best used for sharing the project “blueprint” to external development teams. Ones that the design team would not have a lot of contact with. I think of it as similar to an architect handing over his designs to a contractor. The more detailed and clear the plan is, the better the outcome will be.
33. Why Wireframe?
34. Focus on Exploration over Refinement In the early stages, more ideas are better They encourage exploration instead of refinement in the ideation phase. In the early stages, more ideas are better.
35. They Invite Collaboration Anyone can make good ones They are just boxes and arrows. Sketches. Visual ideas. Nothing to be intimidated by. The more input from multiple people or stakeholders in the early stages, the better. Have everyone responsible for the design in the room collaborating on ideas.
36. Show Your Ideas, Instead of Tell A picture is worth a million bucks If you tell a story, everyone will have their own picture of what is happening. To avoid this, create visual representation of your idea. Showing what your idea invites far better feedback and aids collaboration.
37. They’re Designed to be Criticized High fidelity designs are intimidating High Fidelity designs and wireframes can be tough to criticize. And they can invite feedback that is not helpful in early concept stages.
38. They’re Designed to be Criticized Lo-fidelity looks criticizable Low Fidelity wireframes invite much better feedback. Feedback that is based on the content within the design, not specifics like icons, color or font choice which are important later in the design phase.
39. They Invite Conversation What do you think? Wireframes facilitate conversations that lead to the right solution.
40. They are Quick to Make …and disposable. They are cheap to update, change, scrap and start over. You cannot fall in love with every detail of a wireframe because they intentionally lack them.
41. Why wireframe? Exploration They encourage exploration instead of refinement in the ideation phase. In the early stages, more ideas are better. Collaboration Anyone can make them! You don’t need to be a designer to draw a few boxes and explain your thoughts Criticizable Conversation They are not intimidating. They are just lines and boxes, so they feel impermanent. Wireframes facilitate conversation toward the right solution. Show > Tell Showing what your idea is invites far better feedback and collaboration. Speed They are easy and cheap to update, change, scrap and start over.
42. Successful Wireframes…
43. Generate a Lot of Ideas In the early stages, more ideas are better. Generating an abundance of ideas will help you discover the design that fits best.
44. Quickly Create Refined Ideas They’re great for quickly combining ideas into concepts After you’ve generating many ideas, it is very easy to take all of those ideas to create more refined concepts.
47. Quickly Iterate on Refined Ideas Try many options Wireframes are also great for picking apart the details of a design and allowing for refinement. Not sure of the nav?, create 3-5 more options to try out.
48. Articulate a Solution They demonstrate your understanding of the problem It's not about understanding the problem, it's about reflecting your understanding of the problem. “This” is what I heard and my solution is “this”.
49. Communicate Intent to Everyone Make ideas easily understood Use wireframes to get everyone on the same page, to ensure that all the people responsible with having to get the product built agree on the plan, and to make sure that it's a product users actually want.
50. Communicate Intent to Everyone Make ideas easily understood You can also annotate the heck out them to explain to the viewer more details, or what the intended interactions could be.
51. Successful Wireframes Articulate Demonstrate your understanding of the problem Refine Communicate Allow you to keep refining and not get too attached to specific idea Make your ideas easily understood Generate Producing more ideas and will lead to more thoughtful outcomes
52. How to Wireframe
53. You just have to do it! YO U G OT TA J U M P R IG H T IN
54. Crazy - Eights I DEA G E N E R A T I ON F OR W I R E FR A M I NG
56. 1 2 3 4 5 6 7 8
57. Get into teams? One minute each for eight rounds Share your ideas with the team then you’ll have after that
58. Prompt Design your ideal music streaming app T HI NK S P OT IF Y , A PP LE MU S IC , G O O G LE P LA Y , E T C
59. Prompt Sketch 3 Key Screens Home > Playlist > Album Home > Playlist > Search Whatever you want, its yours! or or
60. GO!
61. Stretch Your Imagination 6. Must be voice controlled only 7. For preschoolers 8. It lives in the world of Star Wars
62. Spend 5 minutes: Share them with each other Each person sketch a new version inspired by what they saw and heard after that
63. Shareout Time
64. Prototyping S H OW U S T H E S TO RY O F YO U R DE S I G N
70. Thank You! BI L LY C AR LS ON | B ILLY @ B A LS AM IQ . C O M | @ BIL LY C A R LS ON