Article overview

4 User Interface Sketching Pitfalls

· By · 3 comments ·

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.

Jack M. June 29, 2010 Reply to this comment

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

Jamie, Baymard Institute July 5, 2010 Reply to this comment

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.

Kris Gösser November 22, 2011 Reply to this comment

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?

Post a comment!

Close overlay