Part of the problem with this approach is the ever changing landscape online. Something that converts visitors today, might not be working two months from now (in some cases, it may not be working in the first place, but no one took the time to test it).

Redesigning a website, or even a single page, can be a tedious and time-consuming process. Re-opening a project that you so happily completed can take major mental willpower. However, improving a website doesn’t need to take weeks, or even days. I’m a believer in baby steps: making incremental progress, small victories, minor adjustments with big results.

That’s where my 45-minute plan comes into play. In less time than you spend watching The Bachelor each week, you can have a dramatic (and measurable) effect on your website.

Keep in mind, all times are approximate (and people work at different paces).

0 to 5 Minutes

Select a page where you can have the greatest impact

Surprisingly, this may not always be your homepage. Instead of trusting your gut, a little digging in Google Analytics (or your favorite analytics tool) can show you exactly where to start.

Here are some ideas on finding pages that you can work on:

Navigate to your "top landing pages" or "top entrance pages" report (in Google Analytics, this is found under "Content" on the left sidebar).

Use a filter to remove pages with minimal traffic (see the "Advanced Filter" link at the bottom of the table).

Sort your pages by bounce rate.

Select the biggest loser: the page with the most potential for improvement (a combination of high visits and bounce rate).

5 to 15 Minutes

Use free (or cheap) tools to determine which areas on the page need the most attention

If you really want to stick to 45 minutes, you won’t have time to use a lot of tools, but even using one will give you the insight you need to make an improvement.

Here are some tips and tools that you can help up your conversion rates:

Get free advice from the design and development professionals on Concept Feedback. You can find more tools like Concept Feedback in my previous post "10 Excellent Feedback Tools for Web Designers".

See how people interact with your site using Userfly or ClickTale (extra credit: set up an informal user test with your neighbor, or use a remote testing service like UserTesting or Feedback Army).

Use heat maps to quickly see what’s popular and what’s overlooked. CrazyEgg and clickdensity both provide heat map tools.

Setup a quick survey with Survey Monkey, or a poll with PollDaddy to see what your users want.

Still need help? Here is a quick list of high impact items you could be testing:

• Headline copy
• Buttons (size, color and location)
• Calls to action
• Whitespace
• Advertisement density
• Value proposition
• Text size
• Images
• Color scheme (There are many tools for picking colors)

Find more tools that you can use through these articles:

• 7 Tools You Should Be Using For Better Web Designs
• 7 Incredibly Useful Tools for Evaluating a Web Design
• 10 Promising Free Web Analytics Tools

15 to 40 Minutes

Define the top 3 items from your research and implement the changes

Chances are that you’ll discover a hundred different things you could change, but remember, the key is incremental improvement and not a complete overhaul. So choose the items that you believe will have the most impact, and start there.

Keep in mind that the changes you make don’t need to be perfect—this is going to be a work in progress.

As soon as you’ve narrowed down your list to three, develop the content and code a test page right away. Limiting your list to three items keeps the project manageable. Don’t try to overdo it: you’ll be surprised how much impact just three seemingly minor adjustments can make.

If you get done with three and still want to try new changes—great!—this needs to be an ongoing process. However, don’t let an overwhelming list of ideas prevent you from action.

40 to 45 Minutes

Split test your new page, rinse and repeat

Once your new page is ready, set up an A/B split test in Google Website Optimizer to track the results. Make sure to select a conversion page that accurately reflects your primary goal for that page.

Depending on the amount of traffic your page receives, you should be able to determine relatively quickly (anywhere from a few hours to a few weeks) what effect your changes made. If you’ve done your due diligence, you’ll most likely be rewarded for your effort with an increase in conversion rates, and sometimes your tweaks can result in substantial improvements.

However, you may find that your new page performs about the same, or in some cases, worse. But that’s the beauty of testing! Every test, whether successful or not, provides you with new knowledge about your site: what works and what doesn’t.

So—now that you’ve spent 10 minutes reading this—take the next 45 to improve your website. And please, come back here and let me know how it goes!

Related Content

• An Introduction to Website Split Testing
• Unleashing the Power of Website Analytics
• A 4-Step Process for a Positive Web Marketing Approach
• Related categories: Usability/Accessibility and Project Management

About the Author

Andrew Follett is the founder and CEO of Concept Feedback, a free web design review community for designers, developers and marketers. Follow Andrew and Concept Feedback on Twitter.

But analytics, used properly, is so much more – it’s a marketing tool, an error checker, a usability tool, an ROI calculator, an eCommerce tracker, an ad tool and the list goes on.

So we’re going to take a look at the basic ways of getting more from your analytics.

Analytics Software

First things first, if you haven’t got an analytics software set up,  then for god’s sake what are you doing man(/woman)!

Personally, I use Google Analytics, one of the most well known and best packages available with the added bonus of being free.

But if you feel more comfortable using something else, there are many options out there to check out (you can start with this list of web analytics tools).

Bounce Rate

Bounce rate is important. Very important. Don’t fool yourself into thinking that having a high bounce rate is fine because "it’s just a human choice thing".

Having a high bounce rate can be an indicator of serious problems with your site. It could be the web content or your calls to action that are ineffective in captivating and engaging your visitors.

"What the hell is he on about?" some of you may be asking. For those who don’t know what bounce rate is, it is the number of people who, after arriving on your site, don’t look at another page and leave straight away. You’ll normally see this statistic represented as a percentage of your visitors.

Now there is, as mentioned, a certain element of human choice about the figure; people will sometimes land on your site by accident or click a search result and find your site isn’t quite what they were after. That’s fine, and I’m sure you’ll be happy to accept that you’ll never get a 0% bounce rate – not without cheating anyway, and that’s no good.

Some common causes of high bounce rates:

• Badly placed calls to action
• Non-engaging content
• Broken links
• Site errors
• Badly targeted ads

Combining this figure by looking at individual page bounce rates and bounce rates for different referring sites can open up your eyes to a large number of problems.

A low bounce rate often shows a site that has content people want to read more of, and effective ways and site features that draw people in further such as a "related content" list of articles on landing pages or invitations to try the product with no strings attached.

But fear not, bounce rates aren’t the beginning of the end for some types of websites. For example, blogs often have high bounce rates as people click through from RSS feeds and tweets with the intention of reading only that one web page.

eCommerce sites though are a good example of sites that benefit from low bounce rates; they can draw people into looking at other products, reading more content on the site, and hopefully buying stuff.

You should generally find out what is suitable in your niche. For commercial sites, that may be difficult, as people may not be willing to share their information, but certainly within the design community, don’t be scared to ask around.

As a quick guide for most sites: a 30% bounce rate is a good figure, whereas over 50% could well be improved.

However, if you’re a blogging site and receive traffic from social bookmarking sites, then it may well be much higher due to the way people often dip in and out of your site reading articles and then leaving, in which case 60% could be considered a good figure and anywhere from 70% – 80% is alright. Over 80% and I’d be a bit concerned.

The best way to see if changes to your website’s design can improve bounce rates is by using A/B testing. The results can be seen for themselves with increased conversions.

Conversion Rate

All the analysis of people visiting your target pages leads to the second important figure after bounce rate: the site conversion rate.

If you have a clear goal for your site, then you should keep track of how many people fulfill that goal.

If you’re running an eCommerce site, then it’s normally a completed checkout. For   websites that require you to register for an account (Twitter or Facebook, for example) it’s completing the sign up process. For business sites, it could be a completed contact form.

The conversion rate is another percentage, the amount of people visiting your site that are not just getting to your goal pages, but also carrying out the actions you want them to.

