What is a call-to-action?

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

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

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

What makes a call-to-action effective?

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

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

Writing calls-to-action

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

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

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

Designing calls-to-action

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

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

Thoughts?

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

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

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

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

Higher literacy vs. lower literacy

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

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

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

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

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

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

Lower literacy on the web

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

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

How to design for lower literacy users

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

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

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

Thoughts?

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

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!

Titles and sub-headers have the ability to not only break up your text into manageable chunks, but to engage your readers in what you’re writing about. Since people scan web content quickly, titles and sub-headers are what they’ll notice first – which is why they play such a big role in whether your content gets read or not.

Below are my tips for improving your content’s titles and sub-headers – recommendations that both web content writers and web designers can implement to make them more effective.

5 tips for the Web Content Writer

Writing great titles and sub-headers is easier said than done. It’s a skill that you need to develop as a writer, especially given the unique ways that people read content on a website. Here are some of tips for how to write more effective sub-headers in your web content:

• Keep them short and concise – Your goal should be to keep your titles and sub-headers to 8 words or less. At that limit, they will be long enough to make your point, but short enough so that they don’t wrap onto a 2nd line on the page based on how the designer has styled them.
• Strive for clarity, not creativity – You shouldn’t get so creative with them that people don’t know what comes below. Rather, sub-headers should convey information quickly so scanners can get an idea of what the content below is about without having to stop and think about it.
• Don’t re-state what comes below – When you can’t come up with an effective sub-header, the tendency is often to re-state what’s contained in the content below. That’s why writing great titles and sub-headers is a skill to develop – re-stating what comes below is the easy way out.
• Move the keywords forward – Put the keywords you’re writing about at the start of the sub-header for even greater emphasis. Scanners tend to notice only the first few words, so this will help emphasize what comes below in your content. (It can’t hurt for SEO purposes either.)
• Pose a question – Another way to get your readers to read your content is ask them a question within the sub-header that they’ll have to read the paragraph below to find the answer to. If you can do this effectively, it can be a great way to get people to look at your content.

5 tips for the Web Designer

Creating effective sub-headers isn’t just the content writer’s job. Web designers play a large role by giving the titles and sub-headers the visual qualities that will best capture the visitors’ attentions. Here are some design tips that you can use to make them more noticeable:

• Make them a different color – Rather than just making them plain black, choose a color from within your website’s color scheme to make them stand out. Go for a darker color though, especially on a white background, in order to give it enough contrast.
• Make them big and bold – You should always be able to tell what the headers are based on how big they are in relation to the rest of the content on the page. Make them bigger in size – enough so that were you looking at the page in black and white, you could tell what the sub-header is.
• Move the copy in – To make the sub-headers stand out even more, considering giving an indent to the rest of the content beneath them. An indent of 10-20 pixels should do – it will be subtle, but the effect is enough to give your content the desired visual separation.
• Keep the size proportionate to importance – Page titles should use the <h1> tag, which should always be styled the biggest; <h2>’s, <h3>’s, etc. should be used as sub-headers, and should all get smaller as you move further down the list.
• Keep the fonts simple – Since people are scanning, you don’t want your sub-headers to be styled in a fancier font that might take them longer to read and interpret. Style your sub-headers in simple, clean fonts like Arial or Verdana in order to make scanning as easy as possible.

Thoughts?

Do you have any common practices when it comes to either writing titles and sub-headers, or designing how they appear on the page? If so, 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!

What is duplicate content?

Simply put, duplicate content is any text on your website that either completely matches, or is similar to, content elsewhere on your website. While there are acceptable kinds of duplicate content – print-only versions of a web page, for example – in other cases people intentionally use duplicate content across multiple domains in an attempt to get more traffic to their website from search engine results.

It’s the latter usage of duplicate content that is the reason Google and the other major search engines penalize you for having it on your website. There’s no way for them to understand the intent of why the content might be duplicate – even if you aren’t duplicating content maliciously – so they just penalize it altogether.

That being the case then, optimizing your website so that it avoids duplicate content is something you need to do if you’re interested in your website’s placement in search engine results.

(For more tips and explanations from Google about duplicate content, read through their page on the subject in the webmasters/site owners guide.)

5 ways to avoid duplicate content

When you install WordPress out of the box, it’s not duplicate content proof – and that especially pertains to your blog posts and how they’re displayed. For example, if you have your category, archive, and home pages all set up so that they display the full text of your blog posts, guess what you have? Duplicate content.

Here are 5 simple changes you can make to avoid duplicate content on your WordPress website:

• Display the full text once and only once – My rule of thumb is that the full text of a blog post should only be displayed on the actual page of the blog post itself. Everywhere else your recent blog posts are listed, you should either have the excerpt appear, or just the name of the post and a link the full text of it. To display the excerpt only, you can either update your theme files, find a plugin to do it for you, or just use the <!–more–> tag when writing your content.
• Fix your page header – You should insert the following code into your theme’s header file to make sure that certain pages (such as the homepage, posts, pages and category pages) are indexed by search engines spiders, while certain others (feeds, archives, etc.) are excluded :<?php if((is_home() && ($paged < 2 )) || is_single() || is_page() || is_category()){
echo '<meta name="robots" content="index,follow" />';
} else {
echo '<meta name="robots" content="noindex,follow" />';
} ?>
• Be aware of comment pagination – In WordPress 2.7, you have the option of separating your comments onto multiple pages rather than lengthening the actual post page. The only problem with this is that for every page of comments, you’re duplicating the content that people are commenting on. This function is enabled by default in WordPress 2.7, so if you don’t have a need for your comments to be paginated, go to the “Discussion” area under settings and uncheck that option.
• Add unique META descriptions to each post – I’ve written about META tag issues in WordPress previously, but the most important META tag to consider here is your description. If you have the same META description on all of your blog posts or pages, that’s duplicate content. I recommend the All-in-One SEO Pack plugin (what I use on this website) because it lets you use your excerpt (or whatever text you want) as the META description, thus avoiding duplicate content.
• Update your robots.txt file – If you don’t want search engine spiders to find unintentional duplicate content on your website, put some instructions in your robots.txt file that tells them what they shouldn’t crawl. In WordPress, that means making sure you exclude your feeds and any other auxiliary pages that duplicate content you have elsewhere. The following code will do the trick – just copy and paste it into your robots.txt file:
  User-agent: *
Disallow: /wp-
Disallow: /search
Disallow: /feed
Disallow: /comments/feed
Disallow: /feed/$
Disallow: /*/feed/$
Disallow: /*/feed/rss/$
Disallow: /*/trackback/$
Disallow: /*/*/feed/$
Disallow: /*/*/feed/rss/$
Disallow: /*/*/trackback/$
Disallow: /*/*/*/feed/$
Disallow: /*/*/*/feed/rss/$
Disallow: /*/*/*/trackback/$

Thoughts?

If you’re a web designer or developer and have a WordPress website (or have built WordPress websites for your clients), how do you help them avoid duplicate content on their websites? Are there any tips or suggestions that I didn’t mention that you feel would be useful to others? Share your thoughts by leaving a comment below!