More Than Just a Pretty (Inter) Face: The Role of the Graphical User Interface in Engaging eLearners

The desired learning outcomes and environment should drive the design of the GUI. However, popular course authoring systems, such as WebCT and Blackboard, do not support the design intentions of educators attempting to create innovative eLearning environments based on constructivist approaches to teaching and learning. Educators must work within the design models that are either implicitly or explicitly imposed by a particular authoring tool. For example, many GUIs used by current authoring systems consist of elements associated with traditional classroom instruction such as a syllabus, course documents, assignments, and student rosters. It is the close approximation to objects found in traditional courses that make some authoring systems more appealing than others. Modern authoring tools also make it relatively easy for educators to post materials and publish an online course. They reduce the learning curve and allow educators to develop and deliver online coursework with limited time and resources. The problem is that such authoring tools often perpetuate the use of teacher-directed methods by lock-stepping the author into a set of constrained templates that do not readily support the development of innovative eLearning environments.

Supporters of constructivist learning theories criticize authoring tools that have inflexible inbuilt pedagogical support because the learning environment must be designed within the constraints proscribed by the authoring tool (e.g., Jonassen & Reeves, 1996). Murray (1999) proposed that such systems acknowledge concepts such as intrinsic motivation, context realism, and social learning contexts, but saw them as either not important, or as being too complex or incompletely understood to incorporate into instructional systems. We disagree. Not only are these concepts essential in engaging learners, but also examples of environments based on constructivist design principles that have proven to be effective especially when the problems that are posed are ill structured and require more than simple factual responses (e.g., Jonassen 1997; Hedberg, Harper, Lockyer, Ferry, Brown & Wright, 1998; Herrington, Herrington, Sparrow & Oliver, 1999).

Human-computer interface designers continue to wrestle with the challenge of affording a new generation of visually savvy learners with engaging online experiences. In her seminal book Computers as Theatre,Laurel (1993) suggested ways to use the notion of theatre, not simply as a metaphor, but as a way to conceptualize human-computer interaction. Laurel defined this type of engagement as, “what happens when we are able to give ourselves over to a representational action, comfortably and ambiguously. We gain a plethora of new possibilities for action and a kind of emotional guarantee” (p. 115). What Laurel was referring to is flow state. Csikszentmihalyi (1996) coined the term to describe the state of total engagement. Users attain flow state when they have no conscious awareness of the passage of time. Flow state occurs when users enjoy a sense of playfulness, a feeling of being in control, a period of concentration when attention is highly focused, an interlude of enjoyment of an activity for its own sake, a distorted sense of time, and a rewarding match between the challenge at hand and one’s personal skills.

The design intentions discussed in this paper are derived from the main tenets of constructivism and focus on how engagement is achieved within the learning tasks and challenges presented to students. In the next section, we describe how the approach directly translates into clear descriptions of motivating tasks that are embedded in interactive eLearning strategies and communicated to students through the GUI. The emphasis on motivating tasks situated within well-designed and engaging interactions with the user interface provides the instructional designer greater surety that the final experience will be effective.

Based on key concepts associated with learner engagement and engagement theory, we propose a design model for creating constructivist eLearning environments. The model suggests an iterative approach with a focus on integrative strategies (Figure 1). Recognizing that traditional design models concentrate on tasks and their descriptions, the added dimensions of task representation and motivation represent a shift in focus to a more integrative and holistic design process. The three major phases work to create a rich description of the learning experience and how it will serve different and diverse learners.

The approach begins with an initial description of the project space and how the educational content information is to be used by students. The term “project” can represent a course, a course component such as a learning object, a set of web-based support resources, a CD-ROM product, or other various combinations. The second phase defines a method for learners to access and manipulate the information. The purpose of the final phase is to actualize the learning experience by ensuring that the GUI and the visual metaphors are consistent with the prior steps to reinforce the core learning outcomes. To this end, the interface elements should visually communicate the educational objectives and goals.

