The design of a user interface can be evaluated for its conformity with HCI design patterns in order to guarantee its usability and quality. Many efforts have been made in the domain of Software Engineering (SE) to detect design patterns in the process of reverse engineering.
However, this topic is still new in the field of Human Computer Interaction (HCI). Although many design patterns have been created in the field of HCI and organized into various categories, the matter of detecting these Human-Computer Interaction (HCI) design patterns in a designed interface is still novel. In order that designers contribute to creation of more usable interfaces that are based on design patterns with standardized structures, there is a requirement for techniques to recognize whether designed interfaces have conformity with HCI design patterns.
On the other hand, these techniques require HCI design patterns with a formalized structure to be more effective. Thus, the other problem in this context is that these patterns are mostly textual, which makes them semi-formal according to the lack of diagram in their structure.
For this purpose, HCI design patterns should become formalized in order to make application of detection approaches possible and provide better understanding of the design issues they address. This formality can be gained through the visualization of HCI design patterns. This research investigates detection and visualization of web design patterns as a subcategory of HCI design patterns. Web design patterns deal with interaction problems of web application users.
The focus of this research is on providing an approach to detect the occurrence of the instances of web design patterns implemented via hyperlinks in a web page and visualizing the detected web design patterns using UML class diagrams. The detection is done through the recognition of structural features of a design pattern via static analysis of the web page code.
