Usability

U

Usability, and to a great degree accessibility, are possibly the most important considerations to serious web designers. It is very true that anyone can easily make a website and publish it for all to see without ever knowing or implementing either of these terms. But what many people don't seem to realise is that only a very small portion of the people that use the web will see those websites, even if they wanted to. So, if a designer wants to get the most out of their design they have to construct it with the largest common denominator in mind.

Usability refers to the functionality of a website as it is accessed by a user. This person (or program) isn't just any user, theoretically it is every user that might potentially come across the site. Their experience of the site will be unique because of a number of variables that each person is subject to. The functionality of a site is thus determined by design of the site as it relates to the largest group of potential users with a common or similar set of variables.

T

This isn't a concept that began with the web. Designers of all manner of functional products have been designing with the use of the product in mind for thousands of years. For example, a cathedral is designed so that the parishioners can congregate in view of the pulpit and the sound of the bishop will carry through the vast space so that even the farthest person can hear every word of the sermon. When stone age man attached a handle to a rock he did so to aid those who were too weak to crush something with the rock alone, or whose hands were to small to grasp a rock large enough to do the job. Everything that is designed to be used, or interacted with must be done with the expected user in mind. Interactive media and the web are no different.

Good media design must direct people through the content of a site with a minimum of effort and confusion. It should present its content in clear, easy to read, and informative chunks. And it should minimise unnecessary navigation or other annoyances.

The best design however performs these tasks with the largest possible audience in mind, in other words the designer caters to the widest range of access. Access and accessibility is a user quality that is determined by a number of factors that are unique to that user: the kind of computer, browser, connection, OS, resolution, hardware, or any security features installed. Additionally the user might have a handicap such as poor vision, no vision, deaf, color blind, or physically unable to operate a computer in the normal fashion. In order for users with these issues to use the web they must interact with their computers through special settings, programs, or even instruments and as a result, the poor designs they come across can render the possibly useful information totally unavailable to them.

U

Usability and accessibility are topics near to my heart, because to me the very purpose of interactive media, and especially the Internet is that it is there for everybody to use freely. Quite often the people who have the most use for it are unable to use most of it. All for a bit of consideration on the designer's part, the vast majority of users on the web could browse freely without hindrance or annoyance.

Conversely, because usability is so important there are those designers who's designs are entirely useable to the exclusion of any aesthetic influence and so like a dictionary their sites are bland and filled with nothing but textual content. These are definitely accessible and ease of use is evident, but with the advances in design technology there is a place for the aesthetic design as well in most cases and it can be implemented without loosing the benefits derived from a text only site.

To bring this point home I have chosen a perfect example of poor design from the Web PagesThat Suck database to critique and reconstruct. Web PagesThat Suck is an online collection of dismal designs from real sites posted throughout the Internet. The site provides those all important "what not to do" lessons that allow designers to focus on improving their craft, while doing double duty proselytising the vital message of correct design in reference to usability and accessibility. There is no (or rather little) emphasis on visual style in these critiques other than where it interferes with the functioning or the purpose of the site. So, leeway is given to sites that are purely artistic and thus badly designed "on purpose".

I am hoping that by deconstructing this site myself I will show my ability to critique a site's design as well as my understanding of how to implement usable design techniques with a focus on accessibility. So, without further ado...

Welcome to ZaxWerks

T

The site I have chosen to critique is www.zaxwerks.com, listed as the Daily Sucker for December 5th, 2005. This is an official site for ZaxWerks 3D modeling and graphics software. It is multi functional in that it provides support, product info, downloads, online purchasing, and many other facilities. However, the main purpose of the site seems to be promotional and the design is done in a typical promotional style for print. Before I begin my deconstruction though, here is what was said about the site on WPTS:

Daily Sucker #5 for Monday, December 5, 2005

Submitter's comments: Here is a somewhat attractive site crushed under the weight of (I kid you not) 70-80 .PNG slices that take eons to load. Looks like someone just figured out how to use Tables/image slices in Dreamweaver. Bush league.

