Designing the web experience for children.

David Lumerman,
Lil’ Fingers Storybooks.

Small children offer a very specific challenge to experience designers because they use websites differently then pre-teens, teenagers and adults. In fact, usability research with children has often been considered either too difficult to carry out with unruly subjects, or not necessary for an audience that is satisfied with gratuitous animations and funny noises[1].

Children five and under explore the web through guided discovery, looking for large visual cues like clickable maps and bright colorful graphics. They will click around looking for fun and interesting things to happen when they move their mouse. This is different than their older siblings who seek out and identify with cool looking graphics. Kids are keenly aware of their age and know what is designed for them, and what is designed for their younger siblings[2].

The “sense of scent” [3] popularized by Jared Spool , where users will follow visual cues to get to their goal like little breadcrumbs, manifests itself differently in young children. Where adults skim text for key words or ideas that match the expectation of what they are looking for, young children without developed reading and writing skills will gravitate towards pictures, icons, colors and graphics to build mental models of the world around them.

Color and graphics becomes a much more important to designing the experience. This can be seen when children from an early age identify with familiar icons and associate them with complex words or ideas. What child cannot identify the golden arches of McDonalds (red and yellow letter M), the script Coca-Cola logo (red letter C) or the graphic on Superman’s chest (red and yellow letter S)? All of these pose strong iconography and primary colors.

Studies with kids done by Microsoft[1] indicate designing icons meaningful to kids, and even styling the cursor to be more kid friendly to indicate the tasks to be performed and provides specific visual cues which to adults, would be gratuitous. Examples of such cursors would be graphically stylized magnifier glasses indicating zoom functions and paintbrush icons.

Children, especially young children, love and identify with characters. They can identify and derive comfort from them, and from an educational standpoint characters aid young children in the learning process[4]. As much as adults detest “Clippy” from the Microsoft suite of products, young kids love these types of characters. The enjoy interacting with them, and they in turn help them perform tasks.

Along with color and iconography, interaction points need to be findable by small hands. Fitts’ law[5] indicates that the larger and closer the target area, the easer it is for a user to navigate to it. This is especially true for curious children who may not have the dexterity and fine motor control of their older sibilings. For this reason larger more obvious target areas make for better clicking.

Buttons that look like buttons produce better results in all age groups, but take on a different meaning for youngsters who rely more heavily on icons and do not have a full understanding of general internet conventions that are learned by repetition and experience when using web sites habitually.

Studies by Jakob Nielsen[2] found that “children are incapable of overcoming many usability problems, this combined with kids' lack of patience in the face of complexity, results in many [children] simply leaving websites”.

Underlined blue links that take you from page to page, left navigation to traverse a site’s taxonomy, clicking logos to go back “home”, and advertising banners that take you “away” to a new site are not easily understood by young children, and as a result cannot be used as effective navigational tools.

In fact, banner ads pose a particular problem because children do not see these as separate from the experience, but as part of the experience. As a result, they are more apt to click on banner ads.

Another item to consider with young children is a shortened attention span. This means that not only should activities be fast loading and easily accessible but should be short in duration, and if possible be savable or recoverable to the point where the youngster last lost interest. This is mostly for the adult’s sanity to avoid replaying the first few activity sections over and over again.

Because of this limited attention span, instructions need to be short and memorable. Adult users don’t read long on-screen text item, children in contrast, may not understand or remember them, so short and sweet increases task completion.

Sound and music is also something that distinguishes this group from older users. Small children are generally delighted when their movements cause beeps, bangs and snaps. Their parents however, not so much.

Because of these limitations many websites are designed with co-discovery in mind where the heavy lifting, such as navigation and activity selection, is done by someone old enough to easily circumnavigate these pitfalls, leaving the activity horseplay to the kids.


Author

David Lumerman has a graduate degree in Human Computer Interaction (HCI) from Rensselaer Polytechnic, and for the past 10 years has developed Lil’ Fingers Storybooks (www.lil-fingers.com), a online computer storybook and activity site designed for young children.


References

(1) Hanna, L., Risden, K., Czerwinski, M., Alexander, K. The Role of Usability Research in Designing Children’s Computer Products. 1998. Microsoft Corporation. Online: http://research.microsoft.com/~marycz/druin98.htm

