Screenography { Systematic and Adaptive Layout Development

Abstract

Currently, the development of the visual design of Web Information Systems is mainly based on developers' experiences. Late considerations of graphical issues during the development of WISs often result in visually in exible solutions and cause problems for extension and change management. This article discusses screenography, attempts to systematise WIS layout and thus to complement existing development methods. This amounts to guidelines for partitioning pages and using layout objects, colour, light and texture to obtain rhythm, contrast and perspective as the carriers for web page comprehension. Further, it aims at an adaptive and exible presentation of information that takes into consideration users and providers needs and preferences as well as equipment and application demands.

Introduction

A Web Information System (WIS) is an information system that is made accessible via the world-wide web. Such systems can be of any size, but the primary focus of research in this area is on large-scale systems that require the support of database technology for the content and are used by an unlimited number of users. Consequently, the number of web pages that are needed to present a WIS to its users is very high, and permanent changes to these pages have to be accounted for. Development methods such as OOHDM [ 1 ], WebML [ 2 ], WIS codesign [ 3,4 ], HERA [ 5 ], WSDM [ 6 ] and others, and also UML has been adapted to support WISs [ 7 ] but little attention has been paid to the layout development of WISs. Layout design is a part of HCI design, too, but in general HCI techniques [ 8,9 ] are not coupled with speci c development methods, and have to be taken into consideration already during WIS design, even at a very high level of abstraction.

Currently, WIS designers are mainly involved in modelling and implementation. However, late consideration of graphical issues may result in in exibility. Striving for a systematic and early involvement of layout (the graphical design of pages in liaison with content) and playout (based on the story speci cation, the task portfolio of users, and the contexts of the WIS and its users), an approach to screenography will be developed, which adopts and generalises dramaturgy and scenography. Scenography contains the composition of action space, plot and dramaturgy. Dramaturgy controls the sequence of scenes and determines the composition of information. Layout development requires scenography and dramaturgy to facilitate the understanding and memorisation of content, and to support orientation within the WIS.

The rationale of this work is to complement the WIS codesign method [ 3 ] with a systematic approach to WIS layout that is grounded in knowledge from art, cognitive psychology and scenography. Layout patterns help in this context to reuse concepts and components [ 10 ] of layout development and support the derivation of possible solutions from an intentional description.

This paper is organized as follows. Section 2 discusses related work and points open issues and needed enhancements. Section 3 introduces the basic principles of the screenography approach. Finally, section 4 concludes and give a short outlook of further research directions. 2

Related Work

A lot of HCI approaches [ 11,12,13 ] have introduced guidelines how to develop good and useful websites, with a range from generic recommendations to directly applicable solutions. For example, Shneiderman [ 12 ] has de ned eight 'golden' rules of interface design that should be considered for the development of layout. Unfortunately, these general rules are not directly applicable and have to be re ned context dependent. According to Herczeg [ 14 ], development mistakes can occur in complex situations if the context was not taken into account. For example, in the case of multiple page displays, it is impossible to de ne a x and universally valid value, how many changes between two interaction steps are acceptable to achieve an adequate short-term memory load. The acceptable load depends on the possible attention of users, the abilities of the equipment and its application area. Too little changes cause long ways to get to the information, while very short ways result in too many changes. Thus, re nements that consider further aspects of the development are obligatory.

At the opposite end, van Welie [ 13 ] has developed a pattern language that tries to bene t from relations between speci c layout patterns. Patterns of this language describe problem-oriented solutions based on a speci cation of well orchestrated layout elements at di erent levels. They are problem-based, so that this approach results in a huge number of patterns and possible combinations. Unfortunately, it is hard to take all of them into account during the development process and moreover it is hard to handle all valid transitions between the proposed patterns levels. Therefore, it can be useful to classify by application domains to keep up the decidability. Moreover, a split by dimensions (intention, context, story, content, functionality, and presentation) as mentioned in [ 4 ] limits decision problems in the case of multiple domain applications. Van Welie [ 13 ] di ers context, application needs, and user needs patterns. These patterns are very useful to create new websites for any eld of application, but they do not support the progress of websites. Thus, changing demands result in a redevelopment instead of an alternative content playout that takes these into account.

Moreover, a large number of publications exist (e.g. Itten [ 15 ] and Skopec [ 16 ]) that discuss the layout from artists and designers view and give some advices how to use and compose graphical elements. These advices help to derive general rules of layout development that are universally valid in consideration of speci ed context aspects. 3

Essentials of Screenography

Screenography is based on a characterisation of tasks, intentions, and speci c characteristics of the users, provided by means of user pro les and portfolios. Intentions and tasks determine a user's expectations and interests; speci c characteristics in uence the patience in dealing with the WIS.

In general, screenography aims at closing the gap between web engineering and HCI approaches as well as avoiding confusing and wrong representation results by advising developers. Moreover, it aims at a high-level presentation adaptation of content to users and provider needs. Therefore the content does not depend too much on presentational issues in spite of an early involvement of layout aspects. Consequently, screenography eases re-developments and avoids costly parallel development branches on implementation level to serve heterogeneous equipment at the same time. 3.1

Development Prerequisites

A prerequisite of screenography is the analysis of a WIS on a high level of abstraction. So, we have to consider the intentions associated with the WIS, and characterise expected users. This is captured by a storyboard that speci es who will use the system, in which way, for which tasks, and for which intentions. The motivation of user for WIS use is explicitly speci ed through four facets of intentions: purpose (aims or objectives), intents (targets or objects), time (design, end or occasion) and representation (atmosphere or metaphors). Roughly speaking, the rst facet represents the 'what', the second the 'how' and the third the 'when' of an intention. Details of these facets were presented in [ 17 ]. 3.2

Atmosphere

For developing a satisfactory WIS atmosphere we have to consider the representation facet of the intention, which de nes the ambience the presentation should have. It depends on the application area of the WIS and the preferences of the user. Another main challenge is the heterogeneity of web clients. Therefore, we specify the atmosphere already on a high level of abstraction. Some work has been done in this area as the device independent speci cation of the appearance of interaction elements. Examples are UIML (User Interface Modelling Language), AUIML (Abstract UIML), and XUL (Xml User-interface Language). Particularly, this approaches were developed to realise functionality aspects.

Due to its de nition on a high level of abstraction, the atmosphere doesn't depend on equipment features. The rei cation through page layout and the sufciency of the available equipment to play out a speci c atmosphere will be checked on a lower level. The atmosphere can be described by the ambience of the presentation, which is determined by parameters such as shapes, material, illumination, and colour schema. Nevertheless, visual perception is always affected by the current mood and emotions of a viewer, wherefore we distinguish ambience-types as powerful, in the sense of dramatic art and vitality, and romantic, in the sense of romance and passion. Based on such types, a concrete atmosphere can be derived in conjunction with de ned user pro les. 3.3

Grid Geometry

Grids were adapted from graphic design and can be used for general page layout organisations. Usually, a grid splits the whole action space into rectangular tiles that are able to integrate content objects as mentioned in [ 18 ]. In general, a set of grids can be used for partitioning. Further, all grids can consist of a set of subgrids with the objective of increasing their applicability. Grids allow to reuse approved splits to ease the creation of applications with the same style, indents, sizes, and spaces. 3.4

Layout Patterns

We often notice the existence of similar demands in the case of similar applications. Mostly, such constellations result in similar representations, too, so that it would be useful to reuse an existing solution as a speci c generalised pattern and adapt it to speci c demands of another. This problem-oriented approach is suitable if we have a su cient list of patterns as built by [ 13 ]. In general, patterns help to reuse concepts and components. Screenography is mainly interested in layout patterns that utilise principles taken from cognitive psychology as published in [ 10 ]. As a result, we introduced a separation into communication, perception, and composition patterns enhanced by work progress patterns and pattern clusters with the objective of rising chances to reuse concepts while the development process. Such patterns can be used to derive appropriate grids and to develop rules how to apply content to the tiles of a grid [ 19 ].

Screenography and consequently all layout patterns is based on so-called six dimensions of WIS development (intention, story, context, content, functionality and presentation) as introduced in [ 4 ]. Screenography is mainly interested in layout aspects of each dimension but it isn't su cient to consider presentational issues because of interdependencies between these dimensions. 4

Conclusion

Screenography aims at an individualised, decorated playout in consideration of intention, user pro les and portfolios, provider aims, context, equipment, functionality, and the storyline progress. Moreover, it pays attention to placement and arrangement aspects and improves the integration and adaptation of external maintained content. Patterns ease in that context the reuse of components and concepts and allow to apply composition rules in a exible manner.

The development of a prototype has been started to escort (re-)development processes. The prototype has to propose possible visual solutions in the case of multiple options and is directed to ease the development, to avoid frequently occurring layout problems, and to systematise the WIS layout development.

References

1. Schwabe , D. , Rossi , G. : An object oriented approach to web-based application design . TAPOS 4 ( 4 ) ( 1998 ) 207 { 225

2. Ceri , S. , Fraternali , P. , Bongio , A. , Brambilla , M. , Comai , S. , Matera , M. : Designing Data-Intensive Web Applications . Morgan Kaufmann, San Francisco ( 2003 )

3. Schewe , K.D. , Thalheim , B. : The co-design approach to web information systems development . International Journal on Web Information Systems 1 ( 1 ) ( 2005 ) 5 { 14

4. Schewe , K.D. , Thalheim , B. : Conceptual modelling of web information systems . Data & Knowledge Engineering 54 ( 2 ) ( 2005 ) 147 { 188

5. Houben , G.J. , Barna , P. , Frasincar , F. , Vdovjak , R.: HERA: Development of semantic web information systems . In: Third International Conference on Web Engineering { ICWE 2003 . Volume 2722 of LNCS ., Springer-Verlag ( 2003 ) 529 { 538

6. De Troyer , O. , Leune , C. : WSDM: A user-centered design method for web sites . In: Computer Networks and ISDN Systems { Proceedings of the 7th International WWW Conference. Elsevier ( 1998 ) 85 { 94

7. Conallen , J.: Building Web Applications with UML . Addison-Wesley , Boston ( 2003 )

8. Benyon , D. , Green , T. , Bental , D. : Conceptual modeling for user interface development . Springer, London ( 1998 )

9. Carroll , J.M., ed.: Designing Interaction: Psychology at the Human-Computer Interface . Cambridge University Press, Cambridge, England ( 1991 )

10. Noack , R. , Thalheim , B. : Patterns for screenography . In Kaschek, R., Kop , C. , Steinberger , C. , Fliedl , G., eds. : UNISCON. Volume 5 of Lecture Notes in Business Information Processing. , Springer ( 2008 ) 484 { 495

11. Norman , D. : The design of everyday things . Basic Books , New York, NY ( 1988 )

12. Shneiderman , B. , Plaisant , C. : Designing the User Interface: Strategies for e ective human-computer interaction . Addison-Wesley, Boston ( 2005 )

13. van Welie, M., van der Veer, G.C.: Pattern languages in interaction design . In Rauterberg, M. , Menozzi , M. , Wesson , J., eds.: INTERACT, IOS Press ( 2003 )

14. Herczeg , M. : Interaktionsdesign. Oldenbourg ( 2006 )

15. Itten , J.: Kunst der Farbe . O. Maier ( 1961 )

16. Skopec , D. : Digital Layout for the Internet and other Media . Ava Publishing SA ( 2003 )

17. Schewe , K.D. , Thalheim , B. : Usage-based storyboarding for web information systems . Technical Report 0613 , Christian Albrechts University Kiel, Germany ( 2006 )

18. Moritz , T. , Noack , R. , Schewe , K.D. , Thalheim , B. : Intention-driven screenography . In: ISTA . ( 2007 ) 128 { 139

19. Noack , R.: Rules and patterns for website orchestration . In Yang, J., Ginige , A. , Mayr , H.C. , Kutsche , R.D., eds. : UNISCON. Volume 20 of Lecture Notes in Business Information Processing. , Springer ( 2009 ) 268 { 279