A digital tutor for learning fashion design

Ching-I Cheng & Damon Shing-Min Liu &

Charles Chia-Hsu Lin

Received: 10 October 2013 /Revised: 3 May 2014 /Accepted: 6 May 2014# Springer Science+Business Media New York 2014

Abstract Computer-aided instruction (CAI) is an interactive instructional technique thateffectively improves the students’ understandings. However, CAI tool is currently lack ofuse in teaching and learning fashion design. The present research hence proposes a toolfunctions as a digital tutor poviding an intuitive visual aid for learning principles. Theinterfaces are designed based on two viewpoints: fashion style and design elements. StyleCognition Space and Style Cluster View are designed for visualizing fashion style knowledge,while Comparison View of Design Elements Effects and Elementary Attribute Space aredesigned for visualizing knowledge of design elements. Several skills of graphic user interfaceand information visualization are used, such as Details on demand, Portals, and Zoom. Toobtain evaluations from users, three workshops of fashion design were held. Using question-naires, all participants were asked to answer several questions about ease of use, effectiveness,and satisfaction. Whether professional lecturers or inexperienced novices at fashion, all usersrate the system as highly satisfactory after use.

Keywords Fashion design knowledge . Expert system . Focus + context . Overview. Detail onDemand . OpenGL

1 Introduction

As indicated in [30] that a style is formed if a group of design works are clustered together, andfurther common characteristics, namely design elements, are used to recognize a specific style.Beginners begin learning fashion design by attending relevant lectures that explain trends offashion, style, and design elements using the works of masters in fashion. Famous fashion showphotos are always a helpful visual aid for communicating perceptions of fashion design styles.However, the number of photos in a specific fashion style is typically so large that is easy to

Multimed Tools ApplDOI 10.1007/s11042-014-2084-1

C.<I. Cheng : D. S.<M. Liu (*)National Chung Cheng University, No. 168, University Rd, Min-Hsiung, Chia-Yi, Taiwan 621e-mail: damon@cs.ccu.edu.tw

C.<I. Chenge-mail: chengcy@cs.ccu.edu.tw

C. C.<H. LinTainan Technology University, No. 529, Chung Cheng Rd, Yong-Kang District, Tainan, Taiwan 710e-mail: t30040@mail.tut.edu.tw

make the lecture confusing. Most learners derive knowledge based on their talent, and find itdifficult to gain insight about fashion design at the beginning since that fashion industry is oftenfilled with various types of knowledge. Fashion design elements are multidimensional andhighly complex. Only using photos to explain how design elements are combined to represent adesign style, identified by fashion experts and consumers, is often confusing for both lecturersand learners. A media for efficiently transferring various experiences and knowledge of fashiondesign is needed for training a novice to go from nonprofessional to an expert and to advancesuccessful communication of design concepts in a fashion organization.

A recognition space for apparel style based on cluster analysis [26] is thus proposed in [30].In the left side of Fig. 1 points present each individual example. Using fashion photos instead,fashion lecturers describe different groups of fashion style with the assistance of the fashionstyle recognition space (the right of Fig. 1). However, it is a static information presentation thatdoes not allow interactive selection. The space also becomes disordered and creates difficultiesfor lecturers to present descriptions of fashion style when the collection becomes large.Alternatively, to explain what design elements are good/bad when presenting a particularfashion style, a mathematical presentation, called the effect formula of fashion design ele-ments, is proposed in [31]. The formula uses a weighting coefficient to indicate the degree ofimportance for a specific design element. Equation 1 is an example, where Y_1 indicates aparticular predefined fashion style, and A_1, B_2, B_4, and C_1 indicate four elementarydesign attributes (element values). A positive effect number means the following designelement enhances the nature of the style; by contrast, a negative effect number means theelement reduces the nature of the style. If the effect number is zero, the nature of the stylewould not be affected by the design element.

Y 1 ¼ 0:513� A 1−2:755� B 2−0:922� B 4þ 1:566� C 1 ð1ÞAlthough an effect formula of fashion design elements is a good systematic representation

for showing the relationship between fashion style and design elements, it easily createsconfusion for most novices. Instructors may need other documents, such as a design elementslist and example photos, during lectures. Hence, students need a visual representation of effectformulas for efficiently learning.

This research uses computer technology to process vague knowledge concerning fashionstyle, and creates effective visualizations and intuitive user interactions. Specialized areas, suchas fashion knowledge extraction as well as computer graphics technologies, have all been

Fig. 1 Apparel Style Recognition Space [30]. The left 2-D coordinate illustrates clusters of 100 fashion styleexemplars, in which a point indicates an exemplar. The right image uses the original example photos instead ofpoints in the 2-days coordinate (because of the limitation of the layout, only a few representative photos areshown)

Multimed Tools Appl

taken into account. The main goal of the research is related to design and develop thevisualization technique. The following are significant contributions of this work:

& An intuitive visualization for presenting multidimensional and complex information aboutfashion styles and the effect of design elements.

& The interface implements the tasks of Overview, Zoom, Focus, Details on demand, andRelate.

& Digitalizes teaching materials to improve teaching quality of fashion design lectures.& Develops a novel application which extending visualization technology to Fashion Design.& Maintains image consistence of brand apparel design in a fashion industry.

This article describes the intuitive interaction framework for the fashion design knowledgevisualisation system. The remainder of the paper is organized as follows. Section 2 reviewssome relevant works. Section 3 gives an overall description of the proposed framework.Section 4 briefly describes the implementation. Section 5 presents the experiments andevaluations. Finally, Section 6 draws a conclusion and suggests future works.

2 Related work

2.1 Information visualization

Visualization links the human eye and computer, helping to identify patterns and to extractinsights from large amount of information. Stuart K. Card, one of the most famous researchersin user interface design, proposed that information/knowledge visualization is developed forstrengthening the understanding and cognition using visual computing [7]. There are threeresearch dimensions supporting the development of an information visualization system: (1)information representation, (2) user-interface interaction, and (3) information analysis. A greatinformation representation is always based on a solid analysis. Information analysis aims toreduce the complexity and to extract salient structure. Indexing and analysis are two stages ofinformation analysis, aiming to extract the semantics of information from textual documents.User-interface interaction is to provide immediate interaction, allowing direct manipulation ofthe visual objects and also allowing users to select what to be displayed [7]. In order to achievethe goal of our research, the three research dimensions, Information analysis, Informationrepresentation, and User interface interaction, are exploited for developing the novel fashiondesign knowledge visualization system with an intuitive interaction interface. Moreover, manyresearchers also concluded that the process of visualization is to map abstract concepts to aspatial domain [37, 39, 40]. Several visual features, including hue, luminance, size, transpar-ency, depth, texture, glyphs, particles and blur, are usually used by common visualizationtechniques to highlight differences, to make comparisons, to show temporal effects, and so on[23, 51, 54]. Based on these viewpoints, this research exploited position and colors to identifydifferent clusters of fashion design styles in the global 3D spatial domain.

Further, Schneiderman proposed seven types of representation methods, which wereone-dimensional, two-dimensional, three-dimensional, multidimensional, tree, network,and temporal approaches in 1996 [44]. A visualization system usually applies severalmethods at the same time. One-dimensional representation is to represent informationas one-dimensional visual objects in a linear or a circular manner, to display contentsof a single document, and to provide an overview a document collection [16, 18, 41].Two-dimensional representation is to represent information as two-dimensional visual

Multimed Tools Appl

objects, such as Self-organizing map (SOM), dealing with the large number ofcategories created for the mass textual data [24]. Three-dimensional representation isto represent information as three-dimensional visual objects, such as WebBook system,folding web pages into three-dimensional books [8]. Some applications of multidi-mensional visualization exploit algorithms of simplification, such as multidimensionalscaling, hierarchical clustering, k-means algorithm, and principle components analysis,for reducing the amount of dimensions to project to a three-dimensional or two-dimensional space (SPIRE system [53]; VxInsight system [6]). Since representinginformation in 3D highly meets the need of human perception, this research imple-ments a 3D convex hull to represent the overall cognition space of fashion style (thedetail is described in Section 4.2.1). For providing a focus of a particular group offashion style, a one-dimensional cluster view is developed (the detail is described inSection 4.2.2).

