Recently in Usability Category

Periodic Table Design: The Good, the Bad and the Pretty?

| | Comments (0)

One of the most unique reference tools people will use is the periodic table of chemical elements. This is a tool where not only each block in the table has information (about each element), but the layout also has a meaning. It's no wonder the periodic table has become so iconic. It's even branched out into visualization methods, typefaces and other non-chemistry uses.

The Good

And....the periodic table is something that cries "hypertext". Don't you want to click each cell and find out more? Well I would. Especially if I had homework due the next day. And there are some great online periodic tables out there. A pretty good basic hyperlinked table is the Wikipedia periodic table which links to articles on each element. Another basic hyperlink table is at Chemical Elements.com (note light advertisements).

If you just need a PDF printout with everything verified, you can use one provided by NIST. NIST also has an online periodic table, but it's detailed, you probably need a degree in chemistry first.

The "Pretty"

And then there are some creative periodic tables, but nothing quite as creative as this art based Flash periodic table from the Royal Society of Chemistry. Creative, yet very, very perplexing.

First, I will say that the art is gorgeous, but what do the symbols mean and wheres the labels? For instance, if I want to find a measurement for the element mercury, I would have to remember where it is specifically (vs. a vague general location) then click on that symbol (which in this case is an old alchemy symbol). Huh? There is a more standard HTML chart form, but I'm still having problems understanding all the images.

I'm thinking this is meant to be more of an "explore the periodic table" rather than a pure reference tool, but is it serving its purpose? When I showed it to a group a people, we became so fixated on the mysterious images that we asked questions like "Why is there a chicken on the periodic table (Ga/gallium)?" rather than the more interesting question of "What does gallium do?" (apparently it helps make the blue in Blue-Ray).

I do think that periodic table can be exploratory. It's become the basis of the pop science book The Elements by Theodore Gray which is now an iPad application. It too has gorgeous pictures, but also the symbol and periodic table info on the same place.

Another one in a similar vein (which even has YouTube and Wikipedia mashups) is http://www.chemicool.com/, including an experiment where you can melt gallium in your hand.

Art vs. Design

I guess the RSC Flash periodic table gets to the issue of art vs. design and what the goals are. The interesting thing about art is that it can succeed without being functional, whereas I think needs to be functional in order to succeed.

For instance, I've always loved the Color Wheel Watch which has colored filters which rotate and cause color changes throughout the day...but I've never gotten one. It's beautiful, but I am not sure how quickly I could use it to tell time - for me it would be kinesthetic art. The same is true for this this algebra watch.

Am I being picky? Maybe. We could all use some kinesthetic art from time to time. But sometimes, I need a tool to quickly tell time or look up the atomic weight of an element, and to me the standard periodic table is a beautiful way to do that. The irony is that the art of the RSC table has interfered with the design instead of enhancing it.

Please Bring Back Vanilla Google

| | Comments (0)

I have a great respect for the folks at Google, but the last two days, I have been very, very perplexed about some design choices. Yesterday (Sep 7, 2010), we saw the Google logo converted into flying globes and today (Sep 8, 2010), I see a new auto fill "instant" search feature.

I found both so distracting I fled to alternate search sites including the still living altavista.com and Google Canada. Based on my Twitter feed yesterday and user forum response, I don't think I was the only one perplexed (but I did discover Google.ca that way). I doth protest and do proclaim that I want my vanilla Google back....Please.

For the record, I do appreciate that Google wants to show off HTML 5 and CSS 3. I actually liked the animated buckyball logo shown a few days earlier, but it differed in a key way from the Sep 7 logo - it wasn't distracting.

On that day, the golden capital O ever so gently expanded into the delicate miracle of buckyball carbon. The link even pointed to information on buckyballs (per usual). In contrast, the balls scattered themselves around every time I used the mouse getting in the way of my search field. I am not officially diagnosed with ADD, but even so, I could hardy find the search field amidst all the chaos. Ugh. Even having them settle down permanently would have been better than this.

Even no worse, there was no official explanation when you clicked the link. Why? Marketing? But hasn't Google been about us the consumer rather than marketing themselves? Hmmm.

Today's instant search is equally troubling. I liked the feature of possibly queries revealing themselves as I type, but an entire page of text? Can't I just finish typing before you give me the answer? Are you done loading yet? Is it safe to click? It's true that you can disable it, but to do that permanently I will have to log into my Google account, and I am wondering how much I can trust that too.

And I guess that's my ultimate point - am I losing faith in Google? Google has a lot of unique services, and at $0 (U.S.), you can't beat the price. But for $0, I also don't get any of Google's financial incentive to invest in my privacy. With Google services multiplying left and right, I am joining those concerned with Google's accumulating data

And pulling marketing stunts like mystery animated logo doesn't make me trust them any more. It kind of breaks the illusion that Google is about the love and not about maximizing profits. Not that I object to profit - it's actually more transparent.

So please Google, be careful with your new features. We want to trust you, not be scared by privacy and usability fails. Remember what is happening to Facebook's reputation because of their privacy fails.

