UNIVERSITY OF LIMERICK Limerick

ORNAMENTAL PATTERN
An Interactive Design Process
A dissertation submitted in partial satisfaction for the requirements for the degree of Master of Arts in Interactive Media

By

Celeste Bergin 0404128

Supervisor: Dr. Annette Aboulafia

Submitted to the University of Limerick, September 2005

ABSTRACT

Author: Celeste Bergin Title: Ornamental Pattern: An Interactive Design Process

The thesis and project for Ornamental Pattern: An Interactive Design Process, was researched and created to further extend an exiting learning unit on pattern design. It integrates computer technology as an instructional tool in a Fine Arts classroom setting at the secondary level. The thesis examines Gestalt theory in relation to perception and cognitive learning. It also looks at learner-centred design issues when developing educational software for children. The project focuses on the visual element of creating a pattern and considers the above issues presented in the thesis. The prototype was developed using FlashMX 04 because of its programming capabilities and wide-use in the technology design industry. The interface was designed to be as simple as possible to reduce learning time of required functions. Graphic design layout principles were applied to create a fun look that would appeal to learners. Selection of interactions is based on the availability of technology in an educational setting and learners familiarity with common interface procedures found in programs such as using a mouse or accessing help. A variety of methods to collect data has been insightful. User testing was favourable and participants enjoyed the program. The intent is to further develop the project once the course is completed and integrate additions such as sound and motion.

ii

ORNAMENTAL PATTERN
An Interactive Design Process

1. INTRODUCTION

"Not only can the arts be a powerful solution for helping educators reach a wide range of learners, they also enhance the process of learning by developing a student's integrated sensory, attentional, cognitive, emotional, and motor capacities. Such brain systems are the driving forces behind all other learning. ERIC JENSEN1

Through the arts children are able to develop expressive skills and to perceive the world around them. Art experiences are highly motivating and help children to develop social skills. The art curriculum provides learning opportunities for students with differing learning styles and abilities. Students are asked daily to engage in learning activities which require use of higher-order thinking skills like analysis, synthesis and evaluation. In the visual arts a unit on creating ornamental patterns is not only a means to enable students to learn design techniques but has implications in applying pattern recognition skills in other curricula disciplines. It is a basic skill for problem solving and is used across the curriculum in areas such as math (algebraic formulas), science (classification), foreign language (syntax), and in reading (sentence and story construction). Through pattern recognition students are able to see relationships, find connections, organize information, and make generalizations and predictions. It is an activity of the mind.

Quote found at http://www.artlex.com/. Eric Jensen is an art advocate for the arts in education and has written numerous articles and books.

1.1 Gestalt Theory

Gestalt principles of visual perception assume that a stimulus is perceived as a whole pattern and is the function of the observer. Individual parts have no meaning independent of the whole but combine to reveal an identifiable pattern. It is a way that the human perceptual system groups sense data to organize information as simply as possible and reduces the amount of energy exerted in thinking. Gestalt views on the grouping of perceptual information and the ability to link them to past experiences to gain new insights may have implications in learning situations that involve creative thinking skills.
1.2 Gestalt Laws of Perception

Individuals most likely do not see fractional elements in disorder. Instead, they notice larger areas with defined shapes and patterns. What is observed is something that is more structured and cohesive than a group of separate elements. The basic law of Gestalt theory, the Law of Pragnanz, implies that if a perceptual field is disorganized when an individual first experiences it, then that person will impose order on the field in a predictable way (Clark 1999). This represents how an individual perceives their physical environment. Related to the Law of Pragnanz is the idea of grouping (Boree 2000; Lahar 2003a, p.47). The main laws that determine grouping are shown in Figure 1-1.

GESTALT LAWS OF GROUPING Law of Proximity:

Elements that are closer together will be perceived as a coherent object.

Law of Symmetry:
Elements are organized into figures according to balance, regularity, and smoothness.

Law of Similarity:
Elements that look similar will be perceived as part of the same form.

Law of Continuation:
Elements arranged in either a straight line or a smooth curve, tend to be seen as a unit.

Law of Closure:
Elements are grouped together to enclose a space by completing a contour and ignoring gaps in the figure.

Law of FigureGround:
Elements are distinguished from its surroundings but attention may fluctuate between aspects.

Figure 1.1 Gestalt Laws of Grouping suggest ways in which humans organize information 2 from what they perceive in the environment.

These Laws of Grouping shown in Figure 1.1 work together so that the final perception is a combination a whole. In other words, the whole (cat) carries a different and altogether larger meaning than its individual parts (hair, whiskers, tail, claws). It is a cognitive process that takes place when an individual encounters a stimulus and tries to make sense of it.

Gestalt examples were drawn by Celeste Bergin.

