Beautification

While explaining each type of change, the experimenter also demonstrated how the change could be made in Inkit with pen-input, on the tablet PC (see Table 1 in Appendix 05 for the demonstration details). Although passively shown already in the previous steps, the participant was informed explicitly on the three ‘modes’ in Inkit (see Table 2 in Appendix 05), and how to change modes (i.e. by tapping on the icon associated to the mode, and an exclusively highlighted icon meant that desired mode has been successfully selected).

The next five to ten minutes was the guided familiarization process in which participants were able to get familiar with Inkit. At the end of the period, participants showed that they could draw (add and annotate), erase (delete), select and move (relocation), and select and resize (resize), and hence, changing modes (drawing, erasing and selecting). The instruction sheet (described in section 2.5.1 below) containing the requirements and the scenario for the first condition was then presented. Instructions were read out-loud by the experimenter and subjects were to ask questions if they were unclear (see Appendix F for each set of requirements and scenario associated with each design).

Before starting the experiment, participants were explicitly told to stay within the application and to use only the three functionalities (draw, erase, select) at all times. The designs were then presented successively to the participant depending on the randomly selected order of conditions for the particular participant (refer to Figure 1). The five designs presented (one design in each condition) are described below in section 2.5.2.

The first form design was presented either on paper or the tablet PC according to the condition order. Each subject was given 11 minutes in each condition – 1 minute for reading the instructions and 10 minutes for working on the design. At the end of eleven minutes, the participant was asked to stop making changes or to finish off any changes they were making. One extra minute was given if the participant had asked for more time. When the changed design file was saved to the participant’s unique folder, the next design was presented (again, either on paper or the tablet PC according to the condition order) together with its associated instruction sheets.

With the design presented on paper, the participant was given a sheet of blank A4 paper, along with the design and the instruction sheets which also contained the requirements and the scenario. The participant was instructed to make changes on the original design using the blue ball-point pen given, and to use the blank paper if more space was needed. With designs presented on the tablet PC in Inkit, the participant used the specialized pen for the tablet PC to draw directly on the tablet screen (with immediate input feedback – i.e. what you draw is what you see) as if drawing on a piece of paper.

While the participant was working on the design, the experimenter monitored the process on the display panel output on the other side of the room, and recorded (on paper) any observations such as design behaviors, usability issues, timing issues such as over-time or under-time etc that were of interest. This information was also recorded on the tablet PC using Morae Recorder (2000), as described in section 2.4.3.

When the last condition has ended, the participant was asked to fill in the anonymous paper-and-pencil questionnaire (refer to Appendix B) and to notify the experimenter when page 3 in the questionnaire was reached so that the experimenter could show him/her the five designs that they had worked on (in their order of presentation) to facilitate answering of subsequent questions.

2.4.1. Room Setup

Each experiment session involved only one subject which took place in a quiet room in the Department of Computer Science building, at the University of Auckland. The room was set up so that neither the subject nor the experimenter could see each other during each experiment condition (see Figure 4) to minimize effects of observation.
2.4.2. The Tablet PC

The experiment was conducted using a Toshiba Tablet PC (Edition 2005, Intel® Pentium® M, 1600MHz, 590MHz, 512RAM, Microsoft Windows XP Operating system). The stimuli were presented on a 15” CRT colour (LCD) screen on the Tablet PC with 1280 X 1024 pixel resolution. Colour quality was set to the highest at 32 bits and brightness level was set to the maximum to ensure clarity and recordability. Screensaver was turned off. There was no glare or reflections on the screen since there were no bright lights in subjects’ visual field. Although there was a window near the workstation, the Venetian blind with half closed slits were pulled down throughout the experiment to filter out direct sunlight.

Figure 4: A bird-eye view of the room set-up for the experiment sessions where the experimenter (separated from the participant by the dividing wall) was able to view the exact screen display that the participant was seeing and working on.

Morae Recorder (2004) on the Tablet PC was used to record and save all actions performed by the participant on the computer including input from the mouse, pen and/or keyboard, visible on the screen.

The computer program that was used in the study is called Inkit – an informal design tool developed by the Human Computer Interaction Group in the Computer Science Department at Auckland University (see Chung, Mirica, & Plimmer, 2005; Tang, 2005; Young, 2005; for more detailed descriptions of Inkit, its architecture and codes). Since the study was exploratory in nature, despite that Inkit was, at the time of the study, still at the development and testing stage for more complex features (other than stable basic computer functions such as save, open, copy, paste, drag and drop, resize etc), Inkit served as a useful tool for the main purpose of the study. And thus, beautification functionalities required in informal sketch-based tools based on previous research on beautification techniques (e.g. Chung, Mirica, & Plimmer, 2005; Damm & Hansen, 2002; Plimmer & Grundy, 2005; Pomm & Werlen, 2004; Sezgin, Stahovich, & Davis, 2001; Wang, Sun & Plimmer, 2005), were explored and implemented with codes written in C#, using Inkit (March, 2006) as the fundamental building block. During beautification, objects (drawn ‘shapes’) are first recognized by ‘recognition engine’ to identify what type of ‘things’ they are – for example, in terms of user interface, shapes could be recognized as textboxes, labels, dropdown menus, radio buttons, buttons etc. A blue rectangle that wraps tightly around the object would then appear, and beautification occurs at this point by manually selecting (and combining) beautification functions listed on the menu: 1) Horizontal Alignment; 2) Vertical alignment; 3) Standardization; and 4) Line smoothing at 33%, 50%, 66%, and 100% (some codes available upon request).

The horizontal alignment function aligns objects by first, categorizing which horizontal group each object belongs to, then calculating the average bottom point of each horizontal group according to bottom point of the objects’ surrounding rectangle within the same group, and finally moving the objects to its aligned positions. So at the end, objects belonging to the same horizontal group would sit on the same point on the y-axis, with its original points on the x-axis retained. See Figure 5 below for an illustration of horizontal alignment.

Figure 5. Horizontal alignment of elements: (A) the original hand drawn elements; (B) the blue rectangle that wraps tightly around each object indicate that each object has been recognized as an user interface (UI) element; (C) the elements are aligned horizontally when the “horizontal alignment” button is clicked – the bottom point of the blue rectangle is aligned to the same point on the y-axis.

The same goes to the vertical alignment function but with the reversed concept – each object is categorized into its vertical group, then the average left point of each vertical group according to the left point of the objects’ surrounding rectangle within the same group, and objects were moved to its aligned positions. So at the end, objects that belong to the same vertical group would be aligned to the left on the same point on x-axis, with its original points on the y-axis retained. See Figure 6 below for an illustration of vertical alignment.