VizCrit: Exploring Strategies for Displaying Computational Feedback in a Visual Design Tool

Mingyi Li
Northeastern University

Mengyi Chen
University of Pennsylvania

Sarah Luo
Purdue University

Yining Cao
University of California, San Diego

Haijun Xia
University of California, San Diego

Maitraye Das
Northeastern University

Steven P. Dow
University of California, San Diego

Jane L. E
National University of Singapore

VizCrit teaser figure:This teaser figure demonstrates VizCrit, a design feedback tool that provides textbook-like, awareness-centered, and solution-centered feedback. There are two instructor annotations on the left, which contain their hand-written sketches on designs. On the top of the two, there are straight lines dividing the canvas into different regions and numbers marking different sections of the design. This is an example of awareness-centered alignment feedback, and VizCrit approaches it by highlighting the text boxes in different colors for different alignment groups. Next to the canvas, VizCrit also provides color-coded text explanation for the on-canvas annotations. On the bottom of the two instructor's annotations, the design now shows circles, arrows asking texts to be aligned, vertical lines indicating the alignment axes, and texts 'fonts too many.' This is an example of solution-centered feedback, and VizCrit approaches it by highlighting the problematic texts in red, with green arrows pointing to the suggested alignment axis marked with dashed lines. On the right panel of VizCrit, it again contains some color-coded texts that list the problematic texts and suggested action. Under the annotation explanation text, there are two 'learn more about' options that allow users to show or hide principle information. The first 'learn more about' will show Alignment principle's definition and common issue. The second 'learn more about' will show Alignment principle's example and related actions Figure 1. We introduce VizCrit, a design feedback tool that provides three levels of actionability: static, textbook-based feedback via text to awareness-centered (top) and finally solution-centered (bottom) feedback via adaptive visual annotations. To design our interactive annotation interface, we aimed to better understand how instructors provide feedback (left). Informed by our co-design with instructors, we designed a set of visual annotations (right) for design principles (pictured here is alignment) and developed algorithms for heuristically computing these annotations. We display these visual annotations as overlays in a visual design tool and study how they influence novices' design processes, learning, and creativity.

Abstract

Visual design instructors often provide multi-modal feedback, mixing annotations with text. Prior theory emphasizes the importance of actionable feedback, the “actionability” lies on a spectrum—from surfacing relevant design concepts to suggesting concrete fixes. How might computational tools support this range? And how does feedback style impact novice designers' interaction with feedback, creativity, learning, and design quality? We introduce VizCrit, a system for providing computational feedback that supports the feedback spectrum, realized through algorithmic issue detection and annotation generation. In a between-subjects study (N=36), novices revised a design with one of three conditions: textbook- based, awareness-centered, or solution-centered. Solution-centered annotations reduced design issues, but created a mismatch be- tween participants' self-sense of creativity and expert assessments. Awareness-centered annotations encouraged self-reflection. For all design novices across conditions, they risked productivity-focused mentality. We discuss implications for AI in creativity support tools to help novices not only produce visual designs but also develop their design awareness.

Supplementary Material   Download All | User Study Designs

Materials included here contain co-design study materials, user evaluation materials, and user study designs that include all the participants' designs from the evaluation study.

Code   Github

Video   To be added


Bibtex