1.3 Gestalt and Perceptual Experience An earlier theory of perceptual organization, Behaviourism, assumed that simple sensations facilitated the learning of associations through reinforcement or punishment of responses. Although Gestaltists agreed that simple sensations contributed to the understanding of perceptions, they argued that perceptions themselves were basic to experience. The acquisition of new knowledge depends on the ability to build on past experiences and knowledge and help us make sense of input into our sensory systems. Gestaltists believe an individuals thinking and problem-solving skills are not only influenced by the Laws of Grouping but that an individuals perceptual experiences restructure a problem in order to solve it or make sense of it. When a learner is presented with new material such as in a secondary science textbook it seems relatively formless and unstructured. The learner begins by seizing upon what appears to be important features or figures. Insight gradually becomes more and more structured until finally the learner reaches a new understanding or a solution to the problem. In this previous example of encountering a new textbook the learner looked for patterns by identifying textual or graphical cues to what is important information and reorganized that information for understanding. How would the learner know what cues to look for to make sense of this new information? It is assumed by me that previous experience through learning strategy instruction3 and practice formed a trace4 that facilitated the process. He or she then reformulated the previous experiences into new patterns of learning content.

Learning Strategies are methods that students use to learn. Examples are mnemonics, rhyming, scanning and skimming, or test taking strategies. http://tip.psychology.org/strategy.html 4 The occurrence of trace systems is a belief held by Gestaltists. Trace systems connect new information to information already stored in memory. People may forget information if the trace disappears or the trace cannot effect or communicate new meaning. (Clark 1999)

1.4 Gestalt and Learning Implications

There are many cognitive and learning theories that have application to teaching the arts across the curriculum. An instructional unit on ornamental pattern integrates the aspects of Gestalts Laws of Grouping and draws on past experiences. It is a visual means to demonstrate pattern recognition that can be applied to other environmental situations. It is similar in the way math manipulatives5 are used to help students understand abstract mathematical concepts. I ask students to first identify patterns in the local environment of the classroom (movement, sound, clothing, book covers, etc.) and then visual manifestations of pattern in other settings (buildings, home furnishings, landscape, natural occurrences, etc.). Once they begin to understand what is meant by a pattern that involves repetition they are asked to compare this recognition to events in their lives whether in school or out (their routines, reoccurring problems, strategies for learning new information, etc.). This questioning activity sets the hook or the trace to other experiences that prepares them for the goals and objectives of the unit. The Gestalt Laws of Grouping are evident in virtually all pattern design. The following examples in Figure 1-3 on page 15, demonstrate the correlation between the laws and a few of the principles of ornamental design. These laws of grouping are not independent from one another and work together to create a whole pattern as evidenced in the illustrations in Figure 1-3. For example, the motif (The Law of Symmetry) incorporates the Law of Closure as the pentagons are broken up by the circles and the triangles and these in turn are broken up by the circles. One is able to recognize these broken shapes from prior developmental learning experiences that may include but are not limited to playing board games, colouring books, puzzles, and various educational activities.

Math manipulatives are concrete objects that help children learn math concepts.

GESTALT LAWS OF GROUPING COMPARED TO ORNAMENTAL PRINCIPLES GESTALT LAW

AND ORNAMENTAL PRINCIPLE

GESTALT EXAMPLES
AND

ORNAMENTAL PRINCIPLE Law of Symmetry Motif

EXAMPLES

Law of Proximity Gaps

Law of Similarity Negative/Positive Shapes

Law of Continuation Direction

Law of Closure Overlapping

Law of FigureGround Mirroring

Figure 1-3 Gestalt laws work interdependently of one another to create richness in 6 ornamental pattern design.

Ornamental patterns created by Celeste Bergin.

A structured learning situation where the attention of students is focused can provide practice in pattern recognition. This situation integrates Gestalt perspectives that make it meaningful and more information is gained. In a secondary art class students are given a design task to arrange elements aesthetically that make sense and is meaningful to them. Learners are encouraged to discover the principals of the design problem through active participation and asking themselves questions. Hypothetically these questions would most likely be according to Benjamin Blooms Taxonomy of Thinking Skills7. What are the terms and principles of ornamental design that I need to know? (Knowledge) What are the steps that I need to do to complete the task? ( Application) What might be the result if I tried arranging elements in this order? (Comprehension) How do the elements relate to one another in my design? (Analysis) How can I combine new elements or rearrange the existing elements? (Synthesis) Does my finished pattern design meet the lesson objectives and is it aesthetically pleasing? (Evaluation) While going through the process students will make decisions on what elements to include and how they should be manipulated to structure order. They will look to see what is missing and decide on an option to solve the incongruence. Students are learning to see relationships between things to create a whole. It is a cognitive process involving creative thinking to solve a design problem. To help students make generalizations to other curriculum areas, it is important to finish the unit by discussion and through examples to identify those situations where pattern recognition may be utilized. It does not need to be visual in the sense of an artistic design but can be more abstract in ways information is organized for learning new material. This can help students become cognizant of pattern organization to structure information that has meaning for them and encourages them to be active and reflective learners.

The categorisation of cognitive questioning is based on Blooms Taxonomy of Thinking Skills see Appendix A p. 37.

In summary, the Gestaltists believe that human beings use the laws of grouping and their prior experiences to try to make sense of and give order to perceptual information. This information then leaves a trace in memory that links together previous experiences to form new connections in processing data. Learning is a continuous process of organizing and rearranging information according to the needs, purposes, and meanings of an experience. It is most effective when students learn generalizations and principles that can be applied to new situations. The Gestalt theory is one that is not so much concerned with what students learn but how they learn.