(2) Nielsen, J., Kids' Corner: Website Usability for Children. 4/2002. Jakob Nielsen's Alertbox. Online: http://www.useit.com/alertbox/children.html

(3) Spool, J., Designing for the Scent of Information. 11/2004. User Interface Engineering. Online: http://www.uie.com/reports/scent_of_information/

(4) Blowers, H., Bryan, R. Weaving a Library Web: Guide to Developing Children’s Websites. American Library Associations. 5/2004; pp 71-73

(5) Fitts’ Law. Wikipedia. Online: http://en.wikipedia.org/wiki/Fitts_law

The usability of Twitter

Twitter is a social networking site that allows users to broadcast small snippets of text to the twitter universe and your own small subset of this universe for friends and lurkers to read your posts. Posts are presented in chronological order with the newest posts on top and older posts fading off the page.

Twitter is crack presented to the blogosphere. But what makes it so addictive has a lot to do with good usability. Presented below is what twitter does right for the user and why it matters.

1. Immediate satisfaction
Twitter updates live every four minutes and hitting the refresh gives you new content immediately.

Posting is also as simple, usually showing up within seconds of posting, which then gets appended to your “recent” list.

2. Positive Identification
It’s not enough that text from friends and strangers parade across your screen, but there are photos associated with these text posts. Seeing the photos makes you want to read the text. It is no surprise that pretty young girls who post quirky interesting snippets have lots of followers. arielwaldman and kitta are followed partially because they have pretty faces and partially because of their interesting prose.

On my twitter (dlumer) I have numerous friends that have an associated photo and a few that don’t. I find the ones that have photos more interesting to read, even though what they type may not support this tendency. People like that human connection. They gravitate towards it.

3. Low cost of action
Twitter lets you collect friends easily. Simply by clicking on their icon or name you can “follow” them simply by clicking a follow button. There is no long process. It is very easy; making is easy to collect lots of friends or pseudo-friends. These friends can reciprocate just as easily and follow you.

Once the two-way communication is going, you can easily post back and forth in an ongoing dialog, like a party line that nobody hangs up on.

4. My Network, not your network
While you can surf the public timeline, the power of twitter is in the local network that appears as all your and your friends’ latest entries with the icons of people you specifically follow. This is the important “web 2.0” part, where the user is looking a collection of posts they assemble, not one based on groups like a mailing list. Each person’s twitter is unique to himself or herself, only containing the people you choose to follow – or “listen to”. If someone posts too much or turns out not to your liking, you can simply stop following them.

5. Context is king
Along with your specific view is the idea of context of the text. It is not enough to know a friend has posted, but it helps to know when, and sometimes how. Twitter has both, showing the messages with how long ago they posted and what type of device (web, txt message, applet) delivered the message.

From a systems perspective, the time requirement is satisfied by simply time stamping each entry. But from the user’s perspective it is much more important to know how long ago from this point in time a message was posted.

Approximate times are even better, because they are concepts easily assimilated. Knowing that a message was posted “about 3 hours ago” is infinitely more usable than knowing a message was posted at 4:34pm on January 8th. In the first instance the user must do a mental calculation for not only the date and time posted, but also the current time as well, to get to the same place as “about 3 hours ago”. If the cognitive load is greater than the information gained, the user generally disregards the mental calculation.


There are a couple of instances where Twitter falls down however as they try and balance the ease of use and information overload. The below presented information is not as much cut-and-dried criticism, as problems or opportunities for further refinement.

1. If a tree falls in the forest...
One of the largest holes in twitter is the inability to point messages to people who do not follow you. There are many instances where you follow someone, and read a post where the poster has asked a specific question to the group and you respond to that post – but the original poster never sees it because the don’t follow you.

Understandably there are good reasons to not allow just anyone to post to anywhere. You need only look in your email box’s spam filter for hundreds of reasons. The problem I see however is the lack of feedback that the message will never be seen. While I have no hard data to confirm this, the anecdotal data I have is based on peoples various posts, when they realize that they are missing out on posts and begin following people who have responded to them.

