10 Useful Techniques To Improve Your User Interface Designs

Advertisement

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference:

Inline and padded links

Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Converting links into block elements makes the text area span the whole width of the container, unless the width is specified otherwise. This makes it ideal for links located in sidebars. We can do it with the following code:

a {
	display: block;
	padding: 6px;
}

Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe.

2. Typesetting buttons Link

Attention to every detail is what separates a great product from a mediocre one. Interface elements such as buttons and tabs are clicked on many times a day by your users, so it pays to typeset them properly; and by typesetting I mean positioning the label. Here’s a couple of examples of the kind of misplaced labels I sometimes notice:

Badly typeset button labels

At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so:

Badly typeset button labels

However, if we use uppercase letters as well as lowercase letters with ascenders (“t,” “d,” “f,” “h,” “k” and “l”), the balance shifts upwards, making the label appear too high on the button. In such cases, we should set the type using the uppercase height as a guide — or set it a little bit higher if most of the letters are lowercase. Here’s what I mean:

Badly typeset button labels

This gives the whole button a more balanced look and feel. Little touches like this go a long way towards making your interface more polished and satisfying to use.

3. Using contrast to manage focus Link

Similarly, you can also manage the focus of your visitors’ attention with contrast between elements. Here’s an example of a post headline and some meta information underneath regarding who posted the article and its date:

A typical blog post headline

All the text is set in black. Let’s decrease the contrast between the meta information (the date and author’s name) and the background by putting the text in a light shade of gray:

Headline with adjusted contrast

The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background. Here, I’ve chosen the author as the second-most important element, and the date as the least. The font also differs in size and style, but the contrast level can be very powerful. Let’s reverse the order of importance to date, author and headline:

Another headline with adjusted contrast

You can see how effective it is in shifting focus: the date now pops out at you, while the headline fades away. This technique comes in very handy for information-heavy websites, such as blogs, forums and social networks, in which you want to make a lot of information easily scannable while still showing a lot of additional things, like dates. Fading the extras allows visitors to easily focus their attention on the most important pieces of text.

4. Using color to manage attention Link

Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color.

Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:

Comparing warm and cold colors

Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:

Function website
Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.

Causecast website
Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message.

Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company.

5. White space indicates relationships Link

One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements.

So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:

Whitespace usage here can be improved

The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:

Improved whitespace

This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space.

6. Letter spacing Link

Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property.

If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes.

Here’s an example of letter spacing in use:

Letter spacin examples

And here’s the CSS code used for the above examples:

h1 {
	font-family: Helvetica;
	font-size: 27px;
}

h2 {
	font-family: Helvetica;
	font-size: 27px;
	letter-spacing: -1px;
}

h3 {
	font-family: Georgia;
	font-size: 24px;
	letter-spacing: 3px;
	font-variant: small-caps;
	font-weight: normal;
}

The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font.

7. Auto-focus on input Link

Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.

Wikipedia auto focus
Upon arriving at Wikipedia.org1, the search box is already highlighted, ready to accept text.

To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:

<body onLoad="document.forms.form_name.form_field.focus()">

Your form code should look something like:

<form method="get" name="form_name" action="#">
	<input type="text" name="form_field" size="20" />
	<input type="submit" value="Go" />
</form>

Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input.

The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here2. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete.

8. Custom input focus Link

While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:

input {
	border: 2px solid #888;
	padding: 4px;
	font-size: 1em;
	background-color: #F8F8F8;
}

Default and styled input fields

What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:

input:focus {
	border-color: #000;
	background-color: #FFFE9D;
}

Input field in focus

If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:

OS X input glow

In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:

input:focus {
	outline: none;
}

The blue glow effect will now be gone:

OS X input glow removed

Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms.

9. Hover controls Link

Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:

Twitter's hover controls

These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):

.message .controls { display: none; }
.message:hover .controls { display: block; }

When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
    .message .controls { display: block; }
  </style>
<![endif]-->

10. Verbs in labels Link

You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right?

But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.

WordPad and OS X save dialogs

Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision.

To Conclude Link

Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for.

Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context. (al)

Footnotes Link

  1. 1 http://www.wikipedia.org
  2. 2 http://www.whatstyle.net/articles/51/focus_onload_but_keep_backspace_intact

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

