Chausse.org

While reading an article partly about the iPhone user experience, a thought dawned on me about the virtual keyboard.  Like many other people, I was afraid that the lack of tactile feedback would be disorienting and difficult to get accustomed to.  And, like most people who have moved to the iPhone, I’ve found that it really isn’t.  That got me thinking about the whole nature of “touch typing”. 

Think back to high school (those of you who actually took typing classes).  What was the “sales pitch” the teacher gave you about “touch typing”? Well, it made you more efficient by stopping you from having to repeatedly move your eyes from the keyboard to the screen (or, er, paper - at least when I was in high school).

Now think about the iPhone.  Where’s the keyboard? Where’s the screen? Your eyes never have to move more than 3 inches to jump between the two.  AND, with the large visual pop-up key feedback (the real stroke of genius), you can rely on your peripheral vision to ensure correct keypresses, and still never take your eyes off of the entered text.  Apple simply took a negative limitation of a mobile device (limited room for both display and input), and turned it into a positive - the ability to support a virtual keyboard by replacing tactile feedback with peripheral visual feedback.

Turning limitations into advantages is a hallmark of both great marketing and great user experience design.  Whenever you’re in the process of designing a transformative product like the iPhone, always be sure to ask yourself “What old rules no long apply?”

Filed under Apple, Gear and Gadgets, Marketing, The User Experience No Comments »

A while ago I posted about Cecropia, a game company which had pioneered a totally unique video game called “The Act“.

Using a simple knob, the player smoothly adjusts the silent protagonist’s personality, causing the characters around him to react accordingly.   All the action takes place in ultra-smooth Disney-quality animation, with absolutely no UI elements - creating the first true interactive cartoon.

Unfortunately, Cecropia has had a real problem with “The Act” - namely, how to market it.  It’s far too short to make into a console game, and the knob (which most users don’t have) is pretty much critical to the experience, which would require a special hardware investment for most people.  The animation quality is far too high to package into some kind of Flash game.  It really would make a perfect arcade game.  Unfortunately, the market for this kind of arcade game died out in the early 90’s.

So, anyway, they’re taking their technology in a new direction, facing up to the realities of today’s gaming market, and trying their hand at interactive Flash “advergaming”.  They’ve put up a demo on Cecropia.com.  I won’t tell you how it works (figuring it out is part of the fun).  If you’re at all involved in interactive marketing, get in touch with these guys.  What they’re doing is truly groundbreaking, and they deserve a lot of attention (and money).  And, who knows, maybe someday The Act will see the light of day, in some form or another.

Filed under Business Models, Cool Stuff, Marketing, The User Experience No Comments »

Niall Kennedy demonstrates a very clever trick for spying on a user’s browser history.  You can’t actually retrieve the list (thankfully), but you can compare it to a known set of links.  How? By exploiting the way CSS applies different styles to visited links!  He recommends it as a way to selectively display social networking links which you have evidence the user actually uses, but the possibilities for creative evil helpfulness here are endless.

Filed under The User Experience, Web Development No Comments »

When I was at Hill, Holliday I wrote a controversial blog post (still available on their site) called “The Danger of Design - How Not to Build an Online Community“. It was so controversial, I was actually called into the Executive VP’s office and told “You shouldn’t say stuff like this, this is what we’re trying to sell“.

I was just going through my archives and decided to re-read exactly what I wrote, and decide whether I still stand by it today.

Yes, I do. Absolutely.

When I wrote this, MySpace was the king of social networking. My argument was that MySpace’s “amateurish” design encouraged a sense of community. Nowadays, Facebook is king of the hill. Does this invalidate my argument?

Absolutely not, in fact it reinforces it. Facebook succeeds for the same reason MySpace did - and then takes it one step further.

Facebook succeeds because, like MySpace, it does not impose Design (again, that’s “capital-D Design”, as I describe in the original post) on the users. And it one-ups MySpace because it prevents its users from imposing Design on others.

Design (capital D design!) is polarizing. Design forces you to make a decision - does this product’s image represent me, or does it not? If you want to attract a certain demographic, you want your products’ Design to speak to exactly that demographic. That’s Marketing 101.

If you want to appeal to everyone, start undesigning.

Filed under Marketing, The User Experience, Web 2.0 No Comments »