When people first start to look at conversion rates, they are often surprised by how low they are; 3% is good conversion rate for completing a transaction on an eCommerce site.

Yep, just 3% of new site visitors go through the checkout!

If you have a clear path to your goal (e.g. a certain process of clicks or a checkout process), then set up a funnel and see where people are falling off. Where are they dropping shopping baskets? Where are they encountering errors on your web forms?

It can be easy to highlight issues such as an overly complex form and other barriers to goal completion.

If you don’t have a single set path, then compare where people come from to get to your goal pages. If many people arrive from one page but not from another, then compare both pages and look at their difference. Hypothesize why another page is successful, while another is not. Use A/B testing to verify your assumption, rinse, and repeat.

Once you’ve established why people are (and aren’t) completing goals and you’ve fixed your issues and calls to action, then you need to look at where people are going after converting. Are they staying on your site or exiting? If they’re exiting, you may well be missing some huge opportunities (upselling, for example).

Percentage of visitors who view target pages

At first glance, tracking your target pages may seem to be the same as keeping track of conversions, and whilst they are similar, these two site analytics stats have different values to you.

We’ll use a hypothetical example for discussion: Mr. Smith and his online paint store.

His conversion pages are obviously completed checkout pages (where he does of course try and upsell some accessories).

His target pages, however, would be his product pages. For most types of sites, it should be quite easy to work out what your target pages are. For example, a blog’s target pages are its posts, and a business site will be its information pages.

In most cases, these pages are the first major steps on the path to goal completion. Viewing a product is your first step to a complete checkout, viewing a business service is the first step to getting in touch and asking about the service.

In order for Mr. Smith to convert site visitors to its completed checkout pages, he must first present his paint supplies in an enticing way.

You should know how many people are getting to these pages and if they are completing goals from these pages. If not, where are they getting lost?

It starts to become quite clear where a well-defined funnel can really help to benefit your analytics.

What people search for and what they do after searching

Tracking site search is something very few people actually do, let alone pay attention to. Yet it can be a massively valuable resource for finding out what your site visitors want.

Let’s look at Mr. Smith’s online paint store again. He stocks a huge variety of paints and a quick look at his search result reveals people are searching for "claret paint" that he doesn’t stock.

It’d make sense to start stocking Claret paint, wouldn’t it? Or at least offer alternatives to Claret paint.

The second part of site search analytics is determining what people do afterwards.

There are a couple of scenarios here:

Scenario 1: They search and find something you have

If they head to the page they are searching for and stay on your site, then well done, your search feature is working.

If they don’t, then there’s clearly a problem with your site search. It may not be returning the results it should be returning, or it isn’t displaying the search results in a useful way for the visitor to understand.

Scenario 2: They search and can’t find something

Now, many people would say that if these visitors leave, then that’s fine because you don’t sell what they need.

But we’re not most people are we?

If Mr. Smith sells paint supplies and somebody has searched for a yacht, then they’re obviously just in the wrong website.

However, if they’ve searched for "claret paint" and left because you don’t have it, then surely you could be offering them an alternative to Claret paint.

The "Did you mean" search suggestions on sites like Amazon and Google are good examples of this.

Amazon suggests related searches and products that closely match your search to keep you from leaving.

Put quite simply: your site search tells you what your visitors want without you even having to ask! How can you afford not to use that resource?

Where your visitors come from

A lot of time and money is spent on link building and ads on the web, and the easiest way to determine if they’re working is to see where your visitors are coming from.

Bloggers, for example, spend time writing for other blogs, commenting in various places, taking ads out on other sites and sharing things via social media. Therefore, it makes sense that you keep track of where you get the most returns to make a wise decision where to focus your efforts.

A properly set-up analytics account integrated with eCommerce tracking and adwords accounts can even show you a direct return on investment for your individual adword campaigns; a brilliantly useful tool for managing your pay per click ads.

Use your analytics properly

To track all of this and make your life easier, it really helps to set up your analytics software. Properly setting up funnels, site search tracking, eCommerce tracking and ad words tracking should be priorities.

Share your thoughts, tips and opinions in the comments!

Related Content

• 10 Promising Free Web Analytics Tools
• 10 Definitive Tips for Writing Captivating Emails
• 15 Tools for Monitoring a Website’s Popularity
• Related categories: Usability/Accessibility and Tools

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project - Stat Share.

On top of the web’s ubiquity, the web has gotten to an interactive all time high. Users don’t just seek information, they interact with it in more novel ways than we can ever imagine.

And it’s only going to get better: we are seeing a myriad of emerging web apps and website trends that are revolutionizing the way we use and obtain information on the web.

With this concept in mind, usability, how effortless it is to interact and use your website, is critical to its success. This article discusses five important usability tips that your site can’t live without.

1. Have a search feature

A basic site feature nowadays is a search feature. It allows your users to jump to the pages that may contain the information they’re currently seeking.

Locate the search box where users can immediately find it. Placing it on the top left or top right of the webpage will ensure that users see it almost immediately. Make it stand out.

The submit button can also be made to stand out by using vivid colors that fits the design theme.

The "GO" button on Amazon.com is bright orange, congruent with the company colors, to help users quickly see it.

Very often, the magnifying glass icon is used to associate the search function and is now becoming a reasonably identifiable symbol for "site search".

Ubisoft uses the magnifying glass icon to identify their search input field.

On deviantART, the search is identified with a magnifying glass icon and the word "Search…"

2. Pay special attention to web page organization and layout

The use of headings, lists, and consistent structure cannot be overly emphasized. Users tend to scan through web pages in an F-shaped pattern. They pick out what stands out from the rest of the text: headings, links, bold text and bullet points. Use headings and subheadings that are eye-catching so that users can focus on them and quickly process the content while scanning through the page.

Use CSS for layout and style where possible. This ensures that structure and presentation are kept totally separated, giving you an edge when it comes to experimenting on page organization and structure by trial and error.

3. Keep the user interface consistent

A good interface design influences user behavior, prompting them to take an action or route that will result in their desired outcome. This ultimately translates to saying that the design should be intuitive. Keeping the interface simple makes navigation easier for the user. First time users quickly become regulars if the interface design is clear and consistent.

Use a global navigation that appears on every page of your site in the same place. Make your buttons or links consistent with the central theme of the website. Choose the right color schemes.

Apple features a primary navigation that visually indicates what section you’re in.

When hovering over a primary menu item, it becomes recessed, indicating that it’s the focused element.

4. Structure web forms correctly

When you have web forms on your site, you want to make it as easy as possible to fill out. To illustrate key design tips for designing usable web forms, let’s look at the Yahoo! sign up form.

In the figure above, you can see that there are text hints in the input fields for First Name, Last Name, birth Day and birth Year so that there’s no ambiguity to the order that the input fields require. For example, there is no question as how to format your name: Last Name, First Name or First Name, Last Name.

You can remove these inline hints when the user focuses on the input field.

Group form items into logical chunks so that each section has a distinct topic; this makes it easier to quickly fill out form items.

In the figure above, you can see three logical groupings of web form input fields: (1) information about the user, (2) account information, (3) alternative contact information. Grouping it this way makes it easier to fill out related data in chunks.

Whenever a user performs a certain action, give them feedback and/or confirmation so that they aren’t left guessing as to whether they’ve filled out the form correctly or not. This avoids needless repetition of action (such as filling out the form again to ensure that they have in fact been successful in submitting it).

Shown above is how the Yahoo! sign up form deals with errors in filling out the web form. It gives instant inline feedback so that the user immediately knows that the information they provided is erroneous or lacking. The feedback provided for web form errors are: What the error is and suggestions on how to correct the errors.

