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.


Smartphones

Posted by patjoyce
Jul 01, 2008

I think that the release last year of the iPhone represented the biggest jump in computing since the introduction of the personal computer in the 1980’s. The iPhone is not a “smartphone” in the sense of its predecessors. It is a handheld computer that happens to do voice well.

The designers clearly were willing to sacrifice to optimize for how mobile devices are actually used. The biggest complaint about the iPhone is the lack of a physical keyboard. The touch screen keyboard is cumbersome. It is sufficient for typing short messages, but is woefully inadequate for long passages of text. However, the decision to abandon a physical keyboard allows for a much larger screen. Without the large screen surfing the web, reading emails, and watching video would not work as well. A larger screen makes it much easier to recieve information. And that is the crux of the mobile experience. A mobile device is primarily used to pull information; to look up directions, check movie times, read an email. If you need to write more than 2 or 3 lines for an email it can probably wait until you get back to a full computer. The willingness to sacrifice the uncommon to make the common delightful is what makes the iPhone great.

This is not to say that I think the iPhone is the end all and be all of mobile interfaces. As much as I love it, it is not perfect. There have to be other interesting approaches to mobile computing. Unfortunately, all the existing phone producers have done is to produce cheap imitations. Just google for “iphone killer” to see a sad array of products without an original idea.

What the mobile space most needs is legitimate competition (If you think that Windows Mobile or RIM count, then I just don’t know what to tell you) Android could be very interesting, but I’m not sure if Google is going to be able to pull it off. Apple managed to produce the iPhone by completely controlling the hardware and software, and by pistol whipping one of the weaker carriers into allowing it. Google is trying to build a platform with multiple hardware manufacturers and networks. I don’t see how they’re going to be able to get them all on one page. I’m also not sure how one is supposed to effectively develop applications for the various phones with wildly different hardware.

That said, the first round of winners in the Android Developer Challenge include some very interesting applications. I’m particularly excited about Android Scan an application that lets you scan the barcode of a book, movie, or CD using the camera on your phone and instantly get reviews, samples and comparison shop online. I think that this is going to be really useful. Imagine being able to scan the barcode of a bottle of wine and instantly get reviews as well as finding out that it’s half price down the street. This is the future of shopping.

A lot of the other winners are underwhelming. There are a lot of location based social networks that will never get to a critical mass and a lot of emergency notification apps. Still there is a ton of potential, and an open mobile platform is really exciting. I love the idea of being able to replace the email client on my phone if I don’t like it. We’re in the infancy of designing for mobile devices, and the lower the barrier to entry the better. We need more people trying new things.

In the end I think that the iPhone is going to remain the pinnacle of mobile experience for some time. The seamless experience Apple has created is going to be hard to beat. If Android comes out before the iPhone becomes available on all carriers I think it will find a decent market. I would strongly consider an Android phone before switching away from Verizon’s network.

At least I am hopeful about the future of mobile devices, and that is something I’ve never been able to say be before.


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.