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!

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!

As a web content writer, the best you can do is to make sure that your intro text you serves a purpose and communicates something to your visitors. While editing your content as much as possible might seem like good advice normally, intro text does have a valid role, so you shouldn’t scrap it entirely.

Below you’ll find some reasons why you need to have intro text in your content, followed by some tips for how to write it so that it makes your content more usable.

3 reasons you should use intro text

The topic of intro text is something that I work with clients on all the time. Here are 3 reasons that I give them about why they need some introduction to their content, especially when it comes to lists:

• Tell visitors what your content is about – Yes, most visitors to your website will scan through your content quickly, but that doesn’t mean you don’t want to let people know what the content is about. If those scanners have any confusion about the content on the page, they’re likely to scroll back up and look for that intro text to help them.
• Bulleted lists look silly without it – Have you ever seen a section or page of web content that’s just a list of links or items? Something will feel a little off, and that’s because there’s no intro text telling you the visitor what the list is a list of, why it’s there, and how you can benefit from it. That’s what good intro text will do; it can be as simple as “The following ____ are/will ____:”.
• It’s unnatural to how we communicate – Try writing some content where you go right into the topic without any introduction to it. Or along the same lines, try explaining something to someone without giving them the context. Both are hard to do because not introducing something properly goes against the very nature of how we read, write, think, and speak.

6 tips for writing usable intro text

Now that you have heard some reasons for why you should write intro text, here are some pointers on how to write intro text that is both usable and useful to your visitors:

• Keep it short and concise – Good intro text should be no more than 1-2 sentences long and should concisely state what the page is about. If it makes sense to include keywords here, do so, but only if they make the sentence more helpful to the reader.
• Limit the jargon and fluff – Intro text isn’t the place to include marketing or technical jargon, but then again, no website is. (That’s another topic though.) And skip on the fluff as well – i.e., content that has no function and is only there for its own sake.
• Focus on the user – Strong intro text focuses on answering 2 questions that the reader has about your content: what will they find on the page, and why should they care about it. If you answer those in as straightforward a manner as possible, you’ll have done a good job.
• Precede it by a header – I’m not just talking about the intro text on a page of content here; the same principles apply to the intro text within a section of content. When writing a section header, the text of the header should be a phrase that summarizes what the intro text beneath it says.
• No more than 1 link max – Because of where intro text is on a page, a link in it is really going to get noticed a lot. If you follow some of these ways to make links more effective as you’re writing the intro text, you’ll increase the likelihood that people will follow the link contained within it.
• Experiment with formatting – Want to get people to pay attention to your intro text 100% of the time? Try experimenting with the formatting to bring more attention to it. Put certain keywords or phrases in bold print, put the whole intro in bold print, or try some alternate formatting within your CSS.

Thoughts?

To those who write web content often, what are your thoughts on including intro text in your content? Is it worth the space on the page, or should it be gotten rid of altogether? Share your thoughts with everyone by leaving a comment below!

(If you don’t know what breadcrumbs are and want to find out more about why and how to use them, read through my previous post on the subject, “Hansel and Gretel Would be Great Web Designers“.)

By adding some code

If you feel comfortable working with your WordPress theme’s files, here are 3 different ways to incorporate breadcrumbs into your WordPress website. Choose a method depending on what content you want to use them for on your website.

Simple breadcrumbs for individual blog posts

A post over at WP Hacks details how to make simple breadcrumbs menus using basic PHP template tags. All you have to do is insert the following code into the single.php file wherever you want the breadcrumbs to appear:

<a href="<?php bloginfo('home'); ?>">Home</a> &raquo; <?php the_category(); ?> &raquo; <?php the_title(); ?>

You can style this with CSS to make it look a little nicer; my recommendation is that you wrap everything in a list like as follows, which will give you more options when it comes to styling:

<ul>
<li><a href="<?php bloginfo('home'); ?>">Home</a></li>
<li><?php the_category('') ?></li>
<li><?php the_title(); ?></li>
</ul>

I include the code here because this method is so simple to use. I’ve used it before, and it serves it purpose if you only want to include the breadcrumbs on your blog posts. The only drawback is that there is no flexibility to use it anywhere other than the posts on your WordPress website.

Advanced breadcrumbs for both pages and posts

When you want to add breadcrumbs to more than just blog posts, you need something a little more advanced in order to do that. Here are 2 different methods; both incorporate more advanced code to display breadcrumbs on both pages and posts:

• How to: Breadcrumb function for WordPress
• WordPress Breadcrumbs

With both methods, you just have to copy and paste some code into your functions.php file, and then insert some PHP code into your theme’s files wherever you want the breadcrumbs to appear.

I haven’t tried either one of these out myself, so if someone has used them, or tries them out on their website, leave a comment below and let me know your thoughts.

By using a plugin

If you’re not comfortable editing the code in your WordPress theme’s files, there are plugins available that give you the ability to style and manage them through the WordPress admin section, such as:

• Breadcrumb NavXT
• Yoast Breadcrumbs
• Breadcrumb Trail by Justin Tadlock

I haven’t tried out any of these plugins myself, so I can’t speak from personal experience about how well they work or if one is preferable over another. If you have used one of them or have any feedback about these plugins (or others I didn’t mention), leave a comment about it below.

Thoughts?

Do you have a preferred way of creating breadcrumbs on your WordPress website? If so, 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!

#1 – It’s not informative

It’s an established fact that most people don’t really read the content of a website – they scan it. This applies to almost all written content on the web, and people tend to do it for a number of reasons, such as:

• They are too busy to read something fully
• They are looking for a specific piece of information, and once they find it they want to move on
• There’s a lot of information out there that is competing for their attention
• They might have other issues that make it harder for them to read content online, such as screen resolution, screen glare, tiny font sizes, contrast, etc.

When someone writes content for a website, they have to keep in mind that it’s probably not going to get read except by those who have an inherent interest in doing so.

Most people are going to scan it instead, and when they do, certain things will jump out at them – links being one of them. Of course, that will depend on whether the web designer styled the links properly by making them underlined and a different color from the surrounding text.

Yes, people scanning content will still see your link even if it says “click here”. But using “click here” as the link text doesn’t take that next step of telling them where the link is going to as they scan over it quickly.

The bottom line is that people like to – and want to – know where a link from your website is going to lead them. Using the words “click here” just doesn’t do that for them, and here’s a good example:

• Bad - If you want to learn more about this, click here to read this article from the New York Times
• Good - Learn more topic about this by reading this article on the New York Times

The second one tells people at a quick glance not only that there is a link, but that it’s to an article on the New York Times website. What does “click here” tell you? Only that a link is there for them to click on.

#2 – It’s not action-oriented

Most websites want people to take some action as a result when they are visiting it. People respond to action words, so those who write content for a website will want to keep that in mind by writing link text that encourages visitors to take the desired action. Here’s an example:

• Bad – Enjoy what you see? Click here to subscribe to our blog for free updates!
• Good – Enjoy what you see? Subscribe to our blog for free updates!

Notice the difference? The second one has the desired action contained within the actual link text, which will be much more obvious when someone is scanning the content quickly. Using “click here” doesn’t convey that desired action – again, it only tells them that a link is there for them to click.

#3 – It’s not SEO-friendly

Search engines such as Google use the strength of your links in their algorithm when they determine your placement in search engine results. While the number of links (both internal and external) on your website is important, how those links are worded can be just as important. Here’s an example:

• Bad – Click here to read more web design articles by Addicott Web
• Good – Read more web design articles by Addicott Web

The second one is the much-more friendly link. When you use “click here” as your link text, all that you’re doing is letting the search engines know that your content contains a link. If you want to also help them estimate how relevant that link is though, start using keywords in the link text instead.

#4 – It’s not modern

During the early days of the Internet, people defended the use of “click here” on the grounds that if it weren’t used, most people wouldn’t know what to do when they came across a link. Content writers came up with it as a solution that gave users the hint of what action they were supposed to take – literally, click here.

Needless to say, that’s drastically changed as more and more people have become familiar with websites in recent years. If you continue to use “click here” in your content, you can give your visitors bad impressions that you don’t want them to have, such as:

• That you don’t respect their intelligence enough to know what a link is
• That your website or the content on it hasn’t been updated in years

You always want to make a positive impression of who you are through your website, and most people nowadays think that websites that still use “click here” are just plain old-fashioned. I would venture to guess that that is definitely not the impression you want to convey about your business or organization.

Thoughts?

Do you still use the phrase “click here” when you’re writing links? Do you have clients or people you work with who still use it and don’t understand why they shouldn’t? Share your thoughts on this topic by leaving a comment using the form 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!

Without further ado, here are the websites…

The best websites

I chose these websites for a number of reasons, but mostly because they combined good, clean designs with a usable interface that easy to find the information you’re looking for.

University of Akron

Binghamton University

Butler University

Cornell University

University of Louisville

University of Michigan

Purdue University

Robert Morris College

Interestingly, scroll up and look at the similarities between this website and Cornell’s. Don’t they look strangely similar?

Siena College

Temple University

University of Tennessee

Texas A&M University

Xavier University

The worst websites

As I’ve discovered, there are a lot of bad university websites out there – and it’s not just limited to the smaller schools. It’s surprising that some of the biggest-name schools in the tournament have such bad websites, but sadly, that’s the case.

Duke University

University of Kansas

University of North Carolina

North Dakota State University

University of Northern Iowa

Radford University

University of Southern California

Stephen F. Austin State University

Syracuse University

University of Utah

Villanova

Western Kentucky University

University of Wisconsin

Thoughts?

It was hard for me to narrow down the field to the best and the worst, since there were a lot of websites that fell somewhere in between. But, now that you’ve seen these websites, what do you think of how I grouped them? Are there any that you really liked or disliked, or any that you felt belonged in a different category? Share your thoughts by filling out the comment form 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!