Additionally, the system does not have an in system way to “poke” a user, letting them know you are responding to them.

2. My message is bigger!
Twitter is designed for short bursts of message content. This message content may be a bit on the small side for many users. Many a time you get posts broken into 2 or 3 messages to get the whole thought out. This may be the extreme example, but I personally would love about 20 more characters most of the time.

To Twitter’s credit however they dynamically show you how many characters you have left in your message, and even visually change the display when you are about to run out of space. This is a tremendous step up from instant messenger’s “your post is too big so you are out of luck” message.

As you can see, overall twitter is a great assemblage of micro-blogging and social networking that allows people to easily stay in touch with others, and isn’t maintaining the human connection with computers what it’s all about?

Usability of Social Networks (LinkedIN)

The cornerstone of user experience is the trade off between what you are required to do and what you get for doing it. In the case of social networks, what you get can be significant, so much so that the user is willing to go through multiple steps to optimize the experience.

LinkedIN
One such network is LinkedIN. LinkedIN, for those that do not know is a social network to build and maintain professional contacts. The idea is simple. I know people, you know people, and these people know people, forming a network of associations.

LinkedIN is a good example of a social network web application. Here are some highlights (and a couple of dings):

GOOD: Low barrier to Entry
New people can be added to the system easily with only entering a couple of pieces of information. This allows the user base to grow and develop without full profiles.

This is generally one area where software development gets it wrong most of the time, looking at each user as a record, and each record should be as complete as possible, this makes the linkages of data easier for the programmer.

Unfortunately this creates a high barrier to entry where most potential contacts would bounce off and not be included in the network.

I recently began using this service, and I have a few people with only one contact (me) and only info about the associated company.

Making it easy to have incomplete records makes it easy to exploit these new semi-users in the future.

GOOD: Keeps the user informed about other contacts
LinkedIN also has a nice feature to show what your other contacts are up to. If a contact added a new connection, or recommends someone then it shows on your control panel, keeping you informed.

GOOD: System Status
There is a status area showing how complete your profile is. This allows you to take the next step in the process, making the record more complete. This makes the programmers happy and enhances the overall network. It also helps convert semi-users to habitual users by indoctrinating them slowly into the site.

GOOD: Graceful Security
The application will lock the user out after a pre-determined period of time. This has become standard for secure applications. What is not standard is doing it gracefully.

Many applications will time-out forcing the user to re-enter credentials and then either reset their session to the login point or take them to where they were last, losing their edits. The LinkedIN system is smart enough to retain your edits, log you in and then complete the process. Very sweet.

BAD: Editing Previously Entered Information is Difficult
While some of the entries have [edit] links, many do not. In fact this is an instance where an edit link is detrimental to the user.

The edit link next to only the current contact (and not other contacts) makes the other contacts appear in-editable.

Other contacts are viewed in their completeness with edit links, but this is below the fold(you need to scroll to get there). Because of how the layout appears to have footer information (an ad to link out to your public profile on your personal website) giving the impression that there is no more information below that point.

By changing the [edit] link to link to lower on the page, they could inform the user that these items are easily editable.

BAD: Tab Woes
The labels on tabs in the application can be a problem. While most are straight forward, the ones for the profile are confusing. Similar names do very different things. "Edit my Profile" is simple, and allows the user to edit the profile. The "Edit my Public Profile" gives the user the impression that they can have two distinct profiles, one for the public and one for friends/colleagues. This is not the case, this option simply allows the user to show and hide profile sections.

It would be better to call it something different, possibly profile preferences.

BAD: Profile Differences
Related to the tab woes is the way the profiles are displayed for your personal contacts and for you viewing your contacts.

The interface tabs change depending on who's details you are viewing. Keeping this consistent would allow the user to seamless jump between the two.

While not a big deal, it does add to some jumping about to see things like recommendations.


Social Networks in General
Social networking is akin to a video game where the user hunts for the prizes and adds them to his bag of goodies and continues to forage. LinkedIn propagates this by showing your contacts and your contacts contacts putting you in a virtual death match of adding to your network.

Social networks are the new version of the social club or local pub where you can keep in contact with others, if only virtually.

How easy is it to print?

