73 Principles of Screenography Thomas Moritz1 , René Noack2 , Klaus-Dieter Schewe3 , Bernhard Thalheim2 1 Brandenburg University of Technology, Institute of Computer Science Cottbus, Germany moritz.th@t-online.de 2 Christian Albrechts University Kiel, Department of Computer Science Kiel, Germany noack|thalheim@is.informatik.uni-kiel.de 3 Massey University, Information Science Research Centre Palmerston North, New Zealand k.d.schewe@massey.ac.nz Abstract. The design and reification of Web Information Systems is a complex task, for which many integrated development methods have been proposed. While all these methods ultimately lead to the construc- tion of web pages, very little attention is paid to the layout of these pages. This paper discusses the main principles of Screenography, at- tempts to systematise WIS layout and thus to complement 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. 1 Introduction A Web Information System (WIS) is an information system that is made acces- sible 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. Therefore, the design and reification of such systems cannot be left to “HTML-hackers”. It has become subject to various development methods such as OOHDM [13], WebML [3], WIS co-design [11, 12], HERA [6], WSDM [5] and others, and also UML has been adapted to support WISs [4, 8]. These methods differ in many respects, and we do not intend to discuss these differences here. However, whatever method is used, it finally boils down to the writing or generation of web pages. So, whatever sophistication has been achieved through the method, a poor layout of the pages can easily destroy it. Nonetheless, astoundingly little effort has been put into WIS layout. It may be argued that layout is the realm of HCI techniques [1, 2, 7, 14], but then general HCI techniques are not coupled with specific development methods, and a lot of the HCI ideas have to be taken into consideration already during WIS design, even at a very high level of abstraction. For instance, the partitioning of pages and colour schemata are linked to the strategic decision on the desired ambience of the WIS as emphasised in [10]. 74 Currently, WIS designers are mainly involved in modelling and implementa- tion. However, late consideration of graphical issues may result in inflexibility. Our aim is to support the systematic and early involvement of layout (the graph- ical design of pages in liaison with content) and playout (based on the story specification, the task portfolio of users, and the contexts of the WIS and its users). Thus we develop an approach to screenography , which adopts and gen- eralises 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. Our claim is to show that WIS layout also requires scenography and dramaturgy to facilitate the understanding and memorisation of content, and to support orientation within the WIS. Screenography aims at providing interfaces of high utility that can be used by any user depending on his/her intentions and tasks. So, we base screenography on a characterisation of tasks, intentions, and specific characteristics of the users, provided by means of user profiles and portfolios. Intentions and tasks determine a user’s expectations and interests; specific characteristics influence the patience in dealing with the WIS. As WISs are to provide needed services, the users’ real needs and life stories have to be specified. We do this on the basis of life cases that generalise, combine, extend and formalise business use cases. The rationale of our work is to complement the WIS codesign method [11] with a systematic approach to WIS layout that is grounded in knowledge from art, cognitive psychology and scenography. In order to do so we start from a gen- eral architecture that determines the WIS development needs. On these grounds we refine intentions and use them to specify user profiles and portfolios. 2 Essential of Screenography Screenography extends web application engineering by scenographic and dra- maturgic aspects and intends to support the interaction between system and user. Screenography aims at an individualised, decorated playout in considera- tion of intention, user profiles and portfolios, provider aims, context, equipment, functionality and the storyline progress. 2.1 Atmosphere Due to its definition on a high level of abstraction the atmosphere is independent of equipment features. The reification through page layout and the sufficiency of the available equipment to play out a specific atmosphere will be checked on a lower level. The atmosphere can be described by the ambience of the presenta- tion, 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. According to [9] we distinguish the ambience-types powerful, in the sense of dramatic art and vitality, romantic, in the sense of romance and passion, elegant, in the sense of seriousness and dis- passion, refreshing, in the sense of ease and transparency, balanced, in the sense of harmony and balance, and energetic, in the sense of phantasm and energy. 75 2.2 Layout Patterns After defining the atmosphere, we specify layout patterns. Patterns are a pow- erful conceptual framework for building compelling, effective, and easy-to-use websites [15]. A pattern consists of visual and functional building blocks. Ac- cording to [10] the functional building blocks realise the access to the presented content and order these. The visual building blocks are important for perception and need to consider the colouring with respect to functionality and aesthetics, the perspective perception of the whole screen, and the visual alignment and partitioning of the screen. 2.3 Grid Geometry Grids were adapted from (conventional) graphic design and used for organising page layouts, e.g. newspapers and magazines [15]. The visual alignment of layout patterns is based on a tiling of the screen as a two-dimensional surface. More sophisticatedly than a three column layout, the size of visual building blocks can follow a rhythmic structure that can be expressed by a sequence of positive integers. Then an observer perceives larger tiles of a sequence as being more important, in particular, if the sequence shows a monotonic pattern. Due to its overwhelming use in art and architecture over centuries we are particularly interested in the Fibonacci sequence, which is defined by the recur- rence fn+2 = fn + fn+1 with the starting values f1 = f2 = 1. This gives the well-known sequence 1,1,2,3,5,8,13,... It also gives rise to the number of golden section, which appears naturally in nature. If each tile is associated with a colour of a well-chosen colour schema, this enables desired atmospheric effects as specified in the strategic WIS model [10]. The thesis [9] shows this combination of the Fibonacci grid with various colour schemata in different web application projects. 3 Conclusion In this paper we presented the principles of screenography, a novel approach to layout and playout of Web Information Systems (WISs). Screenography transfers the accumulated knowledge in scenography and dramaturgy from its origins in theatre, film and television to the web area thereby exploiting results from creative arts, cognitive psychology, and stage scenography. The rationale behind our work is that layout and playout are not merely activities that start, when the major system design has been completed, but must be treated as integral part of WIS development from the very beginning; a poor layout can nullify all sophisticated modelling work, because the layout is the ultimate carrier of information in a WIS. Screenography is tightly intertwined with storyboarding, the method for WIS usage modelling on a high level of abstraction [12]. It contributes to page par- titioning and colour scheme definition in a holistic way. Furthermore, it adheres 76 to known principles of visual perception, communication, cognition and design that address important features such as contrast, rhythm, and perspective. Screenography is an attempt to turn WIS layout and playout from an art into a craft, i.e. it aims at enabling WIS designers to engineer systems that by virtue of their presentation are conceived as exceeding the expectations of its users. The work presented in this paper is a first step in this direction, yet still much more has to be done to extract knowledge from arts and bring it into a form that can be used by WIS engineers. References 1. Benyon, D., Green, T., and Bental, D. Conceptual modeling for user interface development. Springer, London, 1998. 2. Carroll, J. M., Ed. Designing Interaction: Psychology at the Human-Computer Interface. Cambridge University Press, Cambridge, England, 1991. 3. Ceri, S., Fraternali, P., Bongio, A., Brambilla, M., Comai, S., and Mat- era, M. Designing Data-Intensive Web Applications. Morgan Kaufmann, San Francisco, 2003. 4. Conallen, J. Building Web Applications with UML. Addison-Wesley, Boston, 2003. 5. De Troyer, O., and 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, pp. 85–94. 6. Houben, G.-J., Barna, P., Frasincar, F., and Vdovjak, R. HERA: Devel- opment of semantic web information systems. In Third International Conference on Web Engineering – ICWE 2003 (2003), vol. 2722 of LNCS, Springer-Verlag, pp. 529–538. 7. Johnson, S. Interface culture. Harper, San Francisco, 1997. 8. Lowe, D., Henderson-Sellers, B., and Gu, A. Web extensions to UML: Using the MVC triad. In Conceptual Modeling – ER 2002, S. Spaccapietra, S. T. March, and Y. Kambayashi, Eds., vol. 2503 of LNCS. Springer-Verlag, 2002, pp. 105–119. 9. Moritz, T. Visuelle Gestaltungsraster interaktiver Informationssysteme als in- tegrativer Bestandteil des immersiven Bildraumes. PhD thesis, HFF Berlin- Babelsberg, 2006. 10. Moritz, T., Schewe, K.-D., and Thalheim, B. Strategic modelling of web information systems. International Journal on Web Information Systems 1, 4 (2005), 77–94. 11. Schewe, K.-D., and Thalheim, B. The co-design approach to web information systems development. International Journal on Web Information Systems 1, 1 (2005), 5–14. 12. Schewe, K.-D., and Thalheim, B. Conceptual modelling of web information systems. Data and Knowledge Engineering 54, 2 (2005), 147–188. 13. Schwabe, D., and Rossi, G. An object oriented approach to web-based applica- tion design. TAPOS 4, 4 (1998), 207–225. 14. Vale, E. The technique of screen and television writing. Simon and Schuster, New York, 1982. 15. van Duyne, D. K., Landay, J. A., and Hong, J. I. The Design of Sites: patterns, principles and processes for crafting a customer-centered Web experience. Addison Wesley, 2002.