Create and Recognize Effective Interface Designs

Go To Interface Design Tips

Too many times we've loaded CD-ROMs or visited Web sites only to struggle to find the information that we're looking for. It's a frustrating quandary that often results in a quick exit and a searching eye on the outlook for more promising sources. It seems many sites give little consideration to organization in conjunction with aesthetic appearance. Some emphasize quantity over quality by presenting too much information on one screen, which makes the pages seem cluttered and overwhelming. Others spend so much of their efforts just trying to look great that the information isn't presented in any logical manner and the user has to overcome a learning curve to get at the goods.

In this article, we'll explore some aspects of good GUI (graphic user interface) design with regard to multimedia development and Web design. However, we don't believe that interfaces have to fit into any particular mold. That's what makes them so interesting. You can do whatever works for your project. And, new uses are constantly being dreamed up. From the CD-ROM, to a cutting-edge e-commerce site and beyond, you're free to expand the boundaries of your imagination and push the envelope. It hasn't all been said and done. New tools are constantly emerging that make our jobs more exciting and challenging. Flash, Shockwave, Quicktime and other technologies are maturing every day to enrich a palette of tools to help create revolutionary products. The challenge will be to master these tools and keep up with the changes.

The purposeful GUI

Reflecting back on all of the GUls that we've used, it's become apparent that attention to interface design isn't given enough weight in relation to the overall graphic design. So many a are hard to use and understand; some are beautiful completely unusable, while others are ugly but very functional. Remember that the interface is the window to a world that you're creating. It's both a tool and an experience. Your project is a destination.

GUls are relatively new, and are constantly evolving and being improved upon. You, as today's designers, are pioneers, writing the rules. You're inviting people to come look at your information and manipulate your interface. You must help them to do it and make them comfortable. Interfaces must assist a user to perform a task, not become a task in itself.

GUI design extends to many areas of computing. Books have been written on the subject. There are multimedia CDs, Web sites, operating systems, software programs, videos and games. Although this article will concentrate on multimedia interfaces, all of these different projects have something in common. They have to answer the following questions and should be judged on the quality of their answers:

Before you start

Designing an interface doesn't have to be a one-size-fits-all solution. There are many ways to design and organize a project, and many creative ways to present your information. To help determine the best way to create an interface you must ask some basic questions and start collecting data. The most important thing to know and always keep in mind is your audience. You can't know too much.

Once you know the answers to these questions you can start designing appropriately. The makeup of your audience shapes your interface with regard to color, layout and graphics.

Dive in

After you understand your intended audience, you can get down to the design. However, you can't just throw buttons, links and graphics on the screen;you need to design with usability in mind. Here are a few ways to make your interface as easy to use as possible.

Readability

Keep it simple

Consistency

Navigation

Guide your users

For complex actions, make directions clear and simple. Guide users along so they can't get lost. Minimize the options when trying to complete a task and force them to follow a simple sequence without getting off the path. This is especially important in e-commerce where many shopping carts are left abandoned. In testing, we've often seen users skip over directions, try to work with a program, and then get frustrated and complain that they don't understand how to do something. It's amazing how far people will go in order to avoid reading directions, especially on a computer screen. So you must guide them to  destination with a firm yet gentle hand (you don't want to come across as pushy or condescending).

Performance

Tolerance

Put your site to the test

Test your rough drafts on users. It's amazing to see how a user can immediately break an interface or program in ways you never conceived of. Many times we've seen users go about trying to complete a task in a way that we never dreamed would be tried. We've saved amazing amounts of time and effort with early and frequent testing. As a designer and programmer you are very competent in working with these types of programs, but most users are not. They have a wide range of backgrounds and experiences and go about completing tasks in different ways. You can't account for all things but you can help minimize potential consequences and create ways to guide users. By getting feedback and testing early, you can save many hours of redesign, gap plugging and bug fixing.

Examples of good interfaces

There is certainly a good share of interfaces that we've found to be intuitive, user-friendly, audience specific and attractive. Using the above criteria as the yardstick, in this section we'll highlight two interfaces that succeed.

One of the most interesting interfaces we've seen on the Web recently belongs to Eye4U, shown in Figure A and located online at http://www.eye4u.com. It pushes Flash to the limit. The clever manipulation of bandwidth gives this site a real multimedia feel. Surprisingly, the movement doesn't overwhelm the site and the organization is clean, strong and easy to navigate.

Point your browser to http://www.fraboom.com for another Web site with a simple, clean interface that incorporates fun sounds and clear graphics. With its extensive use of Flash, the interface is easy to understand and fun to use. The FraBoom Web site, shown in Figure B, really seems to understand its audience. Different sections have a look that's appropriate for children, parents or teachers. It's designed to allow anybody quick access to its content without talking up or down to its mixed audience.

Examples of bad interfaces

When it comes to cluttered design some of the biggest names on the Web are the worst offenders. Just look at Yahoo! (http://www.yahoo.com), shown in Figure C. There are so many things on the home page it's hard to see anything except blue links. How can you find anything? The page is so bland it has no appeal. Although this is one of the most popular sites on the Web, it really could benefit from an image redesign. Some graphics would help the site create a stronger image and could streamline the presentation of its information. Often sites like this take repeated usage to get used to its organization.

Perhaps Yahoo!'s early presence on the Web is what helped people overcome the awkward interface and become accustomed to its structure. Sites that are just coming into existence today don't have this luxury. Today, it's easy to disregard a site that you find troublesome since competitor sites are just a click away.

The Web site shown in Figure D is actually featured by Macromedia in their Shockwave section! The interface is a disaster. The look is so busy and trying so hard to be artsy that it's very difficult to read and figure out. Go check it out online at http://www.juxtinteractive.com. The site is way too scattered to achieve its goals. For a site with only a few links, it needs to make you want to explore; a goal it woefully falls short of. And its use of Flash hardly enhances the site. This interface needs major cleanup to convey its message. Some graphics, which look like buttons, are not and some elements, which don't look like buttons, are. Some of the text is a link and some isn't, although all the text looks very similar. Furthermore, many of the pages look completely different, providing no consistent user experience. Their typefaces are hard to read and the imagery confusing and irrelevant. At least they say that they're about to launch a new site very soon; let's hope they've changes the interface.

Compare or beware

These examples of good and bad interfaces are just a very small sampling of interfaces that succeed or fail in big ways. We invite you to examine, test and compare your interfaces against your competition. Look at interfaces across different industries to see how different sectors come up with different solutions. Try testing these interfaces against the criteria outlined in this article. It can be a fun, enlightening and interesting way to learn more about engaging and effective interface design. Sometimes knowing what not to do can be as important as knowing what to do.

Summing it up

This article has only scratched the surface of interface design. Many books and endless debates surround GUI design. However, this article can be a solid foundation to helping build a multimedia project interface. Remember, when designing your GUI, you can be as innovative and creative as you want. But to create an effective tool, remember your goals, keep the important principles outlined above in focus, plan ahead and test your designs on users. By keeping sight of the end user and task, you can create engaging and helpful tools. Push your creativity but keep things simple, elegant and functional.

Go To Interface Design Tips