Parallel Coordinates (abbr. ||-coords) is a common way of visualizing and analyzingmultivariate data. It was introduced by A. Inselberg in 1985 [20]. He claims that ||-coordsyield graphical representations of multi-dimensional relations rather than just finite point sets[21]. A ||-coords consists of n vertical/horizontal and equally spaced parallel lines which isused to represent n-dimensional variables space. A single point or record in a data set becomesa polyline, which is formed by connecting vertices on the parallel axes in ||-coords. It is usuallyused to clearly represent the correlations (positive/negative/zero) between variables. Fig. 2a,Fig. 2b, and Fig. 2c are the representation of positive, negative, and zero correlations,respectively. In addition to visualizing numerical data, ||-coords can also deal with nominaldata. Each axis can have its own scale and data range. This makes ||-coords plot intoa powerful tool with which to visualize multidimensional data [47]. As described inprevious section, a visual representation is needed indeed for efficiently learning whatdesign elements are good/bad to present a particular existing fashion style. Somedesign elements which majorly affect the perception of Urban Punk but not affectEthical Yuppie at all. The feature of ||-coords, multiple parallel axes, is thus good formaking comparison of effects amongst multiple design elements for several fashionexemplars. However, the correlations between design elements in the research areambiguous. Hence, only the shell of ||-coords is exploited for displaying the effect ofdesign elements for fashion styles, namely ||-coords-like information plot. The detailsof our design are described in Section 4.3.

Fig. 2 a, b, and c are the representation of positive, negative, and zero correlations between variables X and Y,respectively [47]

Multimed Tools Appl

2.2 User interface interactions

Interaction is an important component for visualization techniques. According to severalfamous researches of user interactions interface [7] [54], user interface interactions are toprovide immediate interaction, allowing direct manipulation of the visual objects displayed,and also allowing users to select what to be displayed. There are many interface schemes thatallow users to browse through, and switch between, focused and contextual view of a dataset.In visualizations of large amount of information, it is often necessary for a user to change scale,zooming in to get detailed information, and zooming out to get an overview before inspectingsome other detail. Shneiderman summarizes six types of interface functionality, Overview,Zoom, Filtering, Details on demand, Relate, and History, for providing users not only directmanipulation of the visual objects displayed but also selection of what to be displayed. Firstlyoverview provides overall patterns to users; then details about the part of interest to the usercan be displayed; users could change the region of focus dynamically using the function ofZoom [44]. In addition, Karlson and Bederson reviewed and categorized these schemesaccording to the interface mechanisms used to separate and blend views, and summarizedfour interface approaches that allow users to attain both focused and contextual views of theirinformation spaces [22]. An overview + detail interface design is characterized by thesimultaneous display of both an overview and a detailed view of an information space, eachin a distinct presentation space; a zooming interface design supports both focused andcontextual views, involving a temporal separation between views; a focus + context interfacedesign integrates focus and context into a single display where all parts are concurrentlyvisible; and cue-based techniques which selectively highlight or suppress items within theinformation space.

Further, according to the work proposed by Plumlee and Ware in [36], providing extrawindow and using a fisheye technique are two common methods for supporting multi-scalevisual comparison tasks. When using extra window, one window is used to provide anoverview map and one or more other windows show magnified regions of detail [3, 34, 36];when using fisheye technique, both the focus region and the surrounding regions are availablein the same display [10, 27, 36, 42]. Additionally, Plumlee and Ware developed principleddesign heuristics: if visual comparisons must be made involving patterns of a great complexity,adding extra views may be warranted, that tell us what kind of interface is likely to be mosteffective for a given visual comparison task.

Besides this, according to the work proposed in [54], there has been an upsurge in thenumber of tools in recent years that not only visualize mathematical entities, but also allowusers to interact with these visualizations. Most of these tools are not for productivity purposes;rather they are intended for performing epistemic activities. Access-based, annotation-based,construction-based, and combination-based are four landmark categories of macro interactionframework proposed in [54] [43]. KaleidoTile [52], for example, is an access-based tool,allows users to explore tessellations of different planes (i.e., spherical, Euclidian, and hyper-bolic). Users can re-picture the tiles of a tessellation to create beautiful visualizations usingdifferent patterns, and directly interact with an existing visualization by rotating it in acontinuous manner, or indirectly interact with it through a control point to animate (or morph)a tessellation to explore how symmetry groups are related. Tess [50], is a construction-basedvisualization tool, provides users with a few basic geometric shapes and a palette of colorswhich they can use to compose a drawing. It allows users to virtually construct an infinitenumber of visualization.

Since the goal of our research is to provide an intuitive interactions for users to get theinsight of fashion design, including overall difference between design styles and various

Multimed Tools Appl

composition of design elements, by manipulating visual objects in the proposed fashion designknowledge visualization system. The role of interaction is to support users to performepistemic activities, such as sense-making, meaning-making, learning, and decision-making,using visualizations. The aim is to allow users to access the stored, available, existent fashionsamples which are already contained in the tools. Thus, an access-based interactive fashionvisualization tool is designed according to the categorization of macro-based interactionframework proposed in Sedig and Liang’s work. In our tool users do not add any newvisualization to the tool through interaction with it; rather, they retrieve, access, browse, andinterpret the existing fashion visualization [43]. Moreover, visual comparisons between select-ed items and selected fashion works are also required. Hence, a scheme of multiple windowinterfaces is designed for achieving effectively visual comparison in lectures, allowing users toview information at different scales as well.

2.3 Computer applications in fashion industries

Nowadays, computer technologies have rapidly grown, which can be powerful tools to assisthuman life in many different fields, such as automation, education, virtual simulations, onlineshopping, computer-aided design tools, and so on. In the field of fashion design, manycomputer applications have been established in the recent two decades. Pattern maker [11,33], is one application, provides an interface for designers to create a garment pattern;meanwhile 3D visualization of a garment is shown. In most developed software tools, theuser draws a 2D pattern of the garment parts and the system triangulates these patterns andconverts them into physically-based models [33]. Furthermore, some provides a 3D platformin which users can draw a garment outline directly on a virtual human. Subsequently patternsof the garment are generated automatically [11]. Digital Fashion Show is established by DigitalFashion Ltd. The technology of Dressing Sim makes it possible to reveal the silhouettes andmovements of a dress without actually wearing it. Additionally, by choosing the human modelthat will wear this dress and then by setting its movements, that human figure can start movingand modeling the dress on computer screen. Garments can be changed one after another,creating a veritable fashion show on personal computer. E-tailor is an innovative paradigm forcustomization. 3D scanner, CAD and virtual try-on technologies are integrated for onlineretailing service of customized clothing [14]. The project proposed in [12] is such anapplication of visual-based knowledge extraction and representation which functionsas an apparel style consultant to provide supports for assigning an impression adjec-tive to a garment. The example-based category learning is the key component to makethe system possessed of cognitive capability for apparel styles. The Emotional Ward-robe is emerging through the integration of electronic technology and smart materialson the body. It is a model that is able to offer a more personal vision of visualidentity that utilizes a dialogue between the body and the garment to create theemotional aesthetics of the wearer [49].

Although most developed application tools simplify miscellaneous manual operations infashion design, the important issue concerning with transmission of intensive experience andknowledge in fashion design have not been taken into consideration. Most computer applica-tions developed for fashion design industries deal with the convenience of design platform andvirtual clothing, they rarely discuss the issue of visual representations of fashion knowledgeusing intuitive human-computer interactions. Computer technology is a powerful tool forknowledge and information collecting, inducing, and representing, which conveys invisiblecharacteristics of knowledge into a visible object. Information visualization technology isdeveloped for solving such problems using visual object with friendly intuitive human-

Multimed Tools Appl

computer interactions that can help people obtain insights from large-scale collections ofunstructured information.

