Posts Tagged ‘usability’

Is your website user-friendly? Test yourself!

Wednesday May 27th, 2009

Usability is such an important factor for the success of your website that it should be on your mind from the beginning on. The rule for the usability test is: The sooner the better. The best is to start testing website usability before you start working on your website: Ideas, concepts and drafts are easier (and cheaper) to change than existing websites. But, of course, it is never too late to start optimizing your website and make it more user-friendly. The only things you need to conduct the usability test are five test persons and some time.

5 Methods to check usability:

  1. Card Sorting for user friendly navigation and menu structures. Write the name of each of the main items (products, topics) of your website on paper cards. Give each user a set of cards ask him to sort them thematically. This will help you find out which topics belong together in the eyes of your users and tells you where they expect to find the information they’re looking for. Use this information to determine the menu and navigation structure of your site.
  2. Paper Prototyping helps you test if your site structure makes sense. Draw your website on paper. Do not concentrate on design issues, but only on the structure: How are website pages organized hierarchically and how are they linked to each other? Let your test users perform real tasks with the paper prototypes and watch their reactions. Ask them also for feedback and suggestions.
  3. Interviews to find out more about user-experience. Ask your test persons about one aspect of your website. If you conduct written interviews, it is recommended to use closed questions with predefined answers (yes/no, I agree totally/ I agree partially/ I disagree). If you interview your test users personally, you can use open questions where users can reply freely. Interviews will give you important feedback and will help you look at your website through the eyes of your users.
  4. Thinking aloud will give you high quality feedback during testing. Let your test user perform a task and ask him to explain his decisions. What is he doing? Why did he choose this option and not another one? How is he feeling? What is his opinion? Thinking aloud will give you important information about the user’s mental and emotional interaction with your website and can give you many good ideas for improvement.
  5. The Five-Second-Test is a fast and easy way to test the functionality of your website. Here, you let your test user perform a certain task again (for example, if you sell products, ask the person to tell you how he would go about buying a certain product). Let the person look 5 seconds at your website without scrolling or clicking on links (you can also use a screenshot). After that, ask the person to tell you what he remembers from the website. This will show you what catches the user’s eye and tells you if your images, titles and banners are sending the right message to the users. On the next step, ask the test person to perform the task. If he has difficulties or takes too long, this means your site is confusing and needs restructuring.

What is web usability?

Tuesday May 26th, 2009

Web usability is about making your website user-friendly and easy to use by your visitors. A website will be considered user-friendly if visitors can navigate intuitively on the website, understand your message immediately and easily find what they’re looking for (which should never be more than 3 clicks away).

Sites with high usability are regarded by users as informative, useful and easy to navigate. This gives them a positive user-experience and encourages them to come back again.

These are the most important factors for a user-friendly website:

  • Easy navigation and clear orientation (user finds its way on the website easily)
  • Uncomplicated text, easy to understand (wording)
  • Relevant content, clearly arranged on the site (Headings, titles, etc)
  • Text adapted to different reader types (scanning, detail reading, etc)

Along with content and page layout, usability is a key factor for the success of your website.

Redesigning the front page step 1

Friday April 27th, 2007

We are constantly trying to make small tweaks to make motigo a better place for you to spend your time. We strive for a usable yet aesthetic website. The fine balance of aesthetics and usability can however be tough to find. It is a often a result of a long iterative process of trial and error rather than a magic splash of geniality from our designers. For each little change you see in our products, such long process of trial and error lies behind. Creating the perfect website for you to use requires much effort and energy.

As an example, I will take you through the process of redesigning the front banner on motigo.com. It is a part of a total redesign of the front page - just a part of yet another iterative process.

When we first launched motigo in beta, we had a flash banner showcasing motigo and our main products. Although this banner was pretty, flashy, and had some “wow” effect to it, it did more wrong that it did good. It left visitors saying “nice site, but what is motigo?” Of course, our egos could not live with this, why the process of designing a new and more friendly welcome page (and banner) began.

The starting point in the beginning of April 2007 was this:

motigo.com - April 2007

We had several goals for the redesign, although becoming aware of these we just as much an iterative process as designing the graphics itself.

The goals for the redesign were:

  • The less reading required, the better
  • The clearer the statement, the even better
  • Simplicity over featuritis
  • What motigo can help you with needs to be clearly stated
  • We wanted to clearly state what services we provide and what they are
  • To start take advantage of our free services, you need to sign up
  • A very important selling point of motigo needs to be stated: it’s free

The frontpage banner looked as this:

motigo.com -front banner v0

It didn’t really fulfill any of our goals.

It had a lot of text that was too small and too long to read (and too boring as well). The flashy effects of the banner gave the page a severe featuritis. When you moved your mouse pointer to click a service, the banner moved into something different. When you finally clicked anything, you were just taken to the sign up page instead of being presented with a proper page that could elaborate on the service clicked. It obviously didn’t work.

motigo.com -front banner v1

The first redesign captured a lot of our goals. The reading had been drastically reduced. The message was getting across much better. We now state what we can do for you, and with what tools we can help you kick ass. The featuritis was gone.

The banner was however one big piece of graphics, all linking to one page. We also needed to state that you need to sign up to get access to our services. It was however much better than the prior banner, why we put it up on the page immidiately. After a few days, we had ideas of making it much better.

motigo.com -front banner v2

The next redesign first and foremost included a sign up button. The background color of the banner was made brighter, and to illustrate that a signup would give access to all of our services, we made a gradient background becoming brighter towards the sign up button.
We also had an overuse of the motigo font (Yup, we have our own specialized font. Pretty cool, huh?), why the Tahoma font of the rest of the site replaced the subtitles of each service and of the main message (to the left).

motigo.com -front banner v3

Next, we realized that we left out the most important selling point of our services: it’s free!
This is why we added a banner showing that motigo is free. Realizing how important this actually is for how we help you kick butt, we made the “FREE FREE FREE” banner even bigger and darkened the font:

motigo.com -front banner v4

Tadaa! And that concludes the trivial task of designing a new welcome banner. On an after thought, we are aware that we shouldn’t bloat the banner too much with extra small banners and small gizmos. Then we’ll just end up creating a “parody”:http://video.google.com/videoplay?docid=36099539665548298 of the starting point.

Much work goes into the smallest task. In this way, we are slowly moving towards a better motigo that will help you make your website kick some serious butt.