User Expectations Part 2: Layout

Are your website users finding what they're looking for? Are they able to perform the tasks on your website that you want them to? Are the tools they need to perform those tasks where users expect them to be?

In the previous article about design and user experience we covered general feelings that users have towards designs that don't work for them. This article will discuss layout, but this time in a specific way with specific action steps. We will discuss how to meet user expectations and how that will help your site succeed.

How would you view the auto industry if every car that was made was built VERY different from every other car? Not just shape and color, but what if some cars had steering wheels, while some cars had levers that you had to pull and push in order to steer the car? What if the gas pedal were on the right side of the floor on some cars, while some had the gas pedal on the dashboard? Each time you borrowed a friend's car, test drove a new car, or had ANY reason to drive a car other than yours, you'd first have to spend quite a while just figuring out how to drive the dumb thing!

Of course, it would be RIDICULOUS for car makers to do this to their customers. But when it comes to websites, we seem to have the attitude that users would actually enjoy the fact that we decided to place the gas pedal on the dashboard.

For the user, this is unexpected, which means that they have to stop when they were doing, and take time to learn how to use your website. Do most users have that kind of patience? Most do, usually about 80% will take the time to figure out how to use that "interesting" gadget you built.

What if you ALSO changed the steering wheel to steering levers? 80% of those users would probably stick around.

BUT you've already had 2 drop offs, and that will happen each time you want a design element that is out of the ordinary. So, if 1,000 users came to your site, the first unusual design element will cost you 200 users. The 2nd one cost you another 160. Now you only have 640 of your original 1,000 users simply because your design doesn't match what users expect to see. Wouldn't you want all of those 1,000 users?

So this begs the question, what kind of layout do users expect? I suggest looking at the Alexa top 10 sites to find what an average expectation is. Why? Because these sites have entire departments dedicated to this subject. We can take advantage of the millions of dollars they've spent, just by studying what they did.

Here are the Alexa Top 10, as of this writing:

1. Google


2. Yahoo!


3. YouTube


4. Facebook


5. Windows Live


6. Microsoft Network (MSN)


7. Blogger.com


8. Wikipedia


9. Baidu.com


10. Myspace

Actually, 10 is Yahoo (China), but it's really the same site as 2, so MySpace got a bump.

I'd like to point out a few things they have in common:

• None of them have an "interesting" flash intro (with exception to MySpace's ad space where they play movie trailers)
  
  
• None of them have an "interesting" background. They want you to perform the task you came there to do. Have you ever been to a website with a bad background? Remember how hard it was reading text against that awful background?
  
  
• None of them have complicated navigation. In fact, most of them are moving towards a VERY simplified navigation. Many are using a left-side navigation of simple links, while a few still have a "traditional" navigation bar, so either option would probably work for your site. MySpace has the most complicated navigation of the Top 10, and they only have 7 items in their navigation bar.
  
  
• Links look like links. A simple color change to keep with the theme of the site is fine, but let's not get carried away. Just make sure that your links look like links, and only ever use an underline on a link. Why? Because most people that see an underlined word, automatically assume that it's a link. In fact, Blogger.com (Alexa 7) doesn't allow the option to underline words for this very reason. Since I know HTML, I was able to place that in there so you could experience what I was talking about. If Blogger.com thinks it's a bad idea for bloggers to be able to create underlines in normal text, that should tell the rest of us something.
  
  
• None of them have a very busy page. In fact, most of them have REMOVED almost everything that distracts their users from what they want the user to do. On Google, there are practically ZERO distractions from the big and obvious search bar in the middle of the screen. The same goes for Baidu. At first glance, Amazon appears to be an exception, because they have a pretty busy looking page. But look again, all of the "busy" things on Amazon's website are ways to engage a user in something that will result in a sale. EVERYTHING on Amazon leads to a sale. No newsletters. No blogs. There is just the sale. No distractions. Is your website THAT focused?
  

Finally, I want to leave you with this diagram that I also left you with in my previous article about design and user experience. As I said last time, this is probably the single most important image I've ever seen on the internet. It is a basic diagram of how most website layouts look. The shading describes how much attention the average user pays to each section, darker being more attention, and lighter being less attention. Use this image well.



Cheers,
Chris

User Expectations Part 1: Links

This is the first entry in a series that I want to dedicate to the User Experience.

The user experience is the most important part of any website. All the SEO in the world won't help your site if it is not designed to give your visitors a good experience. Simply put, if you give your users something they're not expecting, they probably won't know what to do and they will likely leave before buying your product or service. Remember The 3 Second Rule?

The first item I want to talk about, and one of the most common, is use link design that's "creative". Usually this involves:

• Using images for links
• Disabling mousesover changes
• Making links look the same as text

Using images for links. Using images for links is not necessarily a bad idea, you just have to do it well. Usually when I see the use of an image, it's because the designer wanted a special font that most people don't have on their computer. So, the only way to make that font visible to the rest of the world is to put it into an image. Here are a few tips for effecitvely using image links:

1. Make the link look like a link, or a button, or a tab, or put it in a place where people expect to see links. The point is, all the links on your site should tell your visitors, "You can click on me!"
   
   
2. Make it change a little when you mouse over it. I don't care if it changes color, underlines, changes background color, or does the hokey-pokey. Just make it respond to your visitors. Have you ever had a waitress or a bartender that ignored you? 'Nuff said.
   
   
3. Use the ALT attribute, otherwise your link is WORTHLESS when it comes to SEO. A LOT of SEO power is contained in the link text. This is an example of link text, and it has a LOT of power, especially if it contains keywords that you and your webmaster worked so hard to research. Search engines can't see what an image is, they just know that it's some sort of an image. So using the ALT attribute tells search engines what's in the image. The ALT attribute is almost as good as using plain text.

Disabling mouse over changes. I see this almost as much as I see images, and I honestly don't get it. As far as I'm concerned, mouseovers are fun! Mouseovers are a way of interacting with a website that makes it feel alive and welcoming. How do you feel when you go to a site, and moving your mouse around illicits NO response from the website? Here's an example: http://www.famouscupcakes.com/

It's a cute site design, but it's DEAD. No part of the site responds to ANYTHING the visitor does. Going to a site like this feels like a bad blind date. How can your site be inviting to visitors if it doesn't respond to them? Remember that waitress or bartender that ignored you?

On the opposite site, is gmail. Almost every part of gmail is alive, responsive, and welcoming.

Making links look like text. This one happens quite a bit, and I REALLY don't understand why. How do visitors get around on your site? Links. How do you expect your visitors to get around on your site if they don't know a link when they see one?

You have probably noticed that my preference is to do the same thing as Google, Yahoo, Facebook, and Youtube do (the 4 biggest websites on the internet), I leave them alone. By leaving them alone, they look like links. Every link is clearly and obviously a link.

The point of this post is to help build sites so that it meets with what people expect. Build to what your visitors expect to see and experience and you'll have a much better result from your efforts. When users have an experience that is unexpected, it's usually a bad thing, because usually they have to figure out what's going on. They probably won't admire your creativity, they'll probably be annoyed by it.