DESIGNING A CONCEPT MAPPING SYSTEM USER INTERFACE

Roberto A. Flores
robertof (at) cpsc.ucalgary.ca
Submitted to: SENG 609.05 Graphical User Interfaces: Design and Usability. December 1997.
Computer Science Department, University of Calgary

 Table of Contents

 

1. PROJECT GOAL

The goal of this project is to design an intuitive and efficient user interface for concept mapping elicitation for a computer-based system.
 

2. TASK CENTERED DESIGN

2.1. INTRODUCTION

2.1.1. CONCEPT MAPS

Concept maps are diagrams composed of nodes and links, that are used to graphically represent information. These basic graphical elements of concept maps can be generally described as follows:

2.1.2. EXPECTED USERS

Concept mapping users can be found on a wide range of areas and with different levels of expertise. Their main motivation is to create diagrams to represent and communicate information relevant to their domain. Typical examples of the use of concept maps are for brainstorming, and as a graphical instrument to transmit complex ideas.

2.1.3. WORK CONTEXT

Although concept maps are recognized as beneficial instruments to represent information, they are seldom applied to every day tasks. This assertion suggests that constraining reasons may exist that refrain people from using concept maps. As a result, it may be reasonable to infer that these restrictions are due to the limitations found on conventional media (i.e., pencil and paper). To clarify this point, we can think of a person explaining complex ideas to a listener. This person may take a piece of paper and write data (i.e., nodes) on it; and then continue by drawing the relationships (i.e., links) existing between the data written (thus, creating a concept map as a visual aid). The creation of such a diagram may not represent a problem; however, its modification may do, since the correction and deletion of attributes (e.g., labels, positions) are not easily achieved due to the physical limitations of the media chosen.

From this argument, it can be assumed that the use of paper and pencil restricts conventional concept mapping elicitations to small, one-time use, informally drawn diagrams, instead of diagrams that can be revisited and perfected over time. It may also be possible to generalize this assertion by stating that the limitations found on paper and pencil also appear (to less extent) on other physical concept mapping modeling tools (e.g., using cloth threads, post-it notes and erasable markers).

Under previous assumptions (consciousness of concept mapping benefits, and physical restrictions), it's feasible to conclude that people will agree to adopt a concept mapping system if it does not present the limitations found on a conventional elicitation media.

2.1.4 USING THE SYSTEM

Users will be able to create and maintain concept maps as these evolve to better represent the knowledge users want them to depict. Operations over a concept map include the creation of links and nodes, and the modification of visual attributes represented by these graphical elements. Examples of common attributes of nodes and links can be: spatial location, extend, color, and label.

2.1.5 SYSTEM CONSTRAINTS

The concept mapping user interface designed as part of this project will be applied to the elicitation of concept maps using a computer-based concept mapping system. However, the sole existence of a software system is not a panacea for solving all concept map elicitation problems. On the one hand, it is likely that a computer system will introduce new limitations based on the human interface mechanisms available (e.g., keyboard, mouse or touch-screen devices), and that the system will harm some of the advantages of physical elicitation models (e.g., paper and pencil ubiquity versus computer availability). On the other hand, the use of a computer based system has the advantage that it creates a new range of possible applications for concept mapping tools, such as distributed collaboration, and as hypermedia navigational tools.

2.2. CONCRETE TASK EXAMPLES

Concrete concept mapping task examples help to analyze why concept maps are used (e.g., problem-solving, brainstorming) as well as what steps or patterns (if any) are followed by users to construct them (e.g., text first, then links, shapes, and so forth).

On the one hand, it has been mentioned that people do not use concept maps except to construct small and informal diagrams. This circumstance may not allow to find if concept maps are used to solve real life problems (i.e., why are they used?), thus, limiting the creation of detailed and realistic task examples. On the other hand, it may be possible to observe people eliciting concept maps (i.e., how are they used?) to derive some of the approaches that are used on their construction and maintenance. To that end, a group of users was requested to undertake an informal study, which was composed of a small set of tasks, and were challenged to use diverse physical concept mapping tools.

For this study, users were selected on the premises of previous awareness about concept maps and not on their proficiency on concept mapping elicitation. Participants were requested to undertake the following three questions (refer to Appendix A for the complete questionnaire given to participants):

