Investigating Elements on the E-commerce Homepage

Transcription

1 Investigating Elements on the E-commerce Homepage Focus on Business to Customer Websites Sunghyun Ryoo KANG*, Eunjoo LEE** *Iowa State University, 158 College of Design, Ames, IA 50014, USA, ** Chungcheong College D/o New Media 330 Wolgok-Ri, Kangnae-Myun, Cheongwon-Gun, Chungbuk KOREA, Abstract: The homepage is the most important feature of a Website because it provides a first impression to users and represents the character of the entire website. Many researchers and organizations are studying the usability of E- commerce sites, but most of this research is focused on technical aspects. However, little research has been undertaken to explore the designer's influence on visual communication for the usability of E-commerce Websites. The purpose of this research is to explore common design problems on current E-commerce homepages and to suggest how designers can improve the aesthetic quality and usability of E-commerce homepages. One hundred Business to Customer (B2C) sites were selected randomly during the month of January 2002 for analysis of their design elements. This poster presentation will present the research method and common existing problems in E-commerce homepages, and finally, suggest possible solutions to these problems. This research found three different types of screen structures: left aligned fixed structure; left aligned flexible structure; and center aligned flexible structure. The main navigation of E-commerce sites was generally located on the left side and between the site identity and the content. However, because of the unique characteristics of E-commerce homepages, the content area also contains navigation elements. This creates an organizational problem and visual chaos. To create a well-organized E-commerce homepage design, this research suggests a grid system to manage layouts. To achieve this, the designer must have a detailed layout plan. Well-organized information with clear hierarchy and well-balanced layouts create a good visual experience and increases the performance of the Websites. Key words: E-commerce, Homepage, Design Elements, Investigation 1. Introduction E-commerce, business based on the Internet, has changed not only the customer s buying activities but also the seller s business and marketing strategies. E-commerce is not only about Websites but also includes the customer s privacy, secure check out, delivery, and service. A homepage, which is the first loaded web page on a website, creates a first impression for users. Nielsen and Tahir [1] point out that "homepages are the most valuable real estate in the world." Users will see the homepage first and then stay for a while to see whether the website is useful or interesting. Mahlke s research [2] showed that usefulness was a top factor that can make a customer stay on the website. Van Duyne et al [3] noted that balancing the branding, navigation, content, and download speed can be factors to entice customers. Well-organized information and other elements will be keys to successful E- commerce. There are many guidelines suggesting how to make more usable Websites but research in how to organize visual elements for E-commerce is very rare. The purpose of this research is to explore the common design problems of these elements on current E- commerce homepages, and to suggest how designers can improve their aesthetic quality and usability. The aspects

2 of E-commerce related to sales, service, and marketing are not considered in this paper. 2. Method To see the general problem of current E-commerce homepages, one hundred Business to Customer (B2C) Websites were selected randomly during the month of January Yahoo was used as the search tool and the search categories were as follows: Data Analysis Only ninety-nine homepages were analyzed because one of the E- store sites in the original random sample was no longer in service. The monitor was set to 1024 by 768 pixels to view the Websites. Each homepage was divided into 68 by 68 pixel grids to analyze its structure (Figure 1). During the course of the random selection of the E-commerce homepages, this research found that E-stores and E-malls (see the definition below) have different composite elements and layouts. Therefore, homepages were divided into two categories to see the differences. This research proposes that there are six elements in E-commerce homepages: site identity, navigation, content, advertising, negative space and layout. Some categories are divided into sub-categories. Navigation is divided into four different sub-categories: main navigation, utilities, search, and footer. Figure 1. Grid Structure 2.2 Terminology The terminology used in this paper is from Nielsen and Tahir [1] and Krug [4], as well as new terms specifically coined in this research: E-store: A single store which provides products or services. E-mall: Multiple stores that are similar to a physical shopping mall. Site Identity (SI): The logo or name on a homepage that serves to identify the website. If a SI contains a tagline that is grouped together as a part of the SI, this research considers it in the SI category. Independent Tagline (IT): Supporting words or phrases located independently to identify characteristics of the website. Main Navigation: The main category that provides links to sub pages. Search: A way for users to inquire about the location of website information including pull down menus and an A to Z index. Content: Promotional content and main information of the website. Often, it includes hypertexts. Advertising: Banners and text advertising other products and services that are linked to the other URLs. Utilities: This term is derived from Krug [4]. Links to important elements of the site that are not part of main navigation such as home, help, FAQ, log in, , and password, etc.

