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!

Asking these questions often means stepping outside of our role as designers and putting on a marketer’s cap, because ultimately that’s what a lot of this information is all about. Marketers focus on helping clients communicate with their customers, and that’s exactly what a successful website does.

People sometimes rely on our expertise as web designers without understanding that marketing is also an important part of what we do. If information about the target audience falls through the cracks, sooner or later the client might come to realize that their website isn’t doing as well as it should be. In their mind, that’s a reflection on your product and work as a web designer.

So put on your marketing cap, and ask your clients some of the following questions in order to design a website that will truly meet the needs of a particular target audience.

Demographic information

The most basic information you can get about a target audience is their demographic information. While it’s important that your client is happy with the website, you need to take into account basic demographic information in order to create a design that will make the website more successful.

Here are some basic demographic questions to ask about a target audience:

• What gender are they? – Knowing whether the target audience is male, female, or both makes a huge impact on your design decisions, mainly in what colors you choose. Men and women react differently to colors, and colors symbolize different things to age groups, professions, and ethnic or social groups.
• How old are they? – Generally speaking, different age groups may be more computer savvy than others, have different familiarities with finding or doing something online, and have different expectations about what functionality they’ll find on a website.
• What keywords are they searching for? – Knowing what keywords people are using to find the product (specifically) or search online for (broadly) is useful for SEO purposes. Ask whether the website is geared towards businesses, individuals, etc., and then use keywords based on their answer.

Content information

Visitors are coming to your website for some purpose, whether to find information, make a purchase, etc. While the colors and functionality of the website are important, the content is what they’re really looking for.

Here are questions that I ask my clients about the content expectations of their target audience:

• Why are visitors coming to your website? – Websites for businesses, organizations, and news media all have very different purposes. People come to each type of website looking to do something specific. Knowing what people are most often looking for will help you, as the designer, know what content to emphasize, how to structure the information architecture, and more.
• Why should they come back again? – Designing a successful website means that you’ve convinced people that it’s worth their time (and/or money) to visit the website again in the future. That means communicating some incentive to them, either through your products or through the information they can find on the website. Getting them to visit once is great, but getting them to come back is even better.
• What should they see on the homepage? – It’s always tough to prioritize what information should be seen on the homepage. Focusing on your target audience and understanding what they want quick access to should help make those decisions easier. Also keep in mind what the purpose of your website is, and what people are coming to your website for, to help prioritize what content should go on it.

Technical information

If I’m being hired by a client to redesign an existing website, I always check with them to see if they’re using an analytics program to track their website usage. Most of these programs also offer you information about the website’s visitors, which would be very useful to know when making some design decisions.

Here are a few questions that you should ask if you know that data is available from the current website:

• What kind of browser are they using? – What proportion of your visitors are using Firefox? Internet Explorer? Safari? This information might be especially useful to know if the target audience is largely using IE 6.0; if they are, then chances are you’ll have to find some workarounds for the inevitable programs with how your design will display.
• What are the most common screen resolutions? – Are they using 1280 x 1024? 800 x 600? Something in between. This information is useful because it will give you a sense of not only how wide your main content area can safely be, but of what proportions you can use in your design in order to let most people be able to see it so that it still looks nice.

Thoughts?

What other questions do you ask about a website’s target audience when you work with clients? Share your thoughts with everyone about this topic and anything else that comes to mind by filling out the comment form 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!

Flash banners are useful because they can convey more information than you would normally be able to if you were using static images and unchanging content alone. This is especially true if you’re looking to communicate more than one point or display more than one photo, and if you only have a limited amount of space to do that.

As the designer, it’s important that you convey to a client that while making a Flash banner is easy for you to do, making an effective one (and incorporating it onto the website) is another story.

Here are some of the content and design considerations that I talk about with my clients in order to make their Flash banners as effective as possible.

Content considerations