A CD titled “123 Count with Me,” developed at the University of Wollongong and soon to be published by the NSW Department of Education and Training in Australia illustrates the application of the model (Figure 2). The CD introduces basic mathematical concepts to K-2 teachers and shows them how they might use an innovative instructional strategy to group students and introduce basic mathematics.

Phase one compiles information on learners’ needs and describes the parameters of the project space. It encompasses the essential information to be included in the eLearning materials, distills what the target audience understands about the information, and describes how the project should be structured for its intended audience. The purpose of this initial stage is to begin a holistic structuring of the information and to model it so that it will eventually form the basis of an organizing visual metaphor.

Isolating the key attributes within a learning experience is not trivial. It is difficult to clearly define the knowledge domain and how it should be presented for a particular audience. To understand the options, instructional designers need to ask their project originators and users three questions.

1. What is the topic (content) of this project? Attempts to define the content often become a lengthy written list of ideas. The preferred method is to identify a simple visual representation, such as a concept map, that may serve as a useful structure for accessing the knowledge domain. A concept map can be used to ideate, plan, organize, and visualize the concepts and links that are included in the model’s first phase (Ferry, Hedberg, & Harper, 1997). Figure 3 is an early concept map used as the structuring device for the classroom panorama in the “123 Count with Me” example.

   FIGURE 2

   

   View largeDownload slide

   FIGURE 2

   

   View largeDownload slide

   Close FIGURE 2

2. Who are the intended users of this knowledge domain? The content might be the same for different groups, but learners may want to “view, use, or manipulate” the content in different ways. For example, novices may want help in understanding how a domain is structured and how elements are related. Experts may already have well-developed schemas and prefer to get right into applying key concepts. The primary users should be given opportunities to suggest mechanisms to aid them in understanding the topic at hand

3. Why is eLearning being undertaken? Encouraging the client to state in a few sentences what he or she thinks the project will achieve is often enough to gain insight into the core-driving objective(s). We have found that the client’s original stated objective almost always needs revisions to better identify and describe the underlying purpose. The “real” purpose once enunciated will help to clarify and direct many subsequent decisions.

The answers to the three questions form the foundation for a particular eLearning project space. Using an iterative process, the designer can then elaborate the project space by presenting clients with progressively refined descriptions of five key attributes: the learning tasks, the information structure, the expert’s perspective, the cognitive demands of the intended user, and the mental images and the effort required to interpret the images if placed within the graphical user interface.

In “123 Count with Me,” a concept map was created to represent the learning tasks and information structure (Figure 3). The remaining attributes were addressed in “concept and treatment” description of the project. In short, the teacher’s desk served as a metaphor for the “expert” where novice users were encouraged to think about the teaching task and what mathematics learning is about. Multiple points of access either through menus or by clicking on elements in the panorama were designed to address the limited computer skills and reduce the cognitive demands on the intended user. Finally, the classroom reduces the mental effort necessary to figure out the product while reinforcing a familiar setting and experience.

Effective interaction design that matches cognitive expectations ensures that users are motivated and engaged. Creating a GUI that effectively represents the information structure does not immediately lead to useful interactions. As Hirumi (in this issue) notes, the use of interactive technologies does not ensure that meaningful interactions will occur. The challenge is to create interactions that are easily manipulated at the users’ technology skill level. The point and click function in the “123” example ensures simple information manipulation. The user should be able to focus on the task rather than the process of how the task must be done. Norman (1988) provides guidelines for constructing GUI interactions.

• Visibility: The user can tell the state of the device and the alternatives for action through observation. In the “123” example, learners are positioned within the same virtual classroom space that purposely reduces their choice of options. When learners make a choice, a window opens that makes their selection obvious (Figure 4).

• An effective conceptual model: There should be consistency in how program functions “work,” leading to a coherent conceptual user model. Novice interface designers are often guilty of creating different actions for the same concept. This only confuses users when they go to do something in one section of the program and find that the actions are markedly different in another section of the same environment. In the “123” classroom, the introduction “show me around” and the help links use the same palette function, which can be accessed by simply clicking on the term (Figure 5).

• Effective mapping: There are clear relationships between actions and results, controls and their effects, and between system state and what is visible.

