February 26, 2004
The Change Curve
I like interactive images, maps, illustrations and short demos. They have the difficult goal of making complex information clear, in a simple, attractive manner in limited space. This one is a charming illustration of, what the author calls, The Change Curve - various stages an organisation goes through in the process of implementing a successful change.
The interactive part of the image however, is sloppy and confusing. It takes a moment to realise that you're supposed to begin from left. Then, as you mouseover the first part of the image, slowly, a rectangle appears over it and rest of it begins to fade. I don't know why this effect was really necessary, particularly when it's implemented so poorly.
On comparing it with the image on the previous page, I see that they've erased parts of text from the original illustration. It think they did it because it was too small to read and enlarging the image would have increased the already massive size of the page. It's 225 Kb. The markup itself is about 80kb and rest is JS and image files.
Another problem is that the rollover descriptions appear at two places, top and bottom of the image. This hinders readability and confuses further. What's at the top and what's at bottom? Which of these should I read first? This division is particularly problematic for users browsing on 800 x 600 resolution who probably won't scroll down to find text below the image.
February 23, 2004
FedEx Transit Time Calculator
I arrived on this page to calculate international transit time for a FedEx package before sending it. The image shows the second step of the process. The first step involved selecting the two contries and the date of shipment.
I liked the fact that they seemed to have eliminated the "State" field, making it easier for me to enter just city and zip. But after I filled in the city, I learnt that the Zip field was actually optional. This was a bit annoying. Why is an Optional field blocking my way? An easy solution would be to move it alongside city.
The name of the city I entered is not unique so I'm required to select the correct one from given close matches. This is a clarification feature but why does FedEx displays it as an error message? Although they try to reduce the pain by taking an apologetic tone but it doesn't make sense. It's not their fault that there are 18 cities in the US with the name Austin!
I would not have gotten this error if the previous page carried a State field. Obviously, at some point in the design process a decision was made to keep State out of that page. Whether it was the correct decision should depend upon the uniqueness of an average city name entered in the field.
If most users get through to the next step without getting this message then it makes perfect sense, otherwise it's a bad decision. So I decided to conduct a little experiment to see what happens when I entered random city names. I collected names of five US cities from a listing of the safest cities in the country [#1-5] and tried each one on the form. After every attempt I took notes.
1. Amherst
There are 12 close matches
Yes Amherst, New York is present
2. Brick Township
There are 20 close matches but no Brick Township in New Jersey. Instead, I see three matches that are similar:
Brick, New Jersey
Brick Town, New Jersey
Bricktown, New Jersey
I don't know what a real user would do now. Clicking the Quick Help button opens a pop-up that doesn't help. [Note the previous page had a link for finding the Zip code for a location, to which I didn't pay any attention so it doesn't occur to me to head back. Even if I do head back, the link would offer no matches for Brick Township].
3. Mission Viejo
2 close matches
Mission Viejo, California is present.
4. Simi Valley
Bingo! I get a confirmed match.
5. Cary
6 close matches
Cary, North Carolina is present.
So, in 4 out of 5 cases I got the same error message and there were a total of 41 close matches for five cities. Clearly conclusive evidence that it's not a good idea to remove the State field on the form.
In view of the poor support for the city field, it also makes sense to prioritize Zip to a better position - entering zip eliminates the chance of an error. That doesn't mean making it mandatory which would cause further harm. It means making sure the user understands that entering Zip is a better option than just entering the name of the city.
February 14, 2004
cartless
Me: Okay, I'm ready to check out let's go to the shopping cart and... hmm. Shopping cart? Current order? Is that the same thing? I guess. *click*
Why break a Web wide convention and replace a shopping cart with order?
register assurance
found on flickr
I'm stretching the definition of widget a bit with this one, but I couldn't resist the combination of rightness I saw on this screen. Mostly it's about the brilliance of the writing.
1. "Our hatred for spam is difficult to articulate." An excellent and humane way to make folks signing up really trust that their addresses will not be sold.
2. "Your screen name is like a nickname. You can have spaces in it if you like. For example, Johnnie Rotten or My Little Pony are both fine." Warm, human and clear way of explaining the "username" concept. Decent of them to allow spaces.
3. "I am over 13 years old, and have read the fascinating Terms of Use." Use of the word fascinating is enough of a tease to encourage folks to check out those terms. The terms themselves are a bit lawerified, but not bad compared to most. they are neatly bullet pointed and human-readable.
A best practice across board.
February 13, 2004
you are here
found on bbci
Since we are talking wayfinding.... BBCi uses a more traditional indicator to let browsers know where they are: a simple triangle. The past unfolds as a sort of stacked breadcrumb above the item, the future as a indented list below, siblings surround the chosen item. No visual distinction is given between siblings and parents. Is this a problem?
I suspect it isn't. I doubt users trying to decide where to find out how to use zucchinis (a perpetual august problem) won't vacillate over clicking "recipes" and "food" any more than they will "recipes" and "in season."
(courgettes are called zucchinis in america, btw, for the brits in the audience)
systems
from Sci_Fi.com
A few interesting things happening here. First, the navigation is far more explicit than usual-- they clearly state that news is archived by category (necessary? probably not).
Each subcategory has an icon. The helps the navigation pop a bit more, though most of the icons are unclear and could not stand alone -- film and rumors in particular looks mysterious and munged. But even if they are unnecessary, there is little doubt they provide an anchor, as well as a kind of Key to the icons used on the rest of the page.
In typical web wayfinding, a navigation item is highlighted to show state. on SciFi.com, the site area and the article is marked with one of the icons to indicate topic/location.
Is it effective? Well, I'll admit I've never seen a system like this in the lab. But my gut tells me it takes a bit more conscious decoding than most users will do in a task-state of mind. The sci-if channel may work slightly better with viewers of that channel, since it is (presumably) embedded in their mind. But it seems unlikely a reader of an article on film will do more than hop over the icon as they digest the contents of the article.
February 10, 2004
auxiliary navigation
 |  |
