# An Approach to Information Presentation Employing Game Principles and Physics Based Interaction

Mária Bieliková, Michal Lohnický, Daniel Švoňava

► To cite this version:

Mária Bieliková, Michal Lohnický, Daniel Švoňava. An Approach to Information Presentation Employing Game Principles and Physics Based Interaction. Second IFIP TC 13 Symposium on Human-Computer Interaction (HCIS)/ Held as Part of World Computer Congress (WCC), Sep 2010, Brisbane, Australia. pp.265-268, 10.1007/978-3-642-15231-3_26 . hal-01055475

HAL Id: hal-01055475

https://inria.hal.science/hal-01055475

Submitted on 12 Aug 2014

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>
# An Approach to Information Presentation Employing Game Principles and Physics Based Interaction

Mária Bieliková, Michal Lohnický, Daniel Švoňava

¹ Faculty of Informatics and Information Technologies, Slovak University of Technology in Bratislava, Ilkovičova 3, 842 16 Bratislava, Slovakia {name.surname}@stuba.sk

**Abstract.** In this paper we propose a novel approach optimized towards the presentation of general sets of information entities that employs game-like features and social context to engage its users to explore the presented data and streamlines the navigation and overall usability in terms of several constraints that we established. The presentation environment is embedded within a physical engine that controls the movement of visualized entities, resolves user's interaction and takes part in the overall information throughput.

**Keywords:** web information entities visualization, exploratory navigation, game-like, physics based interaction.

## 1 Visualization Concept

The times when the web content was composed mostly of textual HTML-based websites are long gone. With some popular technologies like HTML5 the web has become a highly visual medium. However, the mere fact that the information is communicated by a visual presentation does not solve any of the major problems of crowded and boring 1.0 websites. We need to utilize the power of the new web to ease the information retrieval. The current information visualizations are often ontology based visualizations utilizing hierarchical navigation [1], graphs [2] and various aspects of information space [3]. Their disadvantages are excessive complexity or lack of scalability.

We propose a novel approach to presentation of general sets of information entities. We map the data entities on graph nodes, embedded in 3D space with edges visually encoded in spatial composition (see Fig 1). To engage the users we use game-like features [4] and to meet the navigating, filtering and clustering requirements we embed the presentation space with physical engine. The basic requirement of the dynamic information presentation is to simplify exploration of complex informational structures. To improve the clarity, it is necessary to extract and present the most important information and use presentation techniques that ease the information navigation. It is also important to offer an environment, which has serious character and forces user's imagination to improve the domain space in a user's personal way. Our idea is to visualize multimedia with attributes, where the focus lies on the most important attribute leading to the reduced complexity of domain space.
<figure><img src="image_2.png" /><figcaption>**Fig. 1.** Example visualization for UNICEF site – whole screen and detail.</figcaption></figure>

Following the *preattentive visual patterns* [5] we created a pleasant interface that allows a user to comprehend the content quicker and more effortlessly. From five basic patterns to distinguish objects (colour, size, rotation, movement and shape) we have utilized the *colour* as an element to distinguish entities and the *movement* as a navigation element, which attracts users. The combination of the other three patterns creates various possibilities how the entity can be highlighted so the user is alerted on different actions in different way.

Considering *depth of presentation space* there are three possibilities that fit the requirements: the visualization made via 2D, 2.5D or 3D space. Visualization of multimedia content implicitly requires a 2D surface or a 3D object with the multimedia displayed on its surface. The third dimension can be confusing but if it is properly used it can increase the clarity of visualization of a big amount of entities.

It is important to make the 3D environment look real and natural what ensures that the user feels comfortable. This can be realized by content emphasizes techniques using *perspective*, *kinetic depth*, *face-tracking* and *binocular vision*. Perspective is natural way how some objects can be highlighted without additional features. A large number of visualized objects require smaller objects or objects which are overlaid. The usage of intuitive object movement (kinetic depth) solves the problem of overlaid objects, because the user can easily see behind the objects. *Face-tracking* is natural usage of kinetic depth based on the user's head position in front of the screen. Giving good light conditions, it does not burden the user and so it is a good additional feature. Similar principle is binocular vision, which is the best way how to achieve clarity and simplicity of complex domain space. A disadvantage of this solution is the necessity to own quite expensive polarized glasses.

In our solution we have employed the clarity of 2D visualization and advantages of 3D. The data entities are in 3D space but multimedia content remains 2D. The media content is displayed on billboards that are perpendicular to the camera. To create an illusion of 3D space we made the back entities darker to look like dipped in shadow together with kinetic depth and natural perspective (front objects are about 3 times bigger than rear). The face-tracking is used as a bonus to add attractiveness.
## 1.1 Graph User Interaction

One plausible solution to information visualization and navigation in 3D is to distribute the information entities in the full volume of a 3D body and then let a user to change the position of the body, navigating through the data set.

