Page 1

Good morning, Dave. morning, it’sGood Friday, April 8,Dave. 2011 9:25am AST it’s Friday, April 8, 2011 9:25am AST

Next live course meeting: Next live course meeting: DES2200 DES2200Principles Principlesof ofVisual Visual Design Design Tuesday, Tuesday,April April19 19at at5:00pm 5:00pm AST AST (1:00pm (1:00pmPST) PST) Want toto set Want seta areminder? reminder?

AtaaFar FarDistance, Distance, At TrueColours Colours and and Shapes True Possibilitiesfor fordistance distancelearning learning Possibilities webdesign designeducation education inin web

A Athesis thesisproject projectpresented presentedtoto The School of Graduate The School of GraduateStudies Studies Nova Design NovaScotia ScotiaCollege CollegeofofArt Art& & Design

by by Patrick PatrickE.E.Foster Foster in partial fulfillment of the in partial fulfillment of the requirements for the Master of Design requirements for the Master of Design Halifax, Nova Scotia Halifax, Nova Scotia Canada Canada April 2011 April 2011



AT A FAR DISTANCE, By this time, like one who had set out on his way by night, and travelled through a region of smooth or idle dreams, our history now arrives on the confines, where daylight and truth meet us with a clear dawn, representing to our view, though at a far distance, true colours and shapes. — John Milton

TRUE COLOURS AND SHAPES Possibilities for distance learning in web design education A thesis project presented to The School of Graduate Studies Nova Scotia College of Art and Design by Patrick E. Foster in partial fulfillment of the requirements for the Master of Design Nova Scotia College of Art and Design Halifax, Nova Scotia Canada April 2011

Copyright Š 2011 Patrick E. Foster. All rights reserved. No part of this book may be used or reproduced in any manner whatsoever without written permission except in the case of brief quotations embodied in critical articles or reviews. Book design and illustrations by Patrick Foster Photography provided by the following Flickr users, reproduced under Creative Commons Attribution 3.0 Jessica Elgin

Melanie Milliken

Rachel Haller

Abdul Mueid

Stuart Heath

Dan4th Nicholas

JayCee Loop

Chris Nuttall

Lauren (attercop311)


Sean MacEntee

Walter Rumsby

ACKNOWLEDGEMENTS None of this would have been possible without the help of these people: My instructors at The Nova Scotia College of Art & Design: Rudi Meyer, Marlene Ivey, Christopher Kaltenbach, Michael LeBlanc, Karin Cope, and David Peters, who all, astoundingly, know way more than I do, and are gracious enough not to point it out too often. Anyone who’s ever taken a design class with me, or from me, along with the people who’ve encouraged me to teach, often by hiring me. And most of all, Lily and Ian, who pretended not to mind that I wasn’t really home for a year. Thanks, all of you.

CONTENTS 1. abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What, exactly, is going on here?


2. introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Please allow me to introduce myself…


3. literature and contextual review . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 In which things are considered 4. methods and methodology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . “Though this be madness…”


5. analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Do you smell something burning?


6. results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . In which something is designed


7. conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Endgame


8. postscript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Next Thursday


bibliography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Books (and Essays, and Websites, and…) in Question


appendix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Surveys


LIST OF FIGURES 1. the elements of project based learning . . . . . . . . . . . . . . . . . . . . . . . . . .


2. the author’s design process, mapped to action research methodology, and the 36 research process stages involved in this thesis . . . . . . . . . . . . . . . . . . . . . 3. mind-mapping exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 4. first stage interface design concept . . . . . . . . . . . . . . . . . . . . . . . . . . . .


5. an example of a web and interaction course structured using the principles of project based learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 6. overview of survey results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


7. the ideal toolset for web and interaction design distance learning . . . . . . . . 51 8. touch gesture reference guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


9. student: dashboard: left-handed customization . . . . . . . . . . . . . . . . . . . .


10. student: dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


11. student: course studio: current week: maximize workspace . . . . . . . . . . . . .


12. student: course studio: current week . . . . . . . . . . . . . . . . . . . . . . . . . . .


13. student: course studio: current week: resources . . . . . . . . . . . . . . . . . . . .


14. student: course studio: calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


15. student: course studio: video collaboration: private direct message . . . . . . .


16. student: course studio: video collaboration . . . . . . . . . . . . . . . . . . . . . . . 67 17. student: course studio: live lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . .


18. project based learning interaction map . . . . . . . . . . . . . . . . . . . . . . . . . .


19. the process book process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


20. student: course: process book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


21. class process books . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


22. student: course: process book review . . . . . . . . . . . . . . . . . . . . . . . . . . . .


23. instructor: course studio: live critique . . . . . . . . . . . . . . . . . . . . . . . . . .


24. instructor: course: dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 25. instructor: course: lesson setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 26. instructor: course: live lecture setup . . . . . . . . . . . . . . . . . . . . . . . . . . .


27. instructor: course studio: live lecture: private conferencing . . . . . . . . . . .


28. instructor: course studio: live lecture . . . . . . . . . . . . . . . . . . . . . . . . . .


1.ABSTRACT What, exactly, is going on here?

The scariest moment is always just before you start. — Stephen King

[ 12 ]

Higher education

has embraced the advantages of distance learning, but while current distance learning environments can be utilized for teaching visual design skills—such as web and interaction design—at a distance, they are not ideal for the task. Simultaneously, the professional community has registered disappointment with student outcomes in web and interaction design programs. These two circumstances can be used as a rationale for conceptualizing an improved distance learning environment model for teaching design. Using Action Research Methodology as a model for exploration, this thesis presents a speculative improved model of distance learning aimed at visual design courses. This proposed system could be used by higher education to expand the reach of current offerings beyond time/ space restrictions. An improved distance learning model could be further utilized as a means to explore alternate pedagogical methods, possibly satisfying the immediate demands of the web and interaction design industry. Ultimately, this thesis will present a speculative interface for an enhanced distance learning environment for web and interaction design.

[ 13 ]

2.INTRODUCTION Please allow me to introduce myself…

Don’t stare at a blank page for too long, be bold, and make the first incisive stroke. The rest will come naturally. — James Kingman

[ 16 ]

Professional web and interaction design practices

continue to evolve at a rapid pace, demanding a greater connection between the needs of the profession and the advantages of design higher education. As advances in higher education present students with new, nontraditional ways of learning, an improved way to teach web design at a distance is called for. How can a better system for online/non-localized course delivery be designed to facilitate better opportunities for web and interaction design learning?

[ 17 ]

[ 18 ]

This thesis will explore the possibilities of improved distance learning environments for web and interaction design courses. Current online and distance-education environments are software packages used to develop and deliver courses remotely, used by students and professors to engage through online assignments, lectures and assessments. While online/distance education software environments are available for use in web and interaction design learning, their focus seems to be to deliver coursework in the style or form of the traditional university lecture course. This centers the environment on reading and critical writing, rather than visual design courses. In the author’s experience, these current distance learning offerings hobble the easy and rapid exchange of visual information—files or images, sketches and drawings—requisite to learning a visual skill. The current models’ focus may well have served conventional academic subjects, but they have showcased the limitations of these softwares as tools for web and interaction design education: • the need for greater engagement during instruction to students • greater give-and-take between students in the critique environment • the need to share and comment upon visual files The typical humanities online course

environment software, often driven by need and commercial interests, is crafted to deliver a more traditional lecture course, with limited audio-visual presentation. Its lecturenotes-writing-exam format is less suitable for a visual design course, such as web and interaction design. Web design courses in a physical campus-based setting demand a more seminar-like atmosphere, where the studio experience of live collaboration between students, and students and educators, is the very essence of creative skill learning. While ideally all educational subjects would encourage and embrace the nearly Socratic method often employed in web and visual design coursework, allowing students and instructors the freedom to rapidly discuss, debate and critique ideas and artwork, the reality is that budgetary and physical limitations of institutions demand larger and less intimate course structures. The current online/distance learning offerings seem to be designed for this sort of large enrollment, with limited instructor engagement, the so-called chalk-and-talk course.

COMMUNICATION DESIGN FOR SCREENBASED ENVIRONMENTS The introduction of the internet as a communication and connection tool for the use of the general public in the mid 1990s greatly expanded the reach and possibility

of communication design, offering an entirely new medium with which to engage the end user. Much as previous generations of designers needed to understand and engage with the complexities of the printing and production processes, a designer now requires not only a mastery of visual design skills but a commanding grasp of possible access points to their designed result, the variables and limitations thereof, and likely user-engagement and interaction patterns. The ability to manage these disparate inputs to produce a cohesive whole, all the while staying reasonably abreast of the technological advances—lest one misses an advancement that will drive the next innovation—requires learning and mastering a dramatically new skill set.

THE STATE OF TRAINING THROUGH UNIVERSITY EDUCATION While universities with communication design programs are adapting to the demands of this new paradigm, the professional industry is reportedly dissatisfied in the curriculum outcomes currently produced by institutions of higher education. Working web and interaction design professionals have been dismissive or even critical of the outcomes generated by design education institutions (Rutledge, 2010). As many as 83% of professionals

