UI Design: It’s the End of an Era

New technologies demand a new way to think about design

I first saw a graphical user interface (GUI) in 1981, on a Xerox Star. By 1991, it was a de facto standard. It still is. Yet it’s time to move on. Vastly improved graphics hardware, wildly varying screen resolutions, the advent of touch and sophisticated mobile devices, and ubiquitous media bring both opportunity and demand for change.

Our users have changed too. When computers were expensive business tools, we expected a certain level of user expertise. Today, everyone from toddlers to 80-year-old grandmothers have computers.

As an old TV series said, “We have the technology.” Microsoft offers Silverlight and Windows Presentation Foundation (WPF), Adobe touts Flash and Flex, and Apple is driving touch into the mainstream. HTML 5 is taking shape. These technologies allow UIs that are more expressive, productive, and elegant than we’ve ever encountered outside movies and TV shows.

Our new UI technologies are still maturing, but based on my experience in UI design, technology is not the bottleneck. Instead, we are held back by our own minds. I have become more convinced of this with almost every public demonstration of Silverlight that I see. Microsoft, for example, is currently showing a Facebook front end written in Silverlight. It has nice colors and animations, yet I cringe every time I see it. Implicitly, it says “Keep designing UI the way you have been for decades, and then slap some nice colors and animations on it.”

Don’t misunderstand me—nice colors and animations have value. UI researchers talk about the “Aesthetic-Usability Effect.” It refers to a modest increase in user productivity just because users like a pretty interface. We can do so much better than that. We have the potential to go much further, driving much higher gains in user productivity and satisfaction. Have you ever seen a website that has gorgeous colors and graphics, but it’s just so darn hard to navigate? Such websites are far too common. I believe they are the result of a misguided desire to stress “pretty” over “usable.”

In Silverlight, the degrees of freedom for helping the user are vastly increased. We can create entirely new interaction patterns that are highly optimized for a particular set of users. We can create applications that switch out screen designs for different levels of users. We can use animation and color to guide and inform the user. The end result can be significantly improved productivity and vastly lower training and technical support costs.

We’ve been able to do this for at least three years now. You can see a video I made two years ago, showing my team’s first attempt to use these advanced interface technologies effectively. It’s episode 115 of the Internet TV show .NET Rocks TV (www.dnrtv.com).

We don’t think that that application is by any means the ultimate XAML-based UI design. In fact, we’ve already gone beyond it in some ways. But at least it breaks some of the shackles of the past and tries new ways of helping the user. It’s pretty, but more importantly it has smooth interactions and many subtle cues to help the user.

Some of the cues are so subtle that they’re hard to notice. That simply means they’re helping the user on a subconscious level. For example, we have attachable notes for records. But they don’t sit in a box on the screen. They look like they are pinned there, and they have a subtle gradient that gives them a natural appearance. They feel to the user more like notes on a corkboard in their house. This communicates their purpose better than a help file or training course.

We discovered that the key to creating such designs is to open our minds and step outside the boundaries we’ve imposed on ourselves. We must question principles that made sense 25 years ago but don’t apply in a world with such dramatic technology changes and increased possibilities.

If you want to work in the world of new UI technologies, I challenge you to understand your current mental blockages and work to overcome them. Try to activate the right side of your brain, and learn more about the process and mindset of design. My article in the September  issue of DevProConnections magazine on prototyping: "Design Your User Interfaces, Don't Just Decorate Them," InstantDoc ID 125542, carries this concept further. If this sounds intriguing to you, take a look at that article as the next step.

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish