The 10 Principles of Effective Wireframes
Billy Carlson presented “The 10 Principles of Effective Wireframes” at UX Camp: Home Edition on Saturday, June 13th. Enjoy!
The following transcript may contain typographical errors. Please forgive any mistakes!
Thank you everyone.
I also, when we started that you were nervous because I’m not really a speaker, I don’t do this very often, but I love talking about design, so as Rustam, a design educator at Balsamiq… We have an education team. I’m also an adjunct at Northwestern Segal Design Institute, where I teach an intro to human-centered design and the UX design.
And so kind of morphed from being a designer, I started out in graphic design, moved on to Interaction, kind of became obsessed with making better products and moved into UX, so now I educate people on the mission of our team is not to sell Botanic, it’s to help people become better designers. We really focus on…
I don’t know why I hate saying this, but I think of it as design adjacent people, so we’re not really focused on UX designers as much as helping maybe people who wanted be a UX designer or UI designer or people who work a lot with product people. I’m sorry, work as product people, as does people who wanna understand why we do what we do, and we really do think that a lot of people, everyone designs, we’re all making a product, everyone has input. So anyways, we created these principles as the education team, sort of one help us communicate externally what we want people to do, we think of wire friends not only as an artifact, but also a process, you get used to lease controls, but we also… My big bold statement is, we think that wire frame should be part of every digital product project, and also really think that anyone can make wireframes… Like Ray can do it. It’s something that everyone can do. And it’s really important, it’s also, it’s not for the design team, and I think part of our principal is really stressed how to make really effective wire friends for every one.
We don’t really care how you do it. So again, I’m not here to sell basic, and that’s what I love about the education team is we’re not selling the tool, we’re selling the process, I like to say, if you want a sketch on a whiteboard and jump right into code… That’s totally cool. It all depends on what you need for each project, and each project is gonna be different, but we’re hoping is you have a process in place to use that mentality, that type of thinking going forward, and as we were coming up with these principles, we were kind of focused on maybe it… Something right here, sorry.
Why projects fail or situations in which we really wish we were wire framing, so this happened to me a lot. At previous jobs, we’re creating a new feature, something big or a totally new product, and part of it, we just jumped right into code and it did not go well, and stuff like this gets made… I know this is… I literally googled bad user interface, and mostly ’cause I didn’t wanna use something that I was working on, I can’t show you something for real life, but this illustrates my point, if you’re just jumping in the code, a lot of times you’re going to…
I almost had the same thing earlier, but… That’s good. See, hope to share again.
In the second, I had stayed where I was, and it was kind of lost my train abut… I think you get the point. You’re not focused on the user as much if you’re just trying to solve… If you’re writing the code and you’re creating the product, you’re kind of really focused on what you could be making in your idea and you’re kind of maybe losing sight of the user at that point.
Another problem is you just kinda start creating something without really talking to other people about it, it’s kinda going at it alone. Sometimes chasing the shiny object. I’m definitely, especially as a young designer, is a really guilty of this… I have an idea I’m gonna push forward.
You can explore that idea in many different ways, and this really leads me to just create really high fidelity mockups, trying to sell how awesome of a visual designer you are when you’re not focused again on the user and you’re creating bad experiences. But I like about this image is that This is what I thought of when I was thinking of a certain project I worked on where we dove right in for the really high polished Design, and it was not focused on the user, it was over budget. Took too long. There was a lot of things we had to remake, we didn’t really follow a process that focused on the user, so this is when not everyone who needs to be involved is involved the whole time, so they give really bad feedback, either feedback that’s too vague or feedback that’s too specific. And it’s not about what we’re trying to work on. If you have a high polished design and you could get terrible feedback, if it’s really low fidelity, you’re gonna get much more actionable feedback, and this is what that reminded me of when people aren’t intimately involved, not just in the design team, but the product business, all those people, you get really bad feedback, and it’s just not helpful, building on that when you have lots of different stakeholders, because you don’t have a process in place to involve everyone in… You don’t know, you get pulled in too many directions, you don’t know what the business goals are, what you’re trying to achieve with your product, and it’s moving around too much and it’s not helpful, so that led me to this… I love this movie. As a designer, I felt like I understood that I… Yeah, so what we think is that wire framing has many benefits, these are just a few I through on here to start up as an artifact that is really quick to make… They’re disposable, they’re great for ideation, showing your ideas instead of telling someone, just invite far better feedback, something we’re gonna talk about a little bit, but all of these things are how we came up with our principles, but we really think that that process is a way to demonstrate the type of thinking and working that you should really want, at least in your product group, if not your organization.
I think our principles and the way we think about really relates closely to the human-centered design process.
I see a… So I, I know that this is a big buzzword now, especially at the corporations I was working at before boom, the just design became a thing. That’s IRU design has become more popular. The UX design process follows a human center design process or user-centered, but what I really like about it is if you layer on top, what wire frames do they fit into three of the four primary steps of the human center design process.
We know that the process, all of us who work on products, it’s not as simple as just following this process, it really is all over the place. And that’s fine. This is a really popular graphic, shared about what it feels like to be in the design process, especially at the beginning, this is something we always share with our students, so we share the previous slide like this is the steps, the Human Center I process, this is what it feels like to be in human center design press.
It’s the same thing for any project, what I think it add to this is just looping it back onto itself because sometimes… You never know it’s gonna happen. Sometimes something happens. You gotta start all over again.
So just a sort of recap. We really think wireframes and our principles, how we’re thinking of them and they relate to human-centered design, is the wiring make ideas real-ish, so you’re not investing all that time until you know you’re on the right track, you’re doing just enough work you need… And so you have that clear path forward and it really lets you stay in low fidelity, and what we like about it is the way to teach other people the importance of it too, so we basically came up with all that stuff, thought about all that, debated it and we came up with these 10 Principles of Effective wire frames.
Okay, so how we present this, and I’m so glad my dog is barking is effective wireframes demonstrate an understanding of the problem.
And what we really mean by that is if you’re working on something and you go to present, you say, I hear this from users and from stakeholders, and my solution is why… And I’ll show you why, what we like about it is that it clears up communication, but make sure everyone’s on the same page, you can also use it to educate externally why you’re doing this… I’m purposely following these steps so that I’m clear that we’re on the right path.
The other thing we say is you can use that to show how the current system isn’t working, or all the current ideas aren’t aren’t as good or aren’t gonna work for the user.
And if you can’t do this, which I think is like the first step is if you can’t really articulate what the problem is, you need to go back and debate it more.
Our next one is effective wire frames, focus on user needs, which always helps make sure you’re solving an actual problem, and if you say we need to find… Focus on user needs. This is obviously, it’s really important.
It gets lost some times though, when you’re working on big projects and can use to help educate is the empathy for the user, now you’re using… I always think of presenting a wire frame and using almost like a persona as the person using the wire frame, and that really helps stakeholders and clients and external folks understand the decisions that you make, why… Effective wire frames thoroughly explore solutions. A big part of human-centered design is not refining to quickly, not picking one idea and just diving in, it’s a great way to generate lots of ideas, but also to involve people as part of the process, bringing people together to explore ideas. I know design sprints are really big, obviously, it doesn’t have to be anything that formal. I’ve worked in lots of big organizations where it’s not just not feasible to do that for every project, but you could still get together and brainstorm and explore and is together, effective wire frames, invite discussion, which is just, again, building off of bringing people together in exploring solutions what if you have your solution, you have something visual for people to react to and get that far better feedback and you’re getting that feedback, you’re gonna get more buy-in from people, it’ll be… Everyone will be much more in the same page to build on that again, you’ll incorporate ideas from others, it’s really important to make sure that you’re listening to people and that they feel like they’re being heard, that’s a big part of teamwork and collaborating with other groups, and also help you generate a lot more concepts and ways for users to either solve the problem or accomplish the tasks they’re trying to…
Don’t show more detailed and necessary. So how I see this as really only focusing on what needs to be fixed, so not trying to either blow it up and start over, but really focusing on the core problems, and if you’re staying in this low fidelity… It’ll help you move forward, keep things simple and get as much feedback as you can, and if you’re not showing a lot, if you’re keeping your word, I wanna say is if you keep really simple, it’ll help people… Again, provide better feedback.
Another one is effective wireframes are functional, not fanciful.
I love this wireframe. This is an example from an article that one of my colleagues just published about wire flows, and I think it’s a perfect example of what you can achieve with the proper wireframe, it hits every mark of the user’s interaction. Someone on the product team, a Dave, a stakeholder, anyone can review this and immediately understand what needs to happen and why, but it also leaves room… So one, again, you’re focusing on the problem, not the I, and you allow the next step, the Visual Design Team to really focus on what they do best. So the UI has a huge component of the user’s experience, but focusing on the structure now will allow them to sort of add their touch to it and make it better… To build on that, I think it’s really important for wire frames, we do to follow UI patterns. If your company has a design system or a pattern library, obviously use that, but not only that, follow the standard UI convention stone. What I keep thinking of is what I’ve received wire frames that just look like a visual version of a requirement stuck, every component is on the page, but like a user can’t look at that and make any sense of it.
You can also use it as a way to educate externally why it… Certain UI patterns exist or why you’re making these choices to begin with, and you also ensure that you’re creating feasible solutions for your company, you don’t wanna make something that might not even work, which again, now to build on that effective wireframes to validate the solution with real users and team members, so make sure that a user is… Again, it’s a big part of the user center design, a human center design process is testing concept, you can’t just have a prototype and not testing with anyone, but you also make sure, again, that the idea you have, the concept is feasible for you to build… You’re getting buy-in and you’re confident in the solution, and I just lead to just a much better outcome and easier to work together as a team on it.
And this is our last one.
Effective wireframes are easy to understand, it doesn’t matter if it’s a white board sketch or a really high fidelity wire frame, if people look at it and you need to explain it to them, it’s not gonna be as effective ’cause you’re not gonna get the right feedback you need amputations help, all of these things, but again, really low fidelity, if you have to walk me through your wire frame, a user is not gonna be able to use the product is easily to really focus on that. Simplicity.
Yeah, and so our guy is, start simple and continue to build the complexity as you learn from users, we like to say that the fidelity of your wire frame should really match your understanding of the problem you’re trying to solve, so just really use that to build that to it.
So how we were thinking you would use these in a real real world is first off, just language, so being able to have the right language to educate people about why you would do it, so instead of just jumping in with your Superman idea, like Why don’t we make sure we first fully understand the problem instead of the code first chance I… Me personally, do everyone, very… A lot of people we work with very code first, actually no jumping in the code, but we wanna explore ideas for it, so we wanna think about it before we emit… I’m not opposed to skipping visual design steps or you’re not really having the white board to code is fine, but just you have to have that beginning part to make sure that you’re not missing anything and to really explore what’s out there and to get by it. And if you’re working with lots of different stakeholders and you’re not sure how to react to this, always use the user as why or why not something should happen. I think that’s just really important.
And then finally, one of the big ways in something that we’re gonna probably work on a little more as the education team is just using it as a way to develop your own process or articulate the need for a process, so if you’re working on a project, maybe the big thing is, Are you sure we articulating the problem, you sure this is what the users need, let’s make sure we can demonstrate that, did we really thoroughly explore all solutions… These are ways to help, always remind you of the importance of how to make a good product, and then on the wireframe side, are we making sure it’s really easy to understand, did we just dive in and design it ourselves, or do we incorporate ideas from others? All of it. Again, really important, and that’s it.
That’s all I had for today.