Designing Navigation for Web Interfaces

3 downloads 31024 Views 225KB Size Report
ing, low budget for projects [8]. Design of web user interfaces ... Designing Client-server activity; which parts of the interface are ... dedicated to these aspects.
Designing Navigation for Web Interfaces Marco Winckler, Christelle Farenc, Philippe Palanque & Rémi Bastide LIHS – Université Toulouse 1 Place Anatole France, 31042 Toulouse, France {winckler, farenc, palanque, bastide}@univ-tlse1.fr ABSTRACT

This paper describes design aspects interactive applications for the Web. In this short paper, the emphasis is put upon navigation while other aspects such as stru cture and visual presentation are dealt with in a marginal way. We propose an extension of the Statecharts formalism, called StateWebCharts that supports, in an in tegrated way, these three critical aspects usually dealt with in a separated and thus potentially inconsistent manner. We discuss common problems with Web design and how they can be solved using StateWebCharts. We also describe how the modeling using StateWebCharts could be useful to improve the user interface design. KEYWORDS: user interface design, Web applications,

Web interfaces, Statecharts, navigation design. INTRODUCTION

Web user interfaces are quite different from traditional Wimp user interfaces. In some aspects they look similar to traditional hypertext and hypermedia systems but the Web environment impose special restrictions. For example, it is possible for user to follow different paths in the application with respect to the ones initially designed. Indeed, as URLs provide direct access to pages, they allow users skipping pages. Besides, the use of a browser is mandatory and they provide additional functions interfering with the design of the structure of the web application such as, for instance, Next and Previous navigation buttons. Other differences are related to dynamic aspects affecting the conception and maintenance of the Web interfaces, such as: fast content and technological updating, low budget for projects [8]. Design of web user interfaces includes design for structure, navigation and visual appearance: • Structural design organizes classes and instances of objects including placement, storage and content; • Navigation design (called dialog in Wimp interfaces) represents logical relationships between objects and, according to the context, enables or disables objects; • Visual appearance design (commonly called look and feel) determines which objects will be presented and how to present them. As user activity over the web consists mainly in browsing, navigation is one the most important aspects for de-

sign. However, most tools currently available and their associated methods deal in a very superficial way with navigation. They mainly propose solutions for sorting out broken links and speed connection problems. Representation techniques for navigation associated with these tools only represent part of the information. For instance FrontPage [12] only offer tree-like representation for navigation, which usually follows a graph-like structure. Besides, existing specific methods [7, 9] for the web are too complex and do not deal with all the aspects of Web application design. Our approach is to provide a visual description technique both easy-to-apply for web designers and formal enough to provide automatic verification thus supporting designer’s activity throughout the design process. Our aim is to cope with all the aspects of web application. However this paper deals more precisely with the navigation model. To deal with this model we have extended Statecharts [3] in the StateWebCharts notation to include Web requirements for navigation design. To extend Statecharts lies down on several considerations that were at the basis of this work: • It provides an easy integration with UML [5] set of notations which is widely used by software engineers for building non interactive software systems • As the use of Statecharts is widespread, it will improve the dissemination of the extended notation • Statecharts allows for representing event-based concurrent behavior, which is precisely what is required for a modeling navigation. This paper is organized as follow: second section presents some requirements for the design of Web application; third section describes throughout examples the StateWebCharts notation. In section 4 we discuss our modeling approach and the state-of-art of user interface design for Web application. Lastly section 5, presents problems still to be solved by this ongoing work. REQUIREMENTS FOR WEB DESIGN

We consider the following requirements as the most important for modeling Web applications: •

Modeling dialog control; that means, who is dispatching events over the interface (user or system);



• •

Borderline for design; distinguish clearly the frontiers for Web design, that means, which parts of the application belongs to the designer and which ones does not (such as external links); Designing Client-server activity; which parts of the interface are processed on the client side and which ones are processed on the server side; Taking in account direct access; support design taking into account that individual parts of the interface can be reached directly by users (without following a predefined path).

In addition, the modeling technique must be independent from current technology and must be able to represent all the navigation structures currently available in web applications. Indeed specific capabilities embedded in browser such as history, bookmark and buttons are not to be modeled here. However, in previous work [13] we have already proposed a formal description technique dedicated to these aspects. STATEWEBCHARTS BY EXAMPLES

In this section we present several examples explaining StateWebCharts notation. We choose to model current Web site as study case but we have remove several functionalities in order to highlight the concepts we are interested in. Basics about StateWebCharts notation