FIGURE 1. CONCEPT MAP PROVIDED FOR TASK 3.

Participants were requested to be fulfill these tasks using different physical frameworks: for the first task, paper and pen; for the second, color markers and a whiteboard; and, for the third task, post-it notes, cloth threads and adhesive tape. These media can be ranked from more restrictive down to less restrictive on their physical limitations.

2.2.1. PARTICIPANTS’ DATA.

The elicitations observed from 5 participants is listed below these lines.

2.2.1.1. PARTICIPANT 1

2.2.1.2. PARTICIPANT 2 2.2.1.3. PARTICIPANT 3 2.2.1.4. PARTICIPANT 4 2.2.1.5. PARTICIPANT 5

2.2.2. DATA COLLECTION AND INTERPRETATION.

The actions and operations observed from the participants’ elicitations are listed below these lines.

2.2.2.1. CREATION OF GRAPHICAL ELEMENTS

a) NODES b) LINES

2.2.2.2. MODIFICATION OF GRAPHICAL ELEMENTS

a) NODES b) LINES c) NODES AND LINES d) LABELS 2.2.2.3. OBSERVATIONS

2.3. TENTATIVE LIST OF REQUIREMENTS

Based on the previous study and analysis, a preliminary list of requirements was constructed.

2.3.1. ABSOLUTELY MUST INCLUDE

a) NODES b) LINKS c) LABELS

2.3.2. SHOULD INCLUDE

2.3.3. COULD INCLUDE

2.3.4. EXCLUDE

To simplify the scope of the user interface, the concept mapping system envisioned will not implement formalisms of any kind. As a result, the user interface will not specify features particular to specific representations (e.g., Sowa’s conceptual graphs, Booch’s object-oriented notation, and so forth).

2.3.5. DISCUSSION

3. PROTOTYPING

3.1. CONCEPTUAL MODEL

Conventional concept mapping models make a clear distinction between passive and active elements. Passive elements are the receptors of the drawing, and active elements are the tools for diagram construction and manipulation. In the case of a paper and pencil model, for example, the passive element would be the paper used for drawing, and the active elements would be the pencil and eraser used for drawing and erasing nodes and links.

In the case of the concept mapping user interface part of this project, the intended conceptual model to project should follow the structure of the physical model already existing in users’ minds: a blank area for drawing (passive element), and tools (active elements) for drawing and manipulating nodes and links.

3.2. INTERFACE REQUIREMENTS

Concept maps are graphical representations. Such a statement suggests that a concept mapping interface may naturally blend in within current graphical user interface paradigms (e.g., MS-Windows, Macintosh), implying that users would be expected to be moderately proficient in the use of such paradigms. As a result, users must be required to recognize and manipulate graphical controls (such as buttons, input lines and pop-up menus); and to understand the particular mappings existing between an outcome (i.e., graphical control manipulation) and the actions performed (i.e., mouse and keyboard operations).

3.3. INITIAL PROTOTYPE

To create an initial prototype, the tentative list of requirements was revisited and analyzed. First covered were the requirements that are essential to the system. From these key requirements two main operations were addressed: creation of graphical elements (i.e., nodes and links), and modification of graphical elements.

3.3.1. CREATION OF NODES.

One of the requirements for the concept mapping user interface is that it must provide the mechanisms to create nodes. Possible solutions are:

A) To include a "Node" option under a "New" pull down menu in the window’s menu bar: The selection of this option, as shown in Figure 7, results on the creation of a new default node located on a default position in the drawing area.

FIGURE 7. A DEFAULT NODE CREATION BASED ON THE "NEW NODE" MENU OPTION.
 
This technique may be extended, as shown in Figure 8, to include sub-menu options, which users can select to create specific node types, such as shaped nodes, nodes with label and no shape, or a node displaying a shape and a label.
FIGURE 8. NESTED NODE CREATION MENU OPTIONS.

These techniques have the disadvantage of requiring users to divert their attention from the drawing area to the menu bar, which needs to be traversed until the desired option is found and selected. Additionally, these techniques provide a poor visual affordance on regards of node creation (just a "New" option, under the menu bar, is visible to the user).
 
