A HYBRID RECOMMENDATION METHOD AND DEVELOPMENT … · hypergraph theory. Afterwards, according to task analysis, we tag the task attributes, and use hypergraph theory to construct

International Journal of InnovativeComputing, Information and Control ICIC International c⃝2017 ISSN 1349-4198Volume 13, Number 4, August 2017 pp. 1169–1185

A HYBRID RECOMMENDATION METHOD AND DEVELOPMENTFRAMEWORK OF USER INTERFACE PATTERNS

BASED ON HYPERGRAPH THEORY

Rui Chen1, Qingyi Hua1,∗, Wei Jia1, Minjun Zhang1, Xiang Ji1

Juanni Li1, Bo Wang2 and Jianxin Liu3

1School of Information Science and TechnologyNorthwest University

Guodu University Avenue, Chang’an District, Xi’an 710127, P. R. [email protected]; ∗Corresponding author: [email protected]

2School of ComputerXi’an University of Posts and Telecommunications

No. 563, Chang’an Street, Xi’an 710121, P. R. [email protected]

3Department of MathematicsSimon Fraser UniversityV5A 1S6, BC, Canada

[email protected]

Received January 2017; revised April 2017

Abstract. User interface patterns provide good support for the development of usableuser interface. However, with the increase of patterns, it is difficult for users to findsuitable patterns for usable interface design. Therefore, it is an urgent problem for usersto recommend appropriate patterns in the process of designing interface. In this paper, wefirstly analyze the advantages and disadvantages of various recommendation algorithms,study the characteristics of task models and interface patterns, and then propose a hybridrecommendation method and development framework of the interface patterns based onhypergraph theory. Afterwards, according to task analysis, we tag the task attributes, anduse hypergraph theory to construct users, tasks and patterns as hypergraph models withthe historical behavioral data of users’ using patterns. Then we divide and cluster thehypergraph models by weight similarity method proposed in this paper, and calculate thesimilarity between each pattern and task in the cluster to recommend a list of patternsso that the users can quickly and accurately select the appropriate patterns for interfacedevelopment. Finally, the prototype system is developed and evaluated. The results showthat the proposed method can improve not only the usability of the system, but also thedevelopment efficiency.Keywords: User interface pattern, Hypergraph theory, Task model, Spectral clustering,Collaborative filtering, Vector space model

1. Introduction. With the emergence of a variety of interactive devices, more and morepeople begin to communicate via mobile devices. Shortening the development circle ofapplication software and improving the usability of interface are major challenges fordevelopers. Statistics suggest that the workload of the interface development accounts for40% ∼ 60% of the entire system development [1,2]. In order to develop usable interface,scholars have carried out exploration for many years, proving that the user interfacepattern is a feasible scheme for fast interface design. The user interface pattern includesfunctionality and usability features, and can greatly improve the efficiency of interface

1169

1170 R. CHEN, Q. HUA, W. JIA, M. ZHANG, X. JI, J. LI, B. WANG AND J. LIU

development. The interface pattern can be used to guide the developers to design interface,and make up for the deficiency of reusability based on model-driven development.

In order to generate user interface automatically or semiautomatically, many researcheshave been done on the application of interface patterns and the structural definition ofinterface patterns in recent years. Ahmed and Ashraf [2] applied the idea of interface pat-terns to the process of task modeling, dialog control modeling, presentation modeling andlayout management modeling. Nilsson [44] provided a detailed interface design pattern forthe screen space, interaction mechanism and other issues in the mobile user interface, andvalidated the effectiveness of the proposed patterns. Jenifer Tidwell, Martijn van Welie,and Douglas van Duyne respectively classified the patterns, following a variety of patternlanguage markup languages (PLML) such as PLML, Extended Pattern Language MarkupLanguage (PLMLx), and eXtended Pattern Language Markup Language (XPLML) [4-6].

However, these pattern libraries and description languages are all described by naturelanguage, which are the summary of experiences obtained from expert; thus the userinterface is only developed manually by programmers. For those who are not familiarwith interface patterns, it is undoubtedly a waste of time to search them in a largenumber of patterns, which will reduce the efficiency of interface development. In the taskmodeling phase, selecting the appropriate pattern for each task by automatic system canreduce the user’s searching time, so as to improve the efficiency of interface development.

It is a great challenge for the interface developers to find out an appropriate pattern fromlarge numbers of patterns to satisfy the user’s preference. Recommendation algorithm isone of the most important ways to solve this problem by modeling the user’s historicalbehavior, which can provide the user with the patterns matching the tasks.

