Don Norman's People are From Earth...

Some people call Don Norman grumpy.  I think he just cracks me up.  He's right almost all of the time, but he's also funny about it.  Look at this quote from his latest article, People Are From Earth, Machines Are From Outer Space:

"People are from earth. Machines are from outer space. I don’t know what kind of manners they teach in outer space, but if machines are going to live here in our world, they really need to learn to behave properly. You know, when on Earth, do as the earthlings do. So, hey machines, you need to become socialized. Right now you are arrogant, antisocial, irritating know-it-alls. Sure, you say nice things like “please” and “thank you,” but being polite involves more than words."

Really and truly, why does it have to be so hard to interact with machines?  Why can't machines have better manners?

"Norman’s law: The number of hours per day spent maintaining our equipment doubles every 18 months."

Indeed!  Have a read of Norman's article.  I promise it's short.  Please leave your opinion in the comments below.

Style and Tone, part 2

The last time I discussed Style and Tone, I focused mostly on style. Today, I want to talk more about tone. Tone is kinda-like the tone of voice we use when speaking with each other. If I say, "you're the greatest" but I use a tone of voice that demonstrates that I don't mean it, I'm probably being sarcastic. Much of what we call sarcasm is the result of saying one thing, but using a tone of voice that conveys another meaning. Our tone is a way of conveying messages without words.

Software design (including Web sites) convey a certain tone without using words. The way a visual interface looks and communicates to the user conveys a design tone. Many times software will convey a tone that is inconsistent with the type of tone that the software developers would like to convey to their users. Sometimes, software tone can be condescending, arrogant, unfriendly or obtuse. Most of the time, software should be inviting, friendly, user-centric and amiable. These are tones that a piece of software (or Website) can convey with sensory immersion techniques.

Take a look at this screen of a Web site:



Some of the words were left un-blurred because they play a small role in tone. Both style and language play a role in tone, but much of it is strictly visual. This site has a "friendly" and "playful" tone. Certainly, with a paragraph beginning with "We are..." one might think that the site is a little self-centered; which might be true. But it is consistent with a tone that I would call "open." The site is up-front and honest about who it represents in addition to stylistically inviting the user in. Some of the text begins with "Hello..." which tempers the self-centered text above. In addition, we see call-out bubbles, and paper airplanes in an open sky above clouds. It is imaginative and open, but the green at the bottom "grounds" it in reality. The site makes it clear that it (and the people behind it) want to have a dialog, or conversation with you, the user, and they want to skip some of the typical formalities in doing so.

For a little bit of contrast, look at this site screen shot:



While the visible text might make it seem conversational in the same way the previous site did, there are some subtle differences in tone here. They say, "Hello," but end up looking far more self-centered than the previous site. This site is obviously proud of themselves with their pictures on the home page (avante garde styling aside), their obvious "Check (us out)" intro and the incredible emphasis on Mac hardware/software (no actually affiliation, just a bit of pride).

The "Let's talk" is less friendly and the style is more of a 'coolness' and an 'aloofness.' I would call this tone, 'cool and proud.' This tone is very appropriate for their business and it isn't a negative connotation. This appears to be the right tone for the customer and works for them. It is merely a contrast with the previous site.

Try this site on for size:



What do you make of this tone? What do they represent? Who are they? Leave your comments on this post and share!

What the heck is Fitts' Law?

Ok, so somebody asked me this question, which seems to remain unanswered in my blog, "what the heck is Fitts' law?"

Fitts' (pronounced fitz-ez) Law is pretty simple.  The ability to reach or hit a target is a function of the distance to the target and the size of the target.  Let's use an analogy, suppose I put a bow and arrow in your hand and ask you to hit a target.  Regardless of your skill, I can make this task very easy for you by putting the target at "point blank" range and you won't miss.  The short distance will make it very easy.  The other thing I could do is make the target as large as a skyscraper and place you 25 feet away.  I'm pretty sure you'd still be able to hit it even though you are further away (it's as big as a building!).

This relates to design as well; especially software design.  Most actions that a person executes on a piece of software is achieve by the physical motion of the person.  This is typically achieved either by mouse or keyboard.  With mouse and keyboard, the virtual action is a translation of a physical action. 

For example, when you move your mouse up to the "Favorites" or "Bookmarks" menu to bookmark this blog, you are translating the physical action of moving the mouse into a virtual action of motion on the screen.  There is a physical spot on your mousepad or desktop that corresponds to the location of the "Bookmarks" menu item.  Some people are more dexterous than others in reaching that point.  But in any case, it requires the dexterity of "acquiring" the target.  If you overshoot the target, you must make corrections in order to land the mouse cursor in the right space to manipulate the action associated with that space. 

