Web Teacher » usability

How To Test Your Site’s Usability Without Breaking The Bank

vdebolt — Thu, 29 Dec 2011 14:28:37 +0000

When you are creating a new site, one of your first steps is to create an interface that is both presentable and useable. But testing for usability takes time and – frankly – money. Which isn’t easy to come by when you are first starting up a website, especially if your company deals largely in ecommerce, and so you need the initial funds to move forward.

Your budget is important, and so you might think you have to skimp on the frills, like useability testing. What you might not know is that if you don’t make that a priority, you can lose business or visitors. In the end, your bottom line will change and you won’t meet your goals. That is the exact opposite of what you want to be doing, and saving a few bucks will ruin your chances.

Luckily, there are things you can do that give you great useability testing on a budget. There are low cost methods and even tools that you can utilize to make the most out of what you have, without sacrificing the look of your site.

The Methods

Cut out the basics before you begin testing. This means anything that you can find just by doing a bit of manual legwork through the site, or even just visual misses you catch as you are browsing. If you can catch it before the tests, you can fix it without needing to spend any money to do it. You would be amazed by how much cash is wasted by not catching the little, easily addressed problems in the beginning.
Hire a freelance designer or professional trained in website useability to go through the tests. A few things to remember here: first, they should not be with your firm, or have any preconceived notions of the website design. Second, they should be able to prove they are experienced in catching small, hard to see problems with useability.
Go for the real bare bones. A pad, a paper and someone at the computer looking at your site. What does this equal to? Useability testing. It might be at the most basic level, and it could be compromised by human error, but it does count. If you are really strapped, this might be the way to go.
Know how many to test. A lot of companies make the mistake of over testing their website. This is very easy to do, because they think the more users being tested, the more accurate the results. It is true that having 15 or 16 users tested will give you a very accurate result. But using just 5 gives you a result in the 85 percentile, and adding a few more bumps up your accuracy significantly.

The Tools

UserTesting – This is a fast, traditional and affordable useability testing service that hires visitors on your behalf to take a look at your site. They then give you both a video of their browsing with their spoken thoughts, and a fully written report on any errors or problems they encountered, as well as their view on the interface. The cost is $39 per user, making it a fairly cheap option. They are used by many major franchises, such as Cisco, CNN, Fox and more.
Userfly – Userfly uses video captures and an installed software with a single coding line to gather your data for you. They have a demo you can use for free, which guives you 10 captures a month, unlimited domains and 30 days of recording storage. Their other services range from $10 to $200 per month, with varying levels all the way up to Enterprise. Signing up is simple, as is running their service.
Feedback Army – This service is a little bit different. It works by taking questions from you about the site. Then, they set out their little soldiers to test it out and answer it. They are fast, thorough and well trained. Ten questions costs $20, which is a very cheap way to figure out what needs to be fixed. But because they are just answering your questions, you have to make sure to have them drafted properly so you can catch all eventualities and potential problems.
Google Web Optimizer – King of all things Internet, Google is an obvious place to find help in this way. Their optimization tool gives you full access to their site useability testing, but you have to have a Google account to run it. This probably isn’t a problem…who doesn’t have Gmail or something similar now days?

Conclusion

Useability testing doesn’t have to be costly. It just takes a little bit of fancy footwork, some plans for cheap alternatives and tools to get you along.

What are some your ideas for eliminating the cost of useability testing?

Guest Author Jessy is a social media geek and marketing blogger for Broadband Plan Finder, the free web-based insurance comparison app.

Review: Designing for Emotion

vdebolt — Mon, 31 Oct 2011 12:36:17 +0000

Designing for Emotion, written by Aarron Walter, is another of the brief but valuable books from A Book Apart. If you’ve read other books from A Book Apart you know they are high quality work from knowledgeable writers. This one is no exception.

With only 7 chapters and less than 100 pages to tell his tale, writer Aarron Walter gets right to it in a hurry. He explains what emotional design is and how it uses personality, humor, and positive experiences to meet human needs on web sites. Walter infuses the book with personality, humor and positive experiences, too, making it a delight to read. For example,

There’s a very practical reason that emotion and memory are so closely coupled—it keeps us alive. We would be doomed to repeat negative experiences and wouldn’t be able to consciously repeat positive experiences if we had no memory of them. Imagine eating a delicious four-pound log of bacon and not having the sense to eat another the following day. That’s a life not worth living, my friend.

That wasn’t the only remark in the book that made me smile. Walter does practice what he preaches.

He gives examples for each point he makes, giving the reader some real world examples to examine. In the chapter explaining what emotion design is, he points to Wufoo and Betabrand.

In the chapter on designing for humans, he talks about psychological principles that guide the emotional language and imagery web designers might employ. For example, “baby-face-bias”. Baby-face-bias triggers positive emotions with characters with large eyes, small nose and a pronounced forehead. It’s behind the successful imagery used by Brizzly, Twitter, StickyBits, and Walter’s own work at MailChimp. This chapter also talks about the use of contrast and aesthetics.