5. Make help features available

A good user interface will be intuitive and logical enough so that users will know straight away what to do in order to get what they want, but the level of technical know-how that each user has will be different.

In addition, help features can be a way to prevent the user from being discouraged from using your site; if they can’t figure it out and there’s no way for them to seek help, then they’ll look for a site that they can figure out.

Some help features to consider:

• FAQ or Q&A Page
• Help Pages/Documentation: Check out Google’s Help Pages for inspiration.
• Site Map: for locating web pages and seeing the site organization.
• Support ticketing system
• Help forums

Related Content

• Creating a Timeless User Experience
• 10 Tools for Evaluating Web Design Accessibility
• 20 Websites to Help You Master User Interface Design
• Related categories: Usability / Accessibility and User Interface

About the Author

Brujo Owoh is an university student majoring in Multimedia Systems. He specializes in web design and 2D animation. In his spare time, he enjoys reading fiction, hanging out with his mates, or keeping up with design trends on Twitter. Want to hire him or connect with him? Get in touch on Twitter: @Brujo2.

Well, a lot’s changed since then. Today’s modern trends on the web are sophisticated, alluring and engaging. Building interactive and amazing interfaces using Flash/Flex or Silverlight has become easier and more accessible to modern-day designers.

It’s easy to get caught up in the creative concepts of modern web designers. Just peeking at The FWA, a popular design gallery for Flash/interactive websites, will give you a glimpse of the creativity and character of the interfaces that today’s designers build. Their concepts are out of this world, and it’s only going to get better.

But where does that leave universal design? And usability? Do they have to sacrifice these important factors in order to provide their users an out-of-this-world experience?

In this article, I’d like to highlight four aspects of usable designs in today’s modern web – the things that you should keep in mind when working on your design projects.

1. The visual design

Remarkable designs are very creative and push towards the extreme limits of conventional (e.g. safe) designs. They’re distinguished, and they make memorable positive impressions on the people that see them.

But how much is too much?

Keeping your visual design simple yet memorable is a challenge, but a challenge that you must be able to negotiate when it comes to creating usable designs.

To improve the aesthetics of your interface, use white space to visually organize the page. Grouping related design elements and separating distinct elements can aid users in quickly finding the set of information they’re interested in.

The graphics you use should be able to illustrate, inform and aid the readers. Visual clutter should be avoided, and every visual element on your interface should serve a purpose.

In the following example, you can see how Bigo & Twigetti arranges visual elements by spacing them out and making them purposeful as visual cues as to what the website is about.

2. Dynamic feedback

Do you ever get bored of the standard static site feedback (the ones that appear after you’ve filled out your web form, for example)?  I do.

Today’s web interfaces are evolving in such a way that you don’t know what to expect when you get to a website. I like the experience where my actions provide a unique response. Appropriate and dynamic feedback gives users an immersive and interesting user experience.

Over at Sergey Tyukanvo’s online gallery, feedback is based on the real world. Users will be more likely to relate to your website if physical analogies and cultural standards are utilized.

3. Information architecture

If a user can’t find what he/she wants in as few clicks as possible, they’ll leave. Use metaphors that are easy to identify with. Navigation should come naturally to the user. Controls should be highly visible.

It should be obvious to the user what his/her actions should be on your website, making retrieving information a smooth process. Check out the Coca-Cola site: it’s arranged in a manner that makes it easy to find the information you likely want to know.

4. Constraints

By definition, constraints mean restricting possible actions that can be performed. Another way of looking at it is giving users more control over possible actions that can be performed; a classic half-empty versus half-full glass scenario. That way, they feel like they’ve achieved something.

John Ruppel’s portfolio is a unique example. The options menu allows users to filter between interface styles, backgrounds and categories in a totally efficient manner. Users are, thus, motivated to learn more about these various options they have control over.

Your thoughts?

What are other important factors to consider when designing a modern user interface? Share your thoughts with us in the comments.

Related Content

• Adobe Flash Accessibility: Best Practices for Design
• 10 Tools for Evaluating Web Design Accessibility
• 80 Examples of Add to Cart Buttons for Design Inspiration
• Related categories: Usability/Accessibility and User Interfaces

About the Author

Brujo Owoh is an university student majoring in Multimedia Systems. He specializes in web design and 2D animation. In his spare time, he enjoys reading fiction, hanging out with his mates, or keeping up with design trends on Twitter. Want to hire him or connect with him? Get in touch on Twitter: @Brujo2.

We are able to study these different patterns through our analysis of usability tests. Both qualitative ("word-based") and quantitative ("number-based") tests reveal to us that while users are concerned about design elements, they also want to get what they’re looking for quick. The more mistakes we let them make in the process, the more frustrated they get and less time they spend on our website. As designers, we need to figure out what makes people stay on our websites, and more importantly, what makes people leave.

Usability is a lot more than just using grid systems and focusing on what’s above the fold – there are sets of factors that play into how users will interact with websites, and today we’re here to analyze them and find out ways we can improve.

Page load time

As one of the gurus of usability, Jakob Neilson, said in an interview, there are three rules for response times based on common human characteristics: "If it is faster than one tenth of a second, you don’t feel like you are waiting at all. If it is more than one tenth of a second, you can tell you are waiting, but up to one second, it still feels like smooth navigation. Between one and ten seconds is the limit for your attention."

Web development has changed a lot even within the last ten years. There are more and more methods for us to cut down on page load times even for slower internet connections. Through using sprites, optimizing our images for the web, and reducing the amount of HTTP requests, we can greatly reduce our page load times and aim closer to that one-second mark.

Resources:

• Best Practices for Speeding Up Your Web Site – Yahoo! Developer Network
• CSS Sprites: Image Slicing’s Kiss of Death – A List Apart
• Clever JPEG Optimization Techniques – Smashing Magazine
• Yslow FireFox Extension – Yahoo! Developer Network
• 10 Ways to Improve Your Web Page Performance – Six Revisions
• Website Features That You Can Easily Offload – Six Revisions

Don’t judge a book by its cover…

… doesn’t apply to web users. If anything, what’s above the fold of a website will greatly dictate whether a user ventures further. While it’s proven that users are comfortable with scrolling down through pages to find out more about them (even long pages), make sure you cut off elements to remind them that there is more to see.
Be clear with the purpose of your website, not only in your design, but also in your content. In fact, use Krug’s third law of usability and cut your content in half, then do it again. Make sure your words are just as powerful as your design.

Resources:

• Krug’s 3 Laws of Usability
• Minimizing Complexity in User Interfaces (Smashing Magazine)
• The Myth of the Page Fold (cxpartners)
• Clear and Effective Communication in Web Design (Smashing Magazine)
• The Construction of Instruction (24 Ways)

Give users what they expect

While predictable isn’t always what we want to be for ourselves, being unpredictable in design doesn’t often work to our advantage. Stay conscious of where elements are usually placed on pages (search bar top-right hand corner of the page, branding at the top-left of the page, etc.), and try to keep elements in those places. Play on what your clients know, and don’t make them play a guessing game.

Following the norm in icon design is also useful for our users. They want to see the same symbols so they know what each one does. Printers, mail envelopes, and phones have expected results. Don’t give users what they don’t expect.

Resources:

• Feed Icons
• Consistency and Repetition – About.com: Desktop Publishing
• Consistency in Design is the Wrong Approach – User Interface Engineering

Don’t sacrifice web accessibility

While usability and accessibility are two completely different topics, they often fall hand-in-hand with one another. While we make websites usable for the everyday user, accessibility is making it usable for users that aren’t able to interact with web pages like everyone else does.