The current recommendation methods include content-based recommendation, collab-orative filtering and hybrid recommendation, in which term frequency-inverse documentfrequency (TF-IDF), k-means clustering, k-Nearest Neighbor (KNN), and Support Vec-tor Machine (SVM) are common techniques. However, these techniques only focus onthe relationship among items, without taking user relationship into consideration or onlyconsider the relationship between the user and the item, ignoring the ability to describethe relationship among three or more objects [8,9]. Lin presented a complete three-partdiagram model that accurately reflected the user’s interest and implemented recommen-dations for items and tags. However, this model only considered a single relationshipbetween every two nodes but not other relational information, resulting in a loss of in-formation, and low recommended accuracy [11]. Gu introduced the attribute objects ofusers, news articles and news content into the hypergraph model, and proposed a newsrecommendation method based on hypergraph model [12].

The hypergraph, which is the generalization of general graph, is used to study themultivariate relations among the elements in a finite set [10]. Hypergraph is widely usedin image processing, machine learning, data mining, system modeling and other fields, inwhich good results have been achieved [10-12].

With the characteristics of hypergraph, this paper proposes a hybrid recommendationmethod and development framework of interface patterns by hypergraph describing therelationship among user, task and pattern. The combination of vector space model andhypergraphs clustering is used to recommend their preferred patterns for the users, whichimproves the efficiency of interface development. Finally, a prototype system is provided toverify the feasibility and effectiveness of the proposed method in this paper. Experimentsshow that the system prototype improves the efficiency of interface development andachieves the interface usability.

A HYBRID RECOMMENDATION METHOD AND DEVELOPMENT FRAMEWORK 1171

2. Related Work.

2.1. User interface patterns. The concept of user interface patterns, also known asHCI patterns, was originated from concept in architecture proposed by Christopher Alexan-der, and later was applied to the fields of software development and human-computerinteraction. It is a summary and knowledge representation of a long-term practical expe-rience of developers, a structured description of an invariant solution to recurring problemsin the context, and a more mature solution to the particular problems [15].

After a long-term practice, people have summarized a variety of valuable user interfacepattern libraries, such as Jenifer Tidwell, Martijn van Welie, and Yahoo, which provideda sketch, an example and an effective guidance for developers to develop a usable inter-face, and speed up the interface development efficiency [16,17]. In order to facilitate theselection and retrieval of patterns, Computer-Human Interaction (CHI) Conference heldin 2003 proposed a unified model description and instruction. Then, Pattern LanguageMarkup Language (PLML) was produced. Initially, 16 attribute elements were used todescribe the patterns, followed by the emergence of PLMLx, XPLML [4-6]. These pat-tern markup languages divided the patterns according to their name, problem, solution,use when, how, and so on, which were described in unstructured form, such as text, andsketches. These non-formal expressions are difficult to apply interface patterns to interfacedevelopment tools.

Jenifer Tidwell divided 125 patterns into 11 categories and every pattern was describedwith 8 attributes. Martijn van Welie divided 131 patterns into 15 categories and describedthem with 9 attributes. Douglas van Duyne devided 107 kinds of web-related patternsinto 13 categories and described them with seven attributes [16-19].

2.2. Recommendation method. The traditional recommendation algorithms can beclassified into three categories: content-based recommendation algorithm, collaborativefiltering recommendation algorithm and hybrid recommendation algorithm.

The content-based recommendation algorithm generated recommendation results bymatching the similarity between the user’s preference and the item description documentto be predicted, which results in over-concentration of recommendation results, a lack ofdiversity, and a cold start problem for new items. Users are easily confined to the previoussimilar recommendation results, and impossible to find out the potential interests of users.

Collaborative filtering recommendation algorithm is classified into memory-based meth-od and model-based method. Memory-based method is classified into user-based collab-orative filtering and item-based collaborative filtering. User-based collaborative filteringalgorithm recommends items to current users based on the interest records of users shar-ing the same interests with current users. Item-based collaborative filtering algorithmuses items similar to the current items to recommend them to current users. The formerneeds to calculate the similarity between the users, and the latter needs to calculate thesimilarity between items and recommend to current users. Model-based collaborative fil-tering algorithm regards the scoring matrix as the training data, and uses the method ofmachine learning to obtain the complex pattern to build the user and the item model.Model-based collaborative filtering methods include Bayesian networks, clustering-based,semantic-based and graph-based collaborative filtering algorithms [12,26-29].

Although the basic idea of memory-based collaborative filtering algorithm is clear andeasy to achieve, and the effect is good, it will cause a huge burden to the system when thenumber of users and items increase dramatically. Memory-based collaborative filteringalgorithm shows scalability and cold start problems. Model-based method can solve theproblem of data sparsity and scalability to some extent, and it has high recommendationprecision and strong interpretability, but the model is expensive to build, its accuracy and


scalability are difficult to coexist with each other, and reducing dimension will sacrificesome of the data.

Hybrid recommendation is a combination of a number of algorithms, through mixingto achieve the purpose of avoiding weaknesses, so that the recommended results are moreaccurate to meet the user’s interests. The hybrid method solves the cold start problem,improves the quality of recommendation, and reduces the limitations of different algo-rithms, while its disadvantage is that it is more complex, costly, and requires additionaldata.