One possible advantage of menu options is that they can explicitly relate concrete functions of the system with keyboard shortcuts (if these are implemented by the system).
 
B) To include a "New Node" button in a toolbar: As the result of selecting this option, a new node is created in a default position of the drawing area.

This technique provides good visual affordance, since users can easily determine, from the buttons in the toolbar, that nodes can be created. One disadvantage of this technique is that users need to divert their attention from the drawing area in order to select a toolbar button.

This technique can be enhanced by:

 C) To include a "New Node" option in a pop-up menu that is displayed when the right mouse button is clicked on an empty space of the drawing area (Figure 10): As the result of this operation a node will be created in the position where the pop-up menu was invoked.
 
This technique presents the advantage that users do not have to access controls located outside the boundaries of the drawing area. However, it has the disadvantage of not presenting any visual evidence that nodes can be created this way.
FIGURE 10. A DEFAULT NODE CREATION BASED ON A POP-UP MENU OPTION.

Possible improvements to this options can be the following two mutually exclusive enhancements:

However, it may be possible to use a simple technique to derive whether a node will consist only of a text label, or an unlabeled shape. This is achieved by following the next sequence:

3.3.2. CREATION OF LINKS.

The proposed interface must be able to create links for relating graphical elements. Possible solutions are:

A) To include a "New Link" button in the toolbar: As the result of selecting this option, the mouse pointer will be changed to an icon depicting the state "creating a link". Under this state, users will click over an existing graphical element or over an empty position. After this action is completed, an elastic line will be drawn from this initial position to the current location of the mouse. The next step is to direct the mouse to an end position, where the user will click the left mouse button to complete the link operation. Both the initial and the end position can encompass a graphical element or an empty position in the screen.
 
Figure 11 shows an elastic band being displayed between two nodes (after the "create link" button from the toolbar is pressed), and the final link between these nodes when the mouse button is pressed over the targeted node.

FIGURE 11. LINK CREATION BASED ON A DEFAULT TOOLBAR OPTION.

The creation operation will be canceled if the same graphical element is selected as the initial and end graphical element, or if the mouse is clicked over the same empty position coordinates.
 
This technique has the advantage of providing acceptable visual affordance and feedback to the user when performing the operation. As in the case of creating a node, a group of buttons can be implemented in a toolbar to provide immediate access to frequently created link types (e.g., links bearing adornments, links featuring a label, and so on), instead of a plain line as shown.
 
A) To include a "New Link" option in a pop-up menu that is displayed when the right mouse button is clicked: This technique represents a slight variation from the previously presented solution. This technique compares positively to the previous option, since users do not have to access options outside the drawing area (e.g., a toolbar); however, it compares negatively due to the additional steps required for traversing the menu, and its lack of explicit clues that a pop-up menu option can be used for link creation.

3.3.3. MODIFICATION OF NODES AND LINKS.

The concept mapping user interface must allow the modification of nodes and links. To that end, the interface must implement mechanisms to support the modification of attributes for a single graphical element, and for a group of elements.

The modification of attributes in a single element can be achieved by direct manipulation and by using a pop-up menu with options that can be applied on the graphical element. In the case of nodes, pop-up menus can display options for changing the label, shape, coloring, position and size; in the case of links, a pop-up menu can be used to accomplish attachment/detachment, coloring, adornments, and label modifications. This technique has common disadvantages found on pop-up menus, such as poor visual affordance (i.e., how do users know these options exist?) and multiple level traversal, in the case of nested menu options.

Event though modifications can be performed using pop-up menu options, some of these options are better suited for direct manipulation. Examples of the earlier can be found on the following operations:

The modification of a group of graphical elements represents a different challenge, since graphical elements have to be recognized as belonging to a modification "group". To this end, a new state has to be implemented to recognize aggregation to a group. Graphical elements in a group are distinguished from those not in the group by giving them a characteristic that shows that they have been "selected". As shown in Figure 12, selections have to provide visual feedback to users, for them to identify selections. In this case, rectangular dots are applied to denote a node’s selection state.
FIGURE 12. NODE SELECTION USING CORNER DOTS TO PROVIDE FEEDBACK.