3 Footer: Information generally located at the end of a homepage which includes a list of redundant main navigation in hypertext, address, copyright information, and publication date of the Website. The term "footer navigation" is used by Nielsen and Tahir[1]. If a footer contains utilities, this research considers it in the utilities category. Negative space: Empty or white space between navigation elements, Website content, and the top and bottom of a homepage. Flexible layout: Resizable browser windows that can be modified according to the user's monitor size or the user's intention. The window size is generally programmed by percentage. Neilsen and Tahir [1] used the term liquid layout" to represent the same thing. Fixed layout: Non-resizable homepages with a fixed size. The window size is generally programmed by pixels. Neilsen and Tahir [1] used the term frozen layout to represent the same meaning. Mixed layout: includes both flexible and fixed layouts. 3. Elements of E-commerce The average length of an E-mall homepage is 18.4 units which is approximately 1251pixels. The average length of an E-store homepage is 17.3 units which is approximately 1176 pixels. This data shows that most E-commerce homepages have a scroll bar. Window resolutions that do not require vertical scrolling are generally 300 pixels for 640 by 480, 420 pixels for 800 by 600 and 600 pixels for 1024 by 768. Table 1 and 2 show the average length and width and frequency of each element on an E-commerce homepage. One significant difference between E-stores and E-malls is the content. Ninety-eight percent of E- stores provide their own content while only 76% of E-mall homepages have content. The other difference is advertising. This research assumed that E-commerce homepages will have a lot of advertising but the statistics show that while 90% of E-malls have an advertising only 49% of E-stores have advertising. The format for advertising on the E-store homepage is typically a horizontal rectangle while the advertising on an E-mall homepage is more like a square. Most E-commerce homepage footers are composed of copyright and contact information, but also many homepages for E-commerce sites include a telephone number and links to the security and privacy policies. According to Tables 1 and 2, E-stores have more taglines than E-malls. The tagline shows that E-stores are more concerned with identifying their purpose than are E-malls. It was more difficult to identify the purpose of an E-mall in a tagline. Overall, about 66% of E-commerce homepages have a tagline associated with the site identity or use an independent tagline (Table 3). Table 1. Elements of E-store Homepages; Size, and Frequency Categories Site ID Navigation Content Advertising Negative Logo/Name (ID) Tagline Main Utilities Footer Search Space Width Unit Pixel 278px 319px 405px 399px 451px 245px 481px 301px 311px Length Unit Pixel 77px 55px 337px 80px 75px 58px 548px 120px 716px Frequency 100% 33% 98% 90% 90% 76% 98% 49% 98%

