Evaluation of the User Experience of Interactive Infographics in Online Newspapers

Abstract

- Information graphics are a powerful tool to communicate complex information. Adding interactive elements to infographics that are published in online media enables journalists to tell even more complex and exiting stories. However, the usability of such complex data presentations is crucial for their acceptance among readers of online newspapers. The results of a usability study of interactive infographics published in online newspapers reveal weaknesses and success factors for designing interactive infographics to ensure an improved user experience.

Keywords

• interactive infographics
• information graphics
• information visualization
• interaction
• usability
• user experience
• data-driven journalism
• online journalism
• online newspaper

I. INTRODUCTION

Information visualization describes the use of visual representations of abstract data to amplify cognition [1] [2]. The visual representation of information enables users to effectively and efficiently perceive, recognize and interpret information. Especially information graphics (short: infographics), that combine graphics, image and text, are an efficient means to communicate complex information, data or knowledge [3]. Static representations can be enhanced with interaction (e.g., filtering, selection, input of data, navigation) to provide users with different ways of controlling how and which kind of information is presented [4]. Since Shneiderman [5] proposed his Visual Information-Seeking Mantra: Overview first, zoom and filter, then details-on-demand, interaction has been a key principle for the success of information visualization.

Due to their capability to communicate complex data, information and knowledge efficiently, infographics are often applied in data-driven journalism. In data-driven journalism large amounts of data are collected, evaluated, interpreted and presented to readers [ 6 ] [7]. Lorenz [8] defines data-driven journalism as a workflow where data is the basis for analysis, visualization, and storytelling. Based on large amounts of data, data journalists explain new insights and tell complex stories that are enhanced by (interactive) visual representations [ 6 ] [9].

Information visualization supports data journalists in multiple ways. In the reporting phase information visualization helps them to identify themes and questions, to identify outliers, or to find typical examples [ 6 ]. When journalists publish stories based on their investigations, information visualization is an

Section II gives a short introduction to interactive infographics which is followed by a brief overview on related work on usability of (interactive) infographics in section III. In section IV we introduce the usability test method based on Thinking Aloud and a questionnaire. Sample results on selected infographics and selected ergonomic principles are presented in section V. We end up with some remarks on future work in section VI and conclusions in section VII.

II. INTERACTIVE INFOGRAPHICS

A. Information Graphics

Information graphics are visual representations of information or data, e.g. as a chart or diagram, telling a specific story [3] [ 12 ]. They combine graphics, image, text and numbers to communicate information, data or knowledge efficiently [ 13 ]. Infographics can be used to communicate complex topics and draw the attention of percipients to them. They provide the percipient with new insights and a quick overview on complex facts on subjects like politics, science, technology, and nature that are hard to understand just using text-based information. However, despite obvious advantages there is an ongoing debate on visual embellishment.

While trying to create appealing infographics designers have to prevent from adding unnecessary visual embellishment – chart junk. They should adhere to a reduced approach using plain and simple charts, e.g., by following the data-ink ratio for noninteractive infographics proposed by Tufte [ 14 ] to reduce chart junk.

B. Infographics and Interaction

Most infographics published in books, newspapers, magazines, on TV, or online media provide static representations. However, an increasing number of infographics published in online media can be manipulated by the user interactively. Interaction is the ability to change in reaction to the user and enhances all types of static information visualization [4]. In the context of infographics there exist several methods of interaction to manipulate a visual representation, like scrolling, overview plus detail, focus plus context, filtering, or data reordering [ 15 ].

Weber and Wenzel [ 13 ] define interactive infographics as a visual representation of information that integrates several modes (at least two) – e.g., image/video, spoken or written text, audio, layout, etc. (the image mode is constitutive) – to a coherent ensemble that offers at least one option of control to the user. Interactive infographics can be controlled by, e.g., Start or Stop button, forward or backward button, menu item to select, timeline or time controller, filter, data request or input box [ 13 ]

C. Types of Interactive Infographics

Following Weber [ 16 ] we can classify interactive infographics according to five distinctive features that cover interaction as well as narrative issues: degree of interactivity, activity model, communicative intent, topic, and the classic questions What, Where, When, How, etc. [ 17 ]. Additionally, features like genre or visual narrative can be applied, too [ 18 ]. Most important for the usability of interactive infographics are the degree of interactivity and the activity model [ 11 ].