There is a bright spot in this though - the people are out there and they are watching. I know because I found them on Google. In that sense, the Internet is working better than ever.

A Multitude of "Here" Links

| | Comments (0)

Thought I would share a good example of "here" links gone extreme. A minor accessibility & usability recommendation which is often violated is to avoid link text using "Go here", or "Follow this link" and replace it with meaningful text. For instance, instead of saying "Windows Instructions Here" and "Macintosh Instructions Here", it's much better to say Windows Instructions & Macintosh instructions.

I could explain why this is a guideline, but I think the following example captured from a political blog will show it even better

Text says: for still more see Obama Foodarama followed by 4 links saying here then and + 5th here

So first, you will see that there's a great element of mystery about all these 5 destinations called "here". If you're on a screen reader and listing out links, "here" is always a mystery. I'm guessing they're external blogs/Web sites, but which ones? Are any of them from the Federal Government, CNN, another blogger? You can only tell by going there...if you dare.

The other objection to "here" links is that they're relatively small. If it's buried within a sea of text it can be easy to miss visually and harder to aim for, especially if you have motion impairment issues in the hands. The image below shows the peril of a buried "here" link.

Text:The service has been tested and supports the following email clients and configurations are available here (link). Nonlink List of clients follows

I don't know about you, but my first instinct was to click the text for my particular e-mail client and go directly to that page. When I couldn't, I panicked until I finally found that tiny piece of "here". However, a link saying "Configuration Instructions" would have stood out more resulting in a little less panic and frustration.

Jakob Nielsen & Twitter Usability

| | Comments (1)

If Jakob Nielsen is writing a usability article, we know Twitter is now 100% mainstream. Interestingly, this article though only covers release of corporate news information with tips for both writing punchy copy and for timing (9:01 is better than 9:00).

A little chillingly though, he indicates that Twitter "decay" (when people stop clicking) is fast. Twitter updates so quickly that messages are very quickly lost in the shuffle. As Nielsen comments "Once [the messages] scroll off the first screen, they're essentially 6 feet under." As a result, he still recommends e-mail for messages with a relatively long life span so that users can sort through their "pile" at a later date. No argument from me.

Metadata over Content - How to Build an Unusable Archive

| | Comments (0)

I like to troll for new academic sites in my various lists, especially the Internet Scout Project, but I find that a large percentage of online archival repositories are so unusable I've stopped adding them to my own links library. They are just more trouble to use than they're worth ... which is sad because I'm bypassing great information on civil rights, diversity, Pennsylvania history and more. And I bet most people who aren't professional archivists/scholars are too.