4 Table 2. Elements of E-mall Homepages; Size, and Frequency Categories SI Navigation Conte Advertising Negative Logo/Name(ID) Tagline Main Utilities Footer Search nt Space Width Unit Pixel 298px 431px 331px 351px 488px 232px 384px 272px 350px Length Unit Pixel 72px 51px 397px 87px 95px 53px 467px 218px 647px Frequency 98% 20% 98% 88% 88% 72% 74% 90% 100% Table 3. Frequency of Composite Elements of Site Identity Categories Logo/Name(ID) ID with tagline IT ID with tagline & IT SI Number % Number % Number % Number % Number % E-store 11 22% 20 41% 16 33% 2 4% % E-mall 22 44% 18 36% 10 20% 0 0% 49 98% Total 33 33% 38 38% 26 26% 2 2% 98 99% Table 4 shows the composite elements of the main navigation. Overall, sixteen out of 99 homepages use a tab style of navigation, however text-based navigation was the most dominant method. Seven out of 99 homepages did not have any navigation style other than a search method. Table 5 shows the search methods used on the E-commerce homepages. Searching by typing words is the most popular search method followed by the pull down method. Twenty-five out of 99 homepages do not have the search engine for navigation. Table 4. Frequency of Composite Elements of Main Navigation Tab Text Tab & Text Image & Text Search Number % Number % Number % Number % Number % E-store 9 18% 26 53% 3 6% 8 16% 3 6% E-mall 2 4% 38 76% 2 4% 5 10% 4 8% Total 11 11% 64 65% 5 5% 13 13% 7 7% Table 5. Frequency of Composite Elements of Search Typing Inquire Pull down A-Z index Separate page No Search Number % Number % Number % Number % Number % E-store 29 59% 16 33% 1 2% 5 10% 11 22% E-mall 34 68% 13 26% 1 2% 0 0% 14 28% Total 63 64% 29 29% 2 2% 5 5% 25 25% There are currently 5 different styles of layouts for E-commerce homepages. These statistics in table 6 show that about one third of E-commerce homepages have left fixed layouts and another third of E-commerce homepages have mixed layouts. Left flexible style layouts and center flexible style layouts are also found on E- commerce homepages but they are rare. Design elements seem easier to control in fixed layout styles because the size is always fixed and is not affected by the user s window resolution. However, users who have a high window resolution will see a lot of negative space when homepages are created under 640 pixels. Most homepages with a fixed structure have a pixel

5 width under 800. The problem with mixed layouts is that designers cannot control the negative space because some parts are fixed and the other parts are flexible. Mixed layouts will show when implied lines are not lined up between elements and this may create an unbalanced space. E-store homepages have more center fixed styles than E-malls. When a user has a 640 by 480 window resolution, the center fixed style seems like a left fixed style. Table 6. Layout Styles on E-commerce Homepages E-mall E-store Total Number % Number % Left fixed 20 40% % 34.3% Left flexible 2 4% 0 0% 2% Center fixed 10 20% % 27.35% Center flexible 3 6% 1 2% 4% Mixed 15 30% % 32.35% Table 7 shows that most homepages have more than two text alignments. About one third of homepages have left justified text alignment, which creates an orderly space. Table 7. Alignments of the Text on E-commerce Homepages E-mall E-store Total Number % Number % Left 14 28% 18 37% 32.5% Left & center 27 54% 21 43% 48.5% Center 1 2% 4 8% 5% Left & right 1 2% 2 4% 3% Mixed (left, right, and center) 7 14% 3 6% 10% No rule 0 0% 1 2% 1% Table 8 shows that about 75% of E-commerce homepages footers are using the center text alignment. Due to the left side bar space, homepages usually have center-aligned footers. Table 8. Alignments of the Footer on E-commerce Homepages E-mall E-store Total Number % Number % Left 12 27% 5 11% 19% Center 31 70% 35 80% 75% Right 0 0% 1 2% 1% Mixed 1 2% 3 7% 4.5% 4. Investigating Elements Suzanne Watzman [5] mentioned that visual design principles such as balance, harmony, and simplicity are universal principles of visual communication and organization, but the most important principle of design, she says, is that there are no rules, only guidelines. E-commerce design especially needs flexible approaches regarding business goals and consideration of the target audience. As the entrance to the site and the first impression to customers, the homepage must provide a suitable appearance based on business goals and its target audience.