The degree of interactivity of interactive infographics is made up of three levels [ 13 ]: Low interactivity, medium interactivity, and high interactivity. While a low level of interactivity allows a user to manipulate interactive infographics without changing the graphics itself (e.g., zooming, mouseover effects for showing details, Next or Start buttons), on a medium level a user can manipulate the graphics (e.g., using a timeline slider or menu items) by applying changes and comparing information. In contrast, a high level of interactivity enables the user to fully explore the infographics. He/she can interact with information by input of data, retrieving data, or filtering, thus changing the content.

The activity model identifies the way users can interact with the infographics and distinguishes between:  Linear  Nonlinear  Linear-nonlinear

The linear type restricts the user to move forward or backward through a predetermined linear sequence [ 19 ]. The step-by-step course is predefined by the author, i.e., this is an author-driven style of interaction [ 18 ]. The user can only follow a strict path using navigation tools like Start, Stop, Forward, Backward, or Next and cannot explore the visualization by himself. [ 16 ]

In contrast, a nonlinear visualization does not provide a prescribed ordering. This type offers the user many ways to explore and query the visualization, including free exploration without predefined navigation paths. Thus, its narrative is reader-driven [ 18 ]. Navigation tools for nonlinear infographics include input box, data query, filter, or brushing. [ 16 ]

The third type called linear-nonlinear is a combination of the other approaches. This type enables the author to communicate his message using a predefined path, but additionally it allows the user a limit amount of selection, for example using interactive timelines, time controller, or an integrated menu for navigation. [ 16 ]

III. RELATED WORK

Interactive infographics shall communicate complex topics fast, easy, in an easily understandable way to a broad audience. To achieve this goal they have to be user-friendly, i.e., the usability has to be well designed. However, designing and creating interactive infographics is a challenging task [ 10 ]: After identifying and structuring the topic and deriving an appropriate type of representation the multimedia elements – written text, spoken text (audio), images (photos, diagrams, graphics), videos (video, animation) – have to be combined in a meaningful way. Interactive elements and hypertext elements have to be defined and embedded within a concept of navigation [ 10 ]. Since online newspapers are read by a broad audience and not by experts, only a limited knowledge on the linguistic knowledge (e.g., technical terms), structural knowledge (structure of the information service), application knowledge (e.g., utilization of interactive elements like buttons of sliders), and functional knowledge (e.g., filtering of data) can be assumed [ 20 ]. There are a few “standards” for designing static information graphics (for print and web), but for interactive applications in the web no standards exist. Burmester, Wenzel and Tille [ 10 ] provide some recommendations for designing interactive infographics they derive from a user study on 23 interactive infographics.

The utilization of interactive infographics has been analyzed in some studies. Some authors take a general and global view on interactive infographics [ 21 ] and some authors focus on the utilization by journalists and publishing houses [9] [ 11 ] [ 22 ]. Only a few studies have been published that analyze the utilization by readers and focus on usability issues, like Schumacher [ 23 ], Burmester, Mast, Wenzel and Tille [ 24 ], and Zwinger, Langer and Zeiller [ 25 ]. Since a study by Zwinger and Zeiller [ 11 ] revealed a significant lack of convenience and usability during the utilization of interactive infographics published in online newspapers of Austria, Germany and Switzerland, the usability of such infographics will be analyzed in detail.

IV. USABILITY OF INTERACTIVE INFOGRAPHICS

A. Research Question

This study examines the usability of interactive information graphics that have been published in online newspapers. It focusses on the utilization of interactive infographics by readers of those online news. We analyze how readers perceive, interpret and interact with interactive infographics. We investigate whether background knowledge (structural, application, functional knowledge) and previous experience is required to provide a sufficient user experience. The requirements of users related to a user-friendly design (based on the international standard ISO 9241 on the ergonomics of human-system interaction) of interactive infographics for online news are identified due to an analysis of usage problems and identifying weaknesses. Success factors and potential areas of improvement will be shown.

Therefore, we focus on the following question: Which success factors improve the usability of interactive information graphics in online journalism?

B. Usability and User Experience

Usability – in particular web usability – can be defined in various ways. One of the pioneers Jakob Nielsen [ 26 ] defines usability as “a quality attribute that assesses how easy user interfaces are to use”. Consequently, he characterizes usability by five quality attributes: learnability, efficiency, memorability, errors, and satisfaction [ 26 ]. The international standard ISO 9241 on the ergonomics of human-system interaction defines in part 11 usability as the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use [ 27 ]. Information systems with high usability have to be user friendly, easy to use, ease to learn, and its interface has to be ergonomically designed [ 28 ].