Before defining how modifications can be achieved on selected nodes and links, it is necessary to define how graphical elements can be giving a selected state. Two possible methods are described as follows:

The modification of group attributes can be accomplished using mayor interaction controls, such as menu options, pop-up menus, and properties’ toolbars. From the controls suggested, each of them portraits a different value on regards of visual affordance and usability. The basic advantages and disadvantages of these controls are covered as follows: Possible attributes that can be modifiable using a toolbar are: shape, label, shape color and label color on nodes; and arrowheads, label, arrowheads color, line color and label color on links. An expected behaviour of the properties’ toolbar is that the manipulation of controls will immediately be reflected (i.e., instantaneous feedback) in the attributes of selected graphical elements belonging to the category of the control modified.
 
An early design for a properties toolbar is shown in Figure 14. This toolbar has controls for modifying some of the attributes of selected nodes, such as shape, shape color, label, label color, and font type and size.
FIGURE 14. AN INITIAL DESIGN FOR A PROPERTIES TOOLBAR.

It is worth mentioning that not all the attributes belonging to nodes and links are suitable to toolbar control manipulation. Such is the case of the positioning of graphical elements, since this operation may be more naturally performed by direct manipulation.

Graphical elements can be moved by pressing the left-mouse button over them and dragging them to their new desired location. If the element moved is found to be selected, all other selected elements will be moved by the same offset. The move operation ends after the release of the mouse button.

Additionally, selected elements can also be moved by using the arrow keys from the keyboard. This technique allows horizontal/vertical movement of elements without loosing the vertical/horizontal original alignment.

A feature that may be useful for the interface to implement is node alignment. To this end, 4 options can be made available: align left, align right, align top, and align bottom. The "align left" option will align the left margin of all selected nodes, using as a reference the left margin of the left-most element. The same logical process is consistently followed by the other options. These options, although they can be implemented in a menu, are better suited as buttons in a toolbar.

3.3.4. DELETION OF GRAPHICAL ELEMENTS.

Deletion of elements can be implemented in the two following ways:

3.3.5. KEYBOARD MANIPULATION.

An interesting feature that can be allowed by the user interface is the manipulation of graphical elements using the keyboard. Examples of this are: to traverse the graphs in a concept map using keystrokes (e.g., <TAB> to focus on the "next" graphical element); to move focused elements (e.g., using the arrow keys); deleting focused elements (e.g., using the <DELETE> key); and editing the label of focused elements (e.g., using the <ENTER> key). By allowing certain operations to be done from the keyboard, users are freed from the constraint of totally relying on a pointing device to perform operations (additionally, keyboard manipulation may allow faster elicitations from users with high keyboard proficiency).

3.4. WALK THROUGH

To test the initial prototype, a concept mapping elicitation was selected from the tasks accomplished by participants of the study. For this test, the first task from the second participant was selected. The task description for this exercise was given as follows:

TASK 1. Construct a family tree based on the following prose description: "Peter has 2 kids, one named Bob and the other Meg. Grand Pa’ and Grand Ma’ are the parents of Peter. Grand Pa’ and Grand Ma’ also have a daughter, who is named Mary. Mary has a son named Billy."

As it was noticed from the participants’ elicitations, it is possible that initial nodes and links are drawn based on a mental image created a priori in users’ minds. At this point, the participant may foresee the creation of two top elements ("Grand Pa" and "Grand Ma"), parenting two children nodes ("Peter" and "Mary"), each of which have descendants.

Initially, the interface is shown without any graphical element, as depicted in Figure 16.

FIGURE 16. INITIAL ELICITATION STATE.

The first step, as elicited by the participant, was:

a) drawing a rectangular shape and writing a label "GRAND PA" on it; since the label was bigger than the originally allocated rectangle, the shape of the rectangle was enlarged to encompass the label;

The user starts by pressing the "Create a rectangular shaped node with label" button  located in the toolbar. This action will create a new state "click on the desired location in the screen" reflected by the new mouse pointer icon  . The user directs the mouse to the top of the drawing area and presses the left mouse button to indicate the position of creation. A rectangular node is created at this position, and an in-place label input line (depicted as a vertical line) is enabled inside the boundaries of the node’s shape. Figure 17 shows the interface’s state after the text "GRAND PA’" is typed in, and before the user presses <ENTER> to finish the label’s insertion.