There are a lot of symptoms of an unusable archive (I'll get to those), but I think the main problem is that the content experts are so focused on "metadata" that they've forgotten the context. The result is that you pretty much already have to know what exactly to look for before you can find anything. And by exact I mean keywords like "Jackson, Andrew -- 1767-1845 -- Innauguration, 1828" - got that?

The Quest for Ladybird Johnson

So to clarify my angst, let me pick on a site which has some great resources, but isn't quite so user friendly - the Library of Congress Portraits of Presidents and First Ladies, 1780 - Present. First, let me say that my inner instructional designer salivates because I am fairly confident that somewhere in here is a public domain photograph of President Bush 43 in here somewhere. How many bloggers need a legal image of President Bush? Or President Clinton? Or maybe a student would like a picture of Abraham Lincoln? I do believe this is our tax dollars at work.

Since I'm not a professional historian, I'm really hoping there's a list of Presidents in chronological order (or maybe a second alphabetical order, just in case). Then I can find my target and download my image. So let's try the Browse link.

As you can see I do not get a list of presidents, but a list of all keywords (president, location, event, etc) in alphabetical order. A lazy searcher (the vast majority of us) will stop here. A more persistent searcher will notice that keywords include things like "Adams, Abigail" - meaning that if I target the approximate location of the presidential family name, I may get a hit.

So I will actually look for Ladybird Johnson, which looks to be in the "Grant..." to "Photographic..." range. Fortunately there is one entry for "Johnson, Ladybird."

And finally, I get my photo (very striking if I may say so), along with lots of supporting metadata, like the date (interesting), call number (will I be going to DC anytime soon?), the medium (a photographic print - duh) and digital ID (I may actually need this if I lose the URL), and, best of all, alternate subject headers (if I found it, do I need these now?).

What I don't find is any information on what Lady Bird did, what her husband did, when she lived or died, when she lived in the White House or even a link to any sites a historical society might maintain. I can infer that her husband was Lyndon Baines Johnson, because she is "Mrs. Lyndon Baines Johnson", but not all readers are good "inferers."

I'm sure this information is useful to the LOC staff, but I'm not sure about the rest of us. They do say that the Reproduction Number can be used to order high quality prints, but this is really not clear on the page as is.

Spelling Out the Steps to Unusablity

I'm picking on the Library of Congress, but it really is a common problem. I cannot tell you how many sites:

Honestly, if I need a free photo, a lot these sites might be very useful. But I feel like I'm missing so much more in all that metadata.

I should add that if you really want to make an educational archive especially unusable, you'll have to add these steps

  • Call the list of external links "Resources" (it's more academic that way)
  • Classify artifacts with abstract scholarly categories like "Discover" vs. "Learn" (not of all this can be bad translation issues).
  • Mention all sources of funding on the front page (that's why they give out the big bucks), but skip the table of contents, integrated tutorials or anything that a non-professional could use.

I think I'll be visiting Wikipedia now. They might have a free photo I can use as well.

Sites that Do Work

You can build archives/educational sites for non-scholars. They key is to use comprehensible search terms and put information into more context. Some of my favorite archives.

I live in hope that I may learn some of these lessons myself.

Paper Prototype Examples

| | Comments (0)

From the Penn State Web Standards list
http://deeplinking.net/paper-web/.

For my own reference, this site has some good examples of different interfaces sketched on legal paper (and maybe some cocktail napkins). Also has a video showing a usability test with a paper set of paper prototypes.

While I'm at it, I should add this link from A List Apart
http://www.alistapart.com/articles/sketchingincode

Interestingly the author argues for a "medium quality" prototype because wireframes may be so bare that users may not be able to infer functionality. FYI - The problem with "professional" quality is that users get distracted with suggestions on fonts and colors (been there, done that).

I've had some success with the "mid level", but I've seen projects where the bare paper does work, so the key seems to be keeping the concept minimal enough for users to focus on function and not fonts.

The Home Page is now the Orientation Area

| | Comments (0)

At the Web 2008 conference this year I was able to listen to the keynote from Steve Krug, the author of the classic usability book Don't Make Me Think.

The one take-away I got from that session was that modern users expect the Home Page to kind of be an orientation page to the site (or part of the site). That can have several interpretations, but to me this would include linking to a table of contents, a short statement of the purpose of the site, an explanation of some tools , one or two unique features and who to contact for more information. Interestingly, the home page is likely to be the second or third page visited (after the content page Google found for the user).

It reminds me of another metaphor heard from a usability expert of comparing the home page to an entrance of a store or office complex rather than the cover of a book. That is, when you enter a new store, you may be looking for aisle labels and maybe some hot sales. You may or may not be interested in the perfume lady.

P.S. My other impression was how accurate his observations of the higher education Web culture. In fact, I was wondering if he had sent an astral projection of his spirit to some of the Web design meetings I've been. Spooky

I just ran into the site German GROW, a site with cultural links for German teachers at http://www.aatg.org/content/view/255/ It's run by the AATG (American Association of German Teachers).

Like the icons? It looks very Web 1.0. But click each link and it actually takes you to a del.icio.us page that the AATG has set up. For instance the Musik link goes to http://del.icio.us/GermanGROW/Musik As you can see, the AATG has established their own folders within del.icio.us.

This is an interesting design which I like because the interface is intuitive to a Web 1.0 educator audience, but actually leverages Web 2.0 technology. If you do understand del.icio.us, you can go directly to http://del.icio.us/GermanGROW/ and even suck in the RSS feed. You can even add your own resources if you know how to tag.

But if you haven't had a chance to get acquainted with tagging yet (and many instructors are still in this position), the Web 1.0 interface will still let you get to that content without learning a new set of terms. As my colleague Tim Perry noted recently, "RSS remains an elusive concept."

The Organization is still in the URL

| | Comments (1)
One issue we keep wrestling with in ITS is how do we hide our organizational structure so that our Web presence can be more seamless to the non-ITS savvy user.

An interesting case is Studio 204. I must say it is a well-designed site and nowhere does it mention that it's tied to ETS, TLT or even ITS. It just says it's a video studio any student or instructor can access.

However...in order to access the site, I MUST know it's a part of TLT because of the URL http://studio204.tlt.psu.edu/ (see that little "tlt" between "studio204" and "psu.edu"?). My first guess was "studio204.psu.edu", but alas I got a 404 error.

I'm really not trying not to play a blame game here (in fact I can hear some of you grinding your teeth an muttering "I know I know"). I also know that you do have to go through "channels" to get a URL like "studio204.psu.edu" - although I also know that it's not especially burdensome.

But if you're ever wondering why people can't find our valuable resources - maybe it's because we've made some of our URL's more exotic than people can digest.

A Jakob Nielsen Eyetrack Study

| | Comments (0)

I regularly read the Jakob Nielsen usability newsletter, and this week he presented results from some eyetracking studies from the U.S. Census Bureau site. In the scanning images, red shows frequent hits,

http://www.useit.com/alertbox/fancy-formatting.html

The point that struck me the most was that users were attracted most to navigational elements - either the search box, the left hand navigation buttons, the category links or the links list. Interestingly, the users skipped over the red text with the population countdown and the bottom Annual report link even though they were meant to be highlighted.

According to Nielsen, anything that looks like it could be an ad is typically ignored, so too much highlighting can be just as bad as too little. In this case the red text combined with the large font made the census count look a bit like an ad. Even worse, it's "not navigation", so users are really not paying attention.

I suspect that red text is most problematic on a home page where lots of other navigational choices are presented. It would be interesting to see how users react red text on a page with more information.