DOMINANT PATTERN OF VISUAL DESIGN IN ONLINE

CLOTHING WEBSITES

M. L. Anitawati, M. N. Nor Laila

Faculty of Information Technology and Quantitative Sciences, University Teknologi MARA, 40450 Shah Alam, Malaysia

M. Nagamachi

Kyushu University, Fukuoka 815-8540, Japan

Keywords: Emotional usability, Kansei Engineering, online clothing, visual design, visual technology.

Abstract: Visual web design covers website content and layout. In the context of content, the use of trendy

technologies is suggested as a method to deliver a better look and feel of clothing products in the online

environment. However, it has been recognized by the study and in the literature that the use of these

technologies is less popular and there seems to be a paradigm shift towards instilling positive consumer

experience in online shopping via emotional usability engineering. This shift is seen in previous studies that

linked consumer’s decision making with emotion. Correspondingly, the research investigates the detail

design elements and presents the result in the form of dominant pattern of visual design in online clothing

websites. 163 online clothing websites were selected based on their visible differences in both content and

layout context. Analysis was conducted based on predefined rules and controls. A descriptive model of the

dimension of a visual web design is derived and a model of visual technology on online clothing website is

presented. This study of detail website design elements is the know-how technique in investigating

associations with consumer’s emotional responses, towards incorporating emotional appeal into web design,

as an alternative for online shopping experience.

1 INTRODUCTION

The web has enabled the global distribution of

products and services through powerful access and

manipulation. In the practice of web design, a

considerable effort is focused on the visual design of

a web page. Designers have generally agreed that

well-designed user interfaces can improve the

performance and appeal of the web which can

eventually convert browsers to customers (Marcus

and Gould, 2001).

Correspondingly, qualities of usefulness, usability

and desirability play a central role in the good design

of all digital products and digital environments such

as websites (Buchanan 2000). In the literature of e-

Commerce website development, qualities of

usability and usefulness have received the main

attention of researchers which were mainly based on

the work pioneered by Nielsen and his associates

since mid 1990s. Since then, web designers compete

to provide higher functionality and features to

simulate the physical shopping environment.

However, with the growth of e-Commerce, there

is a growing concern to improve the consumer

interface of e-Commerce to improve the persuasive

power of e-Commerce websites (Li, 2005; Kim,

2003) by engineering the affective appeal in the

website design (Anitawati and Nor Laila, 2006). The

element of affect has been shown to have an

important decisive role in the product selection. For

example, in the physical world, retailing businesses

concentrate on store design and layout to portray

positive experience to attract consumers. It is

unlikely for a potential consumer to go into a dark

and messy store, to look for a product no matter how

good the quality of the product offered. Similarly for

e-Commerce, businesses should stress on how to

deliver the best experience at first glance to potential

consumer by providing a desirable digital shopping

environment.

386

L. Anitawati M., N. Nor Laila M. and Nagamachi M. (2007).

DOMINANT PATTERN OF VISUAL DESIGN IN ONLINE CLOTHING WEBSITES.

In Proceedings of the Third International Conference on Web Information Systems and Technologies - Web Interfaces and Applications, pages 386-390

DOI: 10.5220/0001270403860390

 SciTePress

Evidently, the need for emotional association

design has been gradually recognized (Li et al., 2005;

Lavie and Tractinsky, 2004; Desmet, 2003; Norman,

2002). In determining the users’ experience and

affective appeal, emotional usability has been

introduced as a quality measure in addition to the

traditional functional usability measure. In e-

Commerce, the problem of how to deliver positive

experience to potential consumer through the

website design needs to be address. This may lead to

the issue of evoking the consumer’s feelings and

impressions and the necessary quantifying method.

The research has identified Kansei Engineering

as a suitable technique to be considered in

integrating subjective and unconscious consumer

values in the e-Commerce website design elements.

The concept of Kansei Engineering and its

implementation in e-Commerce website is seen to

enable the measurement of human feeling and

judgment in response to website design (Anitawati

and Nor Laila, 2006). The method involves the

process of identifying detail design elements,

measurement of consumer’s emotional response, and

analysis to find relationship between the design

elements and consumer’s emotional response.

In this paper, we present our research findings on

detail design elements, in the form of dominant

patterns of visual design in online clothing stores as

a pre-requisite in discovering consumer’s emotional

response towards visual design of website in order to

incorporate the emotional appeal in a web design to

enhance user’s online shopping experience.

1.1 Web Design, Visual Technology

