Beautification

The size (height and width) of each object that belongs to the same object group (for example, textbox, dropdown menu, radio button, and label) would be the closely approximated after standardization. An algorithm for standardization was designed where the sizes of objects in each group are averaged and also calculated by a specific numerical factor for normalization purposes. See Figure 7 for an illustration of standardization of the size of objects.

Smoothing of lines was achieved through designing algorithms that involved identifying all the points on the line, flattening (smoothing) the line by mathematically shifting the points (in terms of x and y coordinates) to a closer approximation to the corresponding point on the line of the mathematically generated object based on the corners. In other words, the smoothing function systematically straightens lines of hand-drawn objects at different levels – 33.3%; 66.6% and 100%. One of the assumptions made, as described below in 2.5.2, was that as the lines look smoother (straighter and more computerized), the diagram will appear more formal. In this study, smoothing was possible for textboxes, dropdown menus and radio buttons. See Figure 8 for an illustration of different levels of smoothing hand-drawn lines objects to represent different levels of formality.

For the lowest level of formality, the experimenter’s ‘normal’ hand writing using pen-input was used (i.e. characters not exactly aligned horizontally and vertically, spacing between characters and words was not exact and each character looked slightly different every time). As for achieving medium-low formality, a new font – the experimenter’s computerized (standardized) handwriting – was created by using My Font Tool for Tablet PC (Lanier, 2004). Handwriting of individual letters from ‘a’ to ‘z’ both in capital and lower case letters, as well as numbers and some common symbols such as comas, full stops, exclamation marks, question marks etc, were recorded through pen-input. Character spacing, word spacing, and line spacing were adjusted, and the final step was to compile the data to create the new standardized handwriting font to be installed on the tablet PC (see Appendix G for some screen shots during font creation). This tool ensured that, when the labels were created, characters were aligned exactly according to the base-line, mid-line and roof-line horizontally and vertically; character spacing and word spacing were exact horizontally and vertically, and each character was standardized so that the same look-and-feel of the character was used. With such mathematical and physical manipulation of font properties, visually, the computerized characters (words) looked more formal than the handwritten characters (words).

Although there has been no direct and conclusive empirical evidence to determine ‘font formality’, much of the research on fonts has been on text/font legibility and readability. For example, Arditi (2004) looked at the effects of customized fonts (varying in size, serifs and san serifs) by forty visually impaired users and found that different individuals produce different distinct fonts that resulted in enhanced legibility. However, no comparisons in legibility were made between the customized fonts and the highly legible standard fonts such as Times New Roman. In other studies, for example Arditi and Cho (2005), font properties were manipulated by the experimenters. In Arditi and Cho’s (2005) experiment, lower-case fonts varying only in serif size (0%, 5%, and 10% cap height) were used, and legibility was accessed using size thresholds and reading speed. It was found that serif fonts were slightly more legible than sans serif, but had no effect on reading speeds (rapid serial visual presentation and continuous reading speed). No difference in legibility was found when typefaces differed only in the presence or absence of serifs. Other studies on the effects of font typography examines cognitive performance such as information recall (Gasser, et al., 2005); visual search and information retrieval in web pages (Ling & van Schaik, 2006); letter recognition (Sanocki, 1998) and classic experiments on reading comprehension (Poulton, 1965). Furthermore, web usability studies on fonts also examined legibility and performance. For example, Bernard, et al. (2001) examined popular online fonts – ornate fonts (e.g. Bradley and Corsiva), sans serif fonts (e.g. Arial, Verdana, Tahoma etc) and serif fonts (e.g. Courier New, Georgia, Times New Roman, etc) – and found, also, no difference in legibility between the font types, however, performance, in terms of reading time, was different. Bernard, et al. also examined perception of various fonts and found that Courier, Commic, Verdana, Georgia, and Times New Roman were perceived as the most legible font types. In addition, aesthetic appeal related to specific font types were also explored, and found that Courier and Time New Roman (serif fonts) were perceived as being the most business-like, whereas Comic (sans serif font) was perceived as being the most fun and youthful. In the field of advertisement, it was suggested that san serifs (non-serif) fonts looked more playful, youthful and fun (also suggested by Bernard, et al. 2001), and have now become more popular in terms of its use in logos for multi-national brands (e.g. fast-food companies) to small businesses (e.g. retail shops).