The term “user experience” not only considers the actual use of an information system, but includes the anticipated usage (before using the system) and the processing of the use situation (identification or distancing; after using the system) [ 28 ]. According to Norman and Nielson [ 29 ] user experience encompasses “all aspects of the end-user's interaction with the company, its services, and its products”. ISO 9241-210 defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service" [ 30 ].

C. Method

The user experience and in particular the usability of an interactive system can be measured in various ways [ 31 ].

Eyetracking would be a method of first choice on evaluating the usability of an online services including infographics [ 31 ] [ 32 ]. However, most eyetracking tools cannot cope with the dynamic behavior of interactive infographics and do not track the changes on the screen, e.g., caused by mouseover, interactive timelines, time controllers, and integrated navigation. Thus, a combined method based on a questionnaire and the well-known qualitative method Thinking Aloud (Think Aloud) is applied. By combining both methods the weaknesses in the presentation of infographics and problems of the users while interacting with them can be identified and the course of action can be reconstructed [ 27 ].

1) Thinking Aloud

Thinking Aloud is a cheap, flexible, robust and easy to learn usability test [ 33 ]. Since it was first introduced to interface design by Lewis [ 34 ] in 1982 it became one of the most popular methods for usability testing. While testing the usability of an interactive infographics the test persons are encouraged to continuously comment their actions and their thoughts. Ideally the test person describes all paths of action taken and all of his/her impressions [ 35 ]. The verbalized thoughts of the test persons are recorded (audio and/or video recording). We used the recording feature of QuickTime Player to record the spoken word of the test persons plus the movement of the mouse on the screen and mouse clicks.

This method provides immediate response that enables the test moderator to draw conclusions on the actions taken and emotions already during the evaluation. A few test persons are sufficient to derive qualitative feedback of good quality [ 28 ].

2) Questionnaire

After the test phase where the Thinking Aloud protocol had been applied the evaluation was continued by a questionnaire the test persons had to fill in. A usability evaluation can apply the questionnaire ISO 9241/110-S [ 28 ]. It follows the ergonomic principles of the ISO standard 9241-110: suitability for the task, suitability for learning, suitability for individualization, conformity with user expectations, self-descriptiveness, controllability, and error tolerance. Each of the seven principles is evaluated by five items on a seven-point Likert scale (“very negative” to “very positive”). Since this is a standard questionnaire, some items may be inappropriate for a specific usability evaluation.

To perform the usability test on interactive infographics the ISO 9241/110-S questionnaire was modified and adapted to the special needs [ 36 ] of this specific test. The number of items in each section (i.e., ergonomic principle) had been adapted: conformity with user expectations used the five original items; suitability for the task, self-descriptiveness, and controllability were reduced to four items; suitability for individualization and error tolerance were reduced to three items; and suitability for learning was reduced to two items. The Likert scale for assessing each item was reduced from seven to four levels: ‘very negative’ “- -“ | ‘negative’ “-“ | ‘positive’ “+” | ‘very positive’ “+ +” [ 36 ].

To illustrate which items had been included in the adapted questionnaire the items for the most significant and meaningful ergonomic principles will be listed in detail: suitability for the task, conformity with user expectations, self-descriptiveness, and controllability.

Example 1: The principle "suitability for the task" consists of the following items: The interactive infographics … is complicated and confusing / is straightforward and clearly structured. is boring and unimaginative / is exciting and creatively designed (i.e., motivates to interact). includes unnecessary elements for control and interaction / includes an appropriate number of elements for control and interaction. offers too much and unnecessary information to keep me informed / offers exactly fitting and necessary information to keep me informed.

Example 2: The principle "conformity with user expectations" is made up of the following items: The interactive infographics … complicates orientation and use due to a non-uniform design of interaction elements / makes orientation and use easy due to a uniform design of interaction elements. contains text that is hard to read / contains easily readable text. complicates orientation and use due to bad color-coding / makes orientation and use easy due to good colorcoding. reacts slowly and with unpredictable turnaround times and reaction times / reacts fast and with predictable turnaround times and reaction times. includes interactive elements that contradict my expectations and habits / includes interactive elements that correspond to my expectations and habits.

Example 3: The principle "self-descriptiveness" is made up of the following items: The interactive infographics … offers no overview of interactive elements / offers a good overview of interactive elements. uses vague and unclear terms and abbreviations / uses terms and abbreviations that are easily understood. uses ambiguous and unclear symbols and icons / symbols and icons that can be easily understood. includes unnecessary comments and explanations / includes helpful comments and explanations.