• Keep it short and simple – If you’re using a banner with transitioning content, keep the written words short enough so that people can read them quickly and so that you can maintain a decent transition pace. Short phrases or no more than 1-2 sentences are ideal.
• Use call to action words – Flash banners attract attention because the motion catches people’s attention. Take advantage of that and emphasize your call-to-action in your banner. Keep the content you include in them action-oriented, and you’ll definitely help your own cause.
• They’re not good for SEO – Content embedded in Flash banners can’t be found by the search engine crawlers, which only find words on a page. Make sure to emphasize any keywords or content within your Flash banner elsewhere on the page where the crawlers will be able to find them.
• Remember to style links in them – You can include links in your banner, even if the banner itself isn’t SEO-friendly. Just remember that you should style those links to look like links should – after all, how the links are styled helps make them effective and usable.

Design considerations

• Use to shorten the homepage – Flash banners are a great way to convey more information in a limited amount of visual space, which is perfect for designers concerned with homepage usability. This will help make your homepage shorter, more concise, and more usable.
• Use on the homepage only – A Flash banner on a website’s homepage is a great-looking accent. A Flash banner on every page of a website (in the header, footer, etc.) is just distracting and becomes annoying after only a few visits to the website. Use it once, and leave it at that.
• Leave long gaps between transitions – When rotating content, leave a long enough gap so that people have time to really notice what the content is saying or what message the photo is trying to convey. Slow and steady is the key – transitions that come too quickly will overwhelm your visitors.
• Use photos to match your message – Photos can say a lot about your organization or business, so make sure to use ones that really emphasize what you want to convey about yourself. You don’t have to use a lot of them – 4-6 are usually enough to make the point.
• Shouldn’t be overwhelming in size – Your Flash banner shouldn’t be so large that it visually dominates and overwhelms the homepage. Limiting the banner to perhaps 2/3 the width of the main content area and floating it to one side is enough to achieve the effect you want.

2 key things to remember

• Get it right the first time – You have, at most, one chance to get someone to watch your Flash banner in its entirety, and that’s when someone is visiting your website for the first time. Once they become return visitors, they’re much more likely to go right to the content that they’re looking for and skip your banner – or your homepage – altogether.
• Not the primary means of delivering content – While Flash banners are great as accents, they shouldn’t be a primary means of delivering content on your homepage. If you want to incorporate content or a vital link within a banner, make sure to place it elsewhere on the page. You should always assume that the banner won’t be watched in its entirety and the content in it won’t be delivered.

Thoughts?

Do you have any suggestions for how make Flash banners more effective that I didn’t mention here? If so, share them or any other useful information with everyone by leaving a comment below!

While some of these things fall into what I would call basic design practices that should always be done, others are what I think of as the little extra touches the designer can do to make a website that much better.

No matter what you call them, what everything on this list has in common is that they’re extra value that clients are receiving for their financial investment. It’s something that I communicate to them when giving a cost estimate for their project because it shows both how I’ll be spending the time and what they’re getting for what they’re paying.

See how many of these things you do when working on a website for a client – and if you’re not doing them, consider adding them to your regular design process.

Design and Navigation

• Create an error page – You may have checked every single link on your website, but it’s still inevitable that some visitors will type a URL wrong or somehow get to a page that doesn’t exist. A custom 404 error page will help your users find what they’re looking for when that happens.
• Add a favicon – Favicons are the little icons that you see at the top of a browser window and in your bookmarks list. They’re a great finishing touch for any website to have, and can even have some small usability benefits – great reasons for why websites should always use favicons.
• Validate the site markup – Make sure your website adheres to web standards before you launch. Validated websites load faster, better, and on more web browsers, and are also “future proof” in the sense that all web browsers will handle the website as you designed it.
• Cross-browser test – Your website should look and functions the same in all of the major web browsers and on all of the popular operating systems. Most of the popular cross-browser testing tools, such as Browser Shots, also test your website in various screen resolutions as well.

Server Optimization

• Resize images accordingly - If you’re calling an image from the server and the image files is really large even though it’s being displayed much smaller, resizing ahead of time will speed up the load time of that page, and help keep the amount of server space you’re using up at a minimum.
• Put javascript in the footer – If you’re calling external Javascript within your website, putting them in the header means that the server will try to load them first before loading your content. Putting them in the footer loads the content first before fetching the script – much more desirable.
• Clean up server of working files – While developing a website, I often find myself with extra files on the server that I had used at some point but am not using any longer. I delete those unnecessary files so that what’s on the server is only what’s being used somewhere on the website.

