Methods for Complex Web Hypermedia Application: The Design Processes

Transcription

1 Methods for Complex Web Hypermedia Application: The Design Processes Ahmad Syafiq Ahmad Appandi, Azrul Hazri Jantan Faculty of Computer Science & Information Technology UPM, Serdang, Selangor. ABSTRACT Web Hypermedia Applications (WHA) has transformed from a simple static information webpage into a more complex web application that need to undergo more complex processes, design and transactional workflows. In this paper, we present and discuss several design processes that exist for designing a complex WHA. We will briefly describe the overview of design processes in the selected WHA design methods - OOHDM, WSDM, UWE, and Com + HDM. We also discuss the benefits and also some design issues related to complex WHA design processes including Navigation Design Pattern. Some arguments and future refinements will be summarized at the end of the paper. Keywords Web Hypermedia Application, Design method, Design process, and Web Application 1.0 INTRODUCTION Web Hypermedia Application (WHA) design and development is a complex task that involves a variety of activities, access and presentation levels. Nowadays, WHA have become the best approaches to provide information to web users. The process of designing and developing these applications, have raises a number of design issues on hypermedia modeling activities [1]. To overcome these issues, several hypermedia design methods with different design features and modeling concepts have been proposed. Some of their limitations have been discussed in previous works [1,4]. The different aspects and techniques of every design processes are discuss in this paper. Section 2 will present the general analysis about WHA design processes that will cover OOHDM, WSDM, UWE, and Com + HDM. Then in Section 3, we will discuss some design issues related to complex WHA design process. Finally we summarize and provide our future works in the end of the paper. 2.0 WHA DESIGN PROCESSES In the past few years, several design methods for designing Web Hypermedia Application (WHA) have been proposed, such as OOHDM [5], WSDM [6,7], UWE [8,9], Com + HDM [3], RMM [11] OO-H [12] and W2000 [13]. Ongoing research have found that most of the design methods that being used for WHA development are model driven and consist of a number of design processes [1]. The effort of these design processes are normally being done in incremental approach. For each design process, a model is developed to present the result for the design effort. Generally, all WHA design methods have the following analysis and design processes [1]: User Requirement Analysis: gather and analyze the information needs from the users. Results are normally presented in Use-case diagrams. Conceptual (contents) Design: also known as content modeling which deals with the contents of the application that will be presented to the users. Results are modeled as Conceptual model (e.g. class diagrams). 138

2 Navigation Space Design: determine and identify path or links for every item (e.g. classes) in the Conceptual model where applicable. Designer may choose appropriate access elements (e.g. guided tours, index, etc.) as the navigation mechanisms in the Navigation model produced. User Interface (presentation) Design: defining the appearance of the designed application as it will be seen by the users (for each navigation page). In the next sections, four design methods of WHA - OOHDM, WSDM, UWE, and Com + HDM will be described in more details. Each will be discussed accordingly to the main processes in WHA design. 2.1 Object-Oriented Hypermedia Design Methodology (OOHDM) Object Oriented Hypermedia Design Method (OOHDM) is a method for designing Web Hypermedia Application (WHA). The development of WHA consists of four different design processes. Figure.1 shows the OOHDM design method. OOHDM DESIGN STAGES: Conceptual Design - Class Diagrams - Aggregations - Class Representation Navigational Design - Navigational Class schema - Navigational Context schema Abstract Interface Design - A Static Layout - Behavioral Component Implementation Figure.1: Overview of the OOHDM design method OOHDM design method can be divided into four main stages which are performed in iterative and incremental design process. The first process is Conceptual Design. In this stage of conceptual design, a conceptual schema is built that represents objects, relationships and collaborations existing in the target domain. To create a class diagram, class representations, aggregations and other information, Unified Modeling Language (UML) is used. Next is Navigational Design. In OOHDM, the navigational design is build over the view of conceptual design. It uses a predefined set of navigation classes like nodes, links, anchors and structures. Navigation design is expressed in two schemas, the Navigational Class schema and the Navigational Context schema. Objects that are derived from classes defined in conceptual design are called navigational objects. A series of navigational classes or nodes are defined to encapsulate these objects. Navigational design must take into account the way in which the user explores the hypermedia space. The third process is Abstract Interface Design process. Abstract Interface Design specifies the interface objects. To represent the relationship between interface and navigation objects, a formal model of interface objects called Abstract Data View is used. The Abstract Data View will define two things which are a static layout and the behavioral component. The last process is Implementation. Any application-specific model, like OOHDM design, must be eventually implemented using an implementation technology. This activity represents a design interaction that is specific to the environment in which WHA will operate. 139

