4 User Interface Sketching Pitfalls

Example of a good user interface sketch.

When sketching a new user interface there’s a few things to watch out for.

Here’s 4 common pitfalls:

1. Drawing Things in Too Much Detail

People have a tendency to try and squeeze every little detail and feature into their sketch. This is not the purpose of your sketch and will distract you from getting the big things right. So focus on the big picture, the layout of things, instead of drawing every little detail.

2. Writing Actual Text

When you start writing actual text, you’ll easily get stuck thinking about the wording or making elements such as buttons much larger than they will actually be, since it’s impossible to write as tiny as most text is on screens. In general, you should refrain from writing any text in your sketch.

3. Getting Stuck on Sizes

Should the sidebar be 35% or 40% of the total width? The important thing here is not to get all the proportions absolutely perfect but rather that you show the relationship between the different elements on the page and the intention of sizes.

4. Misrepresenting Visual Dominance

Since everything in a sketch typically consist of boxes and lines, visually dominant elements like pictures are easily misrepresented. Images in sketches usually aren’t nearly as visually dominant as they are in the final product because they’re just a simple box, whereas in the final product they are suddenly a block of complex colors and compositions.

Give all visual elements, such as pictures, a big black shadow so their visual dominance is properly represented in your sketch too.

Post a comment with your personal UI sketching pitfalls or any UI sketching tips.

Share: LinkedIn

Authored by Jamie Appleseed

Published on June 24, 2010

Comment on LinkedIn

User experience research, delivered twice a month

Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Topics include user experience, web design, and e-commerce

Articles are always delivered ad-free and in their full length

1-click unsubscribe at any time

Related Articles

More E-Commerce Research

Free Research Content:

Products & Services:

Comments

Hi Jamie, thanks for the tips. My UI sketching techniques could certainly use a little improvement.
Jack

Hello Jack,

Glad to hear that. I’m thinking about writing a few follow-up posts that go into detail about the different UI sketching techniques and pitfalls.

In regard to #2, what do you recommend for labeling or identifying certain elements when sketching? For example, this button is the “submit” button while this one is the “cancel and go back” button. I tend to shy away from iconography and actual text, as you say, but I do find value in using some text to identify the action or role of an object in the sketch. Do you find this ok, or do you recommend other techniques, such as different colors and a legend?

Premium Research

Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.

Audit Service

Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.