and Consumer Experience

In designing a website, we can find many rules,

principles, guidelines and methods specified by

different parties. These are derived from the

experience of what really works when real users try

to perform real task on the web (Garrett, 2003;

Nielsen, 2000). Usability guidelines are also widely

introduced as rules to ensure website works well

(Nielsen, 2000; Krug, 2000).

In the context of online clothing, product

visualization techniques or technologies play a

major role to deliver better sense of look and feel of

clothing to the potential customers (Rita and

Anitawati, 2006; Siegrist, 2003; Lee et al. , 2003).

Today, more trendy and cutting-edge technologies

are introduced in an effort to provide better shopping

experience to consumers.

There are many different kind of visual

technologies found in the literature of online

clothing and on the actual website. Table 1

summarizes each of the identified technologies.

Table 1: Description of visual technologies on online

clothing.

Technology Brief Description

Virtual Try On

(VTO)

Dressed bodies animated in real time on the

online clothing site

Virtual Fitting

Room / VTO Show

Room

Fitting /dressing room simulated on the online

clothing site.

3D Rotation

360 degree or a complete rotation viewing of

a product on the online clothing site.

2D Picture 2D pictures of products.

Virtual Mannequin Virtual mannequin with selectable proportion.

Avatar / Virtual

bodies / Human

Body Modeling

Virtual body model adjusted to consumer’s

roportion.

Virtual Mirror

Simulation of a mirror virtually on the online

clothing site.

Zoom Zoom technology on the online clothing site.

Pan

Pan / drag technology on the online clothing

site.

Mix & Match

Blouse, skirt, color, texture combination on

the online shopping site.

Video Clips

Video clips of clothing, runway on the online

clothing site.

Virtual Runway Virtual runway on the online clothing site.

Virtual Shop Floor

/ 3D Virtual Store

Layout of the virtual store seen from above,

“walk” down the store aisles, “pick up”

roducts from the virtual store shelves, rotate

ackages and magnify their labels for

additional information, and “drop” products

into a simulated shopping basket.

3D/VR Cloth

Simulation

Simulating garments behavior on virtually

animated bodies on the online clothing site.

Online Fitting

Enables clothing fitting / resizing according to

body proportion, on the online clothing site.

3D Superimpose

A technology that allows customer to upload

their picture, and selected clothing will be

superimposed on the picture.

Current rules and guidelines in web design have

mainly address functional usability and ignore the

aspect of enhancing user experience. We will find

that questions such as, does providing web pages

that look gorgeous can enhance positive experience

without considering delays in download time, or

does including detail text description will attract

visitors, remain unanswered.

2 METHODOLOGY

2.1 Research Framework

The context of web design includes the content,

layout, technologies, delivery, and objective (Figure

1). This research focus on the visual design contexts:

content and layout. While content deals with

DOMINANT PATTERN OF VISUAL DESIGN IN ONLINE CLOTHING WEBSITES

387

everything you see on the surface of a web page,

such as text, images, illustrations, and other

elements on a web page, layout is the placement of

text, images, buttons, and other elements on a web

page.

The study was done focusing on visual design in

online clothing websites. Online clothing was

selected due to its sky rocketing interest among

clothing consumers (Smith, 2006; Rodriguez, 2004),

and the visual design of online clothing is

considerably diversified.

Figure 1: Context of web design.

2.2 Data Collection

163 existing e-Clothing websites were selected

based on their visible differences in both content and

layout context. They were then analyzed following

predefined rules on colors, design elements, layouts,

page orientations, and typography. A set of control

was also followed during the data collection.

3 RESULTS AND DISCUSSIONS

Data were then statistically analyzed according to

each central tendency. Elements are considered

dominant whenever it is higher than the central

tendency, in this case, the mean. Here we illustrate

our findings by showing the plot of the Pareto Chart

(Figure 2) of page background colors. Similarly, we

plot the Pareto Chart for each attribute of the web

page designs, and shown in table 2, 3, and 4 are the

summary of all results.

From the study, we classify the visual design of

web sites into four different dimensions. The

classification is done looking into the web site

content, typography, product visualization technique,

uniformity, color, layout and alignment. The

description and classification of dimensions is

presented in Table 5. A descriptive model of the

dimension of web design is presented in Figure 3. It

shows that typical, challenging and dominant

dimension can overlap, but recessive stands alone.

Our findings have also shown that most clothing

websites did not employ visual technologies

extensively. This invokes the issue of balancing the

