Graphic design ≠ UI design.

– Robert Kruger 19 August 2010

The most important part of a website is the navigation. When someone visits a website for the first time, they must learn how to use the navigation before they can absorb the site’s content. That means that poor navigation design can ruin a site visitor’s experience.

Website design is a combination of two different design disciplines - graphic design and user-interface (UI) design. Understanding one doesn’t always mean an understanding of the other.

Some sites are beautiful to look at, but navigating around inside the site is confusing or difficult. Here is an example. This site is very distinctive - a creative concept that stands out like nothing you’ve seen before. The problem is the navigation. I spent a couple minutes clicking on things, but I’m still unsure what they are selling, how they sell it, or what it costs. Several times I clicked on something (I can’t recall what) that moved me onto a totally black screen. If they feel like they are wandering aimlessly, most people won’t stay on a site for more than a few seconds (maybe a minute if there are naked bodies).

Other sites are so easy to use you don’t even think about the navigation system. Take www.apple.com as an example. The graphic design aspect to the site is good - clean, current, and easy to read - but the graphic design doesn’t conflict with UI design. They have a lot of information to convey, and their UI makes it easy to find what you’re looking for.

Here are some UI design suggestions to consider as you design your next website:

• The UI should suit the client and their audience. If your client sells shovels to construction contractors, a wildly exotic UI will likely hurt their business by confusing their non-technical audience.
• Accept current web UI conventions. Some aspects of UI have been executed the same way by so many sites that they have become the norm. Site search and user login very commonly appear in the upper right corner of a site. Primary navigation commonly runs horizontally near the top of the site or vertically down the left side. If you’re looking for ways to make a UI easier, work within the web norms and focus your creativity on your client’s message.
• Design only one UI. I know - I have ranted about this one before. Design one UI system for the entire site. Don’t change the UI from one page to another. Read my rant.
• The iPhone and the iPad have changed the rules. I have heard many different statistics about the market penetration of the iPhone/iPad. Mobile browsers will outnumber desktop browsers in 2010 (some say 2011). Apple sells an iPad every three seconds. Apple has sold over 50 million iPhones. However you look at it, the needs of mobile browsing cannot be ignored. An iPhone-friendly UI has a navigation system that doesn’t require a mouse hover to make secondary navigation available. iPhones can’t hover; they can only click. Being iPhone-friendly also means your navigation can’t be built in Flash. It is highly likely that the iPhone will never use Flash.

Keep UI in mind as you design your next website. If you can create a memorable aesthetic and a functional UI, you will stand out from the crowd.

Dialogs Professional Services includes creative consulting. Our seasoned producers can help you make good UI choices as well as help you leverage the power and flexibility of Dialogs. Talk to a consultant today.