How to figures
Interaction design is a largely visual discipline. So too then are HCI papers. We need to craft and tell visual stories.
This slide deck provides a collection of different types of visuals common to HCI papers. Let’s learn from the best.
For the most part, I’ve focused on positive examples rather than negative ones (in part, out of sensitivity to authors); however, we can learn from both.
Please email jonf@cs.uw.edu to contribute more examples. 💜
This document is based on a similar one I made as a professor at the University of Maryland.
If you enjoyed this guide, check out our “How to Videos” guide as well!
HCI systems Papers are visual stories
In the following slides, take a look at how much paper real estate is dedicated to imagery. We are visual storytellers.
Chiao Fang, Vivian Hsinyueh Chan, and Lung-Pan Cheng. 2022. Flaticulation: Laser Cutting Joints with Articulated Angles. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 7, 1–16. �https://doi.org/10.1145/3526113.3545695
Muhammad Abdullah, Romeo Sommerfeld, Bjarne Sievers, Leonard Geier, Jonas Noack, Marcus Ding, Christoph Thieme, Laurenz Seidel, Lukas Fritzsche, Erik Langenhan, Oliver Adameck, Moritz Dzingel, Thomas Kern, Martin Taraz, Conrad Lempert, Shohei Katakura, Hany Mohsen Elhassany, Thijs Roumen, and Patrick Baudisch. 2022. HingeCore: Laser-Cut Foamcore for Fast Assembly. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 10, 1–13. https://doi.org/10.1145/3526113.3545618
Shan-Yuan Teng, K. D. Wu, Jacqueline Chen, and Pedro Lopes. 2022. Prolonging VR Haptic Experiences by Harvesting Kinetic Energy from the User. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 39, 1–18. https://doi.org/10.1145/3526113.3545635
Liang He, Xia Su, Huaishu Peng, Jeffrey Ian Lipton, and Jon E. Froehlich. 2022. Kinergy: Creating 3D Printable Motion using Embedded Kinetic Energy. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 69, 1–15. https://doi.org/10.1145/3526113.3545636
Litao Yan, Miryung Kim, Bjoern Hartmann, Tianyi Zhang, and Elena L. Glassman. 2022. Concept-Annotated Examples for Library Comparison. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 65, 1–16. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545647
Vivian Shen, Tucker Rae-Grant, Joe Mullenbach, Chris Harrison, and Craig Shultz. 2023. Fluid Reality: High-Resolution, Untethered Haptic Gloves using Electroosmotic Pump Arrays. In Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology (UIST '23). Association for Computing Machinery, New York, NY, USA, Article 8, 1–20. https://doi.org/10.1145/3586183.3606771
Karl Willis, Eric Brockmeyer, Scott Hudson, and Ivan Poupyrev. 2012. Printed optics: 3D printing of embedded optical elements for interactive devices. In Proceedings of the 25th annual ACM symposium on User interface software and technology (UIST '12). Association for Computing Machinery, New York, NY, USA, 589–598. https://doi.org/10.1145/2380116.2380190
Exemplary Figure 1s
Figure 1s are the most important figures in your paper. They should capture the essence of your work and the imagination and attention of your reader.
Chiao Fang, Vivian Hsinyueh Chan, and Lung-Pan Cheng. 2022. Flaticulation: Laser Cutting Joints with Articulated Angles. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 7, 1–16. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545695
Kazemitabaar, M., McPeak, J., Jiao, A., He, L., Outing, T., Froehlich, J. E. (2017). MakerWear: A Tangible Approach to Interactive Wearable Creation for Children. Proceedings of CHI 2017. DOI: https://doi.org/10.1145/3025453.3025887
He, L., Laput, G., Brockmeyer, E., Froehlich, J. E. (2017). SqueezaPulse: Adding Interactive Input to Fabricated Objects Using Corrugated Tubes and Air Pulses. Proceedings of TEI'17. DOI: https://doi.org/10.1145/3024969.3024976
Muhammad Abdullah, Romeo Sommerfeld, Bjarne Sievers, Leonard Geier, Jonas Noack, Marcus Ding, Christoph Thieme, Laurenz Seidel, Lukas Fritzsche, Erik Langenhan, Oliver Adameck, Moritz Dzingel, Thomas Kern, Martin Taraz, Conrad Lempert, Shohei Katakura, Hany Mohsen Elhassany, Thijs Roumen, and Patrick Baudisch. 2022. HingeCore: Laser-Cut Foamcore for Fast Assembly. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 10, 1–13. https://doi.org/10.1145/3526113.3545618
Muhammad Abdullah, Romeo Sommerfeld, Bjarne Sievers, Leonard Geier, Jonas Noack, Marcus Ding, Christoph Thieme, Laurenz Seidel, Lukas Fritzsche, Erik Langenhan, Oliver Adameck, Moritz Dzingel, Thomas Kern, Martin Taraz, Conrad Lempert, Shohei Katakura, Hany Mohsen Elhassany, Thijs Roumen, and Patrick Baudisch. 2022. HingeCore: Laser-Cut Foamcore for Fast Assembly. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 10, 1–13. https://doi.org/10.1145/3526113.3545618
Mark McGill, Graham Wilson, Daniel Medeiros, and Stephen Anthony Brewster. 2022. PassengXR: A Low Cost Platform for Any-Car, Multi-User, Motion-Based Passenger XR Experiences. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 2, 1–15. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545657
If I had but one suggestion for improvement, it would be that they should have designed the figure to be full column spanning rather than with a margin on left/right. Would have been more striking. Perhaps the authors wanted to keep some of the Intro on page 1 and couldn’t further vertically crop the images
Ryo Suzuki, Rubaiat Habib Kazi, Li-yi Wei, Stephen DiVerdi, Wilmot Li, and Daniel Leithinger. 2020. RealitySketch: Embedding Responsive Graphics and Visualizations in AR through Dynamic Sketching. In Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology (UIST '20). Association for Computing Machinery, New York, NY, USA, 166–181. https://doi-org.offcampus.lib.washington.edu/10.1145/3379337.3415892
Willa Yunqi Yang, Yumeng Zhuang, Luke Andre Darcy, Grace Liu, and Alexandra Ion. 2022. Reconfigurable Elastic Metamaterials. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 67, 1–13. https://doi.org/10.1145/3526113.3545649
Joon Sung Park, Joseph O'Brien, Carrie Jun Cai, Meredith Ringel Morris, Percy Liang, and Michael S. Bernstein. 2023. Generative Agents: Interactive Simulacra of Human Behavior. In Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology (UIST '23). Association for Computing Machinery, New York, NY, USA, Article 2, 1–22. https://doi.org/10.1145/3586183.3606763
Thijs Roumen, Conrad Lempert, Ingo Apel, Erik Brendel, Markus Brand, Laurenz Seidel, Lukas Rambold, and Patrick Baudisch. 2021. AutoAssembler: Automatic Reconstruction of Laser-Cut 3D Models. In The 34th Annual ACM Symposium on User Interface Software and Technology (UIST '21). Association for Computing Machinery, New York, NY, USA, 652–662. https://doi.org/10.1145/3472749.3474776
System overview diagrams
These are often Figure 1s but not always
Martin Nisser, Yashaswini Makaram, Lucian Covarrubias, Amadou Yaye Bah, Faraz Faruqi, Ryo Suzuki, and Stefanie Mueller. 2022. Mixels: Fabricating Interfaces using Programmable Magnetic Pixels. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 8, 1–12. https://doi.org/10.1145/3526113.3545698
Kazemitabaar, M., McPeak, J., Jiao, A., He, L., Outing, T., Froehlich, J. E. (2017). MakerWear: A Tangible Approach to Interactive Wearable Creation for Children. Proceedings of CHI 2017. DOI: https://doi.org/10.1145/3025453.3025887
Shan-Yuan Teng, K. D. Wu, Jacqueline Chen, and Pedro Lopes. 2022. Prolonging VR Haptic Experiences by Harvesting Kinetic Energy from the User. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 39, 1–18. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545635
He, L., Land, J., Peng, H., Fuge, M., Froehlich, J. E. (2017). Early Explorations of Deformable Interactive Designs with 3D-Printed Springs. Symposium on Computational Fabrication 2017. DOI: https://doi.org/10.1145/3083157.3092886
Kang, S., Norooz, L., Bonsignore, E., Byrne, V., Clegg, T. L., Froehlich, J. E. (2019). PrototypAR: Prototyping and Simulating Complex Systems with Paper Craft and Augmented Reality. Proceedings of IDC 2019. DOI: https://doi.org/10.1145/3311927.3323135
Ruei-Che Chang, Chao-Hsien Ting, Chia-Sheng Hung, Wan-Chen Lee, Liang-Jin Chen, Yu-Tzu Chao, Bing-Yu Chen, and Anhong Guo. 2022. OmniScribe: Authoring Immersive Audio Descriptions for 360° Videos. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 15, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545613
Jian Liao, Adnan Karim, Shivesh Singh Jadon, Rubaiat Habib Kazi, and Ryo Suzuki. 2022. RealityTalk: Real-Time Speech-Driven Augmented Presentation for AR Live Storytelling. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 17, 1–12. https://doi.org/10.1145/3526113.3545702
Marion Koelle, Madalina Nicolae, Aditya Shekhar Nittala, Marc Teyssier, and Jürgen Steimle. 2022. Prototyping Soft Devices with Interactive Bioplastics. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 19, 1–16. https://doi.org/10.1145/3526113.3545623
Zeyu Yan, Anup Sathya, Sahra Yusuf, Jyh-Ming Lien, and Huaishu Peng. 2022. Fibercuit: Prototyping High-Resolution Flexible and Kirigami Circuits with a Fiber Laser Engraver. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 12, 1–13. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545652
Nathan Devrio and Chris Harrison. 2022. DiscoBand: Multiview Depth-Sensing Smartwatch Strap for Hand, Body and Environment Tracking. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 56, 1–13. https://doi.org/10.1145/3526113.3545634
Jun Nishida, Yudai Tanaka, Romain Nith, and Pedro Lopes. 2022. DigituSync: A Dual-User Passive Exoskeleton Glove That Adaptively Shares Hand Gestures. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 59, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545630
System flow diagrams
System papers sometimes have flow or algorithmic diagrams (maybe ~20%). It depends on the framing and contribution of the paper.
Xin Yi, Leping Qiu, Wenjing Tang, Yehan Fan, Hewu Li, and Yuanchun Shi. 2022. DEEP: 3D Gaze Pointing in Virtual Reality Leveraging Eyelid Movement. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 3, 1–14. https://doi.org/10.1145/3526113.3545673
Algorithm Pipeline
System Flow diagrams
Mustafa Doga Dogan, Eric J Gonzalez, Karan Ahuja, Ruofei Du, Andrea Colaço, Johnny Lee, Mar Gonzalez-Franco, and David Kim. 2024. Augmented Object Intelligence with XR-Objects. In Proceedings of the 37th Annual ACM Symposium on User Interface Software and Technology (UIST '24). Association for Computing Machinery, New York, NY, USA, Article 19, 1–15. https://doi.org/10.1145/3654777.3676379
processing pipeline
System Flow diagrams
Mustafa Doga Dogan, Eric J Gonzalez, Karan Ahuja, Ruofei Du, Andrea Colaço, Johnny Lee, Mar Gonzalez-Franco, and David Kim. 2024. Augmented Object Intelligence with XR-Objects. In Proceedings of the 37th Annual ACM Symposium on User Interface Software and Technology (UIST '24). Association for Computing Machinery, New York, NY, USA, Article 19, 1–15. https://doi.org/10.1145/3654777.3676379
Human-AI Pipeline
System Flow diagrams
Guy Lüthi, Andreas Rene Fender, and Christian Holz. 2022. DeltaPen: A Device with Integrated High-Precision Translation and Rotation Sensing on Passive Surfaces. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 57, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545655
Sensor processing pipeline
System Flow diagrams
Difeng Yu, Ruta Desai, Ting Zhang, Hrvoje Benko, Tanya R. Jonker, and Aakar Gupta. 2022. Optimizing the Timing of Intelligent Suggestion in Virtual Reality. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 6, 1–20. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545632
framework overview
System Flow diagrams
Bryan Wang, Zeyu Jin, and Gautham Mysore. 2022. Record Once, Post Everywhere: Automatic Shortening of Audio Stories for Social Media. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 14, 1–11. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545680
ROPE Pipeline
System Flow diagrams
Ruei-Che Chang, Chao-Hsien Ting, Chia-Sheng Hung, Wan-Chen Lee, Liang-Jin Chen, Yu-Tzu Chao, Bing-Yu Chen, and Anhong Guo. 2022. OmniScribe: Authoring Immersive Audio Descriptions for 360° Videos. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 15, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545613
OmniScribe system diagram
System flow diagrams
Ruyu Yan, Jiatian Sun, Longxiulin Deng, and Abe Davis. 2022. ReCapture: AR-Guided Time-lapse Photography. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 36, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545641
ReCapture ar-guided timelapse photography diagram
System flow diagrams
Peggy Chi, Tao Dong, Christian Frueh, Brian Colonna, Vivek Kwatra, and Irfan Essa. 2022. Synthesis-Assisted Video Prototyping From a Document. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 16, 1–10. https://doi.org/10.1145/3526113.3545676
doc2video pipeline
System flow diagrams
Hyung-Kwon Ko, Subin An, Gwanmo Park, Seung Kwon Kim, Daesik Kim, Bohyoung Kim, Jaemin Jo, and Jinwook Seo. 2022. We-toon: A Communication Support System between Writers and Artists in Collaborative Webtoon Sketch Revision. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 76, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545612
webtoon preprocessing pipeline
System flow diagrams
Kotaro Hara, Jin Sun, Robert Moore, David Jacobs, and Jon Froehlich. 2014. Tohme: detecting curb ramps in google street view using crowdsourcing, computer vision, and machine learning. In Proceedings of the 27th annual ACM symposium on User interface software and technology (UIST '14). Association for Computing Machinery, New York, NY, USA, 189–204. https://doi.org/10.1145/2642918.2647403
Tohme: Crowd+AI workflow diagram 2
System flow diagrams
Saba, Elliot N., Eric C. Larson, and Shwetak N. Patel. "Dante vision: In-air and touch gesture sensing for natural surface interaction with combined depth and thermal cameras." 2012 IEEE International Conference on Emerging Signal Processing Applications. IEEE, 2012.
Dante Vision Algorithmic flow diagram
System flow diagrams
Hyung-Kwon Ko, Subin An, Gwanmo Park, Seung Kwon Kim, Daesik Kim, Bohyoung Kim, Jaemin Jo, and Jinwook Seo. 2022. We-toon: A Communication Support System between Writers and Artists in Collaborative Webtoon Sketch Revision. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 76, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545612
We-toon study task design
System flow diagrams
annotated hardware diagrams
Shan-Yuan Teng, K. D. Wu, Jacqueline Chen, and Pedro Lopes. 2022. Prolonging VR Haptic Experiences by Harvesting Kinetic Energy from the User. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 39, 1–18. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545635
Haptic Experiences by harvesting kinetic energy
Annotated HArdware diagrams
Zooids: Building Blocks for Swarm User Interfaces
Annotated HArdware diagrams
Mathieu Le Goc, Lawrence H. Kim, Ali Parsaei, Jean-Daniel Fekete, Pierre Dragicevic, and Sean Follmer. 2016. Zooids: Building Blocks for Swarm User Interfaces. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology (UIST '16). Association for Computing Machinery, New York, NY, USA, 97–109. https://doi.org/10.1145/2984511.2984547
Printed Optics: 3d Printing embedded optics
Annotated HArdware diagrams
Karl Willis, Eric Brockmeyer, Scott Hudson, and Ivan Poupyrev. 2012. Printed optics: 3D printing of embedded optical elements for interactive devices. In Proceedings of the 25th annual ACM symposium on User interface software and technology (UIST '12). Association for Computing Machinery, New York, NY, USA, 589–598. https://doi.org/10.1145/2380116.2380190
annotated interface screenshots
Michael Xieyang Liu, Andrew Kuznetsov, Yongsung Kim, Joseph Chee Chang, Aniket Kittur, and Brad A. Myers. 2022. Wigglite: Low-cost Information Collection and Triage. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 32, 1–16. https://doi.org/10.1145/3526113.3545661
Wigglite’s UI
design space
Xingyu "Bruce" Liu, Ruolin Wang, Dingzeyu Li, Xiang Anthony Chen, and Amy Pavel. 2022. CrossA11y: Identifying Video Accessibility Issues via Cross-modal Grounding. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 43, 1–14. https://doi.org/10.1145/3526113.3545703
Crossally interface
design space
I personally prefer smaller letter annotations to emphasize the screenshot itself and not distract. Further, I recommend avoiding letter annotations if possible and, instead, use direct semantic annotations but sometimes letters are unavoidable.
Hyung-Kwon Ko, Subin An, Gwanmo Park, Seung Kwon Kim, Daesik Kim, Bohyoung Kim, Jaemin Jo, and Jinwook Seo. 2022. We-toon: A Communication Support System between Writers and Artists in Collaborative Webtoon Sketch Revision. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 76, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545612
We-toon
design space
Yuki Koyama and Masataka Goto. 2022. BO as Assistant: Using Bayesian Optimization for Asynchronously Generating Design Suggestions. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 77, 1–14. https://doi.org/10.1145/3526113.3545664
Bayesian optimization as assistant
design space
Rather than letters, this figure uses direct semantic annotations (preferable imo as it improves readability and understandability but not always possible due to space constraints)
Design space
Design spaces help articulate different axes/parameters of a design area
Jian Liao, Adnan Karim, Shivesh Singh Jadon, Rubaiat Habib Kazi, and Ryo Suzuki. 2022. RealityTalk: Real-Time Speech-Driven Augmented Presentation for AR Live Storytelling. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 17, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545702
Design space analysis of speech-based augmentation
design space
Takatoshi Yoshida, Narin Okazaki, Ken Takaki, Masaharu Hirose, Shingo Kitagawa, and Masahiko Inami. 2022. Flexel: A Modular Floor Interface for Room-Scale Tactile Sensing. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 24, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545699
Design space of modular floor interface
design space
Design space of Directional sound indicators in hmd
design space
Jain, D., Findlater, L., Gilkeson, J. H., Holland, B., Duraiswami, R., Zotkin, D., Vogler, C., Froehlich, J. E. (2015). Head-Mounted Display Visualizations to Support Sound Awareness for the Deaf and Hard of Hearing. Proceedings of CHI 2015. DOI: https://doi.org/10.1145/2702123.2702393
Related work differentiation
Related Work is often heavy in prose but diagrams or other visuals can also help. See also Tables.
Peggy Chi, Tao Dong, Christian Frueh, Brian Colonna, Vivek Kwatra, and Irfan Essa. 2022. Synthesis-Assisted Video Prototyping From a Document. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 16, 1–10. https://doi.org/10.1145/3526113.3545676
comparing video editing techniques
Related work differentiation
Ryo Suzuki, Rubaiat Habib Kazi, Li-yi Wei, Stephen DiVerdi, Wilmot Li, and Daniel Leithinger. 2020. RealitySketch: Embedding Responsive Graphics and Visualizations in AR through Dynamic Sketching. In Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology (UIST '20). Association for Computing Machinery, New York, NY, USA, 166–181. https://doi-org.offcampus.lib.washington.edu/10.1145/3379337.3415892
Design space of dynamic sketching interfaces
Related work differentiation
Vivian Shen, Tucker Rae-Grant, Joe Mullenbach, Chris Harrison, and Craig Shultz. 2023. Fluid Reality: High-Resolution, Untethered Haptic Gloves using Electroosmotic Pump Arrays. In Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology (UIST '23). Association for Computing Machinery, New York, NY, USA, Article 8, 1–20. https://doi.org/10.1145/3586183.3606771
Haptic Glove Differentiation
Related work differentiation
Tables
Tables are wonderfully compact, dense forms of information conveyance. Often best to use bolding, heatmaps, and other visual modifications to portray key points.
P. S. Quinan and M. Meyer, "Visually Comparing Weather Features in Forecasts," in IEEE Transactions on Visualization and Computer Graphics, vol. 22, no. 1, pp. 389-398, Jan. 31 2016. doi: 10.1109/TVCG.2015.2467754
related work differentiation
Tables
Marion Koelle, Madalina Nicolae, Aditya Shekhar Nittala, Marc Teyssier, and Jürgen Steimle. 2022. Prototyping Soft Devices with Interactive Bioplastics. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 19, 1–16. https://doi.org/10.1145/3526113.3545623
Experimental measurements of sheet resistance
Tables
Radu-Daniel Vatavu, Ovidiu-Ciprian Ungurean, and Laura-Bianca Bilius. 2022. Interactive Public Displays and Wheelchair Users: Between Direct, Personal and Indirect, Assisted Interaction. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 45, 1–17. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545662
PArticipant demographics
Tables
Jiasheng Li, Zeyu Yan, Ebrima Haddy Jarjue, Ashrith Shetty, and Huaishu Peng. 2022. TangibleGrid: Tangible Web Layout Design for Blind Users. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 47, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545627
PArticipant demographics
Tables
example that could be improved
Tables
Mark McGill, Graham Wilson, Daniel Medeiros, and Stephen Anthony Brewster. 2022. PassengXR: A Low Cost Platform for Any-Car, Multi-User, Motion-Based Passenger XR Experiences. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 2, 1–15. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545657
Critique
Hard to read
Colors too saturated
Dual encoding of check+green with yellow and dash (why?)
Columns are non-standard width
example that could be improved
Tables
Lingyun Sun, Jiaji Li, Junzhe Ji, Deying Pan, Mingming Li, Kuangqi Zhu, Yitao Fan, Yue Yang, Ye Tao, and Guanyun Wang. 2022. X-Bridges: Designing Tunable Bridges to Enrich 3D Printed Objects' Deformation and Stiffness. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 20, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545710
Critique
Could be more compact. Columns feel too wide (and thus, too much wasted space)
Is the blue color necessary?
example that could be improved
Tables
Lingyun Sun, Jiaji Li, Junzhe Ji, Deying Pan, Mingming Li, Kuangqi Zhu, Yitao Fan, Yue Yang, Ye Tao, and Guanyun Wang. 2022. X-Bridges: Designing Tunable Bridges to Enrich 3D Printed Objects' Deformation and Stiffness. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 20, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545710
Critique
Too many colors
Lacks visual legend for color encodings (for left table) and the X and ✔ for right table.
Red and green are too saturated
Bar Graphs
Comparing conditions
Bar Graphs
Xin Yi, Leping Qiu, Wenjing Tang, Yehan Fan, Hewu Li, and Yuanchun Shi. 2022. DEEP: 3D Gaze Pointing in Virtual Reality Leveraging Eyelid Movement. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 3, 1–14. https://doi.org/10.1145/3526113.3545673
Comparing conditions
Bar Graphs
Bryan Wang, Zeyu Jin, and Gautham Mysore. 2022. Record Once, Post Everywhere: Automatic Shortening of Audio Stories for Social Media. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 14, 1–11. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545680
Stacked Bar Graphs
Bar Graphs
Findlater, L., Chinh, B., Jain, D., Froehlich, J. E., Kushalnagar, R., Lin, A. C. (2019). Deaf and Hard-of-hearing Individuals’ Preferences for Wearable and Mobile Sound Awareness Technologies. Proceedings of CHI 2019. https://doi.org/10.1145/3290605.3300276
Note: I generally recommend avoiding stacked bar graphs because everything except the first y-segment and last y-segments are difficult to compare (because they are not aligned); however, it is a compact visual representation and the following example is exemplary imo.
example that could be improved
Bar Graphs
Rahul Jain, Jingyu Shi, Runlin Duan, Zhengzhe Zhu, Xun Qian, and Karthik Ramani. 2023. Ubi-TOUCH: Ubiquitous Tangible Object Utilization through Consistent Hand-object interaction in Augmented Reality. In Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology (UIST '23). Association for Computing Machinery, New York, NY, USA, Article 12, 1–18. https://doi.org/10.1145/3586183.3606793
Critique
Colors are too saturated. Use a standardized, well-vetted color scale like that from Tableau
For Likert Scales, I suggest using a monochromatic scheme
The text on the right has widows and overall needs polish
Finally, I would question whether it’s necessary to dump all the survey data into a visualization like this or if other representations may be more information dense and legible.
Avoid widows
Right-align text to be close to corresponding visualization. Move parenthetical to left side.
Overly saturated colors. Use a standardized color scheme from visualization literature.
Line graphs
Trellis plot of line graphs
Bar Graphs
Naveen Sendhilnathan, Ting Zhang, Ben Lafreniere, Tovi Grossman, and Tanya R. Jonker. 2022. Detecting Input Recognition Errors and User Errors using Gaze Dynamics in Virtual Reality. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 38, 1–19. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545628
line graphs
Bar Graphs
Takeru Hashimoto, Shigeo Yoshida, and Takuji Narumi. 2022. MetamorphX: An Ungrounded 3-DoF Moment Display that Changes its Physical Properties through Rotational Impedance Control. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 72, 1–14. https://doi.org/10.1145/3526113.3545650
Image grid
If done well, image grids are a dense but effective way of rendering lots of information and allows the reader to quickly scan and compare cells. In information visualization, this technique is often called “small multiples” or trellis plots.
Sidewalk Gallery
image grid
Duan, M., Kumar, A., Saugstad, M., Zeng, A., Savin, I., Froehlich, J. E. (2021). Sidewalk Gallery: An Interactive, Filterable Image Gallery of Over 500,000 Sidewalk Accessibility Problems. Proceedings of ASSETS 2021. DOI: https://doi.org/10.1145/3441852.3476542
BO as assistant
image grid
Yuki Koyama and Masataka Goto. 2022. BO as Assistant: Using Bayesian Optimization for Asynchronously Generating Design Suggestions. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 77, 1–14. https://doi.org/10.1145/3526113.3545664
discoband
image grid
Nathan Devrio and Chris Harrison. 2022. DiscoBand: Multiview Depth-Sensing Smartwatch Strap for Hand, Body and Environment Tracking. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 56, 1–13. https://doi.org/10.1145/3526113.3545634
etherpose
image grid
Daehwa Kim and Chris Harrison. 2022. EtherPose: Continuous Hand Pose Tracking with Wrist-Worn Antenna Impedance Characteristic Sensing. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 58, 1–12. https://doi.org/10.1145/3526113.3545665
etherpose
image grid
Daehwa Kim and Chris Harrison. 2022. EtherPose: Continuous Hand Pose Tracking with Wrist-Worn Antenna Impedance Characteristic Sensing. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 58, 1–12. https://doi.org/10.1145/3526113.3545665
We-toon
image grid
Hyung-Kwon Ko, Subin An, Gwanmo Park, Seung Kwon Kim, Daesik Kim, Bohyoung Kim, Jaemin Jo, and Jinwook Seo. 2022. We-toon: A Communication Support System between Writers and Artists in Collaborative Webtoon Sketch Revision. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 76, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545612
Fine-grained accessibility assessment with ML
image grid
Liu, A., Wu, K., Kulkarni, M., Saugstad, M., Rapo, P., Freiburger, J., Hosseini, M., Li, C., Froehlich, J. E. (2024). Towards Fine-Grained Sidewalk Accessibility Assessment with Deep Learning: Initial Benchmarks and an Open Dataset. ASSETS 2024. https://doi.org/10.1145/3663548.3688531
Prototype Evolution
Po-Yu Chen, Ching-Yi Tsai, Wei-Hsin Wang, Chao-Jung Lai, Chia-An Fan, Shih Chin Lin, Chia-Chen Chi, and Mike Y. Chen. 2023. AirCharge: Amplifying Ungrounded Impact Force by Accumulating Air Propulsion Momentum. In Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology (UIST '23). Association for Computing Machinery, New York, NY, USA, Article 7, 1–11. https://doi.org/10.1145/3586183.3606768
Norooz, L., Mauriello, M. L., Jorgensen, A., McNally, B., Froehlich, J. E. (2015). BodyVis: A New Approach to Body Learning Through Wearable Sensing and Visualization. Proceedings of CHI 2015. https://doi.org/10.1145/2702123.2702299
Could be improved by increasing figure size, improving spacing, and adding in annotations that help explain new features at each prototype stage
Sketching
Hiroki Kaimoto, Kyzyl Monteiro, Mehrad Faridan, Jiatong Li, Samin Farajian, Yasuaki Kakehi, Ken Nakagaki, and Ryo Suzuki. 2022. Sketched Reality: Sketching Bi-Directional Interactions Between Virtual and Physical Worlds with AR and Actuated Tangible UI. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 1, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545626
Illustrating capabilities of a system
sketching
Li, C., Zhang, Z., Saugstad, M., Safranchik, E., Kulkarni, M., Huang, X., Patel, S., Iyer, V., Althoff, T., Froehlich, J. E. (2024). LabelAId: Just-in-time AI Interventions for Improving Human Labeling Quality and Domain Knowledge in Crowdsourcing Systems. CHI 2024. https://doi.org/10.1145/3613904.3642089
As an overview diagram
sketching
Illustrating capabilities of a system
sketching
Ryo Suzuki, Rubaiat Habib Kazi, Li-yi Wei, Stephen DiVerdi, Wilmot Li, and Daniel Leithinger. 2020. RealitySketch: Embedding Responsive Graphics and Visualizations in AR through Dynamic Sketching. In Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology (UIST '20). Association for Computing Machinery, New York, NY, USA, 166–181. https://doi-org.offcampus.lib.washington.edu/10.1145/3379337.3415892
Realitysketch application scenarios
sketching
Ryo Suzuki, Rubaiat Habib Kazi, Li-yi Wei, Stephen DiVerdi, Wilmot Li, and Daniel Leithinger. 2020. RealitySketch: Embedding Responsive Graphics and Visualizations in AR through Dynamic Sketching. In Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology (UIST '20). Association for Computing Machinery, New York, NY, USA, 166–181. https://doi-org.offcampus.lib.washington.edu/10.1145/3379337.3415892
ILlustrating a study setup
sketching
Qing Zhang, Giulia Barbareschi, Yifei Huang, Juling Li, Yun Suen Pai, Jamie Ward, and Kai Kunze. 2022. Seeing our Blind Spots: Smart Glasses-based Simulation to Increase Design Students’ Awareness of Visual Impairment. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 42, 1–14. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545687
Hiroki Kaimoto, Kyzyl Monteiro, Mehrad Faridan, Jiatong Li, Samin Farajian, Yasuaki Kakehi, Ken Nakagaki, and Ryo Suzuki. 2022. Sketched Reality: Sketching Bi-Directional Interactions Between Virtual and Physical Worlds with AR and Actuated Tangible UI. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 1, 1–12. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545626
Design space of sketched reality
sketching
Mark McGill, Graham Wilson, Daniel Medeiros, and Stephen Anthony Brewster. 2022. PassengXR: A Low Cost Platform for Any-Car, Multi-User, Motion-Based Passenger XR Experiences. In Proceedings of the 35th Annual ACM Symposium on User Interface Software and Technology (UIST '22). Association for Computing Machinery, New York, NY, USA, Article 2, 1–15. https://doi-org.offcampus.lib.washington.edu/10.1145/3526113.3545657
Combining sketch with images
Sketching with images
Outro
If you enjoyed this guide, check out our “How to Videos” guide as well!
Sources
How to figures
Best Figure Makers
How to figures
While there are many great figure makers in the HCI community, here’s our list of labs that consistently create papers with strong visuals.