Timeless Principles of Design
* This article has been taken from >> here
Four steps to designing a killer Web site
By Clement Mok and Vic Zauderer
To design is to solve a problem, and Web-site design is no different from any other problem. You must understand the problem, define the goals, plan the steps, and generate a solution. Clearly defining the problem is intricately tied to understanding. Planning involves developing a clear approach and process for solving the problem. Only then can you look at execution.
A designer’s challenge is to assemble the necessary tools, information, and approach so that Web-site visitors leave more informed than when they arrived. You can track the site’s success by motivating visitors to take actions you can measure.
In general, every designer should consider four basic principles: problem definition, target audience, information organization, and user interface and execution.
Only the fourth principle involves creating something tangible, and this is often difficult for designers and clients to grasp. It’s common to jump in and start creating something immediately, but strictly following the problem-solving process will provide a much sturdier logical basis for the end product. Each step becomes extremely valuable in creating a strong foundation upon which to build your site.
Building ideas upon decisions leads to a more successful design solution no matter what the discipline, especially in Web-site design, where subjectivity is common. Substantiating more subjective design approaches with concrete reasons enhances one’s reputation as a thoughtful designer.
Defining the Problem
Probably the most difficult stage of any design project is developing an understanding of the problem. Both the designer and client must communicate clearly to define the needs and goals of the project. Many projects begin without this mutual understanding. In some cases, no real problem is defined by the client, other than the lack of a Web site. The designer must interpret client requests and challenge them, because there is always a problem to solve, even when it is not formally stated. Even the simple request to build a site establishes a problem, which is usually to make the client more accessible to potential consumers, or to extend their identity into the Web. It’s the designer’s responsibility to clarify all aspects of the problem with the client.
Writing a statement that both parties can agree upon makes performing the work clearer for both. Formally delimiting the nature and scope of the job greatly increases the potential for the designer to complete it successfully. In some cases, the very act of drafting this document causes the client and designer to realize that a Web site is not the appropriate solution at all, or that additional areas of work are necessary to support a Web-based approach.
Understanding the Audience
Although the nature of the Web dictates that the site you design will be accessible to the public at large, that’s not who you’re designing for. It’s paramount that you have a target audience in mind, because this allows you to answer valuable questions about user experience: Should the site support a specific browser? What kind of Internet connection will be used? What screen size should be assumed? The list goes on.
There is no perfect solution for cross-platform compatibility, but some are more elegant than others. Some designers reference different versions of the Web site; others support the lowest common set of features most users can accommodate. The best solutions provide users with the right balance to keep them satisfied, yet push their limits enough to persuade them to improve their environment. Here are some ways to accomplish this:
Use an animated GIF to show the advantages of your Shockwave-powered Web site.
Show an image of a frames- or Java-based version of your Web site for those without a Java-enabled browser.
Include educational information about your site’s technology and explain what system-configuration changes the user needs to take advantage of them.
Educating the visitor is always appreciated, and gives the site added value.
Organizing Information
Web sites are showcases for content, or information. Sites are static and/or dynamic: The information on a static site doesn’t change until a new site is designed; the information on dynamic sites changes in response to external information. Some Web sites draw upon information from company databases; information depends on what is requested, thus creating different pages each time; see Figure 1.
The first step in building a Web site is immersing yourself in the client’s point of view and understanding the best way to deliver the information to visitors. A Web site must be “architected” for visitors to have a good experience. Work closely with your client to ensure you understand the entire scope of the site’s content: how much information the site will include initially, and in the immediate and long-term future. Analyzing the information in that light will allow you to build a structure that will accommodate the content at various stages of the site’s growth; see Figure 2.
Information architecture is a blueprint of sorts developed to expose the structure of the Web site and the possible routes via which visitors can explore and retrieve information; see Figure 3. Although the basic architecture defines the Web site from an informational, rather than navigational perspective, it helps designers focus on individual areas to develop and identify navigable paths. The blueprint can define the overall scope of the site and the pages’ relationships in a hierarchy.
These blueprints can be built in many different ways. Some designers simply stick Post-it notes on a big wall to represent individual pages. The blueprints tend to change often, so being able to reposition the pages is important. Others draw fancier blueprints using graphical illustration software like Adobe Illustrator. Advanced Web-authoring tools integrate the site structure into the software, allowing the structure to be interconnected with the pages you build.
Graphical User Interface and Execution
The previous steps provide a solid foundation for the actual site design. Now, drawing from information about the audience and structure, you can begin building the graphical environment.
There are ten general guidelines for developing a graphical user interface:
Create an intuitive system. One of the most critical aspects of user-interface design is catering to the models with which the user is familiar. The best interactive experience occurs when the models in the minds of the designer and the user overlap with the system’s model.
Interpret consistently. It’s more important for a system to react consistently than it is to appear consistently. For instance, buttons don’t necessarily need to look alike, but they should all exhibit the same response (highlighting, for example) to user actions.
Use logical progression. The visitor should always be presented with the simplest information first, then be able to progress further into more complex information. For example, a shopping home page should offer a few simple, categorical sections and then cascade into specifics that might involve 20 or more listings.
Anticipate user error. Design your site to minimize the mistakes a user can make.
Make the nature of functions apparent. A visible element doesn’t have to show all possible functions all the time. However, functions applicable to the current screen should be accessible without searching. An apparent function looks like what it is; for example, controls like buttons should look like something you’re supposed to press.
Focus on content. An interface should allow the user to focus on the content and the task at hand, yet still find controls when applicable.
Provide feedback. Every user action should have an obvious, immediate effect. When a user selects an option, there should be visual feedback appropriate to the action either through a change in the selected item, or a change to the page as a whole.
Distinguish between actions. To determine the appropriate interface, the designer needs to identify the user’s point of view at key locations within the site. This point of view generally jibes with one of three modes:
Command: telling the computer what to do, like performing a search.
Manipulation: making a change, like adjusting the size of an object on a screen.
Recording: entering data — filling in text field or making annotations.
Allow speed control. The visitor should be able to control his or her rate of progress through the site and the information. Scroll bars for viewing text fields and well-segmented pages of text let people take in as much as they can handle at a time.
Design appropriately. Strike a balance between assumptions and customization. It’s the designer’s responsibility to make good choices about the appropriateness of the interface to match the user and material. The user shouldn’t have too much control over the information.
Final Thoughts
The main thing to remember when planning and building a Web site is to think before you start designing. Always confirm that you’re solving a problem, and remember that the person visiting the Web site doesn’t know what you’re thinking. As a designer, you have a responsibility to make sure they are not overwhelmed. (Also see “Dos and Don’ts”.)
——————————————————————————–
Clement Mok, chief creative officer of NetObjects and chairman of Studio Archetype, is widely recognized as a leading new media and information designer. Mok has built Web sites for companies such as QVC, HarperCollins and IBM and is the author of Designing Business.
Vic Zauderer, director of product design at NetObjects, is a leading interface and information designer. Zauderer also designed the Understanding Business online efforts for Internet MCI and InfoSeek, and was a member of the Republic of Tea design team.