It is worth noticing that the initial shape size was dynamically adjusted to encompass the label typed.

FIGURE 17. USER ELICITATION WHILE FINISHING THE FIRST STEP.

The second step, as elicited by the participant, was:

b) drawing a rectangular shape besides the previously drawn node; and writing a label " GRAND MA";

The participant repeats the initial actions of the previous step; thus, directing the mouse pointer toward the toolbar and selecting the "Create a rectangular shaped node with label" button; positioning and clicking the mouse pointer beside the "GRAND PA’" node; and, typing the label "GRAND MA’".

The third step, as elicited by the participant, was:

c) drawing a diagonal line from the node "GRAND PA" down and to the left toward an empty position;

To perform this operation the participant positions the mouse cursor over the node "GRAND PA’" and invokes its pop-up menu by pressing the right mouse button. From the available options, the participant selects the "New Link" option. After this selection, the pop-up menu disappears and an elastic band is draw from the center of this node to the position of the mouse pointer. These steps are shown in Figure 18.

FIGURE 18. CREATING A LINK USING A POP-UP MENU OPTION.

The fourth step, as elicited by the participant, was:

d) writing a label "Peter" at the end of the non-attached end of the previously drawn line; then, drawing a rectangular shape;

The user selects the "Create node with label" button  located in the toolbar. This action will enable the state "click on the desired location in the screen" reflected by the new mouse pointer icon  . The user directs the mouse toward the end of the dangling line created in the third step, and presses the left mouse button over that end. This action will display the label’s input line (represented by a blinking vertical bar) on which the user types "Peter".

It is worth noticing that by positioning a new node over the dangling end of a line will cause the line to attach to the node after the node has being successfully created (in the case that the node was already created, the line is just automatically attached).

After creating the label, the user selects the node (using single selection) and changes the shape from "None" to "Rectangle" using the "Shape" drop-box located in the properties toolbar, as shown in Figure 19. After the node’s shape has been modified, the user de-selects this node using the combination of <CONTROL> and left mouse button over the selected node.

FIGURE 19. MODIFYING A NODE’S SHAPE USING THE PROPERTIES TOOLBAR.

The fifth step, as elicited by the participant, was:

e) drawing a diagonal line from the node "GRAND MA" down and to the right toward an empty position, where a rectangular shape is drawn and labeled "MARY".

Similarly to the actions performed in the third step, the participant positioned the mouse over the node "GRAND MA’" and invoked its pop-up menu. Then, the participant selected the "New Link" option and draw a line to an empty position, where a new rectangular node was created (using the toolbar option) and is labeled as "MARY".

The sixth step, as elicited by the participant, was:

f) a vertical line is drawn from "MARY" to an empty position, where a rectangular shape is drawn and labeled "Billy".

The mouse is positioned over the node "MARY"; the pop-up menu is invoked, and the option "New Link" is selected. The user moves the mouse over an empty position, and clicks in that location to select the end position of the line. Then, the user selects the "Create rectangular node with label" toolbar button, and invokes the node’s creation (by moving and clicking the mouse) over the dangling end of the just created line. A rectangular shape appears at this position and it is automatically attached to the dangling end. This action is followed by showing a shape-centered input line for label typing. The user types "Billy", followed by <ENTER> to finish the insertion of the label.

The seventh step, as elicited by the participant, was:
 
g) 2 lines are drawn diagonally and down, one directed to the left and the other to the right, from the node "Peter" and toward empty positions.

The user positions the mouse over the node "Peter" and invokes its pop-up menu, from which the option "New Link" is selected. The user, then, moves the mouse pointer below and to the left toward and empty position, where the mouse is clicked to indicate the end point of the line. This operation is repeated, but the line created is directed to the right, instead of to the left, of the node "Peter". The state of the elicitation at this point is shown in Figure 20.

FIGURE 20. USER’S ELICITATION STATE AT THE END OF THE SEVENTH STEP.
 
The eighth step, as elicited by the participant, was:
 
h) a rectangular shape is drawn and labeled "Bob" at the end of the left diagonal line;