This article is for those of you who have been hardened on word processors for what seems like your entire life.

To you, the idea of having trouble printing is nonsense. Printing is one of the core functions on a computer. In fact, when you first got your Commodore 64 one of the only things it could do was print, so when I say that printing is hard, you should find it hard to believe. But it is.

Last evening I spent about 45 minutes with my father trying to guide him to print a document from Microsoft Excel. Now, my father is not a dumb man, he may be a bit on the technology light side, but in general he can navigate around pretty well. But, when he needed to print his document so columns were not being cut off he was lost.

Step 1: Hidden Options

Starting from the beginning, Microsoft has decided to hide options at random from menus. So, to print, you can’t simply select “print”, first you need to expand the menu to show all the menu options. Not ideal, but definitely doable.

Step 2: The print menu
You might think this is where our story begins and ends, but on the general print menu there is no option to change the print orientation. This is odd, since most pages are set up portrait orientation, but most spreadsheets are landscape orientation.

Step 3: Properties
The properties option contains our orientation menu, along with a host of other options, most of which would confuse my poor father. The problem here is there is no preview to see if your data fits on the page. And, there is no easy way to get to the place to see the data (the previous screen), so you need to click ‘ok’, then preview to see the result.

Step 4: Clicking preview
If the preview is not to your liking, there is a handy “setup” link, which, you would think, would lead the user back to the complication whence you came. But alas, is brings you to a different ‘setup’ menu.

Step 5: Send the file to me and I’ll fix it.
In then end, my father was not able to print his spreadsheet in its current format for many reasons. Some of which were technical and some because he did not have the knowledge of Excel to make the modifications necessary to fix it.

While many of us have reached the point of Excel wizardry in reformatting screens to our liking, I would suspect there are just as many who are confused and end up taping together multiple print outs unnecessarily. To this, I say the failure is in the system. The system should be smart enough to know the orientation of the document and be able to change (or suggest to change) the orientation to our needs. The system should also make it simple for the user to find commands, and present the most used options in a single location without the need to navigate several screens. Additionally, the system should make it easy to navigation to a single representation (one view) of user options and make it easy to go back and modify them without the need to guess or start over.

And the user... well, the user should learn how to use Excel.

Recognition in young children

At the heart of advertising is rote memorization. In the advertising world they call it ‘branding’.

Branding is the process by which name, logo, slogan, or design scheme becomes associated with a product or service. A brand is a symbolic embodiment of all the information connected to the product and serves to create associations and expectations around it (from Wikipedia).

Through these associations a company wishes you to make one choice over a competitors choice. A side affect of these brands is the snippets of information about the products that get stuck in the brain. It could be as simple as a logo, like in the classic Coca-Cola logo or the iconography of the Pepsi Cola logo, it could even be the colors like the red and yellow of a McDonalds logo, or it could even be the jingle associated with the product like the famous B-O-L-O-G-N-A, which brings me to the interesting snippet of this discussion.

If I were to speak to any child that grew up in the 70’s how to spell ‘bologna’, every one of them would get it right because of the mark of Oscar Meyer’s advertising has made on our consciousness. Today’s children do not know how to spell bologna.

But what they lack in bologna skills they more than make up with a myriad of other products, which is what led me to thinking on this subject. There is a product I was introduced to called “PROMPTZ” which utilizes product imagery to focus young children to learn letters, words and sounds though cognitive mapping these associations for active learning.

Cognitive maps are a method used to structure and store spatial knowledge, allowing the "mind's eye" to visualize images in order to reduce cognitive load. This is where it gets interesting, because to a 4 year old, it is much easier to remember Eeyore than to remember that what sound an ‘e’ makes, and then they can get on to remembering who all the Powerpuff girls are.

This mapping is how many user interfaces work today. A designer or usability person develops an interface based on something familiar. Excel is designed like a checkbook, and PowerPoint designed like slides in a slide carousel. It is actually these links to the familiar, which increases our initial adoption of functions and features within software. Mental mapping puts things in a familiar environment in our minds so it can be cataloged and understood. Once these are present in our minds it is easier to expand this base of knowledge to less familiar territories, to learn new skills, but keeping the basic framework of the familiar to fall back on.