There’s a chapter on personality. Creating a website with personality gives users a sense of human-to-human interaction. He talks about personas and provides a detailed downloadable worksheet to help you create a design persona for your website. Online examples include Carbonmade and Housing Works.

In the chapter on emotional engagement, Walter talks about surprise, delight, anticipation, and priming. Examples in this chapter include Photojojo and the New Twitter. He discusses the idea of variable rewards from sites like Groupon, but I think the uncertainty of what will come next from the new app Siri on the iPhone 4S—which came out after this book was written—is a terrific example of baked in emotional engagement, surprise, delight and anticipation.

The next chapter is overcoming obstacles. This chapter deals with convincing users to click, sign up, complete the process and keep coming back. He discusses game theory, bribery and a sense of achievement. Mint and Dropbox are the examples described.

In the chapter called Forgiveness, Walter talks about what to do when you screw up, and how to help people overlook your shortcomings. Flickr is the example he uses in this chapter.

The final chapter is about risks and rewards. It talks about the risks of getting started with emotional design, and the rewards. CoffeeCup Software is cited as an example of how to start small with a limited time idea to see if it works. He describes the risk of starting a new site with emotional design in mind from the beginning. Designers can alienate users instead of making them feel good about a site with emotional design. Walter discusses some of those risks. He borrows the phrase progressive enhancement for those who want to work some personality into existing websites. The online example cites Blue Sky Resumes.

Finally, there is a list of resources for those who want to dig into the concepts from this book in more detail. The resources are genrally books about design principles, science, psychology, behavior, the human brain and user experience, but there are some online resources, too.

Summary: Brief but packed with useful concepts and concrete examples.

A review by Virginia DeBolt of Designing for Emotion (rating: 5 stars)

Useful links: Low Vision, Usability isn’t Accessibility, Media Queries

vdebolt — Fri, 15 Jul 2011 14:03:46 +0000

Myths about Low Vision: Nose to the Page is an important post from Knowbility.

The Difference Between Web Site Usability and Accessibility. Succinct and useful.

Adaptive & Mobile Design with CSS3 Media Queries. Nice demo and downloadable example files. Speaking of media queries, here’s a very good tutorial by Steven Bradley: How to Use Media Queries for Device Targeting.

Useful links: Designing for Content, ARIA support, Google+

vdebolt — Mon, 11 Jul 2011 19:50:59 +0000

Don’t think I’ve linked to Web Standards Sherpa before – how remiss of me. But here’s a good post to remedy that oversight. Designing for Content: Creating a Message Hierarchy.

HTML5 Accessibility Chops: ARIA landmark support from the Paciello Group Blog show test results for landmark roles.

Are You Going To Adopt Google+ for Professional Learning/Networking? Why or Why Not? Beth is one of many reflecting on Google+, as I did here the other day, and on Twitter.

I’m edging close to 500 posts on BlogHer, and none have had traffic like http://bit.ly/iTQgy1. Which means Google+ will rule the world.Sun Jul 10 18:42:39 via Seesmic twhirlVirginia DeBolt
vdebolt

Useful Links: Handy, Google+, Captioning, usability tests, CSS3 Please

vdebolt — Fri, 01 Jul 2011 12:11:44 +0000

One Page Apps I Actually Use from CSS Tricks has several very helpful links for designers. You may want to keep them handy.

I haven’t received an invite to Google+ yet, but I’m looking at other people’s reports on it. It’s so similar to Facebook, even though people are comparing it with Google WAVE. If you move your life to Google+, are you quitting Facebook? More importantly, are people like me – who’s job partly entails promoting stuff by social media – now going to have to add Google+ to the mix? Like Facebook, is Google+ going to be one of those things you can’t avoid just because everyone else is using it?

How to Start Adding Captions/Subtitles to Online Video. Just one article from a captioning site by Bill Creswell that is full of captioning help.

Very interesting run through some usability tests on TED.com by IntuitionHQ. TED.com makes a pretty decent score at the end of it all.

CSS3 Please is a really nice tool to generate cross-browser CSS3 rules to copy into your own stylesheets.

Tell me again why Infographics are all the rage?

vdebolt — Tue, 11 Jan 2011 21:42:57 +0000

I kind of hate infographics. Seems like everybody who owns a copy of Photoshop thinks they should make one and tweet about it. I’ve looked at a lot of them lately. Is it a fad?

Of the ones I’ve seen, maybe 3 were effective and the rest were impossible. Translated, here’s what I mean by impossible:

they were too busy to view on a computer screen
the text was too small to read on a computer screen
there was too much text
it was too complicated to have any impact

A nice, clear paragraph would make more sense than some of the infographics I’ve seen.

