User interface lessons from Dora the Explorer

If you have kids under the age of six or so, it’s likely you count Dora among your best family friends. The sprightly, multilingual cartoon character has smoothed the rough edges off many an evening at my house.

But who knew she was a Web design genius?

Doragame
Before dinner the other night, I sat on the couch with my 4-year old daughter and played the character themed games at nickjr.com, the website of Nickelodeon, the TV channel on which Dora the Explorer runs. We especially enjoyed Sticker Pictures (see image at left), which lets you adorn scenes ranging from jungles to playrooms with cartoon characters. You can also create drawing effects like you would using something like Photoshop.

It kept both of us occupied during the fragile pre-dinner hour.

What was interesting is how easily both of us figured the game out (and indeed the rest of the site) despite the kaleidoscopic array of images, intense Flash, and sponsored links. Even fairly involved actions like dragging, dropping and sizing images into a scene required little trial and error.

Later, I went back to the Sticker Pictures game (OK, I realize this is borderline strange, but seriously — bear with me) to think through how the site managed to provide such an excellent user experience for a 4-year old and her 36-year old dad.

My observations:

  • The pages, while visually riotous (after all, this is a kids site) are structurally simple. The top navigation contains all of four elements. The icons used above these elements make immediate sense to the user.
  • There is very little text anywhere on the page. Text can be a measure of UI failure. To the extent that you need to explain, you have failed to deliver an intuitive, usable interface. I don’t need to be told what to do on this page.
  • Text, icons and navigation elements are BIG. Too often, sites are so crammed with features that everything becomes painfully small. Users are forced to hunt; hunting leads them to the exit door. I’m not suggesting we start designing real estate websites like the Reader’s Digest Large Print Edition, but shedding a few peripheral features in the interest of clarity is a good idea.
  • Everything works! That sounds silly, but how often do you go to a major real estate website, or try out a new online real estate app, only to run find inaccurate or incomplete information, a bait and switch, or a result that just doesn’t quite match the promise?

I’m not joking: We can all learn a thing or two by studying sites built for young people that absolutely must be dead simple and don’t have the luxury of assumptions when it comes to the user. Remember too that today’s kids are growing up with this type of UI. It’s what they will expect when they get older.

Next time you’re tasked with putting together a Webpage, just ask, "What would Dora do?"

Brian Boero