Elevator Usability

At first glance you might think that elevators are pretty usable form of conveyance. There are however many circumstances where the usability of an elevator may be in question.

The use case is simple.

1. The user wishing to go up (or down) pushes a button to indicate to the system that a passenger is waiting. Based on the other passengers waiting on various floors the elevator eventually arrives to retrieve the passenger.
2. The doors open and existing passengers get out, the new passenger gets in to the appropriate elevator (if there are multiple elevator cars).
3. The passenger depresses the button corresponding to the floor of his or her choice.
4. The elevator stops at all floors corresponding to buttons that are pressed between the current location and the final destination.
5. When the passenger arrives at the destination requested they exit the elevator.

If an elevator was actually as simple as it seems there would not be ten pages of results in google on elevator etiquette.

Apparently this is a real problem for some people. My favorite is a site called elevatorrules.com, which contains written rules and comments on how to use the elevator. These include requesting passengers who are going up or down a single floor to take the stairs.

The simple decisions necessary to determine if you should enter an elevator become complex based on the affordances (things to make using something easier) built around the elevator and what you find before entering the elevator.

In simple terms, if it’s full, you don’t get in. If people are getting out, you let them before entering the conveyance. It is surprising to observe how many people get this part wrong and stand directly in front of the elevator when the doors open. Unfortunately for the people leaving the elevator the person looking to enter has given little thought to the onslaught of people exiting. This Moe can either act as a bowling pin and get knocked aside by the exiting passengers or as the bowling ball (which is more common) trying to get into the elevator before passengers leave.

On the elevator there are visual cues to the floor you are going to. These are usually indicated a lit up number, or in the newer displays, an 8x10 video display combined with an auditory message of the floor arrived at, and sometimes the direction you are traveling. All of these are designed to facilitate the entrance and egress process.

There is no part of the use case that has more problems that the simple decision of choosing to go up or to go down. The decision is simple, but the visual indicators are the area where design liberties are taken, and as such may not be the most usable.

One of the most often seen indicators is the lit up arrow, which combines two visual indicators, the first of direction, and the second of selection. By using two methods of indication, recognition is easier for riders, and usable for colorblind and the visually impaired.

The least usable versions seen are the ones developed in the 70’s and designed to be hip and sleek. These utilize only a single light and two colored bulbs - one white, and one red. Unfortunately, color alone is not a good indicator of direction, even if these indicators are for heaven (white) and hell (red). These indicators become even less usable as time goes by when the frosted glass panes used to cover the bulbs are not regularly cleaned, making it all look grey. This forces users to guess as to the direction of the conveyance, a process the would-be passenger is doing standing right in front of the elevator asking, “is this going up?” to people who are already annoyed that you are standing in front of the elevator while they are trying to get out.

In fact, even Superman had problems with this as parodied in the 1978 “Superman the Movie” as Clark Kent trying to get to the lobby stood right in front of the doors to the ire of the passengers.

Even the buttons in an elevator are fraught with indecision when the standard ‘L’ or ‘1’ buttons are replaced with an ‘M’ which may or may not be where you are headed.

Common user errors in an elevator happen when passengers push the wrong button, or get off (or not get off) on the correct floor. These are usually followed by a sheepish look by the offending passenger, telegraphing, “What, it wasn’t me who pushed ‘7’, it was some other guy who got out at ‘4’.” Errors can also due to mechanical problems. Burned out lights behind buttons deprive the user of the visual cue that the system is aware that you have initiated action, leaving the user to press buttons multiple times.

Modern developers have actually looked at improving the time-honored elevator system to improve efficiency by placing a panel outside of the elevator to indicate the floor the passenger wishes to go to before the elevator arrives. When the user enters the elevator, it knows where to go. This is a remarkable system for habitual users, but for visitors it is a new learning experience. Many a time I have observed delivery people walking into these elevators only to find there are no buttons to press, and then being at a loss as to what to do.

It is surprising that these developers have not tried adding a cancel button and directional buttons next to each floor button, because as we all know, sometimes you might just want to change your mind.

There are times when inefficiency can actually be more efficient.

5 Sins of Cross Platform Development

