Now, these usability components won’t tell you specific rules for how to design a website or write content for one. What they will do is pose questions about many factors related to the design and content of your website – factors that ultimately contribute to a visitor’s perception of, and satisfaction with, your website.

How you decide on the answers to these questions goes a long way towards making sure that your website does what’s supposed to do: communicate information to visitors in the hopes that they’ll enter into some relationship with your organization or business. (That relationship can be many things – at minimum though, it can be defined as some transaction of information between you and your visitors.)

So let’s take a look at some of the specific components of usability. To make it easier, I’m breaking it up into three smaller categories – design-related, content-related, and user-related.

Design-related

Web designers have a lot of control over a website’s usability, and for good reason too – so much of our perception of a website centers on the visual and on the design tools that help visitors navigate the website. Here are some usability components that web designers have influence over:

• Findability – Does the design make it easy for visitors to do the basic tasks that they’ve come to your website to do? It shouldn’t be a stumbling block in the visitors’ path – findability means letting people find where they want to go quickly and without confusion.
• Utility – Does the design and functionality allow your visitors to complete the task that they’ve come to the website to do, or does it get in the way? For example, does a website make it easy for customers to find and purchase a product?
• Accessibility – Accessible design lets all visitors understand the content on your website. Designers can ensure this through such things as good color contrast, proper font sizing, good link text (and not using “click here” as the link text), etc.
• Scanability – Does your design make it easy for your visitors to quickly scan your website and understand what it offers them? Good, clean design with properly spaced, properly colored, and properly sized elements will help do this.

Content-related

Web content writers also have a large role to play in a website’s usability, because after all, the content is what visitors are coming to the website for. Usable website content is also:

• Useful – Does your content provide the information that your visitors are looking for? Useful content is on the need-to-know basis. Tell your visitors what they need (or want) to know in order to complete a transaction with you; anything more will confuse them.
• Valuable – Valuable content gives your visitors something that they can’t find elsewhere, and has a strong connection with their why they’re searching for it. It will also make it more likely that they’ll come back to your website in the future.
• Credible – Why should visitors trust your website? Is the content fact or just your opinion? How rich is the content compared to similar websites? How current and accurate is the information? All of these factors, and much more, go into building your content’s credibility.
• Accessible – Is your content written in simple language that all visitors can understand? The clearer the language, the more usable your website is, especially when taking into consideration that not all visitors have the same web literacy level.
• Scannable – Can visitors scan your website and see headers, links, etc. written in simple language that clearly tells them what the content and your website is about? For example, the link to your about page should say “About”, not “Who We Are”.

User-related

The last person that plays a big role in determining a website’s usability is ultimately the one who the website is intended for: the visitor. It’s their perception of a website that matters the most. Your usability decisions will certainly impact on their perception, but there are some things you can’t control for.

Here are some of the usability components that are most strongly perceived by your visitors:

• Learnability – Is it easy for new visitors to accomplish basic tasks the first time they’re interacting with your design and content? You can bet that a website that’s difficult to learn to use will have few transactions and few people coming back to it again.
• Memorability – When users come back to the website after a long period of not using it, how easy is it for them to re-figure out how to use it again? To establish consistency, consider using the same terminology in any redesigns of your website.
• Satisfaction – How pleasant do your visitors think the overall experience of using your website is? If your website doesn’t get in the way of them doing what they want to do, that’s good. If there are so many problems that they give up in frustration, that’s bad.
• Errors – What happens when someone does the wrong thing on your website, such as filling out a form wrong, or clicking on a broken link? Your website should clearly communicate what went wrong and how they can avoid it in the future – it will go a long way.

Thoughts?

What other components do you think there are to your website’s usability? What have you experienced while visiting other websites that has contributed towards them being usable? Share your thoughts with everyone by leaving a comment below!

What is a call-to-action?

A call-to-action is the fundamental reason that you have a website in the first place. In web marketing, it’s defined as something, either a design element or some piece of content, that compels a visitor to take some specific action that you can measure to determine whether your website is working or not.

Every type of website you can think of has a call-to-action built into it, although of course some websites are better at emphasizing it than others. Calls-to-action provide focus for your website and if done right, give direction to your visitors for what you ultimately want them to do. Examples of a call-to-action include:

• Make an online donation
• Request an appointment
• Purchase a product
• Fill out a request form
• Register for an event or program

What makes a call-to-action effective?

Unfortunately there are no easy answers to that question, and there are plenty of people out there who ponder that question every day. While every website and every situation is different, there are some general guidelines you can follow when making your calls-to-action, both from the content and the design perspectives.

Also keep in mind that you should continually test whether your calls-to-action work or not. There are some free tools out there that will give you a good start at this, especially from Google. Their analytics tool will tell you what people are looking at on your website, while their website optimizer can help you test different combinations of calls-to-action in order to see what works better.

Writing calls-to-action

Using the right words appropriate to your website will drive people to take the action; using the wrong words can distract them, at best, or cause them to leave your website, at worst. With that in mind, here are some tips for writing effective calls-to-action:

• Lay the groundwork – Before someone is willing to follow one of your calls-to-action, they first have to recognize a need that requires them doing so. Telling your visitors the benefits of taking that action will help give them the motivation to actually do so.
• Use action-oriented words – Using an active voice encourages people to follow your calls-to-action, and also helps people scanning your website quickly identify what your call-to-action is about. This is also one of the reasons you should avoid using “click here” in your link text.
• Have one on every page – There should always be at least one call-to-action within the content on every page of your website – no page should be a dead-end. Ending your content with a call-to-action tells visitors what the next step is and keeps them moving on your website.
• Limit the number and keep them distinct – Having too many calls-to-action on a website can be confusing for your visitors. Limit yourself to only a few, and keep them distinct so visitors know what the primary call-to-action is, as well as what you want them to do first from the choices.
• Keep your forms short and clear – Unless someone has a compelling interest, many people see a long form asking for unnecessary information and won’t fill it out. Follow some of my other tips for writing clear instructions if your main call-to-action is a form.

You can also look through a previous post that I’ve written about improving your titles and sub-headers for some tips that are just as applicable to writing effective calls-to-action.

Designing calls-to-action

Web designers can have a lot of influence over how effective calls-to-action are. Following general usability and design guidelines help make the website as effective as possible. Here are some tips for how to do that:

• Put it above the fold – You want your main call-to-action to be visible wherever people go throughout your website – almost like your logo. The right side of your website’s header is a natural location to do that; any other lesser calls-to-action can go in sidebars, above the fold as well.
• Use images for emphasis – Images or icons get people’s attention because they get noticed by your eyes before content on a page does. Buttons also do the same thing and are great to use because they stand out against text AND imply action by their very nature.
• Choose contrasting colors – If you’re using a button as your primary call-to-action mechanism, use a color that contrasts with your main colors for maximum effect. Just don’t choose a color that contrasts so much that it becomes too hard to ignore when reading the content around it.
• Consider homepage placement – We all know how important your homepage is, which is why you need to make it as usable as possible for your visitors. Your main call-to-action should be prominently placed on it where people will really see it.
• Use some white space – The more white space around your call-to-action, the more people’s eyes will naturally be drawn to it. Crowding your call-to-action in with surrounding content will decrease its effectiveness as it gets lost in the overall noise of the page.
• Make it bigger – Size isn’t everything when it comes to your call-to-action, but making it bigger definitely makes it more likely that it will get noticed. Just don’t make it so big that it totally overwhelms the rest of the content on your website – find the right balance.

Thoughts?

Creating effective calls-to-action are a HUGE topic and business for a lot of people, so I hope that this gave some good, introductory guidelines for making your calls-to-action more effective.

Have you had any particular success working with calls-to-action on your website or on a website you’ve done for a client? Leave a comment below to share your thoughts and experiences!

There are many people who fall into the category of lower literacy when it comes to websites. Some researchers estimate that as much as 50% of the U.S. population can be defined as having a lower literacy, while 30% of total online users can be said to have the same.

What’s discussed below is definitely something worth considering and applying to your website, especially if you think that a significant proportion of your visitors fall into the lower literacy category.

Higher literacy vs. lower literacy

The most important thing that I can emphasize up front is that when I use the term “lower literacy”, I’m not talking about people who are illiterate or unintelligent. Quite the opposite in fact.  People who have a lower literacy are able to read – they just struggle with it to some degree depending on the particular medium in question. In this case, I’m talking about lower literacy as it pertains to websites.

In general there are some common characteristics of people who have a lower literacy:

• They have trouble scanning text
• They need to go through content word-by-word
• They’ll often find themselves re-reading long, unfamiliar words

People who are otherwise highly literate and intelligent might actually have a lower literacy when it comes to websites. Older people in their 50s, 60s, etc. are a perfect example of this. Anyone who has sat and watched how their parents use a website knows exactly what I’m talking about – some of those characteristics describe them perfectly.

Higher literacy is just the opposite. People who are highly literate, especially on the web, are able to look at a website quickly, scan it for what they’re looking for, and interpret what’s on the website and what the website has to offer them.

If you think this describes you perfectly, you’re not alone – there’s a significant gap in web literacy levels between older and younger generations. Younger people have been using websites for a greater percentage of their lives than older generations have, so they’re that much more familiar with them. Add in the fact that older generations tend to be more “afraid” of computers than younger generations are – such as clicking the wrong link, filling out a form, etc. – and you begin to account for that generational gap.

Lower literacy on the web

So how does lower literacy manifest itself when people use websites? Here are some common habits that lower literacy website visitors display:

• Reading the navigation – Lower literacy visitors tend to read through all of your navigation links first, and then choose the option that best meets what they’re looking for.
• Narrowing the field of view – Lower literacy visitors will read through content line-by-line, giving them a particular narrow focus that they might find hard to zoom out from.
• Skipping over information – If something becomes too complicated, then lower literacy users are more likely to completely skip over it, potentially missing something important.
• Accepting as “good enough” – Digging deeper requires a lot of reading (which can be challenging and time consuming), so lower literacy users skip, usually looking for links.
• Avoiding search tools – Lower literacy users might have difficulty spelling the search terms, and then when they see the results, have difficulty processing out-of-context content.

How to design for lower literacy users

How can you improve your website’s usability for lower literacy users in order to make it work for a broad audience? Here are some suggestions:

• Prioritize your content – Place the most important content at the very top of the page, where readers who might otherwise give up after a few lines will see, and keep any other important information above the fold. This especially applies to your call-to-action.
• Avoid confusing navigation links – The links in your main navigation(s) should be written so that they’re as intuitively as possible. There’s no need to be creative and write “Who We Are” when writing “About Us” will do just as good a job instead.
• Improve your in-content navigation – Follow some of the basic recommendations to improve your page titles and headers, and you’ll not only break up the content for higher literacy users, but keep lower literacy users from getting frustrated.
• Avoid distractions – Design elements like Flash banners can serve a useful purpose on your homepage, but on internal pages, avoid anything that moves or might otherwise be a distraction. These really get in the way when you’re trying to concentrate, which lower literacy users need to do.
• Use a consistent page design – Unless there’s some compelling reason otherwise, every page on your website should have the same general feel to it, and should include all of the major navigational elements. Consistency is the goal – something that lower literacy users struggle without.
• Make effective links – There are things that both designers and writers can do to make links more effective. Follow some of these recommendations – such as using icons on particular types of links, or making the links scannable – to help lower literacy users navigate your website easier.
• Simplify form instructions – Forms give many people trouble, so you can imagine the trepidation with which lower literacy users fill them out – especially if giving away personal information is involved. Keep your instructions clear to avoid unnecessary confusion.

Do some of these tips sound familiar? If so, it’s because many of them are also general usability guidelines that you should be following anyways when creating your website. If you’ve already tried to incorporate many of them into your website and think that it’s as user-friendly as possible, then lower literacy visitors shouldn’t have much of a problem using it.

Thoughts?

Is lower literacy something you should be concerned with if you have a website? Or do you think it’s dependent solely on who the particular audience for that website is – no different than gender, profession, interest, etc? Share your thoughts with everyone by leaving a comment below!

Dark websites can seem refreshing sometimes, especially because most websites are somewhat similar in the sense that they feature dark text on a white background. That’s no coincidence, either – that color contrast is easiest on the eyes.

Light text on dark backgrounds, on the other hand, is more difficult to read because it makes your eyes strain more in order to read the text on the page. Add that natural effect to the fact that a lot of dark websites out there don’t necessarily pay attention to some of these usability concerns, and it’s no wonder that some people have a love ‘em or hate ‘em mentality when it comes to them.

I’ll admit it: I was one of those designers who didn’t necessarily pay attention to all of these unique concerns. I created a dark website for a friend back in 2008 – actually the only one that I’ve done so far. I paid attention to most of these special concerns, but as I write this and look at the website again, I notice some things I would have done differently that don’t follow the advice I give below.

Concern #1: Font selection

On a lot of dark websites, designers use a serif font (such as Georgia, Times New Roman, etc.) because those types of fonts help convey all the senses that dark websites have (elegance, professionalism, etc.).

So what’s the concern? Using a serif font for your main text, at a normal size of 12-14 pixels, means that the flourishes on the serifs start making the text less readable. The letters will start to blend into each other, so your eyes have to strain more to tell words and letters apart.

Here are a few tips to keep in mind for proper font selection:

• Use serif fonts for headers only – Headers, page titles, and elements of that nature are always larger than the text around them. When you increase the font size, the flourishes in the serifs are more distinguishable, and that text is easier to read.
• Always use sans-serif fonts for text – Sans-serif fonts, such as Arial, Helvetica, etc., don’t have flourishes. On a dark background, this will make them easier to read, especially at the smaller sizes usually associated with regular body text.

Concern #2: Text contrast

Text contrast may be one of the most important determining factors in whether a dark website is successful or not. Too little contrast will make your text extremely difficult to read and your website difficult to navigate through – especially in conjunction with what fonts you used. Too much contrast will make everything stand out too much, and the design won’t look as nice.

The key to a great dark design is finding the right balance between the text and the background. Here are a few tips for how to do that:

• Experiment with shades of gray – On dark websites, most body text is generally in some shade of gray. Use a shade that’s not too dark though, because if you choose one that is, the text will be very difficult to read – especially when in conjunction with poor font selection, as I mentioned above. (This is one of the most common usability mistakes you’ll see on dark websites.)
• Use pure white sparingly – Pure white text on a black (or similarly dark) background will be very noticeable to the eye. How you use white – and how often – depends on a number of things, such as how dark your background is, what your text color is (for example, you might use white for links if your text color is a shade of gray), how big your text is, etc., so use your best judgment.

Concern #3: Font size

The size of your text needs to help compensate a bit for the additional eye strain that people will have trying to read your text. That’s why on a lot of dark websites, the  text is a little larger than it would normally be on a light website.

Keep in mind too that the font size is what will bring together the past three usability concerns. If your body text is a serif font, colored in a shade of gray that doesn’t give enough contrast, and is sized too small, that’s the perfect trifecta for what make your text almost completely illegible.

Concern #4: Color schemes

Generally speaking, when you’re designing a light website, you have a lot more flexibility when choosing a color scheme than when you’re working with a dark website. Most color schemes work well with a light color to contrast against, but they don’t all work well with black.

Most websites start with white as the foundation, and use color to achieve depth and some sort of visual effect. Dark websites are different in the sense that you’re already starting with a color and already have some depth to the website. You don’t want to add a color scheme with a lot of colors on top of the dark color you’re already using – that’s a lot of colors, and can be visually confusing. Your color scheme should generally be simpler, and should use less colors than the color schemes for light websites.

Here are some other things to keep in mind:

• Use color to draw just enough attention – When your eyes first see a dark background, they are drawn to color much quicker than they would on a light background. So use your colors to help lead people where you want them to go, but don’t overuse them so that they overpower your website and it’s difficult for people to focus on your content.
• Choose your color scheme appropriately – Depending on what your website is for, there might be certain colors that make sense to use in contrast to the darkness of your background. Yellow and black work well for action, red and black for romance, blue and black for technology, etc. So know what your website is really for when deciding what colors to use as contrast colors.

Want to see samples?

There are plenty of galleries out there with samples of great dark websites. Here are a few worth looking at for inspiration:

• 30 Dark Designs You Should’ve Seen (Smashing Magazine)
• 25 Beautifully Dark Website Designs (Vandelay Design)
• Web Design Inspiration – 27 Dark Website Designs (Dzine)
• 30 Most Inspirational Dark Web Designs (Elite by Design)

Thoughts?

If you work with or come across a lot of dark websites, what do you think about some of these usability concerns? Are there others that I haven’t listed that you think are also important? Share your thoughts with everyone by leaving a comment below!

Why do website homepages have usability concerns that are different from other pages on your website? It’s because of their purpose. They can’t just display lots of text – that’s the job of your internal pages. Homepages have to present a snapshot of a lot of information at once, and they have to do it in a way that both entices new visitors to explore your website further, and makes it easy for returning visitors to find what they’re looking for.

Presenting that much information isn’t easy, and it becomes even more difficult to do when different groups within a business or organization start wanting real estate on it. Tough decisions need to be made when it comes to a homepage’s content, but if you couch your discussions in the content usability terms below, they might become easier to make.

With all of this in mind, here are some tips and considerations you can follow when planning the content on your homepage or if you want to improve the usability of your existing homepage content.

4 important questions to answer

Visitors returning to your website will already know what your business/organization is about and what you do, but new visitors won’t know that information. This is one of the main purposes that a homepage serves, so make sure to answer these 4 questions somewhere that your visitors will have about your website somewhere on yours:

• Who are you? - Visitors might want to see details about who you are. For small businesses, it helps them make a connection with the business owner, and for larger organizations or corporations, it can help support recruiting, PR, etc. Either way, it helps in establishing credibility with the visitor.
• What is it you do? – Use a tagline to convey your purpose, and put it near the top of your homepage where people can see it right away. Just don’t write it so that’s vague and full of marketing-speak – keep it real and tell your visitors what they’re gaining by visiting your website.
• What can I find here? – Your homepage provides a starting point for where the visitors can browse to elsewhere on the website. There should be clear links to the most popular areas of your website; for example, if it’s your blog or news updates, include links to that content.
• What action do you want me to take? – Your primary call-to-action needs to be displayed prominently and written in a way that encourages visitors to take that action. If your call-to-action is either hidden or poorly communicated on it, most people won’t actually do what you want them to do.

Incorporating this information in a way that new visitors can easily find it but returning visitors can avoid it if they want to isn’t easy. If you write your homepage’s content clearly and concisely, and design the homepage so that things are easy to find but easy to avoid as well, you should be fine.

4 ideas for more usable content

While your website’s homepage needs to be designed so that visitors can find what they’re looking for quickly, easily, and intuitively, when it comes to content, you want to strike a balance between providing information on the homepage itself and drawing people further into your website. Here are some ways to accomplish that:

• Emphasize keywords in your link text – Visitors scan the homepage of your website, so you want to make sure that your links are written in a way that attracts their attention and emphasizes the keywords that they’re looking for. As always, avoid using “click here” in your link text.
• Use images for emphasis – People notice images before they do the text around an image, so using them can be great visual indicators of what the content or links around the image are about. The key is finding an image that intuitively communicates what that content is.
• Keep it to a few screens – Don’t overwhelm visitors with lots of content on your homepage – ideally, the homepage should be 1 to 3 (at most) screens in length, with the most strategic links above the fold. If you do find yourself with a ton of information, it’s time to make decide what really belongs there.
• Use content less and links more – Every inch of a homepage is valuable territory, and large chunks of text eat up prime real estate. Great homepages strike a balance between the amount of written content on them (with less being more) and links to the content elsewhere on the website.

Thoughts?

What are some tips that you have for writing better homepage content or for improving the usability of your homepage content? Do you think focusing on the content of your homepage alone will make the homepage more usable, or is it more a function of design? Share your thoughts with everyone by leaving a comment below!

There are a variety of popular hosted search services available, such as Google’s Custom Search Engine, but the thing to keep in mind is this: no matter which one you choose, if your visitors can’t find the search field or it’s not very usable, it won’t do them, or you, much good.

So here are some tips for how to make your hosted search tool as usable as possible once you incorporate it onto your website – both for the search field itself and on the results page.

For the search field

• Use a search box with a type-in field – Let your visitors type in their search term right from the page that they’re on, rather than having them go to a specific search page to do it. Doing so makes the search more accessible and cuts out an unnecessary step from the search process.
• Style your search field appropriately – If the search field is too short, your visitors won’t be able to see the full search term they’re typing in. This is a problem particularly if they need to revise their term before searching. Avoid this problem and make the search field wide enough to contain multiple terms.
• Keep it in a consistent location – Your search function should be in as prominent and consistent a location as your website’s logo. I prefer either the right side of the header or in the main navigation area. The point is, visitors expect it near the top of the page, so make sure to put it there.
• Use an icon to emphasize its nature – Improve your website’s usability and make your search field more obvious by using an icon within your input field. A magnifying glass is the universal symbol for search, so use that to call attention to, and visually communicate the nature of, your search field.

