=Paper=
{{Paper
|id=Vol-247/paper-20
|storemode=property
|title=Principles of Screenography
|pdfUrl=https://ceur-ws.org/Vol-247/FORUM_19.pdf
|volume=Vol-247
|dblpUrl=https://dblp.org/rec/conf/caise/MoritzNST07
}}
==Principles of Screenography==
https://ceur-ws.org/Vol-247/FORUM_19.pdf
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.