Many sites have auxiliary navigation. Apart form the core browse system, this navigation gives access to items such as accounts, wishlists and the like. They are almost always located in the upper right hand corner of the page (like amazon, for example). Expedia tucks this set under the tabs of the main navigation. They are noticeable, and the icons give them a certain tool-feeling and help distinguish them from the browse navigation.
note the classic word balloon for contact, and the ineffective sitemap icon. My Profile is particularly odd-- a face? with a suitcase? lock?
February 07, 2004
February 05, 2004
catalogging
found on McMaster
Mcmaster.com is a catalog of hundred of pages of stuff. hoses, wrenches, screws, struts-- you name it. it is widgetopia. and each catalog page has a nice little set of article tools.
because there are so many pages, it makes some sense to allow users to leap forward via a type-able pagination. Also, it offers a subpagination to allow users to know how many pages on a give subject they can look through. this subpagination is hidable to allow more room for seeing product. it's simple and slick-- works well.
Also of some interest is how they handle the catalog page tools-- each one opens on the same page. Admittedly page options is not an intuitive way to get pdf, and its binary nature suggest a on/off setting rather than opening a separate panel (for example page type: pdf | html ) but it is great to be able to say, email the page, with out leaving your hard sought catalog item.
(note the standard word-balloon for feedback)
February 03, 2004
listings
found on citysearch
So much to say, so little time to say it...
that "open in new window icon" isn't-- appears to be an icon for a site with profile. I would have thought the photo was already doing that admirably.
nice rating visibility, but reads a bit like the mile indicator-- but a quick orientation helps one around that. A star background might have messaged stronger ratingness.
very scannable.. I'm glad they use whitespace instead of banding. banding is so often visual noise.
okay, off to breakfast...
where to, james?
discovered on CNN.com
interesting way to annotate links, to give the user a better idea of what to expect upon click (and perhaps allow for plausible deniability when a particularly atrocious site is linked to?)
choose -----
discovered on CNN.com
what language is --------?
It actually is not particularly a troublesome blunder, since there is no button,and thus you can't submit the separator. A selection of Korean takes you to the Korean site-- but not the same page.
tiny fingers
spotted on tinyfactory
Tiny Factory makes veryhip T-shirts. You flip through the t-shirts by clicking these pointing fingers, whihc is lovely and retro and barnum and baily like.
February 01, 2004
exercise chart
From 1976design.com
A nice view of the author's daily exercise that's simple and easy to understand. Even better, it uses a combination of HTML tables and div elements to present the data, overcoming the need for images. My only complaint is that the text is a bit light, but it looks sharp in the otherwise beautifully designed weblog.