• Feedback: There must be continuous feedback about the results of actions. Novice designers often create instructional materials that provide feedback on every user action; yes that answer is correct, no it is not, and so on. They fail to realize that almost every action creates some perturbation. For feedback to be effective, designers should employ a variety of feedback that link to specific learning outcomes.

In addition to Norman’s guidelines, there are alternative techniques for reducing the load on a learner’s working memory to enhance interaction design.

• Use visual conventions borrowed from the real world. For example, “123 Count with Me,” emulates the file directory structure used by both Windows and Macintosh operating systems (Figure 6).

• Apply consistent visual metaphors. This seems self-evident, but it is easily contravened. The classic mismatch that is often quoted is the method for ejecting a disk from a Macintosh computer by dragging its icon into the trash. This confuses novice users as they think that they are going to delete files, or worse, erase the disk.

• Recognize the role of the learner as actor. Successful human interface interactions can be considered a form of acting. The user is participating in a dialogue that is unfolding, often in realtime (Laurel, 1993; Hedberg & Sims, 2001). Considering the learner as an actor within a staged environment can ensure both planned and serendipitous interactions.

Another motivating strategy for stimulating interactions involves the creation of explorable worlds that enable users, in a self-paced fashion, to select, collect, and reflect upon a variety of options and experiences. Users expect to instantaneously “see” what is possible and choose the option that they believe will ensure that their goals are met. To accomplish this complex function, Norman (1988) suggests that:

• The user must readily see and be able to do the allowable functions. The menus must make sense and be structured and grouped around likely tasks. Showing all options, including those that are not currently available and “grayed out” is a good example of a simple but useful convention.

• The effect of the action must be visible and easy to interpret. Consider the selection of an element within a landscape (Figure 7). When a user places the mouse over a hot spot, the action must be reinforced by visual and possibly even auditory feedback. The user also needs acknowledgement when he or she selects an option.

• Action should be without cost. An action should not delete an element, making it irretrievable. Choosing a path should be reversible. In an exploratory world, engagement can be diminished if interaction is reduced or made more cumbersome with poorly designed interactions and irreversibility.

Key to Phase 2 is full access to information within the project. In traditional instructional design, elements are sequenced into a presentation order. The presentation leads the student through learning tasks that are designed to support the learning outcomes but within a predefined structure determined by the designer. In contrast, we seek to provide access to the data in a less regulated form, in the same way as individuals would access, manipulate, and explore resources in the real world. While there still must be supportive scaffolds and structures, the choices the students make under this model are similar to those they make as “experts” in a knowledge domain. The only difference is that the tasks have supportive elements that describe decisions in context (Lave & Wenger, 1991). Visual metaphors and information structures must provide informationrich presentations, especially when the structures are extensible (if further information needs to be added later) and can be unfolded, as the learners need less or more support and scaffolding to complete their chosen learning tasks. An information-rich environment provides access to many options or information elements simultaneously. Within the panorama of “123,” there are many clickable objects that can be directly accessed rather than having to pull down menus and proceed through a sequence of screens.

In summary, the second phase of the model reviews the learning process defined in phase one and seeks to integrate and provide access to all course elements through an appropriate interaction strategy. It also aims to identify visual metaphors that can help organize learning tasks and present information through the GUI. The outcome of the second phase is a formal description of the project, what it is going to cover and how it will function, usually in the form of a design brief. The brief enables the client to understand the underlying knowledge structures and how the designer proposes to link the educational content. The design brief compiles information derived from phases one and two, including the background to the project, project concept, needs assessment or problem analysis, goals and objectives, learner tasks, design structure, proposed resources and media format, implementation environment and constraints and evaluation procedures. In the brief, indicative spatial layouts are often employed to provide some ideas of function and interactivity. At times, a series of crude PowerPoint screens can show links and layout possibilities. However, the visual look and feel are the main elements of the next phase.

