Learning and studying Interaction Design through Design Patterns.
Miguel Carvalhais Universidade do Porto, Faculdade de Belas Artes
September 2008
The development of a course on Interaction Design at the School of Fine-Arts of the University of Porto presented a good context for the deployment of a pedagogical program built around the study and the writing of design patterns for Interaction Design. This paper presents a report of this experience, of why design patterns were used in the course and how they were studied and created by the students.
Introduction & context At the School of Fine Arts of the University of Porto (FBAUP) we have been faced with a growing demand for studies in Interaction Design and in the design of digital systems, both at the undergraduate and postgraduate levels. At the forefront of the market demands for design graduates, we currently find web design, software design, hybrid and digital media skills and, even in the traditional areas of communication design such as corporate identity or editorial design, we nowadays feel the need for not only basic skills but very often for a high expertise in digital systems, be it in the design of corporate identities that need to be deployed in digital contexts or in the design of such media as eBooks, DVDs, &c. In spite of this, most of the skills that communication design students develop during their undergraduate training at FBAUP are hardly oriented towards digital technologies. Digital tools are of course learned and used, but besides some very specific courses dedicated to e.g. Multimedia Design (4th year, undergraduate), Web Design (2nd, 3rd or 4th years, undergraduate) and Introduction to Programming (1st year, undergraduate), there is hardly the time to closely study digital media, much less their technical aspects. Digital systems are studied as tools, and most often they are not specifically studied as a field of work per se, but more as resources to be used in developing projects in other fields, such as print, audiovisuals, &c. Interaction Design skills need to be built upon a broader procedural literacy that has long been defended as indispensable for any practitioner of new media. As early as in the 1970s, Ted Nelson defended that “the more you know about computers, the better your imagination can flow between the technicalities, can slide
1
the parts together, can discern the shapes of what you would have these things do.” (quoted in Reas and Fry 2007, 3) Authors as Stephen Wilson (2002), Moira Cullen (1998), Gregory Ulmer (1994), Brenda Laurel (1993), Joseph Weizenbaum (1976) and the aforementioned Ted Nelson (2003), to name just a few, made strong cases for the necessity of studying programming, not a single specific language, but rather, as Michael Mateas puts it, studying “the more general tropes and structures that cut across all languages”, garnering a “general competence in computation as the medium for representing structure and process.” (2005) Structure and process are, therefore, the matter with which form is created in digital systems. If the “ultimate object of design is form” (Alexander 1964, 15), it is not enough to be able to shape the matter with which it is created, to use the tools that create it, or to read and write the language with which it is summoned, but it is also essential that there is a “programmatic clarity in the designer’s mind and actions”, so that she can “trace [the] design problem to its earliest functional origins and be able to find some sort of pattern in them.” (Alexander 1964, 15) It is then necessary to be literate in procedural phenomena, but also in the culture of the design project for interactive systems, to be literate in the means through which cross-disciplinary undertakings can be developed and accomplished. In the school year of 2006/2007 the author was asked by the Design Department of FBAUP to organize a course on Interaction Design for the master courses of FBAUP. In this context, two immediate problems were identified: (1) How to study Interaction Design with students that, in spite of having an extensive knowledge of communication design, have little or no skills in programming and have mostly never developed complex projects for digital media; and (2) how to study Interaction Design by placing the emphasis on digital systems as a broad field of work and not on particular systems — personal computers, handheld devices, web sites, games, installations, kiosks, &c — so that the course could become as useful as possible to a group of students coming from different backgrounds, with varying interests, perspectives and sub-fields of specialization. Following examples found in the literature that we compiled for this course and also the experience gathered from consulting colleagues that teach engineering and computer programming, we found a possible answer in the study and development of design patterns for Interaction Design.
What are patterns Christopher Alexander’s “Notes on the Synthesis of Form” (1964), is an indispensable treaty on the project of design. In this book Alexander presented a very solid, methodical and systematic approach to the problems of design and, although he wasn’t focusing in the issues of designing for digital systems, he nevertheless
2
considered the difficulties posed by very complex contexts, or problems. When discussing methods to explore the conceptual order required by complex design problems, he used strategies that can also be found in the fields of computer sciences and artificial intelligence, most notably the subdivision of (complex) problems in several simpler ones, and the further subdivision of these into even simpler problems, defining “goals” for the project that add up to the higher-level goal that answers the problem, that defines the form that fits the context. If the objective of design is form, Alexander warns us that this form can not be the result of a process that uses any arbitrarily chosen formal order, because forms that are created this way, although may in some sense be originated by the problem, do not manage to fully answer it. The core of the design problem is to achieve a good, if not perfect, fitness between the form being designed and the context that called for it (Alexander 1964, 1), so that the form can be the actual solution to the problem that is defined by the context. When dealing with complex contexts, the subdivision of the higher-level problem gives room to a multitude of lower-level problems that call for various strategies of design. Whenever one of the lower-level problems is adequately solved, the designer garners knowledge and thus, if she wishes to make any future use of this knowledge, she is faced with the question of how to represent it and how to effectively explore it in behalf of other contexts — how to represent the connections that helped her reach the solution of the problem. The designer needs to develop what Marvin Minsky called a “knowledge-based problem-solving system” (1988, 74), if she ever wants to be able to return to the proven solutions of identifiable and recurring problems in any of the various levels of the program or of its realization, as defined by Alexander in “Notes on the Synthesis of Form” (1964). In “The Timeless Way of Building” (Alexander 1979) and “A Pattern Language. Towns, Buildings, Construction” (Alexander et al. 1977), Alexander proposes a system to do this systematic gathering of knowledge about the multiple bits and pieces that are brought together in the resolution of the design project. He develops the basic concepts of the pattern and of the language of patterns, and not only defines the pattern format — the common structure for the development of individual patterns — but also proposes the idea of a larger framework of patterns that are articulated in a language. This language is defined by causal connections in a hierarchy developed from patterns with a high-level and broader scope, towards patterns with a lower-level and narrower focus. Alexander presents patterns as definers of a common vocabulary for all the agents of design and as timesavers and record-keepers of good and tested solutions for recurring problems. According to him, a language of patterns should (1) list and name the most common problems in a given field of design, (2) describe the main characteristics and the most effective solutions to a given problem, (3) help the designer to move along the problems in a logical way and, finally, (4) allow many alternative routes through the process of design.
3
Each of the design patterns in the language should be the “abstraction from a concrete form which keeps recurring in specific non-arbitrary contexts” (Riehle and Züllighoven 1996), or, as Brad Appleton suggests, “a named nugget of insight that conveys the essence of a proven solution to a recurring problem within a certain context amidst competing concerns” (2000). In “The Timeless Way of Building” (1979), Christopher Alexander summarizes that, (1) a pattern expresses the relation between a certain context, a problem, and a solution; (2) as an element in the world, each pattern is a relationship between a certain context, a certain system of forces which occurs repeatedly in that context, and a certain spatial configuration which allows these forces to resolve themselves; (3) as an element of language, a pattern is an instruction, which shows how a configuration can be used, over and over again, to resolve the given system of forces, wherever the context makes it relevant; and finally that a pattern is (4) at the same time a thing and the rule which tells us how and when to create that thing — it is both a process and a thing; both a description of a thing and a description of the process which will generate it. Each of the patterns in a language should share a common format that includes at the very least, (1) a name, which is itself a short description of the pattern; (2) a problem description that outlines the conflict of forces in a given context; and (3) a discussion that explains the problem in more detail that describes evidences for the existence of the problem and finally points to the methods to solve the problem. Design patterns are then a way to systematize good practices and proven solutions to several (many, or all) of the problems that designers face in any given field of activity. Design patterns document the problem that demands a solution, following it with the discussing and explanation of the solution that is being presented. They try to understand the forces in conflict at the core of the problem and to propose a set of values to steer the designer towards a decision that can be the best for the particular context that is being worked. Design patterns should be sufficiently abstract to be more or less universal in its usefulness, but simultaneously specific enough to be of any use. Therefore, design patterns should present and explain their contexts of applicability, referring to other patterns whose solution they can help to develop and likewise reference further patterns that can be used in its solution. All of this should be done in simple and synthetic documents, written carefully but economically, and that keep in mind that each of the patterns is just a piece in the language, that its value is not independent from the remaining patterns and from the way it can be articulated with them. This paper aims to affirm the usefulness of the system of patterns in the development of a methodology for the study of any field of design, and, particularly, for the field of Interaction Design.
4
Why patterns in design education? A system of design patterns allows the simultaneous study of both the general problems of, and the specific solutions for the digital systems that both interest students and represent much of the professional demands they will face. Design patterns can prospectively fit systems that are yet to be designed, or that cannot be experienced by the students or in the class, due to technical, temporal or economical limitations. Design patterns can be developed with varying scopes: from very broad-range and high-level patterns dedicated to the psychology of the users or to information architecture, all the way down to very narrowranged and focused patterns, dealing with more specific issues, such as portable devices, web sites, interactive installations, games, or sub-classes of problems that may be specific to these. Patterns can also be used as (1) tools for the systematic gathering of knowledge about Interaction Design at multiple and contrasting levels of details, that is, as tools for the theoretical study of Interaction Design; (2) tools for the design of digital systems of variable complexity; (3) tools to guide the implementation stage of these projects; (4) tools for the analysis and the critical review of design projects; (5) reference tools for the usage and commissioning of design for digital systems; and, finally, as (6) a system for the creation of a vocabulary for communication design and its parallel disciplines. Therefore, a language of patterns can be a valuable resource whatever the future needs of the students may be, both in academic or practicing design work, as well as it can be a very good resource for all of those professionals from multiple disciplines with whom students will need to work in the collaborative development of digital systems. Christopher Alexander envisioned most of these usages when he first studied the design project and suggested the language of patterns for architecture and urbanism in the 1970s. Three of his works from this period have been very important foundations for the development of this course, the first of them, “Notes on the Synthesis of Form” (Alexander 1964), due to its insights on the design project, the other two due to the system of patterns they presented. These patterns, theoretically introduced in “The Timeless Way of Building” (Alexander 1979) and published in “A Pattern Language. Towns, Buildings, Construction” (Alexander et al. 1977) have, amongst other things, provided the class with a comprehensive and very well articulated example of a complete language of patterns for reference. The fact that they focus on another field of design and not on Interaction Design was actually beneficial, as it allowed the students to understand the concept of a pattern language and its relevance in a sufficiently abstract level, focusing in the instrument and not in its contents, thus leading the way to the development of the class’ work.
5
Patterns for Interaction Design Having established this ground to develop the course, we searched for experiences and references of patterns for Interaction Design. At the time of the initial preparation of the course, in 2005/2006, we referenced two main books. A third reference was released in 2007 and was then included in the bibliography and in the lectures. These three books were not by any means the only references in the bibliography (available at http://tinyurl.com/5rykut), which also compiled online references and several other resources, with themes that ranged from design (communication, visual, sound and interactive) to media theory and computer sciences, &c. “A Pattern Approach to Interaction Design” (Borchers 2001) was, to our knowledge, the first book that used patterns to systematically present knowledge gathered in the field of Interaction Design. It is an interesting work both for the preliminary study of patterns and languages of patterns but also because of the parallel development of more than one language of patterns. Borchers presents a language for interactive musical exhibitions and extensively debates the usage of patterns in other disciplines. He then subdivides the language in three clusters of patterns that can be seen as three parallel languages: a (1) Musical Pattern Language, a (2) HCI Pattern Language, and, a (3) Software Pattern Language. This multiple approach is very interesting as it shows the resourcefulness and malleability of a system of patterns, although on the other hand it may limit the scope of the patterns to a somewhat too specific usage. Maybe as a further consequence of this “dispersion” of the author, we have found that the number of thirty-two patterns in the book somewhat limits its practical usefulness. Borchers approach is nevertheless appealing due to the macrostructure that he proposes for the organization of the patterns, something that was perhaps the most significant contribution of his book to our ongoing work. Borchers initially uses a structure that classifies patterns in nine levels according to scale, much in the same way that Alexander did: (1) Society, (2) Multiple users, (3) Social position, (4) System, (5) Application, (6) UI Structure, (7) Components, (8) Primitives, and, (9) Physical properties (Borchers 2001, 39). Alternatively he later proposes a simpler structure, based on process, split in only six levels: (1) Culture and society, (2) Environment, (3) Role of the user, (4) Use, (5) Navigation, and, (6) Structural levels, further subdividing tasks into (a) retrieval, (b) monitoring, (c) proactive and reactive controlling, (d) construction, (e) transaction, (f ) modifications, (g) calculation, (h) workflow, and (i) communication (Borchers 2001, 40). We will later see how we have found that a simpler macrostructure was seemingly more adequate to the development of a language of patterns for Interaction Design, and how fewer levels have allowed us to relate patterns more easily in the resolution of practical problems. The second of the books that we initially studied was “Designing Interfaces, Patterns for Effective Interaction Design”, by Jenifer Tidwell (2005), a revised and expanded version of her 1998 collection. This is a 6
far more comprehensive collection of patterns than Borchers’, and it is also more universal in its intent, not focusing in a somewhat specific field of work. The larger part of the 93 patterns that Tidwell presents became the core material for the organization of the lectures in the first edition of the course, and the structure of her language defined the macrostructure of the classes, organized in 7 main topics covering: (1) Users, (2) Information Architecture, (3) Navigation, (4) Visual Layout, (5) Actions and Commands, (6) Information Graphics, and, (7) Forms and Controls. Builders and Editors and Visual Style and Aesthetics, the remaining two sections of Tidwell’s book were not included as discrete sections in the classes, the first due to its high specificity and the later due to the overlap with the students’ background and the subsequent redundancy and repetition of content it could bring to the lectures. Visual style and aesthetics were almost permanently discussed during the classes, usually relating them to the patterns that were presented, but most of the times not through the development of specific patterns. Tidwell’s patterns are in general very complete, although they sometimes lack in visual references or examples and in the extensive cross-referencing of other patterns. The macrostructure of the language is clear, but the definition of some of the sections leads to some redundancy or to difficulties in the categorization of the individual patterns in the structure. The microstructure of the individual patterns is very loose, something that in general simplifies them, but that can also be a peril to the internal consistency of the language. In general, being more broad in range than Borchers’, Tidwell’s work proved to be more valuable as a tool for instruction, precisely because it touches multiple aspects of the field of Interaction Design, and because it mixes platforms, tools and systems in the problems and examples discussed along the patterns. Besides these two books, we referenced the work on design patterns for object-oriented programming, “Design Patterns: Elements of Reusable Object-Oriented Software” by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides (1995), not so much as a workbook but as another good example of how patterns can be used in a field that is so close to ours as (information and communication) designers but that is simultaneously so alien to most of the students in the class. We used some online references and collections of patterns, mainly Martijn van Welie’s collection (2007), Tom Erickson’s collection of references in “The Interaction Design Patterns Page” (2004) and the Yahoo! Developer Network’s “Design Pattern Library” (2005-2008), all of which were included in the references given to the students as part of the course’s syllabus. These three collections, although of variable overall utility in the context of the classes became important inspirations to the platform we adopted for the development of the work in the course and to the system used to compile examples for each of the patterns developed. As an example, the possibility to comment the patterns that is offered by “A Pattern Library for Interaction Design” alerted us to the potential benefits of collaborative work and public discussion that later led us to choosing a wiki platform. A more recent platform, “Pattern Tap” (Smith and Pollock 2008), has been referenced, but,
7
by having its main focus on the visual cataloguing of design solutions and not really in the development of patterns, it didn’t prove too useful in this context. Other collections, e.g. “Stimmt AG - Uni Basel Pattern Catalogue” (2008) or Christian Behrens’ “Info Design Patterns” (2008) were also not included, mostly due to time constraints in the course. The third book to be added to the main references of patterns was “The Design of Sites: Patterns for Creating Winning Web Sites”, by Douglas K. van Duyne, James A. Landay, and Jason I. Hong (van Duyne, Landay and Hong 2007). This book is obviously very oriented towards web site design and it structures each of the patterns in a somewhat simpler (and eventually more versatile) way, reducing the fundamental structural sections of the patterns to just (1) Name, (2) Background, (3) Problem, (4) Forces, (5) Solution, and, (6) reference to other patterns. The macrostructure of the language is divided into a larger and more complex number of major sections: (1) Genre, (2) Navigation framework, (3) Homepage, (4) Writing and content management, (5) Trust and credibility, (6) Basic e-commerce, (7) Advanced e-commerce, (8) Help to fulfill tasks, (9) Page layout, (10) Search, (11) Facilitation of navigation, (12) Speeding up the site, (13) Mobile web. This complex structure can be justified by the extreme specialization of this language, that unlike Tidwell’s, doesn’t propose to be more or less universally applied to any (or most) of the digital systems, but just to one very peculiar sub-class of systems. It is interesting to note that while both Borchers and Tidwell dedicate initial sections or chapters of their books to the roles or behaviors of users, van Duyne et al. do not. However they elevate to a major section of their language something that Tidwell mentions in the introduction to her book but that never really systematizes in patterns: the idea of genre, or what Tidwell identifies as “idioms” of the interfaces. This book also raises issues regarding the way in which we can devise patterns that are very specific and that address questions pertaining to single-purpose problems of sub-fields of digital systems. We have been discussing this issue in the classes since the work started and have been experimenting with possible solutions that may allow us to formulate as patterns some specific interface solutions for applications or web sites, for example — something very often found in the Yahoo! Design Network’s “Design Pattern Library”, for example. This book’s contributions to the course and to the language have been limited so far. This is mostly due to time constraints. However, parts of it and of its patterns have been integrated in the class, have inspired ongoing patterns and are crucial references for the current work in progress.
8
Usage in the class While many of the patterns from the referenced books have been used in the lectures, a more ambitious proposal was presented to the students of the two semesters during which the Interaction Design course was so far lectured. Based on the idea of a language of patterns and in those patterns discussed and presented in the classes, the students were challenged to collaboratively develop a language of patterns for Interaction Design. This assignment was presented as the main evaluation system in the course, replacing the more usual final written test. The proposal was to develop a broad-span language, a language for the study and development of interaction design projects, but also for their analysis and critical review, a language that would not lead students to a forced specialization in a particular sub-field of Interaction Design but that could benefit from the existing specializations. Asking students to be involved in the creation or development of the patterns turned out to be advantageous in several ways: — Patterns are seen as living entities, not as static recipes for producing instant results. They are seen as a collection of phenomena from the world of design, as models of good practices that can be collected and studied beyond the more direct or simple visual layer and that can, and should be, continuously revised and expanded; — As students are asked to write patterns instead of just reading them, they are incited to see the patterns as both a theoretical resource and as a framework for creation; — The investment in the work of writing the patterns leads the students to study the language much more closely than they otherwise eventually would; — Students create the theoretical tool, not only study or use it, thus coming much closer to the matters being studied, actively researching them, the bibliography that is provided and other references that they may need to track down to be able to document specific patterns; — Students are incited to bring their individual backgrounds to the class and learn through an active, collective and social process. This has proven results in the motivation of the students, a good example being the way that some students from the art courses that enrolled in this course as an elective have actively participated, developing very interesting work. Inspired by the previously mentioned online platforms, a wiki was setup to organize the patterns and to allow the easy tracking of the works in development. Each student was requested to either (1) start a new pattern, or, to (2) develop one or more of the existing patterns by expanding or reviewing its contents, images, references, notes or examples. Furthermore, students were encouraged to use the “discussion” pages to 9
comment the works in development by their colleagues, thus generating an open discussion that contributed to the improvement of the patterns and an overall qualitative increase of the collection. At the start of the first edition of the course (the second semester of the 2006/2007 year), the wiki contained no patterns, and all of those patterns that were referenced from Borchers, Tidwell and other authors were only discussed and presented orally in the classes. Very short summaries of these were posted in the online notes from each of the lectures, in a section of the wiki dedicated to the compilation of these. Students were encouraged to develop their patterns directly in the wiki, starting by whichever information they had (most usually a name, the description of a problem, maybe also references) and to work in the pattern or patterns during the semester, keeping a visible work in progress that could benefit the development of all the other patterns. This would ideally allow all the students to cross-reference with other works, to check data and to continuously develop a work-in-progress format for the patterns. The idea of keeping this work public also intended to lead the students to develop the patterns more thoroughly, checking citations and keeping records of all the information while, ideally, converging towards a somewhat unified style of writing, something that would probably be very difficult if all the works were developed individually and compiled only at the end of the semester. Furthermore, all students were encouraged to edit and amend the patterns of their colleagues, adding useful information whenever and wherever they could do it sensibly. Their work was not evaluated quantitatively but rather qualitatively and the “history” of the wiki allowed checking the context and relevance of all the contributions. Registration in the wiki is limited to the students and teacher of the course, read-only access is unrestricted. The global coherency of the style of writing of the patterns was more visible in the second edition of the course, as students didn’t have to start from scratch but rather from the work already developed during the first edition. Some interventions in those first patterns brought them closer to the patterns of the second edition, but a few remained in a style that is still not totally accordant with the rest of the collection. Work in the patterns was developed over the course of ten weeks and during this period the patterns in progress were regularly discussed in the class, in various round tables during which the work in development was presented and debated. Throughout the second edition of the course, both because the number of students in the class had more than doubled since the first and because the 62 patterns in the wiki were enough to allow it, we experimented a second exercise. The class was asked to use the patterns in the development of a work of analysis and criticism of interactive systems and tools. Each group of two or three students was requested to select a system, tool, or part of, and to develop its critical analysis, starting by listing those patterns that were observable in the object of the analysis, and proceeding to elaborate a study of how these patterns allowed to answer the context for which the system had been designed, how they were articulated in a language of patterns specific of the object.
10
This second exercise was not only intended as a test of the students and the collection of patterns, but also as a further contribution to the work of developing the collection. By using the patterns in the extensive analysis of real-world examples, some of their shortcomings would perhaps be made more apparent to both students and teacher, and a revision would be possible. Problems were indeed identified, in references, lack of examples, and many other small details that were at the time revised, not only in the patterns that the class was working by then, but also in patterns developed during the previous edition, which were edited if necessary.
Structure of the language and of the patterns After several discussions in the class, the macro hierarchy of the language was defined in what was perhaps one of the simpler possible way, dividing the patterns into as few as 6 groups: (1) User, (2) System, (3) Application, (4) Output (human perception), (5) Input (system perception), and (6) Primitives. Adopting this simplified structure aimed at nurturing not so much a hierarchy that was based on scale or process but rather, to be able to organize the patterns as modules that could be more or less freely connected in relations that were not grammatically imposed by the hierarchy. While studying the language we have been finding that sometimes the same pattern can be used at multiple levels in the specific language of patterns built for a project, therefore, we concluded that it wouldn’t be really adequate to divide them so clearly in the index of patterns. The discussion regarding this index is still ongoing and thus it is subject to changes as more patterns are developed, or languages for specific projects are built. The goal was not to create one or many very specialized languages with independent patterns (a language for the web, one for mobile devices, one for operating systems, &c.) but rather to create a collection of patterns from where multiple languages could be created whenever necessary, thus sharing knowledge and data between specific fields that otherwise eventually would not cross information. The microstructure was also discussed and adjusted over time. At the moment of writing, each pattern is structured around (1) Name, (2) Validity, (3) Context with references, (4) Headline of the problem, (5) Description of the problem, including notes and examples when necessary, (6) Solution, including notes and examples when necessary, (7) Diagram, and, (8) References. Great care was put in the observation of a solid and regular structure for the patterns, trying to always develop all the sections of their structure (even the diagram, that being a seemingly smaller section of the pattern is extremely important due to how much and how well it is able to synthesize the core of the pattern). This wasn’t achieved in all patterns, due to limitations of time and other constraints. The nature of this work allows for this openness, as incomplete patterns are always seeds for the future work of other students.
11
We insisted in the importance of limiting the extension of the patterns, appealing to economy, trying to make the patterns as easy and fast to read as possible. Whenever necessary, notes about specific issues or multiple examples can be added, but preferably outside of the main document of the pattern, always as individual, hyper-linked, pages.
Example pattern The current collection includes 62 patterns in various levels of completion. The following pattern, included in the “Application” group, is presented as an example of the work so far developed by the students: (1) Name: Right and Left Alignment (2) Validity: **
(Example: image size dialog from Photoshop CS3) (3) Context with references: …defines an axis for separation and alignment in two column tables or forms. The items in the left column (usually legends) align to the right; the items in the right column (usually contents) align to the left… (4) Headline of the problem: How to compose pairs of items in a list? (5) Description of the problem: When we need to compose text-input fields, selectable choices or other input controls, there is a big diversity of possible elements to use and complex layout decisions necessary to fit together both the controllers and the legends that identify them and that need to be composed nearby. This problem is also felt when composing non-editable contents where several pairs of content and legend can be composed in a two-column structure. When reading left-to-right, the visual flow would “naturally” suggest to align both content and legends to the left, however, when aligning all the elements on the left column to the leftmost among them, these will tend to be composed further from their counterparts in the right column, depending on their length and on whether
12
wrapping of the text is possible. As stated by the Proximity principle of Gestalt’s theory, the pairs would maybe not be perceivable, once that the unevenness of the white-space between columns would compromise the correct interpretation of the pairings between contents and legends. Formally, both columns would be understood as consistent groups of information but the two alignments to the left would reinforce the vertical relations between different elements and not those horizontal relations one would need to emphasize. Composing the controllers immediately after the end of each of the legends would result in a very asymmetric composition and the unforeseeable horizontal placement of each controller would have a negative effect in the usability of the system. (6) Solution: Visually group all the elements in a block that is split by a clear vertical axis. Align the contents of the left column to their right and the contents of the right column to their left, therefore creating clearly identifiable pairs of contents. Right and Left Alignment should be used when it is necessary to apply a two-column structure to a list of contents and their legends. By using this pattern, we will align the legends to their rights and the contents to their lefts (or vice versa), thus minimizing the white space that separates them. This spine structure will lead to the reader to more immediate perceive visual pairs, due to the principle of proximity. The spacing between legends and contents should be uniform, reinforcing the central axis and making the better use of the continuity principle of Gestalt. The visual flow is therefore driven from the top to the bottom of the list. When composing editable contents, the legends should be composed on the left column so that the user can read them just before reaching the controllers for editing, knowing beforehand what these can be used for. In the case of non-editable contents this arrangement is not so important. In specific cases, when the legends are very long, it can be justifiable to limit the width of the column where they are composed, wrapping the text in two or more lines, if the context allows it.
(Example: list of tags in del.icio.us)
13
(Example of not using the pattern: Mac OS X System Profiler) (7) Diagram: no diagram was still produced for this pattern. (8) References: (a) Striped Lines is a possible solution to analogous problems, especially when more than two columns are necessary; (b) This pattern can be articulated with Titled Sections in the composition of complex contexts; (c) When dealing with editable elements, Keyboard Only, Keyboard Shortcuts and Jump To Item should be taken in consideration in order to facilitate the navigation and editing of the controls. (9) Authors: Cristina Braga, Helena Borges, Jonas de Andrade, 2008
Interdisciplinary benefits This language of patterns for Interaction Design is still in an early stage of development and is still a work in progress that because of its nature will remain a work in progress. Its main usage so far has been in the Interaction Design course, but it has already been used in other contexts, both in practical project scenarios and in research projects. A masters student of FBAUP developed her thesis on Usability and Accessibility in Web Design, using these patterns as a framework, and steering the development of the project to expand the language with the addition of new patterns and the revision of patterns that are specific to this field, broadening their references, citations and examples. This work helped to add a number of patterns to the language, bringing local focus and enriching the language. On a less theoretical and more practical front, the language has been used by the Laboratory of the Design Department of FBAUP during the development of several digital projects, in the course of which the language has been proving its usefulness both as a support tool for the development of the projects and as a general reference in the implementation and maintenance stages. Using the patterns in real-life scenarios has allowed to test them and to find limitations and areas of possible improvement that otherwise would maybe have passed unnoticed.
14
The patterns have also been used as references in the Web Design I and II courses and have started to be used in both theoretical and practical works developed by the students in those courses. Some of the students are enrolled in both Web Design and Interaction Design courses and this lead them to share the system with their colleagues. The adoption of the patterns by these classes also proved its usefulness in practical design contexts.
Conclusions & future work We hope this work in progress can continue to prove its usefulness as a tool for learning, studying and practicing Interaction Design. As previously noted, this collection of patterns is intended to be a work in progress, not only because of the way its development is tied to an ongoing course but also due to the constant changes in the field it studies — new devices, systems and interfaces need new patterns or force revisions in the existing patterns. The completeness of the collection is one of the main objectives — it is necessary to develop more patterns, especially in the lower-levels — but the completeness of each of the patterns is also an important focus: more examples are necessary, and more specialized and organized examples, maybe related to specific platforms or operating systems but also historic examples. Another issue to consider is translation. The official language of the courses in FBAUP is Portuguese and the majority of the post-graduate students are either Portuguese or native speakers of Portuguese. The average proficiency in English of the students varies a lot, and there is a considerable percentage of the students to whom the use of English as a working language can be a big problem. We chose to develop this language in Portuguese, knowing in advance that this option would cause two main problems: (1) The translation of names, keywords and technical terms generates frequent discussion. In most of the cases, it was decided to keep the English names and expressions whenever there wasn’t any viable and commonly accepted Portuguese translation. This was the case with such names as e.g. “breadcrumb”, “framework”, “wizard”, or “tooltip”. Pattern names have been created in Portuguese except in cases when the pattern name was or included some of these English terms. As Caroline Schubiger points, the discipline of Interaction Design is still “in the process of defining itself and formulating a specific vocabulary” (2005). This is particularly true for us, using English and Portuguese words in a confusing balance, most of the times being uncertain of the reasons why either language is chosen in naming conventions. Through the names of the patterns and the normalization of terms over the collection, this vocabulary can be discussed and we can hopefully contribute to its normalization.
15
(2) The limitation of the usefulness of the language to the minority of non Portuguese-speaking students in FBAUP or outside the sphere of Portuguese-speaking countries, as some exchange students at both undergraduate and post-graduate levels. We believe that in order to make this collection as useful as possible, we will need to devise a strategy for its translation and for the maintenance of parallel Portuguese and English versions of all the patterns. This work is perhaps not adequate to the students of the Interaction Design class, but may be interesting to develop in collaboration with exchange students, students from foreign-languages courses — especially if they are studying technical translation. It also remains to test whether it will then be possible to keep ongoing synchronized revisions of both language versions. Once it is open to unrestricted editing, the language has the potential to involve agents from outside FBAUP, both in other schools of the University of Porto, other universities or from outside the academic circles. This may of course demand a bigger and more regular user base that can assure the ongoing editorial control of the language. We think it is still too early to open the registration in the wiki to a broader number of users. A first step may very likely be to try to collaborate with another school, sharing access and edition with its students, which could allow us to test the development of the language with a broader base of users. After this is tested we hope to eventually make editing access unrestricted. It could be argued that a unified pattern language for all fields of communication design could be possible, should a concerned effort be developed by designers and design researchers. As this language of patterns for Interaction Design is being developed, we have been very often faced with questions that are relevant and very often usable to address problems shared by other fields of design. These have been so far addressed in the context of Interaction Design, but could eventually be formulated in ways that would make then useful in other contexts. The development of both more specific sections of the language (dedicated to accessibility or usability, or to specific media or platforms) or of patterns that can address other fields of communication design, can lead to the necessity of revising not only the macrostructure of the language but also to the development of new or alternative systems for indexing the patterns, bringing the benefits of this approach also to other fields of design that have, in some cases, lacked such a methodical and extensive systematization of knowledge.
“Some of the most crucial steps in mental growth are based not simply on acquiring new skills, but on acquiring new administrative ways to use what one already knows.” (Papert’s Principle, quoted in Minsky 1988, 102)
16
Alexander, Christopher. Notes on the Synthesis of Form. 1964. Cambridge, Massachusetts: Harvard University Press, 1964. 1971. —————. The Timeless Way of Building. New York: Oxford University Press, 1979. Alexander, Christopher, et al. A Pattern Language. Towns, Buildings, Construction. New York: Oxford University Press, 1977. Appleton, Brad. “Patterns and Software: Essential Concepts and Terminology”. 2000. 10 August 2008. . Behrens, Christian. “Info Design Patterns”. 2008. 10 August 2008. . Borchers, Jan. A Pattern Approach to Interaction Design. Chichester: Wiley, 2001. Cullen, Moira. “Future Te
Ch.” The Education of a Graphic Designer. Ed. Heller, Steven. Vol. 1. New York: Allworth Press, 1998. 31-37. Erickson, Tom. “The Interaction Design Patterns Page”. 2004. 10 August 2008. . Gamma, Erich, et al. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley Professional, 1995. Laurel, Brenda. Computers as Theatre. Reading, Massachusetts: Addison-Wesley, 1993. Mateas, Michael. “Procedural Literacy. Educating the New Media Practicioner.” On The Horizon. Special Issue. Future of Games, Simulations and Interactive Media in Learning Contexts 13.1 (2005). Minsky, Marvin. The Society of Mind. 1985. London: Picador, 1988. Nelson, Theodor H. “Computer Lib / Dream Machines.” The New Media Reader. 1974. Eds. Wardrip-Fruin, Noah and Nick Montfort. Cambridge, Massachusetts: The MIT Press, 2003. 301-38. Reas, Casey, and Ben Fry. Processing: A Programming Handbook for Visuals Designers and Artists. Cambridge, Massachusetts: The MIT Press, 2007. Riehle, Dirk, and Heinz Züllighoven. “Understanding and Using Patterns in Software Development.” Theory and Practice of Object Systems 2.1 (1996): 3-13. Schubiger, Caroline. “Interaction Design: Definition and Tasks.” Total Interaction: Theory and Practice of a New Paradigm for the Design Disciplines. Ed. Buurman, Gerhard M. Vol. 1. Basel: Birkhäuser, 2005. 341-51. Smith, Matthew, and Chris Pollock. “Pattern Tap”. 2008. 10 August 2008. . Stimmt AG - Uni Basel. “Stimmt Ag - Uni Basel Pattern Catalogue”. 2008. 10 August 2008. . Tidwell, Jenifer. Designing Interfaces. Patterns for Effective Interaction Design. Eds. Odewahn, Andrew and Mary O’Brien. Sebastopol, California: O’Reilly, 2005. Ulmer, Gregory L. Heuretics: The Logic of Invention. Baltimore, Maryland: Johns Hopkins University Press, 1994. van Duyne, Douglas K., James A. Landay, and Jason I. Hong. The Design of Sites: Patterns for Creating Winning Web Sites. Second Edition ed. Upper Saddle River, New Jersey: Prentice Hall, 2007. van Welie, Martijn. “A Pattern Library for Interaction Design”. 2007. 10 August 2008. . Weizenbaum, Joseph. Computer Power and Human Reason: From Judgment to Calculation. San Francisco: W. H. Freeman and Company, 1976. Wilson, Stephen. Information Arts. Intersections of Art, Science, and Technology. Ed. Malina, Roger F. Cambridge, Massachusetts: MIT Press, 2002. Yahoo! Developer Network. “Design Pattern Library”. 2005-2008. 10 August 2008. .
17