Vincent's comments: Actually, there are 98 sliced images that take up 294,835 out of the 314,415 bytes. Excessive, is the first term that comes to mind. I remember the first time I drew a web page in Photoshop and then sliced it up. It, too, was a bad-looking web site. I could have saved a lot of time and energy by just buying a template. BTW. check out the flag plug-in. Very, very cool -- as long as you don't stick one on your web site.

Discussion: As much as the slices suck, I am confused by two things: 1.What this site is about. 2.What to click on the navigation to find out. Dave J. . 12/5/05; 11:23:13 AM #

One image takes all the attention on this page, and not because it is so beautiful. Supposedly he is a graphic designer, 3D at that. So why is he torching his ear? J. Vos . 12/10/05; 4:53:09 PM #

That site is fast and friendly! Lee . 12/10/05; 11:40:39 PM #

Zaxworks makes you sit through the sliced grapphic thing even when going to "Contact Us." -B Bob . 12/1/05; 11:00:18 AM #

Here's an even worse sliced graphic-- look at the Zaxwerks "Goodies" page (under "Extras"). I wonder why "Zaxwerks Newswire" doesn't link to anything. Also why the copyright notice has practically no contrast. And what the point is of the "Decline" button on the "Download Software" page. Petréa Mitchell . 12/1/05; 1:27:59 PM #

Zaxwerks: hmmm... no text links, that's not good. Did they really make everything in pictures? OUCH! Pity the person who has images disabled, they get a blank white screen with a tiny box that says "image" no alt text, nothing. Also, that is a lot of links for any page. Among all of them I never saw one that says "home" At least the logo linked back to home. a webmaster . 12/2/05; 11:28:39 AM #

Zaxwerks: I guess they never thought of the poor people who don't have access to a broadband connection... codeman38 . 12/2/05; 11:42:59 AM #

I can't afford Jaws, so I use the Fangs extension to give me a rough idea of what sight-impaired people and search engines might be getting. Here's an extract from the Zaxwerks website:

link graphic slash ZW underline navT underline index underline fifty-two .png link graphic slash ZW underline navT underline index underline fifty-three .png table end table with two columns and ten rows link graphic slash ZW underline...

...and so on and so on. Of course, I realise that sight impaired people may not be interested in graphics software, but even so... Does Zax realise that, in the picture at the bottom of the homepage, his right ear is on fire? rewboss . 12/3/05; 6:45:12 AM

S

So, as you can see, the design and usability community at WPTS didn't like this site much at all. And rightly so in my opinion. There are a number of things wrong with this design, including many that weren't mentioned above. In fact, I'm hard pressed to find anything right with it (strictly speaking). Of course all web designers can't be expected to be experts their first time out, but as a company trying to promote a graphic design package you'd expect a little more savvy from the designer of this site. On the surface it is a reasonably good-looking site, but as I will point out, the horrors of designing with an automated page designer have reared their ugly head.

Imageready, web disaster.

T

The first thing that strikes you as the page opens is just how long it takes to do so. If you were by chance trying to see this page by means of a dial up connection, you would have to wait for quite some time before you could even see the site. Why? Because the primary problem with the design is that everything (and I mean everything) is an image. As mentioned on WPTS there are almost a hundred images on the first page alone.

