The whole Web Design in Brief

Foundation

What is Web Design?

Pinning down exactly what is meant by the term Web design can be difficult. At best we can see that Web design is a multidisciplinary pursuit that consists of five primary components: content, visuals, technology, delivery, and purpose. However, theories of exactly how these components should mix together vary from person to person as well as project to project. Striking a fine balance between form and function, user and designer, content and task, and convention and innovation is the lofty goal of the Web designer. The good designer knows that scales should not tip too far one way or another and tries to avoid the absolutisms of “correct” Web design. Yet not everything in the field of Web design is so abstract—many specifics can be found. Correct mastery of the technical medium and knowledge of various details and conventions are mandatory for aspiring Web practitioners. We begin the discussion of the core aspects of Web design in the next chapter, which focuses on user-centered design.

User-Centered Design

Usability is about the aspects of a site that aren’t always noticeable but yet seriously influence the ease in which a user is able to accomplish a task using the site. Usable sites should be easy to learn, easy to use, and easy to remember. They should also result in few errors and be satisfying to the user. While some ways to improve usability, such as consistency and simplicity of design, are easy to formulate, sometimes it is difficult to satisfy the needs of every user. One reason is that users have different Web skill levels—novice, intermediate, and advanced (power users)—that will affect site usability. Another is that, while users generally share certain capabilities for accessing a site, such as vision and memory, users are also individuals, with unique characteristics, opinions, and experiences. They will also tend to view your site as a mere island in a big ocean of sites, and it is best to assume that they won’t want to learn your special rules.

With so many varieties of users, you probably won’t be able to perfectly accommodate every user’s unique tastes and requirements. However, if you create an adaptive interface that can be used by the three broad categories of users and make sure to test your site carefully with real users, you stand a good chance of making a site that is usable by most users. Be particularly careful not to lock users out, particularly those who may be disabled or slightly different from your average user.

Finally, a site should always be built to meet the needs of its users within the constraints or the desires of its creators. However, never use the quest for a usable site as a way to avoid difficult problems or as an excuse not to use graphics or technology or introduce new features that a user might want. An overzealous Web professional waving the usability banner can easily stifle innovation. Balance is always the key to great Web design.

The Web Medium

Understanding the various aspects of the Web medium is mandatory for aspiring Web designers. Even if the focus is only on front-end interface creation, designers should have at least passing knowledge of the various components of the Web sites, ranging from addressing systems to XML-based Web Services. While it might be said that architects often make lousy carpenters, it can also be assumed that they generally have some sense of the properties of the building materials their projects use, and so should Web architects. Some of these “building materials,” such as Web browsers, HTML/XHTML, CSS, JavaScript, and media formats, should already be very familiar, while others, like XML and networking protocols, may seem of little use to visual designers.

However, with the transition away from simple print-oriented Web design to more interactive software-focused Web sites, designers would be well advised to become more proficient in programming and networking technologies. The next chapter explores just how Web sites are built and provides a useful overview of the processes that can be employed to guide complex Web projects.

The Web Design Process

Building a modern Web site can be challenging, so site builders should adopt a methodology or process model. This process model should help guide the development process, as well as minimize risk, manage complexity, and generally improve the end result. Software engineering process models such as the modified waterfall can be applied easily to most Web projects. However, when project management experience is lacking or there are no clear goal statements, a prototype-driven or joint application process should be employed. It will be difficult to plan for what is unknown, and, if the process can’t be hammered down, it is probably best to try something quickly, fail, and learn from it.

While iterative prototype-based development would seem to easily fit with the organic nature of many sites, it can produce needless risk and result in building the wrong site numerous times before building the right one. Planning during the early stages of a site’s development minimizes risk and should improve the end result. A design document that usually includes site goals, audience and task analysis, content requirements, site structure, technical requirements, and management considerations should always be developed. The design document guides the production of the Web site. During the design phase of site production, use block diagrams, paper mock-ups, storyboards, and even mock sites to reduce the likelihood of having to redesign the site later on. If a plan is well thought out and the design phase prototypes are built, implementation should proceed rapidly and require little rework. However, once it’s finished, be careful not to rush the site online—adequate testing is required.

Maintenance and continued vigilance will be required, or your finely crafted site will begin to degrade.

Evaluating Web Sites

Site evaluations serve both to provide quality assurance and to increase the skills and knowledge of developers. Many common problems are faced by users that can be easily fixed. However, users may uncover more, and user evaluations should always be performed if possible because, in the end, the acceptability of the site will be determined by the users. However, do not discount developer evaluations, since it makes no sense to have users evaluate a site that is obviously built incorrectly or that exhibits known usability problems.

Site Organization and Navigation

Site Types and Architectures

One way to categorize Web sites is by their audiences. Public Web sites tend to have loosely defined audiences, while a private intranet’s audience may be very well known to the site creator. Audience considerations greatly affect the design considerations of a site. Sites can also be categorized by size, technology, and visual designs, but the most important grouping is related to the purpose of the site. Obviously, all sites do not have the same purpose and thus do not necessarily share the same design considerations.