3 System overview

This research develops a visual-based knowledge representation that functions as a domaintutor for providing materials of mixing-and-matching fashion in professional lectures. Itprimarily consists of two viewpoints: fashion knowledge based on design styles and fashionknowledge based on design elements. Figure 3 shows the schematic architecture of theinteraction framework. From the viewpoint of design styles, the initial state is Style CognitionSpace, constructed using a 3D convex hull, where users can navigate the overall exemplarspace and assimilate the correlations between different fashion styles. This is to present theinterface task of Overview. Every point in the convex hull indicates every design exemplar inthe collection. The visual attribute, Color, is used to differentiate what style the exemplarbelongs to.

The Focus task is accomplished by the design of a specific style cluster view, in whichexemplars belonging to the same style are sorted according to the distance, meaning the degreeof representation of the style, and displayed using corresponding photos. Users can magnify aparticular style group in the Style Cognition Space to Style Cluster View through Portaltoolkit. Either in Style Cognition Space or in Style Cluster View, users can select particularexemplars based on their demands for viewing the design details and making further compar-ison in the comparison view of design elements’ effect.

From the viewpoint of design elements, a comparison view of design elements’ effectnumber and an elementary attribute space are created to execute the tasks of Detail and Relate,respectively. For clearly representing the complex design details among fashion design worksand supplying intuitive and effective visual cues for comparisons, a ||-coords-like informationplot is developed, constituting of a ||-coords-like graph and an option frame. The ||-coordsgraph has six plots to display information about each of the six design elements, each of whichcontains several polylines representing the selected exemplar. The view dynamically changesbased on which design elements were selected in the option frame. A maximum number offashion design exemplars can be selected for a simultaneous visual comparison is four. Coloris also used to indicate which fashion style the exemplar belongs to. A portal is provided as alink between the comparison view of design elements’ effect and Elementary attribute space tofilter related information for users. Section 4.2 and 4.3 describe the details of implementation.

Fig. 3 Schematic structure of the fashion style knowledge visualization system

Multimed Tools Appl

Portal and Details on demand change different views of fashion knowledge. Portals allowlinks between data objects and filters on their representations. There are two portal toolkitsdesigned in the research: one is a bridge between 3D cognition space and the 1D style clusterview, the other is a bridge between the comparison view of design elements’ effect number andthe elementary attribute space, both allowing users to walk in and out of the region of interestdynamically. Details on demand enables users to change the view from fashion design styles todesign elements to see how design elements affect design styles and to make further comparisonsbetween multiple exemplars.Details on demand executes when a point in the 3D Style CognitionSpace or a design work in the cluster view is selected with amouse click. The elementary attributeeffect space is invoked when the user selects a particular design element in the ||-coords-likeinformation plot. Section 4.4 describes the details of implementing user interactions.

In addition, the success of a visualization system is from a series systematic process: needdefinition, information analysis, knowledge extraction, and knowledge presentation. Figure 4shows the overall processing flow for developing visualization and the interaction framework.First, in-depth interviews and questionnaires with fashion experts are performed for definingthe initial need and system requirements. To develop an intuitive interaction framework for aneffective visualization system of fashion design knowledge requires a systematic informationanalysis to determine representative essentials. All the representative fashion show photos andfashion design elements are collected and defined by fashion experts in the informationanalysis stage. The knowledge extraction stage obtains several effect formulas for describingwhich design elements affect the presentation of fashion style for each particular fashiondesign style. The analyzed information is then exploited to develop the visual objects for thefashion style knowledge visualization system. An intuitive interaction framework is imple-mented based on the needs of users (for example, actual lecturers in fashion classes).

4 Implementation

A visualization tool must somehow represent abstract things. To achieve high usability of afashion design knowledge visualization system requires the development of several visual

Fig. 4 Overall processing flow for developing the interaction framework and visualization for fashion designknowledge

Multimed Tools Appl

objects and an intuitive interaction framework. According to the research methods describedby Carians and Cox [9], a good interface is designed based on user demands and is easy to use.Therefore, this research first conducted in-depth interviews and questionnaires with fashiondesign experts and tutors to identify needs and establish requirements. The preliminarysimulation of interactions and visualization was written using Borland C and the openGLgraphic library. This section describes the details of the implementation including analysis offashion knowledge, visualization based on fashion styles and design elements, and userinteractions.

4.1 Analysis of fashion knowledge

Classifying fashion works into the same cluster forms a style. Such a classification says that allfashion works in the same cluster have similar design characteristics such as material, color,and detail. Hence, fashion experts determine six fashion design styles and some representativesample photos in advance. Questionnaires and in-depth interviews are performed to obtainavailable exemplars and the corresponding design elements and attributes. Several effectformulas for describing how fashion design elements affect styles are created. The followingsubsections describe details of process.

4.1.1 Fashion design styles

To collect representative exemplar of fashion styles and avoid over-specification of exemplars,50 students studying in the department of fashion design and management at Tainan Universityof Technology in Taiwan selected 300 representative fashion show photos from 2009 issue infirst VIEW, an online fashion magazine with fashion show photos from around the world.Three senior fashion designers, all with more than five years experience, selected 70 photosfrom the original group. To determine the most representative fashion example, 40 juniorfashion designers classified these 70 photos into 5–10 clusters based on their professionalsense of fashion and visual cues. In addition, hierarchical cluster analysis [26] is applied toclassify the apparel exemplars in a three dimensional cognition space. This stage exploits thedistance metric, Euclidean Distance. A large number of clusters create a situation in which allclusters appear similar; by contrast, a small number of clusters create a situation that all clustersare not representative enough. Therefore, based on the preliminary experiments in thisresearch, the number of style clusters was set to six. K-means method, described in [13], isused to find which exemplars are in which cluster and obtain distances between eachindividual exemplar and its cluster barycenter. For each cluster, the exemplar that has thesmallest barycentric distance is the representative example for the corresponding style. Finally,each cluster is labelled with one suitable fashion style category by the three senior fashiondesigners. The categories of fashion styles in the research are Urban Punk, Greek Goddess,Casual Hippy, Black Knight, Neo Classical, and Ethical Yuppie.

4.1.2 Fashion design elements

At this stage, the 40 junior fashion designers are interviewed to explain what physical featuresand expressive features of apparel are involved during classification. A wide collection offashion design elements affecting designer decisions for clustering is obtained. Using the widecollection of design elements as a reference, Morphological Analysis [38] is performed withthe representative exemplars to define essential design elements for each fashion design style.Some elements are eliminated based on the fashion viewpoint and a list of design elements that

Multimed Tools Appl

affect fashion style, is concluded (Table 1). Piece Item, Coordinate, Details, Fabric, Color, andShape are the six item labels, each of which involves one item label and several nominalvalues, namely elementary attributes.

4.1.3 Effect formula of design elements

As described in the work proposed by Lin [31], effect formulas of fashion design elements area mathematical representation for drawing a relationship between fashion style and designelements. This study used Lin’s method to create effect formulas of fashion design elementsfor each fashion style exemplar. In the previous stage, six groups of fashion design elementswere obtained for each fashion style. Each group of fashion design elements is utilized to makea corresponding questionnaire for each individual style, resulting in six questionnaires. Toobtain specific effect formulas of fashion design elements for each individual exemplar in thesix fashion style groups (a total of 70 pieces), the questionnaire is first answered by the 40junior fashion designers. Multiple Regression [1] is typically used to learn more about therelationship between several independent or predictor variables and a dependent or criterionvariable. The current investigation usesMultiple Regression to determine how design elementscollaboratively affect cognitions of fashion styles in the research. Effect formulas for eachfashion exemplar are determined. First, the design elements listed in Table 1 are transformed tovirtual variables (independents), and the style cognitions of exemplars from the 40 juniorfashion designers are set as dependents. The backward algorithm in the statistics softwareSPSS is used to prune ineffective design elements. Therefore, each individual fashion exemplarcan be represented using corresponding Effect formulas. Table 2 lists two sets of formulas. Thefirst set shows two exemplars in the same style cluster and the second set shows two exemplarsin two different style clusters. The alphabets in the formulas refer to the design elements shownin Table 1, and the numbers are effect number showing how the element affects the corre-sponding style. A positive effect number means the corresponding attribute enhances thenature of the style. A negative effect number means the attribute reduces the nature of the style.