Recently I had the opportunity to try out the newest version of Full Tilt Poker's Macintosh client, having been an avid user of the windows client using the PC Desktop software Parallels for a long time.

While Parallels is a fantastic application it is still not "native" Mac, so I was really excited to use this new software, which got me to thinking about what makes for a good cross platform/cross browser (if browser based) port.

I've put together some observations from a usability perspective that can make the transition seamless and improve the user experience:

1. Use the same user interface between platforms
   The first thing that struck me about the UI of Full Tilt's client was the attention to detail in making the interface the same. The size, placement of elements, sounds, and icons are identical to its PC brother.
   
   By making things the same there is no learning curve. People can pick up with either version of the application and know what to do and how to do it. Users take all their learning and simply apply it, making the experience seamless.
   
   This is an area where development can go astray, by not paying attention to small details, or by choosing to take advantage of platform specific features.
   
   This is one of the reasons that people complain about Microsoft's use of browser specific technology such as Microsoft's Active-X controller, which is not supported in other browsers, providing a poor user experience for users of other browsers.
   
   By using browser specific technology the user experience is not uniform, causing issues for the user.
   


2. Use the same options and option placement between platforms
   Similarly, options and shortcuts that are only offered on one platform confuse the habitual user, and may lead to abandonment of the application on a platform.
   
   This is another instance where the Full Tilt software does a great job. All the options and their placement was the same from one client to another, making the experience seamless.
   
   Some applications are core to getting work done, with these types of applications there is little option for alternative. The Full Tilt software falls into the 'optional' category, where the user can make a choice. By keeping all the options the same, impediments to remaining with the same company's software are removed.
   
   The Blogger software is an instance where options (for editing stories) are different between the Mac and PC platforms. On the PC the feature set is more robust. Options such as adding URL links, and toggling between 'Compose' and 'edit HTML' are absent on the Mac. The spelling option, while included on the menu bar, does not work using the Safari browser.
   
   These inconsistencies give me the opportunity to re-evaluate what platform to work on, and even whether to switch applications to one more platform consistent.
   


3. Make user settings transferable
   The ability to modify settings for display are actions included in most applications. Making it easy to re-setup a new, or upgraded platform makes users happy.
   
   Habitual use application rarely have their settings adjusted all at once. When a user sets up an application they modify their settings to their own circumstances, and over time refine them.
   
   This impetus for this refinement usually comes from external sources, such as reading tips/tricks articles, or conversations with friends or colleagues. These refinements become part of the 'default' user view and how to change them are forgotten.
   
   When platforms are upgraded or users change systems these settings are reset to the defaults, leaving the user to recreate the settings.
   
   An easy way to transfer these settings benefits the user experience and makes the user more productive.


4. Maintain platform parity
   Microsoft is one of the biggest offenders to lack of platform parity. While the purpose of this article is not designed to bash Microsoft, you need only ask any mac user about windows based Microsoft products to receive an ear full.
   
   While MS Word is the product most often mentioned, it is probably Windows Media Player that is the most troublesome because new videos are not backwards compatible with older version of the software. This all stems from digital rights management additions to the software, but the results are the same for the user. Mac users cannot view these videos, there has been no update to the player for the Mac.
   
   The problem was magnified when Apple released a new PC that could not run the plug-in application Flip4Mac that allowed videos in Windows Media Player format to run within a browser, so for a time users of the shiny new MacBook pro could not play any Windows Media formatted movies within the browser.
   


5. Give users an easy way to go back
   The last sin is the right of the user to give up and go back to where they were - to undo. For some applications this is a one way ticket.
   
   Quicken is one such application that the file format (within the same version of the product) is different based on the platform, making it very difficult to move between platforms.
   
   Sometimes it hurts less to not be on the cutting edge, and user choose to downgrade only to find out that this is not a possible option, leaving them in application purgatory. Minimally the user should be notified if the upgrade is a one-way trip, but the best approach is to allow a user to downgrade without penalty.

There are lots of reasons for breaking these rules in software development. Most often is it an issue of time or money that trump them. In response, it is important to remember Newton's law of motion, 'for every action, there is an equal and opposite reaction'. These reactions come from the user who may suffer in silence, but may vote with their feet.