Some ways you can adhere to accessibility guidelines are through grammar and spell-checking your content, ensuring that this same content makes as much sense being read off the screen as it does being read back to you, not using deprecated tags in your markup, using relative font sizes, and using ALT tags.

Most of the time, when you’re creating accessible websites and following these tips, you’ll also be improving the usability of your website.

Resources:

• Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 – W3C
• CAPTCHAs: Tough on Sales & Common Way to Test User Tolerance  – UX Booth
• An Idiot’s Guide to Accessible Website Design – Web Design Ledger
• 10 Simple Web Accessibility Tips You Can Do Today

Navigation

Navigation is one factor of web design where we can never fully anticipate our users’ reactions. A/B split testing and "Card Shuffle" testing can be very effective ways of analyzing our users’ behaviors and the paths they take to find what they’re looking for. In practice, we should aim to reduce redundancy in our links, create permalinks that are understandable and self-explanatory.

Another vital part to navigating through a website is a search function. If you have a search, make sure it works properly. Some sites have a "Quick Link" button now that works much like Google’s "Feeling Lucky" button, which can be very useful.

Resources:

• 10 UI Design Patterns You Should Be Paying Attention To – Smashing Magazine

Type, Type, Type

Typography is another growing trend in design. While, of course, type has been along as far back as existence, there has been a lot of focus put on typography and what makes it readable lately. We need to make sure we set focus on some basic typographic elements such as line-heights, letter spacing, and (relative) font-sizes.

While having cool funky fonts is nice, we need to make sure that they’re legible more than anything else. This includes paying close attention to colors as well.

We should already know how certain colors (and combinations of them) can attract certain feelings and emotions, however we need to make sure that these colors not only convey the emotions we want, but also make the font readable against what’s behind it.

Using font styles can also be useful in making users interested in reading content. Bolding and italicizing particular key words and phrases can be helpful in catching users’ attentions. Underlining elements should be restricted to links.

Resources:

• 10 Principles for Readable Web Typography – Smashing Magazine
• Type Inspired Interfaces – 24 Ways
• A Guide to Choosing Colors for Your Brand – Usability Post

Rebound from mistakes

As many have said before, the hardest part of our job isn’t designing how something looks when it works, but when designing elements for when they fail miserably. I’m not only talking about when your site has a 404 error, but this also goes for form errors. Make sure that if you made a mistake, you redirect your users to other "safe" places they can go, and if they made a mistake that you show them the problem and tell them how to fix it.

Resources:

• A More Useful 404 – A List Apart
• Effective Maintenance Pages: Examples and Best Practices – Smashing Magazine
• 404 Best Practices – CSS Tricks

Analytics: using it as a tool

There is a saying that as usability experts, we should Test Early, Test Often (T.E.T.O.). Even if we don’t use one of the multitudes of web applications for usability testing, we can analyze the raw data our users produce for us through tools like Google Analytics and Mint. More importantly, we need to pay close attention to a few key functions that these tools produce for us.

First and foremost to effective analytics is understanding your users’ environment (e.g. what browser they’re using, what operating system they’re using, etc.).

Second, pay attention to where your users are coming from. Jakob Nielson states that there are four sources of our users:

• Low value referrers.
• Direct links from other sites.
• Loyal users.
• Search engines.

We need to analyze all this raw data based on these stats. These different sources will show users interacting with our websites in different, easily distinguishable patterns. While a loyal user will scan through every page and take their time with your website, those referred through search engines will likely be like a one-night stand – once they have what they want, they’ll get the hell out of there. The trick is, of course, to reduce this from happening.

Resources:

• 5 Articles To Understanding Your Websites Bounce Rate
• Google Analytics
• Mint

Related Content

• 10 Simple Web Accessibility Tips You Can Do Today
• Creating a Timeless User Experience
• Adobe Flash Accessibility: Best Practices for Design
• Related categories: Usability and Web Development

About the Author

James Costa is the Creative Director at The Phuse. Based in Toronto, Canada, James has been designing and developing for the better part of 10 years and isn’t ready to stop yet. If you like his style, follow his company on Twitter, and read more of his stuff on their blog.

But, with a growing number of ways that users access the web, creating highly-accessible and universal designs that can be viewed in as many ways as possible is critical to the success of a website.

And here’s the good news: it isn’t as hard as you think.

Most web accessibility guidelines already go hand-in-hand with website development practices. In this article, we’ll explore 10 quick and easy ways to improve your site’s accessibility.

1. Use meaningful title attributes

Think of title attributes as short summaries that describe where the hyperlink will take the user who clicks on it.

It doesn’t help if the title attribute is the same as the link text, such as in the following example:

<a href="portfolio.html" title="Portfolio">Portfolio</a>

Why is that? Because for screen reader users, it’s redundant and gives them no added value.

In the above example, even though web accessibility and Section 508 validators won’t let you pass their automated tests without it, it’s actually better to leave out the title attribute.

A better title attribute to the example above is:

<a href=" portfolio.html" title="Some artwork of the artist">Portfolio</a>

2. Place important interactive elements higher up the web page

Here’s a simple web accessibility exercise for you: identify important hyperlinks and user interface controls that your users need access in one of your web pages. Then count how many times you have to press the Tab key to get to it.

Did you get to it fast enough? Or did you have to press the Tab key like crazy? Were you able to see which hyperlink of interface control was currently focused on when you pressed the Tab key?

Now imagine yourself in the situation where you can’t use a conventional point-to-interact device like a mouse; a situation where, in order to get to a desired interactive element, you have to traverse the ones the come before it on the web page. This gives you a partial picture how people who have limited or no hand functions interface with a web page.

Easy enough: place important links and other interactive elements higher up your web pages. It’s good practice anyways since most website users, regardless of physical or mental ability, expect important items closer to the top of a web page.

3. Don’t begin title attributes with the same text

You’ll often see hyperlink elements with title attributes that look like this:

<a href="/" title="Link to home">Home</a>
<a href="/products" title="Link to products">Products</a>
<a href="/contact" title="Link to contact">Contact</a>

This can be a result of default content management system configurations, or someone who did not want to take too much time with title attributes.

Users who use screen readers such as JAWS often rely on title attributes to find web links on a page. JAWS, for instance, has a feature for pulling together a list of links on a web page sorted in alphabetical order. If title attributes begin with the same text, it’s harder to use search functions that are built into screen readers.

4. Use headings correctly

Heading tags allow screen reader users to jump to the sections they’re interested in. Headings on a web page is an outline of the web page; using an <h2> right after an <h1> element denotes a section that is a subsection of the preceding <h1>.

Many of us neglect headings, including me. In every single instance where I’ve misused heading elements, I couldn’t find a reasonable explanation for doing so – and neither will you.

This simple web accessibility guideline can do wonders for people with vision deficiencies that use screen-reading technology.

Breaking up a long web page into logical subsections with headings makes it easier to get to your location of interest. Imagine that while reading the first paragraph of an article, that you immediately wanted to leave a comment, and the comment form is located somewhere at the bottom of a web page. For sighted users, this would be a snap: you just need to scroll down and visually locate the web form.

But on content-heavy sites such as the one you’re viewing now, the comment form is actually somewhere in the middle of the HTML structure even though visually, it’s right at the bottom of the web page. Without section headings that indicate where the web form begins, screen reader users would have to wade through a lot of content in order to get to the form. On Six Revisions, the level 3 heading "Leave a Comment" will allow screen reader users to quickly jump to it.

5. Use distinct and meaningful page titles

