Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Six Principles of Good Commerce Design

  • Print
  • + Share This
On the Web, issues of speed, organization, clarity, and consistency drive your solution. Learn how to keep these aspects and the needs of your customers in mind when working to balance design and style on your Web page.
This chapter is from the book

This chapter is from the book

Web-design books are usually more focused on style than design. Design focuses on understanding your subject or content and devising a useful way for it to serve its audience. Style is a necessary component of design but one that is narrowly concerned with visual presentation.

The distinction is important and often overlooked. As Web designer Jeffrey Zeldman says, when the distinction between style and design is lost, "we get meaningless eye candy that gives beauty a bad name."1

In the best designs, style takes a back seat to the appropriate solution. On the Web, issues of speed, organization, clarity, and consistency drive your solution. During the site-building process, you will be frequently challenged and sometimes confused about the right design choices to make. In Chapters 3, 4, and especially 5, we provide concrete ways to design a total commerce experience for your customers. This chapter focuses on putting customer experience first and the customer's low tolerance for poor performance and service. Keeping the following principles in mind will make it easier to do the right thing.

Principle 1: Speed Is the First Priority

Most designers do not think of speed as a design issue. But the Web is an interactive experience, not purely a visual one. Interactive experiences put the user in control of the pace. When a user has to wait, they have lost control and the experience is diminished.

Customers don't care why they have to waitÑa poor dial-up connection, Internet congestion, or problems with your server. They want what's on your site now, and not a second later. Site visitors who have to wait too long for your page to display will go elsewhere, no matter how useful or relevant your site is.

Much research has focused on the time it takes to for a Web page to load in a browser and what effect that has on purchasing.

Studies have revealed the significant impact of poor download time. Consumers believe that the Internet provides service on demand. Asking them to defer their requests results in loss of customers.2 An estimated $25 billion in revenue is lost annually due to Web performance issues.3

Zona Research found that one Web site had a home page abandonment rate of 30 percent. That means that about 1 out of every 3 site visitors left after requesting the home page. By reducing the load time of this page by approximately 1 second, the site was able to lower this rate to 6_ 8 percent.

It seems as though there is little attention paid to the issue of speed. Fig. 2.1 shows that the home page of commerce Web sites are getting increasingly slow, despite complaints from users. This is largely because companies focus solely on content quality as the key to constructing a meaningful experience. But, as research shows, customers regard a sluggish site as unusable (See Fig. 2.2). Therefore, meeting acceptable download times is a top priority in designing a usable commerce site. As a designer, you can play a significant role in meeting this need.

Figure 01

figure 2.1: home page performance slowing down

Data suggests that the trend in commerce sites is for slower-, not faster-, loading home pages, despite research that shows site visitors respond negatively. The addition of more advertising and the prevalence of dynamically generated pages have contributed to the sluggish performance. This chart shows average response times (access and download) on 56-Kbps connections to popular travel, shopping, and stock brokerage sites.

Figure 02

figure 2.2: don't let slow downloads test patience or hamper usability

With the majority of the world still using low-bandwidth connections, try to keep as few elements on your page as possible. For example, if you are using graphics for navigation, group them together as one graphic instead of separate ones.

The realities of the network

The Internet is a complex, distributed network that supports an ever-increasing amount of data and users. It was born as a service to connect academic, government, and military institutions and was never designed to handle billions of dollars of international commerce. As a consequence, it has limitations. The most noticeable is called latency, or lag. As packets of data travel from one computer to another, delays are bound to happen. Latency is the time that elapses between the request and response for information between computers.

During the past few years, a large portion of Web content, like that served by many commerce sites, has become dynamic. Assembling content in real-time (dynamic) rather than delivering static pages requires not just adequate bandwidth but highly responsive Web servers and applications. Any delays caused by information processing will only add to the network delays. Much of the responsiveness of your site depends on a complex interplay of networking technology, software, and hardware.

A prerequisite to designing for maximized speed is understanding how a page gets from your server to the customer and where the potential slowdowns can occur along the way (See Fig. 2.3).

Figure 03

figure 2.3: speeding up the process

Before you design a fast site, you must understand how a Web page gets from your servers to the customer. This is a complex, and mostly invisible, process that is loaded with potential potholes.

Many commerce sites use specialized content delivery services such as Akamai and Digital Island. These companies have devised sophisticated systems that intelligently remove much of the latency in the network.

The blame game

Although so much can go wrong with the networking process, most of these factors are invisible to the casual user. If the page loads slowly with gaping blank rectangles where images should be, teams call the designer first, because your work is supremely visible. Plus, it's easier for the team to ask you to shave another kilobyte off your pages than to debug a logjam in the application server.

You can be valuable to your design team by being prepared to handle such situations. Having a copy of Fig. 2.3 is a good start. It will help you understand what you can fine-tune in your design and suggest other places for your team to search for the problem when your fine-tuning isn't enough.

If you get blamed for slow downloading pages, gather ammunition. Begin with any pertinent performance data. Log the sizes of your pages complete with HTML and images. Some HTML editing software programs, such as Macromedia's Dreamweaver, will calculate this for you. Set a page size limit and make sure none of the pages exceed it. Get a contract with a company like Keynote Systems4 that can measure the download times and latency of your site continuously. The speed of your site should be a priority for frequent testing. We cover the testing process in Chapter 6.

The bottom line

While a growing percentage of users are adopting faster access connections, knowing that the bulk of the online audience is still using dial-up access is crucial (See Fig. 2.4).

Figure 04

figure 2.4: online users by connection speed

Percent of total Internet audience

Testing shows visitors' download tolerance levels range from 2 to 10 seconds. Since all evidence shows that faster is indeed better, shoot for a target of 4-5 seconds per page (See Fig. 2.5). Meeting this mark could meanthe difference of hundreds of thousands of dollars to your bottom line.

Figure 05

figure 2.5: consider bandwidth

This chart is useful to estimate how long a given page will take to download on an optimal network. However, remember that latencies in the network will add delays.

With a clear idea of historical performance and an inventory of page sizes, you'll be able to refocus the team on other culprits. More important, you can become the user advocate on speed issues and make it the primary criteria for delivering a good user experience.

Imagine that someone from the sales department walks in and says "We need two more ad positions on this page." You should be able to respond, "Adding these positions will also add an average of 28KB per page to the download time. That slowdown will affect sales negatively. Are you willing to make that tradeoff?" Granted, it won't always be that simple to explain, but by connecting requests to reality you'll be able to educate all parties involved on this issue.

Speed is a design issue, but it's not the only area in which you can make a difference. As a designer, you can do more than crunch JPEGs or clean up HTML. If you design your site to be easier to use, your customers will perceive your site as being fast, even if its actual download times remain the same.

  • + Share This
  • 🔖 Save To Your Account