A while back, when press coverage of the Hollywood writers’ strike was in full swing, a writer was asked why it takes a staff of so many writers, taking such a long time, for so much money, to come up with something as short as a late night monologue. His response was: “You’re paying for the jokes that aren’t on the show”. Writing comedy’s not easy. Trying really hard to come up with five perfect jokes is far less effective than brainstorming 100 and throwing out 95 of them.

There’s a perfect parallel here with UI design. Whereas the art of programming typically involves working in a “5 steps forward, 1 step back” process, the good UI designer will know when something’s not coming together correctly, and do the right thing by throwing out the entire design and starting over. It’s more like five steps forward, five steps back, six steps forward, six steps back - repeatedly starting from zero, but each iteration benefiting from knowledge gained in the previous one.

A good UI design is one in which the whole is greater than the sum of its parts. No amount of tweaking will repair a UI that has gone too far down the wrong path. If your UI designer isn’t throwing out (a lot) more designs than they’re showing you, they’re not trying hard enough.

The creators of the forthcoming OS X personal task manager, “Things” have written a great blog post describing this phenomenon. In the process of designing a single dialog box, they threw out dozens of possible options (they actually display 38 of them). And this was for something that’s already been done (a dialog for entering recurring events on a calendar), which they just wanted to do better. Had they been designing something that’s never been done, there would likely have been a lot more.

So, the next time someone spends two weeks designing a single mockup, thank them. Remember you’re paying them for knowing what to throw out.

Filed under The User Experience, Web Development No Comments »

The West Midlands Fire Service has certainly gone out of their way to make their web site accessible - to the deaf. Kudos to them for figuring out a way to convey information to the deaf via the visual medium of the web.

Filed under Humor, The User Experience No Comments »

I don’t remember where I first heard the term “0-1-N Fallacy” (and Google doesn’t want to help), but I’m pretty sure I didn’t make it up. If anyone knows the source, please let me know so I can give credit where it is due.

The “0-1-N Fallacy” is a misguided design process based around the idea that if an application displays data records of some sort, it must handle exactly three cases - displaying 0 records, displaying 1 record, and displaying N records (where N can be any number from 2 - infinity)

The problem with the 0-1-N fallacy is that if you always design a product to scale to handle infinite records, you will invariably wind up with an overcomplicated user interface when N is a small number. In cases where N is almost always a small number, designing for unlimited scalability makes the needs of the many outweigh the needs of the few.

One simple example is the usage of radio buttons vs. select boxes. Radio buttons are almost always preferable to select boxes when presenting a very small amount of choices - because the choices are always fully visible. If you absolutely must handle a case of unlimited options, you have to go with the select box. But if 90% of the time, you only have a small amount of options, you’ve made life much harder for the vast majority of cases, to handle the extreme outlying cases.

It may seem heresy to most engineers to claim that anything less than infinite scalability is good enough, but in UI design that is definitely the case. The iPhone, for example can only have 9 web pages open at once. It probably has the memory to hold dozens more, but if it held dozens, it would have to abandon the extremely elegant UI of “flicking” thumbnails to move between pages, and use a clunky list instead.

It may also seem heresy to apply semi-arbitrary limits on presented data but that’s why UI design is sometimes more of an art than a science. It takes experience and confidence to tell a developer “I don’t care if your search algorithm can present 1,000 options - presenting 5 is what’s right for the user.”

Filed under The User Experience 1 Comment »

No matter how much you know about CSS, you can always stumble across something new.

I was pretty much unaware of the “outline” style attribute - which isn’t really a big deal, because in most ways it works the same as the “border” attribute.

Except…

The “outline” attribute is what’s responsible for drawing the little dotted boxes around hyperlinks when they are clicked or navigated (tabbed) to via keyboard (I always thought it was strictly a OS-level effect). Anyway, if they’re a visual blight on your sight, you may be inclined to try this:

a { outline:none }

However, that would make keyboard navigation nearly impossible. Don’t do it. If you just want to avoid them on active (clicked) links, just throw this in your CSS file:

a:hover { outline:none }

And there you go. Huh. Thanks to my pal Matt D. for the tip.

Filed under The User Experience, Web Development 2 Comments »

A recent project at work got me thinking hard about how a corporate homepage should be designed. Any designer worth their salt knows that a homepage design needs to be user centric - focused on what users will actually want to do (or what you want them to do) when they arrive.

The simplest approach is to make a list of possible activities, prioritize them, and allocate screen real estate accordingly. More likely activities — or activities geared toward more strategically important audiences — get bigger and more prominent chunks of the page - a sort of “importance equals pixels” policy.