factors of website appeal and performance. Although

the sophisticated visual technologies available can

enormously enhance the context of appeal in visual

design, performance factors may overrule the need

and thus leads to new paradigms in web design.

These findings motivate us to look at alternative

ways to provide positive online shopping experience.

Figure 2: Pareto chart of background color.

Table 2: Dominant pattern in product visualization

technique in online clothing web design.

Element Attribute/Value

Picture Size Mix, S (<¼ Width/height)

Product Display Filmstrip, Catalog

Visual Technique 2D picture, Flash

Product Try On YES

No. of people/mannequin in

1 representation

Visual Focus Mix, Half Top, Full Body

Body Representation Model

Picture Arrangement

Horizontal & Vertical,

Horizontal

Modeling Style Natural, Modeling

Table 3: Other dominant pattern in online clothing web

design.

Element Attribute/Value

Logo YES

Logo Location Top-Left

Marquee NO

Animation NO

Bg Music NO

Objective

Layout Delivery

Techno-

Content

Web

Desi

Percent

100

Pareto Chart of Page Bg C olor

Count 2211111 3

Percent 23

181585553332

2222 5

Cum % 23405563

68 73 77 81 84 87 89 90 92 94

95 100

3332

Count

WEBIST 2007 - International Conference on Web Information Systems and Technologies

388

Table 4: Dominant pattern in online clothing web design.

ELEMENT

ATTRIBUTE

Page Body Header Header Menu Main Top Menu Right Menu Left Menu Footer

Existence

/ A YES YES

/ A YES

O YES YES

/ A

Menu Style

/ A

/ A Text

/ A Text Text, Picture Text, U/Text Text, U/Text

Bg Color

White, Black,

LtGray,

LtBlue

White,

LtBlue,

Black

White,

LtBlue, Mix,

LtGray

White, LtBlue White, LtBlue,

LtGray, Mix,

Black, Gray

Lt Gray,

White

White, LtGray,

LtBlue, Black,

Pink

White, LtGray,

LtBlue, Black

Bg Picture

/ A

Bg Texture

/ A

Font Color

/ A

/ A Gray, White,

Black,

LtGray, Blue

Mix, White,

Black

White, Black,

LtGray, Gray,

Mix, DkBlue

Mix, White,

Black

Black, White, Lt

Gray, DkBlue,

Gray, Blue

White,

LtGray, Black,

Gray, Blue, DkBlue

Font Size

/ A Mix, S S Mix, S S S S S

Font Family

/ A

/ A Sans-Serif

Sans-Serif,

Mix

Sans-Serif Sans-Serif,

Cursive

Sans-Serif Sans-Serif

Font Style

/ A

ormal

Font Weight

/ A

/ A Bold Bold, Mix Bold

ormal, Bold

Menu Location

/ A

ot Specific

/ A Center, Left Top Top Center

Shape Sharp

specific

/ A Sharp

/ A

Text Alignment

/ A

/ A Left,

Centered, Mix

/ A

Page Style Table

/ A

Orientation H_F_C, HS

/ A

Dominant Item Product

/ A

Page Dominant

Color

White,Colorf

ul,Black,

LtBlue, Blue

/ A

Screen Size 2, 1 pages

/ A

Page Border

/ A

N/A: Not Applicable, Lt = Light, Dk = Dark, S = Small, U/Text = Underlined Text

Table 5: Dimension of web design.

Dimension Description

Recessive A web design that is somehow less influential /

significant.

Typical A web design that is common / average in

practice.

Dominant A web design that is influential / in control over

others.

Challenging A web design that is ambitious and unusual,

and make full use of technologies and

resources.

Figure 3: Descriptive model of dimension of web design.

The pattern of use of the visual technology is

presented as a model of visual technologies on

online clothing website and is illustrated in Figure 4.

Figure 4: Model of the use visual technology on online

clothing website.

Zoom

Pan

Virtual Mannequin

Mix & Match

Online Fitting

Virtual Try On

(VTO)

Avatar

3D Superimpose

Virtual Fitting

Room

Virtual Mirror

2D Picture

Details

Customization

Cloth behavior

Self

visualization

Virtual

environmen

3D/VR Cloth

3D Rotation

DOMINANT PATTERN OF VISUAL DESIGN IN ONLINE CLOTHING WEBSITES

389

4 CONCLUSION AND FUTURE

WORKS

In providing better shopping experience, the results

of this study do not indicate that the use of trendy

