Graphic Design Conversation

Transcription

1 Aneto Okonkwo 12/12/06 CS377B Graphic Design Conversation Introduction This document describes the design process and results of a project focused on modeling collaborative graphic design on a whiteboard interface using conversation theory. Collaborative graphic design refers to two or more individuals using graphic media (such as color, symbol, and type) to communicate a style, expression or message e.g. children collaboratively painting a colorful mural on a wall. A whiteboard interface is defined as a simulated panel on which several people can write or diagram at the same time, with the results visible to the participants. From Conversation Theory, as observing beings, we learn what we learn by interacting with our environment: the spaces, objects, processes and others-who-are-also-observing all around us. 1 In graphic design, the level of agreement in conversation between collaborators can often define the achievement of the shared goal. Graphic Design Conversation is an important project because the application of Conversation Theory to graphic design can help build awareness among the collaborators about their level of agreement. The design process for the project involved modeling the collaborative graphic design interaction, prototyping the solution, and implementing a dual-user demonstration in Adobe Flash. Modeling Collaborative Graphic Design Using Conversation Over the course of three weeks, I revised several models of the interaction between graphic designers in conversation. My initial approaches involved the following strategies (1) Pulling from my own graphic design experience to diagram the interactions between artists and clients or other artists (2) Resolving the mapping of these diagrams within the class conversation theory models. I tested and revised these initial models through discussions with my classmates outside the class, reviews in the class group, and communication with the class professors outside of class. The evolution of the models drove towards rigor, clarity and specificity in narrowing and explicating the focus of the project. The final models were distilled to an example of two users, A and B, collaboratively working towards an example goal of drawing a cube. From Fig 1 below, each user would continually evaluate their level of agreement with their individual subgoals and the shared goal. The users would communicate with each other via a channel such as a whiteboard by drawing. After each action, the users evaluate whether they have accomplished their sub-goals and then the evaluation of each others actions builds awareness. The model postulates that the continual feedback loop of building awareness around the agreement of each user s models increases the control of the participants about their level of agreement. 1 Pangaro, P. Cybernetics and Conversaton

2 Fig 1. Final models - Collaborative graphic design conversation With the real-world models in hand, my next step was to translate those models into the more technically detailed models for the demonstration of a whiteboard interface. In Fig 2 below, two users, A and B, both have the capacity to communicate over the channel of a whiteboard by drawing lines on the whiteboard on their computer using a computer mouse. A and B are simultaneously viewing the whiteboard and evaluating their own drawings as well as the drawings of the other collaborator. In addition, within the whiteboard application, there is an algorithm that compares the users clicks, evaluates the comparison according to some pre-set goal and then displays a message to the users based on their level of agreement. For this model, I assumed a pre-set goal in order to simplify the model. For future work, a more complex demonstration could evolve the goal over time and/or allow users to specify their perceived goal e.g. uploading an image or sketch to the system. 2

3 Fig 2. Cybernetic models of dual-user graphic design conversation through whiteboard Through my design process, I iterated through several different potential algorithms for comparing user actions on the whiteboard against sub-goals and outputting the level of agreement. For example, Fig 3 below displays an early algorithm which involved comparing user actions among several categories color, coordinates, and shape. Arbitrary values would be pre-defined for each of these categories and a set of sub-goals for each category would be pre-defined e.g. the colors, shapes and coordinates required to draw a red house. While interesting, I resolved that this algorithm would prove too complicated for my demonstration and would obfuscate the essential elements of the project. The final algorithm, Fig 4 below uses only coordinates and lines as categories with the sub-goals of drawing the edges of a cube. The algorithm compares the current user action to all the possible sub-goals and at each step the algorithm measures how close the user s line is to one of the sub-goals. In addition, the algorithm compares the current user action to the last user action. Through these processes, the algorithm attempts to determine the current level of agreement in the conversation between both users. The labels of collaboration, cooperation, and conflict were used to represent different levels of agreement based on conceptual definitions taken from the concepts discussed in class (see Fig 4). 3

