mediajunk

I recently gave a talk on website usability to students of the M.Sc. in IT in Education course at Trinity College, Dublin. (You can download the PowerPoint presentation – 954kb. Please link/reference my site if you use it.)

As part of the discussion, I rehashed a point I made on Mediajunk recently: that designers should not rely on the logo as the only homepage link. Not all users know that the logo is a link to the homepage, I argued, despite the popularity of this practice.

It turns out that the practice is even more popular than I'd guessed. A logo that links to the homepage was found on 100% of the sites analysed by Heidi Adkisson for her master’s thesis on de-facto web standards.

De-facto web standards differ from proposed web standards; the latter are proposals and guidelines for designing websites, while the former are the actual practices and conventions that prevail among existing sites.

Among Adkisson’s findings, outlined in her article for Boxes and Arrows were:

• 100% of sites had a logo linking back to homepage displayed in upper left corner

• 93% of sites had a Global Search option, presented as a text field and button.

• 76% of sites used text rendered as graphics for main site menu links.

• 62% of web pages displayed links as underlined text.

• 37% of pages use different colours to differentiate visited and unvisited links.
  

For me the most surprising of the above findings is that the 76% of sites still use graphical menus. I suspect this number will continue to drop as sites become less graphic-oriented and more usable, and use of cascading style sheets grows.

I am against graphical menus for the following reasons:

• They make pages slower to download, particularly if they are paired with rollover images.

• They work poorly if at all in text-only browsers and screen readers.

• Graphic-rendered text cannot be read directly by search engine bots, lowering the page's findability on what are likely to be relevant keywords.

• Too often text rendered in menu images is difficult to read and appears to “bleed” (this is because anti-alias or dither techniques do not work well at such a small scale).
  

Heidi’s analyses are useful; let's hope they are the starting point for more in-depth research on her site webdesignpractices.com

She has also made her masters’ thesis available for download (4.2 MB PDF file)

*****

A similar project, also well executed, is Martijn van Welie’s Web Design Patterns.

Weelie identifies many different types of sites/pages, and groups them in to categories.

For example, in the “e-commerce” category, he lists examples such as:

• Shopping cart
• Login
• Registering
• Product Comparison
• Product Configurator
• Product Advisor
• Case study
• Booking process

… and so on.

He then provides a typical features & functions analysis of each element, along with visual examples.

Both these studies indicate that, after ten years of chaotic growth, the web is finally settling down into conventions and patterns, which will make life easier for designers and users alike.

My list of Dos and Don’ts for Website Navigation over at 9rules.com got some good feedback.

Taking that feedback into account, here’s a slightly modified version of the list (I may turn this into a more explanatory article in the near future):

5 Dos and 5 Don’ts for Website Navigation

Don’t Use Frames
Frames are bad for all sorts of reasons, which have been highlighted to the death in design books and sites. Yet frames sites continue to emerge (particularly on sites created by those with tech backgrounds).

Don’t Use Images To Create Menus
Images make page slower to load. They don’t read properly in talking browsers. They are ignored by search engines. Small, anti-aliased text often looks blurred in GIFs and JPEGs. HTML text is crisper – and nice designs/rollovers can be achieved with CSS now.

Don’t Use Pulldown Menus
Menu information should be seen at a glance; don’t make the user work just to see a menu.

Don’t Use Pop-Out Menus
As well as making us do a lot of mouse-work just to see what’s on offer, pop-out menu items often overlap, or cover other choices. We’ve all had annoying experiences where we’ve tried to click on one item in an expanding menu, but keep getting another. Pop-out menus are not compatible with talking browsers or text-only browsers.

Don’t Rely on the Logo as the Homepage Link
Despite now being a convention among designers, users don’t necessarily know that the site logo is a link to the homepage– unless you make it explicit (e.g. Use the word “home” within the logo – though this isn’t a pretty solution).

It is better to include a separate link to the home page as part of the menu.

Do Maximise the Hit Area for each Menu Item
A larger hit area makes it easier for user to navigate into menus. Using CSS, you can create make an entire box a link, not just the text that is contained within the box. We’ve all had to use a dodgy mouse at one stage or another and know how frustrating it is to maneuver it into a small area.

More importantly, a large hit area benefits visually impaired users.

