Article overview

UI: Getting the Details Right

· By · 5 comments ·

Fi animate their case study call-to-action on hover.

User interface details matter to the overall user experience.

Many users may not consciously notice these details on your site yet they do have an impact on the overall user experience. When everything feels just right the perception of your site and brand is improved.

In this article we’ll look at 5 different types of UI details you should pay attention to.

Spatial indicators

An easy way to establish virtual space is by using spatial indicators throughout your design. These are essentially any type of indicator that suggests space.

Arrows and dots are used as spatial indicators for this slideshow plugin.

This jQuery plugin makes heavy use of spatial indicators, with a set of dots at the bottom to indicate the number of slides and arrows for next / previous actions.

A good example of spatial indicators is the set of small dots you often see at the bottom of a slideshow, with one dot activated for the current slide. These dots indicate how much content there is and where you’re currently at in the sequence (which indirectly suggests how much is ahead and before).

Apple makes good use of arrows in their breadcrumbs to indicate hierarchy.

Another example of spatial indicators is a well-designed set of breadcrumbs that use arrows to imply hierarchy.

Spatial indicators are often subtle and may be rejected as mere decoration, but simple things like using an arrow instead of a middot can be important because an arrow denotes a path or direction, whereas a middot merely denotes separation.

Animations

Animations can be much more than flashing banner ads and fun cartoons. Subtle animations can be used to give the user a sense of direction and space.

Fi use a subtle animation to encourage clicks when you hover their case study call-to-action.

Animations can often be used successfully when going from one state to another. For example when you hover some anchor content the text and image change, inspiring the user to click.

The Facebook iOS app slides the menu in from the left.

Or instead of toggling your menu’s visibility on / off, a sliding animation can provide a sense of direction. This type of animation helps establish a virtual space, letting the user know where he is going and how to get back.

Hitarea

Clicking links make up nearly all navigation. Even when searching we tend to click a (search result) link to get to the page. Clearly the area that affords this interactivity is hugely important, yet it’s often overlooked because browsers provide default behavior for it.

Making the hitarea include all elements of the article snippet makes sense as they all lead to the same content.

A mock-up of what anchor content could look like at SFGate. Story image, headline, and text snippet, are combined into a single link with a single hover effect and hitarea.

Generally you should consider if your hit areas are big enough. For example, if you designed a big button be sure that all of it can be clicked. And vice versa, making your hit area too big without any visual indications may result in accidental clicks.

In short: the size of your hitarea should align with the design in order to meets user expectations.

Icons

When you hover the icons a tooltip appears explaining the action.

In the new Gmail design icons are used for all the primary buttons.

Icons have two special properties, they are:

  1. Recognizable – this is good, because the user can quickly find a specific icon in an interface due to its high fidelity and uniqueness, making it much easier to discern one option from another (as opposed to pure text options).
  2. Open to interpretation – this is bad, because some users will misinterpret your icons. For example, a printer icon might also look like a shredder. If you are making your own icons, or just icon styling, the likelihood for misinterpretations increase as people are not familiar with those icons.

Icons should preferably be used as a supplement to text labels unless the user base will be using the same application every single day and are willing to learn what each icon represents.

Copywriting

When a user interacts with your site one of the most important navigational clues is your copy.

This can be the naming of navigational elements, which not only allow a visitor to navigate your site, but also help new visitors understand what content they may find on your site.

Careful naming of buttons and error messages is critical too since people may misinterpret them if you use contextual or ambiguous words.

Many people don't properly read button text so refrain from contextual words such as 'Continue'.

During our usability test session 3 out of 10 test subjects misinterpreted contextual words such as “Continue”. In this checkout process some subjects simply read “Continue…” and clicked the button expecting to continue their checkout.

Your headlines should carry information-scent allowing the user to accurately assess what content she will find, yet at the same time the headline must sound interesting to encourage clicks. This is further complicated when your headlines are featured outside the context of your site, e.g. shared on Twitter, which we talked about in our previous article.

Final words

These kinds of details can help lift a user experience from good to great. However, if you don’t get the basics right these kinds of details are worthless. A solid foundation must be in place for the details to matter.

Sam Stange January 26, 2012 Reply to this comment

Nice article. Thanks for sharing!

Brad Cole January 26, 2012 Reply to this comment

Some great points to consider, thanks!!

Katie Blackman January 26, 2012 Reply to this comment

This is such useful information. There’s so much we can do with CSS and jQuery to improve the user experience. Thanks for giving me lots of ideas!

Mathew J. Smith January 30, 2012 Reply to this comment

Yeah, when I took classes for JavaScript and jQuery it blew my mind what’s available given what’s used. Things could be made so much more intuitive and well done.

Pavan February 6, 2012 Reply to this comment

Merci. Tres bien!

Post a comment!

Close overlay