2. PROJECT CONCEPT Ornamental Pattern was first conceived8 as an extension of a unit on pattern design to provide students a creative experience using a computer as an art tool and to provide some instruction on the methods to students who missed the unit. Since the first conception the idea has developed to make it a stand-alone or online instructional tool on pattern design that would include vocabulary, the principles of ornamental design, examples, the practice of prerequisite skills, evaluation, and additional components of sound and movement. For this project the focus will be on the visual design of patterns due to time restraints and the magnitude of the programming and design process. In order for students to complete this module they may need an understanding of the concepts and terms that constitute creating an ornamental pattern through prior instructional activity.
2.1 Previous Experience Teaching Ornamental Pattern

Since first teaching in the visual arts9, ornamental design has been a component in the curriculum, especially in the crafts class. This teaching unit has been constantly in a state of improvement and development. Instruction in creating ornamental pattern began with simple graph paper given to students and demonstrations using a chalk board. Demonstrations progressed to the use of butcher paper, a white board, overhead projector, and eventually as a PowerPoint presentation on a CD. All of these progressive developments coincided with an increase in lesson activities and expectations from students. Once practicing the basic principles of creating ornamental patterns students applied these methods using a variety of media (e.g. stamp making, sponge printing, stencilling, leather stamping, and weaving) to produce products such as bags, folders, boxes, wallets, or textile embellishment. Lessons were also extended to digital applications such as Photoshop, InDesign, and Illustrator. Basic components of the instructional unit include:

Project idea conceived by Celeste Bergin through experience teaching pattern to secondary art students. 9 A teaching unit plan for Ornamental Pattern was written and continually developed by Celeste Bergin for secondary level art students and can be found in Appendix B p. 39.

Induction Activities (movement/sound activities that demonstrate pattern, questioning to verbalize their observations and thoughts about repeating patterns in their environment) Historical Perspectives Vocabulary Basic Practice (using X as the motif and a grid, students practice the principals by manipulating gaps, size, value, density, overlapping, direction, reflection, radial, and colour) Magazine Examples (written evaluation for each principle in the categories of home furnishing, clothing, architecture, jewellery, graphic design, and natural occurrences in nature) Individual/group practice using geometric shapes Final Project (frequently connects to the creation and communication of symbols which are used as motifs to create a product) Evaluation (rubric scoring of work, follow-up questioning to make connections to other curricula as well as observations since learning about pattern, and a required written/hands-on exam at the end of the semester) Ornamental pattern is a non-threatening artistic form for students who feel that they cannot draw when faced with design problems. My observations of student design expertise over the course of the school year exhibited an increasing quality of work. The students who did not receive this instruction, perhaps because they came into class after the unit lesson plans were concluded, produced work that was not as aesthetically pleasing as their designs were poor. For these students or those who were absent a lot and students who are homebound for medical reasons, it would be beneficial for them to have a self-directed activity that would require little input from the teacher and would be enjoyable for all students regardless of attendance. From these experiences in teaching ornamental pattern and the need to involve secondary level students in the learning process that is also enjoyable, this unit is being further developed to integrate technology has extended learning tool.

10

2.2 Intended Users

Ornamental Pattern: An Interaction Design Process is being designed for secondary level students (grades 9 to 12) enrolled in a fine arts course in basic art, crafts, graphics, or other related subject offerings in the Washoe County School District, Nevada. Students are from ages 14 to 18. Classes are a mix of ages, gender, learning styles, mental and physical abilities, skills, behaviour, cultures, languages, and intent. Students enrol in art classes for a variety of reasons that include fulfilling a humanities credit requirement, need an elective, no other class available, teacher conflict in another class, or a love of art. Class size is generally at 34 but can be as few as 18 in the advanced classes such as graphics. Few students come with some art background but many do not as it is not taught at the elementary level and at few middle schools (7th and 8th grades). As a result these students drawing development is generally at about 9-10 years of age10. With such a disparate set of variances it is a challenge to keep them on task, interested, and provide individual instruction as needed (see Figure 2-1).

Figure 2.1 How is a teacher going to manage the classroom with so many different types of learners and get them to learn the objectives? Keep their little hands busy by providing active and constructive learning time.

This is the realism stage. By the age of nine or ten, many children want to make their pictures look "right" in terms of detail and proportion but efforts often fall short. http://www.arts.ufl.edu/art/rt_room/teach/young_in_art/sequence/realism.html

10

11

2.3 Brainstorming

Cognitive mapping11 was a technique I used to brainstorm ideas for the design of Ornamental Pattern. Ideas were developed through clustering, creating lists, and sketches12. Objectives of the original lesson plan were kept in mind to integrate the necessary skills and knowledge learners would need to have success. The focus of this project is the visual component but other considerations were modules to make the design extend to other forms of pattern recognition through sound and motion. To create Ornamental Pattern it was important to look at learner-centred design to develop the interface layout and interactions.

11

Cognitive mapping is a graphic teaching tool used to elicit my ideas, recall information, and discover connections. This technique was acquired through professional development classes provided to teachers in the Washoe Co. School District in Nevada. 12 See Appendix C p. 47 for examples of brainstorming activities.

12