This approach, while definitely a good starting point, is overly simplistic for a number of reasons:

• Content geared toward a technically savvy audience does not need to be as prominent as content geared toward a non-savvy audience. Frequent web surfers are less likely to rely on the visceral impact of bold content to steer them toward what they need - in fact, they may instinctively avoid it.
• Content that does not rely on bold visual impact should make way for content that does. Let’s say your site contains a vast archive of videos. The archive itself is clearly the most valuable content on the site. But you also want to show a single example of one of your videos on the homepage. What gets put front and center - the single video, or the categorical list of content in your archive? Clearly the archive is the more valuable asset, but it does not rely on visual impact to get its point across, and should therefore be less prominent than the sample video.
• If people are accustomed to finding content in a certain area - think hard about placing it elsewhere. Just making something bigger and more prominent will not necessarily make elements easier to find - if people are accustomed to finding them in a certain area. Search boxes are customarily in the upper right hand corner of a corporate homepage. Making it bigger and putting it in the center of the page will actually make it harder to find. More examples - site navigation on the left, “Contact Us” at the bottom, promotional callouts on the right. This isn’t to say you can’t change things up a little, but be sure to put some serious thought into it.
• Content that gets updated frequently should NOT get put front and center (remember, we’re talking homepages, not blogs, here). Counterintuitive, but true. Someone interested in viewing frequently updated content is likely a return visitor. A return visitor will know where to look. The main stage should be reserved for making an impact on first time visitors. Also, a section of news, press releases, blog articles, etc. will by its very nature NOT give a complete picture of what your site has to offer, and could confuse first time visitors.That said, it’s important for a first time visitor to know that you do, in fact, have frequently updated content on your site. For that reason, the optimal placement of such content is slightly “above the fold” - somewhere that a user will notice, but that will not distract from the main message of your site.

One important reason to avoid the “importance equals pixels” approach to homepage design is that it can easily lead you into unattractive layouts. Your company may legitimately be targeting three different audiences of equal importance. The “importance equals pixels” approach will tell you to create content in three equal sized columns. But this sort of layout lacks visual appeal - variation in size is an important tool for differentiating different types of content (in any media - compare this old newspaper layout to this modern one). If you are in this situation, look to design tools other than size that can differentiate the content, yet provide similar levels of visual appeal. This could be done via bolder colors, different fonts, graphical elements, or judiciously used animation.

Remember, size isn’t everything.

Filed under The User Experience, Web Development No Comments »

Someone calling himself (or herself) ToyMaker posted a long comment on my post about the Script.aculo.us based Gucci.com site relaunch. ToyMaker’s points about its usability flaws are valid and well-reasoned, but it got me thinking about the nature of luxury brand web sites and when is it appropriate for style to trump usability. The me of a few years ago would have argued “Never!” but now I’m not so sure.

Think about the real world “usability” of the Gucci brand. Gucci products are difficult to find. They can only be found in highly upscale boutiques or department stores, and for vast swathes of the world there is simply zero availability whatsoever. If they were concerned about “usability”, they’d have a store on every street corner. Once you’re in the store, there are very few products on the actual shelves. They’re displayed mainly for visual appeal. If they were concerned about usability, they’d put every size of every product out on the sales floor. Many products are in locked cases. You need to ask for assistance to try things on. This wouldn’t be the case if Gucci were concerned with “usability”. You have to ask a salesperson for prices on many items - that’s terrible usability!

My point is that there is much more to the shopping experience than getting in, getting what you want, and getting out - especially when dealing with luxury brands. Buying a luxury product is an inherently illogical process. No one - not a single person on Earth - needs anything Gucci sells. To convince someone to buy such a vastly overpriced product, it’s important to convince them the actual act of purchasing that item is an very special experience. In the real world, this means sparse boutiques, exclusive locations, and hands-on sales personnel. All these things slow down the purchase process, but are essential in “selling the experience”. In the virtual world, this can mean long load times, odd page layouts, and sometimes confusing navigation.

Verdict: Yes, style - or, more accurately, “story” - can sometimes trump usability and standardization, for certain products. No, Gucci.com’s usability is not broken. Users may be slowed down by certain aspects of the site’s design. But that doesn’t mean the site is bad. Just that you’re not its target audience. Its target audience expects exactly what they get - a unique, rich, immersive experience - and Gucci.com provides that in spades.

Filed under Marketing, The User Experience 4 Comments »