Example 4: The principle "controllability" consists of the following items: The interactive infographics … allows for a cumbersome adoption of navigation tools / allows for easy adoption of navigation tools. offers difficult actions and changes using buttons / easy offers actions and changes using buttons. allows to undo single steps in a complicated way / allows to undo single steps easily. provides complicated and insufficient sorting, filtering and selection of information / provides simple and sufficient sorting, filtering and selection of information.                 

V. USABILITY STUDY In the presented usability test six interactive infographics have been evaluated by eight test persons [36]. These

infographics had been published in German-speaking newspapers from 2012 till 2016: two infographics had been published by “Kurier” from Austria, two infographics by “Spiegel” from Germany, one had been published by “Berliner Morgenpost” from Germany, and the sixth infographic had been published by “20min” from Switzerland. The infographics have been selected according to the activity model (section II.C). To ensure a balanced usability test two infographics have been chosen for each type: linear, nonlinear, and linear-nonlinear.

Although this is a quite small sample, we included examples from different kinds of media in all three countries, different topics, all three types of the activity model, and consequently different levels of complexity. Obviously the small number of infographics tested cannot represent all characteristics of possible occurrences. Furthermore, the “quality” of the specific implementation (e.g., design, depth of content, adherence to usability guidelines) has a great influence on the result – including a risk of introducing a bias to the results. Thus, the results are only partially representative – see also section VI.

The usability test has been carried out in January 2017. Eight persons at the age of 18 to 30 evaluated the six infographics.. Four test persons had already been using interactive infographics before. The other four test persons did not have previous experiences in using interactive infographics. However, all test persons were familiar with interactive systems and experienced users of the World Wide Web and its applications. Four persons were female, four persons were male. [ 36 ]

The test started by presenting the first interactive infographic to the test person. The test person explored the infographic individually, but had to perform a small number of specific tasks. According to the Thinking Aloud protocol he/she had to speak out loud, so the moderator could follow his/her comments and verbalized thoughts (and record them). Immediately after finishing all tasks the questionnaire had to be filled in by the test person on his/her own. This cycle was repeated for all six interactive infographics. A test session had an average duration of 70 minutes. [ 36 ]

In the following subsections some sample results of the usability test for selected infographics are presented. We have chosen one representative for each type of the activity model: ‘So sank die „Titanic“’ (linear, IV.A), ‘Interaktive Formel-1Grafik: Fahrer, Strecken, Rekorde’ (nonlinear, IV.B), Eishockey (linear-nonlinear, IV.C). We will present selected results of the questionnaire for the most significant and meaningful ergonomic principles introduced in section III.C.2: suitability for the task, conformity with user expectations, selfdescriptiveness, and controllability.

A. Results on Case 1: So sank die “Titanic”

The interactive infographic “So sank die „Titanic“” has been published by Spiegel Online in 2012 (Fig. 1) [ 38 ]. This infographic of linear type provides a Forward button and a Backward button. Users can step forward and backwards stepby-step among 11 individual images. Some images are animated, but the animation cannot be controlled by the user.

The results on the principle suitability for the task (Fig. 2) show that this infographic is reviewed as straightforward and clearly structured by all test persons (i.e., rated + or ++). Six persons had been motivated to interact and experienced its design exciting and creative. Furthermore, also six persons agreed that the number of elements for control and interaction are appropriate. Six persons indicated that this infographics offers exactly fitting and necessary information while two persons disagreed. The response during the Thinking Aloud protocol confirmed these results and provided more detailed qualitative feedback on those issues.

The response on the principle conformity with user expectations (Fig. 3) show that seven test persons agreed that this infographics makes orientation and use easy due to a uniform design of interaction elements. The majority of users (6 out of 8) could read the text elements easily. The other two users complained about the readability in animated images. Six persons could navigate easily within the infographic due to good color-coding. Two persons were irritated by the inconsistent use of the color red. The turnaround times and reaction times have been experienced differently. Four persons evaluated them positively, while the other four persons had been annoyed by slow reaction times. The majority (again 6 out of 8) persons indicated that the interactive elements correspond to their expectations and habits.

Self-descriptiveness

The interactive infographics: offers no overview of interactive… 1

The interactive infographics: uses hardly intelligible terms…

The interactive infographics: uses hardly intelligible symbols… 1 3

4 - 0

2 + ++ 4 7 5

3 6 8

The ergonomic principle self-descriptiveness has been experienced by all test persons in a very positive way (Fig. 4). Seven persons could easily identify the interactive elements. Terms and abbreviations, as well as symbols and icons could easily be understood and interpreted by all test persons.