Similar to Statecharts [3], StateWebCharts are composed of states and events. Each individual Web page is considered a container for objects and each container is associated to a state. Links and interactive objects causing transition are represented by events. At this time we are interested in model only navigation between states, so we do not care about the objects’ specific behaviors inside of containers. State’s id is always placed on up-left corner while the container’s id is place in the body. Events are usually indicated by an id and meaning name. An arrow starting by a black circle (called, open event) marks the initial page. Although, all pages could be start point for users, designers should indicate the default page for the interface (see the following figures 1 and 2). StateWebCharts employs XOR- and AND-states, as defined in Statecharts [3], to create concurrency and hierarchy of states. But in StateWebCharts, concurrency also expresses concurrent visualization. The semantic for a state is: when it is not the current it is hide from users and when it set to current its container is visible for users in a display area. (See figure 3 for details).

Modeling dialog control

Modeling dialog control means identify who (system or user) causes events over the interface. We represent system events with dashed arrows while continuous lines represent user events. System events are automatically dispatched by the system without user intervention. Figure 1 exemplifies user and system events.

Figure 1: User and System events.

The most typical example of system event is timed transitions used to redirect Web pages. In the figure 1, users start at the state S1, which contains two associated transitions: e2 and e3. The event e2 is a system event that will enable the transition to S2 state five seconds [5s] after users have been entered in S1. Users can also cause a transition by selecting a link associated to user event e3. Borderline for design