The first thing a screen reader user will encounter right after the web page fully loads is the text in between your <title> tags. The worst thing you can do, aside from not having the <title> tag, is having them all the same in all of your web pages. This makes it difficult for users who rely on your HTML markup to determine what page they’re on, or if the link they clicked on is the same web page they were previously on or not.

If your page titles are the same, or if you don’t have page titles, screen reader users will always have to read the content before determining that they’re on web page they want to be on. Keep page titles succinct and meaningful.

Good page titles to use that include repeating text are:

<head>
  <title>About Us - Six Revisions</title>
</head>

<head>
  <title>All Articles: Six Revisions</title>
</head>

<head>
  <title>Six Revisions: Home</title>
</head>

6. Use skip navigation

Screen reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in.

Skip navigation allows screen reader users and persons who can’t use a mouse to skip long lists of links, such as the primary navigation on a website.

Skip navigation is simply a link right at the top of your web page that, when clicked, positions you to the content section. You can hide this link from able-bodied users by moving the link outside of the browser viewport using CSS.

Here’s an example: let’s say that you have the HTML structure below and you want to have a skip nav that positions the reader on the main content area (div#content).

<ul id="nav">
  <li><a href="home.html" title="">Home</a></li>
  <li><a href="about.html" title="">About</a></li>
  <li><a href="blog.html" title="">Blog</a></li>
  <li><a href="portfolio.html" title="">Portfolio</a></li>
  <li><a href="contact.html" title="">Contact</a></li>
</ul>
<div id="leftCol">
  <h1>My friends</h1>
  <ul>
    <li><a href="http://blogofafriend.com/" title="">Blog of a friend</a></li>
    <li><a href="ttp://friendofablog.com/" title="">Friend of a blog</a></li>
  </ul>
</div>
<div id="#content">
  <h1>Page  Title</h1>
  ...
</div>

You would place your skip navigation link right above your unordered list, like so:

<a id="skipnav" href="#content" title="Jump to content">Skip Navigation</a>
<ul id="nav">
  <li><a href="home.html" title="">Home</a></li>
  <li><a href="about.html" title="">About</a></li>
  <li><a href="blog.html" title="">Blog</a></li>
  <li><a href="portfolio.html" title="">Portfolio</a></li>
  <li><a href="contact.html" title="">Contact</a></li>
</ul>
<div id="leftCol">
  <h1>My friends</h1>
  <ul>
    <li><a href="http://blogofafriend.com/" title="">Blog of a friend</a></li>
    <li><a href="ttp://friendofablog.com/" title="">Friend of a blog</a></li>
  </ul>
</div>
<div id="#content">
  <h1>Page  Title</h1>
  ...
</div>

Some sites decide to keep the skip navigation link visible, but if you’d rather hide it from sighted users, you can use CSS to indent the link outside of the web browser viewport:

#skipnav {
  position:absolute;
  top:-10000px;
}

The downside of the above technique is that, although it will work for screen reader users, it won’t help users who can’t use a mouse since they won’t be able to use the Tab key to navigate to the skip navigation link. An improvement to the method above can be found on WebAIM: Links that become visible with keyboard focus.

Skip navigation is easy to implement, but very useful to have in web pages with a lot of content above the primary content area.

WebAIM has a very thorough discussion of skip navigation that includes several techniques (and their pro’s and con’s) that you should read.

7. Label your form elements

HTML web forms are the primary way of interacting with a website. Because of the importance of web forms, making sure that you use correct markup is crucial for universal design.

Label your input elements with meaningful and descriptive text. This makes it clear to the user what information they should be providing.

<label for="searchbox">Enter key words to search:</label><input id="searchbox" name="searchbox" type="text"  />

With CSS, you can style that label element into an icon or hide it from plain view by pushing it out of the browser viewport, if you really must.

8. Test your web pages with CSS and JavaScript disabled

One of the simplest ways to determine how access-friendly a website is to users that can’t see content in a computer monitor, is to turn off CSS and JavaScript. Why?

With CSS, we can position elements wherever we want, regardless of where they are in the actual document object model.

With JavaScript, we can manipulate page elements by hiding, removing, and showing them, based on a user’s action.

Disabling these two web technologies allows you to see whether or not all of your web page content is accessible. It also shows you whether your web pages are organized in an optimum manner.

9. "See" what it’s like to use assistive technologies

Perhaps the best way to fully understand universal design on the web is to see an actual person use a website with assistive technologies. If you don’t know of a person with a form of disability that affects their ability to use the web, there are many simulators online that will help you at least get a partial picture of how assistive technologies render and interface with a website.

For screen reader simulations, try out WebAnywhere, a web tool created through a collaboration between University of Michigan and University of Rochester. If you want to feel how it’s like to be blind and interacting with a website: memorize a few keyboard shortcut keys the WebAnywhere uses. Navigate to your site using WebAnywhere. Turn off your monitor and unplug your mouse. Finally, try to read and interact with the web page you’re on.

To see if the colors you’ve chosen are universally accessible to individuals with vision impairments, check out the list of tools for evaluating colors I’ve put together a while back.

Additionally, there are many tools out there that will help you validate your work against common web accessibility standards and guidelines. There are many of them, and most of the good ones are free. See the article: 10 Tools for Evaluating Web Design Accessibility.

10. Web accessibility is not about degrading the overall user experience

The final tip I’d like to share is more of a philosophical viewpoint to designing with web accessibility in mind.

Many of us think that reaching a high level of web accessibility means that it’s at the cost of the general/average user experience. It’s not. It’s about offering multiple access points with varying levels of complexity.

I learned this lesson while looking at all-inclusive playground equipment.

I noticed that it’s not about lowering the difficulty of obstacles in a playground equipment (such as the one featured below), but that it’s about giving several point of access with varying levels of difficulty.

Study the Jungle Jim below that provides its users several points of access.

Photo from APE

There are several potential points of access to the play equipment. Able-bodied children who want a higher level of challenge can use the more difficult routes, while children with mobility impairments can use the access route.

What’s the implication of this concept to web design?

It means that it’s not about not using Flash content because of it’s notoriety for being inaccessible, it’s about making sure that users that have difficulty interacting with Flash content have an alternative way of getting the same information.

It’s not about not using Ajax because screen readers can’t parse asynchronous DOM manipulation by client-side scripts (e.g. content changes without a page reload), it’s about providing an explanation to the user that the page will update upon performing a certain action and they may not see it, or offering an alternative experience for them (just like the Jungle Jim).

Keeping in mind these tips will ensure at least partial access to your websites and webapps. If there’s one thing you should take away from reading this, it’s that web accessibility isn’t that hard to integrate with your processes, and most, if not all of these tips, should already be a part of your web design and web development best practices.

Recommended Reading

There are many methods involved in making websites universally-accessible, with varying levels of difficulty for integration. I’ve just touched on a few of them. Even if you take just a few hours of your time today to read the following resources, I promise you that you’ll learn a lot about web accessibility.

Introduction to Web Accessibility

The W3C Web Accessibility Initiative group has an introductory level document for those who want to learn about web accessibility, but don’t know where to start.

WebAIM

WebAIM (Web Accessibility In Mind) promotes universal design on the web and has plenty of articles on web accessibility; just studying the site’s design and HTML/CSS source code can give you an idea of what a web accessible site is.

Dive Into Accessibility

This online book was designed as a 30-day course that educates its readers about one accessibility technique per day, but you can read it all in one sitting, and an average reader can probably get through it in about a few hours.

How People with Disabilities Use the Web

A document on W3C that gives readers an overview of how persons with handicaps use the web.