3 2.2 Web Site Design Method (WSDM) The Web Site Design Method or WSDM [6,7], is a user-centered approach that defines the information objects of a web application based on user requirements. WSDM is not a data driven approach but it gives consideration to the fact that all webbased applications have different types of users who may have a lot of different information requirements. It comprises of three main phases, namely user modeling, conceptual design, and implementation design. Figure.2 shows the WSDM design method. User modeling Conceptual design User classification User class description Object modeling Navigational design Implementation design Implementation Figure.2: Overview of the WSDM design method User requirements are being defined and gathered in the user modeling phase. The idea is to identify the potential users of the website according to their interests and navigation preferences. This effort is done in two sub-phases called user classification and user class description. The first will identify and differentiate a number of user classes, depends on their information requirements, while the second one will describe the perspectives or different characteristics for each of user class. For example, users from same class will have the same information requirements but they might view them in a different way of presentation. Class and object modeling are done in conceptual or contents design phase. The main objective is to develop User Object Models (UOM) that presents both information requirements and perspectives according to each user class identified. WSDM has its own notation for designing navigation of the website, called components and links. The navigation model comprises of a number of navigation tracks, each for describing the information requirements or perspectives that will be navigated by users. Generally there are three layers in navigation model, namely context layer for connecting different navigation racks, navigation layer for providing different ways to access information, and information layer that provides the actual information. Finally, implementation design phase is to create and design the presentation or user interface layout including the look and feel of the web-based applications. 2.3 UML-Based Web Engineering Design Method (UWE) UWE is based on the Unified Software Development Process and uses UML notation. UML-based Web Engineering Method (UWE) [8,9], is an iterative design method that provides guidelines for the systematic design processes which supports personalization and semi automatic generation of web applications. Models or diagrams developed in UWE are based on exclusively Unified Modeling Language (UML), its notations. The processes have generally divided into four main phases, called requirement analysis, conceptual design, navigational design, and presentational design. UWE starts with requirement analysis that is to provide and classify the potential users and identify the functional requirement of each user. The concepts of object oriented modeling are mandatory in conceptual 140

