Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Three R’s
When creating any wireframe or storyboard, or even a graphical mockup, pay close attention to the following three concepts, which I call The Three R’s:
- Requirements. It may seem obvious that you need to pay
attention to the requirements of the project while designing wireframes and
storyboards, but this R is here as a constant reminder. It’s easy to let
someone else’s pet feature (or even your own) make its way into your work.
Far better to stick to what’s absolutely necessary for the project, to
support the activity that the product is meant to support and meet users’
goals.
Do not, I repeat, do not let things that end with "that would be nice to have" get into your product in the first round. Put them on a separate list and see what’s still important later on. If everyone still wants it, put it in. If not, which is more likely the case, you’ll be very glad that no one wasted any time on it in the first place, and that the unneeded feature isn’t now getting in the way of more essential features. When you’re staring at your screen and drawing out all the little boxes and widgets that make up your interface, stick to your guns. Stick to what’s required. The items that are required are the most important, and therefore the only ones that should get any attention.
- Reduction. This is my favorite R. Along with
sticking to the requirements for the project, be sure to reduce as much as
possible. Reduce clutter, reduce redundancy, reduce the possibility of user
error, reduce verbiage until it’s only as long as it absolutely needs to
be—reduce, reduce, reduce. Then reduce some more. If you can find a way to
make one widget serve three purposes while maintaining an obvious usage model,
do it. If you can turn seven words into two, do it. If you can get rid of an
entire interaction because the information it’s intended to acquire can be
obtained another way, do it, do it, do it.
All of this reduction will result in a significantly more clear and usable interface. Again, remember Einstein’s rule: "Everything should be made as simple as possible, but not simpler."
- Regularity. Regularity is really about making it look like
you did things intentionally. It’s about using the same font and font size
for all form labels, lining up input fields so they create a consistent design,
using the same spacing in all blocks of text, the same colors for similar or
related interface elements, and on. Regularity means that if one text field is
20 pixels in from the left edge, and the next one is part of the same form, it
should sit 20 pixels in from the left edge as well. Regularity is the notion of
organizing, aligning, synchronizing, and optimizing interface elements so that
they provide a clear, clean, aesthetically pleasing interface.
Of course, if you want something to pop out, you can do the opposite. Moving a single element out of line enough to look like you did it intentionally is often exactly what you need to make that element stand out from the rest of the page and show the user that this particular element is important somehow. Color can do this trick as well. If everything in your interface uses light, muted colors, you might make the Incredibly Important Note from Marketing a different color—something darker—to make it noticeable on the page. Tricks like this are used to draw the eye straight to that spot. So regularize everything that needs to look uniform, but use irregularity to communicate importance and provide additional meaning.
The Three R’s are your support system. They keep you in check when your mind starts wandering and you start imagining how cool it would be to add a talking paper clip to your interface that answers Help questions. Microsoft has already done this. It wasn’t cool. Stick to The Three R’s.