2.3. Hypergraph theory. Hypergraph is the generalization of general graph, and itsedges can connect multiple vertices. The related concepts of hypergraph are defined asfollows [10-14].

Definition 2.1. A hypergraph is represented as a pair: G = (V, E), where V = {x1, x2,. . . , xn} is a finite set of objects, called the vertex set; E = {e1, e2, . . . , em} is the set ofhyperedges, and ei is called the hyperedge.

The set E of the hyperedges is also denoted by E = (ei)i∈I , where ei is the first ihyperedge of the set E, and I is the index of edges in E.

Definition 2.2. The number of vertices in hypergraph H = (V,E) is called cardinality ofvertices, denoted as |V |. The number of vertices contained in each hyperedge, is called thedegree of hyperedge, and is denoted by d(e) or |e|.

Definition 2.3. ∀i ∈ I, if |ei| = k, then H is called homogeneous hypergraph. Whenk = 2, H is degraded to a general graph.

Definition 2.4. Let H = (V, E) be a hypergraph, if ei ⊆ ej => i = j, that is ∀e, e′ ∈ E,e = e′, there is e\e′ = ∅, then H is a simple hypergraph or an irreducible hypergraph. Thereare no duplicate hyperedges in simple hypergraphs. Let H = (V,E) and H ′ = (V ′, E ′) behypergraphs, if E ′ ⊂ E, then H ′ is a partial hypergraph.

The hypergraphs generally refer to simple hypergraphs in this paper.

Definition 2.5. If V ′ ⊆ V , and ∀ej ∈ E ′, then H = (V ′, E ′ = (ej)j∈J), J ⊆ I, H ′ iscalled a subhypergraph of H.

Definition 2.6. Let A = aij (i = 1, 2, . . . , n; j = 1, 2, . . . , m) be adjacency matrix of ahypergraph, where n is the number of vertices and m is the number of hyperedges, that is(see Equation (1))

aij =