Related Content

• Adobe Flash Accessibility: Best Practices for Design
• 10 Tools for Evaluating Web Design Accessibility
• 14 Brilliant Tools for Evaluating Your Design’s Colors
• Related categories: Usability/Accessibility and User Interface

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

If we could tear into the fabric of time and look a decade into the future, what kind of experience might we find? It’s easy to imagine the technology would be much more advanced. Something out of a film like Minority Report with holographic touchscreens, or so advanced of an A.I. (artificial intelligence) that the application anticipates solutions without the user having to do much else.

In reality the kinds of products, websites, and applications that survive and continue to be effective are those that that focus on the user experience. The digital world evolves continually, but we need to manage this by making sure we don’t leave the people who use our applications and websites in the dust. In this article we will explore creating a timeless user experience.

Want vs. Need

I can’t count how many times a client has asked for something in the craziest timeline, smallest budget and at the best quality humanly possible. Clients today want it bigger, (or for a device… smaller), faster, innovative, sexy. They look at the competition and say "I want that." Everyone wants to tap into social media. They want an iPhone application, or to do something in Augmented Reality because they just read an article about it. At no point do throwing any of these items into the mix add up to better experiences.

Even something as simple as a redesign of a website "for a refresh" does not get you a good experience. Building experiences with buzzwords and features are a drug, and if Web and UX professionals don’t have a client intervention soon, more useless websites and products are going to crowd out what few good experiences there are. All projects should begin with this question: Do you know what the problem is, and does this (product, website, application) solve that problem for the people that will use it?

Attention! It’s a Limited Resource

Keeping our attention is harder due to the sheer amount of information, products, and applications being put in front of us daily. Choice is taken for granted, where quality is something that is rare to find. Remember when just having an iPhone app was enough to get attention? Now the Apple Store touts thousands of applications.

The applications for the iPhone that are now finding success are those that have focused on the experience and the people using them. It proves that first out of the gates without considering the user experience could mean first to fail or fade away into obscurity.

As time moves on the technology becomes enough for users and saturated with competitive products. The experience becomes the differentiator and continues to add value. Image source: The life cycle of a technology by Nielsen Norman Group

So, what qualities make a great experience? I think a carousel ride can show us.

The Carousel Experience

A recent trip to the local mall with my son sparked my idea on "timeless user experience". He was very excited to put his dollar in and get a token for the ride and he really enjoyed it. I started thinking about carousels and how long they have been around. The experience that kids then had, are the same as kids today. This old piece of technology, in comparison to other options for entertainment available today, is very limited in functionality and features. Yet it still delivers a great experience.

Carousels (term for "horse ballet") have been around in the form we know them since the mid-16th century. Image source: Carousel on Wikipedia

How we can we apply this "Carousel Experience" to creating a product or web application? For one, it is an experience that places the enjoyment and desire for that experience first. The technology or delivery of the experience is not as important as the experience in itself. There is no question how it works (familiar). Finally it is focused and meets the user’s (in this case, children’s) needs. It doesn’t make candy or have embedded touchscreens. It simply does the same thing it’s done for hundreds of years.

Anatomy of a Timeless Experience

Experiences that are timeless stand apart from the rest. Most companies can create a solid Web application or product and make them usuable.  There are few that can move past that. You can breakdown the qualities of a timeless experience into three main areas:

Desirable

Simply making something usable is not enough. Something that does it a little better always comes along. Necessity is also somewhat based on context (I could argue anything beyond food, water, and shelter is an extra). An experience that creates the desire to use it because it’s fun, simple, or creates an emotional connection is priceless. If the basic product or service experience is not desirable you can’t add much to can change that.

Familiar

Striking a balance between the "familiar vs. fresh" as Jakob Nielsen puts it is important. As a Web or UX professional working closely your products, websites, or applications causes you to focus on the most detailed elements, which is not how the user approaches it. The typical person interfaces with your website or product much much less and is looking to accomplish a task. They search for those familiar features to get it done and get on with their daily life.

Focused

Creating a goal-driven statement of what a product or application does results in better product experiences. It meets expectations because it is focused on solving the problem it was created to address. There is power in doing one thing and it doing it very well. So many products and services try to do everything. Compare the Twitter experience to Facebook and it’s easy to see the difference. Twitter is clear on what it does, Facebook is cluttered and can’t seem to make up its mind on what it wants to be.

Two Timeless Tales

Sometimes a few brilliant products are able to squeeze out and prove that a timeless UX works best. The Flip and Mint.com are examples of successful experience-driven products.

Flip: Limited features. Unlimited experiences.

The Background: In comparison to other big name video cameras from companies like Sony, the feature set for the Flip seems to fall flat. To name just a few features: A tiny screen (1.5 inches), no tapes or discs, no menus or settings. Even the zoom is nearly worthless.

The Experience: The Flip beats the competition where it counts: It simply shoots videos. There are no mistakes to be made, the interface is a record on or off button. It’s compact and easy to take everywhere. Plug it in and download to your computer (USB). There’s even software ready to go for easy editing or sharing on YouTube.

How it’s timeless: Doing more sometimes means less to people using your product if it doesn’t meet their needs. By creating a very focused set of features that it does very well, and making it a very easy and fun experience the Flip has taken 20% of the market share. I like to think that a timeless UX took 20% of the market share.

Mint: More money. Less problems.

The Background: Mint came into the financial software market as an unknown startup, which is a very large hurdle when you are asking people to trust you with the security of not just their financial information, but every bank and credit card password. More established players like Intuit and most banks and credit card companies have been creating financial software and online experiences for years.

The Experience: Mint has been able to find success by redefining money management. Through a few clicks, Mint brings together all accounts into one place giving people a encompassing view of their finances. There’s a slick interface to manage budgets, and important updates are delivered to email or devices.

How it’s timeless: Taking an innovative approach and simplifying the experience of managing money and making it enjoyable has paid off for Mint, literally. As Peter Merholz from Adaptive Path put it: "Mint.com has 35 employees. Sold for $170MM. That’s $5MM per. That’s the value of UX."

Keep Fighting the Good (Experience) Fight

Web and UX professionals battle everyday for the qualities that make up the timeless experience. Unfortunately concerns like: being first to market, shareholder expectations (profits), trying to one up the competition, and many other factors result in complex, and run-of-the-mill experiences.

Websites and applications with a timeless experience are just that, timeless. They will continue to win the hearts and minds of the people who use them.

How do you create timeless user experiences? What are some important things to keep in mind when designing an effective user experience? Join the discussion in the comments.

Related Content

• Adobe Flash Accessibility: Best Practices for Design
• 20 Websites to Help You Master User Interface Design
• 10 Features That Will Make Twitter Better
• Related categories: User Interface and Usability/Accessibility

About the Author

Francisco Inchauste is a web and interaction designer whose work you can find over at his online presence – Finch. By day, he works as a UX specialist for Universal Mind. He’s written for various design weblogs such as Smashing Magazine. Connect with him on Twitter.

Norman Nielsen once said that "About 99% of the time, the presence of Flash on a website constitutes a usability disease."^[1] However, this statement was made in 2000 when Flash lacked many of the accessibility functions that are available today. In 2002, the Flash Player began support for Microsoft Active Accessibility (a bridge between the Flash Player and screen access technologies) and eventually Freedom Scientific released a version of the JAWS screen reader which could access Flash material.^[2] This was just the beginning and eventually Adobe created a version of the Flash application that enables developers to control the accessibility as an application is designed.