Commerce pages have much different considerations than entertainment pages. Designers should always be careful not to apply the same design criteria to a site regardless of audience or purpose. However, despite audience or purpose, most sites share similar organizations. Some sites have simple architectures, like a linear progression of pages, while others exhibit complex hierarchies or mixed forms. When building the site’s structure, always consider cognitive science issues and attempt to balance click depth with link breadth. Designers should understand that the logical organization of the site and the physical organization do not have to match. In fact, the structure of the site is often more useful to the designer than to the user. While structure can improve a site’s organization, users may not always be aware of a site’s form as they navigate toward desired content or attempt to complete a particular task.

Navigation Theory

In the real world, people take different approaches to navigation, depending on the circumstance. For example, people act differently during a museum visit than during a park visit, or a store visit, or when looking for a friend’s house. Depending on the task at hand, the navigation techniques vary. Regardless of the site type, the goal of navigation should be simply to help users find their way. Good navigation should help a user answer location questions, such as “Where am I?” or “Where can I go?” or “How do I get where I want to go?” or “Have I been here before?” or “How can I get back to someplace I was?” The use of page labels, URLs, landmark pages, page style, and color can help users identify location. Navigation elements can be added to help users make choices about future destinations.

The placement and stability of navigation items should be well thought out. While advanced techniques such as hidden menus, frames, and remotes can address some problems, they may also introduce problems that should be considered before implementation. Last, always remember that navigation is a means to an end, not the end itself. Generally, users are not going to marvel at the beauty of your navigation system; in fact, they will probably consider your site a small stop on a much larger journey they are taking on the Web. Sites should not focus on bringing undue attention to their navigation. In fact, if the user notices it too much, we are probably not doing a good job. The next section discusses the actual use of various navigational elements, such as links, search engines, and navigational aids such as site maps.

Basic Navigation Practices

Making sure that users understand site navigation, particularly what the various links do, is an integral part of developing a usable site. There are many ways to add navigational links in a Web site, including text links, buttons, image maps, and even arbitrary hotspots. Designers should respect common link conventions such as color, underlining, and URL feedback. However, it is possible to change link styles in an aesthetically pleasing manner using both images and style sheets. Rollovers and other dynamic facilities can be added to links to further improve navigation and create dynamic Web sites. Links can also be difficult to maintain, and site designers are encouraged to account for broken links and moved pages. Frames and windows add more complexity to the basic navigation model but, with careful implementation, can be important parts of a Web designer’s arsenal. Yet, even when basic navigation is approached correctly, there are sure to be users who will want to navigate content differently or will be confused by predefined navigation. For those users, special facilities such as search engines and site maps should be provided, and these are discussed in the next two sections.

Search

If browsing is about following predefined trails in a Web site, then searching is going off-path, blazing your own direction through content. While it would seem that search facilities appeal primarily to power users and frequent visitors, the fact is that novice users are familiar with public search engines and rely more and more on sites like Google for searching. Understanding how public search engines work and are used is the first step in designing a local site search facility. Designers should also understand how users move from public search sites to local sites and attempt to guide users to what they are looking for. Search facilities must be designed with the user in mind. The best way to do this is to consider what users would actually want to search for in a site.

Do not fall into the trap of blindly imitating the free text search qualities of global Web search engines. When providing local search, make sure to provide both basic and advanced search forms. Format the search form carefully and provide instructions. This will help users form good queries, but in case things go wrong, make sure the negative result page provides extra help to get users back on track. Once users do get a positive result from a search engine, make sure that enough information is provided so they can narrow down the potential choices. Having too much data is nearly as bad as having none at all. However, always consider that searching isn’t everything. Like all forms of navigation, searching is a means to an end, not the end itself. There are many ways to help users find what they are looking for. The next section will present a variety of other navigational aids, such as site maps, site indices, and help systems.

Site Maps and Other Navigational Aids

Site maps provide a familiar construct for Web site visitors. Just as people use a map in the real world to find their way, a site map provides a guide for users to find their way to particular pieces of information on a site. Site maps may be graphical, textual, or a combination of both, and they are organized in a variety of ways. There are limits to the effectiveness of site maps. Users may not actually form mental models of site structures like designers do. A site index often provides greater benefit to users than a site map and can provide multiple ways to view data, including viewing data ranked by popularity or by some temporal criterion. Other aids such as glossaries or site tours may be useful in helping visitors figure sites out. A full-blown help system may even be required, particularly if complex forms need to be filled out. Finally, no single site aid meets all users’ needs. The differences between users suggest that designers should strive to employ as many navigational aids as reasonable on a site.

Elements of Page Design

Pages and Layout

Web pages are not print pages. While certain characteristics like size and layout are often similar, the dynamic nature of the Web environment can create design difficulties that don’t exist for books. Users can view pages under a variety of resolutions, and designs will literally break if designers aren’t careful. Even something as simple as the user adjusting the font size can ruin a nice layout. The design of a page is influenced both by the type of the page and by its content. Always remember that the beauty of the Web is that pages can easily be changed to fit content. A few common schools of Web design exist, and there are common layouts as well. Designers should consider these designs, but also think about experimenting. So far, little has been said about the actual components of a page, such as text, color, images, and form elements. The next few sections will investigate the proper use of these page elements.