B. Results on Case 2: Interaktive Formel-1-Grafik

The interactive infographic “Interaktive Formel-1-Grafik: Fahrer, Strecken, Rekorde” has been published by the Austrian newspaper Kurier on its website in 2016 (Fig. 5) [ 40 ]. It is an infographic of the nonlinear type that enables users to fully explore the infographic. Users can select a Formula-1 driver with a drop-down menu which provides them with information on the team, the Formula-1 debut, the results of the last season, etc.. Additionally, users can navigate through all Grand-Prix tracks by clicking on flags. The users can go forward and backwards using buttons and reset the infographic.

Fig. 5. Example nonlinear type: Interaktive Formel-1-Grafik: Fahrer, Strecken, Rekorde [ 40 ]

Suitability for the Task

The answers in the questionnaire concerning the principle suitability for the task (Fig. 6) show that the majority of test persons experienced this infographics as being complicated and confusing (5 out of 8). This negative experience might be caused by the fact that all test persons identified unnecessary elements for control and interaction. All users had been confused by the fact that additional functions (“maintain”, “exclude”) were provided when clicking on some interactive elements – with unclear functionality. Half of the users found this infographics as boring and unimaginative while the other half found it exciting. Three persons mentioned that this infographic does not provide the right amount of information. -

While evaluating the principle conformity with user expectations (Fig. 7) we found that five test persons mentioned that this infographic complicates orientation and use due to a non-uniform design of interaction elements. Some users simply could not find out where to click to induce a reaction by the infographic. The readability of text is good (for six persons). Opinions diverged on the ease of orientation and ease of use due to color-coding. While four people were satisfied, four people were irritated, especially by the usage of the same color for interactive and non-interactive elements. The majority (five out of eight) experienced the turnaround times and reaction times as to long and unpredictable. A large majority of the test persons (seven out of eight) was disappointed because several interactive elements contradicted their expectations and habits.

Self-descriptiveness

The interactive infographics: offers no overview of interactive…

The interactive infographics: uses hardly intelligible terms…

The interactive infographics: uses hardly intelligible symbols…

The interactive infographics: includes unnecessary comments… 4 4 4 4 2 0 4 1 2 2 2 1 3 2 2

1 6

8 0 - + ++

The results on the ergonomic principle self-descriptiveness (Fig. 8) show that six test persons expressed their opinion that this infographic does not offer a good overview of interactive elements. Half of the test persons was satisfied with the terms and abbreviations being used, but the other half was not. Only two test persons were satisfied with the use of symbols and icons. The others were dissatisfied with the use of symbols (especially the usage of flags). Although the infographic provides some comments and advices, four test persons felt the comments and explanations as being not helpful.

Controllability Suitability for the Task

The answers in the questionnaire regarding the principle controllability (Fig. 9) show that the majority of test persons (five out of eight) experienced the adoption of navigation tools being cumbersome. The Thinking Aloud protocol revealed that some persons had been confused by the fact that detailed information on the racing drivers as well as information on the tracks can be retrieved – but they do not influence each other. Users can undo their actions and use forward and backward buttons, but not all of them could find these buttons.

C. Results on Case 3: Eishockey

The third case that will be presented is an interactive infographic that has been published by the Swiss online news platform 20min on ice hockey in 2015 (Fig. 10) [ 41 ]. The type of the activity model is linear-nonlinear which combines the other two approaches. The infographic consists of a start page and graphics describing different issues on ice hockey. The navigation bar on the top enables users to freely move within the infographic. A linear progress is supported by forward and backward buttons. Red circle icons provide the users with additional information.

Fig. 10. Example linear-nonlinear type: Eishockey [ 41 ] - 0 1

Again we start with the results on the ergonomic principle suitability for the task (Fig. 11). The test persons agree that this infographic is straightforward and clearly structured. The majority found the number of elements for control and interaction appropriate. However, two persons mentioned that the infographic also includes unnecessary elements for control and interaction. Although half of the test persons was overwhelmed by too much information, the other half was quite satisfied with the amount of information provided.

Conformity with User Expectations

The interactive infographics: complicates orientation and use due to a…

The interactive infographics: contains text that is hard to read –… 1

The interactive infographics: complicates orientation and use due to bad… 1

The interactive infographics: reacts slowly and with unpredictable… 1

The interactive infographics: includes interactive elements that contradict… 1 - 0 1 + 2 2

2 ++ 8 4 7 7 5 4 6 8 8