technologies offers a great solution. The research is

now looking at invoking consumer’s emotional

connectivity with website design. Previous studies

have suggested that the making of a product has

mainly based on designers intuition (Anitawati and

Nor Laila, 2006, Nagamachi, 2003, Norman, 2002).

This includes the design and production of website.

Previous researches have also suggested that

consumer makes decision based on their feelings or

emotion. Therefore, studying the consumers

emotional responses to websites can be seen to offer

a better online shopping experience (Anitawati and

Nor Laila, 2006). This is an important element in an

effort of consumer conversion and retention.

As all the details of the design elements have

been identified, the result will enable the research to

analyze associations with consumer’s emotional

values in web design. Result from these studies will

discover links between consumer’s emotional

responses with website design elements, and in the

end will enable the research to provide guideline in

associating emotional values with website design.

The guideline will help designers, researchers, e-

retailers and other stakeholders to understand which

design elements elicit what kind of emotional

responses to the website users. Thus enable them to

devise strategies to improve website affective

qualities, whereby positive affective qualities are

proven to influence visitor’s emotion and eventually

cognitive judgment. Ultimately, the guideline to the

design of affective e-Commerce website will

promote a paradigm shift from “What You See Is

What You Get” to “What You See Is What You

Desired”. The study is currently in progress.

ACKNOWLEDGEMENTS

The research is funded by the Ministry of Science,

Technology and Innovation, Malaysia, under the

ScienceFund grant scheme [Poejct Code: 01-01-01-

SF0029]. Special thanks to Professor Shigekazu

Ishihara of Hiroshima International University for

his valuable guidance and input.

REFERENCES

Anitawati, M. L., Nor Laila, M.N., 2006. Kansei

Engineering concept in e-Commerce Website.

International Conference on Kansei Engineering and

Intelligent Systems 2006 (KEIS '06). Aizu-Wakamatsu,

Japan, Aizu Univ.

Buchanan, T., 2000. Potential of the Internet for

personality research. IN (ED.), M. H. B. (Ed.)

Psychological experiments on the Internet. San Diego,

CA, Academic Press.

Desmet, P. M. A., 2003. A multilayered model of product

emotions. The Design Journal.

Garrett, J. J., 2003 The Elements of User Experience, New

York, New Riders.

Kim, J., Lee, J., Choe, D., 2003. Designing emotionally

evocative homepages: An empirical study of the

quantitative relations between design factors and

emotional dimensions. International Journal of

Human-Computer Studies, 59(6), 899-940.

Krug, S., 2000. Don't Make Me Think, New Riders.

Lavie, T., Tractinsky, N., 2004. Assessing dimensions of

perceived visual aesthetics of web sites. Int. J. Human-

Computer Studies, 60, 269–298.

Lee, H. H., Fiore, A. M., Kim, J., 2003. The Effect of

Telepresence from a Website with a 3-D "Try-On"

Model on Consumers' Attitudes Toward the Online

Retailer. ITAA Proceedings.

Li, N., Zhang, P., 2005. Towards e-Commerce websites

evaluation and use: An affective perspective. Paper

presented at the Post-ICIS'05 JAIS Theory

Development Workshop, Las Vegas, NV.

Marcus, A., Gould, E.W., 2001. Cultural Dimensions and

Global Web Design: What? So What? Now What?

White Paper. AM+A.

Nagamachi, M., 2003. The Story of Kansei Engineering

(in Japanese), Tokyo, Japanese Standards Association.

Nielsen, J., 2000. Designing Web Usability: The Practice

of Simplicity, New Riders Press.

Norman, D. A., 2002. Emotional Design: Attractive

Things Work Better. Interactions: New Visions of

Human-Computer Interaction, ix, 36-42.

Rita, Z. W. C., Anitawati, M. L., 2006. Effect of Product

Customization on Consumer's Shopping Enjoyment

Towards the Intention to Purchase Fabric Online.

International Conference on Business Information

Technology 2006 (BIZIT '06). Kuala Lumpur,

Malaysia, UPENA.

Rodriguez, G., 2004. Can You Sell Apparel on the Internet?

PowerHomeBiz.com.

Siegrist, J. L., 2003. An Analysis of the Business Practices

of Boo.com. Bournemouth University.

Smith, C., 2006. Building Your Brand Online: Why the

Web is Vital to Apparel Enterprises. Apparel

Magazine.

WEBIST 2007 - International Conference on Web Information Systems and Technologies

390