4 design. Objects and classes that are relevant to the WHA are determined. Class diagrams is developed to represent the objects and identify the domain semantics including the name of classes, attributes, operations, associations, and relationships. Figure.3 shows the UWE design method. <<trace>> Use case model <<trace>> <<trace>> Conceptual Navigation model <<trace>> model <<trace>> Presentation model Figure.3: Overview of the UWE design method In navigation design, every class that is defined will be used as navigation guidance to derive nodes of the application structures. There are two objectives in navigation design, first, to show which classes of the conceptual model can be visited by users as navigational nodes and secondly, to describe how those navigational nodes are visited using access elements. To achieve the first objective, navigation space model is built. This model is a sub-graph of the conceptual model where classes that are not related or appropriate for the navigation will be eliminated. Navigation structure model is then developed to show how classes are being visited through access elements such as indexes, guided tours, query, and menu. The idea of presentation design is to provide abstract user interfaces, both in static and dynamic that show how the navigational structures are presented to the users. A static presentational model is developed to define how navigational nodes are presented to the users using UML composite objects. And, a dynamic presentational model defines the action or behavior of the presentational objects, i.e. the changes on the user interface when user interacts with the application. REQUIREMENT ANALYSIS 2.4 Comprehensive Hypermedia Design Method for Complex Processes Modeling (Com + HDM) Com + HDM are an object-oriented modeling method based on Unified Modeling Language (UML) profile [10]. The novelty of Com + HDM modeling method would lay on its modeling concepts, specific modeling elements (stereotypes), and the patterns of design approach that simplify the workflow of the design processes. Figure.4 shows the Com + HDM design method. Use Case Models and Requirement Specification DESIGN STAGES: Classes and Objects Navigational Nodes Web Page Layout Conceptual Design Navigational Design User Interface Design Complex Processes Modeling Navigation Paths (Access Structures Interactions) User Interface Elements Figure.4: Overview of the Com + HDM design method Com + HDM design method can be divided into four main stages which are performed in iterative and incremental design process. The strength of Com + HDM is the uses of UML modeling paradigm to define information, navigation, and user interface objects in the modeling activities. The results of these modeling activities are represented as models using UML notations. Each model constructed consists of UML standard modeling elements or specific modeling elements, called stereotype which are defined according to the UML extension mechanisms [10]. 141

5 The stereotypes are used to indicate the descriptive and restrictive properties that the modeling elements have in comparison to standard UML elements. Each stereotype is represented by its unique icon or notation. 3.0 DISCUSSIONS All the design methods discussed in Section 2 have similarities in design phases that help the development of Web Hypermedia Application (WHA). These phases concern the design processes and workflows that apply to every design methods. Despite this, it is in fact incomplete and unsuitable for use in designing a complex WHA. The main issue of designing a complex WHA can be found in the Navigation design process. It is the effectiveness of the navigation strategy in supporting the design processes and workflow of a complex WHA. A website becomes a WHA if it contains more than five navigation elements that may include combinations of Top Horizontal Bar Navigation, Sidebar Navigation, Tabs Navigation, Search Navigation, Footer Navigation, and variety of other navigation elements. A measure of effectiveness of a WHA design is how fast useful results can be retrieved from a web page built on that design, and complex WHA designs can affect this measurement. Complex navigation strategy will make it difficult for end user to understand the navigation flow of the WHA. Therefore, a further close-up study of WHA on Navigation Strategy is needed to develop a deeper understanding in this issue. While Navigation is only one aspect of a WHA architecture, it is also the most visible of all aspects to the end user. During development of a navigation strategy for a website, we should consider some of the most common and tested design elements. Most of these design elements have become the norm or trend for most website designer. To provide more insight into navigation best practices, we're going to discuss and analyze the following elements: Navigation Bars (Amazon.com) Search Boxes (Yahoo.com) Pagination (Google.com) Set-based Navigation (Google.com) 3.1 Navigation Bars Navigation bars are the most prevalent form of navigation. These are usually found on the top, left-hand side, or bottom of the page. Users will expect some of the navigation bars to stay constant throughout the page, usually at the top or bottom. Figure.5 shows that Amazon.com uses horizontal navigation bars to displays the menu while Figure.6 shows vertical navigation bars in Amazon.com. Figure.5: Amazon.com Horizontal Navigation Bars menu Figure.6: Amazon.com Vertical Navigation Bars menu 142