The feedback concerning the principle conformity with user expectations (Fig. 12) was quite biased. All test persons were very satisfied. Only slight criticism could be found on the use of interactive elements because they contradicted the expectations and habits of two test persons.

The test persons had also been very satisfied with this infographic when responding to the questionnaire on the ergonomic principle self-descriptiveness (Fig. 13). Only one person did not identify the forward and backward buttons right from the beginning and rated the item “overview of interactive elements” negative. Most test persons commented the issues of self-descriptiveness very positive during the Thinking Aloud protocol.

Self-descriptiveness

The interactive infographics: offers no overview of interactive… 1 usTehsehianrtdelryacitnitveelliingfibolgerateprhmicss…: 1

The interactive infographics: uses hardly intelligible symbols… 1

The interactive infographics: includes unnecessary comments… 1 3 7 7 6 Fig. 13. Results for case 3: Self-descriptiveness

The interactive infographics: allows for a cumbersome… The interactive infographics: offers difficult actions and…

The interactive infographics: allows to undo single steps in a… - 0

2 +

++ Controllability 2

6 0

2 -

The interactive infographic on ice hockey performed also very well concerning the principle controllability (Fig. 14). It was very easy for all test persons to adopt to the navigation tools. Only two test persons needed more time than the others to adopt because they did not identify the navigation bar at the top immediately. Nevertheless, all test persons could perform changes and actions using the provided buttons without difficulties, including undoing operations.

D. Summary of Results

Summarizing the results of the usability test of all six infographics (including the other three examples not presented in detail here, but in [ 36 ]) reveals that users of infographics of the linear type do not necessarily need previous experience. The test persons perceived this type as straightforward and simple. The linear type provides a step-by-step experience and there are no additional, unnecessary elements of interaction which has been confirmed by the test results. Exploring the infographics corresponds to the expectations and habits of users (i.e., high conformity with user expectations). Both analyzed examples made orientation easy due to a uniform design and color-coding of the interaction elements. However, this type of infographics has a major problem in user experience: Since this kind of interaction is very simple, it risks being boring and uninspired because users would like to have more means of interaction

In contrary, nonlinear interactive infographics are found to be exiting and creative because they offer a large variety of possibilities to fully explore the infographics in a very individual way. However, this type risks to be perceived as being complicated and confusing. The test persons noticed that both examples that have been analyzed offer unnecessary control elements for interaction and non-essential information. They needed much more time to get familiar with the interaction elements and control tools. Nevertheless, a uniform design of the interactive elements can increase the user experience significantly. Users appreciate that they can move around and navigate within the infographics – as long as the infographics remains user-friendly.

Whereas the nonlinear model often requires previous experience – depending on the usability of the implementation – both examples of the linear-nonlinear type have shown that they can be easily used. The test persons found both examples of this type to be exciting, but at the same time evaluated them as being straightforward and having a clear design. An easy and fast adoption is supported by a combination of structured information delivery (linear activity) and individual exploration (nonlinear activity). Additionally, this effect is assisted by good usability, e.g., by uniform design and color-coding that facilitate orientation.

The most compelling success factors for appealing and usable interactive infographics are a clear and straightforward structure, an appropriate number of elements for control and interaction, a uniform design of interaction elements that have to correspond to the user expectations and habits, good colorcoding, terms and abbreviations as well as symbols and icons that can be easily understood, and navigation tools that can be easily adopted.

VI. FUTURE WORK

The presented results are based on the analysis of a quite small sample of six interactive infographics. A continuative study will analyze a much larger number of infographics. Again, a balanced usability test will have to analyze infographics of the linear, nonlinear, and linear-nonlinear type (activity model). To avoid biased results a widespread selection of infographics on various topics, published in different media (online newspapers and online magazines) will be tested to cover different style and quality of the implementation. Thus, there are a number of criteria that have to be considered while selecting the infographics, e.g., type of activity model, type of media, design, depth of content, publishing date, technology, and topic.

Furthermore, a larger number of test persons will be involved: persons of different age, different internet skills and familiarity with interactive designs, and different levels of experience of using (interactive) infographics. Since a test session should not last much longer than in this test (70 minutes), we will have to assign a number of infographics (e.g., six to a maximum of eight) at random while still ensuring a proper overall distribution of the criteria mentioned above.

Although the test method using Thinking Aloud and the adapted questionnaire based on ISO 9241/110-S was quite suitable, the continuative study will use eye tracking and/or another approach that is capable to track interactions (e.g., based on time stamps). An additional short questionnaire two weeks after the first questionnaire might help to analyze the influence of the usability and other parameters on the information recall.

