| Articles Home |
The Nostalgia Zone Comics Store is a small business mail order comic store. The owners original intent was to use the site to sell nostalgia items like comics and other paper collectibles. I started the design with a few objectives. Users should easily understand what the site is and be able to quickly find the services offered. Site navigation should be an easily visualized model so the user can identify where they are and then go where they want. To prepare, I took an hour and read Norman, Nielsen, Tufte, Schneiderman, "Tog" and then looked at Ebay, the most stuff movingest web site on the planet. Parts Two and Three and Four show the evolution of the site.
All web traffic and usability studies show a few basics: fast download (less than 10 seconds), have good information, update the information regularly, lots of traffic comes from search engines and directories. I added a set of constraints: the basic organization of the site is to give lists of stuff to users, have them quickly find what they want and have a clear method to order items by email, phone or mail. Another set of constraints is a low tech, low cost site that is maintainable by people that work in used comics stores. The site must be maintained from distributed sites. To combine the objectives and constraints I mapped a simple shallow site structure. I tried to go at the most two levels off the home page. The reason is to make navigation easy with the "Back" button (the most used browser function) and the shallow structure allows an easy to follow hierarchical mental model for the user. Links to catalogs are on the home page and order and shipping info is on almost every page. The designed navigation is for a customer to go to a catalog, find a comic, go to order page, send an email order by cutting and pasting comic listings into the email. Very low tech and quick to implement.
On the data side the objectives and constraints were met by an inventory that is delimited field lists in ascii files. The original data was a list in WordPerfect used for a printed mail order catalog. Converting to ascii was simple. Now the files are easily edited by any text editing program, such as MS NotePad, WordPad or Mackintosh SimpleText, or Unix editors. This allows access from the web and editing anywhere by simply saving a page. The structured data allows easy loading to other programs in the future such as spread sheets, databases, simple scripts, searches, or shopping carts.
I took some home page ideas from Ebay and Yahoo. Ebay is an auction site, Nostalgia Zone is not, but it is trying to let its users find stuff in catalog listings, a concept that I find similar. Like Ebay, I use bars of color and one logo. I used simple HTML for browser compatibility, fast download speed and to make it easy to change and fix. And NO frames. I put many links on the page in the traditional link colors. Ebay "categories" is "Catalogs" the prominent "How to?" link is like the Ebay "Welcome", "Zone Links" is like Ebay "Fun Stuff".
Search engines use text for the classification of the page, so I put a little text in the page to help users find the site. The same text tells users about the site and gives some order information. I put a date on the page so users can see how fresh it is. The catalog lists are in the format of one big list with in-page category jumps at the top. There are several reasons I chose the list. One is because it keeps site navigation simple. Users know they are down one level and can easily get back. Reason two is because experienced net buyers I talked to said they liked to get a big list of related stuff and look through it. Reason three is the usage studies quoted by "Tog" saying one larger page is better than navigating many smaller pages. He also gives a persuasive argument for long scrolling pages when users expect them vs. Nielsen's argument for short pages only. Reason four is of ease of maintenance, just make a big list, transfer it up to the site, done. And remember, no database inventory to use, the list is the database taken from a Word Perfect document.
Unfortunately all my rationalizing does not cover up a usability problem with the big 268K "Reader Catalog". It is too big and users jump to categories too soon, way before the page finishes loading. This causes confusion in expectations as the user does not jump but stays in the same place until the page finishes loading.
I used a free site search supplied by Excite. I thought free was the right price, people expect a search (they do), it took ten minutes to install and I put it on the home page.
Validation of the design was as quick as the rest of the process. I tested usability of the site on five victims as they tried the task of finding a comic book title and ordering the book. I had them talk out loud about what they were doing to complete the goals while I took notes. Each test took about 15 minutes. This quick testing method is described at Jakob Nielsen's site http://www.useit.com/.
Several problems were found, mostly out of context errors. Or in other words the needed information was not in the same place as the user. One example of this was a separate order 'How to' page from the order page. The live test showed everyone did not know how to order when presented a blank email and could not find the 'how to' page. I changed it by putting the 'how to' with the order page, the user finds the email address after six lines of order instructions. Another problem found was that people got lost using the Excite "free" search. People expected to see comic titles from the search, not the web pages that the comics were located in. In addition the Excite result page was difficult to understand and totally confused 4 out of 5 test subjects. The fifth subject never used the search and was the only one to quickly order a comic. That was enough to remove the Excite search from the home page. Search is an important function. Many people will look for it but since I cannot find a canned search that will act as people expect and I do not want to program a custom search cgi, searching will remain as a problem.
I made the changes and retested three people. Two were able to find comic books and order by email in less than ten minutes. The third test victim found the phone number said they would just call the store. Well, not great but good enough. The resulting design is simple and limited. The design, test, redesign, retest cycle took about 16 hours. It is for a very small business with few resources and a low tech work force. It achieved the goal of giving new customers access to its goods with just a few hours of work.
One of the catalogs is is a link to the Nostalgia Zone's auction listings on Ebay. The information on Ebay can change by the second and Nostalgia Zone lists 50-100 items. It is a critical source of fresh information to bring users to the site. A drawback is that the Ebay link is a deep navigation hierarchy and an enticing escape from the Nostalgia Zone, but at least they exit through a pile of auction goods.