3. PROJECT DESIGN Computers offer unique possibilities for providing individualized or group interactions with curriculum content. From my experience learners are active participants in the learning process and bring with them previous experiences, ask questions, organize information, and assess their work when confronted with cognitive tasks. A challenge for designers is they must contend with a wide variety of purposes for learning. Well-designed software can help learners acquire factual knowledge, develop understanding, improve performance and skills, acquire strategies and techniques, problem-solve, improve self-esteem, have fun, inspire, and motivate them into action but the main point is for them to learn (Quintana 2000, p. 260) (Wallace 1999). Understanding learner-centred design methods informs and facilitates the design process of Ornamental Pattern.
3.1 Learner-centred design

Typically user-centred design (Quintana 2000, p. 258) has focused on the goals of users to perform routine tasks easily and efficiently using a computer as a tool to complete their work. It is assumed that a user already possesses a level of knowledge that is internalized and well understands the procedures involved in the completion of these tasks, for example moving a block of text in a document (Norman 1985, quoted in Quintana 2000, p.257). The users goal is of primary importance, and the problem for designers is to bridge the gaps which exist between the users intentions and the systems allowable actions, the gulf of execution. Another problem for designers is the gulf of evaluation which reflects the amount of effort the user exerts to evaluate the systems response and if expectations were met. These gulfs are the significant control points for designers (Norman 2001, p197). User-centred design strategies observations, task analysis, iterations, user involvement and feedback, etc., aim to help designers understand user goals. These methods are the framework for achieving the end result of facilitating a users ability to complete a task(s) or create a product. Learner-centred design (Quintana 2000) is similar to user-centred design but there are differences between the two types (see Figure 3-1). There are issues of gender, ethnicity, culture, cognitive and physical abilities, curriculum objectives, and 13

environmental settings to consider. Learners have different reasons to use software, different skills, and different motivations than typical users. Ease of use of tools may be subservient to larger goals of learning subject matter and the monitoring of students performance while maintaining a focus on issues of motivation. Learners have some gaps to bridge before they can even begin to act like users. Designers presuppose that a typical user in UCD possesses the background knowledge, learning strategies, and self-evaluation skills in their area of expertise which learners may not have acquired to the full extent. This is the Gulf of Knowledge (Quintana 2000, p.258). For learners, motivation to work toward an established goal can not be assumed. This represents a Gulf of Intention (Quintana 2000, p.258). The focus of learner-centred design must be to facilitate a process through which the learner can confront and understand appropriate ideas, content, and procedures at varying stages of progress. The methods of learner-centred design13 build on and expand user-centred design and empower all participants to significantly influence the design of educational technology.

DIFFERENCES BETWEEN USERS AND LEARNERS

Typical User Cognitive Environment Gulfs Motivation Purpose
Knowledgeable of profession and tools to complete tasks Homogenous in that tasks are often similar from user to user Gulf of Execution between user and action of tools Gulf of Evaluation amount of effort to interpret physical state of tools Intrinsic involvement in profession Productivity supported by tools to complete tasks

Typical Learner
Developing knowledge in a variety of learning situations Heterogeneous in terms of tasks being influenced by diverse learning styles and development Gulf of Knowledge lack in domain of study to be successful Gulf of Intention lack in consistent accomplishment of goals Lack of interest and will typically only do what is required by teacher To achieve educational goals to develop understanding

Figure 3-1 These are key differences between users and learners and are important factors to consider through the design process when creating educational software14.

See Appendix D p. 49 for Learner-Centred Design Guidelines. Table designed by Celeste Bergin to demonstrate differences between users and learners of software and is based on information from Quintana 2000; Wallace 1999; and Lewis 1998.
14

13

14

3.2 Interface Design

The interface design for the visual component, Figure 3-2, is created based on several concepts including Gestalts laws of grouping15, page layout design, a users/learners familiarity with software features, sequence of expected actions, and easily understood vocabulary that is relevant to the task.

Figure 3-2 Paper prototype of the interface design for the visual component of Ornamental Pattern. This was rendered in Photoshop 816.

15

Gestalt Laws of Grouping are applicable to instructional design by creating strong groups and differences. Methods might be the simple use of borders around chunked information (proximity) or using arrowheads from labels to a specific element in a graphic (continuity). 16 Pattern interface designed by Celeste Bergin.

15

Placements of the elements on the left, as shown in Figure 3-2, are organized according to sequential steps the learner needs to perform to create the pattern. The DIRECTIONS button was purposely placed in the top left corner because the eye will first go to the upper left on the screen and it is an important element. Shapes are grouped together as are the transform tools and both are enclosed within boxes to help the learner locate the tools (Law of Proximity). Although, they each contain a different icon, the transform buttons are further organized based on the Law of Similarity. Maintenance buttons placed below the grid are arranged horizontally and grouped according to actions a learner may need to correct errors or to try out and see different design ideas (i.e. UNDO, REDO, and HIDE GRID). CLEAR was purposely placed away from the UNDO button to make it apparent that they are two different functions and to help deter a mis-click between the two. Since the SAVE button is the final step it is placed in the lower right corner because the eye will travel to that area last and it is a familiar position when completing electronic forms (i.e. learner tests or online activities). The HELP button was placed on the top right because most users and learners of software are familiar with that position when looking for the help menu. The grid area where the pattern will be created needs to be large for obvious reasons. A viewers eye level will naturally fall above the horizontal centre of the screen so the plane17 of the grid is placed a bit above it. White space in the interface layout is used as a means to organize the various parts of information and to reduce mis-clicking of buttons (i.e. distance between CLEAR and SAVE to help circumvent erasing an entire work before saving). White space was also used to put a little bit of space between DIRECTIONS and CHOOSE GRID to emphasize the DIRECTIONS button because directions are very important for some learners (and teachers!). The alignments of inner spaces between elements provide boundaries and define the active space. They provide a sense of spatial stability that is consistent and facilitates organization and clarity.