What the designer has done is to create a complete layout in Imageready, slice it according to button and layout elements, and export the whole thing into an auto generated table which they then simply cut and paste into MSWord and saved as a .html file. As a graphic designer, I have often wished I could create a page as simply as that, unfortunately this presents some very serious problems:
Despite the popularity of broadband, many people today still use slow connection speeds. Downloading all those individual image files takes time, even with DSL it take up to 20 seconds just to complete the page.
It doesn't help matters that the file format the designer chose was PNG. PNG is a good format for some applications as it retains layer information and renders semi transparency, but it is because of this that the file sizes are increased. Not to mention the fact that there are no versions of Internet Explorer that properly handle the semi-transparent PNGs anyway.
Some people chose to turn off their image display in their browsers, or because they are using a text reader, the image tags don't get read. With so many images, many of which are navigational, the page becomes useless to these people. What's more, where there might have been some text, there are yet more images making the entire page unreadable. Without ALT descriptions (of which there are none) the site is essentially blank to a text reader or image-disabled browser.
By cutting up a single image and placing it in a complex table structure like this one, the ability to properly label and handle each element is lost. The TABLE tag is intended for text and images in tabular format, not for image placement and positioning. Before I knew better, I also misuse the TABLE tag (having learned the technique by reverse engineering a commercial site designed by a prestigious design house). It is still a common practice, but it has some serious drawbacks. For one it isn't cross browser compatible. Some older browsers like Netscape3 and IE4 (which are still in use and should be considered when designing any site) don't handle tables in the same way as the newer browsers or each other. Even between IE6 and Firefox there are discrepancies that translate into unsightly gaps between table elements thus defeating the entire purpose of slicing and exporting a single image in the first place.
One of the biggest problems that arises from this cut and paste design technique is that, without a proper understanding of HTML the page suffers from certain missing elements that would otherwise make it more compatible with the various web users that access it. For example, besides the already mentioned missing ALT tags, there is no information for search bots and spiders other than the TITLE of the page. META tags, like DESCRIPTION, KEYWORDS, AUTHOR, and ROBOTS would increase exposure and ranking to search engines and users alike. While NAME and ID tag properties would help to distinguish which sections of the document were for navigation from those dedicated to pictures or text.
The last obvious problem with the Imageready method of design is that the page dimensions are totally static. This isn't a terrible thing in and of itself if your exported design is 800X475 then it will fit perfectly in a maximised window on a screen with an 800X600 resolution (see my Garden Art site for an example of static design). However, if the user has a 1024X768 resolution or a 640X480 then there will be issues with the look and even the functionality of the site. As it happens the designer of this site does the design equivalent of throwing water on a fat fire by totally ignoring the dimensions of even the most common browser resolution and designed an image that is 900X653! Too large for 800X600 and too small for 1024X768.

Design just gets in the way

S

So, some of the worst problems are fairly obvious, but with this site they don't stop with the obvious. I've already touched on some of the features that stand in the way of the sites usability as a result of exporting an image with no HTML, but there are others inherent in the design of the site itself.

While the general look of the site is clever and the graphics are professional, the actual feel of the homepage is very cluttered. The most obvious example is the navigation element at the top of every page. Having all possible navigational choices listed is sometimes a good idea, especially if you have a few to chose from. However, when there are so many choices, the presentation of the navigation list is very important (and delicate). In this case there are simply way too many categories to choose from, and although they are separated into groupings, they are not logically grouped so as to draw the eye immediately to the purpose of each grouping. The layout of the text is too cramped, the positioning doesn't provide the eye with anywhere logical to rest, and use of drop shadow effects serves to only get in the way.

The main body text isn't so much cramped as crowed. The text area in the center should have some whitespace to draw the eye, and some structured form to lead the flow of the content. As it has been done there are image elements surrounding and encroaching on the text are at all angles, the text itself isn't aligned or leaded in any cohesive manner, and though there are paragraph breaks and headings, the headings are so distracting the almost seem to be a part of the surrounding images as well.

W

Which brings me to my next point; every bit of text in this site is an image. There isn't a single piece of textual information that is readable with the images turned off. Quite apart from the previous points I made about this being an accessibility issue, there is absolutely no aesthetic reason why this should be done in this manner. Sometimes when designing a site, you may have a need to use a typeface that you are fairly certain a large portion of people won't have installed on their systems. If this happens, the users browser uses the nearest match on their system (which might not be a match at all). In order to maintain the intended look the designer will create an image of the text so that it is permanently displayed in its proper typeface. This is typically reserved only for headings, but this site uses it for standard text as well. Apart from the previously mentioned lack of ALT tags this also limits access to the partially sighted as they have no control over the size of the text.

Regardless... this site has no reason to rasterize its text in the first place! The typeface used for main body text is Arial, which is easily the second most common typeface available and quite definitely available to anybody who owns a computer. Even the headlines could be recreated in a common serif font like Times New Roman. This is unfortunately just plain laziness.

A