Advertisement
  1. 1

    Very useful article! thanks.

    2
  2. 2

    It really is simple things like the spacing of labels and other elements on the page that can make the biggest difference in a site’s over all feel to the viewer. Spacing that is thought out and deliberate is one of the things that won’t jump out at the average viewer, but the impact on their perception on the site is huge. It’s one of those things that is easy to overlook because “no one will notice”, but it’s such a huge part of the overall polish of a design…

    Nice article, lightweight but good food for thought, especially the letter spacing and verbs in labels.

    0
  3. 3

    Nice, thanks!

    1
  4. 4

    really helpful! Thanks

    4
  5. 5

    Now this is what I call a useful article! Thank you! I was beginning to get fed up with all those “Just list / Don’t evaluate” posts here on Smashingmagazine…

    3
  6. 6

    Simple guidelines but nice and effective

    0
  7. 7

    this is realy a useful article, thanks for sharing

    -1
  8. 8

    Very good article ! It’s much better than the usual posts that appear here lately.

    -1
  9. 9

    Great article. You take a lot of this stuff as a given when designing – but reading it in black and white is great; and reassuring! I’ll be pointing my team at this in the morning. Thanks Smashers.

    -1
  10. 10

    I’d have used relative (ems or %) sizes rather than pixels for the letter-spacing example but thats nit-picking for a very informative and useful piece. Nice article Dmitry.

    -1
  11. 11

    StartBreakingFree.com

    December 15, 2008 3:08 pm

    Best article I’ve read here in a while Dmitry! I’ve subscribed to your blog. Thanks!
    Brian

    P.S. This post (and your blog) should be required reading for every Microsoft employee.

    0
  12. 12

    Wrong – Wikipedia.org does not have auto-focus on their home page search box. Google.com, however, does.

    -5
  13. 14

    Jakob Løkke Madsen

    December 15, 2008 3:15 pm

    Nice one. Thanks!

    -1
  14. 15
  15. 16

    All important tips! I can’t stand search boxes or other form fields that are pre-populated with text but do not clear the text on focus.
    Steve Mullen [ Steve Mullen ]

    -1
  16. 17

    Vitaly Friedman & Sven Lennartz

    December 15, 2008 3:24 pm

    @mikemike (#11): just checked it: Wikipedia.org does have auto-focus on their home page search box.

    0
  17. 18

    Great article. Thanks.

    -1
  18. 19

    Thanks for the positive comments everyone — I’m really glad you find this useful.

    mikemike: They do have auto focus, but only on the front page. Same thing with Google. It’s actually a good point because on something like Google you wouldn’t want the box highlighted on the other pages because you’ll often use the backspace key to go back (although even that won’t be an issue if you use the script I linked to)

    Damien: Ems would of course work fine too, good point.

    0
  19. 20

    This is one the best roundup of UI tips I have seen. If everyone would follow these, the web would be a better place.

    0
  20. 21

    Awesome post, I hope some of my co-workers read this :P

    0
  21. 22

    I like the concept of hover controls, but in my experience :hover isn’t very widely supported (doesn’t seem to work in IE 6/7 FF 2/3, but does work in Opera / Safari).

    Am I doing something wrong, or is javascript a better option here…?

    0
  22. 23

    Very Good post…..reallu useful

    0
  23. 24

    Lenymo: Strange. You shouldn’t really have a problem using :hover on modern browsers, it’s really only IE6 that doesn’t support it (it only supports it for anchors)

    0
  24. 25

    Ok, I’ll do some more investigating.

    Great article by the way!

    0
  25. 26

    Great Post, very usefull tips on it.

    0
  26. 27

    What’s with the dropping of off-topic links to sites in some of these replies. I know all the links are nofollowed, but doesn’t it still classify as spam?

    0
  27. 28

    Sorry, but tip number 7 is VERY annoying, especially if you have a page which requires scrolling. If I want to scroll down using the keyboard – either up/down, home/end, page up/page down then it does not work as the input field has focus, meaning I must click off the box to get control back of the page!

    Just DO NOT do it!!! I’m not even someone with any accessibility problems, I just use these keyboard shortcuts on both desktop and laptop, to save time, and then this input box ruins it!

    1
  28. 29

    Excellent article. A lot of really useful examples. Couldn’t agree more about verbs in labels. Thanks for that.

    0
  29. 30

    This is a great article! Thanks for sharing these guidelines with us, I’ll be sure to take note in my future designs.

    I’d have to agree with Michael, though: I understand the purpose of auto-focus but it seriously degrades usability for keyboard power users like him and myself.

    That said, I’m not actually condemning the use of auto-focus; for the curious, here it is in jQuery:

    $(document.ready(function()
    {
        $('input[name=field_name]').focus();
    });
    

    Also, custom input focus doesn’t work on IE6 (7?) either. But I do know that it isn’t as bad as its lack of support for :hover on anything but anchors.

    0
  30. 31

    Nice article ;)

    BTW So, if instead of “…

    0
  31. 32

    Annya A. Uslonseva

    December 15, 2008 7:23 pm

    Hi, I have been a subscriber for a few month now. But I have never wanted to place a comment. But after this one I do. I am a graphic designer, not a coder at all :) But I am redesigning my website now, i.e. working with a coder. So I draw and he codes. I asked him last week about letter spacing and was told that it does not exist in web. But after reading your article I was able to apply letter spacing to my headlines and I love it! Thank you so much for great info! The info presented in a way ever a print
    designer like me can get it :) If you want to see the results visit my website. http://www.auadesign.com

    -1
  32. 33

    Some great UI tips there. very useful for project im working on now, thanks smashing!

    0
  33. 34

    Awesome tips…just wanted to note that input:focus will not work in IE browsers.

    2
  34. 35

    Another problem with auto-focus is that the next field you tab to will not always be the next field it would tab to if the user clicked into the field themself. I think this problem only effects IE, and it might only occur inside of frames, but I remember running into it.

    0
  35. 36

    Excellent Article!

    0
  36. 37

    hand picked ..so nice

    0
  37. 38

    First! Ah, dammit.

    Seriously – great article. Words to live by – if only clients were as aware of these reasons behind our choices, that they aren’t just arbitrary.

    0
  38. 39

    Lovely… amazing post as usual.
    /bookmark

    Still – 10 techniques, that’s just an appetizer! We want more! :)

    1
  39. 40

    Maggie Wolfe Riley

    December 15, 2008 10:21 pm

    Almost all great tips, but I really hate autofocus used in form fields. I am a keyboard user and it breaks functionality for me. It is so easy to tab into a form field, I really don’t get how autofocus is a big advantage, and it is a serious annoyance to me because I have to click outside the form field to go back if I didn’t mean to go to that page. Yes, I realize there is a javascript “solution” to the problem you created, but it only works if you use the backspace/delete button to go back, and not keyboard commands.

    Also, please don’t make the focus automatically jump to the next field! It takes me twice as long to fill out these “helpful” forms because I end up tabbing to the field following the one I try to tab to. It’s automatic to hit tab after completing a form field, and difficult to “unlearn” for a single form that uses this technique.

    Other than that, though, great article!

    0
  40. 41

    Nice post!

    I’d however like to point out that the use of document.form... in javascript is deprecated, and that you should be using document.getElementById() instead (or the jQuery-method mentioned by BoltClock above!).

    0
  41. 42

    Useful article!

    0
  42. 43

    Great article. But I wish Smashing Magazine used 5th technique from this article when providing description (or source) to the photos, images, etc. For example in this post. The description is placed right in the middle between photos and it is not clear which photo it is related to.
    It is just my personal observation. Any way, Smashing Magazine is a great blog.

    0
  43. 44

    Excellent!! specially the 10th note.. Thank you

    0
  44. 45

    great article

    0
  45. 46

    the best that i ever read !!!

    0
  46. 47

    Thanks mate :)

    0
  47. 48

    beautiful tips.

    0
  48. 49

    very smart writeup. thanks!

    0
  49. 50

    Awesome piece…. as usual :)

    0
  50. 51

    luuuuuv it!
    Specaly the last one is an important thing!

    0

↑ Back to top