The devised conceptual diagram is the basis for development of the IDPDetect system. The IDPDetect system is a desktop application that is implemented through Java language. In accomplishing its services, IDPDetect makes use of two external packages: Jericho HTML Parser, which is used for the detection approach; and JGraph, which is used for the visualization approach. IDPDetect provides web design pattern detection and visualization services for three web design patterns implemented via hyper links, which are to-the-top link pattern, paging pattern and breadcrumbs pattern. The pattern detection service provides information about the web design patterns followed in development of a web page and also comments about the methods used for their implementation. This service helps users to know more about the design of a webpage’s user interface. The visualization service improves users’ understanding about web design patterns through representing the web design patterns with diagrams.
Users can make a request for detection of the any aforementioned web design patterns in a web page, which they identify its address. They can also access to an online library of HCI design patterns through this system. The online library being accessed through the system is the Welie web site [8], which provides a list of HCI design pattern groups based on user needs, application needs and context of design. Moreover, based on selection of each web design pattern for detection, brief information is displayed by the IDPDetect system.
When a user requests detection of the web design patterns, IDPDetect gets the identified web page address, parses its contents using the services provided by Jericho HTML Parser package to find the relevant elements of a web design pattern, analyzes those elements and defines the candidate web design patterns based on the found elements. At the next step, it checks the relationships between those elements to confirm candidate patterns as detected ones. Furthermore, it generates a list of feedback about the implementation of detected web design patterns. After the completion of detection process, detected web design patterns are reported by the system. For each detected web design pattern, the system displays two options of “Diagram” and “Feedback”, which can be selected by the user. By selecting the “Feedback” option, a list of generated feedbacks through the detection process of that pattern will be shown to the user in a new window. The “Diagram” option is the visualization service provided by the system.
By selecting this option, the system gets the information of the detected pattern and based on the consisting elements of that pattern and the relationships between them, generates the UML class diagram of that pattern using the services provided by the JGraph package. Generated diagram and feedback of a detected paging design pattern by the IDPDetect system is illustrated. After development of the IDPDetect system, an evaluation was conducted in order to assure that the identified objectives and requirements of the system were thoroughly fulfilled through its development. This evaluation is explained in the next section.