17

A plane is the flat 2-dimensional surface on which artists make their marks.

16

Colour was utilized to assist learners in locating elements to create a pattern and to delineate between different functions. Black was used for the plane colour as it makes a nice contrast with the shapes and the rest of the elements on the screen. It also connects eye movement toward the black transform buttons for easy access as these will probably be used extensively. Black was also chosen because students simply love black! The grid opacity was reduced to lessen distraction and so that it does not become a part of the pattern. The hot pink was chosen for the DIRECTIONS button for its intensity and it contrasts with the value18 of the violet CHOOSE GRID to further emphasize its importance. The shapes that will be dragged onto the plane are primary colours19 and their intensity seems to portray playfulness (although once on the plane students will have the option of changing their colour or value). The colours of the MAINTENANCE buttons alternate between cool and warm colours20 to assist in the distinction between their functions. Red was chosen for SAVE because it is the last step and it infers closure which learners need to feel a sense of accomplishment (Stop! I am done!). Typographical decisions were based on the qualities of the font style21, readability22, and typographical syntax23. The Comic Sans font was chosen because of its association with comics text styles, and it is felt that it has a youth orientation.

18 19

Value is the lightness or darkness of a colour. Primary colours are red, blue, and yellow and cannot be made by mixing pigments. 20 Cool colours are reds, yellows, and oranges. They imply warmth from the sun. Cool colours are blues, greens, and violet. They imply coolness from water. 21 A font is one size of one style of type. 22 Readability is how to make words look attractive and inviting to the reader. Design and typography are used to make the reader want to read the text by using initial caps, type styles, alignment, headlines, space intervals and tints. These elements create contrasts which create interest. 23 Typographic Syntax is the connecting of typographical signs to form words and sentences on the page. It is the process of arranging elements into a cohesive whole. The elements of typographical design include: letter, word, line, column/margin and grid.

17

Although a slight difference, the DIRECTIONS button uses the Arial font to further designate its importance. It has characteristics similar to the Roman alphabet which commands authority. Both fonts are clean straight-forward forms that do not have serifs24 so there is less counter space25 to trap white space. This feature combined with all the buttons and subheadings in upper-case letters contribute to readability. To create interest, the heading Create Your Pattern! was done using both upper and lower-case letters. The simplicity of these two fonts lends itself to less obstruction when the eye moves over the screen in the visual hierarchy26 of the text. Size of the text indicates dominant and subordinate positions of importance. For example, Create Your Pattern! tells the learner what they will be doing, DIRECTIONS infer that there is important information, and subheadings are similar in size to denote equality in the hierarchy (DRAG SHAPES and TRANSFORM). Text for the transform buttons is scaled down in point size27 and has similar weight to organize their properties and contrasts the subheading for easy location by the learner. Language and symbols make use of familiarity with software terms and icons as well as reinforce the principles of ornamental pattern. Terminology includes typical terms a learner may encounter in other applications (i.e. SAVE, HELP, and UNDO), specific actions required (i.e. DRAG SHAPES, and TRANSFORM), and terms associated with the objectives of the lesson (i.e. SIZE, and VALUE). The icons in the transform box are recognizable pictorial elements that indicate their functions (i.e. + and - to increase or decrease size, a sun shape that infers brightness versus a moon shape that infers darkness for value).

24 25

Serifs are the end treatment of letters and derive from marks made when chiselling stone. Counter-space is the negative or empty space around and inside letters. 26 The visual hierarchy is a visual arrangement of elements from the most prominent to the least prominent in the area of typographical space. 27 Point size refers to the height measurement of type.

18

By asymmetrically28 balancing elements of the interface into a cohesive whole, subtle connections are apparent and distinct. Learners need to understand the functions of the buttons and the interactions are designed as simply as possible to lessen processing time to locate or determine their purpose.
3.3 Interaction Design

The interface design requires from learners interactions on two levels: the physical manipulation of objects and cognitive processing to solve a creative problem. An additional interaction component to be considered is the teacher who provides feedback, assistance, and evaluation. Typically in an educational setting available computer technology are a PC, mouse, keyboard, speakers, and printer. The primary method of controlling the objects on the screen for Ornamental Pattern is with a series of mouse clicks whose functions learners generally understand (i.e. right clicking brings up additional menu options)29. They are also required to dragand-drop the shapes to the plane while holding down the left mouse button and releasing it onto a selected position. These shapes can then be re-selected and manipulated through a series of actions requiring a mouse click. A method to indicate focus when an object is selected indicates to the learner its location on the screen (for example, a contrasting color outline, or colour change). Additionally, learners are able to interact with the interface by being able to access information to clarify expectations and to understand concepts30.