Targeting accessibility is the most important step to overcoming Nielsen’s stigma on Flash use in the web. Since "designing accessible content requires designers and developers to pay attention to the user experience"^[3], we can anticipate that making accessibility a priority will prove to be a catalyst for a complete user-centered design process. A usable and relevant Flash product will be produced; a cure to the usability disease.

It takes a thoughtful, user-centered designer to consider all abilities and disabilities of people who will interact with an interface. While there is yet to be a universally accepted categorization of disabilities, the World Wide Web Consortium (W3C) provides a general list of common disabilities encountered on the web as a good place to start^[4]:

Visual

• blindness
• low vision
• color blindness

Hearing

• deafness
• hard of hearing

Physical / Motor

Speech

Cognitive / Neurological

• dyslexia and dyscalculia
• attention deficit disorder
• intellectual disabilities
• memory impairment
• mental health disabilities
• seizure disorders

Multiple Disabilities

Aging-related conditions

Best Practices

In many ways, designing an accessible Flash product will overlap with the steps taken to design an accessible non-flash web site. The first step in addressing Nielsen’s issues with Flash, is to understand web content accessibility guidelines or principles. One can locate predefined guidelines from the W3C – however, it is important to note that there are other resources that some may consider to be superior.

The W3C break down 12 guidelines into four groups: Perceivable, Operable, Understandable and Robust. We’ll briefly look at these guidelines in the four groups from a Flash perspective^[5]: 

Perceivable

"Provide text alternatives for non-text content."

"Provide captions and alternatives for audio and video content."

"Make content adaptable; and make it available to assistive technologies."

"Use sufficient contrast to make things easy to see and hear." 

Since Flash encourages heavy use of graphic/non-text content, this has been a major issue in its accessibility to screen readers.

There are three ways that Flash designers can deal with this issue:  

• Make the Flash content self-voicing, eliminating the need for the screen reader.
• Provide an accessible alternative to the Flash content. (e.g. HTML)
• Make the Flash content natively accessible to the screen reader.

Flash player 10 exposes all text elements to screen readers by default, and making Flash non-text elements natively accessible to the screen reader is now easier since adding text equivalents has been introduced to the Flash authoring application with the "Accessibility Panel".

Adobe Flash CS4 Accessibility Panel: adding a text equivalent to a graphic or movie clip. 

Operable

"Make all functionality keyboard accessible."

By default, Adobe Flash now makes mouse-defined events accessible via the keyboard. However, there are a couple techniques used by Flash designers when programming that must be avoided to facilitate the keyboard accessibility. This can be explored on the Adobe Flash Accessibility website.

Additionally, keyboard shortcuts or "hotkeys" should be created for the most frequently used actions within more complicated applications. This involves simply creating key "listeners" that respond by calling a function when certain combinations are typed by the user. While this is nothing new, again it takes a thoughtful designer to recognize the need for hotkeys and working this into the application.

"Give users enough time to read and use content."

"Help users navigate and find content."

"Do not use content that causes seizures."

Nielsen points out that animation can easily be abused and non-standard GUI controls are a threat. This has the potential to aggravate users who suffer from seizures and cognitive disabilities. It’s important as a best practice to have animations settle to a static state on the screen once the page loads. This will reduce distractions for users with or without learning disabilities in addition to removing repetitive motion that could possibly induce seizures.

Understandable

"Make text readable and understandable."

Similar to HTML, Flash designers must provide ways to increase and decrease text size for users with different vision abilities. Zoom and pan functionality is very easy to implement with software libraries like TweenLite.^[6]

"Make content appear and operate in predictable ways."

"Help users avoid and correct mistakes."

A feature of Flash that can also be an issue in regards to accessibility is the dynamic properties of an ever changing Flash movie or application. When the content in Flash changes, the Flash player sends a notification to the screen reader and the screen reader will start over at the top of a page, regardless of where it left off. In an effort to help reduce potential misinterpretations by the screen reader and user, Adobe has worked to create a "Halt Flash Events" hotkey (Alt + Shift + M) for the Window-Eyes screen reader. This toggle will suspend all animations in order for the reader to complete the page. 

Robust

"Maximize compatibility with current and future technologies."

With the number of mobile phone internet users rapidly growing, it’s crucial to address the mobile aspect of Flash accessibility. This is something that is fairly new and dynamic as Flash support for mobile phones is gaining momentum. However, just as a few years ago it was important to address users still on dial-up connections, there is now a very similar group of users on mobile devices that do not support Flash and may not have 3G connectivity. This means there are still a large number of mobile users who will be concerned with data heavy web pages that take too long to load and run up their bill.

"Mobile users often pay for bandwidth, so offering them content that is extraneous to their needs, especially advertising, costs them time and money and contributes to an unsatisfactory experience. In general, the user’s consent should be sought before initiating the download of content".^[7]

An additional thought is to check if the project or client you are working on/with has pre-defined best practices for Flash and/or minimum requirements for Flash player. This information is valuable and will save time if it is located early on. While it is important to design for future technologies, it is also important to make sure the Flash product behaves correctly in older versions that may be more prominently used in one’s target environment.

Summing up

In summary, Flash has come a long way in the past decade and it is just as prominent as ever, "… used by over 2 million professionals and reaching 99.0% of Internet-enabled desktops in mature markets as well as a wide range of devices."^[8] As more businesses move toward web-based applications, Flash becomes an attractive asset that can add value when kept relevant and designed for every potential user.

Adobe Flash Player use statistics.

References

• [1] Flash: 99% Bad. Nielsen (2000).
• [2] Flash and Accessibility. Hudson (2003).
• [3] Adobe Flash Accessibility.
• [4] How people with disabilities use the web.
• [5] Web Accessibility: WCAG 2.0 at a Glance.
• [6] TweenLite.
• [7] Mobile Web Best Practices 1.0.
• [8] Flash player use statistics.

Related Content

• Create a Slick and Accessible Slideshow Using jQuery
• 14 Brilliant Tools for Evaluating Your Design’s Colors
• 10 Tools for Evaluating Web Design Accessibility
• Related categories: Usability/Accessibility and User Interface

Erik Johnson is a User Experience and Interaction Designer. He is the co-founder of Skaan Design, a company focused on web development and design services. You can also check out his portfolio site. Erik also creates videos, and you can find his shenanigans on YouTube under the moniker, heyerok. You can Follow him on Twitter: @heyerok.

In this article, you’ll read about excellent free tools for checking to see if the colors you are using are consistent with standard color contrast, brightness, readability, and accessibility best practices.

1. Check My Colours

Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press "Check!", and it outputs a nice tabular report for all elements.

2. Color Oracle

Color Oracle is a desktop tool available for Mac, Windows, and Linux operating systems: it simulates color vision deficiencies. The creators of the tool also have a Design Tips section on their site that shares a couple of useful whitepapers on color accessibility. Note that Windows and Linux users require Java 6.

3. Colour Contrast Visualiser

This tool is an Adobe AIR desktop application for visualizing appropriate color combinations. It’s a wonderful tool for picking your website color palette. If you’re concerned about web accessibility, it’d be a good idea to have this tool around during the design phase of your projects.

4. Accessibility Color Wheel

This tool is a convenient way to experiment with various color combinations: it helps you rapidly envisage what color schemes look like. To test and tweak color choices, simply move your mouse around the color wheel and evaluate for readability. At the bottom of the tool’s web page, you’ll see simulations for particular forms of color blindness.

5. GrayBit

One way to check if a design has sufficient color contrast is by converting it to grayscale and seeing which parts are hard to read. Use GrayBit to convert a web page to grayscale; it will even convert web images on that page. It’s a great tool for visualizing a web design’s color contrast and readability.

