Best Practices for 6 Common User Interface Elements

The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today’s market.

Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.

In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.

But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.

This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.

 

1. Appearance of the Search Box

On large information-rich or product-heavy websites, search is king. Users here generally forgo conventional navigation bars in favor of the search box.

A search box that is not immediately visible will have one of two effects: 1) the user will assume no search functionality is available, or 2) the user will find the search functionality after a delayed, and possibly irritating, period.

Ensure that the search box on your website is easy to see. Dark backgrounds and fancy graphics will impair usability, so keeping it white or light gray is best. Also, make sure the search box is large enough relative to other important elements on the page, thus maintaining its position in the visual hierarchy.

The search box on Domain by IP fits the visual theme of the website nicely, being orange and graphically consistent with its surroundings. But if a search box on a busier website were given this treatment, it would probably be difficult to spot.

The design is not a hindrance on Domain by IP because the website has one function: search, which is right in the middle of the page. Plus, being in a technology niche, its developers have less of an incentive to stick with convention. But this degree of creativity should be avoided on larger websites, whose target audiences may not be as technically savvy.

Adventure Time, meanwhile, keeps its search box white, conveniently sized and easy to find on the page:

Despite being in a foreign language, Adventure Time has a very clear search box, even for English-speaking users. The size and color of the box is complemented by the magnifying glass graphic, which has become the universal symbol for online search. A user looking for this functionality will not have a problem here.

This pattern should be followed in all projects targeted to a diverse user base.

Further Reading:

 

2. Clearly Marked Collapsible/Expandable Content

Websites benefit from collapsible panels and drop-down menus because they make for cleaner and less cluttered layouts. The hidden content in these interface elements can, however, impair a website’s usability if their presence is not clearly indicated.

When a user clicks on a bare link or button, they expect to be taken to a new page. But when a user clicks a link or button that has a hidden content indicator, they expect the new content to be instantly displayed (via JavaScript or AJAX) and have the option to hide it subsequently. Thus, a website should sharply differentiate between normal links and links that reveal new content via JavaScript.

Collapsible content, such as in side panels and menu trees, can be indicated with an arrow, triangle, or Windows Explorer-like plus/minus indicator. The panel that logged-in users see on CSS Globe clearly indicates that it is collapsible:

Below is the same page after the panel has been expanded to reveal a group of functions:

With the content in the panel now expanded, the arrow is rotated 90 degrees, suggesting that the same content can now be hidden or collapsed. This same principle can be applied to drop-down or fly-out menus, although these would not require a rotating arrow. Surprisingly, this feature is often omitted even on professionally designed websites.

Further Reading:

 

3. AJAX Loading Indicator

When you improve the user experience by loading content through asynchronous requests, make sure to inform the user that an AJAX request is being processed. Without this indicator, the user may give up waiting or wonder why nothing has happened in response to their click.

You can accomplish this in a number of ways; one way is to highlight a “Loading” or similar message in or near the location where the action will occur, as Google’s RSS reader does:

At the top of the screenshot is yellow highlighted text, which appears when the “Mark all as read” button is clicked, telling the user that something is happening.

Another way to indicate this is with animation or a revolving hour glass, which would be familiar to Windows users. An animated indicator is used on numerous websites, including Twitter, where users click a “More” button to view older tweets:

Once the button is clicked, and depending on the speed of the client’s connection to the server, a familiar animated swirling graphic appears, telling the user that their request is being processed.

AJAX loading graphics are available for free from a number of different websites, many of which allow you to customize the graphics with size, color and other options.

This type of visual indicator is important for asynchronous requests that don’t provide client-side clues about what activity is loading.

An AJAX-like indicator could also be used to enhance non-AJAX functionality that behaves like AJAX and takes time to load. This could include a photo gallery that loads a larger image when a thumbnail is clicked.

AJAX loading graphics and other indicators don’t actually speed up a page, but they do improve the “perceived” load time, which is often just as valuable as improving the actual load time.