Asymmetry (informal balance) establishes equilibrium by placing a few large, heavy weights on one side of a centre line and more equalizing, smaller, lighter weights on the opposite side. Can cause discomfort but can create exciting visual responses. The effect can cause action, motion, or tension. 29 Interaction operations of the interface can be found in Appendix E p. 53. 30 Examples of the Directions and Help menus can be found in Appendix F pp. 56-58.

28

19

At this point of development in the design of Ornamental Pattern, the cognitive interactions of learners required to relate knowledge visually with the objects on the screen is through creative thinking skills. They are creating something new and original that involves decision-making, modification, flexibility, discovering relationships, and critiquing. Easy identification and functionality of the tools reduces the time to learn the interface so that learners can focus on the pattern design. The WYSIWYG
31

nature of the program and the functions of buttons

allow the learner to try out different design ideas. By seeing and interpreting what they are doing, learners are able to become aware of their own cognitive activity which is called metacognition. One other aspect of interaction that is worth mentioning is the teachers role. The teacher is the one who will select instructional methods for learning content. The simplicity of an interface is important as teachers will have different levels of expertise using computers as will students. In a heterogeneous classroom situation there will be a variety of differences between learners and the ways in which they learn. The teacher will need to not only interact with learners to keep them on task, provide help, and critique work; they will also need to interact with the interface so as to not reduce learning time. The physical and cognitive interactions were important considerations when designing questionnaires and requesting testing from secondary art teachers (Washoe County School District) as they would be potential users of Ornamental Pattern: An Interactive Process in a classroom situation.

31

What you see is what you get.

20

3.4 Flash MX Action Script Process

FlashMx 04 is the software that is being used to create the Ornamental Pattern program. Previous experience using Flash was limited to timeline animations and implementing a few behaviours such as stop and play. It was anticipated that learning its programming language, ActionScript, would not be difficult but found that there was a steep learning curve. Learning ActionScript was like learning a new language. Nonetheless, through extensive research in the programs help menu, reference books, online forums, the trial-and-error method, and a little bit of help; strides were made in accomplishing runtime performance. To facilitate learning the script, specific interactive elements were identified and matched with scripting methods that would facilitate their functions. Each element was then learned individually before combining them into the final prototype for this thesis32. Some examples of ActionScript learned to create interactions were buttons, movie clip buttons, pop-up menus, duplicate movie clips, and drag-and-drop. Additional ActionScript commands that need to be learned at this time are those for save, undo, and clear. It is anticipated that many more will need to be learned before the complete program is fully designed.

32

To see sample ActionScript written for the program go to Appendix G p. 60.

21

4. DATA COLLECTION Methods of data collection to generate a list of requirements and to describe the functionality of the visual component of Ornamental Pattern include: natural observation, learner scenarios, paper prototypes, a cognitive walkthrough, and a questionnaire. These approaches began the process of determining validity of the project independent of a design team whose members have diverse expertise.
4.1 Natural Observation

Natural observation in an educational setting is based on my personal experience working with learners in a classroom, curriculum planning of course content, and knowledge of instructional methods33. Most schools in the Washoe County School have access to computers whether it is just one or two in a classroom, a computer lab specific to the instructional goals (i.e. computer graphics or business labs), or a lab where many different study areas have access through scheduling procedures (i.e. math, science, or English). Although computer literacy is a required class and computer games are popular, it cannot be assumed that all learners will have the same level of expertise when using them. Students will frequently be unfamiliar with methods to save work to file directories or how to choose a printer. Most students coming into my art classes will have no experience or very little with graphic programs except Microsoft Paintbrush. When students are shown techniques on a computer to manipulate or create images they demonstrate a high level of interest. In a regular art class (i.e. basic art) they will hurry through a project using traditional artists materials (i.e. pencil to draw a portrait) so that can get on the computer. It has been noted that most students do not want to take the time to learn about a program via reading directions, searching help, or doing pre- work (i.e. creating a rebus with magazine cut-outs, or drawing design ideas with a pencil) especially in the computer graphics class. They just want to jump in and start using the graphic software learning by exploration and discovery. This is commendable but they need to learn their tasks well to have
33

Examples of instructional methods are active participation, cooperative learning, lecture, direct instruction, or discovery.

22

success. With this in mind pre-work is designed to be completed in a short amount of time as well as when lecturing to give information. Students are then let go to do their assigned projects. Even though attempts are made to impart the prerequisite skills and the fact they like to jump in students still will need to be monitored and assisted when needed. A teacher is not always able to help all students within a given set of time (55 minutes to 1 hour and 50 minutes depending on a schools philosophy of scheduling). As a result, sometimes a unique situation arises where students help one another as well as show the teacher new tricks! This happenstance has brought social interactions between different types of learners who would normally not talk to one another and they do so with patience, thoughtfulness, and acceptance34. Understanding the classroom environment, how students learn, instructional methods, factors that motivate, and social interactions are important aspects while designing Ornamental Pattern.

An example of this occurrence took place in one of my graphics communication classes of eight students (at North Valleys High School in Reno, Nevada, USA 2003-04) who were very different from one another. The type of kids in the class might be labelled or thought of as a troublemaker, nerd, jock, not too bright, loner, or always sick. In this graphic class students used programs such as Photoshop 6 and Flash. As the year progressed it became more evident that they were helping each other with their projects. They did this with a lot of patience because a few had difficulty getting it. There was never any anger and there was always a lot laughing going on. It was one of the most enjoyable times spent with teenagers.