Text

While HTML may not afford the designer much possibility to lay out text on a page, CSS provides everything from leading to kerning. Perfect positioning is possible if you want to spend the time. While font control isn’t perfect yet, downloadable fonts are on the way. Spending the time to lay out pages well by increasing line height, reducing line length, changing font size, and generally dealing with small details pays off in highly readable pages more likely to invite the user to stay and read awhile. However, now that we have better text control, we are armed and dangerous. If we’re not careful, we can just as easily mess up our organized site and pages with poor type layout. More damage can result if we blindly utilize technologies that are not consistently supported in browsers and that can cause ruined layouts or pages that are difficult to read. With the power of CSS, we can take display control back away from the user. Just remember the lessons from previous sections before you yank control from them—the user’s experience should always be our number one concern.

Color

Color is important to Web designers, as it makes pages both pleasing and meaningful to visitors. Unfortunately, color use on the Web can be difficult. With the wide variability of viewing environments, designers need to continue to rely on the 216-color browser-safe palette. Hybrid colors and color depth detection can help us break the 216-color limit safely, but even then things may not work. Without color correction technology that can deal with differences in the user’s viewing environment, color reproduction on the Web is far from an exact science. This is a rather unfortunate situation. Color preciseness is important if we want to make sure that the blue shirt users buy online is exactly the shade of blue they thought it was. Just think of the cost of returns due to a serious color shift! With the eventual introduction of color profiles in CSS (and PNG images, discussed in the next section), things should improve. Yet even when color is displayed properly, it is easy to misuse color by not using harmonious colors, providing too little contrast, or not considering the meaning of color.

Images

Without images, Web sites can become quite boring. However, images should be properly optimized lest download time becomes a key concern. Choosing the correct file type, either GIF or JPEG, and tuning color and quality are the best ways to reduce image file size. New image formats such as PNG promise improved download support and image use for the Web; but so far, their use is not advised. Flash files make a lot of sense and will continue to be used, particularly when animation is required. Always be aware of the numerous usage details—for example, the improper use of transparency and anti-aliasing can ruin an image, and background tiles can be easily ruined when seams are seen in the tile or when tiles are too small or too wide. Designers certainly have their hands full with the images on the Web, even before considering how to make something look pleasing. The next chapter will look at the relationship between Web page design and graphical interface design and what Web designers can and should learn from it.

GUI Widgets and Forms

Web sites often do exhibit many common conventions from graphical user interface (GUI) design theory. Some ideas, such as double-clicking or drag-and-drop, have much use on the Web, but more and more the Web is starting to look like a GUI application—particularly when used within intranets. Web designers must understand both the traditions of GUI design as well as what is reasonable to implement using core HTML technologies like HTML, CSS, and JavaScript. Forms, in particular, stand to benefit greatly from GUI principles. With some work and the use of a technology like Java, designers could turn a Web site into something that looks just like a desktop application—but should they? Web sites do have their own design aesthetics, as discussed in previous chapters, and strictly applying GUI layout and conventions from a Windows application might actually result in an unusable site.

Technology and Web-Design

Web Technology Best Practices

Any designer who has tried to build a Web site has occasionally been doused by a bucket of cold water known as Web technology problems. Even twenty years after its inception, Web technologies are immature and ever changing. Designers are encouraged to fully investigate the strengths and weaknesses of any technology before using it online.

While the tips presented here go a long way to improving Web site construction, at the end of the day the most important point is once again to understand that the use of technology is to support the users and address their needs. However, do not take some of the cautionary points presented as an excuse to avoid pushing the limits of Web technology. If we are too conservative, we might create a site that takes no chances with technologies, a site that is limited to simple HTML and server-side programming— one that users may not find to be motivating. If a new technology can be implemented properly, and provides an exciting enough new technology, users will probably deal with the downsides. However, only use emerging technologies when there is a very good reason to.

Pragmatic designers know that execution challenges will always exist, even with the emergence of standards-based browsers, and will continue to strive to address such issues rather than bury their head in the sand and pretend that such problems don’t exist. Unfortunately, errors on the Web happen more often than we’d like, and it is our job to try to correct this. The next chapter addresses one of the most challenging and underappreciated aspects of Web design: consistent and reliable delivery.

Site Delivery and Management

Speedy site delivery is very important because the user’s feeling about a site is heavily influenced by its responsiveness. When optimizing sites for speed, make sure to consider all aspects of delivery, including the protocols, the servers, and network location. When building a Web server, make sure to first consider the site’s delivery requirements and then choose the hardware, operating system, and server software to match. Hosting choices should also be carefully evaluated, and outsourcing should be considered a viable option for many sites. Once the site is being delivered, make sure to monitor it carefully. Site maintenance will have to be performed not only on server hardware and software, but on the content itself. Analyzing log files and checking for broken links is an important aspect of proper site maintenance. However, always consider that delivering sites to users is akin to having a conversation with them, and the issue of security, privacy, and acceptability of the content will certainly come up.