In addition to the low formality and medium-low formality fonts represented by non-computerized and computerized handwriting on the tablet PC, the fonts to represent medium-high formality and high formality were also determined. With no conclusive evidence on font formality, it was reasoned, therefore, an uncommon, san serif font (in this case, Gulim) was to be used to represent beautified handwriting at medium-high level of formality; and as there were some findings supporting the use of Times New Roman as a common legible typeface compared to san serif fonts, Times New Roman was used for representing fully beautified handwriting at high level formality. See Figure 9 below for an illustration of the four fonts used to represent different levels of formality.

How are you? (Times Roman Numeral)

How are you? (Gulim)

How are you? (Experimenter’s standardized Handwriting)

2.5.1. Instruction Sheets

In each condition, subjects were given a design of an online form to work on and to make any changes to improve the design in terms of functionality and its purpose. In each condition, an instruction sheet containing the requirements and the scenario (see Appendix F for each set of instruction sheets associated with each design) was given before presenting the associated design to the participant. The same format was used for all five instruction sheets: (identical) instructions were printed at the beginning on each instruction sheet, followed by the requirements and scenario associated with the design presented. The purpose of including both the requirements and the scenario for each condition was to help produce a more realistic design situation – requirements collected (Maybew, 2003) and scenarios formed (Rosson & Carroll, 2003) in the early stages of the design process to help shape the final product (although in a laboratory environment). In particular, with respect to the conditions, the requirements helped the participant to identify whether the correct information was being ‘collected’ from the end-user (who would be filling in the HTML form), which in turn, guided the participant to add, delete and relocate elements/items and/or item sets appropriately. The scenario, in addition, points out whether an element was of the appropriate type (change element) and size (resize).
2.5.2. The five designs each representing a different level of formality

There were a total of five equivalent designs, and hence, a total of five conditions. Variables had to be controlled between the five designs to increase validity of results so we are measuring the effects of formality on design decisions. Hence, the designs were made as equivalent as possible, in terms of: 1) the purpose of the forms – requiring users to fill in personal information – hence, common online forms; 2) order of elements in the design (i.e. textboxes, radio buttons, dropdown menus, and labels in the same order in each design); 3) the balance of types of element (i.e. 12 textboxes, 10 radio buttons, 5 dropdown menus and 31 labels in each design), and thus, 4) the number of elements in each design (i.e. total of 58). Within the design, the sizes of elements were also controlled for by having closely approximated physical measurements i.e. textboxes all had an approximate height of 1cm and a width of 8.5cm (and 5 textboxes with half the width) at 100% screen radio; similarly for dropdown menus, with a triangle with a height and width of 50mm on the right hand side within the dropdown menu; all radio buttons had an approximate diameter of 1cm (sizes could not be perfectly exact due to different levels of smoothness/roughness of beautified lines); labels had an approximate height of 1cm, however, the width of labels was uncontrollable as word length and the number of words contained in a label varied. Mathematical standardization of element groups was achieved by applying the standardization function in the beautification menu list. Additionally, all labels were programmed to space 50 pixels apart vertically (on the y-axis) and their associated controls (textbox, dropdown menus and radio buttons) were aligned to the labels horizontally (on the x-axis) at 30 pixels apart.

The beautification variables shown in Table 2 were either controlled (size, spacing) or systematically varied (alignment, smoothness). Alignment and smoothness of hand drawn elements were combined and varied systematically, as described below, to produce different levels of formality.
1) Alignment (vertical and horizontal)