The third phase of the model transforms the design concepts derived in the first two phases into a visual presentation structure, referred to as the GUI. The GUI presents a hierarchically arranged set of layered data and objects within the visual framework of a computer monitor. The GUI is responsible for visualizing concepts, conveying order, classifying information, clarifying meaning, directing focus, stimulating interest, facilitating interactions, confirming choices, supporting recall, directing navigation, creating ambience, and otherwise engaging the learner. In short, the third phase answers the core questions, how can the user “see” the information structure and how it can be manipulated through the choice of effective visual metaphor and graphical style. In the case of the “123” example, we chose the visual metaphor of the classroom to serve as the context in which decisions about the mathematics teaching take place. Once we decided upon the classroom metaphor, other options became evident for how we could structure visual and other sensory elements of the GUI to meet our objectives. For example, in the virtual math classroom children are grouped into small clusters. By clicking on the groups, small group teaching approaches are presented (Figure 8). In addition, strategically placed charts and visual ideas are available to provide instant models of how the math teacher can apply the newly-learned concepts (Figure 9).

It is important not to lose sight of how well the metaphor models, represents, and organizes the learning tasks within the context of how the materials are ultimately going to be visualized through the GUI. The GUI provides a visual system to facilitate communication between the user and the computer by representing and modeling the interactive knowledge domain. In addition to putting a visual front-end onto an application, the GUI reflects the physical properties of the interaction, directs the functions to be performed, and mitigates and monitors the balance of power and control between the user and the system.

Hicks and Essinger (1991) delineated three criteria for human interface design: usability, functionality, and visual communication and aesthetics. Usability is characterized by the ways people interact with a system (Nielsen, 1993). Functionality describes the way the system operates within the boundaries of the technology. Visual communication and aesthetics presents information so that the user can reason about, easily recall, interact and communicate with, document, preserve, and construct knowledge.

Technologists and visual designers differ in opinion about which of the three criteria takes priority. Norman (1988) professed that good design should be assessed from the usability point of view and only secondly from an aesthetic perspective. “If everyday design were ruled by aesthetics, life might be more pleasing to the eye but less comfortable; if ruled by usability, it might be more comfortable but uglier” (p. 151). Technologists who purport that the role of graphic designer is solely to provide cosmetic improvement support this viewpoint.

On the other hand, visual designers perceive themselves in broader terms, as visual translators and purveyors of communication and information, not solely as aestheticians. We take the stance that visual communication and aesthetics should not be separated from functionality and usability. This is particularly important for eLarning because visual displays of information encourage diversity of individual viewer styles and promote personalizing, reasoning, and understanding of content (Tufte, 1990). To maximize eLearning, the GUI must be integral to the system itself, rather than a decorative detail or afterthought.

Following Laurel’s (1993) lead, we can better understand the attributes of a GUI by applying the metaphor of the theater. The physical portal of the stage can be compared to the physical dimensions of a monitor’s display. However, unlike the three-dimensional stage, the interface must rely on the “trickery of perspective” to create the illusion of depth. In the theater, the director positions scenery, props, the effects of lighting, and the actors upon the stage. Within the GUI, the designer places various data elements within the interface inclusive of text, backgrounds, photographs, illustrations, animations, audio and video players, icons, bullets, banners, toolbars, etc. Much like the objects that populate the stage, GUI items come in a variety of shapes, sizes, colors, textures, and proportions. A stage filled with props and actors has little meaning unless they interact with each other and their environment as the plot unfolds. The same holds true for the GUI. The elements within the interface must interrelate through acts of balance, contrast, motion, and spatial arrangement, all the while communicating meaning. The virtual “choreography” leads the learner through a purposeful journey, complete with varied pace, directed foci, crescendos in action, and even mood swings. Both a play and eLearning applications share one goal-to engage the audience. The major difference is that a GUI must entice the learner to interact while the playgoer can sit back and passively watch.

To visually represent the eLearning environment, designers use typographic, photographic, and illustrative design techniques to encourage interaction and convey meaning through the GUI. When defining the GUI, there is a wide range of choices to be made not only related to technique, but inclusive of style and medium. The choice of technique depends on the learning objectives and the project’s overall “look and feel.” Techniques range in style from literal to abstract, static to dynamic, content-driven to purely decorative. If the subject matter does not exist in reality, creators can fabricate visuals from scratch or digitally manipulate existing imagery.