For the search results page

• Limit the number of search results per page – If you have a lot of content being indexed, a large number of results might show up for certain search terms. Break the search results up into manageable chunks will help your visitors browse through them easier.
• Put a search box at the top of the search results page – This will make it easier for people to do another search should the results of the first one not be what they were looking for. You should customize the code a bit to make it look a bit larger than your regular search field.
• Have the term they searched for display in that search box - Having the searched-for term appear within the box on the results page when the results appear will further reinforce what they had typed in, and if they mistyped something and got wrong results, they’ll see what the mistake was.

Thoughts?

Do you use a popular hosted search tool on your website? If so, have you customized it to make it more usable for your visitors? If not, which of the tips mentioned above would you incorporate? Share your thoughts with everyone by leaving a comment below!

Those who don’t like drop-down menus say that they make a website less usable, but I think the opposite is true. They can open up a website’s content to its visitors from anywhere on your website, making it that much easier for people to find what they’re looking for. And from a designer’s point of view, they can be very useful in helping to clean up a busy layout so that you’re not overloading the page with content links.

Here’s my take on drop-down menus: if you are going to use them, they need to meet three criteria in order to enhance the overall usability of the website – what I like to call the “3 W’s”. They should be:

• Well-planned – how the content in the menus is organized
• Well-designed – how the menus actually look
• Well-developed – how the menus function

Let’s go through each of these in a bit more detail. I’ll give you some things that you should do under each category in order to make your drop-down menus as user-friendly as possible.

Planning the content of your drop-down menus

The most common way that drop-down menus appear is what you’re probably familiar with already – simply a vertical list of links that appear beneath the main navigation links. These can be used when you want to organize such things as:

• Pages in a section
• Categories in a blog
• Products in a particular category

But it’s not as simple as just creating a list of the links that you want to appear in each drop-down menu. There are a few things to keep in mind when it comes to the content of this type of drop-down menus:

• Keep the links manageable – Don’t provide so many links that it becomes too time-consuming for someone to look through it to find what they’re looking for. Making the menus into a long list of links guarantees that they’re not going to be usable at all; Lehman College’s website is an example of this.
• Don’t have more than two levels at most – This can be very distracting to the user, and if you have a lot of content, your menus start to really stretch out across the screen. Drop-down menus should help your visitors get to main topics of interest within your site’s information architecture; they don’t necessarily have to touch every single page on the website.

Plenty of websites out there have nicely-organized drop-down menus like this. Check out Garmin’s website for a great example.

The recent design trend

Fortunately, there is a new trend within web design that is helping to solve these problems. Recently you have begun to see the widespread use of bigger “panels” that group options together, helping users have greater access to information. Jakon Nielsen, one of the leading usability experts, even published a study on this topic in which he found that using these “mega drop-down navigation menus”, as he calls them, can improve how your visitors navigate through your website.

A lot of popular websites are incorporating these types of menus. You can find them on such popular websites as:

• ESPN.com
• Food Network.com
• HGTV.com
• White House.gov
• Samsung.com

(Regarding the White House’s website, how they used a mega drop-down menu is one of the things that I really liked about the new design of the White House website, which I wrote about back in January.)

I’m a big fan of these mega drop-down menus, providing that they’re done well. The links still need to be organized in order for them to be useful – something I think the last 3 examples above do well, but that ESPN doesn’t. Grouping them into categories with headers is a great way to make it even easier for visitors to find what they’re looking for.

Making your drop-down menus look nice

When it comes to styling your drop-down menus, here are a few things that you should do to make sure that they’re as usable as possible:

• Provide visual separation – You want to make sure that your users are able to easily look through the links in the drop-down menu, so adding in some padding around each link, or using a horizontal line as a separator to distinguish between links, is a good idea. Best Buy’s website is an example of this, although I think they could use slightly more padding around each link.
• Use the hover effect – If you have your links set up as block elements, then having the background change color when a visitor is hovering over that link in the drop-down menu is a good touch to incorporate. Again, visit the White House’s website for an example of this in action.
• Semi-transparent backgrounds – If you have a nice background image and you want it to show through, then doing this might be something worth considering. Don’t make the menu too transparent though – make it just enough so that the background shows through. You want to maintain enough contrast between the menu and the background so that your users can tell what the links are.
• Keep things consistent – The most important thing to keep in mind is that drop-down menus should look like  a natural extension of the main navigation bar. This means using the same colors, fonts, etc., with the goal of making everything appear to function as one.

Just remember that the ultimate goal of all of these tips is to make sure how the menus are designed doesn’t get in the way of the user’s ability to browse through the links contained within them. It would be a shame if you had drop-down menus where the content is well-planned and organized, but the design gets in the way of people using them.

Getting your drop-down menus to function properly

So now that you know how to organize the links in your drop-down menus, and how to make them look nice, there’s one final piece of the puzzle you have to think about, and that’s how they actually work.

You can definitely have drop-down menus that meet the first two W’s, but that have a problem with the third. And this might be what website users find the most frustrating about drop-down menus – when they don’t work properly. We’ve all had experiences where a menu takes too long to display, or where it disappears too quickly. It’s the small things like those that have the biggest impression on your visitors.