Table 1 Detail of essential design elements which affect fashion style in the research. Each essential designelement includes an item label and several nominal values, namely elementary attribute

Item Label Elementary Attribute

a. Piece Item a1. Loose culottes, a2.Dinner dress, a3. Below knee dress, a4. Loosetype, a5. Improvement western style coat, a6. White shirt, a7. Vest, a8.Below knee skirt, a9. Skew shoulder dress, a10. Gauze skirt, a11. Leggings

b. Coordinate b1. Multilayer, b2. Different material, b3. Contrast hue, b4. Wide top andnarrow bottom, b5. Same material

c. Details c1. Deep V neckline, c2. Fringe shoulder, c3. Floating skirt, c4. Totem,c5. Asymmetric skirt, c6. Nine point trousers, c7. Hot-Paints, c8.U-neckline, c9. Strapless, c10. Plunging neckline, c11.Wide collar,c12. Turtleneck, c13. Skew shoulder, c14. Shirr, c15. Baring shoulder

d. Fabric d1. Chiffon, d2. Lace, d3. Sateen, d4. Leather, d5. Check, d6. Silk, d7.Knit, d8. Fur, d9. Velvet

e. Color e1. White, e2. Black, e3. Stripe, e4. Folk totem, e5. Brightly colored, e6.Pink, e7. White purple, e8. Dull, e9. Blue, e10. Vivid purple, e11. Natural color

f. Shape f1. Asymmetric cutting, f2. Square-top-and-lengthy-bottom, f3. Spindle type, f4.V type, f5. X type, f6. H type, f7. A type

Multimed Tools Appl

If the effect number is zero, the nature of the style is not affected by the correspondingattribute.

4.2 Visualization based on fashion styles

As mentioned in the previous section, examples of fashion show photos are clustered usingcluster analysis and K-mean methods. All examples can be transformed as a point in a threedimensional space. However, using static charts for presentation cannot satisfy changeableuser requirements when seeking information. Therefore, a three dimensional virtual geometryis used to interactively present overall patterns of fashion design styles collected by fashionexperts. The major task of this stage is constructing a convex polygonal geometry that includesall points to visualize the overall style cognition space. In addition, a style cluster view isdesigned for locally viewing exemplars of a particular fashion cluster based on their similar-ities. The following subsections describe details of implementing Style Cognition Space andStyle Cluster View.

4.2.1 Style cognition space

The Style Cognition Space contains the entire collection of fashion exemplars, representing theOverview interface task. Except the most representative exemplar of each style, the 70examples obtained from knowledge acquisition process are first drawn as points in the 3Dspace to reduce the state of chaos caused by displaying corresponding fashion photos. Thepositions of points, which are obtained through statistical analysis, indicate the similaritybetween different exemplars. Two points, for example, in the same neighborhood means bothbelonging to the same fashion style. However, since fashion style is formed by humancognition, there might be an overlap between different fashion styles. To avoid confusion,Color and different marker styles are used as a visual attribute to illustrate different fashionstyle in the exemplar domain. Red cross-shaped marker, for instance, indicates the GreekGoddess style. Red cross-shaped markers in the 3days virtual geometry mean the correspond-ing fashion photos are classified as Greek Goddess style (Fig. 5).

Alternatively, to provide a direct zooming view and to achieve easy object select in the stylecognition space, actual camera zooming is used. In addition, a mouseOver event is attached toevery vertex in the style cognition space for providing a simple way to pop up the

Table 2 Examples of resultant effect formulas of fashion design elements. The first set shows two exemplars inthe same style cluster and the second set shows two exemplars in two different style clusters

Set number Exemplar Formula

1 Ethical Yuppie01 0.451×a3+0.259×b1-0.090×b3−0.063×c3+0.113×c4−0.205×c6−0.249×d3−0.572×d6+0.657×e5+0.293×f5+0.333×f7

Ethical Yuppie06 0.015×a5−0.651×a11+0.719×b1−0.185×b3−0.260×c6+0.406×d3−0.137×d6+0.391×e2−0.125×e5+0.346×f5

2 Urban Punk04 0.493×a7−0.758×a8+0.297×a11+0.321×b1+0.414×b2+0.309×b3−0.714×b5−0.990×c7+0.651×c8−0.034×c9−0.725×c15+0.235×d6+0.356×e1+0.838×e2−0.592×e3−0.198×e5+0.551×e6−0.418×f7

Black Knight02 0.663×b3+0.494×b5−0.144×c1+0.338×c5−0.455×c6+0.338×d3+0.140×d4+0.457×e1−0.166×e2+0.052×f1

Multimed Tools Appl

corresponding fashion photo. It not only reduces the chaos of using all fashion photos texturedon the vertices, but also reduces the processing time of rendering the entire style cognitionspace.

To illustrate the entire style space and provide an intuitive seeking tool for users, the stylecognition space is constructed using 3-dimensional convex polygonal geometry. In computa-tional geometry [15], a basic definition of convex hull is finding the smallest convex set for agiven finite nonempty set of points. For points in 3-dimensional space, a set P of n points, theconvex hull is a convex polytope whose vertices are points in P. At most it has n points.Randomized Incremental Algorithm described in [15] is used to construct the style cognitionspace, a minimized 3D convex hull containing all example data points, n, of the collection.There are six fashion styles defined in the project. ∀n∈Sc, c∈[1,…,6], s.t. Si∩Sj=∅,∀i≠j. Thesix colored rays in the 3D convex hull are drawn to help users find the six correspondingrepresentative exemplars of fashion styles.

Current technology of computer graphics has solved the problems of rotation and zoomingof 3D objects. Researchers have proposed many different rotation matrices for rotating avirtual geometry in 3D space [2, 5, 19, 29, 46]. Euler angles [35, 46] have developed an easilyunderstanding popularized method for rotation in 3D space. However, a problem of gimballock occurs if two of the three axes become parallel when rotated. Quaternion [5, 25] isanother method of rotation in 3days space. It uses 4-numbers (s, x, y, z) as a representation of

Fig. 5 The 3D Style Cognition Space, in which color is used to differentiate style clusters. The six colored rayshelp users find the six corresponding representative exemplars of fashion styles

Multimed Tools Appl

geometrical similarity in typical case. If the relation s2+x2+y2+z2=1 is verified, then thequaternion can be used to represent a rotation. From a practical point of view, rotating an

angleθaround a normalized vector, N!¼ x0; y0; z0ð Þ , in 3D space is represented as (cos (θ/2),

x0•sin (θ/2), y0•sin (θ/2), z0•sin (θ/2)) by quaternion. Unlike Euler angle, quaternion processesrotation only one time so that no problem similar to gimbal lock occurs. Quaternion is thusused in this research to implement rotation in 3D space.

4.2.2 Style cluster view

Supporting both focused and contextual views can improve interaction over constrainedsingle-view software. The concept of focus + context interface is implemented in the StyleCluster View. It is a subview of the Style Cognition Space invoked through the user interactionof Portal processed on each representative example of the six style clusters. Figure 6a showsthe initial state in which exemplars are sorted based on the similarity, as known as therepresentative degree for the corresponding fashion style, and initially displayed using thumb-nails. A sliding window is provided for choosing what to display largely, and initially containsthree thumbnails. For flexibility, users can change the size of sliding window according to theirdemands. A scroll bar is used to move the sliding window and to pull out the hiddenexemplars. The blue tone panel is composed of n cells coloring with different saturation scale,used as a visual assistance for reminding users the dissimilarity scale, where n is the number ofexemplars in a specific style cluster. The dissimilarity obtained during the knowledge

Fig. 6 This research developed the Style Cluster View to focus on a particular style cluster and still be able tonavigate