4 Fig 3. Early algorithms comparing user actions, sub-goals and agreement Fig 4. Final algorithms comparing user actions, sub-goals and agreement Prototyping The beginning phases of prototyping involved storyboarding the interactions of two users on the whiteboard and paper prototyping the states for each display. For example, in the initial state both users would be faced with a blank canvas. In state 2, one user would draw a line on the canvas. In state 3, the other user would respond with another line on the canvas and at this point the algorithm would compute their level of agreement and then display this to the users. I was able to test this paper prototype with classmates, friends and with the class group review. This prototyping approach helped me to isolate the specific pieces of the application that needed to be implemented and helped to de-scope extraneous features or interactions. The requirements for the demonstration included (a) the ability of each user to draw lines (b) the ability of those lines to persist over the course of the interaction and be viewed by the other user (c) the ability to record the positions of both users lines and 4

5 compare them to each other. Finally, I devised the actual algorithm by working through the different possible states and mathematically computing the level of agreement (e.g. see Fig 5 below). Fig 5. Scan of rough notes conversation interaction prototyping and mathematical coordinate algorithm derivation Implementation The demonstration implementation of the collaborative graphic design in a whiteboard interface using conversation theory was developed using Adobe Flash 8 and Adobe Flash Media Server. Flash was selected for the project because of the development time was constrained and Flash provided significant out-of-box graphical drawing methods. Flash Media Server was required in order to support dual-user sessions and the ability to persist drawing data between the simultaneous dual sessions using Flash Shared Objects (Cookies). Overall, the development required immense online research and a trial and error approach to development given my limited pre-class knowledge of these technologies. Fig 6 below exposes some of the technical details of the implementation of the algorithm in Flash Actionscript. For example, the testpoints function takes the four coordinates for two ends of a line and then this function calls the getdistance function which compares the distance of each coordinate from the pre-set sub-goal for the coordinates of the cube within a constant MARGINOFERROR. Also, the initsharedobject function initiates the connection of each user to the Shared Object of all the lines that have been drawn and synchronizes the screens of the two users. 5

6 Fig 6. Adobe Flash Actionscript code snippet comparing the distance between user coordinates and subgoals and repainting the screen for each user using Flash Shared Objects The design of the interface and the interaction was minimalist so as to allow viewers to focus on the actual graphical conversation. The results of testing revealed that users were having difficulty accurately drawing the cube independently. As a result, I included a wire-frame guide of the cube on the screen to help users achieve the goal of drawing a cube (see Fig 7 below). The preset coordinates of the algorithm mapped to the edges of the cube. Significant leeway was provided to allow for sufficient user error in drawing the lines of the cube. 6

7 Fig 7. Screenshot of final demonstration two users independently drawing lines to form cube. Algorithm displays cooperation. Conclusion The models and successive successful demonstration illustrate the benefits of applying conversation theory to collaborative graphic design. The shortcomings of the project included (1) the simplification of the final models to two users drawing a cube, (2) the pre-set subgoals, (3) the limited algorithm of the implementation based on coordinates, and (4) the loose definition of the levels of agreement (collaboration, cooperation, etc). Further work on the project could focus on building on these foundational concepts to increase the complexity of the models and the demonstration. In more complex forms, the models and the demonstrations could be applied to real-world design processes with great effect. It would be powerful to be working on collaborative design project and have a representation of the model of agreement of my goals for the project with the models of agreement of the other graphic artist. I can envision a future state of the art graphic design application such as a future version of Adobe Photoshop where the program uses algorithmic elements of conversation theory similar to my work on this project. The application could help guide the designers and assist by building awareness about the activity. 7

8 Acknowledgements I would like to thank the Professors Hugh Dubberly and Paul Pangaro for their continuous feedback and encouragement throughout the class. I am also grateful to my classmates for their feedback and encouragement through project review sessions and for their inspiration from their creative and ambitious projects. 8