Kiss My App

Tuesday, July 12, 2005

A Small Note on UI Design

All too many times, people designing web pages start out by boxing all of their content out into strict columns with graphical elements. Graphical elements such as backgrounds or lines that visually separate content.

During initial design phases, you may think that everything works visually. Long term, this can cause problems in your design since it loses it's ability to 'flex'. I'm not talking about strict 680 pixel versus 100% widths, I'm talking about handling visual use cases.

If you've gone through the work of strictly specifying all content areas such as a menu, submenu, text, header, etc-- what happens when the ideal case is to just show a table with just a few buttons? You can't because you've partitioned out your layout visually with graphical elements already. You may not always need to present a submenu or info box on all pages. So don't create a layout that always requires it.

A good example of proper UI design that can accomodate change while keeping a consistent look and feel is Apple.com. You have your header treatment, but all of the content below is placed on a 'whiteboard' where your UI can adapt to different requirements. There are no lines restricting where and how content can be placed, every page is ideally suited and layed out to support interaction with the user.

In summary, pursue a consistent look and feel with your web site, but don't start designing your UI with presumptions that a 2 column or 3 column layout is ideal for every page. This will allow you to keep your UI much simpler (and possibly more performant) when you don't force or cram content into your page based on the layout you came up with in photoshop in one afternoon.

2 Comments:

Post a Comment

<< Home