The Importance of Interface Design

by ryan on June 20, 2009

Designing interactions was previously considered an afterthought. Software and hardware engineers designed and built a functional system that was held together by an interface. Products were often powerful, yet confusing and there was a gap between the user and a functioning product. The interface was largely missing, and recently there has been significant improvement amongst all interface design. Industrial Engineers, such as CEO Mark Hurd of HP have improved office work flow by studying and improving an employee’s interaction between his or her own environment. Design firms such as IDEO and XEROX Parc have improved the connection between a consumer and a tangible product while companies like REGIONAL are improving urban interfaces such as their recent study and interface improvement between the Cuban government and its citizens.  The interface was a relatively unknown concept fifty years ago, yet recently it has begun to merge with traditional design.

Design has always carried an artistic notion, and many designers (i.e. web designers), have artistic backgrounds. By applying the artistic principles, such as shiny buttons, colorful logo’s, and fancy backgrounds, is an interface being created?  One could approach the problem from the other end, and ask if programmers throwing data onto a page creates an interface. An interface is an interconnection between systems, equipment, concepts, or human beings. IDEO has become successful because they are able to bridge this gap and create a path for the user to easily access the system. This missing gap that has been ignored for so many years is finally being grasped and integrated into traditional academic learning, such as with Stanford’s D.School. Interface design is no longer an afterthought, but rather a specific role that bridges a graphical front-end to the underlying information. Web designers are starting to question the placement of buttons, form fields, text layout, and use colors, various fonts, and gradients to create an eye-flow with end goals such as signing up for a newsletter or purchasing a product. The most successful companies are not the most elegant, but rather have a superior underlying system and a usable interface.

Google and Apple are all two companies with excellent interface design. Each is successful because it not only has a superior product, but a user can access the information. A powerful system and a well-designed interface rely on each other, and are equally important. A robust feature set is pointless if it is not usable, and a beautifully designed interface needs to bridge somewhere. One could argue Google’s products, such as its search homepage are boring, but it has the ingredients for success. Apple is an often-studied company for its excellence in design because it can boast exceptional interfaces throughout its computer software and hardware. The interfaces, both tangible and intangible, are both easy to use and understand. But why? Simplicity. Critics often claim Apple’s products are for novice users and Apple “dums down” the products, yet that’s the innovation behind a well-designed interface. It breaks down a complex information structure and allows one to easily interact with it, understand it, play with it, access it. How useful is a feature if no one can use it? It’s fair to argue one can do more with a simplified interface such as a Mac, than a complex, difficult, “advanced” interface, such as a Microsoft Windows. To design an elegant and usable interface, designers have begun to design from the bottom-up.

Wireframes, focus groups, card indexing exercises, and paper prototyping have all become rising stars amongst software and web design. Designers are beginning to use the artistic aspects of design to enhance an interface. An exercise I conducted recently for a client began by ranking their company colors by brightness, for brighter colors have a greater ability to pull the eye: green, orange, and gray. I had several target users vertically rank/sort every page element the client had requested on the page, and asked what they wanted to see first, down till the webpage element they wanted to see last. Site title was first, followed by site navigation, page title, and so on. After they ranked the items, I designed a wire prototype largely based on this feedback using a layout program called Omnigraffle. The design was pure layout, and was still black and white boxes. After I designed the layout, I had the same users group each page element into three categories: very important, somewhat important, and least important. I went to my wire frame layout, and applied the most eye-catching palette color (orange), to any “important” page element, the secondary palette color (green), to any “somewhat important” element, and finally the tertiary palette color (gray), to the least important elements. The result was a page layout designed to flow with the eye, but used color to highlight the most important items as the eye shifted from left to right, top to bottom.

A bottom-up approach to interface design? I think so!

Similar Posts:

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post: SEO Site Checklist