34

23

4.2 Learner Scenarios

Scenarios35 were used as a method to demonstrate the different types of learners and learning situations found in a classroom setting to anticipate possible responses and engagement from students. In scenario one the program was used as a means of enrichment for a student who has artistic ability but little computer experience. In scenario two it was used to give a homebound student practice and a method to produce work for a grade. This student has some expertise using a computer and it wasnt necessary to instruct her on using the program. Scenario three demonstrates its use to motivate a child who misbehaves and presents an opportunity for positive social interaction.
4.3 Paper Prototype

Paper prototypes36 were designed with hand drawings, Flash, and Photoshop. It was a method to clarify the tools that may be needed, functions, and sequence organization to meet behavioural objectives and facilitate a small learning curve when using the interface. They were also used to problem-solve the layout design. The original concept shown in earlier prototypes was to allow the input of an image via a webcam for the motif. This idea was discarded because of time constraints learning ActionScript. Geometric shapes were used to demonstrate the programs capability to create patterns through learners manipulations.

35 36

See scenarios in Appendix H pp. 63-64. See developing prototypes in Appendix H p. 65.

24

4.4 Cognitive Walkthrough

A cognitive walkthrough was performed by me several times to determine sequencing, missing elements, and possible learner errors. This process was based on my experience working with adolescents and it was kept in mind how a student might learn through exploration, level of understanding of content concepts, previous computer experiences, and ease of use. Questions asked through the process were: Will learners know what to do? How will learners do it? Will learners understand the meaning of the tool functions? How will learners access information that is simple and easy to understand? What procedures are missing or unclear that a learner may need to access? How will a learner correct errors or try out design ideas? What order of information or task(s) might make sense to a learner? As a result, redesigns of the interface included the addition of a Help menu, changing the button Done to Save, the additions of Undo, Clear and Print, and deleting options such as reflection, repetition of bands and automatically generating spaces between motifs. I felt these changes made it easier for learners to use the program as well as require them to apply the principles of pattern themselves to be active participants in the learning process.
4.5 Paper Prototype Questionnaire

A questionnaire37 with the paper prototype shown in Figure 3-2 was distributed through email to eight art instructors at the secondary level in Washoe County to assess understanding of the interface and inferences in regards to the actions required to perform the tasks. These teachers have different levels of computer knowledge and use them for administrative purposes (i.e. correspondence, grades, attendance, webpage). Three of the teachers have used instructional software for learning
37

An example of the questionnaire can be found in Appendix I p. 67.

25

activities. It is felt that their input would be valuable because of teaching experience with learners, decision-makers when selecting software, possess an artistic perspective, and their various levels of technology skills. Questions asked were directed towards using the program without giving directions on how to use it. Feedback on clarity, grouping, functions, concerns, and suggestions was hoped to be elicited to further develop the interface design but at this date there has been one response from an art teacher38. In general results from this response were favorable in terms of clarity of actions needed to perform the creation of patterns but the teacher would not be able to use it with students as there are no student computers available in the classroom.
4.6 Usability Testing Results

At this point in the interface design for Ornamental Pattern initial usability testing with learners has been completed to determine its functionality, content effectiveness, ease of use, and if enjoyable. The program prototype and a questionnaire were emailed to twelve art teachers in the Washoe County School District, Nevada and one of my former students. I received two responses from teachers plus one from the student. In Limerick, Ireland there were three observable learners (two age 9 and one age twelve). The intent was not to instruct the learners or teachers on how the program works to test how long it took to learn the program and ease of use. Although the younger ones (age 9) needed some instruction on what the buttons could do. They were not given prior instruction on the principles of ornamental pattern and were not asked to connect prior experience. All but one out of the 6 learners found the program to be easy and all learned it in less than ten minutes. Once the learners figured out how the program worked it took 10 to 20 minutes to create a pattern. Four of the learners found the buttons easy to understand and the other two felt that only some were easy. All the learners liked the colours of the interface. Learners indicated that the hardest tasks were selecting objects and the repetition of steps. One learner said nothing was difficult. The easiest task reported by all learners was putting shapes on the grid and moving them around via drag-and-drop with the mouse. One learner suggested adding key functions and
38

See Appendix I pp. 68-73 for questionnaire responses.

26

another suggested a grouping technique of shapes. When learners tested the program they were unable to change the colours of the objects and four of them found this to be a frustration. Observations made by myself of learners in Limerick were that the younger learners did not use the transform buttons even when shown how they work. It was also observed that the older learner first took a few minutes to study the interface and used those functions with no instructions. None of the learners used the Directions menu. All but one of the six learners liked the program.
4.7 Future Usability Testing

Further methods of evaluation in an educational setting such as additional observation, measurable outcomes of performance, and learner input are important to the programs future development. Direct observations of learners using the program would assist in determining actions learners may use at any given point and give insight into unexpected outcomes. Using the think-a-loud technique in pairs would put learners more at ease and if paired appropriately would elicit a more natural communication between students helping one another. Video recording of these interactions would be suitable for evaluation to elicit specific information at a later time. Some questions that would provide focus for the observations are:

Is the interface easy to navigate? Are buttons clear in their function? How do learners sequence steps? How many times are directions or help accessed? Do learners exhibit difficulty or strain when using the mouse?