Here are some thinks to keep in mind when figuring out how your menus should function:

• Be careful of hover menus – Some drop-down menus appear when you move your cursor over the main navigation link, but this can be a double-edged sword. It’s good that the menus will be obvious to your visitors, but it’s bad and can cause confusion if someone unintentionally hovers over the link, only to have the menu appear when they don’t mean for it to.
• Indicate when clicking is needed – Some drop-down menus are only activated when you click on the main navigation link; Digg is a perfect example of this. Because the menus can only be activated by clicking, there is a little arrow telling people that those links are to drop-down menus – a good thing to incorporate if you choose this display method.
• Delay deactivation – Say someone moves their cursor off of the drop-down menu, and it disappears right away. You don’t want that to happen – if they moved the cursor by accident, they would have to go through the whole menu to get back to where they were. Having a slight delay gives them the time to move their cursor back over the link in the menu, and can cause less frustration for your users.
• Make them appear smoothly and seamlessly – However you want your users to activate the drop-down menu, it had better load immediately when they do activate it. You don’t want to disrupt the visitor’s experience in any way, and you certainly don’t want to make them wait for something to happen. It’s the same principle as with load time – if your website takes too long to load, chances are they’ll hit that “Back” button unless they have some compelling reason for being on your website.
• Skip the tooltips – As I’ve written about in the past, you need to know when to use your TITLE attributes wisely. Unfortunately, Microsoft didn’t heed my advice. On their website, the drop-down menus are nice, but if you hover over the main navigation link long enough, a tooltip appears that (a) shows the exact same thing as the link itself, and (b) obscures the first option in the drop-down menu. My point is, just be careful how you use your tooltips, especially in cases like this.

Remember!

Drop-down menus are unfortunately one of those design elements that can leave a big impression about your website – especially a negative one. If they’re done poorly, people will remember that, and might be less likely to come back to your website in the future because of how difficult it is to navigate around. If you’re in business and trying to sell something through your website, that could be fatal, but the same applies to any other website as well – organizations, colleges or universities, news, etc.

If you are going to implement drop-down menus in your website, give it some thought first and make sure that they meet the criteria of the “3 W’s” from above.

When you are ready to actually create them, there are plenty of resources and guides available for how to create drop-down menus on your website. You can create them in CSS, Javascript, AJAX, or many other programming languages – there are too many for me to list here.

Thoughts?

What do you think of drop-down menus – do you love them or hate them, and why? Or what about the new mega drop-down menus – do you like that trend and wish other websites would start using them? Share your thoughts about anything I mentioned or that relates to drop-down menus by leaving a comment below!

The reason I bring up this topic is because last week, I was installing the Search Everything plugin on this blog, and had to decide how to style the new search form. I knew from the start that I wanted to include a little icon in it to convey its purpose; I had seen that done elsewhere and really liked the look of it, and felt that it would work here.

When and how to use icons

This is a nice design effect, and I believe that it could have a place on most websites, in one form or another. But here are a few pointers that I think are worth mentioning regarding when and how to use icons on your forms:

• Use sparingly – Icons shouldn’t be used within every input field in all the forms on your website. It will work best on forms with a small number of input fields – search bars, contact forms, and blog comment forms, for example. On shorter forms like these, you can use it on all the input fields without making it seem like you went overboard.
• You still need a label – You’re not using an icon as a replacement for an input field’s label – you’re using it as a way to accentuate the label. An icon can give some extra usability and design benefits, but that’s presuming that your form is already well-designed and usable to begin with. (If they’re not, you might want to read through an earlier post I wrote about how to design your forms to emphasize their usability.)

Step-by-Step Instructions

For those of you who aren’t reading this on my website and aren’t able to scroll up the page to see the search for yourself, here’s what my search field looks like:

If you’re interested in creating a similar look on your website, here are the steps I went through to make my search field look that way, complete with the styles that I used in my CSS to achieve that look.

1. Step 1 – Create the blue outer wrapper that the search bar resides in. This element isn’t totally necessary, so feel free to skip this step if you want to. (One note: I used a <div> tag here, but you could use a <fieldset> instead – it would do the same thing.)

   #search {
   width:230px;
   padding:10px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#98afc8;
   background-image:url(images/search_bg.png);
   background-position:bottom;
   background-repeat:repeat-x;
   border:1px solid #849ab2;
   text-align:left;
   height:1%;
   overflow:hidden;
   }

2. Step 2 – Create the actual search bar. What you’re doing here is simply creating the <div> tag that the input field will be placed within; the background image for this <div> will be your icon. Just make sure to leave enough padding on the left so that the input field doesn’t overlap with the icon.

   #search #searchField {
   background-image:url(images/search.png);
   background-position:10px;
   background-repeat:no-repeat;
   background-color:#ffffff;
   border:1px solid #849ab2;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   height:1%;
   overflow:hidden;
   padding:0 20px 0 34px;
   float:left;
   margin-right:10px;
   }

3. Step 3 – Style the actual input field. I want it to be seemingly invisible within the <div> tag, so I’m making both the border and background color of it white, which will match the color of the <div> tag.

   #search #search_field input {
   border:1px solid #ffffff;
   background-color:#ffffff;
   }

4. Step 4 – Create the submit button that people will click on.

   #search button {
   padding:3px;
   background-color:#da5e2a;
   color:#ffffff;
   font:bold 13px Arial, Helvetica, sans-serif;
   border:none;
   margin-top:3px;
   cursor:pointer;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   }

