Redesign of Online Design Communities: Facilitating Personalized Visual Design Learning with Structured Comments

TL;DR

This paper tackles the challenge that online design communities (ODCs) lack personalized learning tools. It introduces DesignLearner, a learner-oriented redesign that structures user comments by UI components and visual elements to enable adaptive content delivery and interactive note-taking via a mindmap. Through a formative study with 10 novices and a between-subjects user study with 24 participants, DesignLearner demonstrated greater learning gain, increased exploration of relevant examples, and higher perceived usefulness compared to a baseline ODC interface. The work offers design principles for knowledge-taxonomy-driven learning in online communities and discusses future integration with knowledge graphs and AI-assisted content to further personalize design education in public communities.

Abstract

Online Design Communities (ODCs) offer various artworks with members' comments for beginners to learn visual design. However, as identified by our Formative Study (N = 10), current ODCs lack features customized for personal learning purposes, e.g., searching artworks and digesting useful comments to learn design principles about buttons. In this paper, we present DesignLearner, a redesigned interface of ODCs to facilitate personalized visual design learning with comments structured based on UI components (e.g., button, text) and visual elements (e.g., color, contrast). In DesignLearner, learners can specify the UI components and visual elements that they wish to learn to filter artworks and associated comments. They can interactively read comments on an artwork, take notes, and get suggestions for the next artworks to explore. Our between-subjects study (N = 24) indicates that compared to a traditional ODC interface, DesignLearner can improve the user learning outcome and is deemed significantly more useful. We conclude with design considerations for customizing the interface of online communities to satisfy users' learning needs.

Figures (7)

• Figure 1: Features of two low-fidelity sketches of a potential redesigned online design community interface and their perceived usefulness (1 - not useful at all, 5 - very useful) by participants in the formative study. Overview page (left): A1) Sort posts based on the UI components that their comments mention ($M = 4.20, SD = 0.62$); A2) Further sort posts based on a) the visual elements that their comments mention ($M = 3.90, SD = 0.54$) or b) the creating time of the posts ($M = 3.30, SD = 0.90$). Reading page (right): B1) Recommend related posts based on a) the targeted UI component ($M = 4.90, SD = 0.10$) or b) the visual element ($M = 4.10, SD = 0.77$) explored in the current post; B2) Highlight a) sentences that provide meaningful feedback ($M = 4.30, SD = 0.68$) or b) keywords of visual elements ($M = 4.40, SD = 0.49$) in the comments; B3) Note-taking panel ($M = 4.10, SD = 0.99$).
• Figure 2: Interface of DesignLearner with a sample of UI design and mindmap. (A) Overview Page. (B) Image Pane. (C) Comment Pane. (D) Note-Taking Pane. (E) Recommendation Pane.
• Figure 3: A detailed view of the Comment Pane and Note-Taking Pane in the second interface (the bottom of \ref{['fig:User Interface']}). (C1) Comments on the post. (C2) Filter for visual elements. (C3) Filter for feedback. (C4) Shortcut to take notes. (D1) Menu bar of the mind map. (D2) Pop-out menu for the right-clicked node. (D3) Notes associated with the node.
• Figure 4: Procedure of the between-subjects experiment comparing the DesignLearner tool and Baseline Reddit interface.
• Figure 5: RQ1_b results regarding the changes in participants' performance on the visual design activity before and after the learning session with either DesignLearner or Baseline interface. In both the pre-test and post-test, participants need to adjust the buttons and texts of two given mockups. Three authors rate the designs from aspects of hierarchy, consistency, and contrast, using a standard 7-point Likert scale, with 1 for strongly disagree and 7 for strongly agree. *** : p < 0.001, * : p < 0.05, + : p < 0.1.