The Evolving Face of Web User Interface (UI) Design

The Evolving Face of Web User Interface (UI) Design

With increases in smartphone and tablet usage, developers are posed with serious challenges to UI design

For the first time in more than 20 years, the supremacy of the keyboard and mouse is being challenged as the primary UI that people use for their computers. The diversity of computer form factors, portability, and utilization that's happening today is unprecedented. This represents a serious challenge to UI design no matter what technologies you decide to use. The web is no exception—the way web pages are used today has never been more diverse.

It's easy as a web developer to compare yourself to the user during development. Because we tend to develop web pages on a desktop PC in front of a large, high-resolution display that's connected with a keyboard and a mouse, we also tend to think that our users will work in the same way. When I say it like that, it's absolutely obvious that we're wrong.

The statistics say it all—mobile web browsing is on the rise. Mobile web browsing means more than a small display screen. In most cases, the term also implies using touch gestures, rather than a mouse. Although users can pan, zoom, stretch, and pinch your web page, they'd rather that the web page worked without any additional effort. What impact does a finger covering up a portion of your web page have on its usability? Are you building your web page to make the mobile touch experience as good as it can be? Your competitor might be answering and solving these questions already.

Then there are tablets. The iPad is a huge success, Windows 8 is finally out in the wild, and Google is making its own Android tablet. Tablets are here to stay. Most tablets are touch-centric, and screen resolutions and size vary. Because of this, building a great tablet-sensitive web page is an art form. What impact does the chrome-less browsing experience in Internet Explorer (IE) 10 on Windows 8 Metro have on your design? How will your web page react to Windows 8 gestures such as flicks and two finger taps?

So far, I've really discussed only the small form factor and effects of touch. However, screen resolution also has a significant impact on how web pages behave. High DPI displays such as the retina displays on certain Apple iPhone and iPad models present interesting challenges. The simple answer is to provide ultra-high resolution images everywhere on your web page, but doing so has a cost in bandwidth and performance.

CSS3 media queries can help address both screen size and resolution challenges. The good news is that most smartphones and tablets have modern browsers that support CSS3. But the support varies from browser to browser, so it's best to test thoroughly.

Just because you're building web applications doesn't mean you're immune to the diversity of the UIs that are out there. Don't think that the revolution is over yet—Microsoft's Kinect has pointed a way toward even more unusual UIs that use gesture and voice. Developers can count on the fact that building a great web page is only going to get more interesting.

Hide 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.