Roxanna G. Wilcox
ABSTRACT
Despite the abundance of online resources for learning CSS, novice web developers struggle to develop the expert intuition of choosing the best CSS technique to build a given layout. We present Knowledge Maps (KM), a tool that allows users to build transferable and conceptual knowledge of CSS techniques. By interactively exploring professional websites and by categorizing visual features of those sites and the relevant CSS techniques used to create them, KM users discover the relevant similarities, differences, and use cases of various CSS techniques in the process, developing the knowledge that characterizes experts. In a study where 6 users learned from conventional CSS tutorials and 7 users learned through KM, KM users identified the appropriate CSS to build a set of layouts with a 48% increase in accuracy as compared to a 15% increase for non-KM users and showed development of transferable knowledge through KM.
Supplemental Material
- Susan A. Ambrose. 2010. How Learning Works : Seven Research-Based Principles for Smart Teaching. Wiley, Hoboken.Google Scholar
- National Research Council. 2001. Educating Children with Autism. The National Academies Press, Washington, DC. https://doi.org/10.17226/10017Google Scholar
- Robert E. Haskell. 2001. Transfer of learning : cognition, instruction, and reasoning. Academic Press, San Diego, Calif.Google Scholar
- Sarah Lim. 2017. Ply: Visual Regression Pruning for Web Design Source Inspection. Proceedings of the 2017 CHI Conference Extended Abstracts on Human Factors in Computing Systems(2017).Google ScholarDigital Library
- Marcia C. Linn and Michael J. Clancy. 1992. The Case for Case Studies of Programming Problems. Commun. ACM 35, 3 (mar 1992), 121–132. https://doi.org/10.1145/131295.131301Google Scholar
- Daniel L. Schwartz and John D. Bransford. 1998. A Time For Telling. Cognition and Instruction 16, 4 (1998), 475–5223.Google ScholarCross Ref
- Daniel Zhu and Salome Wairimu Kariuki. 2020. Knowledge Maps: Building Conceptual CSS Knowledge Through Comparison(CHI EA ’20). Association for Computing Machinery, New York, NY, USA, 1–6. https://doi.org/10.1145/3334480.3381444Google Scholar
Recommendations
Knowledge Maps: Building Conceptual CSS Knowledge Through Comparison
CHI EA '20: Extended Abstracts of the 2020 CHI Conference on Human Factors in Computing SystemsMany CSS tutorials exist online, yet novice web developers struggle to learn and apply professional CSS techniques. In this paper, we introduce Knowledge Maps (KM), a platform that guides novice developers to understand and compare professional web ...
Comments