We use the polar coordinate system to govern the 3D body movement, following the spherical layout explained later. We placed the center of the sphere at the origin and also positioned the camera at the ray in the certain distance from the origin. At the center of the sphere we placed an exchangeable data entity to highlight the point of rotation and consequently the entity itself. The user can look at the data set from any point of view and also from any distance along the ray. We opted to keep the rotation axes fixed relatively to the camera position and direction, to reduce the complexity.

In order to be able to interact with the specific visualized entities, the user needs to be able to pick the ones intended for the interaction. The position of the entities visualizes relations within the data, so it makes sense to select groups clustered together. To perform the selection, we allow the user to select a single entity and then until he does not let go of the mouse button, we gradually add the traversed nodes into the selected set, exploiting the spatial structure of the data space.

While it is possible to achieve a uniform initial distribution with fixed random layout of the objects in the 3D body, the layout itself is static and inflexible in later operations. Therefore we developed an interactive adaptation of force-based graph drawing algorithms. The iterative adjustment allows for the adaptation of node count change. Dynamic change of the force computing formulas lets the model to naturally regroup the nodes following a chosen similarity measure.

The scene of the model can also be augmented with so called virtual objects that help to take control of certain aspects of the movement of visualized entities. For example, we can insert an invisible and highly repulsive object in front of a node we want to highlight to repel nodes that block the view. The model creates an impression of living, playful "organism" behaving like a swarm of fish. The "viscosity" is controlled to accommodate the various users. We gather user input statistics as e.g. click rate, engagement in the game aspects of the presentation and feed them to a fuzzy controller that derives the speed settings.

We need to rotate the body around two perpendicular axes and change the middle node. To improve the mentioned effects, we embed the manipulations in the model itself. This is achieved by adding the virtual forces during certain iterations of the layout algorithm, allowing the whole system to compensate for the change of the middle node by shifting the nearby nodes and also creating naturally looking effects caused by inertia of the nodes apparent during the rotation, which shapes the normally spherically distributed data set into a disc-like object.

## 1.2 Applying Game Principles

We employ the game definition to abstract game-like features and use them in generic none-game information presentation in order to motivate users without the necessity to directly bring motivation through presented information. A game represents a formal system based on four elements: goals, rules, challenges and interaction.
Our solution employs short term goals via evaluating of effectiveness of interaction
during a short period and via achieving ranks. Long term goal is applied in achieving
a given level of entities number in presentation. The number of entities is dynamically
changing according to the users' interaction. There is also necessary to define
challenges which ensure that the way of achieving goals will be also important for
user. We do so via scoring and budget manipulation, which is deeply related to tools
usage. The rules of tools manipulation define how the goals can be reached and
finally the environment interaction response based on our physics model allows us to
attract user in a totally new and innovative way.

The game-like principles not only increase users' motivation, but also create many
possibilities to implement wide variety of features (e.g. "welcomed-advertisement").

## 2 Evaluation and Conclusions

To evaluate the proposed concepts, we have developed so called WOWI (World of Web Information) framework. To demonstrate the versatility, we created WOWI presentations for UNICEF and our institution and performed several experiments aimed at evaluation of user experience. Microsoft WPF enabled us to render circa 100 entities in the web application.

Our contribution came from the unique combination of game principles catering on basic human instincts and the open presentation platform that is able to take a wide range of various types of data and transform it to a presentation appealing to broad audiences. Our method catches the attention of the user and sustains it, creates challenging and social environment that makes the user enthusiastic about learning and comprehending presented information and creates a wide range of possibilities for further augmentation of this space with business plans of "welcomed-advertisement".

**Acknowledgement.** This work was partially supported by VEGA 1/0508/09, KEGA 028-025STU-4/2010 and it is the partial result of the Research & Development Operational Programme for the project Support of Center of Excellence for Smart Technologies, Systems and Services, ITMS 26240120029, co-funded by the ERDF.

## References

1. Katifori, A., Halatsis, C., Lepouras, G., Vassilakis, C., Giannopoulou, E.: Ontology visualization methods – a survey. ACM Comput. Surv. 39, 4, 10 (2007)

2. Bai, X., White, D., Sundaram, D.: Visual intelligence density: definition, measurement, and implementation. In Proc. of the 10th Int. Conf. NZ Chapter of the ACM SIG on HCI. CHINZ '09. ACM, New York, NY, 93-100 (2009)

3. Tvarožek, M., Bieliková, M.: Collaborative multi-paradigm exploratory search. In Proc. of the Hypertext 2008 Workshop on Collaboration and Collective intelligence. WebScience'08. ACM, New York, NY, 29-33 (2008)

4. Tsang, M., Fitzmaurice, G., Kurtenbach, G., and Khan, A. 2003. Game-like navigation and responsiveness in non-game applications. Commun. ACM 46, 7, 56-61 (2003)
5. Deller, M. et al.: Preattentive visualization of information relevance. In Proc. of the Int. Workshop on Human-Centered Multimedia, ACM, New York, NY, 47-56 (2007)