{1 vi ∈ ej

0 vi /∈ ej(1)

The hypergraph H = (V, E) and the adjacency matrix are shown in Figure 1.The hypergraph H contains seven vertices {x1, x2, x3, x4, x5, x6, x7} and three hyper-

edges {e1, e2, e3}, where x3, x4, x6 ∈ e1, x2, x4, x7 ∈ e2, x1, x5, x6, x7 ∈ e3.

Definition 2.7. The degree of the hyperedge is defined as the number of elements inthe hyperedge, that is, for any edge e, its degree δ(e) = |e| =

∑v∈V

h(v, e), where in the

adjacency matrix A, if v ∈ e, then h(v, e) = 1. Otherwise, h(v, e) = 0.

3. Recommendation Method and Framework of Interface Patterns Based onVSM-HC. Ahmed Seffah proposed the method of constructing task model, dialog modeland layout management model by using the interface patterns in Concur Task Trees(CTT) model. However, the selection of patterns also requires users with rich interface


Figure 1. Hypergraph and adjacency matrix

Figure 2. Recommendation framework of interface patterns based onVSM-HC

development experience to find manually, which greatly reduces the efficiency of interfacedevelopment. In order to improve the efficiency of interface development and make thedevelopers get rid of tedious work, we propose the recommendation method of interfacepatterns based on Vector Space Model-Hypergraph Clustering (VSM-HC) in this paper,not only to match patterns with the task, but also to meet the needs of different users.

3.1. Recommendation framework of interface patterns. The recommendation fra-mework of interface patterns is shown in Figure 2.


In Figure 2, after describing the tasks with tools such as CTT, the system respectivelypreprocesses the attribute sets of tasks and patterns, such as segment words, removesthe stop words and extracts the characteristic words; the similarity between tasks andpatterns is calculated according to the vector space model, and the preliminary candidatelist is obtained according to the similarity degree from large to small. This recommen-dation list can solve the user’s cold start problem without his historical data records andpersonal needs. Furthermore, the hypergraphs model among users, tasks and patternsare established based on hypergraph theory according to the users’ history of selectingpatterns for tasks, then the hypergraph is separated by spectral clustering algorithm, andeach hypergraph is clustered by k-means. Finally, the similarity between tasks and pat-terns is calculated using the vector space model, and the list of recommendation is gotwhich can meet the users’ interest according to the similarity.

3.2. Task attribute annotation. In order to recommend the appropriate patterns tothe appropriate task and facilitate the transition of the task model to the abstract userinterface, users need to label each task attribute in the process of task analysis.

The labeling of task attributes needs to consider the characteristics of the pattern toimprove the accuracy of the recommendation. The pattern sets were classified by thescholars such as Jenifer Tidwell, Martijn van Welie and Douglas van Duyne, followed bypattern markup languages, such as PLML, PLMLx, and XPLML, most of which havedescribed patterns from pattern ID, name, alias, illustration, problem, context, forces,and so on [20]. In order to quickly and accurately recommend the appropriate patternsto the users, the description of the tasks is also according to the methods of patternsclassification, and the task will be marked in accordance with the method of labeling. Inthis paper, each task is described as (task ID, name, type, function, context, program,solution).

3.3. The initial recommendation of interface patterns. After data preprocessing,this paper firstly calculates the similarity between patterns and tasks, so as to recommendappropriate patterns to the user.

The attribute set (tq1, tq2, tq3, . . . , tqn) of each task constitutes the query vector Q, andthe pattern set (pj1, pj2, pj3, . . . , pjn) constitutes the document vector Di, the similarity[30,31] of which is defined as follows (see Equation (2)):

sim(Qq, Di) =

n∑j=1

wqj • wij√n∑

j=1

(wqj)2 •√

n∑j=1

(wij)2

(2)

where n is the dimension of the query vector and the document vector, and wij and wqj

are the weights of the items.Here, the weight wij is defined as follows (see Equation (3)):

wij = tfij ∗ idfi =tfij • lg

(Ndfi

+ 0.01)

∑ki∈Dj

[tfij • lg

(Ndfi

+ 0.01)]2 (3)

The term frequency tfij indicates the times of the index entry ki appearing in thedocument Dj. The larger tfij is, the more important the ki is to the Dj. The documentfrequency dfi represents the number of documents that contain the index item ki in the


whole document set, and the higher the dfi is, the greater universality of ki is, the lowerto measure the similarity between documents according to index terms.

3.4. Hypergraph model and weight calculation. Gu et al. [12,34] put hypergraphtheory into the news recommendation process, and the precision of the recommendationhas been greatly improved. This paper is inspired by hypergraph theory, spectral cluster-ing and vector space model, and establishes the hypergraph model of interface patterns,task model and user relationship. The hypergraph theory and vector space model areemployed in the recommended process of interface patterns, and a calculation method ofhyperedge weight is proposed. Interface patterns recommendation mainly involves threeobjects: user, pattern and task. In this paper, u is used to denote the user, p is thepattern, and t is the task.

Definition 3.1. Let V be the set of nodes, U be the set of users, P be the set of patterns,T be the set of tasks, and node set V be the set of nodes of the proposed hypergraphicmodel, denoted by V = U ∪ P ∪ T .

Definition 3.2. The hypergraph model is defined as G = (V, E, w), and w is the weightof the hyperedge. The hyperedge weight is used to express the hyperedge strength of T ,P and U . The larger the value is, the stronger the relationship is. The weights need toconsider the relationships between T and P , U and P . The hyperedge weight is denotedas (see Equation (4)):

w = sim(pj, tk) +|sel(ui, pj, tk)||sel(ui, pj)

(4)

where sim(pj, tk) is the similarity between the pattern and the task, sel(ui, pj, tk) denotesthe times that the user ui selects the pattern pj in describing the task tk and sel(ui, pj)represents the total times that user selects the patterns pj for describing all tasks.

In this way, we can get the adjacency matrix H and the diagonal matrix Dv of thevertex degree and the diagonal matrix De of the super edge.

The hypergraph model among users, tasks, and patterns is shown in Figure 3.As can be seen from Figure 3, the nodes associated with the hyperedge are not confined

to two nodes, for example, e1 associates with 3 nodes and e2 associates with 4 nodes.

Figure 3. A hypergraph model consisting of users, tasks, and pattern


3.5. The algorithm of vector space model-hypergraph clustering. Hypergraphsare also represented by matrices like general graphs, so that the operations of the hyper-graphs become the operations of the general graphs. It is a kind of clustering problem torecommend appropriate patterns for tasks and users. The problem of graphs clusteringis to find an optimal segmentation, which divides an undirected weighted graph into twoor more optimal subgraphs. Therefore, the clustering problem of graphs is to find theoptimal segmentation.

Let X and Y be two subsets of a hypergraph, and the optimal segmentation is tominimize the sum of the weights of the edge to be cut. The edge with the larger weight willnot be cut off, which means that the following objective function needs to be minimized(see Equation (5)):

cut(X,Y ) =∑

i∈X,j∈Y

eij (5)

However, the minimizing cut usually leads to a poor segmentation [34]. In order toobtain a reasonable size for each hypergraph, the objective function is as large as possiblefor A1, A2, . . . , Ak. The improved objective function is (see Equation (6)):

RatioCut(A1, A2, A3, . . . , Ak) =k∑

i=1

cut(Ai, Ai

)vol|Ai|

(6)

where vol(A) =∑i∈A

wij. According to the properties of the Laplace matrix [35], the

following inference can be made (see Equation (7)):

f ′Lf = |V |RatioCut(X, Y ) (7)

where |V | is a constant, which means that the Laplacian matrix L is equivalent to theoptimized objective function RatioCut, and minimizing RatioCut is minimizing f ′Lf .

Based on [12,33-35], we use vector space model and hypergraph clustering hybridmethod (VSM-HC) to make the recommendation in this paper. Firstly we get the initialpatterns recommendation list by vector space model, and then use the clustering algo-rithm to segment and cluster the hypergraphs. Finally, we calculated the nodes similarityof each hypergraph, and formed the final recommendation list according to the similarity.The improved algorithm is described as follows.

Step 1. Using the vector space model given in Section 3.3 to calculate the similaritybetween t and p, and the recommended list is constituted according to the similarity valuefrom large to small.

Step 2. According to the user history behavior data and the task-model similaritymeasure, hypergraph model is constructed using the definition of hypergraph, that isG = (V, E, w), where V = U ∪ T ∪ P , which is the union of all types of nodes, and wdenotes the weight vector of each hyperedge. Each item weight of the feature vectorsformed by the task and the pattern is different, and the calculating of weight is given inEquation (3).

Step 3. The similarity matrix A is constructed according to the hyperedges associationand the weight between the nodes, where the value of the element aij is the weight of thenodes vi and vj through the hyperedges association. If there is no hyperedge between thetwo nodes, the associated weight is 0, where the constraint aij = 0. The calculating ofweight is given in Definition 3.2.

Step 4. The value of each column of the similarity matrix A is added up to get thenumber of N , and put them on the diagonal to form an N ∗ N diagonal matrix D, that

is a degree matrix. The diagonal element value is djj =N∑j

ajj.


Step 5. The results of D − A are denoted by the Laplacian matrix, i.e., L = D − A.Step 6. Normalize the matrix L, i.e., L = D− 1

2 • L • D− 12 = D− 1

2 • (D − A) • D− 12 =

D− 12 •D •D− 1

2 - D− 12 •A •D− 1

2 = E −D− 12 •A •D− 1

2 , so the normalization of L becomesthe normalization of A.

Step 7. Find the first k feature values of L, which are λ1, λ2, . . . , λk, where λi ≥ λj

and i < j, i.e., the feature values are arranged from large to small, and the correspondingfeature vectors v1, v2, v3, . . . , vk are obtained.

Step 8. These k feature vectors are put together to form the matrix of N ∗ k, thepartitioning of each node in the hypergraph is completed, and the elements in the set areclustered by k-means algorithm. The result of clustering completes a classification of Nnodes in the original hypergraph.

Step 9. The vector space model is used to calculate the similarity between ti and pj, that

is,

∑pj∈C sel(u,pj)∑

pi∈C pi∗ sim(ti, pj), where

∑pj∈C sel(u, pj) denotes the times which u selects pj

in hypergraph C, and∑

pi∈C pi denotes the total number of historical patterns selected in

hypergraph C,

∑pj∈C sel(u,pj)∑

pi∈C piindicates that u selects pj for the current ti as the proportion

of all u selection patterns.Step 10. The final pattern recommendation list is obtained from large to small according

to similarity.

4. Case Study. In this paper, an example is given to illustrate patterns recommendationusing VSM-HC method, and the feasibility of Laplacian decomposition and clusteringmethod in patterns recommendation is also verified.

In the field of interface design, a variety of patterns emerge endlessly, and there aredozens of common search patterns in the mobile platform. Figure 4 shows several commonsearch patterns [3,37].

Which pattern to use depends on the user task function, type and platform features.In order to accurately and quickly recommend an appropriate pattern for adapting to thetask model to improve interface development efficiency. The attributes of each subtask inthe process of task modeling are labeled, as shown in Figure 5.

Figure 5 shows several basic properties of “Multi-value input” task, and the descriptionof the task may be described by one or two keywords or a paragraph, where the moreinformation is provided, the higher accuracy of the search will be. Then we use thewords segmentation system of Chinese Academy of Sciences to segment the attributedescription information automatically, afterwards remove the stop words and extract thecharacteristic words; thus the task is expressed as a vector. Likewise, each pattern in thepattern library is also expressed as a vector of character value weights, and similarity iscalculated using cosine similarity, so a similar pattern is recommended for each task.

Taking account of different user preferences, hypergraph weight can be obtained throughDefinition 3.2 according to empirical data of selecting patterns for different users. For ex-ample, u1, u2 and u3 select the appropriate patterns for t1, t2 and t3 to form a hypergraph,which is shown in Figure 6.

There are four hyperedges in the hypergraph, whose hyperedges are e1, e2, e3 and e4

respectively, where e1 = (t1, u1, p1), e2 = (t2, u1, p2), e3 = (t3, u2, p2), e4 = (t3, u3, p3, p4),and the weight of each hyperedge is w = (1.5, 0.8, 1.1, 1.2).

In order to recommend corresponding patterns, we need to divide hypergraph into twocategories and establish corresponding similarity matrix and degree matrix, as shown inFigure 6.


Figure 4. Several common search patterns

Figure 5. The “Search” task model of CTT


Figure 6. The Laplacian matrix of the hypergraph

After normalizing the similarity matrix, the first k largest character values and thecharacter vectors (k = 2) are obtained. The k character vectors are put together to formthe characteristic matrix of N ∗ k. Finally, the k-means clustering algorithm is used toobtain an N -dimensional vector C = (2, 2, 1, 2, 1, 1, 2, 1, 1, 1), and the nodes in Figure6 are divided into two categories: (t1, t2, u1, p1) and (t3, u2, u3, p2, p3, p4), achieving thesegmentation. For example, the recommended pattern for task t1 under current user u1 isp1. If the partitioned hypergraph has several patterns, we need to calculate the similarityaccording to the recommendation algorithm step (9) to form a recommendation list forthe user recommendation.

5. Recommended System Prototype of Interface Patterns. In this paper, basedon the analysis of CTT tasks, VSM-HC method is used to recommend the interfacepatterns matched with the task from the patterns library, which improves the developmentefficiency. In order to further verify the practicability of the method, this paper developsa prototype system of interface design. The interface patterns recommendation systemprototype is shown in Figure 7.

The prototype system consists of three views: The middle is the task modeling area,which is presented in two forms of design view and XML view, among them design viewis presented in a graphical way for users to task modeling and design, and XML view is


Figure 7. Recommendation system prototype of interface patterns

presented in the form of XML tags storing various attribute definitions and relationshipsof sub-tasks; The upper right corner is the currently selected interface pattern profile;The lower right corner is the list of patterns recommended by the system for the task andthe user, when the user selects one of them, it is displayed in the upper right in the formof screenshot, and the user can also double-click to view the interface patterns definitionand details.

The user can drag and drop the selected pattern to the corresponding task in theCTT model, which establishes an association with the pattern. After the task modelis expressed in the form of a pattern, the task model forms a sequence in the form ofpatterns for the next transition from the task model to the abstract interface.

6. Systematic Assessment. This paper will evaluate the effectiveness of the algorithmand the overall performance of the prototype system respectively.

6.1. Evaluation of recommendation effect based on hypergraph theory. Thispaper compares TF*IDF and VSM-HC respectively with the precision and the recall rateas the criterion based on the Martijn van Welie pattern set.

Precision and recall are defined as (see Equations (8) and (9)):

precision =Number of patterns that match with the task

Length of recommendation list(8)

recall =Number of patterns retrieved

The total number of patterns in the pattern library(9)

Results in Figure 8 show that, as the number of recommended patterns increases, thelist of recommended patterns is more closely matched with the task, and the precision isimproved significantly. However, when the number of patterns exceeds 13 in the list, thematching degree between patterns and tasks will gradually decline; therefore, the lengthof the list is recommended to set to 13 or so.

As can be seen from Figure 9, with the number of task attribute tags increasing, thenumber of retrieved patterns increases. When the number of attribute tags reaches 7, the


Figure 8. Comparison of the precision of different recommended methods

Figure 9. Comparison of recall rate of different recommended methods

improvement of recall rate becomes less obvious, so this paper will set the number of taskattributes label to 7. The more detailed the description of the task attributes is, the moreaccurate the proposed patterns will be. The precision and recall rate will increase withthe increase of k, when the hypergraph is divided into a reasonable range, the precisionof recommended system is relatively high.

6.2. System prototype evaluation. To evaluate the system prototype, we mainly eval-uate the usability of the system (interface friendly, learnability, operability), the recom-mendation effect and the efficiency. The evaluation scale of the system has 5 grades [39]:


Very important (0.9), Important (0.75), General (0.6), Unimportant (0.3) and Very in-significant (0.1). The overall performance evaluation scale of the system also has 5 grades:Very satisfying, Satisfying, General and Unsatisfactory and Not at all satisfying.

20 interface developers are selected as test objects. Before test, the weight of eachindex is determined by the scoring of each person. The weight analysis of the systemperformance evaluation comprehensive is shown in Table 1.

Table 1. The weight analysis of system performance evaluation comprehensive

evaluationindex

score significanceindex Very

important(0.9)

Important(0.75)

General(0.6)

Unimportant(0.3)

Veryinsignificant

(0.1)

Interface friendly 1 6 8 5 0Learnability 9 8 2 1 0Operability 12 8 0 0 0

Recommendationeffect

16 4 0 0 0

Efficiency 14 5 1 0 0

Table 2. The system satisfaction score

evaluationindex

score satisfactionindex Very

satisfyingSatisfying Ordinary Unsatisfactory

Not at allsatisfying

Interface friendly 6 10 2 1 1Learnability 7 9 3 1 0Operability 4 8 5 2 1

Recommendationeffect

8 9 3 0 0

Efficiency 7 9 4 1 0

Then let each person use the prototype system proposed in this paper to design a carrental system interface, and evaluate the satisfaction of using the system. The satisfactionevaluation of the situation is shown in Table 2.

According to the fuzzy comprehensive evaluation method [39,40], the comprehensiveevaluation weight and satisfaction membership matrix of the system are established, asshown in Figure 10.

Weight evaluation vector W = W s • R′weight = (0.9, 0.7, 0.6, 0.3, 0.1) • R′ = (0.57, 0.76,

0.82, 0.86, 0.835), the unitized weight matrix W = (0.1482, 0.1977, 0.2133, 0.2237, 0.2172).The membership score B = W •R′

satisfaction = (1.2373, 1.7178, 0.6720, 0.1903, 0.0695), andthe unitized membership degree B is (0.3183, 0.4420, 0.1729, 0.0489, 0.0179), and finallythe comprehensive score is 2.0061. It can be seen that the overall evaluation of the systemby the user is “Satisfying”.

7. Conclusion and the Future Work. In order to improve the efficiency of user inter-face development, a recommendation method and a development framework of interfacepatterns based on VSM-HC model are proposed. The hypergraph is used to describe the


Figure 10. Weight and satisfaction membership matrix

user-pattern-task relationship, the hypergraph is segmented by spectral clustering, andthe vector space model is used to calculate the similarity between the tasks and the pat-terns in the same hypergraph, so as to recommend satisfied patterns to users and tasks,and improve the efficiency of interface development.

In the future, we will collect more interface patterns to enrich interface pattern library,perfect the recommendation system, formalize the task model, and thereby speed up thetransition from the task model to the abstract interface and specific interface model, toimprove the degree of automation in the interface development process.

Acknowledgment. This research is funded by the National Natural Science Foundationof China (No. 61272286), and Joint Funded Projects of the Special Scientific ResearchFund for Doctoral Program of Higher Education (No. 20126101110006), and Science Re-search Foundation of Northwest University (No. 15NW31), and Industrial Science andTechnology Research Project of Shaanxi Province (No. 2016GY-123).

REFERENCES

[1] A. Seffah, Patterns of HCI Design and HCI Design of Patterns, Springer International Publishing,2015.

[2] S. Ahmed and G. Ashraf, Model-based user interface engineering with design patterns, Journal ofSystems & Software, vol.80, no.8, pp.1408-1422, 2007.

[3] T. Neil, Mobile Design Pattern Gallery, O’Reilly Media Incorporation, 2012.[4] J. Engel, C. Herdin and C. Maertin, Exploiting HCI pattern collections for user interface generation,

Proc. of Patterns 2012, Nice, France, pp.36-44, 2012.[5] J. Janeiro and S. D. J. Barbosa, Enhancing user interface design patterns with design rationale

structures, International Conference on Design of Communication, Bloomington, IN, USA, pp.9-16,2009.

[6] C. Kruschitz and M. Hitz, Analyzing the HCI design pattern variety, Proc. of the 1st Asian Confer-ence on Pattern Languages of Programs, 2010.

[7] F. Moussa and M. Riahi, Use of formalized guidelines for semi-automated generation of GUI: TheErgo-conceptor tool, Tools for Working with Guidelines, Springer, London, pp.237-246, 2001.

[8] Y. Pan, F. He and H. Yu, A socialized recommendation algorithm based on implicit similarity oftrust relation, Chinese Journal of Computers, 2016.

[9] M. Wang, Research on Socialized Recommendation Algorithm Based on Weighted Trust Relationshipand User Similarity, Shandong University, 2015.

[10] J. Wang, Theoretical Basis of Hypergraph, Higher Education Press, 2006.[11] J. Lin, Research on Personalized Recommendation Technology Based on Complete Ternary Graph

Model, Shanghai University, 2015.[12] W. Gu, Research on News Recommendation Based on Hypergraph Model, South China University of

Technology, 2015.


[13] I. Bloch, A. Bretto and A. Leborgne, Similarity between Hypergraphs Based on Mathematical Mor-phology, Mathematical Morphology and Its Applications to Signal and Image Processing, SpringerBerlin Heidelberg, pp.1-12, 2013.

[14] X. Xu and R. Huang, Hypergraph theory and its application, Journal of Electronics, no.8, pp.65-72,1994.

[15] Q. Liu, Research on User Interface Generation Technology Based on Interface Pattern, NorthwestUniversity, 2014.

[16] J. Harland, J. O. Blech and I. Peake, Formal behavioural models to facilitate distributed developmentand commissioning in industrial automation, Special Session on Collaborative Aspects of FormalMethods, pp.363-369, 2016.

[17] S. Wendler, D. Ammon and T. Kikova, Theoretical and practical implications of user interfacepatterns applied for the development of graphical user interfaces, International Journal on Advancesin Software, no.6, pp.25-44, 2013.

[18] J. Engel, C. Martin and C. Herdin, Formal pattern specifications to facilitate semi-automated userinterface generation, International Conference on Human-Computer Interaction: Human-CentredDesign Approaches, Methods, Tools, and Environments, pp.300-309, 2013.

[19] J. Engel and C. Martin, PaMGIS: A framework for pattern-based modeling and generation of inter-active systems, International Conference on Human-Computer Interaction New Trends, San Diego,CA, USA, no.7, pp.826-835, 2009.

[20] Q. Gon and J. Cheng, Shortest path algorithm for hypergraph, Journal of Chongqing University:Natural Science Edition, vol.28, no.11, pp.106-109, 2005.

[21] I. Bloch and A. Bretto, Mathematical morphology on hypergraphs: Preliminary definitions andresults, IAPR International Conference on Discrete Geometry for Computer Imagery, Springer-Verlag, pp.429-440, 2011.

[22] P. Kapec, Visual programming environment based on hypergraph representations, InternationalConference on Computer Vision and Graphics, Springer-Verlag, pp.9-16, 2010.

[23] R. Zass and A. Shashua, Probabilistic graph and hypergraph matching, Computer Vision and PatternRecognition, pp.1-8, 2008.

[24] A. Dearden and J. Finlay, Pattern languages in HCI: A critical review, Human-Computer Interaction,no.1, pp.49-102, 2006.

[25] C. Phanouriou, UIML: A device-independent user interface markup language, Dissertation AbstractsInternational, 2000.

[26] Y. Zhang, L. Wang and H. Cao, A recommendation algorithm based on user-interest-project tripar-tite graph, Pattern Recognition and Artificial Intelligence, vol.28, no.10, pp.913-921, 2015.

[27] B. Yang and P. Zhao, A survey of recommendation algorithms, Journal of Shanxi University, vol.34,no.3, pp.337-350, 2011.

[28] H. Rong, S. Huo and C. Hu, Collaborative filtering recommendation algorithm based on user simi-larity, Journal of Communications, no.2, pp.16-24, 2014.

[29] S. Liu, Research and Application of Key Issues in Recommendation-Oriented Systems, University ofScience and Technology of China, 2014.

[30] Y. Li, B. Wang and J. Li, Summarization of search engine recommendation technology, ChineseJournal of Information, vol.24, no.6, pp.75-84, 2010.

[31] W. Cao, Research and Implementation of Chinese Information Retrieval System Based on StructuredVector Space Model, Beijing Industry University, 2008.

[32] S. Henninger and P. Ashokkumar, Disseminating usability design knowledge through ontology-basedpattern languages, The 3rd International Semantic Web User Interaction Workshop (SWUI), Uni-versity of Nebraska-Lincoln, 2006.

[33] W. Jia and Q. Hua, User interface pattern language based on category theory, Journal of Computer-Aided Design & Computer Graphics, vol.29, no.6, 2017.

[34] L. Zhou, X. Ping and S. Xu, Clustering integration algorithm based on spectral clustering, ActaAutomatica Sinica, vol.38, no.8, pp.1335-1342, 2012.

[35] H. Wang and J. Chen, Research on spectral clustering method based on graph partition, ComputerEngineering and Design, vol.32, no.1, pp.289-292, 2011.

[36] C. Wu and C. Zhu, A method of social relationship data processing based on spectral clustering,Electronic Design Engineering, vol.24, no.20, pp.20-23, 2016.

[37] M. van Welie, http://www.welie.com/patterns/index.php.[38] Z. Huang, J. Zhang and B. Zhang, A survey of semantic recommendation algorithm, Journal of

Electronics, vol.44, no.9, pp.2262-2275, 2016.


[39] H. Fang and H. Fang, Fuzzy evaluation model and application of educational software usability forteachers, Computer Engineering and Applications, vol.44, no.29, pp.245-248, 2008.

[40] D. Xiong and X. Xian, Improvement of fuzzy comprehensive evaluation method, Journal ofChongqing University (Natural Science Edition), vol.26, no.6, pp.93-95, 2003.

[41] W. Gu, S. Dong and Z. Zeng, HCKP: An effective hybrid classfication for Chinese news, Journal ofInformation and Computational Science, vol.11, no.9, pp.3117-3123, 2014.

[42] W. Gu, S. Dong, Z. Zeng and J. He, An effective news recommendation method for microblog user,The Scientific World Journal, vol.2014, no.5, 2014.

[43] Z. Huang, J. Zhang and B. Zhang, Survey of semantics-based recommendation algorithms, The 4thInternational Joint Conference on Computational Sciences and Optimization, 2016.

[44] E. Nilsson, Design patterns for user interface for mobile applications, Advances in Engineering Soft-ware, vol.40, no.12, pp.307-312, 2008.

Documents

A HYBRID RECOMMENDATION METHOD AND DEVELOPMENT … · hypergraph theory. Afterwards, according to task analysis, we tag the task attributes, and use hypergraph theory to construct