Some Random Thoughts on Web Usability

I know that I primarily blog about social media, but I came to know social media by way of being a developer.  I have developed websites for the past decade or so, and that’s been my primary source of livelihood the entire time.  One topic that I rarely touch on, but is something that we, as designers, are expected to have an unlimited amount of knowledge about is usability.  I thought that I would do a post on some of my most recent thoughts about web usability, what works and why I think so. 

It’s important to keep in mind that the best thing that we can do as developers is to use our heads and step out from behind our code editors and take a look at the web as the normal, everyday person sees the web.  This also means bringing in outside people to give you an honest perspective.  Focus groups can be an awesome source of input for us if we don’t write them off as being idiots because they aren’t that tech saavy or ask really obvious questions (or at least obvious to us). 

My business partner Greg and I both have different development styles when approaching a project, he tends to have more of a structured approach, working with the artist to come up w/ a ready for the web mockup and then he takes that mockup and translates it to the web using some of the cleanest code I have ever seen.  He is a CSS guru, a lot more so than me.  I on the other hand will sacrifice minor standards in-compliance to achieve a desired look.  In my opinion the look is what sells, very few, if any visitors to your website actually look at your source code or check it to see if validates, or at least I haven’t ran into that segment yet.  Of course, neither of us are really wrong, that’s just our individual styles for bringing a project to fruition and ultimately achieving results for our clients.

The Quality of Your Design Speaks Volumes…

This is a message I have preached for years, and it also has been a prime source of frustration for me when I see businesses decide to go with amateur or family members with limited talent to design their websites.  They have no idea what kind of an impact this makes.  The old saying that you never get a second chance to make a first impression could not be more applicable than it is to the web. 

Careful thought, planning, and layout control should be exercised when designing a website for any project, I am a firm believer of this.  I also have heart murmurs every time I hear of a website that only took 24 hours to construct, this simply cannot be done overnight.  At least a day or two of planning is needed before the creative process should even start, or at least that’s my opinion in most cases.  Sometimes however a creative breakthrough can happen if you really connect with a client and magic can happen, when this “magic” happens, things just seem to fall into place during the creation process and the client is overwhelmed at the first sight of their new website.  The point that I am trying to drive home, make sure your website is clean, graphically and aesthetically pleasing.

• Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
• What Makes A Web Site Credible? A Report on a Large Quantitative Study
• The Elements of Computer Credibility

People Make Eye Contact…

When people pull up a website, it’s a proven fact that they immediately make eye contact with any photos you have on the page.  I know this is going to sound shallow but I have heard on more than one occasion that pretty models in stock photography are more effective than everyday digital photos of your actual employees. 

This is not to say that you shouldn’t photograph or use your own stock photography, I just thought that I would throw that in there.  What we do know for a fact is that people are drawn to faces, more or less making eye contact with your site.  Here’s proof from a recent heatmap study provided by UsableWorld study. 

Here are some thoughts from a recent article in Smashing Magazine on this same topic: People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

Get Your Key Points Above the Fold…

According to a recent study by a research group, over 70% of web users they polled won’t scroll down the page.  I have no idea why this is but I have also found myself to be guilty of this from time to time.  It’s extremely important to put all of your key points, hot spots, and points of interest just above the cut-line in a browser. 

I know that’s impossible to guestimate due to all of the browser resolutions that are out there but 1024 is a safe starting place.  Of course you can really get a better idea by looking at your analytics to see exactly what your visitors have used on your website in the past.  Also, some analytics suites have a site overlay feature that will allow you to see how many times various points of your website were clicked on.

Here are some thoughts from a recent article in Smashing Magazine on this same topic: Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

Clean Design = Lots of Whitespace

I am a fan of clean crisp designs.  A lot of times we get too wrapped up in our creative mindsets and go overboard on producing websites that are visually compelling but pay very little attention to the actual message itself.  No one ever sold a thing because they had a pretty website, of course it helped to bring people in and keep their attention, but it’s the content itself that actually sold the client.

I know there is a school of thought out there as to what size fonts should be used, etc.  I am a fan of alternate font sizes controlled by CSS, but at minimum I think that 8pt verdana is a safe font to use, possibly even a 9 or 10pt.  I also like Arial but tend to shy away from Times New Roman, which I still see a lot of out on the web.  I also admit that I might be a little old school and stuck in my ways on this part, but here are some thoughts from Smashing Magazine on the topic of whitespace:

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

