How the Digital Age is Changing UI Design

After reading Marc Prensky’s stimulating article “Listen to the Natives,” I truly have a desire to quote it in its entirety. Instead I am going to focus on one of the opening paragraphs in which he distinguishes between two types of digital peoples — digital immigrants and digital natives — and how they learn differently in the Digital Age. I strongly encourage you to read the entire article; Prensky discusses some very thought-provoking facets of learning in the Age of Information. For now, though, let me begin by sharing with you that excerpt:

I’ve coined the term digital native to refer to today’s students (2001). They are native speakers of technology, fluent in the digital language of computers, video games, and the Internet. I refer to those of us who were not born into the digital world as digital immigrants. We have adopted many aspects of the technology, but just like those who learn another language later in life, we retain an “accent” because we still have one foot in the past. We will read a manual, for example, to understand a program before we think to let the program teach itself.

The last part of this excerpt strikes me as extremely relevant to web application user interface design. I’m no expert on the topic of UI design, but my status as digital native and experience with such services as Facebook, Gmail, and Twitter have provided me with at least an opinion of what I, a Generation Y user, consider to be good and bad examples of UI. Particularly when it comes to understanding and finding my way around a new online web service, certain UI features an make all the difference in whether I become a dedicated user or turn away and never look back. Prensky hits on a key point when he distinguishes between reading a manual to learn a new program — where, as I’m using it, program can mean anything from computer software to web apps — and letting the program teach itself.

A great example of the latter is Geni.com, a website that lets you quickly and easily build gorgeous, online family trees that are interactive and shareable. When someone first visits the site, this page introduces Geni:

The message at the top explains exactly what Geni is and what Geni can do for you. A more detailed list of features is included at the bottom left; however, what follows immediately after the introduction sentence (note: a sentence, not a paragraph) is the Geni interface where a first-time visitor can immediately get started using the service. All that’s required is your name, email address, and gender. No username, no password, no registration process. Instead, an account is instantly created for you and Geni emails you a temporary password so that, if you wish, you can login in the future and continue using your account. This allows the user to immediately begin using Geni to create their family tree.

After hitting the “Start My Tree!” button — which, by informing the user that there is no registration to follow, encourages him to take action and click — the Geni tree creator interface loads. A simple starter tree is already in place allowing the user to begin building their family tree right away.

Here is a perfect example of how intelligent UI design lets a program teach itself. Without ever reading a manual or help guide, the user is able to start utilizing Geni because you learn it as you use it. There isn’t even a need for a “Quick Start” guide — the Geni introduction page was the quick start guide! It taught you that your father’s name goes in the blue box and your mother’s name in the pink one. Your name is already entered for you once you reach the second page of the site. Furthermore, the colors themselves intuitively present information that’s useful for understanding Geni’s UI.

The yellow arrows extending from the user’s name turn green when moused over, signifying to the user that they can be clicked. When clicked, interactive boxes appear that show (read: teach) the user exactly what relationships the active branch can represent.

If a box is chosen, Geni provides a simple form where the user can enter that person’s name, life status (living or deceased), and an optional email address so that the family member can share and add to the tree. In less than five minutes I had signed up, logged in, and built a family tree consisting of every family member that I could bring to mind. Not once did I wrinkle my brow in confusion or go hunting for extra instructions.

What’s impressive is that Geni is an extremely powerful web app with loads of features, including messaging, calendars, and photo albums. However, because Geni is designed to gradually teach the user as she moves through the website, instruction manuals are mostly unnecessary.

That said, even digital natives need a little extra help sometimes, or perhaps simply want to more fully understand the web app. And while Geni does have your standard help directory — what Prensky might call a “legacy” of 20th century ways of learning — the designers have provided a much more 21st century way of receiving help (read: of learning the program): help balloons! The Baby Boomers have manuals; the Millennials have balloons.

When balloon help, as Geni refers to it, is turned on, the user can hover over almost any UI element to get a pleasantly succinct description of: (1) what the object is and (2) how you can interact with it. For example:

In addition to help balloons, Geni has an option to “turn on help messages,” which essentially brings up a small window within the interface that floats above everything else. The window highlights useful bits of information that can be clicked through one at a time, allowing the user to remain within the application interface instead of leaving to scour a dull list of FAQs.

Both balloon help and help messages can be accessed via a group of buttons conveniently situated inside the family tree creator itself.

As UI designers continue to learn more about their applications and how users are using them, navigating the Digital Age should become increasingly efficient and intuitive, molded for and by digital natives that grew up in this informationally jam-packed world.

What do you guys think? I’d love to hear some comments from the young and old, the digital pros and the technologically inept. Speak your mind.