6. Vischeck

Vischeck simulates what things look like to people who are colorblind. It has several options for usage: you can run it on a web page, upload an image file (like a design mockup), or download a Photoshop plugin for local testing. Vischeck’s example page clearly explains how the tool works with demonstrations to highlight what it evaluates.

7. Luminosity Contrast Ratio Analyser

This desktop-based tool by the Web Accessibility Tools Consortium (WAT-C) is intended for checking color combinations to determine if they provide satisfactory color visibility. This app requires the Windows operating system and it has only been tested on 2000 and XP.

8. Sim Daltonism

Sim Daltonism is a vision deficiency simulator for the Mac OS X. The tool allows you to simulate one of the eight supported color blindness conditions such as Monochromacy and Protanopia (a dichromat condition). Please note that Sim Daltonism requires Mac OS X 10.2.8 (or later versions).

9. Colour Contrast Analyser

This Firefox add-on developed by Juicy Studio allows you to conveniently examine colors of text DOM nodes on web pages. It’s a nifty tool to add to your development workflow as you test your work. It’s also great for checking out the color contrast of other websites.

10. Color Laboratory

This uncomplicated web tool allows you to discover color combinations and how they might look like to a person with color blindness. Color Laboratory is very easy to utilize and only requires three basic steps, all of which are outlined in their quick start guide.

11. AccessColor

AccessColor is a web tool that checks the color contrast and color brightness of foreground text to background color. You simply place your web page’s web address into it, select whether you want to see only errors or a full report, press “Check!” and it outputs a nice table of the results.

12. Colour Contrast Analyser

This desktop application (for Windows XP and Vista) is designed for examining your foreground and background color combos for color contrast and brightness. There’s a user guide on the site to help you get started with it quickly, as well as downloads available in several languages.

13. Color contrast verification tool

Hewlett-Packard has a simple web tool on their site for evaluating the color contrast characteristics of two colors. You use the RGB value of your colors as inputs, and it outputs the brightness and color difference of your values are, as well as whether the combination is conformant with W3C/WCAG recommendations.

14. Luminosity Colour Contrast Ratio Analyser

Juicy Studio has a nifty web tool for analyzing background and foreground color contrast ratio. All you need to do is key in your background and foreground color values in hexadecimal units (for example, a white background is #ffffff) and it will subsequently tell you whether the combination passes WCAG 2.0 contrast recommendations.

What’s your favorite color-checking tool?

Is your preferred tool not shown above? If not, don’t forget to share it with us in the comments and tell us what your experiences are with it. And if you use any of the tools above, we’d also love to learn about your experiences with it!

Related content

• 10 Tools for Evaluating Web Design Accessibility
• 10 Promising Free Web Analytics Tools
• 12 Excellent Free Tools for Monitoring Your Site’s Uptime
• Related categories: Usability/Accessibility and Tools

We go off the trodden path and explore a few lesser-known Web analytics options. In this article, you’ll find 10 excellent and free tools and applications to help you gather and analyze data about your web content.

1. Piwik

Go to Live Demonstration of Piwik.

Piwik is an open-source Web analytics application developed using PHP and MySQL. It has a "plugins" system that allows for utmost extensibility and customization. Install only the plugins you need or go overboard and install them all – the choice is up to you. The plugins system, as you can imagine, also opens up possibilities for you to create your own custom extensions. This thing’s lightweight – the download’s only 1.9MB.

2. FireStats

Go to Live Demonstration of FireStats.

FireStats is a simple and straight-forward Web analytics application written in PHP/MySQL. It supports numerous platforms and set-ups including C# sites, Django sites, Drupal, Joomla!, WordPress, and several others. Are you a resourceful developer who needs moar cowbell? FireStats has an excellent API that will assist you in creating your own custom apps or publishing platform components (imagine: displaying the top 10 most downloaded files in your WordPress site) based on your FireStats data.

3. Snoop

Snoop is a desktop-based application that runs on the Mac OS X and Windows XP/Vista platforms. It sits nicely on your system status bar/system tray, notifying you with audible sounds whenever something happens. Another outstanding Snoop feature is the Name Tags option which allows you to "tag" visitors for easier identification. So when Joe over at the accounting department visits your site, you’ll instantly know.

4. Yahoo! Web Analytics

Yahoo! Web analytics is Yahoo!’s alternative to the dominant Google Analytics. It’s an enterprise-level, robust web-based third-party solution which makes accessing data easy especially for multiple-user groups. It’s got all the things you’d expect from a comprehensive Web analytics tool such as pretty graphs, custom-designed (and printable) reports, and real-time data tracking.

5. BBClone

Go to Live Demonstration of BBClone.

If you’re looking for a simple, server-side web application that doesn’t rely on third-party services to monitor your data, check out BBClone – a PHP-based server application that gives you a detailed overview of website traffic and visitor data. It supports language localization for 32 languages like English, Chinese, German, and Japanese. It easily integrates with popular publishing platforms like Drupal, WordPress, and Textpattern. Since it’s logfile-based, it doesn’t require you to use a server-side relational database.

6. Woopra

Woopra is a Web analytics application written in Java. It’s split into two parts which includes a desktop application for data analysis/exploration and a web service to monitor website statistics. Woopra has a robust user interface, an intuitive management system that allows you to run it on multiple sites and domains, and even a chat feature so that you can gather non-numerical information by talking to your site users. Woopra is currently in beta and requires you to request for a private beta registration.

7. JAWStats

JAWStats is a server-based Web analytics application that runs with the popular AWStats (in fact, if you’re on a shared hosting plan – AWStats is probably already installed). JAWStats does two things to extend AWStats – it improves performance by reducing server resource usage and improves the user interface a little bit. With that said, you can’t go wrong with just using AWStats either if you’re happy with it.

8. 4Q

A large part of Web analytics deals with number-crunching and numerical data. Raw numbers tells only part of the story and it’s often helpful to perform analytics by way of interacting with actual users. 4Q developer Avinash Kaushik puts it perfectly when he said: "Web analytics is good at the ‘What’. It is not good at the ‘Why’".4Q is a simple surveying application focused on improving your traditional numerical Web analytics by supplementing it with actual user feedback. Check out this YouTube video on how easy it is to set up 4Q.

9. MochiBot

MochiBot is a free Web analytics/tracking tool especially designed for Flash assets. With MochiBot, you can see who’s sharing your Flash content, how many times people view your content, as well as helping you track where your Flash content is to prevent piracy and content theft. Installing MochiBot is a breeze; you simply copy a few lines of ActionScript code in the .FLA files you want to monitor.

10. Grape Web Statistics

Go to Live Demonstration of Grape Web Statistics.

Grape Web Statistics is a simple, open-source application geared towards web developers. It has a clean and usable interface and has an Extensions API to extend and customize your installation. It uses PHP for the backend and you can run it on any operating system that runs PHP.

Let’s talk about it.

What Web analytics software do you use, and why? Do you have any extensive experience in using any of the above application? Share it with all of us in the comments!

Further reading

• Read the definition of Web analytics according to Wikipedia.
• Interested in the topic of Web analytics? Check out The Web Analytics Association.
• Learn more about the launch of Woopra from this Mashable post which includes a video interview.
• Read more about Piwik from this Read Write Web article.

Related content

• 7 Incredibly Useful Tools for Evaluating a Web Design
• 15 Tools for Monitoring a Website’s Popularity
• Graphing/Charting Data on Web Pages: JavaScript Solutions
• 10 Tools for Evaluating Web Design Accessibility
• 6 Tools to Help You Analyze a Web Host