These observations would generate a task analysis list of actual nuances of use by learners and sequencing of events. Additionally it would identify potential problems or unexpected outcomes. Usability goals to measure outcomes for further testing include:

27

Learning time How long will it take for a learner to learn the interface (ease of learning measures)? This would require testing with learners with no experience to set a measurable goal by establishing a median expected time (Smith 2001 p. 16). Speed of performance How long will it take for learners to execute specific actions (ease of use measures)? This measure will require learners with expertise and may have to train them to establish a norm for performing actions (Smith 2001, p 16). Rate of learners errors how many errors will learners make at specific actions? What counts as an error? (Smith 2001, p. 17)

Interview learners for subjective satisfaction to gauge how well they like the software. The flexibility of a semi-structured format with specific questions and prompting would work well with learners to help them clearly communicate their thoughts. Prompting would help learners recall forgotten names of functions or elicit more relevant information. Examples of questions are:

Do you like the program? What dont you like about the program? What do you think of the colours used for the interface design? What improvements would you like to see? Do you like using the mouse?

Examples of open-ended questions or statements may include:

Tell me more Why? Explain Compare that to How would you

The interaction design of Ornamental Pattern is an iterative process and goals, data methods, and testing can be adapted or altered to address unexpected issues and make changes to the interface.

28

5. CONCLUSION

During usability testing and Dawn 05 exhibit39 many of the comments received in regards to Ornamental Pattern: An Interactive Process were nice idea, bright, and interesting. One learner (teacher #3) said the program was intuitive and directions were not needed. Suggestions were to integrate scanning and drawing capabilities to create motifs. All observed learners and exhibit participants were engaged in the process. It was observed by me that the patterns created were various in designs. Learners through repetition grouped similar shapes (i.e. triangles in one row, squares in the row above and so on), alternated shapes (i.e. triangle, circle, triangle, circle), and used the concept of gaps (no space or equal space). One learner created a spoke radial design starting from the centre of the grid. A guest at the exhibit experimented extensively with overlapping shapes and the effect of transparency on colours when shapes were left selected. I noted that these patterns were similar to the Gestalt Laws of Grouping except for the Law of Figure/Ground. Figure 5-1 is an example pattern created with the program. ORNAMENTAL PATTERN PROGRAM PATTERN

Figure 5-1 This pattern was created and printed using the pattern 40 program as a demonstration at Dawn 05 .

Dawn05 was a University of Limerick exhibition of interactive designs created by the IMEDIA post-graduate class. 40 Pattern created by Celeste Bergin.

39

29

I also recognized Gestalt views of grouping and experience while working on my thesis and project. For example, I kept looking for ActionScript syntax patterns that would shorten the time to learn it. Information for the thesis was continually grouped and regrouped that made sense to me. From my previous experiences in education and teaching insightful relationships were made. For example, I have used the technique of a hook which connects a students experience at the beginning of a lesson to facilitate their participation in learning. When a student has difficulty understanding a concept I try to explain it in another way using analogies that are familiar to them such as paragraph structure compared to the layers of a hamburger. For myself being cognizant of Gestalt theories is just another trick to pull out of the hat to help students become successful in school. There are many facets to consider when designing educational software for children. It is important to have a design team whose participants demonstrate a variety of expertise to facilitate effective programs. Familiarity with learner-centred design methods, insights directly elicited from learners and teachers, and an understanding of the context of the educational environment are conducive to good development of a program for learning. The process needs to be iterative and flexible to meet instructional objectives that encourage cognitive development that appeals to learners and to their teachers. Although technology is not the answer for all learning experiences, it can be an extended learning tool to help learners gain new knowledge and skills. Ornamental Pattern: an Interactive Process is one such tool and seems to be enjoyable too.

30

6. SUGGESTIONS FOR FURTHER WORK Further expansion and design considerations of Ornamental Pattern: An Interaction Design Process include the following ideas: A complete program package as an instructional tool that includes learning activities for vocabulary and the practice of ornamental design, examples, evaluation, and a final output with the additional components of sound and movement41. Learners would be able to print out their pattern designs as well as play them on a screen. This package would be available as a CD, online, or installed on a standalone or networked computer by the teacher. Investigate ways to integrate more cognitive processing by learners. For example, instead of buttons to manipulate size or rotation input fields would be used by the learners to type in percentages and angles. To develop a more robust package, scaffolding would be a further area of research to meet learners various levels of expertise and cognitive abilities. Alternative methods of accessibility interactions to meet the needs of learners with physical challenges. Creating a version in Spanish for Hispanic students with little or no English. Research alternate methods of input using the mouse (drag-and drop versus point-and-click) (Inkpen 2001, pp. 1-33), keyboard input, webcam capture, and scanned motifs. Research perception of sound and motion and their implications for learning content.

41

See Appendix J p. 74 for Ultimate Design Flowchart.

31

Solve ActionScript programming problems such as:

Multiple undos and redos. Step-by-step saving to return to work at a later time and to not lose work if there is technology failure. The creation of a motif in a separate scene on the Flash timeline to be imported into the primary grid scene. Grouping shapes used to create motifs. Changing depth of shapes via right-clicking the mouse to implement the principle of overlapping. Printing or burning work to a CD.

32