Here’s a secret; even professional designers make bad user interfaces. Every first draft of a user interface is busy, confusing, and missing features. How do pro designers get around this inevitable problem? They sketch. A simple drawing, on paper or in PowerPoint, can reveal important issues with an interface. You may find that the back button is missing, or that important information is hidden. With just a pencil and paper, massive usability problems are caught before losing time and budget in development. All of these benefits can be brought into your next project by following these simple steps.
On a sheet of paper (or your digital canvas), draw a rectangle in the shape of a screen. For websites, draw the rectangle horizontally. For apps, draw the rectangle vertically. This sketch is the first screen of the project. Think of what needs to happen on this screen and write it out. What information does the user need? What choices will they make? Each of these features will need their own space in the frame, so draw a box for each one. This raises the question, where is the best place for each function? The strongest method, and the default for pro designers, is to take advantage of how people read.
How People “Read” Images
English is read top to bottom, left to right. This habit is so strong that interfaces, even wordless ones, are read the same way. Once the user focuses on whatever is largest, they begin to read. An interface can use this habit to discretely guide the user. A shopping site will display an item like a T-shirt above the purchase button. The user will then assume that the purchase button lets them buy that exact shirt. If the button were placed above the shirt, the user would see the button first, and may not be sure what they are buying. An interface’s elements are read like words in a sentence! Using this technique, it is possible to predict what order the user will interact with the screen. The design can then be built with a particular sequence in mind.
Charting a Path Toward the Goal
There is one more step that if skipped, will make even a professional’s design fall flat. That step is finding out exactly what your users are trying to do. Many designers make assumptions about their users that are simply wrong. For example, a journal archive might sort their material by year, when most users want all research on a particular topic. Imagine how disastrous of an experience the user would have, being forced to examine every year in the archive to find what they’re looking for! It’s likely they’d abandon the site entirely.
This example may seem obvious, but the needs and wants of users surprise even the pros. Asking your target audience what they want to do is the number one way to get research and projects out to more people. For a more in-depth look, read our article on user testing.
Once the user’s goal is known, it becomes your job to chart a path to that goal with design. To complete it, what’s the first action a user needs to take? Do they need to know any information first? Should the result of the action be shown on this screen, or the next? Use questions like these to write out what actions the user will do, and in what order. Then, sketch those elements on screen in reading order. The user will naturally find information, use it to make a decision, then see the result, which will bring them closer to their goal.
Repeat this process for every screen your design needs, and soon you will have a blueprint for the whole system. If something feels off or confusing, don’t hesitate! Switch things around and ask someone nearby what they think. Everyone interacts with countless interfaces every day, so most people will have a sense for what “feels right”, even if they’re not sure why. If all goes well, they won’t even realize your design held them by the hand the whole time. The best part? The user won’t notice the interface, letting your research or tool shine.