working in web, online or interaction design do not feel their postsecondary education has been of significant value to them professionally (A List Apart, 2010), and many entering the field are encouraged to take it upon to themselves to learn as they go from the wide array of written and recorded instruction available to them (Rutledge, 2010).

THE STATE OF ON-THE-JOB TRAINING In doing so, however, these new learners embrace technologies without any training from higher education, opting instead to master software in lieu of design skills, and to take their visual cues from their employers or clients. In the author’s experience, this often leads to ‘designers’ who can craft stylized work but have no understanding of the strengths basic design skills would bring to their personal toolset. By crafting a more usable and appropriate environment for online web and interaction design education, higher education could more nimbly present contemporaneous design education for designers of all forms. Designing an improved affordance for teaching visual design in a distance setting would enable higher education to advance the evolution of web design education to better serve its existing student population, and perhaps expand upon that audience. Leveraging the

[ 19 ]

[ 20 ]

inherent advantages of distance learning environments would also enable institutions to continually evolve the course material without restrictions from market forces, or infrastructure—physical classroom size and availability, for example. This speculative course environment itself could embrace the structural principles of Project Based Learning (Buck, n.d.), and ‘mobile first’ design parameters (Wroblewski, 2010). Presenting the course material using these two principles could omit the extraneous, encourage greater connection between student and instructor than is usually possible in distance learning, and would demand collaboration between students.This would be in accordance with the theory of pedagogy embraced in Project Based Learning and in the writings of Don Tapscott (2010). An enhanced environment could simultaneously reach traditional postsecondary students from non-local regions (increasing the reach of institutions), students who would ordinarily be forced by economic or geographic concerns to learn on their own, and working professionals looking to freshen their skills. The possibilities for this expanded design education are nearly limitless.

CHAPTER SUMMARY 1. Current online and distance learning environments are designed to replicate the traditional physical lecture course environment. 2. Web and interaction design courses are best served by live collaboration typified by the studio experience. 3. Working web and interaction design professionals are dissatisfied with the outcomes of higher education, and often believe their own post-secondary education is not useful in their career. 4. A distance learning environment designed specifically for web and interaction design would increase the reach of the offering institution beyond its geographical region, and not suffer from physical infrastructure challenges. 5. The principles of Project Based Learning and mobile first design are the ideal foundational layers for this proposed environment. 6. Such an improved environment would reach both working professionals and traditional post-secondary students simultaneously.

[ 21 ]

3.LITERATURE AND CONTEXTUAL REVIEW In which things are considered

A well-defined problem is half solved. — Michael Osborne

[ 24 ]

THE CLASSROOM: AN OUTDATED MODEL The stereotypical contemporary classroom consists of an instructor, standing in front of a group of students, often seated at tables or in a lecture theater, writing on a physical, electronic or virtual presentation board. The students take notes, read supporting material and then produce work based upon the lecture and reading. Don Tapscott, a speaker, author and consultant “specializing in …organizational transformation and the role of technology” (Wikipedia, 2011), calls this setting “the very best model of pedagogy that 18th century technology can provide” (2010b). Tapscott (2010b) describes the one-to-many—or broadcast—model of communication used by many educators as a “teacher-centered model that is one way… and the student is isolated in the learning process.” He argues that a new model for education, one that embraces contemporary technologies and makes students and educators into collaborators in learning is the optimal viable path for this new pedagogical concept. Tapscott (2010b) also says “the teacher can encourage students to discover for themselves,” and students become “explorers, the discoverers, and the teacher [is] their helpful guide.” According to Tapscott (2010b), students learn best when they are engaged in the process and not simply on the receiving

end of a lecture. Tapscott’s ideal model features students and educators working collaboratively in close connection with technology, focussing on the process of learning as much as the facts involved. This focus on process both makes for a more interactive and engaged learning environment, and could also well suit the postulated evolution of traditional design courses. He asserts that “an Industrial Age form of education isn’t much good for children who have to work in a digital age” (2010b). The new student has “grown up digital” (Tapscott, 2010b), and far from finding distraction in multiple streams of input, instead the modern students “learn best through non-sequential, interactive, asynchronous, multi-tasked and collaborative activities.” While it is impossible to discuss educational processes without a consideration of education itself, with all its related theories and practices, this thesis has explored educational theory only to the extent that it can be applied to web and interaction design education. Consequently, this thesis will engage with Tapscott’s theories as a foundation for the concepts to follow. This speculative model student will hew closely to Tapscott’s predictions, “used to multi-tasking” (2010a), and has “learned to handle the information