VII. CONCLUSIONS

The user experience – notably the usability – of interactive information graphics in interactive online media was evaluated by performing a usability test on six interactive infographics. Eight test persons evaluated those infographics that had been published in online newspapers in Austria, Germany and Switzerland according to the Thinking Aloud protocol and a questionnaire following a modified version of the ISO 9241/110-S questionnaire. Based on the results of the usability test a number of success factors have been identified.

Data journalists and designers that use interactive infographics for storytelling in online newspapers and magazines – daily news or infographics for scrollytelling – may apply those success factors when designing new, compelling infographics. Although there are some fundamental influencing factors like the degree of interactivity (low, high, medium) and the activity model (linear, nonlinear, linear-nonlinear) the specific design and implementation improving the usability will boost the acceptance of the infographics – and the stories being told – among readers enormously.

References

C. Ware , Information Visualization: Perception for Design, 3rd ed.

Waltham : Elsevier, 2012 .

C. Chen , Information Visualization: Beyond the Horizon , 2nd ed.

London: Springer, 2006 .

N. Yau , Visualize This: The FlowingData Guide to Design, Visualization, and Statistics. Weinheim: Wiley Publishing, 2011 .

R. Spence , Information Heidelberg: Springer, 2014 .

Visualization: An Introduction , 3rd ed.

B. Shneiderman , "The Eyes Have It: a task by data type taxonomy for information visualization" Proceedings of the 1996 IEEE Symposium on Visual Languages , 1996 , pp. 336 - 343 .

[6] J. Gray , L. Bounegru , and L. Chambers (Eds.), Data Journalism Handbook. European Journalism Centre and the Open Knowledge Foundation , 2012 . http://datajournalismhandbook.org/ L. Matzat, Datenjournalismus: Methode einer digitalen Welt. Konstanz, München, UVK Verlagsgesellschaft, 2016 .

M. Lorenz , "Status and outlook for data-driven journalism" In Datadriven journalism: What is there to learn ? Amsterdam, European Journalism Centre, 2010 , pp. 8 - 17 .

Weber , M. Burmester , R. Tille (Eds.), Interaktive Infografiken . Berlin, Heidelberg: Springer Vieweg, 2013 , pp. 161 - 172 .

[10] M. Burmester , A. Wenzel, and R. Tille , "Navigation - Interaktion - Informationspräsentation. Rezeptions- und Nutzungsprobleme bei interaktiven Infografiken" In W . Weber, M. Burmester , R. Tille (Eds.), Interaktive Infografiken . Berlin, Heidelberg: Springer Vieweg, 2013 , pp. 105 - 134 .

[11] S. Zwinger , and M. Zeiller , "Interactive Infographics in German Online Newspapers" , In W. Aigner, G. Schmiedl, K. Blumenstein , M. Zeppelzauer , and M. Iber (Eds.), Forum Media Technology 2016 , CEUR Workshop Proceedings , vol. 1734 , pp. 54 - 64 . urn:nbn:de: 0074 - 1734 -7.

[12] A. Cairo , The functional art: an introduction to information graphics and visualization . Berkeley, CA: New Riders, 2013 .

[13] W. Weber , and A. Wenzel, "Interaktive Infografiken: Standortbestimmung und Definition" In W . Weber, M. Burmester , R. Tille (Eds.), Interaktive Infografiken . Berlin, Heidelberg: Springer Vieweg, 2013 , pp. 3 - 23 .

[14] E. Tufte , The Visual Display of Quantitative Information , 2nd ed. Cheshire, CT: Graphics Press, 2001 .

[15] R. Mazza , Introduction to Information Visualization. London: Springer, 2009 .

[16] W. Weber , "Typen, Muster und hybride Formen: Ein Typologisierungsmodell für interaktive Infografiken" In W . Weber, M. Burmester , R. Tille (Eds.), Interaktive Infografiken . Berlin, Heidelberg: Springer Vieweg, 2013 , pp. 25 - 37 .

[17] D. Roam , The Back of the Napkin: Solving problems and selling ideas with pictures . London: Marshall Cavendish , 2008 , pp. 138 - 139 .

[18] E. Segel , J. Heer , "Narrative Visualization: Telling Stories with Data" In IEEE Transactions on Visualization and Computer Graphics , vol. 16 , no. 6 , 2010 , pp. 1139 - 1148 .

[19] R. Sims , „Interactivity: A Forgotten Art ?“ In Computers in Human Behavior , vol. 13 , no. 2 , 1997 , pp. 157 - 180 .

