InfoVis 2007 Contest
Blockbuster – A Visual Explorer for Motion Picture Data

Contest webpage:

Authors and Affiliations:

Tool(s):

The Blockbuster system is a stand-alone Java application, which was developed entirely by the Human-Computer Interaction Group (WG HCI) at the University of Konstanz. The system architecture and design rationale is based on the visual search system for digital libraries “MedioVis”, which has been developed at the WG HCI since 2003 (http://hci.uni-konstanz.de/MedioVis). For the InfoVis 2007 Contest newly developed visualizations, interaction techniques and visualization components (e.g. parallel bargrams, network visualization, visualization- and layout-management with “drag and drop”, multiple document interface with tab browsing…) were integrated. Furthermore Blockbuster uses open source libraries for web browser integration (JDesktop Integration Components JDIC, http://jdic.dev.java.net), database connectivity (PostgreSQL JDBC driver, http://jdbc.postgresql.org) and graph visualization (Java Universal Network/Graph Framework, http://jung.sourceforge.net).


Please find the Blockbuster video under http://hci.uni-konstanz.de/Blockbuster/InfoVis_Final.mov
Download the 2-page summary under http://hci.uni-konstanz.de/Blockbuster/Paper_InfoVis2007Contest_Blockbuster.pdf


TASK 1: Innovative Design



Like any user interface and interaction design process, designing information visualization should follow an end-user-centered approach, not only limited to pragmatic qualities like usability (respectively effectiveness and efficiency [1]) but also in regard to "hedonic” qualities [2] like aesthetics [3], "joy-of-use" or pleasurable design [4].

To achieve a rich and pleasing user experience the forerunner of Blockbuster "MedioVis" was developed following a holistic user-centered design process and was continuously tested with real end-users in usability labs and with large-scale observation of real work practice in the Library of the University of Konstanz through logging and analysis of interaction data. The knowledge gained from these user evaluations has been used to iteratively improve the interaction and user interface design of the system. The superiority by means of effectiveness, usability and attractiveness was empirically validated in user tests and published in [5]. Based on these insights and experiences gained from "MedioVis" we have formulated a design rationale for Blockbuster that has served as a guideline for the system design and as a heuristic for evaluating the system's user experience throughout development.

With respect to the pragmatic qualities of Blockbuster there are two design principles, which have been considered during the selection of employed visualization techniques and their integration into the consistent interaction paradigm of the system:

  1. Blockbuster is end-user oriented and not only focused on expert but also on novice users. For such users understanding new visualization techniques is always a demanding challenge. This is especially true considering the nature of visualization as a technical science, "where the technical achievement of doing something new usually outweighs any questions on how useful or necessary a technique is" [6]. Therefore our intention with Blockbuster is to deliberately use and combine only well-proven and straightforward visualization techniques (e.g. scatter plots, network graphs, bargrams, tables, see part 2), which are especially appropriate for interactive exploration and direct manipulation (e.g. through dynamic queries [7], "on-the-fly" filtering or semantic zooming approaches [8]). Furthermore Blockbuster tries, wherever possible, to visualize each individual data set or entity (e.g. a film or a person) as a coherent visual object (e.g. glyphs, graph vertices, table rows) following Gestalt laws [9]. Blockbuster tries to avoid visualizations with high degrees of aggregation of data sets in single visual objects in order to facilitate interpretation by the novice user, who is familiar with thinking in individual objects not aggregations from the real world.

  2. Inspired by multiple coordinated views [10] and snap-together visualizations [11] with linking and brushing interaction, the different visualization techniques in Blockbuster can be applied simultaneously on arbitrary subsets of the data and can be displayed in arbitrary combinations and screen layouts. The user can choose the subset of visualized data and the employed visualization techniques with direct manipulation, e.g. by selecting subsets and layouts or dragging visualizations into visualization slots with the mouse, or by entering filter criteria incrementally with the keyboard. This way Blockbuster is capable of supporting the user in gaining complex insights by iteratively applying different combinations of easy-to-understand visualization and filtering techniques to narrow down the amount of displayed information to relevant subsets and to explore the data in task-specific ways. The focus of the design of Blockbuster therefore lies on facilitating the selection, combination and mutual filtering of those views suited for the user's specific tasks with an appropriate direct-manipulative interaction design.

    With respect to aesthetic and emotional aspects of Blockbuster there are two design principles, which were considered during the user interface and interaction design:

    1. The selection of colors, transparencies, fonts, font sizes, icons and animations follows a consistent style guide based on the experiences from the MedioVis project and is aimed at achieving high attractiveness for the user. Instead of the pragmatic and simplistic look of common visual information systems, Blockbuster tries to evoke positive emotions by offering an organic and slightly playful look and feel (e.g. by using rounded edges, color gradients, shadows, …). Furthermore it takes up design concepts known from popular applications (e.g. Apple iTunes or Firefox) to create a feeling of familiarity and mastery for the user and to improve the system's learnability.

    2. On the level of interaction design Blockbuster tries to create a rich and satisfying user experience by integrating external multimedia content (e.g. images, videos, maps, web pages) into the visualized data to provide a "browsing the shelves sensation for large collections of information items" as is recommended by [12]. This is especially provided by the novel zoomable table visualization "HyperGrid" (see task 2), which is able to provide the user with a quick and efficient access to all attributes and to external content harvested from resources like online databases (e.g. Wikipedia) or web services (Google Maps).

      Following this design rationale we created a system aimed at demonstrating the potential of information visualization for end-user- or consumer-centered applications that blur the boundaries of information visualization, visual information seeking and browsing. Like Blockbuster's forerunner "MedioVis" the system illustrates how visualization techniques can support novice users in decision making and also how interactive visualization techniques could be used in a consumer-oriented context like e-commerce or information retrieval on the Web.


      TASK 2: Effective Exploration


      As decribed in the above design principles, the exploration of data within Blockbuster is based on the usage simultaneous views on the data set, which are linked by linking and brushing behavior. This allows identifying, focusing and selecting single data sets by complementary use of different visualization techniques. All these visualization combinations and their layout are organized on tabbed panes similar to a multiple-document interface with tab browsing known from state-of-the-art internet browsers. This way Blockbuster allows an easy switching between views and data subsets to allow the user to switch between her different tasks and to keep interesting views or intermediate results during the exploration process.

      In Blockbuster all views within a tab are synchronized and allow mutual filtering of data. If the user reduces the amount of data in one visualization (e.g. by drawing a bounding box into the scatter plot and zooming into it or by selecting filtering criteria in the bargrams visualization), the data will be instantly removed from all other views on the tab. This way the consequences of filtering in one spot can be interpreted by looking at the effect on the other visible visualizations, which is especially helpful to identify and select data sets for further exploration or adding them to the user's "favorites".

      ... filtering in plot (bottom) ... ... filters HyperGrid (top).


      Effective exploration within the individual visualizations is especially facilitated by the possibility for the user to freely assign film metadata to the visualization, e.g. to the axis of the scatter plot, to columns in the HyperGrid or to the attributes displayed in the parallel bar grams.

      Following four visualization techniques were integrated into the Blockbuster system and can be chosen and arbitrarily arranged for complementary use to explore the data according to the user’s task:







      TASK 3: Data Specific Tasks


      According to the user-centered approach during the development of Blockbuster, we have selected data specific tasks, which should correspond to those decisions that film producers have to make throughout the process of motion picture production in reality. Hereby we assume that the data of past US movie releases can be regarded as an indicator for the commercial success of future motion pictures and that the user of Blockbuster is interested in producing a film with a good relation between budget and box office revenues. The data used in our scenario contains all US movie releases from 1970 to 2007 from the IMDb and therefore exceeds the amount of data, which was provided for the InfoVis Contest. Furthermore the 32.000 data sets were enriched with additional data available from the publicly available IMDb offline database files. Due to the nature of quantitative data like "budget" or "user rating" we have not addressed missing value issues by sophisticated interpolation or similar strategies.

      Task 3.1: Which actors were active in the genres adventure and action in the recent years and have been involved in successful movies? How is their recent success rate compared to that in the past?

      Task 3.2: Is there a typical relation between boxoffice gross revenues and rentals revenues?

      Task 3.3: Who were the commercially most successful teams among the producers in 2000 to 2005? Who were the teams with the best IMDb ratings?


      Acknowledgements:

      We would like to thank Werner König and Daniel Klinkhammer for their valuable input and all the contributors to the JDIC and JUNG Java open source projects which made Blockbuster possible.


      References:

      [1] I. O. f. Standardization, "ISO 9241-11: Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability." vol. 2003, 1996.
      [2] M. Hassenzahl, A. Platz, M. Burmester and K. Lehner, "Hedonic and ergonomic quality aspects determine a software's appeal," in CHI '00: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 2000, pp. 201-208.
      [3] N. Tractinsky, "Aesthetics and apparent usability: Empirically assessing cultural and methodological issues," in CHI '97: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1997, pp. 115-122.
      [4] P. W. Jordan, Designing Pleasurable Products : An Introduction to the New Human Factors. London: Taylor & Francis, 2000
      [5] C. Grün, J. Gerken, H. Jetter, W. König and H. Reiterer, "MedioVis - A user-centred library metadata browser." in Proceedings of the 9th European Conference, ECDL, Research and Advanced Technology for Digital Libraries, 2005, pp. 174-185.
      [6] R. Kosara. 2006, Visualization criticism - A new way of thinking about visualization. EagerEyes.com (last checked on 13 July 2007). http://eagereyes.org/VisCrit/VisualizationCriticism.html, 2006.
      [7] C. Ahlberg, C. Williamson and B. Shneiderman, "Dynamic queries for information exploration: An implementation and evaluation," in CHI '92: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1992, pp. 619-626.
      [8] K. Perlin and D. Fox, "Pad: An alternative approach to the computer interface," in SIGGRAPH '93: Proceedings of the 20th Annual Conference on Computer Graphics and Interactive Techniques, 1993, pp. 57-64.
      [9] C. Ware, Information Visualization: Perception for Design., 2nd ed. San Francisco, CA, USA: Morgan Kaufmann Publishers Inc, 2004
      [10] M. Q. W. Baldonado, A. Woodruff and A. Kuchinsky, "Guidelines for using multiple views in information visualization," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 110-119.
      [11] C. North and B. Shneiderman, "Snap-together visualization: A user interface for coordinating visualizations via relational schemata," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 128-135.
      [12] M. Hearst, A. Elliott, J. English, R. Sinha, K. Swearingen and K. Yee, "Finding the flow in web site search," Commun ACM, vol. 45, pp. 42-49, 2002.
      [13] H. Jetter, J. Gerken, W. König, C. Grün and H. Reiterer, "HyperGrid - accessing complex information spaces," in People and Computers XIX - the Bigger Picture, Proceedings of HCI 2005, 2005
      [14] R. Spence, Information Visualization : Design for Interaction. ,2nd ed.New York: Addison Wesley, 2007
      [15] E. Kandogan and B. Shneiderman, "Elastic windows: Improved spatial layout and rapid multiple window operations," in AVI '96: Proceedings of the Workshop on Advanced Visual Interfaces, 1996, pp. 29-38.
      [16] C. Ahlberg and B. Shneiderman, "Visual information seeking using the FilmFinder," in CHI '94: Conference Companion on Human Factors in Computing Systems, 1994, pp. 433-434.
      [17] T. Buering, J. Gerken and H. Reiterer, "User Interaction with Scatterplots on Small Screens - A Comparative Evaluation of Geometric-Semantic Zoom and Fisheye Distortion," IEEE Trans. Visual. Comput. Graphics, vol. 12, pp. 829-836, 2006.
      [18] K. Wittenburg, T. Lanning, M. Heinrichs and M. Stanton, "Parallel bargrams for consumer-based information exploration and choice," in UIST '01: Proceedings of the 14th Annual ACM Symposium on User Interface Software and Technology, 2001, pp. 51-60.
      [19] T. Lanning, K. Wittenburg, M. Heinrichs, C. Fyock and G. Li, "Multidimensional information visualization through sliding rods," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 173-180.
      [20] A. Inselberg and B. Dimsdale, "Parallel coordinates: A tool for visualizing multi-dimensional geometry," in VIS '90: Proceedings of the 1st Conference on Visualization '90, 1990, pp. 361-378.
      [21] T. M. J. Fruchterman and E. M. Reingold, "Graph Drawing by Force-directed Placement," Software Pract Exper, vol. 21, pp. 1129-1164, 1991.