Here is some good information from a recent typography report:

According to our typography study:

• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
  1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
• Line length (pixels) ÷ line height (pixels) = 27.8
  The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
• Optimal number of characters per line is 55 to 75
  According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

Form Labels & Input Processes

Since the web has evolved into a place where information is shared and gathered on a daily basis either through websites or web-based applications, form and data input processes should be a key focus of your design process.  Your goals should be to make the input process as easy and inviting as humanly possible given your projects parameters.

Granted, there is no way to make a form with 100 fields look inviting to a user but there are things you can do to improve the process on more realistic input processes.  One contact form that I really like is the one that is used on Tumblr to login.  Notice how the form labels are located above the form field?  This was also discussed in a recent article on smashing magazine about usability…

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

Make Sure Your Links Stand-out and are Obvious

My partner Greg and I are both of the same belief that links, especially in the navigation of a site, need to do something when you mouseover them.  Whether it’s a background change, object rotation, or a simple underline, the visitor needs to know for sure that what they are seeing is a link.  And it even needs to be obvious to them prior to even mousing over it, especially if it’s buried deep in content.

Here are some even deeper thoughts on this topic that I found on Jakob Nielson’s blog:

To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

Assuming the link text is colored, it’s not always absolutely necessary to underline it.

• There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area’s function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
• Exception: underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
• Exception: underlined links are important for low-vision users’ accessibility, so retain underlines if accessibility is a priority for your site or you have many users with low vision.

Don’t underline any text that’s not a link, even if your links aren’t underlined. Reserve underlining for links. Because underlines provide a strong perceived affordance of clickability, users will be confused and disappointed if underlined text doesn’t have an actual affordance to match this perception.

Use different colors for visited and unvisited links.

• The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out).
• The two colors should be variants or shades of the same color, so that they’re clearly related. Using drastically different colors (say, orange and green) makes it hard for users to understand the relationship between the two types of links and to identify which color is the "used" version of the other.
• Shades of blue provide the strongest signal for links, but other colors work almost as well.
• As always, when using color to signal information, you should provide redundant cues for color-blind users. Making unvisited links brighter and more luminous than visited links will usually accomplish this goal.

Never show text in your chosen link colors unless it’s a link.

• You should generally avoid color for text unless it’s a link. However, assuming it differs from the link color, you can sometimes use colored text without causing major usability problems. For example, in a checklist summary, you could show the word "okay" in green and the word "error" in red. (The fact that the word meanings are clearly different provides the required redundant cue for color-blind users.)
• Don’t use blue for non-link text, even if you don’t use blue as your link color. Blue is still the color with the strongest perceived affordance of clickability.

• There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen.
• Exception: if you’ve opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren’t underlined, you can make an underline appear while hovering.
• In any case, don’t use bold-facing as a hover effect, because making the font wider may cause the text to re-align.
• One useful hovering effect is to use link titles to help users predict where a link will lead before they click it. (If you’re using a mainstream browser, you can see this effect by hovering over the links in this column.)

Don’t use tiny text for links. Don’t place links so close together that users with reduced motor skills will have difficulty selecting them. These guidelines are particularly important to ensure usability for older users.

• Exception: It’s okay to use small font for links that few users will need (such as copyright info), as long as you place those links in a secondary location (such a footer) so users don’t feel obligated to read them.
• If you target seniors or otherwise have many older users, ensure that your links appear in a big font (12 points or higher) and that links include enough text to make them easy to click on.

These guidelines all relate to the textual link appearance. It’s even more important that you carefully choose the link content (the actual words), but that’s another topic. (For advice, see Homepage Usability’s six guidelines for links, twelve guidelines for writing, and seven guidelines for navigation.) Graphical links are yet another story, but it’s usually best to use text for most links anyway.

Following the usability guidelines for link appearance on your site will make it easier for users to immediately determine what they can do on each page and will reduce the probability that they’ll overlook important links.

Final Thoughts…

I know that these are just a few usability topics and there are a ton more out there that are just as worthy of discussion, but these pretty much stuck out in my head.  Again, at the end of the day though, just use your head and try to think not as a developer, but as a consumer w/ limited knowledge of the web and you will find that you are turning out much more effective products for your clients at the end of the day.

Do you have any additional thoughts regarding usability?  Feel free to jump on and jump in the discussion by commenting below, you can also find some great information on Smashing Magazine in the article that I referenced a few times, and also on Jakob Nielsen’s blog…