Search Engine Optimization

• Generate a sitemap – Creating a sitemap is useful for your users as a navigation tool, but for the search engines perspective it will help them find new content on your website faster than by relying on their crawler to find it. This will help you get more of content noticed and more links followed.
• Submit URL to search engines – If you’re launching a new website, the search engines won’t know about it unless you tell them to come and crawl your website. This one of the simple steps to bolster SEO on your website, so at a minimum submit the URL to Google, Yahoo, and MSN.
• Create a robots.txt file – This file tells the search engine spiders what they can and can’t crawl on your website. If you don’t want them to look at certain directories, this is where you would specify that. One way this might be useful for SEO is as a way to avoid duplicate content on your website.

Content

• Proofread your content one last time – There’s no excuse for spelling or grammar mistakes on a website. If you’ve written content for a website, such as links, intro text, etc., having extra eyes looking at it to make sure everything sounds good and is written properly will make sure any errors are caught.
• Check for broken links one last time – You can spend all the time in the world making your website as great as possible, but if you have broken links on it, the website looks bad. Before you launch, click through all the links on the website to verify that everything works properly.
• Set up Google analytics – Understanding what content your visitors are looking at on your website is absolutely essential in order to make it as effective as possible. Google Analytics is not only free, but incredibly popular and easy to use, which is why I use it on all my client websites.

Thoughts?

Is there anything that I didn’t list here that your normally do when you launch a new website for a client? 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!

Many forms contain some content aside from the questions of the form itself. This content usually serves some instructional purpose such as helping the visitor understand the purpose of the form, knowing how to get help, etc. There’s not anything wrong with having it in your form, but it can be problematic if you have too much or if it doesn’t clearly communicate why someone should complete the form.

Everyone avoids trying to read instructions on a form, so the challenge is making them as usable as possible – especially if there is key information in them that visitors need to know. With that in mind, here are some tips for writing clear instructions for your form in order to improve its overall usability.

(The tips below are based on chapter 4 of Caroline Jarret’s and Gerry Gaffney’s book, “Forms That Work: Designing Web Forms for Usability”.)

4 tips to writing better instructions

Want to write better instructions and content for your forms? Following these tips can go a long way towards making your forms more usable:

• Keep it simple – Write the instructions in plain language that most people will understand; anything more complicated and you might be asking for trouble.
• Know your audience – Use the right terms in the right ways. For example, there’s a big difference between American English and British English – something travel websites have to consider.
• Limit the jargon – Only use terms a specific audience would understand if the form is designed for that audience. If the form is meant for the general population, keep the language simple.
• Show graphics if necessary – Where can they can find the information you’re asking for? Show them; the security code on the back of credit cards is a good example.

Write these instructions…

Now that you know how to write better instructions, here are the things you should include as instructional text in your forms if you want to make them more usable:

• A clearly written title – The title of your form page is the first thing that people will notice about it, so make sure that it says exactly what they can do by completing the form. Is it an order form? Then the title of your form should be “Order ____”. And since a form implies that people are going to take some action, your title should start with an action word to emphasize that point.
• Where they can go for common answers – Maybe you’ve noticed people are using your contact form to ask questions they could easily find the answers to elsewhere on your website. Do you see that happening a lot? Preempt those questions with instructions at the top of the page telling where they can find that information before they take the time to complete the form.
• Who this form is intended for – Put some instructions at the top of the page saying who exactly should fill out the form, and you’ll save people the time from filling it out for the wrong reasons. Write these instructions in the positive voice though, and be as specific as possible – people will understand what you’re saying much easier than if you were to write it in the negative voice.
• What they need to complete the form – Most people want to get through a form as quickly as possible. If they’re halfway through the form and are asked for information they don’t have right in front of them, are they likely to continue filling it out? It depends. Telling them what’s needed ahead of time could avoid any aggravation on their part, and increase the likelihood of them completing it.
• Why you want certain information – Only ask for the information that’s absolutely necessary for the person filling it out to tell you. For example, does your contact form ask for a street address when only an email is needed? If so, will you be adding them to your print mailing list if they give you their address? Then tell them why you’re asking for it  – but give them the chance to opt out, of course!
• What the next step will be – Most forms display some confirmation content once the user hits the “submit” button. This is an often overlooked spot to leverage, and where you should tell them what the next step will be as a result of their having completed the form. You might also put links here to other content so that they don’t leave the website just because they completed the form.

