All patterns follow almost the same structure regardless of the domain in which they are being applied. They are documented in natural language and also illustrated via diagrams. While architectural patterns utilize an uncomplicated outline for visualization purpose, SE patterns make use of UML diagrams to illustrate design patterns in this field [2]. However, HCI design patterns still suffer from uncertainty about visualization issues [2]. There is still no widely agreed structure referred to as a diagram for this type of patterns. While the usage of UI Model fragments is referenced in Lucca, Fasolino and Tramontana [1] to provide an effective definition for HCI design patterns, this method is not descriptive enough to be used for visualization purposes and is more helpful in the detection process. Another approach, which can be considered as valuable in this context, is the work done by Beale and Bordbar.

Based on the success acquired in modelling the concept of Quality of Service (QoS) via UML diagrams [3], they used the UML/OCL model to visualize HCI design patterns which is close to the class diagrams of SE design patterns. Using this approach offers a great contribution in applying SE detection methods in the process of HCI design pattern detection. Up to the present time, a great deal of research has been done into detecting design patterns. Most of it has been done in the field of SE. However, there are also some, but few, references about detection of HCI design patterns. Design patterns can be detected automatically or semi-automatically [1].

As another categorization, Shi and Olsson [4] divided design patterns detection approaches nicely into static and dynamic analysis approaches, which address Structural and Behavioural aspects respectively. Among the approaches devised for detection of patterns in SE field, Dong, Sun and Zhao [5] and Shi and Olsson [4] considered only static analysis for detection of design patterns through the Matrix Matching method and reorganization of GoF patterns and Heuzeroth, Holl, Hogstrom and Lowe [6] investigated automatic detection of design pattern through the usage of both static and dynamic analyses. Based on the knowledge gained, the only reference about design pattern detection approaches in the HCI domain is what has been done by Lucca, Fasolino and Tramontana [1] in detection of web design patterns. The basis of this approach is on the detection of characteristic features of a pattern used in the development of a Web Application.

Although this approach is effective for detection of web design patterns, it considers only the characteristic features of a pattern, and the relationships between the elements are not investigated in this approach. It can be noticed that the focus of reviewed approaches is either on detection or visualization of design patterns. Furthermore, the quality as well as quantity of the research done in the field of SE regarding design patterns detection is incomparable with what has been accomplished in HCI field which is due to the lack of diagrams in the structure of HCI design patterns. Accordingly, HCI design patterns should be visualized to make the application of SE pattern detection approaches possible in this field. For this purpose, this research considers both detection and visualization of web design patterns, and this is explained in the next section.