An additional issue with this last point is that Images are nowhere near as easily updated as text. Particularly if the images you have are directly incorporated into the layout of the other images on the site. A perfect example of how this is hindering this site in particular is the Zax Tips page where Zax apparently issues tips to the users of his software. As it stands there can only be one tip since the text here is also in image format. Any dynamic content would have to be implemented in such a convoluted way as to make it a pointless undertaking. The designer would have to take each new tip, place it in their Imageready template, and generate a whole new sliced table for export. This is at least twice as complicated and time consuming as simply updating the text for the page. It's ironic then that the tip that is displayed on this page describes exactly this operation for a different application.

What to do, what to do...

T

There are several other issues to deal with on this site, from the forum without navigation and hidden in a frameset, to the redundant use of an image map over an already linked image. I think though, now that I have pointed out the primary issues with this site it's time to knock the critic on the head and provide some suggestions towards improving it. So, if I were to redesign the site (from scratch), here are the things I would focus on:

Tables are not for page formatting, CSS is. The use of tables would be banned for anything other than the image gallery, which is set out in tabular form (though strangely has no links to click for larger size previews, which would be added in my redesign).
All design elements including images, text, borders, navigation, and a linked CSS file would control headings. Using a linked CSS file means that the size of the page itself would be very small, have delegated the styling work to the CSS file. Using CSS also means that the over use of HTML tags for formatting are eliminated. This is important to text reader users who have to sit through listening to Hi there when the same text styled with CSS produces "Hi there".
Images that repeat on each page would be set as backgrounds to DIV elements and controlled by CSS. CSS controlled images are preferable to inline IMG tags as CSS forces caching and therefore faster page transitions and return visits as they don't have to be downloaded each time a new page is opened.
Where inline images are used, they would be tagged with ALT descriptions and nav elements or picture headlines would have additional text describing the link and surrounded by a DISPLAY: NONE span class to hide the text from fully style capable browsers.
Real text would be used as much as possible. Only specifically image dependant elements would be actual images. Where text was placed as navigation a background image would replace any image data and real text links would be placed on top and formatted by CSS.
A well-defined text area would be allocated to each page (preferably the same area). Formatting using proper tag information, clear headed sections, and breaks between sections would all be used to create an unencumbered flow down the page.
Images that encroach on the text would be kept to a minimum, and would be separated from the blocks of text by a uniform whitespace.
NO MORE PNGs. Images would be properly prepped and optimised for the web. Only gif and or jpg image files allowed.
Images which represent border elements such as this example to the right, would be reduced to the smallest size possible and either stretched if placed as an IMG or more appropriately set as a repeating background to a nested div element. This particular image is a full 10k in size and is little more than a 53px high band stretched over 900px wide. Reducing it to its basic elements could reduce it to more like 100 bites. There are several examples of this.
Top bar menus are generally harder to handle when there are many categories to choose from. The ability to arrive at any page in a site with one click is an attractive one, but sometimes you have to weigh the pros and the cons. The three click rule is still an effective measure of the usability of a sites navigation and extending from one click to two or three is acceptable if it means people can find their way round a bit easier. Navigation would be reduced to manageable chunks and displayed in three parts. The first would be a major heading list across the top linking to summary pages for each section. The second would be a side bar with all the main page links ordered in a headed list down the left hand side (people are very used to listed menus and are quite capable of quickly browsing even a long list, so long as it is presented in a standardised fashion). And the third nav element would be a sub menu across the top of each page, just under the top bar menu which gave a navigational tree to your place in the site (in the style of homepage>category>sub page>secondary sub page). Incorporating a nav element like this is more and more common and frankly, it's quite handy for browsing.
The site would be designed with proper common resolutions in mind. Rather than constructing a purely static top/left positioned table, which doesn't fit in any window size, I would implement a centrally placed main DIV element that was no large than 775px wide. Proper use of margin settings would ensure that any resolution 800X600 and up would center the content, while less than 800X600 would overflow it to the left. A left side menu would ensure that people viewing at this resolution would still be able to browse the site without having to scroll to the right to see additional navigation.
A database would be incorporated to dynamically update the textual content of areas like NEWS, TIPS, and FAQs.
Lastly, I would implement some head information for the benefit of search engines and limited functionality browsers. META tags and a robot.txt file for the search engines and browser detection for the limited functionality browsers. A small bit of javaScript a redirect or some CSS hacked items that aren't handled by earlier browser versions would be enough to get people to view a text only site.