Keywords

1 Introduction

It is worth investigation on female-focused shopping websites providing favorable shopping environments as the number of female online shoppers is currently multiplied. The goodness of the interface design would affect the shopping fluency and usefulness of consumers. This study intends to investigate how to have female consumers easily complete the shopping procedure and reduce the shopping obstruction as well as to offer female users with more pleasant shopping experiences. It aims to understand female users’ preference for the navigation interface of shopping websites.

2 Literature Review

2.1 Definition of Female Shopping Websites

According to Insight Xplorer ARO [1], which observed the Internet user behaviors during October 2010 to September 2011, the female group appeared much higher “monthly average time (minute) of use” and “the number of web pages browsed with a single domain” than the male group did. Website businesses also promoted services to female Internet users and established exclusive female access websites. As the example of Yahoo.tw, the female-related product classification contains cosmetics, body care, women’s dress, brand handbag, and fashionable masterpiece, while skin care, fashion & beauty make-up, fashion clothes, shoes, handbag & accessories, home & lifestyle, and expert exclusive are covered in Payeasy.com. Accordingly, the major products for female shoppers could be preliminarily classified into (1) cosmetics & skin care, (2) fashion clothes, (3) brand & masterpiece, (4) body care & shaping, and (5) home & lifestyle. Female shopping websites present apparently different characteristics from general shopping websites, as (1) the classification is more complex and fine, and the number of brands is enormous, (2) the product pattern and style are diversified that the same style could hardly be displayed on the home page, and (3) the product pictures are often matched with text explanations (e.g. a fridge picture obviously shows the product being fridges; but, the picture of a pump bottle might refer to lotion, shampoo, and body lotion). A shopping website presents rich product information for consumers’ comparisons; however, the complex shopping procedure and the uneasy operation are the drawbacks [4]. Especially, the operation of female shopping websites is time-consuming because more trivial items are displayed.

2.2 Website Compositions

Newman and Landay [13] proposed three dimensions for website design. (1) Navigation design aims to plan the complete and correct website architecture for the users conveniently and rapidly finding the required information. (2) Information design aims to rich the website contents and be able to clearly communicate. (3) Visual design creates the uniqueness of the website style and makes the entire visual attraction by applying the basic visual elements of text, image, color, layout, and mark as well as assists in communicating the website information with the visual presentation. The usefulness of information design and the convenience of navigation design are the key factors in the complete information architecture of a website, aiming to make the architecture more definite. What is more, user interface design closely integrates information design, navigation design, and visual design, among which navigation design reveals the most importance on the interface planning.

A browser, in the browsing process, would appear visual point, visual movement, and perception order of focus because of the motivation, visual element, and layout. Visual communication design, through “design”, communicates the concept of abstract, emotion, idea, or specific object with graphs [11] that it not only shows the decorating and beautifying functions but also accurately achieves the visual communication by transferring all planar factors [7].

2.3 Visual Design Elements for Websites

The factors in the visual design of websites are concluded as following. (1) Text – Current text presentation on World Wide Web is divided into pure text and graphic text. Texts are broadly applied to explain various information contents or match with images. (2) Color – The placement of color, as the key visual communication element in various design creations, allows the information receivers clearly understanding the visual emotion intentionally created by the designer. (3) Static image, the graphic expression on a website – It can be applied to the browsing interface design, explanation of information content, and demonstration of product figure. (4) Dynamic effect – The webpage interface and the image presentation contain multimedia effects of static, dynamic, background music, sound effect, and film. (5) Space layout – The visual elements of websites, including text, image, and animation, are properly organized and arranged for better visual aesthetics of the webpage in order to enhance the users’ comprehension of the website contents and promote the preference [15].

Visual interface design of websites could be divided into “visual” and “usability”. The former contains the design criteria of text-image relationship, color match, attention appealing, and picture balance, while the latter covers the design criteria of navigation system, architecture connection, and operation convenience [3].

2.4 Space Layout and Eye Movement