overload” (2010a). A two-way conversation is presumed, based on their formative experiences outside of the classroom. Similarly, discussions of curriculum specifics are beyond the scope of research considered here. The Web Standards Project, working with design professionals and educators, has developed “living, open curriculum based upon web standards and best practices” for web design education, InterACT (http://interact.webstandards. org), and this framework forms the basis of conceptual lessons presented later in this project. Project Based Learning is a pedagogical concept with fundamental parallels with Tapscott’s thinking, and this framework expands upon the ideas noted above with a quantifiable framework for course and lesson planning. According to the Buck Institute for Education (2011), In Project Based Learning (PBL), students go through an extended process of inquiry in response to a complex question, problem, or challenge. Rigorous projects help students learn key academic content and practice 21st [sic] Century Skills (such as collaboration, communication &[sic] critical thinking).

Rather than “the industrial model of student mass production, where the teacher is the broadcaster” (Tapscott, 2010a), Project Based Learning encourages students to “make our own conclusions” (2010a) by engaging students at every stage of the course planning. Figure 1 (p.26) presents an overview of the elements of Project Based Learning. By combining Tapscott’s model of the 21st-Century student with Project Based Learning, and by further adding to the mix the principles of design thinking and research established in the best of the modern design institutions, the framework for an improved methodology for teaching web and interaction design skills in a distance setting begins to come into focus. But what of current university offerings? According to research from University of Tennessee professor Leslie Jensen-Inman in her monograph Teach The Web (2009), many working professionals diminish the value of a university education in web design—either their own, or in their potential employees— and further more dismiss it outright. In her monograph, Jensen-Inman interviews designers and programmers with some of the leading edge agencies and consultancies in web design and interactive design. The results present a mixed message at best about higher-education and web and interaction design as James Archer, CEO of design and

[ 25 ]

Figure 1 The elements of Project Based Learning

results in a publicly presented product or performance

[ 26 ]

incorporates feedback and revision

is organized around an open-ended Driving Question or Challenge.

PROJECT BASED LEARNING allows some degree of student voice and choice

creates a need to know essential content and skills

requires inquiry to learn and/or create something new

requires critical thinking, problem solving, collaboration, and communication

marketing agency Forty, asserts “The culture of large educational institutions has, in my experience, consistently proven itself unable to cope with the demands of such a varied and fast-moving industry” (as cited in JensenInman, 2009). Jensen-Inman (2009) details how many of her interview subjects are unhappy with the “quality of the students who graduate.” The interviewees report that they prefer hiring workers with no formalized training in the field; others assert that workers who have demonstrated the drive to learn on their own are more likely to continue to maintain their skills and stay abreast of trends and technologies. The self-taught appear more determined to their potential employers and those employers have come to assume that a degree may not certify skills; in fact, a degree is often seen as a negative to the profession. Renowned web designer and writer Andy Rutledge takes an even more dim view of design in higher education: “If you emerge from university today with a web design degree, chances are rather slim that you’re employable as a user experience (UX) or web designer. Maybe you learned a lot of stuff; it’s just probably the wrong stuff” (Rutledge, 2010). Rutledge further asserts that: To be fair, a primary reason university and college programs

cannot change to remain relevant is because the technologies, standards, and practices one must understand in order to remain employably-relevant are changing on an annual or even monthly basis. Academic institutions have proven that they’re usually incapable of keeping up even with decade-todecade industry evolution. This view, while particularly bleak in its expression, is echoed in the results from the online web design/production journal A List Apart’s annual The Web Design Survey. In response to a question seeking opinions as to the relevance of the respondents’ education to their professional work in the web design industry, 46.6% (A List Apart, 2007) responded Not relevant. In 2008, A List Apart (2009) rephrased the question to include Perceived relevance of education: in both 2008 and 2009, a statistically identical 83% responded Some or less. How then, do businesses keep up? How do working designers maintain their skills and their careers simultaneously? Agencies often schedule specific training days or mandate that a specified amount of time per week is allotted to learning new techniques, skills and tools. How much more useful would that time be if, rather than fumbling their way

[ 27 ]

[ 28 ]

through a manual or series of low-resolution YouTube videos, designers could access postsecondary level training to maintain, develop and expand their skills, much akin to the continuing education demanded of medical professionals? In a presentation to AIGA in 2008, Meredith Davis (2008) of North Carolina State University/College of Design presented Toto, I’ve got a feeling we’re not in Kansas anymore…, a discussion rooted in “the disorienting relationship between the circumstances of twenty-first century life and what and how we teach design.” Davis’ (2008) presentation was fundamentally an exhortation to improve the education of designers at the university level, arguing that “even when educating form-makers, we’re hopelessly stuck in the past.”

Current Distance Learning Software There are multiple software options for distance learning environments. The most prominent include Blackboard, Sakai, and Moodle. None of the software packages evaluated were created specifically for the learning of any visual design skill, such as web and interaction design. While it can be argued that the current offerings can be adapted to teach web and interaction design skills, the same analogy can be applied to a brick and a

nail. It’s possible to drive a nail with a brick, but it is not the best tool for the job. Blackboard is a commercial product, whereas Sakai and Moodle are opensource. Blackboard (“Blackboard,” n.d.) is a “virtual learning environment and course management system.” In a critical analysis of Blackboard as a learning environment, Stephanie Coopman (2009) points out what can be considered a weakness in this context. Blackboard “provide(s) some ability to embed image and video files, yet for the most part, communication is text–based.” While Blackboard has been an asset for traditional classes, its primary function is the delivery of standalone distance learning. Sakai was originally funded by the Mellon Foundation as The Sakai Project, where its founding partners—Indiana University, Massachusetts Institute of Technology, Stanford University, University of Michigan—collaborated on a course management software. This collaboration lead to the creation of the Sakai Collaboration and Learning Environment. Similar to conventional physical classrooms, “The Sakai software includes many of the features common to course management systems, including document distribution, a gradebook, discussion, live chat, assignment uploads, and online testing” (“Sakai,” n.d.). Moodle is “an open-source…Virtual

Learning Environment” (“Moodle,” n.d.) originally developed by Martin Dougiamas and currently administered by The Moodle Community under the supervision of The Moodle trust. Moodle is essentially a modular, extensible platform for remote learning and training, utilizing plugins developed by thirdparties to deliver conventional educational pedagogy in a virtual setting. In addition, there are possibly hundreds of online collaboration tools that can be utilized in education, including Google Groups (, Yahoo Groups (, any number of discussion board/forum/wiki software packages, Facebook (http://www., Twitter (http://www.twitter. com) and many other social-networking tools. Extensive contextual research shows that there has been little, if any, critical research applied to these tools in the context of their use in teaching visual design such as web and interaction design. While each of these platforms serve specific purposes within the realm of higher education, it can be argued that none specifically address the needs of web and interaction design education. More specific evaluation of these environments is implicit in the proposed learning environment presented in Chapter 6: Results. Critically, current distance learning environments lack the requisite elements needed for learning

web and interaction design, which include real-time collaboration tools beyond the message board or forum model as well as the ability for live critiques and real-time instructor engagement. The delivery of appropriate design practice methods, peer review and critiques and live studio culture discussions are all paramount for this hypothetical learning environment. Given these requisite elements, what tools currently available or under development might be embraced in this speculative improved learning environment? Ferris Research (2005) proposes an “Ideal Collaboration Toolset for Distributed Workers,” which includes a shared file repository, live screen and file sharing, instant messaging and email, a wiki, a task manager and group scheduling. All of these tool suggestions are available for use in this thesis’ proposed learning environment in one form or another: DropBox (http://www. for file sharing; Twitter and Facebook can be leveraged to create private messaging to combine with the ubiquitous email; and video conferencing from many sources, such as Skype ( com). Other tools that bear inspection include Bounce ( and Notable (, which provide nearly-live feedback of websites for group collaboration. Bell Labs is developing a

[ 29 ]

[ 30 ]

“Super Virtual Conferencing” (Woyke, 2010) that will enable users to present themselves and their files in a virtual live video conference where the participants appear to be in the same room. Big Blue Button (http:// has used open-source software tools to develop a robust real-time lecture and collaboration tool. Livescribe (, among other companies, has developed a digitizing pen that allows a user’s handwriting, sketches, doodles and notes to be instantly transferred to the computer as digital raster files. All of these tools have been considered in the development of this proposed learning environment. While some weaknesses may be seen in these learning tools, these weaknesses are not specific to the distance learning of design per se, and will be discounted for the purposes of this thesis. And while this thesis argues that these learning environments are not idealized for teaching web and interaction design, their strengths should not be dismissed. Regardless of challenges with user interaction or usability, the ability to deliver robust educational content to users without concern for time or place should not be summarily discounted.

Design Principles for Interaction No overview of any distance learning environment can be complete without a

discussion of the communication design principles involved. While current models of distance learning simply embrace the user interface (UI) of the user’s operating system and/or browser, applying improved methods of design can only serve to enhance the user experience. Any speculative learning environment can benefit from the visual design principles conceived, developed and deployed by web designers. “Mobile first design principles,” a term coined by Luke Wroblewski (2010), encourages the designer to focus on the mobile iteration of a project prior to designing the desktop version, as a means of narrowing focus to the core essentials of an application rather than the kitchen-sink approach often taken when designing to suit the visual real estate and comfortable physical interface of a traditional computer. These principles embrace a natural user interface (NUI), rather than the one-step-removed, icon-based graphical user interface (GUI). The removal of the extra step in a GUI—locate icon that is metaphor for the action the user wants to do, then click on it to engage—in favor of the direct action model of the NUI is a vital leap in this process. The model student will no longer need comforting metaphors from the physical world for their engagement with computers. In fact, these metaphors, it can be argued, serve only as deterrents to faster, more

natural learning and use of an application by the model student. The Touch Reference Guide (Villamor, 2010), as shown in Figure 8 (p.57), demonstrates the industry standard touchscreen interface gestural commands, which further support the NUI over GUI, enabling the user to interact directly with their own data. Responsive web design, as described by Ethan Marcotte (2010), calls for a visual and structural design suitable for differing access points—mobile device, tablet computer, laptop computer, desktop—and input devices—mouse pointing devices, keyboard, touchscreens, game controllers— by rendering a design layout that adapts to each of these potential views. Rather than producing separate bespoke experiences for different devices, responsive web design engages with these devices as “facets of the same experience” (Marcotte, 2010). By applying these ideas to this proposed learning environment, an experience suitable to each individual user can be presented, without needing to support individual custom builds for different devices or operating systems. These two forward-looking design principles will greatly influence the user interface design and user engagement patterns in this thesis’ design practice. Combining these concepts with established practices of user interaction and user interface design will lead to an improved user interface,

and in turn to an improved user experience model for the proposed learning environment.

[ 31 ]

CHAPTER SUMMARY 1. The modern classroom is often based upon principles developed in the Industrial Age, utilizing the broadcast model of instructor disseminating information to students. 2. Modern students have “grown up digital,” and “learn best through nonsequential, interactive, asynchronous, multi-tasked and collaborative activities.” 3. Curriculum specifics are beyond the scope of this research, and The Web Standards Project’s InterACT curriculum is used as the basis for example lessons. 4. The pedagogical concepts of Project Based Learning are an ideal foundation for this improved learning environment. 5. Research indicates that many working professionals are dismissive of the skills students learn in higher design education, often preferring the selftaught over the formally educated. 6. Current software options for distance learning include Blackboard, Sakai, and Moodle; these are designed to replicate the traditional lecture classroom, rather than the studio environment requisite for design learning. 7. For teaching design at a distance, the ideal toolset would include real-time collaboration, live lecture and critiques, live screen and file sharing, a task manager and calendar features. 8. “Mobile first design principles” are the visual design foundations for this speculative environment. 9. Responsive web design principle can be applied to deliver learning material across multiple platforms, regardless of any individual platform’s limitations.

[ 33 ]

4.METHODS AND METHODOLOGY “Though this be madness…”

Designers don’t actually solve problems. They work through them. — Marty Neumeier

Action Research “The design process is a research process.” -Cal Swann (2002)

[ 36 ]

Action Research Methodology, described by Cal Swann (2002) in his paper Action Research and the Practice of Design, is a model of iterative processes made up of “planning, acting, observing, and reflecting” (p. 55). This methodology describes a means by which stages in the design process can be identified, leading to a consciousness of the iterative nature of design. By setting aside stages for consideration and evaluation, this defined process makes apparent how designers will, at many stages in a project, return to previous stages to reconsider their conclusions based on results of their design work. Rather than push through to an end, designers use the patterns defined

in Action Research Methodology as a means of evaluating their work at every step of the process. This ensures that solutions arrived upon have been considered and tested again and again against the original specifications of the project. This thesis was crafted using the stages shown in Figure 2, a diagram of this specific design project mapped to the standards of Action Research Methodology. Action Research Methodology is wellsuited for this research project, as its steps encourage consideration and reflection at each stage. By working through these stages and considering results, the project was encouraged to evolve in ways unconsidered in the early speculation. By looping back through the plan-act-observe-reflect cycle repeatedly, early preconceptions were managed and new ideas generated, resulting in a more robust end result.

Figure 2 The author’s design process, paired with Action Research Methodology, and the research process stages involved in this thesis

Why aren’t web designers being better served by higher ed? Why is it so hard to teach web design in a distance ed environment?

A designed process encompassing best-practices web design curriculum into a distance learning virtual THE DESIGN environment



proposed solutions for review


• Assess


feedback and implement changes as warranted






• Offer

What works in distance ed? What doesn’t? Why don’t web designers feel higher ed works? What could be improved?



• Online

How could higher ed better serve web designers? How could distance education be put to use in web design learning?

survey reviews • Anectodal data collection

• Literature


What options exist now? What do users think about distance learning options? How to improve distance learning for web design?

METHODS The following methods were applied to the preparation of this thesis.

[ 38 ]

Literature & Contextual Review The survey of related research material encompassed library and online research, printed matter and periodicals, and online sources. While writing on fundamentals of educational theory and pedagogy are prevalent, extensive research into the use of online teaching and learning environments led to the realization that there has been little, if any, critical research in the use of such software tools in teaching visual design skills, such as web and interaction design. Personal experience and anecdotes combined with feedback from the survey results—expounded on in Chapter 5: Analysis—indicate that while such distance learning environments can be purposed to teach visual design, they are far from the ideal setting. Survey Three surveys were created to assess user opinions of online distance learning environments from the perspective of educator or student, and to assess strengths of both online/distance and traditional classroom learning experiences in a visual design course of any kind. It was determined that an online survey, with data collected

through an online form was a viable way to reach educators and learners in a wide range of physical locations, with an equally wide range of individual experiences. The survey questions were developed based on anecdotal experiences with distance learning in visual design education, and vetted through a pilot release to colleagues in education and design. While the focus of this thesis is web and interaction design learning, the inability to deliver the surveys specifically to web and interaction design students and educators led to the phrase visual design in the survey questions. As the surveys were created to collects the impressions and reactions of distance learning students and educators as much as solid facts, this broader level of questioning could be used to harvest an overview of user reactions. Based on initial feedback, the surveys were slightly modified, largely for clarity, and released in November of 2010. Surveys were distributed via a network; links to the online survey site were distributed to educators and designers in North America and Europe via email, Facebook and Twitter, with requests that the link be distributed to the recipients’ personal networks. More detail on response rates and complete survey responses are available for review in Appendix: Surveys. While these surveys did not receive a wide response, they did produce several

definable trends in terms of user opinion on both conventional and distance learning environments. More on the survey results are reported in Chapter 5: Analysis.

Sketches, drawing, and mind-mapping A variety of traditional design planning techniques was used in the preparation of the proposed, design-focused, learning environment presented in Chapter 6: Results. A process journal and sketchbook were maintained during the course of the thesis year, and course work on data visualization and critical thinking influenced both the visual and theoretical underpinnings of the project. Data visualization is the art of visually presenting data using graphic renderings, 3d models or animation, and relies upon the human brain’s ability to recognize patterns within the visual representation. While not specific to this inquiry, coursework in data visualization was integral in bringing clarity to the research. Rendering abstract concepts —in such as way that the visualization itself makes new and undiscovered information apparent—has been an integral skill in the creation of the resultant project detailed in Chapter 6: Results. The initial inquiry—Technology in design education?—was narrowed to a manageable focus though multiple stages, including mind-

mapping, a form of simple data visualization, (Figure 3); three-dimensional modeling; and through a series of instructor-led seminars and projects. Through the year, these stages varied in success or perceptible value—mindmapping, very; three-dimensional modeling, much less so—but all enabled the sharpening of attention and details. Each stage in the process has enabled the clarification of the essential issue at the core of this thesis, and drove the project to its research focus.

[ 39 ]

Figure 3 Mind-mapping exercises

[ 40 ]

INTERFACE DESIGN Once the inquiry was narrowed to its current focus, a series of interface sketches was begun, concurrently with a winnowing down of details that would serve the end result. These specific details encompassed such questions as: What information does a student need at this stage in a course? What information does a student not need now, even though it’s usually presented? These questions, and many more, were also formulated from the perspective of an instructor, to provide equal access in the end result. From these questions and initial doodles, a more concrete series of sketches were produced, leading to the development of an initial first stage interface design as shown in Figure 4. This was considered and critiqued and this feedback formed the basis for the final proposed design, presented in Chapter 6: Results.

Figure 4 First stage interface design concept

[ 41 ]

CHAPTER SUMMARY 1. Action Research methodology is the research process foundation for this thesis. 2. Contextual review indicates that while current distance learning software environments can be used to teach visual design skills at a distance, they are not designed specifically for such an endeavor. 3. Surveys of educators and students were utilized to collect anecdotal feedback about learning design in both traditional and distance settings. 4. A variety of visual and design skills was applied in the development of this thesis, including mind-mapping, storyboarding, sketching and drawing.

[ 43 ]

5.ANALYSIS Do you smell something burning?

Content precedes design. Design in the absence of content is not design, it’s decoration. — Jeffrey Zeldman

[ 46 ]

STUDENTS & LEARNING The modern student model hypothesized in this thesis has been based on the research by Don Tapscott (2010a). The model student: • Learns best “through non-sequential, interactive, asynchronous, multi-tasked and collaborative activities” • Has an intimate and nearly intuitive connection with the technology in their lives • Prefers an engaged, exploring model of learning to the broadcast model • Has “learned to handle the information overload” • Works best with two-way conversations, student-to-educator, and student-tostudent • Is an “active and demanding inquirer” The course model (as shown in Figure 5) will be based upon principles of Project Based Learning, as espoused by the Buck Institute for Education (2011), and detailed in Chapter 3: Literature and Contextual Review. Project Based Learning can be summarized as “an extended process of inquiry in response to a complex question, problem, or challenge” (Buck, 2011). While a common—and arguably successful—method of learning in many design institutions, review has discovered no examples of this pedagogical model applied to the distance learning of design.

Figure 5 An example of a web and interaction course structured using the principles of Project Based Learning





Team meets Team meets to discuss to stage discuss stage Stage work Stage work is divided & isproduced divided & produced Team Team self-evaluates self-evaluates stage work stage work Team presents Team presents stage work stage work to class/crit to class/crit

INSTRUCTOR INSTRUCTOR Provides Provides reference material reference material and guidance and guidance

Monitors Monitors team work and team work and progress progress Monitors Monitors evaluations evaluations

Asseses Asseses team team presentations presentations

A. The instructor sets the stage for students with A. The instructor sets the stage for students with real-life samples of the projects they will be doing. real-life samples of the projects they will be doing. B. Students take on the role of project designers, B. Students take on the role of project designers, possibly establishing a forum for display possibly establishing a forum for display or competition. or competition. C. Students discuss and accumulate the background C. Students discuss and accumulate the background information needed for their designs. information needed for their designs. D. The instructor and students negotiate the criteria for D. The instructor and students negotiate the criteria for evaluating the projects. evaluating the projects. E. Students accumulate the materials necessary E. Students accumulate the materials necessary for the project. for the project. F. Students create their projects. F. Students create their projects. G. Students prepare to present their projects. G. Students prepare to present their projects. H. Students present their projects. H. Students present their projects. I. Students reect on the process and evaluate the I. Students reect on the process and evaluate the projects based on the established criteria. projects based on the established criteria.

[ 48 ]

Survey Results Three surveys were posted online using Google Docs’ form collection tools. The complete survey process is detailed in Appendix: Surveys. The surveys were individually aimed at students who had taken a visual design course of any nature in an online or distance learning setting, at students who had taken a visual design course of any nature in a traditional classroom setting, and at educators who had taught a visual design course of any nature in an online or distance learning setting. The surveys were designed not to produce specifically quantifiable results, but rather to capture a sense of users’ impressions about their learning experiences. The most apparent impressions are presented in Figure 6. In general, students missed the interaction of a physical classroom when taking an online or distance course. Students overwhelmingly preferred a traditional setting to online learning, which was described by one respondent as “mostly textbased.” Educators also seemed to prefer the connection established in a physical setting to an online environment. The advantages of the distance environment included the ability for students to work on their own individual schedule and/or away from a campus, as well as the educators’ ability to more easily distribute course material.

Based on this feedback, what do students need in an ideal remote learning environment for visual design? • Immediate/real-time feedback from students and educators • Interaction with other students and educators (“I liked the teamwork and collaborative atmosphere of the course. I could get instant help with my work from both the teacher and surrounding class participants.”) • Clear and specific outcomes for each stage of the course, and for the end result of the course • The ability to work in a time/location of students’ choosing Aside from obvious parallels—improved interaction, for example—what do educators require from that same environment? • A simple mechanism for developing online courses (“…too cumbersome…”) • A means for fully utilizing the virtual environment, rather than an attempt to replicate traditional course formats

Figure 6 Overview of survey results

50% Ability to work at home or away from campus 58% Enhanced ability to distribute materials and references

25% Ability to work at own learning pace

43% Allows students to work at own learning pace

25% DifďŹ cult to learn visual skills in online environment


43% Lack of effective communication with students

29% Lack of interaction with students

87.5% Lack of interaction with instructor and other students

[ 50 ]

Distance Learning Environments Contextual review demonstrated that there is no critical research about the use of current distance learning environment software in teaching visual design courses, such as web and interaction design. The article “Ideal Collaboration Toolset for Distributed Workers” (Ferris, 2005) postulates a starting set of tools that can be adapted for distance learning. Software developers have also presented distance workers with a wide array of tools for remote work, including Dropbox, Skype, Bounce, Notable, and even Facebook and Twitter. Research and contextual analysis further present the following idealized toolset, as shown in Figure 7 (with any contemporary analog if available): • Remote data storage (Dropbox) • A central communication hub (email, Skype, Twitter, Facebook) • Real-time collaboration on projects (Big Blue Button) • A digitizing stylus (Livescribe) Combining this idealized toolset with the mobile first design principles established by Luke Wroblewski (2010) and the needs/ requirements of both student and educator provided the foundational baseline for design practice exploration. This exploration has led to the speculative learning environment presented in Chapter 6: Results.







Figure 7 The ideal toolset for web and interaction design distance learning


CHAPTER SUMMARY 1. Current online and distance learning environments are designed to replicate the traditional physical lecture course environment. 2. Visual design courses are best served by live collaboration typified by the studio experience. 3. Working design professionals are dismissive of the outcomes of higher education, and often believe their own post-secondary education is not useful in their career. 4. A distance learning environment designed specifically for design would increase the reach of the offering institution beyond its geographical region, and not suffer from physical infrastructure challenges. 5. The principles of Project Based Learning and mobile first design principles are the ideal foundational layers for this proposed environment. 6. Such an improved environment would reach both working professionals and traditional post-secondary students simultaneously.

[ 53 ]

6.RESULTS In which something is designed

People think that design is styling. Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need, and beauty to produce something that the world didn’t know it was missing. — Paola Antonelli

[ 56 ]

Preceding chapters have reviewed the need for improved web design education, and connected the promise of an improved model of distance learning to that need. These conclusion have led to <learn/>, a speculative distance learning model optimized—in this example— for teaching web and interaction design at a distance to a non-local student population. While ideally <learn/> could be repurposed to teach any visual design at a distance, its presentation in this setting is focused solely on web and interaction design, with curriculum cues taken from the Web Standards Project ( and its pedagogical model based on Project Based Learning, as discussed in Chapter 3: Literature & Contextual Review. <learn/> is presented here as in use on a tablet; however, by building the actual application using principles similar to the theory of responsive web design (Marcotte, 2010), the application can reframe or reformat itself for any platform, from mobile device to large scale desktop setup. The application is conceived as utilizing any available platform for both student and instructor input, allowing for the widest possible range of users. While obviously crafting web design concepts on a mobile phone is unfeasible with current technologies, users could engage with lessons, resources, instructors

and other students on less optimal platforms— such as their personal mobile phone—and utilize larger scale options—perhaps at a library or public internet settings, if personal hardware isn’t available— for creative or production work. In this setting—tablet delivery of a mobile learning experience—<learn/> will combine a digital stylus for direct input of data, including sketches, notes and other process book-style work, and physical touchscreen input to interact with the application itself. These gestures are taken from Touch Gesture Reference Guide (Villamor, 2010) and detailed in Figure 8.

Figure 8 Touch Gesture Reference Guide


Multi-finger tap

Double tap



Multi-finger drag OR


[ 57 ]







Student: Dashboard The simplest way to achieve simplicity is through thoughtful reduction. â&#x20AC;&#x201D; John Maeda (2005)

The student dashboard appears on launch. From here the student can access all the courses in which they are currently enrolled. A Each course can be expanded to access internal sections of the course, including B the course studio (the virtual course home) C their calendar, with alarm/appointment indicators D their course-specific inbox, with unread message indicators The inbox aggregates communication specific to the individual course, minimizing distraction from other courses or personal communication. E Pop-up alerts inform the student of new or changed information, and can be accessed or dismissed gesturally.

[ 58 ]

Other controls and indicators available hereâ&#x20AC;&#x201D;and on every screenâ&#x20AC;&#x201D;include F wifi and power indicators, device and interface settings, security options, and a context- sensitive help system.

The individual student can customize the settings of their application to their own preferences, from as simple a change as configuring the interface for ease of access for a left-handed user (right), to more involved personalization such as background colors and/or images, font sizes or colors, and more. Essentially, the individual user can personalize their interface much as a student in a physical studio could customize their own work area within that space. Figure 9 Student: Dashboard: Left-handed Customization





Figure 10 Student: Dashboard

Student: Course Studio: Current Week From the student dashboard, the course studio opens on the current week’s work. Each of these panels can be swiped open or closed. From here, the student can access A the written brief for the week B the instructor’s video lecture/brief C timelines and deliverable goals for the week D resources and references for the week (see also page 62)

[ 60 ]

The student can also E hand in assignments F access their process book for review, sketching and conceptualizing G access their classmates process books, for ideas or brainstorming, or to offer suggestions via non-destructive editing H ask their instructor or their classmates questions or for feedback I they can access any of the global course assets —inbox, calendar— or flick that section closed further, to maximize their screen real estate (see below) To maximize their work area, depending on their access device at any given time, the user can minimize the unused screen areas by flicking to collapse the administrative sections of the interface. The interface can be further collapsed to present a blank screen for design work, akin to a blank sheet of paper or page in a process book.

Figure 11 Student: Course Studio: Current Week: Maximize Workspace








Figure 12 Course Studio: Current Week


Student: Course Studio: Current Week: Resources The Resources section is one of the most vital aspects of the application. In surveys, educators applauded the ability to easily pass on multiple resources to students in current distance learning environments. An expansion of this ability could lead to a broader, deeper range of supplemental material made available to the student. This can only serve to enhance the learning environment, for both instructor and student.

[ 62 ]

On the Resources panel, users can access A the specific reading assignment for the week in e-book form B additional background or reading, both in e-book and online C varieties D the instructor’s video lecture/brief E any video tutorial related to software, or specific remedial and/or additional skills training F externally sourced video lectures related to the assignment at hand

Teaching current technologies is critical. Equally critical is teaching that these technologies will change and that, for students to stay competitive in the real world, they will have to change with these technologies. To give students a well-rounded education, fundamentals and theory must be taught, as well. Although technology is vital to web design and web development, specific technologies are not as important as teaching “why” something should be done. –Leslie Jensen-Inman (2009a)




Figure 13 Course Studio: Current Week: Resources

Student: Course Studio: Calendar The calendar—pictured with all available options opened—is the scheduling center for the user. From here, a user can A check due dates B upcoming scheduled events, such as live course meetings or student work group video collaborations C review past weeks’ To-Do items

[ 64 ]

Each section can be closed or opened as needed. D Alerts will make the user aware of items requiring urgent attention E Tap date marked in green to access F Date specific information, appointments or alerts G Adding To-Do list items automatically adds an indicator to the calendar grid H Flick to scroll through the Course time line, and access an individual week’s lesson by tapping I

Add an Alert to your calendar, make a Note, sync Calender to your mobile phone, or add a To-Do item

To close the calendar and return to the course studio, simply flick the course title area from right to left, closing the calendar screen.


If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version…. We agreed that this was the most important set of features and content for our customers and business -why should that change with more screen space? —Luke Wroblewski (2010b)








Figure 14 Student: Course Studio: Calendar

Student: Course Studio: Video Collaboration Modern students “learn best through… collaborative activities.” — Don Tapscott (2010b)

[ 66 ]

The need to share and comment upon visual files is crucial to online collaboration. Students can video conference in their work groups, sharing process book sketches or refined concepts, allowing collaborators to make suggestions or notations using a digital stylus without affecting the original files through software-controlled versioning. A B C D E

Red dot indicates the user’s camera view Framing bracket indicates whose work is being reviewed Pencil icon indicates who’s making editing marks on the work under review Indicates zoom level (initially controlled by the editor C ). Individual users can adjust the zoom to their own preference on their own device by squeezing or splaying the image Red lines indicate the editor’s notes on the original work

PASSING NOTES IN CLASS By tapping on a colleague’s photo, a direct message modal overlay appears, allowing discrete conversation between users apart from the video feed. Direct messages will continue though a video conference, and can be saved or deleted at the initiator’s choice.

Figure 15 Student: Course Studio: Video Collaboration: Private Direct Message





Figure 16 Course Studio: Video Collaboration

Student: Course Studio: Live Lecture One of the principle features of <learn/> is the live lecture component, where students all meet in real time to engage with their instructor via video conferencing. The instructor can lecture, demo and take questions, either via audio or text. The environment is designed to simulate an actual “studio” experience. Much as a traditional course often meets more than once a week, the instructor could schedule several iterations of the same lecture, to accommodate the widest possible range of time zones, allowing for the flexibility in scheduling so appreciated by distance learning students.

[ 68 ]

The live lecture interface presents to the user A the live feed of all students via webcam B the live feed of the instructor; users can reposition this window to allow for ideal viewing of the material in the ‘desktop’ view C live feed of the instructor’s ‘desktop’ (or ‘tablet top’, or whatever device the instructor is using) D Students can indicate their need to ask a question by tapping E Standard audio-visual controls—audio mute, volume F Red dot indicates the user’s camera view Each user can adjust the zoom of the instructor’s presentation to their own preferences by squeezing or splaying the image Direct messaging protocols, as described on page 66, are in place here as well. Students can also ‘write on the board’, or mark up the instructor’s demonstration via digital stylus, to allow for live collaboration and questioning of the material presented. Tasks need to occur across multiple devices. Computers need to filter, process and deliver relevant content and feedback. —Luke Wroblewski (2010a)






Figure 17 Student: Course Studio: Live Lecture

Aside from real time video group collaboration, how is this model different from (insert your distance education platform of choice here)?

[ 70 ]

By applying the principles of Project Based Learning (as discussed in Chapter 3) to—in this case—web and interaction design lessons, students learn not merely the theoretical and production steps in the process, but are encouraged to explore alternate ways of looking at information. Collaboration and collective analysis of this information in turn will lead designers to explore beyond the obvious for the challenges in question. The interaction map shown in Figure 18 demonstrates how students could engage with their instructors and other students when presented with the course structure shown in Figure 5 (p.47). By considering not simply How do I design a website? but instead How can—or should—a website affect [the driving question or challenge]?, students learn not only the technical or creative skills required for each stage of the process, but also how to think about the problems and challenges presented in each of the stages. It is not enough to learn how to do a thing; students must also learn why—or why not.

Figure 18 Project Based Learning interaction map

Present project brief Meet with project groups Monitor process



LESSON Submit final design Revise per feedback Review lesson brief

Present for crit

Meet project group S Develop/sketch ideas





Review/comment on peers’ concept work Define specific goals

S Generate to-do lists/group deadlines




[ 72 ]

How do students produce work?

Students can engage with the application through common input devices—mouses, touchscreens or touchpads—but for the fullest interaction, students and instructors will utilize a digital stylus. Similar to the Livescribe pen or a Wacom tablet stylus, the digital stylus can be used for nearly every input. The stylus can be used to engage with the interface, by tapping controls or buttons on screen, but its primary function is to allow the user to draw or sketch—seamlessly—in the application. By touching or tapping the stylus anywhere on the screen that is not a control area, the application brings up a blank ‘page’ from the student’s process book, for drawing, sketching or note taking. Students can also use the stylus to engage with other students or instructors, by making their own ‘layer’ of notes or drawings upon another’s work. For example, during a critique, a student could ‘mark up’ or redraw another’s work, to explain a point or make a suggestion about the original concept. This editing is non-destructive, utilizing a combination of layering and versioning to preserve both the original and edited versions.

[ 73 ]

Student: Course: Process Book Students are more engaged when there is a variety of alternative venues for expression. â&#x20AC;&#x201D; Malcolm Brown (2010)

[ 74 ]

By using either a digitizing pen connected to their hardware or a digital stylus directly on a tablet or screen, students can utilize the interface as a digital process book, collecting notes and sketches as they work on projects. Process work is automatically saved to the class access point as well as locally. This in effect backs up the work without the student having to think about it, and allows for other students to review the work, offering suggestions, notes or criticisms. Students can indicate in their process book whether a particular file is ready for feedback or not, reducing the chance of an extensive review of an idea the student has already decided to abandon. In the process book interface, the intent is to replicate a traditional, distraction-free sketchbook as much as possible, with all interface tools removed from screen. The balance of the learning environment is accessed through the discreet home icon A at screen top.



Process Book

Process Book

Figure 19 The process book process

Student process work is stored locally and remotely. Remote storage allows other students or instructors access, enabling live, ongoing critique and feedback annotation, through non-destructive versioning and â&#x20AC;&#x2DC;layeringâ&#x20AC;&#x2122; of the original file.


[ 75 ]

Figure 20 Student: Course: Process Book

Student: Course: Process Book Review Students are more engaged when they are knowledge creators, in addition to being knowledge receivers. — Malcolm Brown (2010)

Much like a pinup wall in a studio, process books can be reviewed remotely, and students can offer criticism, suggestions and notes on their classmates’ work. Through version controls, the original files remain untouched while comments accrue in ‘layers’ that can be turned on or off for consideration. A B C

Indicates whose process book is under review Comments are collected by student, and can be opened or closed by touch Touching a comment highlights the comment with this icon as well as bringing the ‘page’ or section of the file to the screen center

D The software translates the original handwriting into text for readability E Each set of comments is color-coded to match the edit marks made by the commenter [ 76 ]

Susan North

Michael Gilliam

Ann Chapman

Terry Cleese

Dave McCall

John Palin

Michael Jones

Janet Rogers

process books

Students can access the class process books from the studio interface screens, swiping horizontally through a carousel of books identified by names and photos. By tapping the icon on the foremost process book, students can enter the process book for review or editing. Figure 21 Class Process Books




E [ 77 ]


Figure 22 Student: Course: Process Book Review

Instructor: Course Studio: Live Critique A live critique environment enables greater give-and-take between students and instructors. Similar to the live lecture feature, the primary data on screen is being drawn not from an instructors’ preconfigured lecture materials but from the online repository of student process books. By accessing each book individually, the instructor can present students’ work to the class as a whole, make suggestions or comments about the work, annotate or sketch edits or alterations without affecting the original files through versioning, and solicit feedback from the group at large about the work being considered.

[ 78 ]

The live crit interface presents to the user A the live feed of all students via webcam B the live feed of the instructor; users can reposition this window to allow for ideal viewing of the material under review C live feed of the process book in question D The framing bracket indicates the student whose work is being reviewed E Edit marks are color coded by to signify the commenter; any student can, using their stylus, mark up or annotate any other’s work during the crit F Students can indicate their need to ask a question by tapping G Standard audio-visual controls—audio mute, volume H The magnifying glass icon indicates zoom level of the original process book page or file Each user can adjust the zoom of the instructor’s presentation to their own preferences by squeezing or splaying the image Direct messaging protocols, as described on page 66, are in place here as well.







Figure 23 Instructor: Course Studio: Live Critique

Instructor: Course: Dashboard The instructor dashboard features similar functionality to the student version. From this panel, instructors can access all the courses they teach in the current term. Access to previous or forthcoming terms can be configured according to institutional preferences. Each course can be expanded to access public or configuration screens for A B C D E [ 80 ]

course studio calendar a course-specific inbox a roster, which in turn leads to grades and attendance course schedule, where the instructor can post dates and deadlines for the course

F Pop-up alerts inform the student of new or changed information, and can be accessed or dismissed gesturally.

• How can we garner students’ interest in the subject matter at the outset? • How can we engage the students both in and out of the classroom? • How can we engage students more directly with the subject, with each other, and with the faculty? • How can the effectiveness of these techniques be evaluated and assessed? —Malcolm Brown (2010)


Figure 24 Instructor: Course: Dashboard

Instructor: Course: Lesson Setup Course and lesson setup is designed for minimal friction; reducing tension between the interface and the user allows for easy configuration of individual lessons and their component parts: reference and reading material; video lectures and supplemental video; local and online resource links; timelines, deadlines and course meeting scheduling. By touching different areas on the screen the instructor can configure A Lesson title B Lesson brief and supplemental imagery

[ 82 ]


for the brief

By mimicking the layout of the course studio interface, the configuration screen creates memory associations with the setup fields for D Time line E Goals F Resources, shown active, allows for configuring video G and source files, H references I and readings J K InBox offers the opportunity to edit or add deadlines and timelines, as does the L Calendar configuration area, which allows for scheduling of live meetings M or critiques, N virtual ‘office hours’ O and other events P

The curriculum presented in these examples is taken

that include: competencies, assignments, exam

from the Web Standards Project’s InterACT curriculum.

questions, resources, and learning modules. There are

InterACT is a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional. On the InterACT website you will find fully developed courses

even downloadable rubrics to facilitate the grading of assignments. (Anderson, 2010)







Figure 25 Instructor: Course: Lesson Setup


Instructor: Course: Live Lecture Setup Students are more engaged when story and narrative are used effectively. — Malcolm Brown (2010)

[ 84 ]

Like course setup, configuring a live lecture or critique meeting should be as simple as possible, minimizing time spent in course configuration in favor of time spent in student engagement. By touching different areas on the screen the instructor can configure A B C D E

Lecture title A description of the topic Start date and time, which automatically converts for each user to their own time zone Setup tips appear at appropriate stages in the process Lecture duration

The instructor can invite F specific students, or G the entire class, as well as H other guests, who will receive a invitation with access information via email I RSVPs can be requested or insisted upon Configuration can be begun and returned to; for example, the entire course’s worth of lectures can be scheduled with the instructor opting to return and fill out specific details later in the course, allowing for flexibility in lecture content. The basic configuration can also be duplicated across many lectures or events, reducing setup time. It’s all about choices and variety. What technologies should be used? What technologies should students be immersed in to support their own learning? What variety of assignments, including alternative assignments, should be provided? How can students create their own content in a variety of ways? —Kelly Gredone (2010)




Figure 26 Instructor: Course: Live Lecture Setup

Instructor: Course Studio: Live Lecture Student engagement is perhaps the key element for almost any learning context. —Malcolm Brown (2010)

Live lecture fulfills the need for greater engagement with students during instruction. The instructor view of the live lecture feed is similar to the student view. While the application draws in data from the instructor’s sketchbook, saved files or other connected device, the instructor can then control the zoom of the image, annotate and display work, act on suggestions from the group and generally lead a class discussion as if they were at the front of an physical classroom with a whiteboard. In addition to the features described on the student view (Figure 17: Student: Course Studio: Live Lecture on page 69), options distinct to the instructor view include A ‘raised hand’ icons indicating that a student would like to ask a question

[ 86 ]


the ability to tap a student image to bring up information about the student, such as name, grades, and contact information, as well as the ability to speak privately to a particular student (or group of students) without other course participants hearing the conversation

PRIVATE CONFERENCING If a student needs to speak privately with the instructor during a lecture, or if the instructor wishes to engage a student without their classmates listening, a private dialogue is available during the video lecture or critique.

Figure 27 Instructor: Course Studio: Live Lecture: Private Conferencing




Figure 28 Instructor: Course Studio: Live Lecture

When it comes to interface:

[ 88 ]

â&#x20AC;&#x153;Simple trumps complete.â&#x20AC;? Neil Hunt, Chief Product Officer, Netflix

CHAPTER SUMMARY 1. The distance learning environment proposed here uses the principles of responsive web design to make the environment available across multiple input platforms. 2. Standardized touch screen gestures improve and stabilize usability. 3. Students can engage with multiple courses through the interface, with individual weeksâ&#x20AC;&#x2122; lessons and resource materials easily accessed. 4. Student collaboration, encouraged by the pedagogical model, is facilitated through student-controlled video collaboration tools. 5. Real time video lectures offer a viable option for group engagement in distance learning. 6. Student work is produced using a digital stylus, submitted to virtual process books, and is accessible for edits, ideas and comments from the entire class. 7. Nondestructive editing options encourage collaboration during instructor-led live critiques. 8. Instructor controls are designed to reduce time spent managing the course at the expense of time spent engaging with students. 9. Embracing curriculum developed in partnership with the professional community fosters a greater connection to the industry.

[ 89 ]


Good design is a lot like clear thinking made visual. â&#x20AC;&#x201D; Edward Tufte

[ 92 ]

The roots of this thesis began with the consideration of technology in design education. The rapid evolution of the technologies used in design, from hardware to software, and the challenges of learning these tools and staying current as a working professional were the initial seeds of thought. The challenges of staying current prompted an investigation into the professional domain to explore required skill sets. From there, a focus on distance education emerged followed by an initial research question: can design education, by utilizing distance learning tools, perhaps more easily keep up with the evolution of design technologies? Contextual research and review led to the awareness that professional practitioners of web and interaction design are often displeased with or even dismissive of the outcomes of a traditional four-year education from a traditional design institution. Consequently the research refocused on web and interaction design education and the research question matured. The disappointment with traditional education outcomes helped sharpen the primary question to Can distance learning be an effective tool for teaching in the rapidly evolving field of web and interaction design? This primary question led to secondary concerns, such as Can distance learning environments find pedagogical models more

suited to that speed of evolution? Can that alternate pedagogy more fully embrace, challenge and educate the next generation of learners? Research shaped these inquiries, revealing Project Based Learning, a pedagogical model well suited for and easily adapted to design learning. The work of Don Tapscott described the new student as a questioning collaborator more suited to new ways of learning instead of the traditional 18th century ‘broadcast model.’ Work by interaction designers, most notably Luke Wroblewski, helped focus the design practice of this thesis, by encouraging new ways of thinking about and designing for user interaction with portable devices. If distance learning is the future, then portable distance learning is the next obvious step, and the principles of mobile first design thinking helped shape the interface designed for this thesis. Current models of distance learning are simply not designed with web and interaction design education as their target use. Tools such as Blackboard or Sakai merely implement remote versions of the same ‘broadcast model’ of 18th century classrooms. While suitable for many kinds of courses, this structure is unsuited for the near-Socratic methodology proposed by Tapscott, practiced in design schools the

world over, and encouraged by Project Based Learning. The near-instant communication made possible by the internet should be used not to replicate conventional educational settings but to present an entirely new way to learn remotely. This new model of remote learning is ideally suited to this next generation of learners, and the immediacy of collaboration and feedback is perfect for a creative endeavor such as web or interaction design. From this research and practice, an awareness of certain prerequisites for an ideal distance learning environment for web design education became apparent. Live course meetings facilitated by multiple access point video conferencing will generate the immediacy of a live classroom, and the ability for students or instructors to review, comment upon and even sketch new ideas on other students’ work is vital to encourage the collaborative mindset needed in design learning. Ideally, this research practice will serve as encouragement for new tools and better ways for designers to learn or even improve upon their craft, regardless of geography. How feasible is the <learn/> project proposed? There are obvious limitations of infrastructure—internet connectivity, or hardware constraints—but conceptually there is little within this concept that is insurmountable. Implementation would

require a serious allocation of resources by an institution or business committed to design learning, and ongoing use would demand a greater level of involvement in the evolution of course material than is sometimes asked of instructors. It is debatable whether there is enough demand for such a tool to justify the not-insubstantial costs involved in developing and producing such a complex software environment. However, some of the functionality of <learn/> could be implemented in stages using currently available software tools and packages. A more vital requirement than the software is the commitment by educators to improving the pedagogical model of design learning. This rethinking of how web and interaction design—and, it could be argued, design as a whole—is taught may be the most important lesson of the research in this thesis. Web design education must be able to evolve and adapt as rapidly as the demands of the profession, if the students produced by design institutions are going to be able to create—and compete—in the marketplace.

[ 93 ]

8.POSTSCRIPT Next Thursday

A picture is worth a thousand words. An interface is worth a thousand pictures. â&#x20AC;&#x201D; Ben Shneiderman

China bleeds past in the window.

I was watching the landscape for a while when the train left

Beijing, augment contacts imagecapturing the landscape and slowing it to a view my brain could process, but after a while the jetlag drops in and my attention wanders. I watch a movie for a while, until the AI in my mobile pauses the image and gives me a headsup that Nick is going to be connecting for our scheduled class meeting in a minute.

I’m taking Interaction Design again this term, not because I

crashed it last time but because I’m starting to think it might be something I could get seriously into. Of the four classes that make up my full load this fall, ID is the only one that I actually show up for sometimes, actually go to campus. Not a lot, don’t lose your head, but sometimes. The instructor, Samir Ghadiali, is a genius at this stuff. He started out as a painter, then did a design degree somewhere in Europe, [ 96 ]

and a bit at MIT. Now he mostly teaches, but I know he consults for AndroidShenzhen, too. He dropped it over coffee one time.

I focus on the glowing control stub in the corner of my eye, blink


at the movie controls and then ANSWER at the new alert,

NICK CALLING . I feel a little wave of air as my AI tells the train AI

that I’m going to be on a remote conference, and the train drops a whitenoise privacy curtain over my compartment.

Nick’s image fades into my vision, and the contacts dim my view

of the rest of the cabin so I can focus. This makes me fumble for a second, hunting in my rucksack for my slate. I find the tiny square of nanopolymer and shake it twice in two directions to make it double its length and width. I rest my fingers on it and the control interface appears in my vision when I look down at it. I know, I know, the contacts will project the control interface in the air, but I like to have

something to actually touch when I’m working.

At the same time, the earplugs are tasked to the incoming audio

feed at the expense of the local ambient noise. There’s a subtle shift in my ears as the feed takes over and then I’m looking at Nick, sitting in a tapcafé somewhere.

“Wow, you look terrible.”

I shrug, even though I know he won’t be able to see it. “Something

to do with the train’s satellite connection. No threedee, not enough bandwidth.”

He nods, which sort of comes through. “Where are you, anyway?”

“Somewhere between Beijing and Llhasa, I guess.” My AI offers to

tell me but I don’t really care and I know Nick doesn’t either.


“Mom’s only going to be 100 once, and she wants to go to Tibet. So

here we go.”

“How’s the train?”

“Shiny. Fast. The CRH takes about 8 hours, from one end to the other.”



Nick stretches his neck from side to side. “You see the lecture


“No, I was on the orbital. You know how they are about realtime

in LEO.”

“I so don’t get that… ok, Samir’s encoring tomorrow—I have no idea

when that is, your time.”

My AI tells me its already put the encore on my calendar.

“I’ll catch it. What are we doing this week?”

I watch Nick tap his own interface on the table in front of him.

[ 97 ]

“User testing.”

Nick shrinks to a corner of my eye, and the highpoints of the user

testing assignment scroll up in my vision.

“Can Siobhan set up the avatars for testing? Where is she, anyway?”

Nick grows again as the assignment fades off. “Beats me. BBC says

there’s some kind of protest thing going on in Cork today, she might be hung up in that. Doesn’t matter, though, we have to use real people. Not avatars.”

“What? We’re going to test on actual people?” Nick nods. “Who are

we going suck in for that?”

[ 98 ]

“Hey, I’m not the one going to a family reunion.”

“We won’t be done by then, will we?”

“Due in a week. 4 complete tests and iterative analysis.”

I make a choking noise. “Seriously? What an asshat.”

Nick laughs. “They all tell us deadlines are worse when money’s


“Yeah, but a real studio would let us avatar it.”

Nick shrugs again—I was lucky to get grouped with him this term,

he’s good about not minding what he can’t control—and focuses on his interface. He’s looking through his notes from Samir’s live lecture, and he and Siobhan probably hacked out an idea already.

“Here’s the concept map I banged out for the user path through

the store.”

His hand makes a flicking motion and his sketch replaces him in

my vision. His handwriting is terrible but the AI only takes a second to overlay his scratches with legible text.


“Sorry, boys.”

Nick rolls his eyes. I think. Godawful imaging today. “Nice of you to

drop in,” says Nick.

They bitch at each other but I’m not interested. They should mate

and be done with it. I’m tracing Nick’s use map on my slate, making notes and—

“Nick, what happens if we let people buy from this stage?”

Siobhan says, “We’d need to start the encryption sooner in the

process if we’re going to trade cash at this point.”

“Sure, but it makes more sense for people to be able to grab

and go—”

Nick waves. “How do we get them to the closing demographic

stuff if they jump here?”

“Do we need to?”

Siobhan flicks a doodle at us. “Think about this—”

China bleeds past in the window.

[ 99 ]


The Books (and Essays, and Websites, and…) in Question

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. — Charles Eames

Anderson, E., DeBolt, V., Featherstone, D., Gunther, L., Jacobs, D. R., Jensen-Inman, L., et al. (2010). InterACT with web standards: A holistic approach to web design. New Riders Press. Blackboard. (n.d.). In Wikipedia: The free encyclopedia. Retrieved October 27, 2010, from Brown, M., Auslander, M., Gredone, K., Green, D., Hull, B., & Jacobs, W. (2010). A dialogue for engagement. EDUCAUSE Review, 45(5), 38-56. Retrieved November 13, 2010, from ADialogueforEngagement/213924 Buck Institute for Education. (n.d.). What is PBL? Retrieved January 18, 2011, from http://www. Coopman, Stephanie J. (2009). A critical examination of Blackboard’s e-learning environment. Retrieved January 28, 2011, from php/fm/article/view/2434/2202 [ 102 ]

Davis, Meredith. (April 4, 2008). Toto, I’ve got a feeling we’re not in Kansas anymore... [PowerPoint slides]. Retrieved from documents/davis_keynote_paper_and_images.pdf Don Tapscott. (n.d.). In Wikipedia: The free encyclopedia. Retrieved January 24, 2011, from Elearnspace. (2004). Learning management systems: The wrong place to start elearning. Retrieved July 4, 2010, from Gagnon, D. (2010). Mobile learning environments. EDUCAUSE Quarterly, 33(3). Retrieved November 26, 2010 from EDUCAUSEQuarterlyMagazineVolum/MobileLearningEnvironments/213690 Guidry, K. & BrckaLorenz, A. (2010). A comparison of student and faculty academic technology use across disciplines. EDUCAUSE Quarterly, 33(3). Retrieved November 22, 2010 from Volum/AComparisonofStudentandFaculty/213682 Ferris Research. (2005). The ideal collaboration toolset for distributed workers. Retrieved July 4, 2010, from Jensen-Inman, Leslie. (2009a). Elevate web design at the university level. Retrieved July 4, 2010, from level/ Jensen-Inman, Leslie. (2009b) Teach the web. Retrieved November 10, 2010, from http://www. A List Apart. (2007). Findings from the web design survey, 2007. Retrieved November 28, 2010, from A List Apart. (2009). Findings from the web design survey, 2008. Retrieved November 28, 2010, from A List Apart. (2010). Findings from the web design survey, 2009. Retrieved November 28, 2010, from Marcotte, Ethan. (2010). Responsive web design. Retrieved July 29, 2010, from http://www. Moodle. (n.d.). In Wikipedia: The free encyclopedia. Retrieved October 27, 2010, from  http:// Oâ&#x20AC;&#x2122;Brien, R. (1998). An overview of the methodological approach of action research. Retrieved November 19, 2010, from Patnaik, Dev. (2009). Forget design thinking and try hybrid thinking. Retrieved July 4, 2010, from thinking-and-try-hybrid-thinking

[ 103 ]

Quora. (n.d.). Neil Hunt: What types of things does Netflix A/B test aside from member sign-up? Retrieved December 1, 2010, from things-does-Netflix-A-B-test-aside-from-member-sign-up Rutledge, Andy. (2010). The UX design education scam. Retrieved November 14, 2010, from Sakai. (n.d.). In Wikipedia: The free encyclopedia. Retrieved October 27, 2010, from http:// Swann, Cal. (2002). Action research and the practice of design. Design Issues, Vol. 18, No. 1 (Winter 2002) pp. 49-61. Tapscott, Don. (2010a). The future of education: Reboot required. Retrieved October 12, 2010. from Tapscott, Don. (2010b). Needed: A new model of pedagogy. Retrieved December 3, 2010 from [ 104 ]

Villamor, C., WIllis, D. & Wroblewski, L. (2010). Touch Reference Guide. Retrieved December 4, 2010, from Watts, C., Simons, J.T. & Baird, D. (2010). The media scholarship project: Strategic thinking about media and multimodal assignments in the liberal arts. EDUCAUSE Quarterly, 33(3). Retrieved November 24, 2010 from http://www.educause. edu/EDUCAUSE+Quarterly/EDUCAUSEQuarterlyMagazineVolum/ TheMediaScholarshipProjectStra/213673 The web standards project. Retrieved July 4, 2010, from Woyke, Elizabeth. (2010). Bell Labsâ&#x20AC;&#x2122; Super Virtual Conferencing. Forbes Magazine, December 20, 2010. Retrieved December 22, 2010, from technology-bell-labs-virtual-videoconferencing.html Wroblewski, Luke. (2010). Mobile first helps with big issues. Retrieved November 13, 2010, from

[ 105 ]


Everybody is a user experience designer. â&#x20AC;&#x201D; Whitney Hess

Three surveys were created for the purpose of soliciting student and educator reaction to physical and virtual learning environments in visual arts learning. As detailed in Chapter 4: Methods and Methodologies, surveys were distributed via a network of online connections, and no accurate count of recipients can be developed. The number of responses are noted with individual surveys.


Initial survey questions drafted

Initial survey questions released to test group (educators and students) for feedback

Based on feedback, survey questions revised, largely for clarity

[ 108 ]

November 2010 • Survey response forms were created using Google Docs’ Form tool • Survey was released for general use via email, Facebook and Twitter to author’s personal network and to many notables in the field of web design or education December 2010 • Survey responses were collected through December 31, 2010

SURVEY WEBSITE The survey site landing page had the following text and links: Hi. For my Master’s thesis, I’m exploring alternative ways of presenting visual design classes in an online/distance format. To that end, I need to get a better grip on how people feel about the classes they’ve already dealt with, either online or traditional format. So, please pick one (or more) of these surveys that may apply to you and spend 10 minutes with it (they’re short, promise.) Thanks, Patrick Foster --------------------------If you have ever taken a visual design course (illustration, web design, Photoshop, etc) online or in a distance learning environment » If you’ve ever taken a visual design course in a traditional classroom setting » If you’ve ever taught a visual design course (illustration, web design, Photoshop, etc) online »

SURVEY QUESTIONS If you have ever taken a visual design course (illustration, web design, Photoshop, etc) online or in a distance learning environment: Number of responses: 7 Questions: • Please list three things about the online course environment that you felt were a success (without focusing on the course’s content): • Please list three things about the course environment or setting you felt were unsuccessful (slow feedback, poor ‘lecture’ environment, etc- again with no focus on the course’s actual content):

If you’ve ever taken a visual design course in a traditional classroom setting: Number of responses: 34 Questions: • Please list three things about the course environment (meaning the methods/ techniques used to present the course material, specific to its physical setting) that you felt were a success (without focusing on the course’s content) • Please list three things about the course environment or setting you felt were unsuccessful: • Please list three things you would suggest to improve the presentation of the course (not its content):

• Please list three things you would suggest to improve the presentation of the course (not it’s content):

• How do you think classroom-based visual design courses could be made better? What would you change? What would you keep the same?

• If you’ve taken a visual design course in a traditional classroom setting, which course environment did you prefer? Why?

If you’ve ever taught a visual design course (illustration, web design, Photoshop, etc) online:

• How do you think could online course environments be made better? What would you change? What would you keep the same?

Number of responses: 6 Questions: • Please list three things about teaching in an online course environment that you felt were successful:

[ 109 ]

• Please list three things about the online course environment that you felt hindered your ability to teach well: • What three things would you change to improve the online course environment to improve your ability to teach your subject? • If you’ve taught in a traditional classroom setting, which environment do you prefer? Why? • Would you teach an online course again? Why? Or why not?

[ 110 ]

• If you’ve taught in a traditional classroom setting, do you think your students had a better learning experience in your online course or your traditional course? • How do you think could online course environments be made better? What would you change? What would you keep the same? • Do you know what software platform your online course used? Please be as specific as possible as to brand, version number, etc.

Done is beautiful. â&#x20AC;&#x201D; Frank Chimero

At a Far Distance, True Colours and Shapes  

Possibilities in Distance Learning for Web Design Education. A Master's thesis presnted to the Nova Scotia College of Art and Design, April...

Read more
Read more
Similar to
Popular now
Just for you