Introducing Constraints into Web Layouts: Evaluating the Intuitiveness of Current Approaches for Designers MASTER’S THESIS by William Clear, 11101906 submitted to obtain the degree of MASTER OF SCIENCE (M.SC.) at TH KÖLN – UNIVERSITY OF APPLIED SCIENCES INSTITUTE OF INFORMATICS Course of Studies WEB SCIENCE First supervisor: Prof. Dr. Kristian Fischer TH Köln - University of Applied Sciences Second supervisor: Prof. Christian Noss TH Köln - University of Applied Sciences Cologne, July 2016 Contact Details: William Clear [email protected] Prof. Dr. Kristian Fischer TH Köln – University of Applied Sciences Institute of Informatics Steinmüllerallee 1 51643 Gummersbach [email protected] Prof. Christian Noss TH Köln – University of Applied Sciences Institute of Informatics Steinmüllerallee 1 51643 Gummersbach [email protected] 2 Abstract When it comes to web applications and their dynamic content, one seemingly common trouble area is that of layouts. Frequently, web designers resort to frameworks or JavaScript- based solutions to achieve various layouts where the capabilities of Cascading Style Sheets (CSS) fall short. Although the World Wide Web Consortium (W3C) is attempting to address the demand for more robust and concise layout solutions to handle dynamic content with the recent and upcoming specifications, a generic approach to creating layouts using constraint syntax has been proposed and implementations have been created. Yet, the introduction of constraint syntax would change the CSS paradigm in a fundamental way, demanding further analysis to determine the viability of its inclusion in core web standards. This thesis focuses on one particular aspect of the introduction of constraint syntax: how intuitive constraint syntax will be for designers. To this end, an experiment is performed involving participants thinking aloud while reading code snippets. Also, cursor movements are recorded as a proxy for eye movement over the code snippets. The results indicate that, upon first-impression, constraint syntax within CSS is not intuitive for designers. 3 Abbreviations CSP Constraint Satisfaction Problem CCSS Constraint Cascading Style Sheets CSS Cascading Style Sheets Flexbox CSS Flexible Box Layout Module Level 1 GSS Grid Style Sheets HLSA Hue, Saturation, Lightness and Alpha HTML Hypertext Markup Language JSON JavaScript Object Notation RGB Red-Green-Blue (Colour Model) sRGB Standard Red Green Blue (Colour Space) VFL Visual Format Language W3C World Wide Web Consortium 4 Table of Contents Abstract .................................................................................................................................. 3 Abbreviations ......................................................................................................................... 4 1 Introduction .................................................................................................................... 7 1.1 Core Concepts ........................................................................................................ 8 1.1.1 Web Layouts ................................................................................................... 8 1.1.2 Web Designer ................................................................................................. 8 1.1.3 Constraints ...................................................................................................... 9 1.1.4 Current Approaches to Web Layouts ........................................................... 11 1.1.5 Intuitiveness .................................................................................................. 11 1.1.6 The Design Process and Environment .......................................................... 13 1.2 Scope .................................................................................................................... 13 1.3 Objectives and Relevance ..................................................................................... 14 1.4 Motivation ............................................................................................................ 15 2 Related Work ................................................................................................................ 17 2.1 Constraint Cascading Style Sheets ....................................................................... 17 2.2 Online Processing During Reading and How Code is Read ................................. 19 2.3 Approaches toward Intuitiveness from the CSS Working Group ........................ 22 2.4 Frameworks .......................................................................................................... 26 2.5 Modern Web Page Layouts .................................................................................. 27 2.6 CSS Specifications ............................................................................................... 29 3 Analysis ........................................................................................................................ 34 3.1 Historical Perspective ........................................................................................... 34 4 Experiment ................................................................................................................... 40 4.1 Experiment Design ............................................................................................... 40 4.1.1 Establishing Contact ..................................................................................... 41 4.1.2 Pre-experiment Survey ................................................................................. 41 4.1.3 Confirmation Email ...................................................................................... 42 4.1.4 Establishing a Video Call ............................................................................. 42 5 4.1.5 Designer Views Example Layout ................................................................. 44 4.1.6 The Designer is Shown Four Code Snippets ................................................ 45 4.1.7 Cursor Movements Over Code Snippets Are Recorded ............................... 51 4.1.8 The Designer Selects a Snippet .................................................................... 53 4.1.9 The Designer Completes a Follow-up Survey .............................................. 53 4.1.10 The Results Are Combined .......................................................................... 55 4.2 Results .................................................................................................................. 57 4.2.1 Participant Survey ........................................................................................ 57 4.2.2 Experiment Results ....................................................................................... 59 4.3 Discussion ............................................................................................................ 60 5 Conclusion .................................................................................................................... 63 5.1 Summary and Key Findings ................................................................................. 63 5.2 Critical Review ..................................................................................................... 65 5.3 Future Directions .................................................................................................. 66 6 References .................................................................................................................... 67 Appendix A : Uses of ‘Intuitive’ in the WWW-Style Mailing List ..................................... 74 Appendix B : Experiment Notes ......................................................................................... 109 Appendix C : Cursor Movements ....................................................................................... 120 Appendix D : Declaration ................................................................................................... 128 6 1 Introduction This thesis looks at the question of whether introducing constraint syntax into Cascading Style Sheets (CSS) results in an intuitive development experience for designers creating layouts for the web. Phrased as a research question: Is constraint syntax in CSS intuitive for designers, relative to current CSS layout techniques? The paper attempts to answer this question as well as propose and implement a process for determining the relative intuitiveness of CSS language features in general. The focus on whether the technology is intuitive stems from some of the principles that underlie the development and the success of the Web so far; in particular: availability and collective empowerment (Open Stand, 2016). This paper suggests that considering the intuitiveness of the standards underpinning the Web works towards aligning the Web with these principles, as more intuitive standards would allow more people to utilise the Web to a greater extent. This is one aspect of the practical relevance of this thesis. The other is establishing a process of determining the intuitiveness of CSS language features which might be used to challenge or support decisions in the creation of standards; a process that seems to have been largely based on opinion during the formative years of CSS (discussed in section 2.3, supported by Appendix A). In particular, this paper examines the feasibility of the integration of constraint syntax as defined by the