Web interfaces are frequently interrelated making a complex network. It is important to distinguish the limits for the current design and its relations with other sites. Figure 2 presents a simplified model for some links from W3 web site (http://www.w3.org/).

Figure 2: Borderline for W3 web site.

At this example, S2, S3 and S4 have a special clouded form. It means that such states are external to current design but accessible from the application. Even though designers cannot change the design of external states, they should manage those references in their application. For exa mple, designers should verify if links are working or if they are still relevant for the application. In the example above, W3 interface is no longer available when users chose external links. We explore the concurrent aspect of StateWebCharts to express visual cur-

rency. Figure 1 presents The Cave of Lascaux web site (http://www.culture.fr/culture/arcnat/lascaux/en/) that includes such feature.

conditions that are evaluated by the transient state and automatically validated for the next state. Typically, transient states are states stored in the server side do not having a visual representation. Still in the figure 4, the state S4 represents an automatic state, which symbol is a state with dashed lines. Automatic states express that the container, which it is associated, owns some links that are automatically generated by the system and could not be reached at the design time. It is a common functionality resulting from a database query. However, other links in automatic states are defined still at the design, so they are normally include, as exemplified by the event e6 Search: new.

Figure 3: Partial modeling of the site The Cave of Lascaux.

In the figure 3, when the event e4 occurs, both states S4 and S1 are visible. It is possible because open events are used both to indicate the default start page as well as to indicate new browser window opening. If one of the states (S1, S2, S3 or S4) has sub-states, the rule for vis ibility would be propagated for all sub-states when they are set to current. Designing Client-server activity

There are several aspects involved in Client-Server activity such as dialog control and dynamic/static page generation. In order to explain that, we present in figure 4 a partial modeling of ACM Digital Library web site (http://www.acm.org/dl/newsearch.html).

Taking in account direct access

When designing navigation there are two main kinds of links: structural links and page-specific links. Structural links give general navigation over the site and frequently are the same in different context, such as menus and navigation bars. Page-specific links are closely related to the content. Both kinds of links could be represented with StateWebCharts. Figure 5 presents a partial modeling representing structural links and page-specific links in the Danish Museum of Decorative Art (http://www.mus-kim.dk/). Note that when the event e2 occurs entering in the state S2, both sub-states S3 and S4 are displayed. S3’s content is vis ible whatever S4, S5 or S6 are actives, providing a structural navigation (direct access to S3) based on a menu. However, the navigation between S4 and S6 is made using specific links that only are accessible from S4.

Figure 4: Partial modeling of ACM Digital Library.

In the state S1 users can fill-in the search form and submit their query for the system. When search button is pressed, the event e2 occurs and a new window is opened asking user and password (S2). Users should inform their information account and confirm it (e3). Note that event e3 starts with a circle (close event) that means the window opened by the event e2 will be closed when event e3 occurs. Next, state S3 is set to current. S3 is a transient state (represented in gray) that means all transitions, which it is associated (e4 and e5), are simple

Figure 5: Partial modeling of Danish Museum web site.

This example shows how the design could be structured for multiple accesses. But it does not avoid users to access directly single individual pages without passing trough this structure. For example, users can bookmark and access the state S4 without the menu at left. Such real world feature is clear in the model and could be evaluated by starting the model at the event e4 instead of event e1.

DISCUSSION AND RELATED WORK

Navigation design has been extensively addressed in hypertext and hypermedia research work using different approaches. Stotts and Furuta [9] have proposed the navigation using Petri-nets. Statecharts based-models (featuring different ad-hoc extensions) are frequently used for navigation design for hypertext [1, 7, 10, 11] or even for Wimp interfaces modeling [4]. However, none of these extensions models in a clear and understandable way dialog control, the borderline for design, client-server activity and direct access to pages as StateWebCharts does. In fact, those models are too complex to be practical in most Web projects. The practical effect is most Web interface are created but not properly designed by inexistence of appropriated models. To be more factual than polemical here are a set of advantages provided by StateWebCharts over other navigation mo deling techniques: • • •

System-based autonomous evolution such as for instance temporal events (see Figure 1) are only available in StateWebCharts; Clear distinction (with a different graphical representation) between internal and external pages are only available in StateWebCharts too; Server side function processing is fully and only represented in StateWebCharts (see Figure 4). This is critical to usability of web sites as the performance of these functions might have dramatic consequences on predictability of web applications [6].

CONCLUSION AND FUTURE WORK

In this short paper we have presented how StateWebCharts notation allows for modeling parts of existing Web sites. Even though we have already used this notation for re-engineering real-size web site featuring more than one hundred pages this is still ongoing work that still has to be validated. Indeed, the notation has to be used by other designers than the authors of the notation themselves and for building new web sites (not only retro engineering them). Further work on the notation aims at integrating in a seamless way structural and visual appearance design for objects in this representation, in order to fully support the design of Web applications. Meanwhile, we are working on the formal semantics of the notation in order to provide designers with additional benefits coming from the use of already available tools for the formal verification and simulation of models. Lastly, in order to deal with large-scale web application StateWebCharts notation must be tool supported. The

implementation of a software environment for editing analyzing and simulating models is on the way. ACKNOWLEDGMENT

We thank CNPq - Brazilian Council for Research and Development for supporting the first author. REFERENCES

1. Anderson, D. Server-side MVC Architecture. At: http://www.uidesign.net/1999/papers/webmvc_part1. html (Nov. 2000). 2. Güell, N.; Schwabe, D.; Vilain, P. Modeling Interactions and Navigation in Web Applications. Procedings of WWW and Conceptual Modeling 2000 Workshop; Salt Lake City, USA. 2000. 3. Harel, D. Statecharts: a visual formalism for complex systems. Science of Computer Programming 8, P. 231274. 1987. 4. Horrocks, I. Constructing the User Interface with Statecharts. Harlow, UK, Addison-Wesley 1999. 5. Jacobson, I., Booch, G., Rumbaugh, J. The Unified Software Development Process, Addison-Wesley, 1999. 6. Johnson, C. Time and the Web: Representing and Reasoning about Temporal Properties of Interaction with Distributed Sytems. In: Procedingsof HCI’95. 1995. Cambridge University Press. 7. Paulo, F. B.; Turine, M. A.; Oliveira, M. C. F.; Masiero, P. C. XHMBS: a formal model to support hypermedia specification. Proceedings of the ninth ACM conference on Hypertext and hypermedia. June 20-24, 1998, Pittsburgh, USA, pp. 161-170. 8. Scapin, D.; et al. Transfering Knowledge of User Interfaces Guidelines to the Web. In. Tools for Working with Guidelines. London: Springer; 2001. 9. Stotts, D. P.; Furuta, R. Petri-net-based hypertext : document structure with browsing semantics. ACM Trans. Inf. Syst. 7, 1 (Jan. 1989), pp. 3-29. 10. Turine, M. A. S.; Oliveira, M., and Masiero, P. C. A navigation-oriented hypertext model based on statecharts. Proceedings of the eighth ACM conference on Hypertext; 1997. 11. Zheng, Y.; Pong, M. Using statecharts to model hypertext. In. Proceedings of the ACM conference on Hypertext. Milan, Italy. 1992. 12. Microsoft FrontPage® 2000. Available at: http://www.microsoft.com/frontpage/ (April 2000). 13. Palanque, P.; Bastide, R. Modeling Clients and Serves on the Web Using Interactive Cooperative Objects. In: Formal Methods in Human-Computer Interaction (Palanque, P.; Paterno, F. eds.) Springer. Berlin, 1997. 376 p.