Internet design lies at the intersection of application design and multimedia design. In one capacity, the Internet is a forum: a place where businesses, organizations and individuals share ideas and present information to a worldwide audience. The Internet is also a tool, a way for people to interact, conduct business and shop. Web sites usually need to be both.
Web interface is forced to balance the task-oriented functionality of application design with the presentation needs of multimedia design. Finding that balance isn’t easy. Some sites need to be entertaining to convey information. Others need a more informative format to drive customers to make a purchase. While much of a web site is information presentation (multimedia), sites are still essentially a user interface (application).
Overview of Multimedia Design
Dictionary.com defines multimedia as “the combined use of media such as text, graphics, video, and sound, as on a computer system.”
Multimedia is a means of presentation. Early forms of multimedia include the first films with a soundtrack: video and audio being used in conjunction to tell a story. Today’s multimedia is much more complex. All share a common premise: one person or group communicating information to another.
Three common forms of modern multimedia:
Microsoft PowerPoint presentations: This is more or less a digital slide show. It invites little, if any, customer interaction.
Macromedia Director movies/CD-ROM: These are much more sophisticated than PowerPoint, but limited by the unscalable nature of CD-ROM. This format can engage customers by combining all forms of media into a high-bandwidth, multimedia presentation.
Internet: In theory, the Internet is very customer-centered. Unfortunately, many web sites are modeled on the above formats, resulting in sites with poor architecture and bloated file sizes.
In each of these examples, the communicator is retaining the majority ‘ if not all, of the control when it comes to communication. While both PowerPoint and CD-ROMs are intended for this type of communication, the customer-centered nature of the Internet conflicts with this method.
Overview of Application Design
Whether people work in Microsoft Word, Adobe Photoshop or Netscape Navigator, they’re interacting with computers through a graphical user interface (GUI). Prior to the broad usage of GUIs, people were forced to use either command line or menu-based interfaces. It was the unintuitive nature of these earlier interfaces that led to the original development of the first GUIs in the 1970s. Many interface advancements have been made since. The common goal: make human-computer interaction as productive as possible.
With each new application upgrade, you will generally find changes in the following three areas:
Interaction methods: How customers, also referred to as users, accomplish the tasks they wish to perform.
Program capabilities: An application task set. As customers and technology advance, the need for better functionality grows.
Aesthetics: The look and feel of the interface.
These changes are geared toward positive customer experience focused on task completion. Better understanding of customers’ habits means a more successful product.
Web design is not just making cool buttons and picking the right colors. The following pages discuss the many aspects of user interface design, from determining customer needs to usability testing. It can help ensure both the multimedia and application natures of your site are satisfied.
Customer Needs vs. Client Needs
Just as web design balances application and multimedia design, it also balances customer and client needs. While the client may have many needs, the customer has one—accomplishing the task at hand. Too often, web sites mirror the organizational structure of the corporation that produced it. This can confuse customers and make it difficult to accomplish tasks.
Many companies face this problem in their move to the Internet. They fail to bring real-world marketing sense to the Web. Bricks and mortar operations have been getting it right for years.
Customers visit a site with specific goals: to do research on a product/service, to purchase, to get help, etc. If a company’s site makes it easy for the customer to accomplish these goals, it not only meets customer need, it will generate higher sales.
UI Design Principles
As with any discipline, User Interface Design has rules that, if followed, will help create a more usable site.
Task-oriented architecture: Site architecture should put customer needs above corporate structure. Once customer tasks have been determined, make sure content and interaction points are arranged intuitively.
Clear, consistent navigation: Accurate labeling of links and a coherent navigational display are essential. Good labeling, especially for main sections, is key to helping customers find content. Our main concern in navigation is consistency from page to page. Customers depend on consistency as they make their way through sites.
Responsive interaction: A customer’s input produces immediate feedback. Studies show customers feel uncomfortable when it takes longer than 1 second for a clicked link to produce a result. Smaller file sizes and smarter code produces a more responsive page.
Balanced composition: Give proper weight to each element on a page. Navigation, text, images and interaction points should be balanced. Balanced composition allows customers to quickly scan a page and determine where to go.
Concise and pertinent content: People visit businesses online because it’s quicker and easier than calling or traveling to the business itself. If the information on a site isn’t concise, customers might go elsewhere.
Aesthetically pleasing: Most people don’t visit sites to view award-winning graphic design, but the design will be noticed. Aside from the role graphics play in navigation, they also help provide insight into the company.
In the same way a corporation’s headquarters was built to a blueprint, so must a web site. A Web site blueprint is called an interface protosite. It’s essential for customer-focused design.
Site map: A diagram of the site. It shows all pages and their relationship to each other. The map allows for quick reference to page position and provides an at-a-glance view.
Per-page needs analysis: This is a per-page listing of page elements, including navigation, company logo, photos, branding copy and main content. They’re listed on each page to give the development team parameters for design.
Template assignment: This is a grouping of similar pages. Pages that share common elements and purpose should also share templates. The designer should have knowledge of the different templates needed prior to wire frame composition, which ensures it will include all necessary elements.
Wire frame composition: This is a site’s blueprint. Wire frames use rules and boxes to indicate the general structure of a page, thereby creating a raw composition of all page elements. These elements are labeled and any links are called out with the use of color. The purpose of the wire frame: a “graphics-free,” functional view of the site prior to interface design.
Whether a company uses its website as a corporate brochure or as an alternative outlet for serving customers, the same goal applies: brand proliferation. Traditional media allows companies to communicate brand by revealing corporate personalities. New media also relies on personality, but even more important to online brand communication is customer experience.
Interface design is not the shade of green chosen for the background. Interface design is about affecting customer experience on a site. This depends upon a proper navigation model as much as it depends on proper image selection. It’s a balance of engineering and art.
It’s important that graphics complement the content while guiding the customer through the site. To ensure this, the graphics and the structure should be integrated. The customer experience will live or die by how well we strike the balance between form and function.
Customers ultimately decide if an interface is successful. So it’s vital to get their input prior to site launch. Ideally, usability testing occurs at least twice in site development—during wire frame testing and design testing. Key elements to be tested include:
Navigation labeling: The words used for navigation buttons/text links. Labels should act as umbrellas for all content by accurately communicating what the customers will find.
Composition: This is the overall layout and positioning of items on a page. Elements need to be organized coherently. Customers should not have trouble finding their way around a page.
Task completion: Customers must be able to successfully complete their tasks. Customers don’t revisit difficult sites.
Inevitably, things such as element positioning and functionality will change between the initial protosite and final design. The likelihood of change, coupled with the addition of colors, graphics and photos, requires retesting the interface. Two groups should perform testing: the original test group (to ensure nothing was lost in translation), and new customers (to ensure the original group was not pre-framed by past experience). This second test should use the same parameters as the first. Any interface problems discovered should be remedied and tested again.
The ultimate goal is a site that’s as usable as possible. It’s always cheaper to fix problems during development than to fix them once the site is live.
The most important thing web developers do is foster positive customer experience. When architecture, navigation and site responsiveness are improved, it’s easier for customers to interact with the business. The customer controls the information flow. It’s a designer’s job to make sure users have a reliable means of retrieval.
No One Likes Being Force-Fed
One of the more frustrating online experiences is the animated site introduction. No matter if a designer is trying to tell a story or a business is making sure the customer sees “all the necessary information,” animation is an obstacle to the customer.
As web developers, we must ensure our creation fits the intended medium. We don’t make short films. We don’t design interactive CD-ROMs. We don’t compile PowerPoint presentations. We design for the Web, and that means designing for web customers. People online are in control of what they see, where they go and how long they stay. When we design against this convention, we damage the customer experience. We must be diligent in striving for the best answer.
And that is: Do what’s best for the customer.