6 Aaron Marcus [6] summarized this into three principles; organize, economize, and communicate. Utilizing these principles can benefit user interface design. And understanding design principles and E-commerce elements is essential to creating successful E-commerce homepages. 4.1 Site Identity Nielsen & Tahir [1] note that communicating the site purpose is very important. The general purpose of E- commerce is buying and selling. Providing information about where customers are, what the company does, and what users can do on that site is essential. Table 6 shows that almost every E-commerce homepage provides a site identity and two third of homepages have some sort of tagline. For site identity, the company name, logo, or sometimes both, and web address (URL) are used. The site identity is generally located in the top two units of the homepage (see Figure 1). The size of the site identity is limited due to the screen size and screen resolution. If the site identity is too big, the homepage will need a scroll bar to provide space for navigation and content. Most Websites repeat the site identity on each web page. It tells users that they are still on the same site. The site identity should have a unique appearance to identify its characteristics of E-commerce. A site identity that repeatedly shows up on each web page can be also used to build brand identity. Building a good brand image with a positive identity is the best way to enhance E-commerce. 4.2 Navigation Navigation that links one page to another page is one of the best advantages of the web. The three principles for successful navigation are quite obvious; navigation should be easy to use, easy to understand, and easy to learn. In addition to this, good navigation should provide information about where customers are, where they can go, and how can they go back. But providing good navigation is not that simple. Table 4 shows that text is the most widely used element for main navigation. The advantage of HTML text is that it is easy to update information and easy to interpret, as long as the customer understands what they have read. The disadvantage of HTML text is that it is difficult to create visual hierarchy and visually is not very interesting. A tab is sometimes used for utilities such as home, about us, help, etc. and is located at the top of the homepage. When a tab is used for utilities and text is used for main navigation, it causes an information hierarchy problem. Facilitating the user s goal and promoting the site s purpose are important in navigation. Information hierarchy should be considered with regard to the user s goal and the site s purpose. Figure 2-1 Main Navigation on E-mall Figure 2-2 Main Navigation on E-store

7 The data shows in figure 2-1 and 2-2 that navigational elements of E-mall homepages are generally located in the left and center of the homepage. While the navigational elements of E-store homepages are generally located in the left corner and sometimes just below the site identity. Figure 2-1 shows that E-mall homepages include navigational elements in the content area. This demonstrates that the content itself can be navigation in an E-mall homepage. In fact, this is a unique feature of the E-mall homepage. 4.3 Advertising and Content However, for E-malls location analysis data shows that E-store homepages have advertising spread throughout the page (Figure 3-1, 3-2). The data also shows that the left side is used more often for advertising than the right side. Compared to E-malls, E-stores do not have as much advertising and their advertising is generally located in the right or bottom of the page. Nielsen [7] claimed that users ignore web banner ads and recommended that other elements should not look like banners. However, banners can be used to advertise or highlighting products sold by that store. Figure 3-1 Advertising on E-mall Figure 3-2 Advertising on E-store It is recommended that the content of a website be useful and meaningful. According to Nielsen [8], users do not read the text but rather they scan it. He suggested that the body copy of a web page be structured hierarchically. Headlines, sub-headlines, and bulleted lists should be made meaningful and should highlight important information to visually improve scannability on screen. Spool et al [9] also noted the same findings and suggested the same techniques that Nielsen recommended. 4.4 Negative Space Negative space in traditional printed graphic design is very important in giving the viewer s eye a place to rest. Muller and Lockerd s research [10] showed the same phenomenon on screen: White space is necessary to provide a place where the mouse can rest. According to Spool et al [9], web pages that used more white space were less successful in helping user s find information than web pages that used less white space. They compared the amount of white space versus text density, but this is not the best way to measure the effectiveness of negative space on Websites. In terms of design principles, it is the balance between positive and negative space rather than the quantity of negative space that is most important. If the window resolution that is set by the users is the same as the window resolution specified when the web site was created, negative space on the left and right may not be visible. Homepages can have a scrollbar to extend the content area, but the window monitor size remains same. Therefore, negative space on a homepage cannot be applied in the same manner as it is in traditional printed graphic design.