Multimed Tools Appl

acquisition process indicates how dissimilar the exemplar is when compared with the repre-sentative exemplar in the same style cluster.

∀Pi ¼ Ri;Dif g∈Sc; c ¼h1;…; 6

i; 1≤ i≤n; s:t: R1 > R2 > … > Ri > Riþ1 > … > Rn

D1 < D2 < … < Di < Diþ1 < … < Dn

�

where Ri and Di respectively denote as the degree of representative and dissimilarity for the iexemplar in the cluster

Additionally, every exemplar, Exi, can be poped out while the cursor approaches. Torepresent the focus + context interface, Exi-1 and Exi+1 are simultaneously displayed withsmaller scale rate than Exi (Fig. 6b). Animation mechanism is also used for couplingmovement and zoom level. Except activated thumbnails, others in the thumbnail row aredisplayed with lower illumination at this stage. Moreover, a further similarity display isactivated while Exi is clicked (as shown in Fig. 6c). The focal exemplar Exi is positioned asthe basis, and the surrounding contextual exemplars, Exi-1 and Exi+1, are positioned respec-tively based on the similarity relative to Exi. Users select a specific exemplar for bringingdetailed design information to the comparison view while clicking left mouse button on thecorresponding picture.

4.3 Visualization based on design elements

Various compositions of design elements typically affect Fashion design styles. Therefore avisualization based on design elements compares various compositions for different exem-plars. Although Lin has transformed abstract concepts to mathematical formulas for describingthe relationship between style and design elements [31], the complex parameters and coeffi-cients of the formulas are difficult for learners to understand. Hence, this research designed a ||-coords-like information plot and an elementary attribute space for users to select an item toobtain details and view relationships. The following subsections describe the implementationsof Comparison View of Design Element Effects and Elementary Attribute Space.

4.3.1 Comparison view of design elements’ effects

From the descriptions in Section 4.1, fashion designers typically use various design elementsto present a particular fashion design style. Each design element includes an item label andseveral nominal values, and various effect numbers to represent diverse fashion design styles.The current research used multivariate variables to provide visual representation for exploringand analyzing fashion design data to navigate the knowledge discovery process through visualcues. Previous visualization researches [48, 54] have summarized the requirements for suc-cessful exploratory data and analysis: (1) an informative display without data loss, and (2)skillful interaction with the display. For visualizing multivariate problems, parallel coordinatesare always suitable for exploring and analyzing data [21]. Thus, the research explores commonparallel coordinates for providing details of design elements based on user interests.

The ||-coords-like information plot consists of three windows: a ||-coords data graph, anelement selection window, and a subject window. The ||-coords data graph is implementedbased on the outline of the simple parallel coordinate, and the Euclidean plane R2 with xy-Cartesian coordinates. Six planes are produced for the six groups of design items, including thePiece Item, Coordinate, Details, Fabric, Color, and Shape, each of which has Nj copies of thereal line placed equidistantly and perpendicularly to the x-axis labeled with nominal values,dynamically shown based on user demand. The nominal values are indicated in Table 1. Nj is

Multimed Tools Appl

the amount of nominal values the j item has. The y-axis indicates the effect number, upwardorientation shows positive effect, and downward orientation shows negative effect. Point C inthe fashion style cognition space is represented by the complete polygonal line C (i.e., the linecontaining the segments between the axes) whose N vertices are at the ck value on the nominalaxis for k = 1,…, N.

The maximal number of exemplars displayed simultaneously for comparison is four. Asshown in Fig. 7, there are 4 exemplars selected from Casual Hippy, Ethical Yuppie, GreekGoddess, and Urban Punk. For clearly representing which exemplar is currently in view, thecorresponding photo and identity number are displayed in the subject window. Colors areexploited for indicating the connectivity of design information and fashion styles. To provide afunction for users to choose which design item to display on the ||-coords graph, an elementselection window is constructed. The plane in the ||-coords graph dynamically changes basedon the corresponding check box the user checked in the element selection window. Forinstance, the design item, coordinate, is displayed as row B, in which the effect of the firstfour elementary attributes (multilayer, different material, contrast hue, wide top and narrowbottom) are shown respectively. In comparison, the attribute, contrast hue, affects the fashionstyle Casual Hippy positively, whereas it affects the fashion style Urban Punk negatively. Inaddition, the system provides a zoom tool for users to provide an enlarged view of a specificattribute. When the zoom tool is activated, a squared window is attached on the cursor. Figure 8shows the corresponding data polylines enlarged 2 times and also shows the effect numbers inthe zoom-window while the user navigates the ||-coords data graph.

Fig. 7 The ||-coords based information plot constructed in the project which contains a ||-coords data graphwindow, an element selection window, and a subject window

Multimed Tools Appl

4.3.2 Elementary attribute space

This research designed an elementary attribute effect space to view the relationships between aspecific elementary attribute and other fashion styles. It is to provide relate information to userfor making comparison between examples based on design elements’ effects. A portal toolkitis provided between Comparison view of design elements’ effects and Elementary attributespace. The selected example, Exi, in Comparison view of design elements’ effects is the basefor comparison, its effect number hence noted as Ebased. All exemplars in the exemplar spaceare clustered into four groups based on the viewed elementary attribute’s effect number of thebase exemplar: less effective group (Ei<Ebased), more effective group (Ei>Ebased), equivalentgroup (Ei==Ebased), and non-effective group (Ei=0). As shown in Fig. 9, exemplars whichhave larger value than the base exemplar are displayed in ascending at the “more” columnindicated with upward arrow while exemplars which have smaller value than the baseexemplar are displayed in descending at the “less” column indicated with downward arrow.Glowing effect is attached on the border of the photo while cursor approaches for indicatingthere are more exemplars in behind. Mouse roller is used to swap viewed exemplar on eachcolumn. Besides, detailed information of viewing exemplar is shown in the correspondinginformation plot. Non-effective group is shown using an extended viewport where exemplarsare clustered and parallel positioned as columns based on fashion styles. In each column,exemplars are ordered according to their id numbers using corresponding photos with lowresolution. The viewed exemplar in non-effective group is pulled out of the correspondingcolumn and displayed with high resolution.

Fig. 8 The zoom tool is activated and attached to the cursor while user presses the Zoom button. The yellowarrow indicates the current position of the cursor

Multimed Tools Appl

4.4 User interactions

According to the review in [22], semantic zooming and portal are two important concepts ofzooming interface. Semantic zooming allows visual objects to be represented differently atdifferent scales; while portals allow links between data objects and filters on their represen-tations. Since this study aims to provide an intuitive interaction interface for helping lecturersefficiently transfer various fashion design experiences and knowledge, semantic zooming andportal are both provided for interactively changing various visions of fashion knowledge. Thefollowing provides the detailed descriptions of the interactions.

One portal is provided as a bridge between the 3D cognition space and the style clusterview, allowing users to dynamically zoom in a particular region of interest. Users can firstrotate the 3D cognition space, the 3D convex hull, to view the distribution of the entireexemplar collection of fashion styles. As described in Section 4.2.1, the colored rays inside theconvex hull provide visual assistance for users to recognize whether the portal is activated towalk in the corresponding style cluster. The style cluster view is shown if one of the six rays isorthogonal with the view plane. As shown in Fig. 5, the photo of the representative exemplar

Fig. 9 The elementary attribute space. All exemplars in the exemplar space are clustered into four groups: lesseffective group, more effective group, equivalent group, and non-effective group

Multimed Tools Appl

of the Ethical Yuppie will display if the light blue ray is orthogonal with the view plane, thusactivating portal toolkit to zoom the focus into the Ethical Yuppie style cluster view.

Another Portal is used to invoke the elementary attribute effect space for obtaining a furthercomparison based on the effects of the design elementary attribute to different design works. Itis achieved when the user clicks on a particular elementary attribute axis from the ||-coords datagraph in the ||-coords-like information plot.