Further Reading:

 

4. Location of Shopping Cart and Log-In and Register Functions

When users scan a page for the “Shopping cart” button or “Register now” link, the first place they look is the top-right corner of the page. Unless you have a compelling reason to do so, keep this functionality in its familiar location, or else you risk slowing down and disrupting the user experience.

Options and functions that would fall under this category include “View cart,” “Check out,” “Log in,” “Log out,” “Register,” “Submit link,” “Forgot password?” and even “Contact us.” This last item would usually be the last one in a horizontal navigation bar.

TasteBook includes four such links in the top-right corner of its layout:


Maui Divers Jewelry is another good example and also includes a shopping bag graphic:

 

5. Expiration Date Format on Credit Card Forms

When a form asks for your credit card’s expiration date, the format is always the same: the month, represented by two digits, followed by the year, represented by two or four digits (e.g. 03/11 or 03/2011). The four-digit format is how the expiration date appears on the credit card itself.

The best way, then, to collect this information and strengthen the user experience is to use two separate select boxes, one for the month and the other for the year. Don’t make the user enter the expiration date in a single text box, even if you provide instructions.

Here is a good example from the payment page of Maui Divers Jewelry:

And here is an example of a poorly designed expiration date field:

Moreover, the month selector should not display the names of the months, but instead should list the numbers 01 through 12. There is no reason to slow users down by making them figure out that “08” means “August.”

 

6. Easily Identifiable Links

This should never be a problem, but unfortunately some websites still do not clearly distinguish between links and regular text in the main body.

In most cases, the best way to indicate this difference is by making links a different color and underlining them. In some cases, a strong contrasting color alone is enough; but only underlining or just changing the color slightly is rarely enough and will often impair accessibility.

Cameron.io makes this distinction well:

These links would not be as visible if they were merely underlined but not changed in color. You wouldn’t design a button that didn’t look like a button, so why let text links blend into the main body? As most users scan text online, designers should ensure that all links are identifiable long before a mouse is rolled over them.

Further Reading:

 

Conclusion

All of the user interface elements and functions discussed in this article are crucial to website usability and play important roles in the user’s perception of your brand.

Many small enhancements can make a big difference in perceived speed and can keep users from getting frustrated or uncomfortable.

Make your user interface elements simple and streamlined, and follow conventions where possible. You will see reduced bounce rates, better conversions and a steady flow of returning traffic.


Written exclusively for WDD by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design.