8 4.5 Typography and Layout As mentioned earlier in Elements of E-commerce, the layout can be changed by HTML coding and depends on the user s window setting. Typeface, color, and size can also be changed by the user s monitor settings when the text is created using HTML. The alignment of elements on a homepage is one of most critical aspects of homepage layout. Many web designers and developers don t seem to pay attention to text alignment. Unlike layout in traditional printed graphic design, space on a web page is divided by tables to incorporate images and text. If sequences of text are created in different cells, all the text must be aligned as the same manner in HTML. When homepages have more than one alignment it creates unusual negative space and causes visual chaos. This research found that a mixed layout style causes visual chaos because the negative space is disordered. Mixed text alignments also cause unorganized space and create visual chaos. Because people scan the text on the screen, providing a natural flow for the reading and scanning of information is an important factor in website usability. To organized elements, graphic design uses grid systems. Watzman [6] mentioned that a grid is a good way to improve usability. Grids also give a consistent look and feel to the page. Due to the limitations of the monitor size and the linkable characteristics of the web, creating suitable layouts seems difficult. The implied line created by the left side of a text block creates a clean looking edge. When these invisible grid lines are well aligned, the visual chaos is reduced on homepages. 5. Conclusion The E-commerce homepage as the entrance to a Website should be attractive to customers, provide a clear purpose for the site, and provide easy navigation. Authors have also mentioned design problems that create visual chaos in homepage layouts. This research found that visual chaos was a usability hindrance and obviously affected the aesthetic quality of E-commerce homepages. Many Web designers do not seem to pay attention to text alignment and layout, nor do they understand the spatial relationships between text to text and grid columns. To optimize E-commerce homepage designs, this research suggests a grid system, especially a fixed grid system, for aligning text and images in the layout. Designing the text as a block, not as individual lines will help customers to scan information easily and find contents at a glance. To achieve this, the designer must have a detailed screen layout plan. This research did not focus on color. However, color is another consideration for designers when creating successful homepages. This research also found that E-malls and E-stores have different elements and layouts even though the main purpose of these sites is selling products. Defining and understanding the site's purpose before designing Website will be important in creating a suitable layout for E-commerce sites. A well-organized layout will create an inviting atmosphere for the E-commerce homepage. Clear navigation and information hierarchy will increase the accessibility to web pages. Easy navigation, well-organized and useful content, and a unique site identity will create a positive branding effect. References 1. Nielsen, J. and Tahir, M., Homepage Usability, New Riders, Indianapolis, Preface, (2001). 2. Mahlke, Sascha, Factors Influencing the Experience of Website Usage, CHI 2002, April 20 25, Minneapolis, Minnesota, (2002).

9 3. Van Duyne, D,K, Landay, J. A., Hong, J. I., The Design of Sites, Addison Wesley, Boston, 229 (2003). 4. Krug, Steve, Don't Make Me Think, New Riders, Indianapolis, 65 (2000). 5. Watzman, Suzanne, Visual Design Principles for Usable Interfaces, Janco, J. A. & Sears A.(Eds.), In The Human-Computer Interaction Handbook, New Jersey, (2003). 6. Aaron Marcus, Principles of Elements Visual Communication for Graphical User Interface Design, In Reading in Human-Computer Interface, 2 nd Ed., San Francisco, (1995). 7. Nielson, Jacob, The Top Ten New Mistakes of Web Design, Useit.com, (1997). 8. Nielson, Jacob, Designing Web Usability, New Riders, Indianapolis, (2000). 9. Spool, M., Scanlon T., Snyder C., Schroeder W., and DeAngelo T., Web site Usability: A Designer s Guide, Morgan Kaufmann, San Francisco, (1999). 10. Mueller, F, and Lockerd A, Cheese: Mouse Movement Activities on Websites, a Tool for User Modeling, In Extended Abstract CHI 2001, ACM, New York, (2001).