Details on demand is a user interaction that assists users to change the view from fashiondesign styles to design elements, providing detailed information of interests to the ||-coordsinformation plot. This is achieved when a point in the style cognition space or a design work inthe cluster view is selected using a mouse click. As shown in Fig. 7, the exemplar numbered 13is selected from the Style Cognition Space, and the exemplar numbered 12 is selected from theEthical Yuppie Style Cluster View.

5 Experiments and evaluations

5.1 User assessment

For evaluating whether the computerized system improves teaching quality of fashion designlectures, static-group comparison design [17] was utilized to compare students who receivefashion design instruction through computer assisted learning module and those who receivetraditional instruction in [32]. As proposed in [32], 60 senior students from the Department ofFashion Design of Tainan University of Technology in both the experimental group and thecontrol group received two hours of instruction in concept mapping by the same instructorduring the first week of the Fashion Information and Analysis course. After that, the partic-ipants in the control group received two hours of traditional fashion design instruction by thesame instructor during the second and third weeks of the Fashion Information and Analysiscourse for a total of four hours of instruction. The participants in the experimental group haveworked with computer assisted learning module for the same period of time. To compare thescores of two independent groups, the control and experimental groups, an independent T-testwere used to determine whether there is a statistically significant difference in concept mapscores between students who use computer assisted learning module for fashion design andthose who receive a traditional method of instruction. A concept map is a hierarchical form ofstructure diagram that illustrates conceptual knowledge and their relationships within a specifictopic from general to specific concepts. For assessing the difference between two groups, afashion design assessment rubric consisted of six dimensions (Theme, Fashion Sense, Inno-vation, Aesthetics, Entireness, Touching the Consumer Heart) was proposed in [32]. As shownin Table 3, the computer assisted learning module produced a significant increase in all sixdimension scores of the fashion design concept map. It presents that fashion design knowledgeas indicated in the concept mapping can increase through the proposed system. In addition,Fig. 10 shows the comparison of the dimension scores between the two groups, the scores inexperimental group were all higher than those in control group. The order of the six dimensionscores from high to low was dimension 6, dimension 5, dimension 2, dimension 1, dimension4 and dimension 3. It indicated the subjects possessed the knowledge to complete the ConceptMap on fashion design that, from powerful to weakness, was Touching the Consumer Heart,Entireness, Fashion Sense, Theme, Aesthetics and Innovation. Thus, Lin concluded thecomputer assisted learning module improves teaching quality of fashion design lectures.Hence, we exploited the experiments procedure to evaluate the digital tutor is an effectivelearning tool for fashion novices.

Multimed Tools Appl

To provide a convinced result that the developed digital tutor provides an effective tool forlearning fashion design knowledge, according to the conclusion in [32], a workshop forleaning fashion design style knowledge was held and a professional lecturer of fashion designwas involved. The participants were 30 novices and randomly divided into two groups, theexperimental group and the control group. For shortening the experimental time and simpli-fying the procedure, a traditional teaching method was used in the lecture of control groupwhereas the developed digital tutor was exploited for assisting learning in the experimentalgroup. After the workshops, given a specific fashion style, every participant finished a conceptmap individually. Since Touching the Consumer Heart is not the subject of the research, theprofessional lecturer scored all concept maps ranging from (1=least agreed) to (5=veryagreed) according to the first 5 dimensions proposed in [32] (Theme, Fashion Sense, Innova-tion, Aesthetics, Entireness). As shown in Table 4, concept maps from experimental groupwere scored higher in all dimensions than those from control group. It reveals that the digitaltutor assists novices to learn fashion design knowledge effectively. In addition, an in-depthinterview was conducted after workshops. All participants confirmed that the digital tutorprovides an environment for timeless learning and allows review the points of the fashionlecture whenever they want.

5.2 Evaluation of user interactions

Researches on user interface design [28, 45] indicate that usability factors such as efficiency,satisfaction, and ease of use express the quality of interactive systems. Visualization success

Table 3 Independent T-test ofConcept Map Scores [32] Dimensions t-value

Dimension 1- Theme 4.06

Dimension 2- Fashion Sense 3.291

Dimension 3- Innovation 3.445

Dimension 4- Aesthetics 4.949

Dimension 5- Entireness 2.892

Dimension 6- Touching the Consumer Heart 2.465

Fig. 10 The concept map scores by novice groups. Exp. stands for experimental group and Cont. stands forcontrol group. The concept maps by Experimental group, which exploited the digital tutor as learning assistance,score higher than the control group does [32]

Multimed Tools Appl

depends on whether the visualizations meet user goals. The interviews of lecturers in fashionclasses reveal that a computer application for visualizing fashion design knowledge withintuitive user interface interactions is necessary for reducing time in preparing teachingmaterials and improving performance in explaining various design styles in classes. Theintuitive user interface assists learners to review and obtain fashion design insights bythemselves. Hence, this research designed a 3D style cognition space to provide users anoverview of the entire collection of fashion styles, and a 2D ||-coords-like information plot tovisually compare specific examples. To provide proper functionalities for specific users, afashion design lecturer participated in the project to suggest user-friendly interface interactions.The system is thus built based on user demands.

Classic fashion show photos are typically useful as effective teaching materials of fashiondesign. However, the 3D cognition space filled with the entire collection of 70 fashion showphotos results in chaos. Practically, rendering time enormously increases if the number oftextures (fashion photos) increases. According to our experiments, the time of rendering ascene with 70 photos textured is 70–200 microseconds, and the time of rendering a scenewithout textures is 50–150 microseconds. The execution time of activating the mouseOverevent to pop out the corresponding fashion photo is 400–1,100 microseconds. Thus, theproposed framework eliminates the chaos of disordered photos and provides an efficientway to explore cognition space.

Similar to KaleidoTile, one of the mathematical visualization tools discussed in [54], ourinteraction framework is designed as an access-based interactive visualization that allows usersto access the stored, available fashion style cognition space. Users can directly interact with theexisting example space by continuously rotating the 3D convex hull. Regarding the overallperformance of data retrieval, the proposed framework also demonstrates smoother workflowthan KaleidoTile. The parallel coordinates presentation also transforms multivariate relationsinto 2-D patterns suitable for exploration and analysis. Hence, the ||-coords-like informationplot is designed for viewing the detailed design information and making effective visualcomparisons between various exemplars. Multiple windows in the visualization systemprovide easy data access.

Questionnaire-based evaluations of usability and aesthetics were not affected by experiencewith the system or by monetary performance incentives [4]. Hence, we used questionnaires toevaluate the proposed framework and conducted three small workshops of fashion design style.Professional lecturer with fashion design teaching experience used the developed visualizationsystem in each workshop as a teaching aid to communicate with 15 novices. Moreover, anotherworkshop for experienced fashion designers and editors is also held to obtain the evaluation offashion professionals. The number of fashion designers and editors is 22. After the workshops,an in-deep interview is conducted, the participants answered some questions on the question-naire to evaluate usability of the overall system and each individual component (3D StyleCognition Space, Style Cluster View, ||-coords-like Information Plot, and Elementary AttributeEffect Space) based on their experiences. For the question, “How effective, satisfactory, and

Table 4 Concept Map AverageScores of Novices Dimensions Exp. Cont.

Dimension 1- Theme 4.867 4.467

Dimension 2- Fashion Sense 4.267 4

Dimension 3- Innovation 3.933 3.867

Dimension 4- Aesthetics 4.2 4

Dimension 5- Entireness 4.6 4.533

Multimed Tools Appl

easy would you rate the visualization system for use in a fashion design lecture?” participantsresponded using a Likert scale ranging from (1=least effective/satisfactory/easy) to (5=veryeffective/satisfactory/easy). As summarized in Fig. 11, the feedbacks obtained from 28 profes-sionals, including fashion editors, lecturers and teaching assistants, and 45 novices clearlydemonstrate that most participants evaluated the system as positive and satisfactory. However,as described previously, the limited experimental time reduced workshop time. Some novicesthus felt that too much information presented in too short time might cause confusion. Despitethis, the English interface caused some trouble, since most novices in the workshops were notnative English speakers and were inexperienced in fashion. Few novices thus gave the least