Do Use Alt Tags to Describe Images
This benefits users of talking browsers and text-only browsers, and those with slow connections who must wait for images to download.

Do Use Title Tags to Describe Links
Title tags provide additional information to links and can be useful, particularly to visually impaired users with talking browsers.

But you can't RELY on the information in title tags to explain links, as users may not expect or notice the title tag info. Use clear, informative language in the menus (to borrow an example from Steve Krug, don't say "Joborama" or "Employment Opportunities" when "Jobs" will do).

Do Orientate Users on Each Page
Make sure the relevant menu item is highlighted for each page of the site (remember, a user can enter your site at any point).

For large, complex sites, use breadcrumb trails to give users a “You Are Here” message, and a quick means to navigate to parent directories.

For smaller, simpler sites, provide a sitemap and make it accessible from each page.

Do Ensure Navigation is Consistent throughout Site
Don’t switch menu options or styles, or other navigation elements (e.g. breadcrumb trail), on various pages or sections of the site.

What would you call a porn search engine?

Go Ogle. (Bad-a-boom!)

If that last post about the Google calculator didn't make you realise just how geeky the new kings of the internet are, check out their homepages (created while they were PhD students at Stanford University).

Sergey Brin's homepage is pretty geeky, but Lawrence Page's takes the biscuit. That Lego printer ... what more can I say?

Just as Bill Gates did before them, Page and Brin are proving that cerebral talent, traditionally undervalued in the "cut-throat" world of business, is becoming increasingly important.

It's just such a pity they lack style; those page designs are awful.

ICQ runs a version of Google that shows thumbnail previews of results.

I don't know where this originated or whether Google will introduce thumbnails in the future, but it seems to be a nice feature.

I think someone should tell the presumably innocent folks at PowerGenitalia.com that um, well, you'll see what I mean...

The single most interesting thing about the blogging phenomenon to date has been the absence of images. Any page looks better with images. Old media learned this a long time ago. Text-only blogs look so ... whiny.

There is much speculation that the arrival of picture-phones will herald a new era of image-laden blogs, or moblogs, as already mentioned in Mediajunk. Picture-phones mainly offer convenience -- your phone is now a camera that can instantly send pictures to an email address.

But the picture quality from cameras is poor at best. For better results, digital cameras are still preferred. Okay, so there's a little more manual work involved, but the end site will justify the means.

So how come blogs don't already have pictures? Well, some of them, at least, do. And, surprise surprise, they look a lot better than their textist counterparts. Photoblog.org has a list of photoblogs from around the world, many of them excellent. (I suspect, by the way, that the name 'photoblog' will go the way of other ejargon and eventually we will simply come to expect a blog to have pictures.)

*****

Slightly related to this is the interesting and smoothly-designed Mirror Project which, as the name suggests, contains pictures that people have taken of themselves in reflective surfaces. Yes, it's pointless. But you're dying to see it now, aren't you?

*Sigh* -- okay, here you go...

A combative article by frustrated interface designer David Heller has been making a splash of late. Heller argues that HTML is an impedement to the web's progress; it is time we abandoned this kludgy markup language and "moved on".

Really? Haven't we heard all this before? Heller, like others before him, is right to bemoan the "lowest common denominator" approach that consicentious designers are resigned to choosing, because of the inconsistencies between browsers and platforms.

But he fails to acknowledge the reasons why HTML, against all predictions, is still with us after 10 years (and remember: web years = dog years x 7):

a) HTML is irreversibly enmeshed into the fabric of the web. Like touch-typing on a QWERTY keyboard, making pages with hypertext markup language is a skill that few, of the millions who have achieved it, would be willing to relinquish. HTML has thus gained a memetic advantage in the evolution of the early internet.

b) HTML is easy-to-do. You don't need special software (I make most of my pages in Notepad). Heller, one quickly realizes, is from a programming background. Most people who create web pages aren't. Unfortunately, many software engineers mistakenly believe that the internet is *theirs*; the rest of us ordinary users are blundering cyber-serfs.

c) HTML works. Sure, it's clunky and a page designed for IE 5.0 on Windows 98 looks different on Netscape 7.0 on an iMac. But you can still see it. It doesn't crash. It's dependable. You get the information. You get the pictures. That covers most of what the average web user wants.

HTML is dead. Long live HTML.