Here’s how the final HTML code will look:

<div id="search">
<div id="searchField">
<form method="get" id="searchform" action="http://www.addicottweb.com">
<input type="text" value="Search" onblur="if(this.value=='') this.value='Search';" onfocus="if(this.value=='Search') this.value='';" title="Enter the terms you wish to search for" class="srch-txt" name="s" id="s" size="15" />
</div>
<button type="submit" class="SE5_btn" id="searchsubmit">Go</button>
</form>
</div>

What if you want to style multiple input fields?

My approach works well if you’re only styling one input field. But if you wanted to use icons within multiple input fields, my way isn’t the best solution. You would have to add multiple styles for each icon you’re using, which would make your CSS more bloated than necessary.

Fortunately, that’s where Javascript comes in. As I was researching this topic, I came across a good article by Janko Jovanovic where he describes how to accomplish this technique using Jquery to style multiple input fields. This automates the process a bit, and helps you keep your CSS to a minimum.

Thoughts?

If you’re a web designer, what kinds of websites do you think this would work well with – blogs only, or other websites too? Do you think that it should be used selectively, such as for search bars (which you currently see), or do you think there’s a greater need for this? Share your thoughts using the comment form below!

What I’d like to talk in particular today is the subject of forms and usability. Now, I’m sure many people know some of the basics of website usability, especially if you’ve been reading this blog for awhile. If you do, you know that it is often the smallest usability quirks which can create the biggest annoyances for your visitors. There is no better example of that than HTML forms.

So if you want to know how to build better forms on your website, keep reading. I’m going to discuss some of the HTML elements that you can use when building a form on your website, and then give some tips for how those elements can be used to create a more usable form.

HTML elements for forms

When it comes to creating forms, HTML gives us web designers a variety of elements to use. Some of these are used by designers more frequently than others, but they are all useful in creating a more usable form.

So what are these elements?

• fieldset – A group of related content, used to make the form easier for users to follow.
• legend – The caption to a fieldset.
• input – The actual field that you enter information into.
• label – The description found in front of an input element – “Name” or “Phone Number”, for example.
• textarea – Like an input field, except for longer answers – “Comments”, for example.
• select – A drop-down menu used to present multiple choices for you to choose from.
• option – One of the choices contained within a drop-down menu.
• optgroup – A label used to categorize a group of choices together within a drop-down menu.

Using these elements properly – labels in particular – gets you away from using tables to lay out your form. Using the HTML elements, in combination with CSS, is the more modern way of doing things, and because you’re using less code, it means that web browsers can process and load the page much quicker.

Style form elements to improve usability

All of these form elements can be styled using CSS just like any other HTML element – which is the key to making your forms more usable. When you apply styles to these elements, what are you really doing? You’re visually separating them from the surrounding content in order to make the form appear more organized and less confusing to the user.

Whenever I create a form for someone, I try to keep the following things in mind, all of which relate to how the form is laid out and how the form elements are styled.

• Use fieldsets to group similar content together – Fieldsets can be used to separate content in your form so that it seems less lengthy and more logical to the user. The bonus is that by going from one section to another, it also gives a sense of progression as they fill out the form. In terms of styling, most often you’ll see fieldsets styled with a border and/or background color combination. Again, the goal is to visually differentiate the form from other content on the page.
• Labels should always go above the input field – Eye-mapping studies have shown that people are best able to associate labels with particular input fields when the label is above the input field. This also gives you room if your label and/or input fields in question are long(er). In that instance, they won’t appear scrunched up, which might happen otherwise if the label is to the left of the input field.
• Labels should ask for the exact information needed – If you’re looking for information in a particular format, or a particular answer, then make sure that your label says exactly what it is that you want the user to type. For example, when it comes to phone numbers, there are various ways that people type those into a form. If you’re looking for the phone number (or any information) in a particular format, then make sure that your label specifies that.
• Give the user breathing room to type - I add a few pixels of padding to my input fields so that the text isn’t crushed up against the edges of the field. This helps give the form a much cleaner and modern look to it – intangible qualities that can help give an overall positive impression of your website.
• Don’t forget to style the input fonts – Another nice touch for your form fields is to specify the font that will be used when someone types into one of your input boxes. It’s not necessary to do it, but if done right further contributes to the clean and modern appearance mentioned above.
• Color your input fields to make them stand out – By default web browsers render input fields as a white box with a black border, making them hard to notice.  Giving them some color can help them stand out from the surrounding content. There are two things to keep in mind though: use colors from within your color scheme, and use colors with enough contrast against your page background.
• Show the user what input field they’re on – If you’ve colored your input fields already, you can provide even greater visual distinction by styling the particular field that the user is currently filling in. Just use “input:focus” in your CSS, and style accordingly.
• Don’t forget the submit button – I’m sure you’ve seen the standard way that most web browsers render form buttons. The look is definitely a bit outdated, so if we can do better, why shouldn’t we? How you style these all depends on the overall style of the website, but if you use a gradient background image or a color, it will do wonders to making your forms look even nicer.

Want to see examples?

Now that I’ve gone through some tips for how to style your forms, you might want to see some examples of forms that were created using some of the techniques I just mentioned.

Smashing Magazine has put together photo galleries of well-styled and innovative forms. You might find some good ideas for your website by looking through these two posts:

• Web Form Design: Modern Solutions and Creative Ideas
• CSS-Based Forms: Modern Solutions

If you’re interested in the common practices of other designers when it comes to creating forms, Smashing Magazine also ran a design survey where they asked some well-known websites for all sorts of information how they styled and designed their forms.

• Web Form Design Patterns: Sign-Up Forms – Part 1
• Web Form Design Patterns: Sign-Up Forms – Part 2

Thoughts?

Now that you know how to create forms in ways that improve their usability, what do you think? Are there some tips that I gave that you agree or disagree with? Do you do anything differently with your forms, and if so, what is it that you do? Share your comments with everyone by filling out the comment form below!

What are breadcrumbs?

Chances are you’ve seen breadcrumbs before, as many websites feature them in some form or another. But for those who are new to the concept, what exactly are breadcrumbs?

Simply put, they are another form of navigation that your visitors can use to find their way around your website when the main navigation doesn’t quite meet their needs. Breadcrumbs are almost always implemented the same way:

• Progressing from the highest level to the lowest, one step at a time
• Starting with the home page and ending with the current page
• Having a simple text link for each level, except for the current page
• Separated by a one-character symbol between the levels, usually an “>” or a “/”

Of course, the ideas behind using them are slightly more complicated than that, which is what I want to talk about here. I’m going to go over the main usability benefits from using breadcrumbs before giving some pointers on how to use them in ways that will both benefit your visitors and SEO.

Why should you use breadcrumbs?

There are a few main reasons why breadcrumbs should be used on a website:

• Pinpoint your location - Like the large maps at the mall, breadcrumbs show people where they in relation to the rest of your website. They can also show people where the page that they’re looking at is relative to higher-level content as well.
• Help rescue those who get lost – Most people tend to ignore breadcrumbs until they get to a page that isn’t quite what they were looking for, and want to find their way back up to a more familiar page on the website. Breadcrumbs are just another way that you can help your visitors do that, especially if they parachuted into a very specific but inappropriate place on your website and want to get their bearings.
• Open up the information hierarchy – Breadcrumbs allow your visitors to jump more than just one level of content at a time because by nature they show the exact pages that led to the page that they’re currently on. (Note: this is different from showing them the exact pages that got them to where they currently are.) This can give your visitors a better sense of how the website is organized.
• People are familiar with them – Breadcrumbs are common enough now that most people are somewhat familiar with them. Because they are one of those little touches, your visitors might not notice if they are there, but they also might miss them if they’re not there.
• Consistency leads to usability – Breadcrumb trails are for the most part styled the same way, making it easy for people to immediately know how to use it when they see it. Just remember to keep your breadcrumbs styled according to common conventions so that you don’t leave people guessing about what those links are.

How to implement them correctly

Now that you’ve made the decision to use breadcrumbs on your website, you need to make sure that they’re well-designed in order to have an impact on your website’s usability. Here are some tips for using them:

• Proper placement is key – My personal belief is that breadcrumbs should go in your main content area, directly above the main title of the page. Of course you don’t want them to be so obtrusive that they take up a lot of room there, but you also want to make sure that they’re easy to find. Putting them in a spot that will at least visually register with your visitors is important, because then if they go looking for the breadcrumbs, they know where to find them.
• Style them appropriately – As I’ve written about previously, how you style your text links is important from a usability perspective because it helps people know what are the links and what aren’t. When I’m styling my breadcrumbs, I like to make the links underlined and colored differently from the last breadcrumb level, which is the page the visitor is on.  I’ve seen breadcrumbs on many websites where all the text, links included, looks the same, and I can never understand why someone would choose to style it that way.
• Show site hierarchy, not user history – Breadcrumbs are not meant to be a trail of how the user got to that page, but rather should be thought of more as beacons that pinpoint the page location relative to the rest of the website’s content. The user can just as easily click their web browser’s “Back” button to return to where they came from – they don’t need breadcrumbs to do that.
• Focus on how they’re written for additional SEO benefits – If you’re focusing on ways to incorporate SEO into your website, breadcrumbs are another great opportunity to mix in some of those keywords you’re optimizing for. Just make sure that your breadcrumb links provide enough detail about what the pages are about, without being overly lengthy. I generally try to keep my breadcrumb links to within 1-3 words, at most.

Breadcrumbs can’t solve all your usability problems

It’s not absolutely essential that a website incorporate breadcrumbs, even though if they’re done right, they can enhance the overall usability of your website. But if you are going to use them, there’s one catch, and it’s a big one.

They’ll only work if the overall content and structure of your website make sense in the first place.

If people can’t find what they’re looking for on your website to begin with, having breadcrumbs on your content pages isn’t really going to help them very much. Chances are, if your navigation is that bad, it will already have made such a poor impression of your website that the visitor won’t even have made it that far anyways.

As a web designer, your first priorities have to be creating a site hierarchy that makes sense and then constructing a navigation to make the content easy to find within that hierarchy. That being said though, don’t just throw in the breadcrumbs as an afterthought. Badly implemented breadcrumbs might do more harm than good, so if you want to incorporate them, spend at least some time making sure they’re implemented properly.

Thoughts?

If you don’t already have breadcrumbs on your website, do you plan to incorporate them? If you already have them, what do they look like, and what have you found that works or doesn’t work? Share your thoughts about these questions and more by filling out the comment form below!