Volume 20 Issue 1 - October 7, 2011 PDF
Effects of color sample display and color sample grouping on screen layout usability for customized product color selection
Fong-Gong Wu*, Cheih-Ying Chen, Ying-Jye Lee, Rain Chen
*Department of Industrial Design, National Cheng-Kung University
Font Enlarge
Internet-based mass customization has become an important consumer experience activity in many industries. Today’s consumer prefers to choose products from a wide variety of styles that combine different colors and forms. In the automobile industry, DaimlerChrysler Mercedes-Benz’s ‘‘Smart” car is a well-known example of mass customization in color choice. In the mobile phone industry, there are many choices of color for covers (e.g., Sony Ericsson, www. styleupcover.com: Design Your Own Gadgets). In the sports shoe industry, consumers can select colors, fit and materials (e.g., Nike, www.nikeid.com).

Modularity in color choice has become a common strategy in the struggle to meet individual consumer preferences at low cost and low risk. Customized color products certainly have many color options on screen layout. The range of colors –and hence of combinations – can be extremely complicated and large, which needs to be grouped for search and selection ease. This study aims to investigate this issue. Because overpopulated layouts confuse consumers, screen layouts should be structured in an organized manner to improve visual search and usability (van Schaik & Ling, 2001) and decrease the mental workload (Wastlund, Norlander, & Archer, 2008).

Screen layout can take advantage of the visual system’s craving for order by grouping related items together and separating groups with empty space, which assists visual flow by guiding the eyes of the user from group to group (Tidwell 2005). In e-commerce, the three most common types of groupings for product color sample displays are associative color number, color series and product section. Associative color number groups color samples by the number of colors on each display of the product. Color series group color samples by the color in a certain location on each display of the product. Product section groups color samples by the component of product that they will influence.

Fig. Three product sections used in this study.
This research employed tricolor mobile phone as sample. An idealized mobile phone was divided into three components: top cover, base and camera face plate. A 180-subject nested design experiment tested each of the three levels of color sample grouping (associative color number, color series, and product section) against each of the two levels of color sample display (color chip, product thumbnail) for efficiency and effectiveness (search time and error rate). A separate 30-subject experiment evaluated user preference.

In conclusion, this study primarily uses mobile phone color combination to investigate the users’ operational performance and preference in terms of screen layout design of customized product color selection. The results of the experiment can be applied to similar products, and summarized into the following suggestions:
  1. Efficiency. Grouping by product section reduced numbers of color combinations. Grouping of color sample chips or product thumbnails by product section yielded shorter search times and lower error rates than grouping of color sample chips or product thumbnails by associative color number or color series.
  2. Preference. Viewing and comparing all options was more important to users than clearly identifying all parts of the product, and it was best facilitated by grouping of product thumbnails by associative color number or color series. Clear identification of product parts was best facilitated by grouping color chips or product thumbnails by product section.

Table: factors and levels of the customized product color selection interfaces
A: color sample groupingA1: associative color numberA2: color seriesA3: product section
B: color sample displayB1: color chipB2: product thumbnail 
< Previous
Next >
Copyright National Cheng Kung University