UBC Undergraduate Research

Connecting user engagement and interactive visuals : an analysis of animated environmental reports Tse, Janet Apr 6, 2016

Your browser doesn't seem to have a PDF viewer, please download the PDF to view this item.

Item Metadata

Download

Media
52966-Tse_Janet_GEOG_419_2016.pdf [ 1.15MB ]
Metadata
JSON: 52966-1.0300461.json
JSON-LD: 52966-1.0300461-ld.json
RDF/XML (Pretty): 52966-1.0300461-rdf.xml
RDF/JSON: 52966-1.0300461-rdf.json
Turtle: 52966-1.0300461-turtle.txt
N-Triples: 52966-1.0300461-rdf-ntriples.txt
Original Record: 52966-1.0300461-source.json
Full Text
52966-1.0300461-fulltext.txt
Citation
52966-1.0300461.ris

Full Text

        CONNECTING USER ENGAGEMENT AND INTERACTIVE VISUALS: AN ANALYSIS OF ANIMATED ENVIRONMENTAL REPORTS                  Janet Tse, University of British Columbia   Report prepared at the request of the Vancouver Airport Authority, in partial fulfilment of Geography 419: Research in Environmental Geography, for Dr. David Brownstein.  April 6th, 2016     Executive summary   In collaboration with the Vancouver Airport Authority, this project looks at how visual communication can be utilized in environmental reporting. It specifically asks how interactive features can be used to enhance user engagement. By delving into this question, this project aims to help YVR make their environmental reports more visually appealing.   In terms of research methods, a comparative analysis was created between two reports from two different local organizations: Vancity Credit Union and UBC. These reports were chosen due to their interactive, yet distinctive, layouts. The former contained a wide range of visuals while still featuring a standardized linear report; the latter was “map­like” and paved way to analyze cartographic framings in report design. Two focus groups were held to analyze how users engaged with the two reports; a literature review and expert interview were employed to supplement background information.  The findings show that participants in the focus groups preferred the Vancity report to the UBC one, mostly due to the rich colourful visuals being prominent in Vancity. However, both reports were well­received in general, with UBC complimented for its simple design as well. The findings also looked deeper into underlying visual elements that influenced user engagement.   Based on the research, three recommendations were made: designing visuals that were unique but still conveyed a sense of familiarity for users; inputting a customization section to enhance user inclusiveness; and gaining feedback from users themselves. Advice for further research efforts were also given.                1  Introduction   Environmental reporting, although still a relatively new concept, has become an important communication method for organizations to publicly expose their environmental management planning and invite the public in environmental discussions (​del​ Mar​ Alonso­Almeida et. al., 2013). ​Organizations, such as the Vancouver Airport Authority, are constantly looking for ways to improve how information is presented in annual progress reports.  Often, text­heavy reports are generated, resulting in decreased effectiveness of the story being conveyed.  This leads me to my research question: how can interactive visuals be used to engage users when designing environmental reports? While the purpose of this project is to evaluate the best practices in environmental reporting, it is important to understand the level of engagement that users have with different visuals. In this project, I explore my research question by doing a comparative analysis between two interactive ­ yet, very different ­ annual reports from Vancity Credit Union and UBC. The former is a linear, standard report while the latter resembles “map­like” features. Using focus groups to do a comparative analysis between the two, I hope to fill in the knowledge gap on how unconventional, interactive visuals can engage with audiences. First, I outline the literature review needed to supplement the background information of this research. Next, I explain my research methods, which includes an expert analysis interview and focus groups. I will then discuss my findings and analysis. Finally, based on the research, I will recommend how interactiveness can be used in environmental reports and suggest possible research avenues planted from this study.   Literature Review  Despite an increasing amount of organizations having their reports web­based, there has been little literature found on the extent of interactive visuals being used in environmental reports. As such, the following review serves as proxy information to understand the concepts at large.    Understanding the Use of Interactiveness   The potential for storytelling in environmental reports can be enhanced through the use of interactive web features, particularly in a society driven by digital trends, rapid communication and image consumerism (Lazard and Atkinson, 2015 ; Rodriguez Estrada and Davis, 2014). Apart from the social influences of images and techology, there is also cognitive interconnectedness between the two. Lankshow et. al (2012) point out that while people are visually­wired to physical objects in the real world, the concept of being visually­wired to objects on a computer screen is still new. Web movements and animation mimic reality, therefore establishing 2  interconnections between human cognitive systems and computer systems by enabling ‘common imagery’ to stimulate quicker recognition in web interactions (Lankshow et. al, 2012).   There is, however, more to interactiveness other than obvious digital tools when it comes to designing reports. Numerous scholars attribute user engagement as being the center of visual design, regardless of the amount and/or types of visuals implemented (Lazard and Atkinson, 2015; Amran and Ooi, 2014 Rodriguez Estrada and Davis; Isemann and Kim, 2006). Web interactiveness is also about ​interacting ​with users by including them in design processes (Bederson, 2011). One way of including the user is through the customization of reports, as suggested by Isenmann and Kim (2006). These tailored reports improve sustainability communication by removing redundant information for the stakeholder. Methods such as stereotyping​ (dividing users into groups based on their needs and interests) and individualization ​(allowing users to create their own reports by choosing the information they prefer) (Isenmann and Kim, 2006).   Maps as Reports? Implementing Cartographic Frameworks in Report Design   Maps are ubiquitous ways in contextualizing and synthesizing data (Fechner and Kray, 2014), and the emergence of technologies have made maps more interactive, explorable and participatory than ever (Fechner and Kray, 2014​). Some scholars (Allen and Queen, 2015; Fechner and Kray, 2014) allude to how map­like data visualizations and cartographic framings can be helpful in user engagement, which might be helpful in designing environmental reports as well.   According to Fechner and Kray (2014, pp. 19), “Since everyone is inherently familiar with space and time, map­like visualizations can enable many people to engage with complex societal topics.” Using these time­space concepts, Fechner and Kray (2014) explore how interactive geo­visualizations can facilitate open government data and citizen engagement, such as cases where maps were used as online platforms to initiate dialogues about local relations. Allen and Queen (2015) explain how cartographic framings offer a multi­spectrum of narratives; one end of the spectrum could be unifying different ideas while the other end constructs “an interactive floor plan” (pp. 87) that portrays different sources and their bias. We will see later on how Allen and Queen’s concept is implemented into map­like reports during the comparative analysis.  In one study, Benderson and Boltman (2003) designed two spatial maps of a family tree, one with animated features and one with non­animated features. This was to examine if animation would assist users in building mental maps of spatial information. The results showed that participants were able to reconstruct mental maps of the family tree better when presented with animation. Compared with the non­animated family tree, the animated version not only 3  helped reduce the number of errors but also less serious ones (eg. confusing faces together). At the same time, this study also acknowledged surprising results of how participants did not have a preference between animated and non­animated features as they showed frustration during the experiment, focusing more on “better ways” to explore the family tree instead. Moreover, this study did not ask participants to compare the two trees; rather, they were asked about the advantages and disadvantages of animation instead of ​their preferences​. Consequently, there is still a significant knowledge gap between user preferences and interactive spatial data visualization.  Research Methods  For this research project, I conducted an expert interview with Adrien Liem, Manager of Digital Communications at UBC Communications. Originally, the plan was to conduct at least three interviews with experts but many either did not reply or wrote back expressing time conflicts. Each participant was emailed with a letter of invitation for an interview and a consent form. They were assured that the interview was conducted with research purposes only and that they may request to remain anonymous. When I met up with Adrien, I reiterated the conditions of the interview and transcribed notes using a laptop.   Much of the literature I came across mentioned the importance of user and/or audience engagement. ​Moreover, I reflected on the emphasis placed by my community partner on the importance of effective storytelling​. As such, I decided to pursue my primary research based on those very concepts by asking questions from the audiences themselves. I planned two focus groups for a comparative analysis of two reports from two local organizations. The first group consisted of students from UBC recruited through Facebook and the other consisted of working professionals recruited through LinkedIn. Each group had five participants, who were all compensated for a slice of pizza (sometimes two). Every participant was also sent a letter of invitation and a consent form. I outlined the conditions of the focus groups, in which participants will be sharing their thoughts collectively.  The two annual reports I chose came from UBC and Vancity Credit Union. I chose to use local organizations since examining local case studies was first suggested to me by my community partner at the inception of this project. I also consulted the literature review as to how I would go about in choosing the two reports. Both organizations employed interactive features on their online­based annual reports, had a range of topics to written and allowed users to customize the report, therefore sharing some similarities. Among the differences, UBC’s report was chosen due to its map­like layout, where each topic was placed like a location on a map. The design of the main page is also simple and clean. The report also consists of two viewing 4  options: story­view (the “map” version) and timeline view. The two viewing options are heavily reminiscent to multi­spectrum cartographic framing in digital humanities echoed by Allen and Queen (2015) in the literature review.  The VanCity report was picked largely due to its standard, linear approach (essentially not map­like) while still utilizing heavy visual communication. By offering a customization of the report and an overview of what the report entails, this employed the stereotyping and individualization concepts highlighted by Isemann and Kim (2006). The report also featured a variety of visual tools, such as infographics and a video. By comparing these different styles of interactive, visual reports, this comparative analysis between the focus groups hopes to fill in the knowledge gap about user preferences when it comes encountering environmental reports.   To ensure I conducted successful focus groups, I consulted grey literature online on proper focus group etiquette. Before meeting up, I gave participants around three weeks to study the two reports and asked them to jot down notes. On the day of the focus groups, we went over the reports again as a group, with participants sharing their independent observations.  Findings and Discussion   Participants   I will first begin by pointing out some of the basic facts and details about the participants. Prior to the meetup, I had each participant write down their preferred report on a small piece of paper before discussing it as a group. This was to avoid any influence from other people’s opinion or feel pressured into agreeing with everybody else. I then collected each paper without sharing who chose what. Throughout the weeks prior to the focus groups, the average time all participants spent looking at the reports altogether was around 1 hour and 13 minutes, the lowest being 50 minutes and the highest being 2 hours and 15. The students’ age range was from 20 to 23 years old and all were attending UBC. The working group ranged from 24 to 32 years old and each worked in a different sector. In the following section, I merge and synthesize the open­ended discussions from the focus groups. In each focus group, 60% (three out of five) preferred the Vancity report, although it is worth mentioning that one student participant felt “undecided” but chose Vancity based on an ultimate decision. The reasons for preferring Vancity was reflected similarly between the two groups, reasons including the use of vibrant colours, well­drawn graphics and accessible content. More analysis of these reasons will be discussed in the following section.   5  Comparative Analysis of Both Reports    Based on research conducted, it appears that ‘less is more’ when it comes gaining the interests of users. Adrien Liem of UBC Communications mentioned that one of the best practices in making a report visually appealing is using simple animation that allows users to navigate. This is reflected in which the participants from both focus groups ­ regardless of preference ­ credited UBC’s simple and clean layout (Figure 1). This kind of simplicity can also be extended to Vancity’s summary of key points on the main page (Figure 1). Of course, what is considered “simple” is left to individual interpretation, but the common themes found in focus group is that having less clutter made the web pages more accessible to content at large.    Figure 1. ​The main pages of the two reports. The top one shows a section of the main page belonging to Vancity, its key results and figures shown. The bottom is UBC, with icons spread out through the main page and selected topics shown on top.  Focusing on the big picture   Prior to the focus groups, I had assumed that there would be special attention paid towards certain visuals and other significant details. Ultimately, there was, as every participant watched  6  the Vancity video to an extent (Figure 2). However, as one student participant states, “I watched the video because I don’t like to read a lot.” Others agreed that the video did a good job at summarizing the details in a short amount of time. Judging from the focus groups, there is an impact as to how certain visuals and small details can supplement the big picture at large. This may seem obvious, but the engagement of the ‘big picture’ can determine the extent of how much the user wants to dive deeper into the report. For instance, participants stated that they spent more time exploring their preferred report than the less preferred one. While each report was customizable to the user in its own way, user preference was largely stemmed on what the ​overall ​report looked like.  Figure 2. ​A screenshot of the video shown at the top of Vancity’s main page for the annual report.  Interactiveness and Customization   It is first worth pointing out that while most preferred the Vancity report, there was still a significant group of participants that favoured UBC’s (at 40% for each group, which is two out five participants). Albeit my focus group sizes were small, but participants also showed no strong favouritism towards a certain report as many saw appeal in their lesser preferred one. At some point during the working professional focus group, there was a discussion on how Vancity can utilize some of UBC’s “branching out” iconography (Figure 1 and Figure 3); likewise, there was mentioning as to how UBC can implement some ideas from Vancity’s graphic designs and colour scheme.   In evaluating the interactiveness of the reports, a key part of this research was seeing if the map­like visualizations of UBC’s report had an effect on user interest when compared with the top­to­bottom (but still interactive) approach made by Vancity. One working professional participant who favoured the UBC report mentioned that compared to UBC, the Vancity report had too many things and details happening at once, with story features, articles, diagrams and messages all on one page. When comparing the two reports side by side, the participant felt 7  that the spreading out of icons (Figure 1) made it easier to navigate. Although not made explicit that the report did indeed resemble a map, UBC­favoured participants enjoyed how the report was not like "traditional" report that was filled with pages; rather, each section was divided up into separate links, which made it easier to follow. Two participants ­ one from each of the two groups ­ mentioned that the spatiality of the icons and the timeline feature within the UBC report were effective ways in seeing how things were connected. Another ­ a student ­ found engagement in hovering over the images and seeing which topic the image connects to, alluding this to a kind of ‘guessing game’ (see Figure 3 for depiction).    Figure 3. ​A depiction of how UBC’s report uses animation. The top shows the main page with no image being hovered over by the mouse. Once the mouse hovers over the third image from the left on the bottom image, it stands out with a faint line that connects to the topic of interest at the top.  This suggests these map­like visualizations do indeed help users connect the dots between documents. I did not measure in what ways the time­space concepts in maps poised by some scholars (Frechen and Kray, 2014; Allen and Queen, 2015) played a role in engaging 8  participants, but it does seem to correlate with the ‘big picture’ theory mentioned earlier. As Adrien mentions, one of the challenges in generating a report is establishing a type of uniformity across data from different departments. By having a map­like visual, this type of uniformity can be established through the interconnectedness of different documents.  Thus, it is evident how these geospatial elements can help users see the connections between different messages while also helping communicators establish how these messages are different yet interconnected.    As well, from what I gather from my participants, they want the main ideas fitted into one page and having cartographic framework can fulfill that objective. The ‘guessing game’ brought up by the student participant also hints at the participatory experience derived from the map­like features. One student participant did state that whenever they clicked on an icon that linked them to another page, it was a little inconvenient to go back to the previous page to view the main page again, although it was discovered later that the main topics were found under the Full Annual Report ​button (seen in Figure 1). However, this leans more towards elements of design rather than the effects of cartographic framings.   I credit that the overall preference for Vancity stems from aspects of familiarity. As seen in Figure 1, it is no surprise that Vancity’s vibrant use of colours, interesting graphics and range of digital tools were widely praised. However, participants also enjoyed the key points being on one page and the neat organization of content. Many also said that the balance between text and visuals were just right. During an informal conversation, one community partner mentioned he “did not care about maps” and would rather see the data as it is. This passing conversation, along with the ways in which some participants preferred more conventional mechanisms of page­organized information, suggests that map­like reports can also be too experimental for some users. Several participants have stated that both reports are unique and different from what they are used to, but the slight preference for Vancity seems to be that it combines both uniqueness and familiarity within the report.  Moving onto customization, both reports utilized a build­your­own­report tool as a way for users to customize their viewing. In comparing the tools, most participants preferred the one implemented by Vancity (Figure 4). Many found it more user­friendly to just choose the topics through the click of a button. However, as the focus groups discussed further about this topic and played around with the functions, some pointed out that they did not like the mandatory download button in order to view the report (Figure 4). They mentioned the unnecessary file downloading as well as the fact that various internet speeds can slow the download, thereby slowing the viewing process even more. In sum, Vancity’s ease of selecting topics of interest was preferable but most acknowledged that the ​customized viewing​ done by UBC was better. It is obvious that a customized report is modernized way of engaging the user. However, the 9  observations made by participants showed that there are several underlying features ­ from download speeds to device usage to patience levels of users ­ also need to be considered.   Figure 4. ​A side­by­side comparisons of how both reports implement the tool­customization tool. On the left, Vancity offers a checklist to help users prioritize their topics of interest. The end results in a downloaded customized report (seen at the bottom). On the right, UBC’s report allows users to add their interested topic in saved section (highlighted in blue).   Recommendations and Future Research   Based on my research, I have three main recommendations:   1) Implement “uniquely familiar” strategies in designing reports​. This may seem like an oxymoron, but to reiterate my findings as to why Vancity was the overall preferred reports by the two focus groups, it was shown that participants liked the combination of a standardized organized layout and unconventional visuals. It should also be pointed out that while participants had their critiques with each report, there was no overall strong dissatisfaction. UBC’s report was also credited for its unique and simple layout, which made the report accessible to participants as well.   I also believe there is no need to implement a heavy use of animated features when it comes defying conventional methods. The two reports used subtle animation and when asked to list the best features from each report, participants commented on elements like easy navigation. This reflects back to test subjects in Benderson and Boltman’s (2003) study who showed no real preference to animated and non­animated features 10  when they found the spatial maps user­ unfriendly in general. Using animation as a way to supplement easy navigation and user engagement seems to be a better approach.   2) Include a customization tool​. This tool was well­received from both focus groups as participants felt like their needs were considered. Feedback from participants on this tool showed that Vancity’s customized checklist was preferred, but when it came to viewing the tailored report, participants favoured how UBC did not automatically download the report. I would recommend having a ‘download option’ while implementing UBC’s way of saving the links for web page browsing. Having a customized option is also an effective way at engaging with different stakeholders.   3)  Get feedback. ​In response to filling the knowledge gap about user engagement in environmental reporting, this comparative analysis gains insight as to what users look for in a report. However, I am only scratching the surface. Initially, I had planned on developing a framework to see what users want, but now I believe a better approach is asking the users themselves! One way is having a feedback section about the report. Another way, as one classmate informally suggested, is the use of social media, where the amount of likes, tweets and analytics can showcase the idea of how the report is received.  There are a few possible research avenues that can be stemmed from this study. First and foremost is looking at any other kind of unconventional data visualization methods that can be made possible in environmental reporting, such as dashboards (the growing trend in Tableau comes to mind). The second research recommendation goes back to social media. I have mentioned how social media can help generate user feedback, but what other ways can it be used to enhance environmental reporting? Finally, as this research project has been about visuals, it would be interesting to analyze the different use of wordsmith in environmental reporting. As this research project has examined unconventional methods in reports, how would storytelling in environmental reports differ between technical writing and copy­writing, for example? Analyzing the use of language in environmental reports can provide another perspective into user engagement.         11  References  Allen, T. & Queen, S. (2015). Beyond the Map: Unpacking Critical Cartography in the Digital Humanities. ​Visible Language, ​49(3), 79­98. Amran, A. & Ooi, S.K. (2014). Sustainability Reporting: Meeting Stakeholder Demands. ​Strategic Direction​, 30(7), 38­41.   Bederson, B.B. (2011). The Promise of Zoomable User Interfaces. ​Behaviour & Information Technology​. 30(6), 853­866.   Bederson, B.B. & Boltman, A. (2003) Does Animation Help Users Build Mental Maps of Spatial Information? In: ​The Craft of Information Visualization: Readings and Reflections​. San Francisco, CA: Morgan Kaufmann, 87­94.   del Mar Alonso­Almeida, M., Llach, J. & Marimon, F. (2013). A Closer Look at the ‘Global Reporting Initiative’ Sustainability Reporting as a Tool to Implement Environmental and Social Policies: A Worldwide Sector Analysis. ​Corporate Social Responsibility Environmental Management​, 21(6), 318­335.  Fecher, T. & Kray, C. (2014). Geo­referenced Open Data and Augmented Interactive Geo­visualizations as Catalysts for Citizen Engagement. ​JeDEM​, 6(1): 14­35. Web. Available from: <​www.jedem.org/index.php/jedem/article/view/283/348> [30 March 2016]  Isenmann, R. & Kim, K.C. (2006) Interactive Sustainability Reporting: Developing Clear Target Group Tailoring and Stimulating Stakeholder Dialogue. In: Schaltegger, S., Bennett, M. & Burritt, R. ​Sustainability accounting and reporting​. Springer, 533­555. Available from: <​https://www.researchgate.net/profile/Ralf_Isenmann/publication/227197782_Interactive_Sustainability_Reporting._Developing_Clear_Target_Group_Tailoring_and_Stimulating_Stakeholder_Dialogue/links/544bf0c60cf24b5d6c4091c0.pdf​> [29 January 2016]  Lankow, J., Ritchie, J. & Crooks, R. (2012). ​Infographics: the power of visual storytelling​. Hoboken, NJ: John Wiley& sons Inc.   Lazard, A. and Atkinson, L. (2014). Putting Environmental Infographics Center Stage: The Role of Visuals at the Elaboration Likelihood Model's Critical Point of Persuasion. ​Science Communication​, 37(1), 6­33.  12  Rodríguez Estrada, F.C. & Davis, L.S. (2015). Improving Visual Communication of Science Through the Incorporation of Graphic Design Theories and Practices Into Science Communication. ​Science Communication​, 37(1), 140­148.    13 

Cite

Citation Scheme:

        

Citations by CSL (citeproc-js)

Usage Statistics

Share

Embed

Customize your widget with the following options, then copy and paste the code below into the HTML of your page to embed this item in your website.
                        
                            <div id="ubcOpenCollectionsWidgetDisplay">
                            <script id="ubcOpenCollectionsWidget"
                            src="{[{embed.src}]}"
                            data-item="{[{embed.item}]}"
                            data-collection="{[{embed.collection}]}"
                            data-metadata="{[{embed.showMetadata}]}"
                            data-width="{[{embed.width}]}"
                            async >
                            </script>
                            </div>
                        
                    
IIIF logo Our image viewer uses the IIIF 2.0 standard. To load this item in other compatible viewers, use this url:
http://iiif.library.ubc.ca/presentation/dsp.52966.1-0300461/manifest

Comment

Related Items