Knowledge Maps for Building Conceptual and Transferable CSS Knowledge
Article No.: 473, Pages 1 - 4
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.
Supplementary Material
Talk Video
- Download
- 25.73 MB
References
[1]
Susan A. Ambrose. 2010. How Learning Works : Seven Research-Based Principles for Smart Teaching. Wiley, Hoboken.
[2]
National Research Council. 2001. Educating Children with Autism. The National Academies Press, Washington, DC. https://doi.org/10.17226/10017
[3]
Robert E. Haskell. 2001. Transfer of learning : cognition, instruction, and reasoning. Academic Press, San Diego, Calif.
[4]
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).
[5]
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.131301
[6]
Daniel L. Schwartz and John D. Bransford. 1998. A Time For Telling. Cognition and Instruction 16, 4 (1998), 475–5223.
[7]
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.3381444
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
Information & Contributors
Information
Published In
April 2022
3066 pages
ISBN:9781450391566
DOI:10.1145/3491101
Copyright © 2022 Owner/Author.
Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for third-party components of this work must be honored. For all other uses, contact the Owner/Author.
Sponsors
Publisher
Association for Computing Machinery
New York, NY, United States
Publication History
Published: 28 April 2022
Check for updates
Author Tags
Qualifiers
- Extended-abstract
- Research
- Refereed limited
Conference
CHI '22
Sponsor:
CHI '22: CHI Conference on Human Factors in Computing Systems
April 29 - May 5, 2022
LA, New Orleans, USA
Acceptance Rates
Overall Acceptance Rate 6,164 of 23,696 submissions, 26%
Upcoming Conference
CHI 2025
- Sponsor:
- sigchi
Contributors
Other Metrics
Bibliometrics & Citations
Bibliometrics
Article Metrics
- 0Total Citations
- 215Total Downloads
- Downloads (Last 12 months)15
- Downloads (Last 6 weeks)2
Reflects downloads up to 28 Dec 2024
Other Metrics
Citations
View Options
Login options
Check if you have access through your login credentials or your institution to get full access on this article.
Sign inFull Access
View options
View or Download as a PDF file.
PDFeReader
View online with eReader.
eReaderHTML Format
View this article in HTML Format.
HTML Format