Luxury brands are usually the last folks to care about web standards - a great many are 100% Flash-based, but the new Gucci.com, recently relaunched by Wolzelle, proves that, these days, the “luxury brand” aesthetic and web standards are no longer mutually exclusive.

Gucci.com certainly feels like a typical luxury brand web site, with big sliding panes of fancy photography, multi-layered graphics fading in and out, and ultra-minimalist layout. But the amazing thing is that it was done with no Flash - or other browser plugins - whatsoever. The magic was done entirely with Script.aculo.us, the web-standards based JavaScript UI library/system/API/what-have-you. And it looks gorgeous.

Kudos to Gucci for seeing the value in web standards, and kudos to Wolzelle for pulling this off.

Filed under Marketing, The Internet Biz, The User Experience, Web Development 2 Comments »

Folks like Jakob Nielsen and Tim Berners-Lee like to complain that web-based documents today don’t use enough hyperlinks to provide the truly exploratory experience that the World Wide Web can offer. Today, I stumbled across a perfect example of how not to rectify this.

I was reading an article on InformationWeek.com talking about a Windows software update that nags users of suspected pirate versions of windows.

The article explains how a dialog box randomly pops up, and conveniently hyperlinks the words “dialog box”. One would assume this would link to a picture of the dialog box in question. Instead it links to… get this… an entire article defining “dialog box”. OK, thanks.

The article says that the user can choose not to download the update - and the word “download” is hyperlinked. Guess where? The definition of “download”.

This silliness is perpetrated on the words “web site”, “interface”, “FAQ”, and “browser” as well. One would think that someone viewing a technology web site in their web browser would not really need help figuring out what a “browser” or a “web site” is.

I’ve seen actual useful methods of providing definitions of unusual terms in web pages, usually via DHTML popups. I’ve also seen unfortunate hyperlinking of common terms to sponsored content - but these are usually differentiated by dotted or double-underlined links, maybe in an unusual color.

But InformationWeek is not linking to paid content, they’re not differentiating these “definition” links in any special way - they’re bona-fide regular old links to full-fledged web pages, with nary an “alt” tag warning you that you’re about to do something really, really, pointless when you click on them.

What in the world were they thinking?

Filed under The User Experience 1 Comment »

Sorry for the lack of posts lately, there is an awful lot going on in the Chausse household right now, one item being a plan to buy a house. While researching possible communities in which to build Chausse World Headquarters, it took me forever to find a list of 2006 property tax rates for communities in Massachusetts. Incredibly valuable info, but really hard to find. The right site (The Massachusetts DOR site) actually came up as the second result on Google, but Google’s summary didn’t really make it stand out. Anyway, here’s the list as a PDF:

Massachusetts Fiscal Year 2006 Community Property Tax Rates (.PDF)

I have one gripe about this list. It’s sorted in the absolute least useful way possible (to the average Joe). Not by community name, not by any particular tax rate, but rather by the date that the tax rate was approved by the state Department of Revenue! Now, I’m sure that’s useful info to someone, but not really to anyone thinking of buying property!

Note that I didn’t find this on some obscure archive of DOR meeting presentations or something, it’s a link on the main DOR page that says “Fiscal Year Tax Rates”. Also (OK, two gripes), there is no legend to explain what the tax rate for a given town — say, “$13.96″ — actually means (I have to rely on experience to tell me that that’s what you pay per year, per $1000 of assessed home value — and $13.96 really sucks, incidentally).

And since the list is in PDF format (OK, three gripes), I have a lot of cutting and pasting ahead of me to put the data into Excel and make something useful out of it (which I will post).

Obligatory usability lesson: When presenting internal data to the public, publish it in a format useful to them, not to you! I’ve seen worse examples of this problem on web sites where search results show only product model numbers - a useful format to someone who works in the company and knows the model numbers like the back of their hand, but absolutely worthless to a customer who is trying to figure out what they need.

Update: Here is my Excel version - it only lists the residential rates:

Massachusetts Residential Property Tax Rates by Community for Fiscal Year 2006 (.XLS format)

Filed under Personal Notes, The User Experience 21 Comments »

Jakob Nielsen’s latest rant is against anchor links. Anchor links existed before image tags. In fact, they were in the HTML spec before HTML specs had version numbers (notably this 1992 W3C HTML specification).

Jakob’s argument: Users are used to going to a different page when they click something. For a click to have any other effect would hopelessly confuse the user.