Visuals are an important component of the GUI because they have the ability to focus learner attention, set ambiance, add texture and depth to the screen, and provide thematic consistency. Furthermore, if working illustratively, the designer must select a consistent medium. Pen and ink, paint, watercolor, pencil, marker, or the wide array of computer-generated media each provides a different look and feel. GUIs also can encompass threedimensional worlds. Using specialized software, designers can craft explorable, architectural landscapes and model objects that learners can examine, dissect, and manipulate in 360-degrees.

Coinciding with the use of metaphor, GUIs often adopt a thematic look and feel based upon historical periods (the Wild West, art deco), cultural motifs (ancient Rome, Africa), physical locales (the classroom, a campus, a futuristic cityscape) and everyday objects (a book, an instrument panel, a game board). The emulation of familiar conventions reinforces consistency, takes advantage of previously learned associations, promotes understanding between diverse concepts and helps the learner grasp complex ideas. Ultimately, effective elearning translates into learner engagement, a result of dynamic and authentic interaction. To further enhance the use of themes and metaphors, GUI designers can add perspective and apply Gestalt principles to trigger interaction and promote engagement.

Perspective adds dimensionality to what Tufte (1990, p. 12) refers to as “flatland,” the two-dimensionality of a video screen. Perspective provides the illusion of depth and creates a visually engaging environment that models reality. The simplest form of perspective uses foreground and background space. The “123” classroom exemplifies this perspective through position, size, color, and detail of the various objects and individuals placed within the panorama (Figure 3). Adding shadows, shading, high/low lighting, location sensitive sound, shrinking and expanding animated objects can increase dimensionality. The illusion of depth also can be envisioned by rendering objects in three-dimensions and by employing isometric perspective.

The GUI designer can also apply select Gestalt principles to build a visual frame of reference that provides a reliable psychological basis for the spatial organization of graphic information (Berryman, 1979). An example of a Gestalt principle applied to the GUI is the practice of grouping together universal navigation commands such as site maps, and quit and home buttons. This Gestalt principle is called “Proximity.” It states that perceptual groupings are favored according to the nearness of parts. Closer parts naturally form groups by visually uniting related elements. Figure 10 creates three small groups within the classroom using this simple grouping stratagem.

Phase 1 conceptualizes the project space. Phase 2 applies a metaphor to design interactions. Phase 3 takes the process to fruition by visualizing the outcome. The outcome is usually expressed as a visual prototype. It can be as simple as a roughly sketched, paper-based storyboard or as sophisticated as computergenerated graphic screens with rudimentary programming included to demonstrate functionality.

Effective elearning environments built upon solid foundations of learner needs and outcomes, metaphorically crafted cognitive processes, and instructional strategies communicated through effective graphical user interfaces that intrigue, challenge and engage the learner. Crafting of such projects requires a new approach in which the instructional designer, technologists, graphic designer, educator and student collaborate to insure that the end result is usable, functional and visually communicative and attractive. This can be accomplished by employing reasonable yet innovative conventions; such as organizing visual metaphors that scaffold access to the underpinning knowledge that support the desired level of challenge and engagement. As interactive technologies become the staple communication vehicle for innovative virtual worlds, effective GUI design will ensure that the learner’s focus on learning rather than operating the software.

Development of an engaging GUI is not a trivial task. Creating appropriate challenges that are effectively represented by the visual design requires understanding of how learners need to access and manipulate available resources and an appreciation for the skills and knowledge of each design team member. The choice of authoring tools can also greatly affect the way information may be structured and manipulated. Popular authoring tools may actually reduce the interactivity and visual representations that are possible (Hedberg & Sims, 2001). Educators who wish to take a constructivist approach to teaching and learning may find it difficult to realize their design intentions if required to use certain authoring tools. While some tools facilitate the physical process of putting educational materials online, they may also inhibit the design of innovative and engaging GUIs. The three-phase model offers guidelines for modifying or creating original GUIs and gives educators a better understanding of the importance of functional, usable, communicative, and aesthetically appropriate user interfaces.