Can you mention some good examples?

How good link text makes you a better blogger

vdebolt — Thu, 06 Jan 2011 13:14:44 +0000

I’m going to tell you a little story and then I’m going to give you a quiz.

A few days ago, I posted a guest article by Lior called Increase your SEO Knowledge in 2011: Must Read Blogs. Lior sent me the post pasted into an email. I use Microsoft Entourage (a Mac mail program that is part of Office) for my email. In Entourage, the links Lior sent all looked like this:

This was a guest post written by Lior who is a marketing advisor to iAdvize, a live chat support software <http://www.iadvize.com/> company.

I changed all the links when I was formatting the article for the blog post. I changed the links to the various blogs Lior recommended to h3 headings with links to the blogs. And I changed the last line of the article, with the guest author credit and link, to read:

This guest post was written by Lior who is a marketing advisor to iAdvize, a live chat support software company.

I didn’t give it much thought, I just made the site name the link as I had done with the blogs Lior recommended. Big oops.

Shortly after that, I heard from Lior, who didn’t like what I had done with the link in the author credit line. Then it got a little crazy, because every time Lior sent the “correction” to me, Entourage showed it exactly like the example above, with no clickable link text and a URL in brackets. Finally, Lior sent me a PNG, showing exactly how it should be.

How did Lior want it? Like this.

This was a guest post written by Lior who is a marketing advisor to iAdvize, a live chat support software company.

Okay, thanks to the PNG image, (with no help from Entourage) I finally got it.

The Quiz!

Now the quiz. Why was it so important to Lior to have live chat support software be the link and not the name iAdvize or not a URL in brackets with no link text?

I’m going to suggest three answers, any of which you may have thought of, and which may have been the reasoning behind Lior’s patient attempts to get me to do it a certain way.

Being an accessibility person, my first suggested answer is about accessibility. The link text live chat support software is the most descriptive about what to expect when the link is clicked. AT devices can be set to skip from link to link, reading only the link text until the user finds the link to click. Think about how much more information Lior’s choice of link text gives a user than either iAdvize or a URL to iadvize.com. A link like iAdvize could be to all sorts of advice sites from financial advice to party planning. The words Lior chose tell the user exactly where a click will take them.

As an accessibility aside, it’s not helpful when every link says click here. Nothing descriptive at all about that link text. In some situations, it can be a compelling call to action, but it needs a title attribute (plus alt text if it’s an image) that provide more descriptive information about the link destination.

Back to the quiz. Another possible answer involves search engine optimization. Search engines take a close look at link text. Good link text adds to your search engine ranking. It provides indexable information about where a link is going. That’s important to you in terms of links to posts on your own site. Links to your own internal pages or articles help the search engines find what’s on your site, and the text used for internal links makes a difference in how the information is understood.

Guest posters want credit, because it helps bring traffic and quality links to their own sites. Lior took time and effort to write the guest post and wanted to make it count with incoming link text that would improve search engine rank. Anyone needing chat support software will search on chat support software, and not on a word like iadvize. It can’t hurt to have incoming links with the words chat support software floating around the web when someone asks a search engine where to find chat support software.

Finally, there’s the usability answer. Good link text also improves usability. Clarity in link text removes confusion or ambiguity and makes the site more useful.

What else?

Was your quiz answer the same as any of mine? Or did you think of something else? How else could you answer my question?

Useful Links: unsticky, internet TV, #askaconductor, local storage, search operator

vdebolt — Mon, 06 Dec 2010 13:26:47 +0000

25 reasons why I’ll leave your site in 10 seconds. Great read for the newbie students who are trying too much too soon.

Warning to local TV: unbundled distribution is upon you is at Terry Heaton’s PoMo Blog. This seems like a huge trend to me. In fact, I’ll be posting my own article about trends in a day or two.

Examples of Abundance in the Arts: Ask a Conductor on Twitter at Beth’s Blog is another inspiring post about how you can use social media for good. What do you think about the idea of Ask a Web Designer? That seems a great idea, too.

Wrapping Things Nicely with HTML5 Local Storage is one of the December posts at 24 Ways. (If have missed the other posts this month, check them out, too) A great intro and explanation for local storage from Christian Heilmann.

An Undocumented Google Search Operator is a very helpful tip.

User-Friendly Website Navigation: How to Ensure Visitors Don’t Get Lost

vdebolt — Mon, 29 Nov 2010 12:25:32 +0000

Creating a well-organized, structured navigation system is essential for any website. Without an understandable, pragmatic system for instructing visitors what your website has to offer, and how they can reach it, your site is at a serious disadvantage.

Establishing a sensible navigational path is not difficult if you remember to pre-plan and take the necessary steps highlighted in this guide. Here are 8 essential principles you should take into consideration when designing a navigation system for your website:

1. Preparation