This is pretty sad. Check your calendar, Jakob. The year is 2006. This argument may have held back in the days of brochureware web sites, but we’re already in the postmodern phase of the web — web sites are no longer just a collection of static pages. Web “applications” are the order of the day. Let’s list my “mental model” of what clicking a link might do, based on the context of said link. By context, I mean clever design used to bestow affordances upon the link (something Nielsen obviously knows very little about).

Clicking a link may:

1. Bring me to another page
2. Bring me to another part of the current page (oh no!)
3. Initiate a download
4. Open a dialog box (DHTML or otherwise)
5. Expand a section of the page
6. Modify a page’s stylesheet
7. Re-center a map (Google Maps)
8. Subscribe to an RSS feed
9. Play a video

I’m sure I could think of more. The point is that if you care to help the web evolve so that every site doesn’t look and work like, well, Jakob Nielsen’s web site, you must use design to create intuitive usability. Flickr introduced many new user interface concepts to people (such as simply clicking on a title to change it) — without hopelessly confusing and alienating users. How did they do it? Design. Design and usability go hand-in-hand. Without design there is no innovation. Without innovation, there is useit.com

Filed under The User Experience, Web Development 2 Comments »

It’s not every day you stumble across a fantastic usability concept, a clever implemenation of that concept, and an even more clever improvement on that implementation — all in the course of five minutes. But that’s what I found the other day via some random web surfing.

The Yellow Fade Technique allows incredibly useful and elegantly subtle user feedback regarding changed data. The Fade Anything Technique is a very spiffy enhancement of that technique. Check out the demo page.

Filed under The User Experience, Web Development No Comments »

One of the most notorious bad-usability culprits is the process for setting the clock on anything that isn’t a dedicated clock. The logic seems to be that people only set the clock once every six months or so (Daylight Savings Time, you know) so you really don’t want dedicated clock-setting features cluttering up your interface. Makes sense, so what do you do? On some devices, this means you put the clock-setting buttons on the bottom or rear of the device, where you never have to see them until you really need to use them.

The device in question here, however, is my factory-standard Mazda car stereo. Clearly, putting the clock setting buttons on the rear or bottom of the device is not an option (well, it is, but that would truly take the cake for bad usability).

So, we don’t want to add controls to the face of the device, and we can’t hide dedicated controls elsewhere. What do we do? Well, we do what most device makers do in this case - we repurpose (or, in programming lingo, “overload”) some existing buttons. We simply take buttons which are normally used for something else, and, when we’re in “clock setting mode”, use them to change the hour and minute instead.

I’m willing to grudgingly accept this “workaround”, with one request - choose sensible buttons to “overload”.

Here’s a picture of the stereo:

Now, the first thing you do to go into clock setting mode is hold down the “Clock” button. OK, that’s pretty standard, now the clock is blinking. Next, we must deduce which controls are used to change the hour and minute.

Looking at the clock, several sensible options present themselves:

1. The “Seek” button has up and down arrows. Those seem like a good option - up moves the time up, down moves the time down. Or, maybe up changes the hour and down changes the minute. Not 100% logical, but at least arrows represent change, and I know I’m looking to change something, so it’ll do.
2. The “5″ and “6″ buttons also have arrows on them. Same deal, they seem pretty logical to me.
3. If, for whatever reason, neither of those options work, perhaps the “1″ and “2″ buttons are the magic keys. Those have arrows as well, albeit less noticeable, and the least logical of all the arrow options.
4. Maybe the designers thought it would be cool to use the knobs, instead of arrow buttons. That way, you could control the speed at which the clock changed. Sounds pretty reasonable, although I’m not a big fan of “overloading” the volume control on an audio device (*cough* iPod *cough*).

Now, this list is the list that actually went through my head this morning as I tried to change the clock. I tried each option in turn, and none of them did the trick. Finally, having exhausted all these options, I tried the “well, it couldn’t possibly be…” option. And, sure enough:

• To change the hour: You press “Scan”
• To change the minute: You press “Auto-M”

How depressing. I don’t even know what the “Auto-M” button is supposed to do normally. But, now that I think about it, M could stand for minute, and I am setting the “Minute” in my “Auto”. Maybe there’s some perverse logic to this that’s just going over my head right now.

Moral: When forced to compromise on usability for whatever reason, at least do the best with what you’ve got to work with, instead of throwing your hands up and deciding “if I can’t have optimal usability, I might as well just choose my interface randomly.”

Filed under The User Experience 1 Comment »