7 Useful Techniques To Improve Your User Interface Designs

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 7 that I think you’ll find useful in your work. Interface design, which focuses on the layout of the functionality of interfaces, is a subset of user experience design, which focuses on the bigger picture: that is, the whole experience, not just the interface. 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.

1. Padded Block Links

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 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. It’s a simple list of links. The links are all inline elements, which means to select a link you have to click on the text itself.

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. But in this context, we can do much better than that. Each link is sitting in its own box, which means we can turn those inline links into block links. This makes it ideal for links located in sidebars. We can do it with the following code.

Now – in that TechCrunch example above, they also have a date label of when the post was published. That’s just text, not a link – however, I think it would make sense to span the link the whole area as I illustrated above. One way to solve this would be to add the data label inside the anchor tags and use a span around it for custom formatting. 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

Creating a style guide is not a new practice in the industry. It’s been used as a communication and standardization tool by designers for a long time. Web professionals have decided, quite rightly, to adopt this tool in their process, and have modified it to fit the fluid nature of the web. 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.

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:

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. 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

Similarly, you can also manage the focus of your visitors’ attention with the contrast between elements. The bigger the visible change the easier it is for someone to see, authors are encouraged to make the change as large as possible.

All the text is set in black. Let’s decrease the contrast between the meta-information to establish if a focus indicator has a size equivalent to at least a 2px line along the longest side: If a link is 90px wide by 30px tall, the indicator would need to behave a minimum area of 180px square. (I.e. 2px wide along the longest side is 2 x 90px.)

If controls change size across different variations of a page (e.g. in responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way, you can be sure of meeting the size requirement. The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background.

If you need to use complex mathematics to work out if a focus indicator is large enough, it is probably a sign that you should use a larger and proportional indicator that will provide a more visible indicator.

4. Using Color To Manage Attention

Color can also be used to effectively focus your visitors’ attention on important or actionable elements. Learning is a difficult field to understand, and there’s so much research out there discussing these issues that it’s hard to know where to begin. What’s pretty obvious though is that color plays a key role in creating an environment that fosters learning.

So let’s talk about color – What colors help to learn? What colors might be annoying or distracting to online learners? And how can we mitigate that risk? That’s what we’ll be delving into here.

Using the right color, and the correct selection and placement can seriously affect feelings, attention, and behavior when learning. It’s time that we leveraged that to our advantage.

5. White Space Indicates Relationship

One of the most crucial elements in an interface is the white space between elements. White space is just that -- it's space between various content pieces, like paragraphs, headings, buttons, and so on. This space can be tweaked to achieve different effects -- such as to separate elements apart from each other by increasing the amount of space or group related things together by tightening it.

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.

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

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.

The letter-spacing property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. 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.

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

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 is super handy if your site has a form and you can automatically select the first input field and your user can start typing right away.

When this alert loads, the autofocus is kicked in to automatically select the "Do not delete" button. However, due to the limitation of autofocus for screen readers. 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.

To Conclude

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.

Frequently Asked Questions

A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do