Friday, August 25, 2006

Worth a thousand words? Part 2

Worth a thousand words? asked readers to look at the following series of icons (taken from an active interface in a web/software product) and describe what type of function the user would expect to access after clicking on each:

In actuality, the icons (from left to right) are meant to be representative of a logical learning procedure, from reading about the particulars of a task (for example, "cut and paste text" in MS Word) to actually performing it in a training setting:

  1. Prepare -- Information is presented on-screen as it would be in a study guide or text book. Students read an overview of the task, the various means of accomplishing it, and the advantages that the task provides.
  2. Observe -- An animated video clip demonstrates step-by-step how to accomplish the task, with both an audio description (can be toggled on and off) and descriptive text in the event the sound is turned off or otherwise not available. The clip runs continuously from start to finish, though a VCR-type control can stop, revert to a previous step in the process, or skip to the next step.
  3. Practice -- A self-paced version of the clip in "Observe," with accompanying call-out boxes that guide the user through each step of the process.
  4. Apply -- The user is asked to actually perform the task based on commands generated by the system. The user is allowed a specific number of tries for each step, and the system provides feedback as to whether the steps have been performed successfully or unsuccessfully.
  5. Exit -- Closes the content player window and ends the training session.


I suspected that at least 3 of the icons had a huge gap between the image and the function it represents, and the responses I received provide confirmation:

  1. Pencil (Prepare) -- All responders expected this icon to lead them to an environment where they would be able to "write," "edit" or "draw" -- not read information off of a page.
  2. Eye (Observe) -- One responder wasn't sure whether this was in fact an eye at all, but all expected to be able to "view," "preview," or "read" something. Technically speaking, this could be interpreted as being a successful representation of the function, but I would submit that an eye is far too abstract -- i.e., every facet of the content must be viewed in order to be useful, so why would an eye make particular sense here?
  3. Hand/pen (Practice) -- Half of the respondents said they expected to "write" or "edit"; the other half thought the image was too similar to the first one to be of any descriptive use, which is another way of saying that it does a poor job of communicating the concept of practicing something.
  4. Mouse (Apply) -- All respondents said that the icon indicated an action related to the mouse, either "move mouse," "drag-move," or "click here." Because actually performing the task(s) requires heavy use of the mouse, I would argue that the image might make a fairly good representation of the function, but that alternatives should be explored.
  5. X (Exit) -- As one might expect, all respondents correctly identified this icon as a "close" or "quit" function.

Next time, my suggestions for changes -- though I would be greatly interested in (and grateful for) any suggestions or thoughts. As always, feel free to email me directly or send a comment using the link below.

Sunday, August 20, 2006

Worth a thousand words?

Not quite a month into the new position, and already I'm being thrust head first into a number of facets of HFID. Among the projects I've been called in for varying degrees of consult, design and/or recommendation:

  • Review and recommendation for an e-commerce environment
  • Redesign of a content player
  • Redesign of an LMS (learning management system)
  • "Usability test" (really a series of user design feedback sessions) of a sub-site

Of these, the content player project provides my first opportunity for using the blog to hopefully gain some insight into an HF issue:

Most computer users are familiar with the many banks of icons featured in browsers and software applications, such as the following from Microsoft Word:


The power of good iconic representation is that it provides an instant visual cue for the functionality that it represents. Even someone not well-versed in Word should be able to determine that the second icon from the left represents Open a File, or that the second from the right represents Print. These are examples of icons with a good semantic distance (closeness between the image depicted in the icon and the function it is intended to represent).

The content player in question exists as part of an software package that helps instructors teach students how to use different software applications. By launching the player, students can view descriptions and demonstrations of tasks that aim to help them learn to use the application more easily.

Among its design features, the player has a bank of icons similar to that of MS Word. In offering design recommendations, I have to be able to provide some user-based rationale for either (a) keeping one or all of the icons as they are or (b) recommending alternatives.

So I put it to you, the readers . . .


What type of action does each of these icons represent?

Feel free to email me or post a comment directly to this blog entry. I'll reveal the answers in the next entry, as well as what readers have to say about them.

As always, my sincerest thanks in advance for your assistance.

Tuesday, August 15, 2006

A break in the madness

The ol' blog has had to take a back seat for a few weeks -- a new job, home maintenance emergencies and typical summer time demands have severely restricted my "think" time.

It may be a few more weeks before I truly get back into the swing, though material for the fall looks extrmemely promising -- Universal Design (design for the elderly, children, handicapped and Section 508) and Medical Informatics (not sure what exactly that means yet) beckon from September through December.

In the meantime . . .

I came across a good article from Lanford and Hubscher (2000) about the facets involved in establishing trust in e-commerce enviroments (and how usability plays into it):

A trustworthy web site should therefore attempt to minimize the amount of uncertainty involved in the user’s decision making. Furthermore, if a decision can be postponed or even altogether omitted, the need for trust, and thus, risk, can be even more reduced.

Hope the summer is going well.