Explanatory Text is a UI Design Smell

Posted by patjoyce
Jul 26, 2008

I’ve had to switch the phone on my Verizon account a few times in the last couple of weeks. Verizon has an online tool that makes it pretty easy. You login to your account, click on “My Phone”, click “Activate a Phone” and then enter your ESN or MEID. The ESN or MEID is the unique identifier of the handset and is typically found in very small text underneath the battery.

All in all it is a very good experience and makes a fairly arcane task pretty easy. However, there is one bit of explanatory text (highlighted in red) that offers an opportunity for an improved user experience.

Since ESN or MEID is either in decimal or hexidecimal there never will be the letter O it will always be the number 0. However, my mother shouldn’t have to think about hexadecimal base numbers if she is changing her phone. A better solution would be to just treat the letter O as the number 0. Then the user doesn’t have to worry about it, and you can get rid of the explanatory text.

This reminds me of code smells. A code smell is a symptom that there may be deeper issues with the code. For instance, long methods are a code smell. They don’t mean that there is necessarily a problem with the code, but they do suggest that there is a good chance there is.

I think that long blocks of explanatory text are a User Experience smell. Sometimes there isn’t a better option, and you really need that text, but in most cases a little extra thought about the UI can eliminate the need for the explanatory text.


Cool Shopping Cart Interface

Posted by patjoyce
May 02, 2008

Baggu sells reusable shopping bags. Their shop has a simple interface that makes it really easy to visualize what you’re purchasing.

Reusable shopping bags are a good way to cut down on our consumption. I bought the beautiful gray one from BagTheHabit for my girlfriend for Christmas.


Strange Ticketmaster Validation

Posted by patjoyce
Jul 16, 2007

The most important thing that you can do for the security of your web application is to validate all user input. That said, sometimes things can get out of hand.

I have DC United season tickets with a few friends. One (possibly the only) nice thing about DC United using ticket master is that they have an online interface to manage your tickets. You can print your tickets online or, if you’re not going to use them, email the tickets to someone else. This weekend 2 of us couldn’t go so I went online to forward our seats to another friend.

Seats 8 and 10 selected

Unfortunately I then got this validation error:

Please select consecutive seats

I’m not sure why I should only be allowed to forward consecutive tickets. This validation is particularly strange because I was allowed to forward each of the tickets individually without any problem.

So make sure you validate for safety, but don’t cripple your application arbitrarily.


Techniques for a Modern Web UI Presentation

Posted by patjoyce
Jun 05, 2007

Two weeks ago I gave a presentation to my department at work about Modern Web UI patterns. I’ve put the slides up, with notes, at slideshare Check out the presentation below.

I feel the actual presentation was quite a bit better than the plain slides as I could jump out to the browser and demonstrate each of the techniques being used in an application I’ve written for work. Unfortunately, that app is internal, so I can’t share it with the world. I hope that the notes at least give the slides some context.


script.aculo.us Inside Out

Posted by patjoyce
May 19, 2007

Nick Merwin

The talk is about getting an understanding of what is going on under the hood in script.aculo.us so that you can create your own effects.

“Prototype”http://prototypejs.org

Some of the best documentation ever.

Default document.getElementById("element_id') is really clunky. Prototype gives us $('element_id') much cleaner.

Parts of prototype tha

  • Enumerables – ruby style enumerables instead of c style iterations.
  • closures
  • Object creation – prototype gives similar to ruby. define aninitialize method that is called on new.
  • Object.extend.
  • Option parsing – pass core

A bunch of various DOM utilities that make changing code much easier.

The Animation Engine

  • time based – given start time and finish time in relation to the browser’s gettime()
  • core effects- instantiated as an object as itself. eg. new Effect.Move
  • combo effects – eg. Effect.Fade, combines other effects into one.

The power stip just crapped out, my battery is dying, and this is pretty in depth code and requires some serious concentration to follow. So no more notes.


If It Takes More Than 2 Tries, You've Got a Big Problem

Posted by patjoyce
Apr 06, 2007

True/False Question With 10 Tries