The user selects the "Create rectangular shaped node with label" toolbar button, moves the mouse pointer toward the dangling end of the left line drawn from the node "Peter", and clicks the mouse in that location. Immediately, a rectangular shape appears and the dangling line is attached to it. This actions are followed by the appearance of an input line centered to the shape of the node. The user types "Bob", followed by <ENTER>.

The ninth step, as elicited by the participant, was:

i) a rectangular shape is drawn and labeled "Meg" at the loose end of the right diagonal line.

This step is almost identical to the previous step, with the difference that it acts over a different text label and target line. First, the user selects the "Create rectangular shaped node with label" button from the toolbar, moves the mouse pointer toward the dangling end of the right line drawn from the node "Peter", and clicks the mouse in that location. Immediately, a rectangular shape appears and the dangling line is attached to it. These actions are followed by the emergence of an input line centered to the shape of the node. The user types "Meg", followed by <ENTER>.

The current, and final, state of the elicitation is shown in Figure 21.

FIGURE 21. FINAL CONCEPT MAP RESULTING FROM USER’S ELICITATION.

3.5. INTERFACE LIMITATIONS AND PROBLEMS DETECTED.

Several are the limitations of the proposed prototype. Some of the limitations detected at this stage are listed as follows:

 

ANNEX A

 Concept Mapping Elicitation Study Questionnaire
 PARTICIPANT #                   .
 

INFORMAL CONCEPT MAPPING STUDY

Thanks for coming.
 
This is an informal study about human elicitation of informal concept maps. You were selected to participate because you have heard (and probably used) concept maps in the past. However, keep in mind that the goal of this study is to define how concept maps are constructed, not to test your knowledge about them. As a result, there is nothing you can do that can be wrong.

As part of this study you will be given 3 questions. These questions are not intended to trick you. If at any time you feel tired or uncomfortable with a question we can skip the question or finish the test. During the time you are answering I would like you to say what is what you are doing; I will be asking you that question constantly during this study.

Additionally, I have arranged to have a video camera to film –not your person– but what you are doing. This will allow me to review your drawings to have a better understanding on how they were constructed. Filming is optional.

All the information that you provide is strictly confidential and your name will not be related to any of the material you provide. This circumstance allows me to show the material to the professor –if necessary– without him (or anyone) knowing who you are.

QUESTION 1. Construct a family tree based on the following prose description:

"Peter has 2 kids, one named Bob and the other Meg. Grand Pa’ and Grand Ma’ are the parents of Peter. Grand Pa’ and Grand Ma’ also have a daughter, who is named Mary. Mary has a son named Billy."

MEDIA: For answering this question you can only use the paper sheet and pen provided.

QUESTION 2. This is (probably) the most difficult question you will be asked. This question consists of 2 parts:

Part A. Use the following words to construct a concept map:

"AIRPLANE" "BABY"  "BEACH"  "BEER"  "GREEN"

There are 3 rules you must follow to construct this concept map:
1) All words have to connect to at least one other word.
2) All words must form a single concept map.
3) For linking words you must create your own relationship types. For example, you if you have had the words "FRUIT" and "TREE" you may create a relation "HANGS FROM" or "COMES FROM" (there are dozens of other relations you can create!) between them.

MEDIA: For answering this question you can only use a white board, and the color markers and duster provided.
 

**** PLEASE, do not look to the next part, until after PART A has been completed! ****
 

Part B. If you were using this concept map for a presentation (e.g., for a class, a conference, etc.), would you enhance it in any way? If yes, please, do the changes with the material provided.
 

QUESTION 3. A previously constructed concept map is provided for this question. This concept map contains a series of linked words that form the phrase

"if you build it, they will come".

As you can see, the words are not placed in a logical arrangement (i.e., they are not placed to be read left-to-right nor top-to-bottom), but the phrase can be read following their links.

Now, you are challenged to modify this concept map to form the new sentence

"the future will be built"

You are allowed to eliminate and modify any words in the diagram, and to create new words with the material provided. The final concept map must not have words not included on the requested phrase.
 

MEDIA: For answering this question you can only use the post-it notes, scotch tape, threads and color markers provided.

Last Modified on December 1997