[20] H-J. Bucher , "Online-Interaktivität - ein hybrider Begriff für eine hybride Kommunikationsform. Begriffliche Klärungen und empirische Rezeptionsbefunde" In: C. Bieber , C- Leggewie, Interaktivität. Ein transdisziplinärer Schlüsselbegriff. Frankfurt am Main: Campus Verlag , 2004 , pp. 132 - 167 .

[21] W. Weber , M. Burmester , R. Tille (Eds.), Interaktive Infografiken . Berlin, Heidelberg: Springer Vieweg, 2013 .

[22] J. George-Palilonis , and M. Spillman , "Storytelling with Interactive Graphics: An Analysis of Editors' Attitudes and Practices" In Visual Communication Quarterly , vol. 20 , no. 1 , 2013 , pp. 20 - 27 .

[23] P. Schumacher , Rezeption als Interaktion: Wahrnehmung und Nutzung multimodaler Darstellungsformen im Online-Journalismus . BadenBaden: Nomos , 2010 .

[24] M. Burmester , M. Mast , R. Tille , and W. Weber , "How users perceive and use interactive information graphics: an exploratory study" In Proceedings International Conference Information Visualization 2010 , July 26-29, London, 2010 , pp. 361 - 368 .

[25] S. Zwinger , J. Langer , M. Zeiller , "Acceptance and Usability of Interactive Infographics in Online Newspapers" In Proceedings International Conference Information Visualisation 2017 , July 11-14, London, 2017 , pp. 176 - 181 .

[26] J. Nielsen , Usability 101: Introduction to Usability. Nielsen Norman Group, 2012 . https://www.nngroup.com/articles/usability-101 - introduction-to-usability/

[27] International Organization for Standardization, Ergonomics of humansystem interaction - Part 11 : Usability: Definitions and concepts . ISO/DIS 9241-11 : 2015 .

[28] F. Sarodnik , and H. Brau , Methoden der Usability Evaluation: Wissenschaftliche Grundlagen und praktische Anwendungen , 2nd ed. Bern: Hans Huber, 2011 .

[29] D. Norman , J. Nielsen, The Definition of User Experience (UX) . Nielsen Norman Group, n.d. https://www.nngroup.com/articles/definition-userexperience/

[30] International Organization for Standardization, Ergonomics of human system interaction - Part 210: Human-centered design for interactive systems . ISO/DIS 9241-210 : 2009 , 2009 .

[31] T. Tullis , B. Albert, Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics , 2nd ed. Waltham, MA: Morgan Kaufmann, 2013 .

[32] J. Nielsen , and K. Pernice , Eyetracking Web Usability. Berkeley, CA: New Riders, 2010 .

[33] J. Nielsen , Thinking Aloud: The #1 Usability Tool . Nielsen Norman Group, 2012 . https://www.nngroup.com/articles/thinking-aloud-the-1 - usability-tool/

[34] C.H. Lewis , Using the "Thinking Aloud" Method In Cognitive Interface Design (Technical report) . IBM. RC-9265 , 1982 .

[35] T. Stapelkamp , Informationsvisualisierung: Web-Print-Signaletik. Berlin: Springer Vieweg, 2013 .

[36] J. Langer , Analyse der Usability von interaktiven Infografiken im deutschsprachigen Online-Journalismus . Bachelor thesis , Eisenstadt: University of Applied Sciences Burgenland, 2017 .

[37] Kurier . Vegan auch bei Fleischessern beliebt , 2015 . Retrieved December 15, 2016 from https://kurier.at/genuss/vegan-auch -beifleischessernbeliebt (offline).

[38] Spiegel . So sank die Titanic , 2012 . Retrieved September 15 , 2017 from http://www.spiegel.de/flash/flash-28319.html.

[39] Berliner Morgenpost . WM 2014 , 2014 . Retrieved September 15 , 2017 from http://interaktiv.morgenpost.de/wmspieler. Checked September 15 , 2017 .

[40] Kurier. Interaktive Formel-1-Grafik: Fahrer, Strecken, Rekorde, 2016 . Retrieved September 15 , 2017 from

[41] 20min. Eishockey , 2015 . Retrieved September 15 , 2017 from http://www.20min.ch/interaktiv/vizualne/2015_03_Eishockey/index_CH E.html.

[42] Spiegel . Chronologie der Katastrophe in Fukushima I (Daiichi), n .d.. Retrieved September 15 , 2017 from http://www.spiegel.de/flash/flash25484.html.