Fig. 11 The graphs (A) (B) (C) show the histograms of feedbacks obtained from 3 lecturers, 3 teaching assistants,22 professionals and 45 novices based on the rates of effective/satisfactory/ease of use for the proposed systemrespectively. a Histograms for the question “How effective would you rate the visualization system and eachcomponent in a fashion design lecture?” The left image shows the evaluation from 45 novices. The right imageshows the evaluation from 3 lecturers, 3 teaching assistants, and 22 professionals. b Histograms for the question“How satisfactory would you rate the visualization system and each component in a fashion design lecture?” Theleft image shows the evaluation from 45 novices. The right image shows the evaluation from 3 lecturers, 3teaching assistants, and 22 professionals. c Histograms for the question “How easy would you rate thevisualization system and each component in a fashion design lecture?” The left image shows the evaluationfrom 45 novices. The right image shows the evaluation from 3 lecturers, 3 teaching assistants, and 22professionals

Multimed Tools Appl

mark for the questions about effective and satisfactory, as shown in the left images of Figs. 11aand b. However, novices that requested to manipulate the system by themselves after theworkshop indicated high satisfaction. Most of them indicated that simple manipulations in thesystem reminded them of fashion design styles taught in the workshop.

Each respondent was also asked to check the feature items of the proposed system accordingto the workshop experiences. Table 5 shows the number of participants who agreed/neutral/disagreed (○/-/×) on the fifteen feature items. The lecturers and professionals all agreed that thevisualization system is a novel and useful tool for teaching assistance in fashion design styles.Most novices indicated the ease of obtaining fashion knowledge from the lecturers using ourvisualization system. Comparing with the responses from professionals and novices, lecturersall agreed that the proposed system provides a concise and understandable user interface foreasy manipulation to communicate the concepts of fashion styles efficiently, as indicated inFig. 12. However, some novices thought that the interface is complex and found it difficult toaccess information properly due to the English interface. A large portion of participants alsoproposed aesthetically improving the user interface to make it highly attractive.

6 Conclusion and future works

This article introduces the development of a visualization system for fashion design styleknowledge as an example of our effort to design an intuitive interaction framework forcommunicating complicated and multidimensional design knowledge to the end user. Thesystem allows users to view classic fashion show photos to represent each specific fashion stylewith intuitive user interface interactions. A professional lecturer provides practical experiencesin teaching fashion. Design of a three-dimensional fashion style cognition space and the ||-coords like information plot provide various views of fashion design knowledge, based on

Table 5 Results of questionnaire-based evaluations. It shows the number of participants who agreed/neutral/disagreed (○/-/×) with the fifteen feature items of the Fashion Design Knowledge Visualization System

Features of Fashion Design Knowledge Vis. System Lecturer and TA Novices Professionals

○ − × ○ − × ○ − ×

1.Digitalization of cloth style exemplar space 6 0 0 42 3 0 22 0 0

2.Clear and novel visualization representation 6 0 0 43 2 0 18 3 1

3.Effective learning tool 4 2 0 38 6 1 19 3 0

4.Intuitive interaction mechanism 4 2 0 30 15 0 17 5 0

5.Easy manipulation 6 0 0 26 13 6 16 5 1

6.Shortening of learning time 1 5 0 34 9 2 18 4 0

7.A comprehensive tool for observing cloth style samples 4 2 0 42 2 1 17 5 0

8.Effortless for finding detailed information 4 2 0 40 5 0 20 2 0

9.Efficient communicating tool of fashion styles 6 0 0 34 11 0 18 4 0

10.Easy data accessing 6 0 0 38 6 1 18 4 0

11.Fully user interactions 4 2 0 27 14 4 17 5 0

12.Smooth work flow 6 0 0 28 14 3 17 5 0

13.Aesthetic user interface 4 2 0 16 16 13 13 9 0

14.Concise and understandable user interface 5 1 0 28 10 7 15 6 1

15.Intuitively visual comparison 6 0 0 40 5 0 19 2 1

Multimed Tools Appl

fashion styles and design elements, in the research. For achieving the Focus interface task, StyleCluster View is designed to provide a further view of specific fashion examples and ElementaryAttribute Space is designed to view the relationships between a specific elementary attribute andother fashion styles. The three interactions of Zoom,Detail on demand, and Select are providedfor changing various views of fashion knowledge. This research designs multiple windowsvisually compare between diverse designworks. Dynamic connectivity between different viewsprovides a simple method to understand complex fashion information.

The developed visualization system provides users an overview and details of exemplar spacefor directly viewing complex fashion information.Whether professional lecturers or inexperiencednovices at fashion, all users rate the system as highly satisfactory after use. However, theexperimental lectures were compressed due to the time limitation of workshops. The schema ofmultiple windows and rapid instructions were thus difficult for some novices to follow up.Extending the procedure time can rectify this situation. Based on the experiences in developingthe system and the workshop results, we propose further development steps. The English userinterfacewas problematic for workshop participants whowere not native English speakers. Hence,this research will provide a Chinese language user interface for the target users in this research.

Another problem is that the appearance of the current user interface lacks aesthetics. Afashionable interface which provides a sense of fashion expertise will thus be designed in thenear future. Several participants also suggested that stylized music is more intuitive than textlabels for indicating the currently viewed fashion style. Hence, a categorization of fashion styleusing music will be developed and attached to the system as a reminder of fashion style.Achieving a successful fashion design results is not only from combining various design elementsbut also by creating a desirable image of user demands. Therefore, this research will continue toimprove the appearance of the user interface, and develop additional functionalities such as propermusic for representing particular fashion styles and visualizations for presenting design images.

References

1. Allison PD (1999) Multiple regression: a primer. Pine Forge Press, USA

Fig. 12 The profiles of approval ratings reported from a fifteen-item questionnaire to assess participants’satisfaction in three workshops

Multimed Tools Appl

2. Arvo J (1992) Fast random rotation matrices. Graphics Gems III, Academic Press Professional, pp 117–1203. Beard D, Walker J (1990) Navigational techniques to improve the display of large two-dimensional spaces.

Behav Infor Techn 9(6):451–4664. Ben-Bassat T, Meyer J, Tractinsky N (2006) Economic and subjective measures of the perceived value of

aesthetics and usability. ACM Trans On Comput-Hum Interact 13(2):210–2345. Berthold K (1987) Horn, “closed-form solution of absolute orientation using unit quaternions,”. J Opt Soc

Am 4:629–6426. Boyack KW, Wylie BN, Davidson GS (2002) Domain visualization using VxInsight® for science and

technology management. J Am Soc Inf Sci Technol 53(6):764–7747. Card S, Mackinlay JD, Shneiderman B (1999) Readings in Information Visualization: Using Vision to

Think. Morgan Kaufmann8. Card SK, Robertson GG, York W (1996) The WebBook and the web forager: an information workspace for

the world-wide web. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems:Common Ground, pp. 111-ff

9. Carians P, Cox AL (2008) Research methods for human-computer interaction. Cambridge University Press10. Carpendale MST, Cowperthwaite DJ, Fracchia FD (1997) Extending distortion viewing from 2D to 3D.

IEEE Comput Graph Appl, July/Aug, pp. 42–5111. Charlie CL, Yu W, Matthew MF, Charlie CL, Wang, Yu W, Matthew MF, Yuen (2002) “Feature based 3D

garment design through 2D sketches,”. Comput Aided Des 35:659–67212. Cheng CI, Liu DSM (2008) An intelligent clothes search system based on fashion styles. In Proceedings of

International Conference on Machine Learning and Cybernetics, pp. 1592–159713. Chiu C-Y, Chen Y-F, Kuo I-T, Ku HC (2009) An intelligent market segmentation system using k-means and

particle swarm optimization. Expert Syst Appl Int J 36(3):4558–456514. Cordier F, Seo H, Magnenat-Thalmann N (2003) Made-to-measure technologies for online clothing store.