6 3.2 Search Boxes One useful feature for all website users is a search element. This element should be able to search through all of the accessible content. The results should be restricted, so that any content the user doesn't have privileges for is suppressed. The search box should stand out from the rest of the site, so users can easily find it. Figure.7 shows search boxes in Yahoo website. Figure.7: Yahoo.com search box 3.3 Pagination Pagination is used for performance purpose to organize the search results in a simpler and more organized way. It enables users to navigate results using controls such as page number or next, previous, first, and last. Figure.8 shows an example of Google website that uses pagination to display the search results. Figure.8: Google search result 3.4 Set-based Navigation Set-based navigation organizes the information in sets of related information items. It shows attributes and anchors in a node. Users can navigate a set a collection in different ways according to the task or scope provided. With number of sets provided, readers can traverse to get the most relevant information. Figure.9 shows that Google uses set-based navigation in managing massive information search. Figure.9: Set-based navigation on Google search engine Data gathering or a survey should be done to determine the most effective navigation design that can improve the response time and performance of a complex WHA. A suitable selection of Navigation Design pattern will improve the user adaptability to using a complex WHA that may have a variety of Navigation Design elements. A good Navigation strategy will also make sure that the flow of information shown in the website panel is smooth, despite the complex navigation design. 4.0 CONCLUSION AND FUTURE WORK This paper has discussed, at a glance, the Web Hypermedia Application (WHA) design methods that consist of five design processes which are User Modeling or Requirement analysis, Conceptual design, Navigation design, User Interface design and Implementation. All the design methods discussed - OOHDM, WSDM, UWE and Com + HDM has all this five design processes. All the design methods mentioned are suitable for developing a WHA. However, we believe that there are rooms for improvements, especially in Navigational design in order to support a complex WHA. We are currently doing a further study on web Navigation design patterns and elements that could overcome the issues in the Navigation design processes of all the design methods. Our future work will focus on these patterns and Navigation design elements for a more complex WHA. 143

7 5.0 REFERENCES [1] P. Barna, F. Frasincar, G.J Houben, R. Vdovjak, Methodologies for Web Information System Design", Proceedings Information Technologt: Coding and Computing [Computers and Communications] pp , [2] A.H. Jantan, P. Sumari, and S. Sulaiman, Design Processes for Web-based Hypermedia Engineering, 3 rd,malaysian Software Engineering Conference '07, Dec 34, 2OO7, Selangor, Malaysia. pp , 2007 [3] A.H. Jantan, P. Sumari, and S. Sulaiman, Com + HDM: Extending UML Profiles for Modeling Complex Web Hypermedia Applications, 2008 International Conference on Advanced Computer Theory and Engineering. pp , [4] A.H. Jantan, P. Sumari, and S. Sulaiman, Design Processes for Web-based Hypermedia Engineering The 3rd Malaysian Software Engineering Conference, Selangor, pp , Dec [10] G. Booch, I. Jacobson, and J. Rumbaugh, The Unified Modeling Language User Guide, The Addison-Wesley Object Technology Series, [11] T. Isakowitz, A.S Edwmd, p. Balasubramaniam, "RMM: A Methodology for Structured Hypermedia Design", Communications of the ACM, Vol. 38 Issue 8 pp , l995. [12] J. Gomez and C. Cachero, "OO-H Method: extending UML to model web interfaces", Information modeling for internet applications, pp , [13] L. Baresi, F. Garzotto, and P. Paolini, "Extending UML for Modeling Web Applications", Proceedings of the 34th Hawaii International Conference on System Sciences, [5] D. Schwabe and G. Rossi, "Developing Hypermedia Application using OOHDM", Proceedings of Workshop on Hypermedia Developnent Process, Methods, and Model, l998. [6] De Troyer, "Audience Driven Web Design", In Information modelling in the new millennium, Eds. Matt Rossi & Keng Siau, Publ., IDEA GroupPublishing, [7] De Troyer and C.J Leune, "WSDM: A user centered design method for web sites", Computer Networks and ISDN System, Proceedings of the 7th international WWW conference, Elsevier pp , 1998 [8] N. Koch, A. Kraus, and R. Hennicker, "The Authoring process of the UML-based Web Engineering Approach", In Daniel Schwabe, lst International Workshop on Web-oriented Sortware Technology (IWWOST01), online publication, June [9] N. Koch and A. Kraus, "The Expressive power of UML based Web Engineering", ld Intemational Workshop on Weboriented Software Technologt (IWWOSTL2), D. Schwabe. O. Pastor, G. Rossi, and L. Olsina, editors, CYTED, pp , June