The smaller it is, the more corrections you will need to make in "acquiring" the target.  The further that target is from your current mouse cursor position, the longer it will take, and the more dexterity it will take to reach that target.  For software design, this means that any action that is important for the user's current task should be close to the user's current position and large enough to "acquire."  Other actions that are less important should be further away and smaller.

Back to our bookmarks example.  Let's pretend that bookmarking a site is the most important action.  We could make the bookmarks menu a larger button and put it right next to the page that you are visiting so that it is a quick shot of the mouse to reach it.

There is another aspect of virtual size and distance that doesn't translate directly into physcial space.  Most desktop operating systems are designed with screen edges that do not allow the mouse to move beyond the edge of the screen.  This is a huge, nearby target. 

Go ahead and push your mouse to the top of the screen; pretty easy right?  You could probably do it with your feet instead of your hands, it is so easy.  If a menu bar is "pinned" to the top edge of the screen (like the MacOS X menu) it is far easier for users to reach the menu and thus the items on the menu.  This is one of the reasons that I have long disliked the "title bar" of Microsoft Windows.  It occupies important space with little-to-no benefit to the user.

In my posts about the ribbon pattern, I mentioned that it is an improvement over older patterns, but that it has problems in regards to Fitts' Law.  Namely, that it leaves "a small strip of dead space above the quick toolbar [that] breaks Fitts' law."  Hopefully, now this comment makes more sense to you, dear reader.  The 2-pixel strip of dead space above the quick access toolbar shrinks the targets of the bar and places is it much further away in virtual space.

Do you have any additional questions about Fitts' Law?  Leave questions and comments at the end of this post.  I've been pretty good about responding to commenters, give it a try.

Luke Expands on Design Misconceptions

In an earlier post I linked to a podcast with Luke Wroblewski and Jared Spool regarding common visual design misconceptions. (Visual Design is one of the many sub-disciplines of IxD.) Luke officially wrote and article for UXMatter.com that dives deeper into the same subject.

Please share your thoughts in the comments section of this post.

Ethnographic studies

This article on Ethnography on My Customer.com is very interesting.  Interaction designers use ethnographic studies to generate better research data about user and people behavior.  This article isn't specific to IxD, but more generic business.  Give it a read and leave a comment on this post with your thoughts and opinions about it.

Style and Tone

I've spoken with several people here about style and tone. It is somewhat abstract theory and difficult to describe in words. I can simply say, "style is some adherence to a related set of forms" or "tone is like a tone of voice, only not using words" and people generally nod their head, but I don't think the extent of it really sinks it; they can't see it in action.

So, I thought I would put together a list of Web site screen shots to discuss style and tone. The ideas don't just relate to Web design, but to any design. However, since Web design is most prevalent, it is the easiest medium to use to discuss the principles.

To get started, take a look at this screen shot of a Website.


Now, you'll notice that I've blurred a lot of the text. While text is a small part of style and tone, it can also lead to confusing discussions about vocal style and tone of voice; which are similar, but not entirely the same. Also, if you know the owner of this site, or you are the owner, my apologies for the critical look at the style and tone; bear with me, though, I think it is a valuable discussion.

So, just focus on the visual aspects of the site, including font choice, color, layout, margins, contrast, alignment, etc. The font is Arial, a fairly straight-forward sans-serif font. It certainly isn't monochromatic, the contrast of text on background makes some of the text difficult to read. The eye doesn't know where to land and the background is "noisy." These are the aspects of "style." To describe this style, I would call it gaudy and bricolage. It certainly couldn't be described as "elegant" in style, nor is the style particularly "hip" (for lack of a better term).

Contrast the former site with the one below. Remember to look at the visual aspects of the site.


This site has a completely different style from the earlier one. This one is certainly appropriate for pop culture; It has "fashion" and appeal. But I wouldn't call it "elegant" or even "clean;" it has a sort of "dirty" bricolage feel to it also; but more of a street-wise bricolage. It also uses a fairly plain Times New Roman serif font, nothing fancy, but the line-height and kern are adjusted stylistically. I would describe this site as a "postmodern" and "pop culture" style.

So, armed with the above examples, leave a comment on this post describing the style of this site:



I will probably post more on this topic in the future, so stay tuned.