How could some of these or other user interface elements be improved? Please share your thoughts in the comments below.


  • http://www.aphichat.com Aphichat Panjamanee

    Great post! love this!

  • http://sexidesign.com Melody

    I also find it hard sometimes to figure out if there is a “enter,” “submit,” or “find,” button for search boxes…I guess these circumstances are when you’re supposed to just hit “enter”…but then they never tell you that either!

    Probably the best route to take is to ask a friend that is new to computers or not as advanced to click around your site for usability purposes…that way they can detect minor annoyances before your readers!

  • http://www.smashingshare.com/ Waheed Akhtar

    Very nice and informative article. Thanks for sharing

  • http://www.iconfinder.net Martin Leblanc

    Very good post. It’s nice to be reminded about these things.

  • http://conceptlogic.com/jcart/ Doug Whitney

    The site for #6 Easily Identifiable Links is a problem for colorblind users who can’t distinguish the red color from surrounding text. A great example of why links are underlined by default.

  • http://www.designfollow.com/ designfollow

    thanks for this great tips.

  • http://www.robinthomas.in Robin Thomas

    Very Nice article.. Especially “Appearance of the Search Box”

  • http://denbagus.net denbagus

    The best information i have found exactly here. Keep going Thank you

  • http://www.2expertsdesign.com 2expertsDesign

    Always love these type of articles.

  • http://www.aledesign.it aledesign.it

    Thanks for sharing, really good post. Useful!

  • http://www.empfehlenswert-wien.at wien

    nice post, very helpful

  • http://www.redesignyourbiz.com/ Web Designer

    wow. i love this post. thanks for the tips. i do agree that the link can be of any colour other that the traditional blue, but that colour should be in contrast with the overall text and it should be the same throughout the site. And never use that colour for anything else other than links.

  • http://www.skix.pl SkiX

    Very usefull post!

  • http://www.creativeindividual.co.uk Laura

    As always, good stuff. Thanks Louis and keep it up WDD.

    My only other thought is that if something is a button or link or has some sort of action, that it should have a rollover effect to reassure the user that they won’t just be clicking randomly.

    And also that there should be NO rollover effect if click will have no effect/action, as with some sites I’ve visited…now that’s annoying!

  • James

    Along with the search box comments, I find it supremely frustrating when you enter your search query, and hitting your enter button on the keyboard does not trigger the search.

    Easy to do, but many sites drop that particular ball.

    Great post!

    • http://www.impressivewebs.com Louis

      That’s a very good one, too. I’ll keep that in mind for a future article. Thanks.

  • http://diezels.com/blog Thiago

    Here is another great gif generator for ajax: http://www.loadinfo.net/

  • http://www.em3.rs Milos Milikic

    Good post… Thanks!

  • http://php-programming-tutorial.com Jonathan Bennett

    Nice post. :)

    I was just at ajaxload.info the other day.

  • braydenstyles

    another superb post guys and gals ! you articles are always truly helpful!

  • http://photoshoplove.com/ photoshoplove.com

    All spot on, great summary of some usability gems! Great book to read on Web Usability is “Dont Make Me Think” by Steve Krug

  • http://premiumthemeclub.com/ Premium Theme Club

    good information for my e-commerce site project.thanks for the great post.expecting some more like this.

  • http://www.cmstheme.net WordPress Themes

    Very well written post! The “Clearly Marked Collapsible/Expandable Content” is something that designer usually forgot to put on their layout.

  • http://twitter.com/eliburford Eli

    I wouldn’t say that your example of good hyperlink practice is a good one. I would say that underline alone is the most effective; colour being irrelevant when considering colour blind people.

    • http://www.impressivewebs.com Louis

      Probably the best way to do it is color plus underline, but I’m being realistic. Not everyone is going to follow that. So I say make sure you have at least the color difference.

      I didn’t really talk about accessibility, but I’ll keep this in mind for future material, thanks.

  • RoaldA

    Cool!

  • http://www.problogdesign.com/ Michael Martin

    Really great points made here; in particular the dates on credit card forms. I’ve never had to set one up myself, but I’ve gotten frustrated at a customer on a fair few poorly designed sites in the past! It’s nice to see some discussion on what can make those forms more pleasant to fill in :)

  • http://blog.karachicorner.com Muhammad Faisal Jawaid Attari

    hmm! very useful post for new and old web user…

  • http://futurebells.com Social Media marketing

    very useful and Inspiring easy article to read and follow.

  • lucideer

    While Eli #23 makes a fairly valid enough criticism, this is all round an excellent post (though I feel it could possibly go a little further – beyond 6). Bookmarked for future use.

  • http://www.collectiveconcepts.co.uk Matt

    Ok good points but not sure I agree with the examples:

    For number 2 – I’ve got perfect eyesight yet it’s not easy to see the ‘indicator’ that more content will appear. You appear to have fely the need to indicate exactly what we should be looking at with a big red circle… if what you were showing was that clear it wouldn’t need highlighting – compare that to item 1 (the search box) no need to show us where we should be looking. So I think the principle is sound but the example isn’t! Also whilst i’m on this one that rotation is 90 degrees not 45 – “the arrow is rotated 45 degrees”.

    For number 3 – Same issue with the red arrow for the 2nd example. Personally i’m not a fan of Google’s method either (though this is totally subjective) I’d rather see the indicator that something is happening appear either where it is happening or next to where I just clicked that caused the action.

    For number 4 – just use amazon. I suspect that anyone buying anything online is most likely to have had experience on amazon (if not their first experience), no need to cause users to try and relearn stuff (unless your site is informative and not sales based).

    For number 6 – Erm in that screenshot am I to take it you were on the ‘Home’ page – why is that red in the links – is it always that colour? Does it indicate that red links are links I’ve visited? Is the date a link?

    Now for some apparent contradiction – @comments #23 and #28 (though this is really a question) Are colour-blind users unable to see colour versus black and white or is it just that they may see 1 colour as another i.e. where we see red they see green – but in that case they still see a colour that is different from the main body text. Yet I still agree that an underline is the definative indicator of a link (in fact I tend to use :visited{text-decoration:none;} to remove underlines from visited links but will also change the colour.

    Also I’d suggest trying to aviod using the 3 default colours on links to have a different meaning (blue=link, purple=visited, red=active). Strange/confusing(?) to use red as a standard link colour?

    Enjoyed the read and agree with the concepts – perhaphs just not the example implementations.

    Matt

    • http://www.impressivewebs.com Louis

      Matt, thanks for the comments.

      Number 2 – The red graphics that I include are usually for the benefit of those who “scan” the articles, not for those who are reading. And you’re right, “45 degrees” is a mistake; I’ll send a note to WDD to correct that.

      Number 6 – Everything that’s red is a link on the example site. I wasn’t discussing the “current page” indicator, but yes that is also red. I don’t see that as a problem at all, since those are also links.

      Also, I wasn’t discussing accessibility in this article, I was discussing principles in usability for average visitors. For general usability, I personally don’t think underline alone is enough. I like a contrasting color better than underline alone, but as I pointed out, the best way is to use underline plus color, which would solve both usability and accessibility concerns.

      Thanks for the feedback.

    • http://www.webdesignerdepot.com Walter

      90 degrees…. fixed, thanks!

  • lucideer

    @Matt #29
    Colour blind users typically see “less” colour, as in can distringuish a smaller range – i.e. two different colours can look the same to them. For example, purple and blue may look indistinguishable, dark shades of colours may be significantly MORE difficult to distinguish from black. To make things more complex, there are also different forms of colour blindness, meaning different people can have different issues seeing different colours – deuteranopia affects a completely different colour range to tritanopia.

    If you are using text-decoration:none, it’s at least advisable to use :hover{text-decoration:underline;}

    On the other hand, anyone with colour vision issues can use user stylesheets to aid visibility, so it might not be the most major of issues.

  • http://www.logolitic.com logolitic

    very nice post, thanks

  • http://www.usertesting.com Amanda McNeill

    Nice article! Good basic info. I agree with Laura, above. I think there should be some kind of rollover or color change on buttons to indicate they are doing something.

    If you’re interested in usability tools you may like this article from Website Magazine http://bit.ly/32mqlQ. It reviews usertesting.com (which I am affiliated with) and several others.

    Amanda

  • http://www.platinummango.com/ Jordan Foutz

    I was just on a LinkedIn discussion board and there were several people sounding off on possible culprits for increased cart abandonment rates. I would say everyone could benefit from each point cited in this post. I’ll definitely consider these points in the future.

  • http://newmediamak.wordpress.com Makenzie Marineau

    Very helpful and great ideas for those who need a little extra help when making their websites convenient. I run into a lot of issues with, especially local, business websites that don’t understand these concepts of design and reader accessibility. Thanks for the great post.

  • http://www.Mkhalidkhan.com Mkk
  • http://www.emlakx.net Emlak

    wow. i love this post. thanks for the tips. i do agree that the link can be of any colour other that the traditional blue, but that colour should be in contrast with the overall text and it should be the same throughout the site. And never use that colour for anything else other than links

  • http://www.kayemedia.net Miles Kaye

    Great post, enjoyed reading this.

  • http://www.bosonstyle.com boson

    awesome post, like the contents and the graphics- so nice