…but don’t write these instructions

You can skip on this content in your forms – it might make them less usable:

• Sales pitches – When someone is ready to fill out a form on your website, they’re willing to complete some transaction with you because they’ve already been sold on what you’re selling. Keep the content directly related to the task of completing the form – anything else can and should go.
• How “quick and easy” it is to fill out – Your visitors will be able to tell right away both how easy your form is to complete and whether they’ll be able to do so quickly or not. Don’t have to specifically tell them that; some people might even be suspicious if you do. Is it really that quick and easy if you say so?
• The time needed to fill it out – For relatively simple forms, mentioning how long it will take to complete isn’t necessary. It’s understood that forms take some short time to complete. But, if you have a truly large form that might take, say, 20 minutes to complete, advance warning is useful.
• Help text for every field – If your field labels are clearly written, skip the help text. But if you have a field where it’s not so obvious how the user should respond, you might need it. Just make it short enough to fit right next to the field, or use an icon (such as a question mark) as a link to it.

Thoughts?

Do you have any other tips for writing clear instructions in a website form? Has anything in particular that you’ve tried worked well? Share your thoughts with everyone by using the comment form 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!

For the Content Writer

• The first link is the most important one – The first link in your blog post, article, or piece of content will generally gain the most attention and have the highest click-through rates because that’s what people see first. So when you’re writing content, if you make the first link the one that is of the most interest to your audience, you’re increasing the chances that they’ll click on it.
• Don’t link to everything – Links are used to either emphasize something relevant to the point you’re writing about, or to get the reader to take a particular action. Linking every other word will make both more difficult because your links will become less noticeable. Make sure that your sentences have no more than 1 link in them and paragraphs have no more than 5, and you should be fine.
• Don’t depend on links to help your content make sense – People are either too busy to click on every single link you provide, or maybe they’re reading your article in a format where they can’t click on the links: print, offline, or mobile. My point is that as the writer, you need to make sure that the reader can understand your content without having to click on the links.
• Don’t hide your the URLs of links - People are used to being able to know where a link will take them when they hover over it – either by seeing it in their web browser’s status bar, or by reading the TITLE attribute (if you’ve written one). Either way though, you should avoid doing anything that hides the ultimate destination where they’ll be taken to once they click on the link.
• Make links scannable - This is something that I mentioned in last week’s post about why you should avoid using “click here” in your link text. Your link text should be written so that when someone is scanning through your content, they can quickly identify what the link is and where it will take them to. Using “click here” as the link text won’t do that.

For the Web Designer

• Links should look like links – I covered this topic exclusively in a separate post about how text links should be styled, but the gist of that post is simple. Text links should be underlined and in a color that stands out from the rest of your content. People expect them to look that way, and not styling them according to these conventions will make them less usable and noticeable.
• Use icons sparingly – Using icons on your links can help give your visitors a sense of what will happen when they click on the link, but going overboard with them can be a bad thing. My rule of thumb is that the only time you should use icons is if clicking on the link engages a software application other than your web browser – email, Adobe Reader, Microsoft Word, etc.
• Skip any gadgets that alter link behavior – You can find several applications that try to provide a more interactive user experience by giving people a preview of the website that clicking on the link will take them to. While good in theory, it can get annoying very quickly when used all over your website, so skip the gadgets and use your TITLE attribute instead.
• Make the links easy to click – Horizontal lists (“A | B | C | D | …” or “1 | 2 | 3 | 4 | …”) and vertical lists are often used to help users navigate through content. Either way though, make sure that the clickable area around each link is large enough so that people can easily use it; adding in some extra padding or margins in your CSS should do the trick.

Thoughts?

What do you think about link usability – do you have any tips that you do differently? Share 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!