Navigation should be part of the website design process, not something added in after the main design has been completed. In order to provide an efficient and systematic navigation system, you must visualize how a visitor will access your website and move around all its various pages. Once you have constructed a user-friendly hierarchically linked navigational system, the next step is to consider the simplest way to explain your system to visitors.

2. Clarity and Brevity

Navigation should always be as simple as possible. The route to any point within your website should be as direct as you can make it. Many people still try to adhere to the old navigation guideline “No page should be more than 3-clicks away from the homepage”. While this guide has website navigation best interests at heart, it has become outdated. Websites are now far more complex and it is often necessary for visitors to use more than 3-clicks to reach their desired destination. There is no punishment for breaking the 3-click guide. But the aim of good navigation is to allow visitors to find what they are looking for in as few clicks as possible, without getting lost. Implementing a breadcrumb Trail system (covered in section 4) will help to address this problem.

The naming of navigational links should also be kept clear and concise. There is no need for ‘Homepage’ or ‘Main Page’ when a simple ‘Home’ will suffice.

3. Simplicity

It may be tempting to use flashy graphical menu buttons to make a website look more appealing but this can create issues. The problem does not lie with visitor confusion, it stems from page load speed. Graphics take longer to load than text. This is bad practice for two very good reasons.

Firstly, nobody enjoys waiting for a website that is struggling to display what it has to offer. Secondly, Google has openly stated that load speed is now a ranking factor. A complicated graphical navigation menu will probably affect page load speed and your site could suffer for it.

4. Website GPS

A website that cares about navigation should always include a breadcrumb trail. Usually located just below the top navigational menu, a breadcrumb trail allows visitors to see where they are and travel directly to any point along their current path. A typical breadcrumb trail could look like this:

Home>Products>Mobile Phones>iPhone

Anyone seeing this instantly knows they are in the iPhone section and they can just click the Mobile Phones link within the breadcrumb trail to go one category level above. Breadcrumb trails are a terrific navigational aid.

Another reason for always including a breadcrumb trail is that visitors may land on one of your website’s sub-pages via a search engine query. They may not know what category that page comes under unless they can see the hierarchical path in the form of a breadcrumb trail. Think of it as an essential guide rope that visitors will be very grateful for.

5. Sitemap

A sitemap is an essential for every website. Not only does it give a clear overview of your entire site, it is often used by search engine spiders to efficiently crawl a website. If you want to have a useful site-wide navigational map and have your website indexed successfully, you will need a sitemap.

6. No Place Like Home

There must be a clear link back to your website’s homepage from every other page. This could be in the form of a ‘HOME’ navigational tab, or a simple textual link at the bottom of each page. Whatever the format, a website should always offer visitors a direct route straight back to its primary page.

A common way to achieve this is to link your websites header graphic, title, or logo to the homepage. This is fairly standard now and most visitors will expect to be able to click one or all of these and be returned to a homepage.

7. Consistency

The navigation for any website should remain the same no matter where a visitor lands. It looks unprofessional and proves inefficient to have different navigational options on different pages. The navigational system you choose should be obvious enough to be easily visible to visitors but subtle enough to meld in with your website’s overall design.

8. Instantly Accessible

A visitor should not have to scroll down to see a navigation menu. Anyone landing on a site must be able to see the options available to them without excessive searching. It is good practice to include a top navigation bar that includes your main categories at the very least. This needs to be in the top-third of the page.

Good navigational systems will also have a bottom navigational menu, or footer. This allows anyone who reaches the bottom of page content access to navigational links with no need to scroll up unnecessarily.

You should spend time and effort creating a great looking website. You will need to fill it full of quality, relevant content and remember to update this regularly. Then you have to work on search engine rankings to capture those organic visitors. But all of this is pointless if the people visiting your site then have trouble discovering what the site has to offer.

Prepare and implement a simplistic, efficient, reliable navigation system and help visitors and search engines travel and locate every piece of content your site contains.

About the author: Roko Nastic is editor at WebmasterFormat, a useful resource for those wanting to learn how to build better and more profitable websites and how to find best web hosting companies.

Useful links: Form traps, Wired, find your content, web education slides, online tutoring

vdebolt — Thu, 11 Nov 2010 13:56:59 +0000

Fashionable Web Forms: Traps and Tips has UX advice from a pro on how to make forms work better.

Why Wired Loves the Ladies. That slide of the last 32 Wired covers tells the story with such impact no other comment is necessary.

Find Websites that are Copying Your Content. Great tips for tools.

Mozilla Drumbeat Keynote on Web Education

View more presentations from Anna Debenham.

An interpretation of the slides by OpenMatt is interesting, as well as the comments from students.

And, if Anna Debenham’s portrait of web education in the UK wasn’t enough to make you wonder how things ought to be done, the NY Times reported that UK math students are now getting tutored online from instructors in India. What do you think about that?