Nielsen indicated that the screen reading habit of a user was “not reading” the webpage, as users used to scan, jump, and partially absorb the webpage information; averagely, merely 20 % texts on a webpage were read. Nielsen further studied user habit of visual movement in 2010 and found that the users used to rapidly scan from the left top to the right, slowly move the sight downwards, scan from the left to the right again, and then straightly scan downwards from the left top. The research result revealed the F-form scanning movement [18]. In terms of the psychological structure for eye movement, human eyes are bilaterally symmetric, and the left-right movement of eyeballs is the simple muscle exercise, while more complicated muscles are used for the up-down movement [16]. Several studies indicated that horizontal layout was more comfortable to read [17] and presented more attraction and readability than vertical layout. Product navigation on a shopping website often requires two to three layers of pull-down menu that the second layer of a horizontal navigation menu is browsed vertically, and the second layer of a vertical navigation menu is often browsed horizontally (Fig. 1).

Fig. 1.
figure 1

F-form scanning movement [18]

Full size image

Based on above literatures, horizontal eye movement is comparatively comfortable. The product navigation on a shopping website often requires two to three layers of pull-down menu that the second layer of a horizontal menu is browsed vertically, while it of a vertical menu is browsed horizontally. For shopping websites requiring pull-down menus, the effects of female users’ preference need to be understood in depth (Figs. 2 and 3).

Fig. 2.
figure 2

Horizontal pull-down menu visual movement

Full size image
Fig. 3.
figure 3

Vertical pull-down menu visual movement.

Full size image

3 Methodology

First, current situations of female shopping websites, design criteria for shopping websites, visual design elements for websites, space layout and eye movement, and navigation visual movement are investigated through literatures. Female participants are then invited to the experiment and questionnaire survey, and the data and questionnaire statistics are further organized. A website navigation design suitable for female consumers is then proposed based on the analyses. Finally, conclusion and successive research are proposed.

3.1 Research Equipment and Participants

According to Insight Xplorer ARO, which observed female Internet user behaviors in September 2013, most female Internet users are aged 20–29 (27.36%) and 30–39 (27.69%). Total 15 female users aged 25–35 with online shopping experiences are invited for this study.

An ASUS ML238 liquid crystal display with the resolution 1920 × 1080 and the browser Firefox 11.0 is utilized as the research equipment for the normal browse.

3.2 Experiment Measurement

The navigation interface of the Payeasy home page is modified into four styles of (1) text horizontal navigation, (2) text vertical navigation, (3) graphic horizontal navigation, and (4) graphic vertical navigation for the experiment. The text and graphic contents on the experimental websites are identical. Total 15 participants are requested to evaluate the convenience, efficiency, and satisfaction of the navigation styles with Likert 5-point scale.

4 Result and Analysis

From the data in Table 1, the test of homogeneity of the overall navigation is above 0.05, and there is significant variance among the four navigation interfaces (P < 0.05) after the ANOVA test. The post multiple comparison LSD analysis shows the remarkable variance of graphic vertical navigation, revealing that female participants favor to the navigation interface with images.

Table 1. Subjective evaluation of navigation layout
Full size table

The experimental results (Fig. 4) show that female participants prefer graphic vertical navigation menus. Accordingly, vertical pull-down menus present higher subjective satisfaction than horizontal ones, and graphic navigation outperforms text one. As the webpage text appears the inertial reading from the left to the right, the reading time is increased when a horizontal pull-down menu changes to the visual reading direction to vertical. As the final vision of the navigation design for shopping websites would stop on the second layer (sub-layer), rather than the first layer, the results in this study are different from the research on the effects of shopping website interface design on the usefulness of users (Tang, 2007). The reason might be the navigation in the research not showing the pull-down function. Apparently, user preference for single layer navigation menus would change with navigation styles.

Fig. 4.
figure 4

Mean of subjective preference for navigation

Full size image

5 Conclusion and Suggestion

The navigation function is experimented in this study. From the results, female participants prefer to graphic vertical navigation. In this case, vertical pull-down navigation menus present better subjective satisfaction than horizontal ones, and graphic navigation outperforms a pure text one. Such results could provide designers and website developers with reference for developing interactive websites and product design for female users. The effects of other visual elements, such as text and dynamic images, on female preference will be further discussed. This study is the first stage of the entire research, and a prototype of the webpage interface design will be continued at the second stage. Moreover, female users will be invited again for verifying the experimental results in order to propose more suitable suggestions for the webpage interface design for female users.