IEEE Comput Graph Appl 23:38–4815. de Berg M, van Krefeld M, Overmars M, Schwarzkopf O (2000) Computational Geometry: Algorithms and

Applications, 2nd edn. Springer16. Eick SG, Steffen JL, Sumner EE (1992) IEEE Trans Softw Eng 18:987–96817. Gall MD, Borg WR, Gall JP (2003) Educational research: an introduction, 8th edn. Longman Publishers,

White Plains18. Hearst A (1995) TileBars: visualization of term distribution information in full text information access. In

Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp 59–6619. Herter T, Lott K (1993) Algorithms for decomposing 3-D orthogonal matrices into primitive rotations.

Comput Graph 17(5):517–52720. Inselberg A (1985) The plane with parallel coordinates. Vis Comput 1(2):69–9121. Inselberg A (2009) Parallel coordinates: visual multidimensional geometry and its applications. Springer-Verlag22. Karlson A, Bederson BB (2008) A review of overview + detail, zomming, and focus + context interfaces.

ACM Comput Surv 41(1):2:1–2:3123. Keller P, Keller M (1992) Visual cues. IEEE Press, Los Alamiton24. Kohonen T (1990) The self-organizing map. Proc IEEE 78(9):1464–148025. Kuiper JB (2002) Quaternions and rotation sequences. Princeton University Press26. Kuo RJ, Ho LM, Hu CM (2002) Cluster analysis in industrial market segmentation through artificial neural

network. Comput Ind Eng 42:391–39927. Lamping J, Rao R, Pirolli P (1995) A focus + context techniques based on hyperbolic geometry for visualizing

large hierarchies. In Human Factors in Computing Systems CHI’95 Proceedings. ACM Press, pp 401–40828. Lauesen S (2005) User Interface Design - A Software Engineering Perspective, Addison-Wesley29. León CA, Massé J-C, Rivest L-P (2006) A statistical model for random rotations. J Multivar Anal 97(2):

412–43030. Lin CC-H (2003) Explore the differences of cognitive between fashion style and image from consumer

standpoint. J Tainan Technol Univ 22:1–431. Lin CC-H (2004) The research of exploring the relations between fashion styles and design elements. J Natl

Taiwan Coll of Arts 73:89–9732. Lin CC-H (2007) Development and assessment of a CAL module for fashion design curriculum: using

fashion design information and analysis as a content. Kaohsiung Normal Univ J: Sci Technol 23:151–17633. Metaaphanon N, Kanongchaiyos P (2005) Real-time cloth simulation for garment CAD. Proc ACM

SIGGRAPH Conf Comput Graph Interact Tech Aust South East Asia 2005:83–8934. North C, Shneiderman B (2000) Snap-together visualization: a user interface for coordinating visualizations

via relational schemata. In Proceedings of the Working Conference on Advanced Visual Interfaces (AVI2000). ACM Press, pp 128–135

Multimed Tools Appl

35. Palais B, Palais R, Rodi S (2009) A disorienting look at Euler’s theorem on the axis of a rotation. Am MathMon 116(10):892–209

36. Plumlee MD, Ware C (2006) Zooming versus multiple window interfaces: cognitive costs of visualcomparisons. ACM Trans on Comput-Hum Interact 3(2):179–209

37. Rhyne T-M, Tory M, Munzner T, Ward M, Johnson C, Laidlaw DH (2003) Information and scientificvisualization: separate but equal or happy together at last. IEEE Vis 03:611–614

38. Ritchey T (2006) Problem structuring using computer-aided morphological analysis. J Oper Res Soc 57(7):792–801

39. Rodrigues JF Jr, Traina AJM, de Oliverira MCF, CT Jr (2006) Reviewing data visualization: an analyticaltaxonomical study. In Proceedings of the Information Visualization 06’, pp 713–720

40. Rohrer RM, Ebert DS, Sibert JL (1998) The shape of shake-speare: visualization text using implicit surfaces.In Proceedings of IEEE Symp. Information Visualization, pp 121–128

41. Salton G, Allan J, Buckley C, Singhal A (1999) Automatic analysis, theme generation and summarization ofmachine-readable text. Morgan Kaufmann Multimedia Information and Systems Series, Readings inInformation Retrieval, pp 413–418

42. Sarkar M, Brown MH (1994) Graphical fisheye views. Comm ACM 47(12):73–8443. Sedig K, Liang H (2008) Learner-information interaction: a macro-level framework characterizing visual

cognitive tools. J Interact Learn Res 19(1):147–17344. Shneiderman B (1996) “The eyes have it: A task by data type taxonomy for information visualizations,”. In:

Proceedings of the IEEESymposiumonVisual Languages. IEEEComputer Society Press,Washington, pp 336–34345. Shneiderman B, Plaisant C (2005) Designing the user interface. Pearson, Boston, pp 580–603, Chapter 14.5:

Information Visualization46. Shoemake K (1994) Euler angle conversion. Graphics Gems IV, Academic Press Professional, pp 222–22947. Siirtola H, Raiha K (2006) Interacting with parallel coordinates. Interact Comput 18:1278–130948. Spence R (2001) Information visualization. Pearson Education. ACM Press49. Stead L, Goulev P, Evans C, Mamdiani E (2004) The emotional wardrobe. Pers Ubiquit Comput 8:282–29050. Terrace BC, Tess (version 1.70) [Computer Software]. Canada: Pedagoguery Software Inc, proposed by 200651. Tufte E (1992) The visual display of quantitative information. Graphics Press52. Week J, KaleidoTile (version 3.0) [Computer Software]. Available: http://geometrygames.org/, proposed by 200553. Wise JA, Thoma JJ, Pennock K, Lantrip D, Pottier M, Schur A, Crow V (1995) Visualizing the non-visual:

spatial analysis and interaction with information from text documents. In Proceedings of InfoVis’95, pp 51–5554. Zudilova-Seinstra E, Adriaansen T, van Liere R (2009) Trends in interactive visualization: state-of-the-art

survey. Springer-Verlag London Limited

Ching-I Cheng is on the faculty of the Department of Data Processing at Yang Ming Vocational High School.She received her diploma in computer science from Tamsui Oxford College in her hometown. She then studiedfilm and TV program production in Chao-Yang University of Technology in Taiwan, and gained her B.A. degreein Communication Arts. Her M.A. degree in Computer Animation was received from Bournemouth University,U.K. She studies her Ph D. degree in Computer Science and Information Engineering at National Chung ChengUniversity, Taiwan, since 2004. Her research interests include Artificial Intelligence, Computer Graphics,Multimedia Communication Systems, and Cognition Psychology.

Multimed Tools Appl

Damon Shing-Min Liu is on the faculty of the Department of Computer Science and Information Engineering atNational Chung Cheng University. Previously in the San Francisco Bay Area, he worked at Litton Industries,TRW Inc, (subsidiary of Northrop Grumman Corp of Los Angeles) and the prestigious Xerox Palo Alto ResearchCenter (PARC). His research interests include computational photography, computer graphics and animation,virtual/augmented reality and simulation systems, interactive real-time scientific visualization and data analysis.He received his BSc in Electrical Engineering from National Taiwan University, his MSc in Computer Sciencefrom Brown University, and his PhD in Computer Science from University of California, Los Angeles (UCLA).He is a member of the ACM and the IEEE Computer Society.

Charles Chia-Hsu Lin is on the faculty of the Department of Fashion Design at Tainan Technology University.Previously in Taipei, he worked as a fashion design manager at Chivaco Lady Shoes Brand and Borsen FashionCompany; in addition he also worked as a fashion marketing manager for Taiwan and Japan invests fashionbrand-Page Boy. His research interests include computer aid learning fashion design, fashion trend analysis andquantities design information, fashion design method, fashion design decision model, marketing and consumerlifestyle. He received his BSc in Fashion Design from Fu-Jen Catholic University, his MBA in MarketingPlanning from Madonna University, and his PhD in Instructional Method and Technology from Idaho StateUniversity.

Multimed Tools Appl