Screenography – Systematic and Adaptive Layout Development René Noack Christian Albrechts University Kiel, Department of Computer Science Kiel, Germany noack@is.informatik.uni-kiel.de Abstract Currently, the development of the visual design of Web In- formation Systems is mainly based on developers’ experiences. Late con- siderations of graphical issues during the development of WISs often re- sult in visually inflexible 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 flexible presentation of information that takes into consideration users and providers needs and preferences as well as equip- ment and application demands. 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. Development methods such as OOHDM [1], WebML [2], WIS co- design [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 tech- niques [8,9] are not coupled with specific 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 implementa- tion. However, late consideration of graphical issues may result in inflexibility. Striving for a systematic and early involvement of layout (the graphical 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), 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 1 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 defined eight ’golden’ rules of interface design that should be considered for the development of lay- out. Unfortunately, these general rules are not directly applicable and have to be refined 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 define a fix 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 informa- tion, while very short ways result in too many changes. Thus, refinements that consider further aspects of the development are obligatory. At the opposite end, van Welie [13] has developed a pattern language that tries to benefit from relations between specific layout patterns. Patterns of this language describe problem-oriented solutions based on a specification of well or- chestrated layout elements at different 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 develop- ment 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] lim- its decision problems in the case of multiple domain applications. Van Welie [13] differs context, application needs, and user needs patterns. These patterns are very useful to create new websites for any field of application, but they do not support the progress of websites. Thus, changing demands result in a redevelop- ment instead of an alternative content playout that takes these into account. 2 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 ad- vices how to use and compose graphical elements. These advices help to derive general rules of layout development that are universally valid in consideration of specified context aspects. 3 Essentials of Screenography Screenography is based 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 char- acteristics influence 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 heteroge- neous equipment at the same time. 3.1 Development Prerequisites A prerequisite of screenography is the analysis of a WIS on a high level of ab- straction. So, we have to consider the intentions associated with the WIS, and characterise expected users. This is captured by a storyboard that specifies who will use the system, in which way, for which tasks, and for which intentions. The motivation of user for WIS use is explicitly specified through four facets of intentions: purpose (aims or objectives), intents (targets or objects), time (de- sign, end or occasion) and representation (atmosphere or metaphors). Roughly speaking, the first 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 represen- tation facet of the intention, which defines 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 specification of the ap- pearance 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. 3 Due to its definition on a high level of abstraction, the atmosphere doesn’t depend on equipment features. The reification through page layout and the suf- ficiency 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 presentation, which is determined by parameters such as shapes, material, illumination, and colour schema. Nevertheless, visual perception is always af- fected 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 ro- mantic, in the sense of romance and passion. Based on such types, a concrete atmosphere can be derived in conjunction with defined user profiles. 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 applica- tions. Mostly, such constellations result in similar representations, too, so that it would be useful to reuse an existing solution as a specific generalised pattern and adapt it to specific demands of another. This problem-oriented approach is suitable if we have a sufficient list of patterns as built by [13]. In general, patterns help to reuse concepts and components. Screenography is mainly inter- ested 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 sufficient to consider presentational issues because of interdependencies between these dimensions. 4 Conclusion Screenography aims at an individualised, decorated playout in consideration of intention, user profiles and portfolios, provider aims, context, equipment, func- tionality, and the storyline progress. Moreover, it pays attention to placement 4 and arrangement aspects and improves the integration and adaptation of exter- nal maintained content. Patterns ease in that context the reuse of components and concepts and allow to apply composition rules in a flexible 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.: Design- ing 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 devel- opment. 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 effective 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 sys- tems. 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 5