According to perceptual theorist (e.g. Gestalt, Marr, Gibson, Rock), factors such as orientation and grouping of stimuli, affect visual perception of a form. For example, axis-alignment affects perceptual grouping (Boutsen & Humphreys, 1999); the importance of balance of objects as an organizing design principle (Locher, Stappers, & Overbeeke, 1998). Therefore, by varying the extent of alignment, elements of the same type (e.g. textboxes, dropdown menus, radio buttons, and labels) would appear differently grouped and organized. In addition, according to web usability handbooks and guidelines based on Gestalt principles (e.g. Brink, 2002), groups of elements and information should be aligned for grouping purposes and easier comprehension – for example, alignment of textboxes to textboxes; labels to labels; and “submit” buttons at the centre-bottom of the page. If elements are unaligned, information becomes scattered, creating complexity and additional visual features within the design. Brink (2002) such problems will make the display look excessively cluttered and unprofessional - hence, it will affect the appearance of a design (the more formal, the more professional a design appears).

Therefore, an assumption was made that different ratios of alignment would produce different levels of formality of a design. In other words, the more elements aligned the more formal the design will appear. To create different levels of formality in the designs presented to the participants, elements in the design were aligned systematically according to mathematic principles of ratios as shown below in Table 3.
Table 3.

Ratio of elements aligned (and its description) in each design representing a different level of formality.

Formality__Ratio__Alignment_description'>Formality	Ratio	Alignment description
Low formality (paper)	3:0	No elements are aligned exactly
Low formality (tablet PC)	3:0	No elements are aligned exactly
Medium-low formality	3:1	From top to bottom, and from left to right, every third element is aligned to the element at the top that belong to the same group e.g. label to label, textbox to textbox, radio button to radio button, label to label)
Medium-high formality	3:2	From top to bottom, and from left to right, every second element out of three elements are aligned to the element at the top that belong to the same group e.g. label to label, textbox to textbox, radio button to radio button, label)
High formality	3:3	Every element aligned exactly according to its type

Although there has been some studies on beautification of hand-drawn sketches in electronic ink (e.g. Hse & Newton, 2005; Pomm & Werlen, 2004; Ženka & Slavík, 2003), no direct empirical evidence regarding smoothness of lines affecting formality was found. However, from everyday examples, it can be noticed that smoothness of lines can be an important factor that influence the appearance of objects. For example, it is natural to want to see objects such as a black board, a table, walls, with smooth edges (aesthetically pleasing), rather than rough, uneven edges, which may appear to be an unfinished product; in addition, printed text may appear to be more formal than hand written text, which may appear to be unfinished).

Therefore, a rational and valid assumption was made – that a computerized straight line (without bumps) appear more formal than a hand drawn line (with bumps), and hence, that the smoother the line (including lines that make up text), the more formal it will appear. To create different levels of formality in the designs presented to the participants, lines were smoothed systematically, as shown below in Figure 4.

Table 4.

Systematic smoothing applied (% smoothed) to the original hand-drawn lines of textboxes, dropdown menus and radio buttons; and fonts used for labels to represent different levels of formality in the designs presented to the participants.

Formality	Smoothing applied to lines (%)	Fonts representing beautified (smoothed) hand-writing (labels)
Low formality (paper)	0.0	Non-beautified original hand writing on paper
Low formality (tablet PC)	0.0	Non-beautified original hand writing on the tablet PC
Medium-low formality	33.3	Standardized original hand writing on the tablet PC
Medium-high formality	66.6	Gulim
High formality	100.0	Times New Roman

When the two beautification variables described above – alignment and smoothing of lines, were combined and varied systematically, and keeping the other two beautification variables constant (size and spacing), equivalent designs (as described above) that appeared more or less formal were created. In other words, different levels of formality were produced by systematically varying alignment and smoothness of lines, and hence, beautification taxonomy was successfully developed and two beautification variables were tested and validated. Figure 10.1, 10.2, 10.3, 10..4 and 10.5 below shows each design representing a different level of formality, with one low formality design presented on paper, and four designs from low formality to high formality presented on the tablet PC. Each design was presented one after another (according to the order of presentation) to the participants to work on, with the instruction to improve each design by making changes to them.