Reimagining Design

New digital interfaces, such as the infinite canvas, constantly change the way we access information, communicate, and collaborate (McCloud, 2000). Thus, it is important to explore their possibilities for designing interactive content and data representations (Bret,2011; Hohman et al., 2020). This thesis, investigates the infinite canvas as a medium for collaborative and interactive articles with the following research questions:

• What possibilities does an infinite canvas provide for the design of interactive articles?
• What visualization and interaction techniques can facilitate communication, engagement, creativity, and collaboration on an infinite canvas?
• How to design for collaboration in interactive articles on an infinite canvas (i.e., through group activities)?

To address the questions, this thesis adopts an human-centered design study approach (Sedlmair et al., 2012). It iteratively explores the possibilities of interactive articles on the infinite canvas to create engaging and collaborative experiences that resonate with users and effectively communicate information.

To do so, a literature review of interactive articles and their use of collaboration built the foundation for the design of explorable interactive and collaborative content. As a next step, a deeper analysis of the infinite canvas and its approach to represent information has been conducted. To clearly articulate answers to the research questions, group activities that focus on insight generation and the formation of new ideas have been identified as the target domain. Next, the possibilities and limitations of Miro as an infinite canvas environment for creative collaboration have been investigated. Further insights into the infinite canvas to gather and extract information were achieved through the development and evaluation of an application for Miro. This application was evaluated in a thinking-aloud user study with semi-structured interviews. In the end, this thesis introduces a design of a refined application that uses more advanced interaction and collaboration features based on the insights from previous steps.

Conclusion

In contrast to static text, interactive environments allow the creation of intuitive representations that use visual patterns to address our natural cognition and perception (Johnson, 2021; Ware, 2020). The infinite canvas provides a flexible space that fosters engaging interactions. Participants can fully immerse themselves in the design space,becoming direct contributors to an interactive article’s content.

However, infinite canvases may be less intuitive for some users, designers, and developers alike. By adhering to universally applicable Gestalt laws, content can be intuitively organized, making it easier to navigate and understand information. Techniques like collaborative annotations and spatial organization can support collaborative and creative thinking, enabling groups to work together, share insights, and generate new knowledge. Thus, we identified the importance of facilitators who set up the collaborative space and guide the group through the activities. Participants or collaborators, on the other hand, are individuals and part of a group that share a common goal with other participants and contribute their ideas and perspectives. Furthermore, in addition to collaboration in time and space as proposed by Heer et al., 2008, collaborators on an infinite canvas can also work on one shared artifact or on multiple individual artifacts.

In the context of visual analytics, the infinite canvas acts as a visual database where users directly interact with data entities and relationships. In Miro, this data can be used for information visualizations which to provide deeper insights into the content on the infinite canvas. Early tests of a refined application, that combines semantic similarity (Pennington et al., 2014) of collaborators perspectives with Gamestorming (Gray et al., 2010) as a framework, show potential in facilitating more direct collaboration.

Future Work

First tests of a refined application, built on the results from the previous steps, show promising results for building a semantic space from the data created from collaboration on the infinite canvas. Through clustering it is possible to explore this semantic space.

Through annotating images in Miro participants create a semantic space.

These notes are then used to cluster images based on their semantic similarity. Participants have to find those clusters in groups or individually. This allows them to reflect upon the similarity between the images and find hidden patterns.

In the end, it is possible to explore the semantic space. For example, it is possible to show the first two words of the semantic space that no participant has entered. This allows them to further reflect on the similarity between the images.

Awards

• 5. International Conference on Creative\Media/Technologies (IConCMT) 2023 (German)
  • Different Brilliant: Award for theses that represent best-practice approaches to applied and artistic research projects in the field of media, design and media creation.

Tools and Languages

• Miro
• React | Next
• Typescript
• D3.js
• VS Code

Links and Resources

References

• Bret, V. (2011). Explorable explanations. Retrieved April 27, 2022, from http://worrydream.com/ExplorableExplanations
• Gray, D., Brown, S., & Macanufo, J. (2010). Gamestorming: A playbook for innovators, rulebreakers, and changemakers. O’Reilly Media, Inc.
• Heer, J., Van Ham, F., Carpendale, S., Weaver, C., & Isenberg, P. (2008). Creation and collaboration: Engaging new audiences for information visualization. In A. Kerren,J. T. Stasko, J.-D. Fekete, & C. North (Eds.), Information visualization (pp. 92–133). Springer Berlin Heidelberg. https://doi.org/10.1007/978-3-540-70956-5_5
• Hohman, F., Conlen, M., Heer, J., & Chau, D. H. (2020). Communicating with Interactive Articles. Distill. https://doi.org/10.23915/distill.00028
• Johnson, J. (2021). Reading is unnatural. In Designing with the mind in mind (pp. 79–101). Elsevier. https://doi.org/10.1016/B978-0-12-818202-4.00006-4
• McCloud, S. (2000). Reinventing comics. William Morrow Paperbacks.
• Pennington, J., Socher, R., & Manning, C. (2014). Glove: Global vectors for word representation. Proceedings of the 2014 Conference on Empirical Methods in Natural Language Processing (EMNLP), 1532–1543. https://doi.org/10.3115/v1/D14-1162
• Sedlmair, M., Meyer, M., & Munzner, T. (2012). Design study methodology: Reflections from the trenches and the stacks. IEEE Transactions on Visualization and Computer Graphics, 18(12), 2431–2440. https://doi.org/10.1109/TVCG.2012.213
• Ware, C. (2020). Information visualization: Perception for design (4th ed.). Elsevier. https://doi.org/10.1016/B978-0-12-812875-6.00011-6