5. USER INTERFACE

5.1 The Criteria

Moving from bianca's system architecture, we now examine bianca's user interface. In order to encourage user participation within bianca, a user interface was needed that would integrate the user into the activities of the site. The interface would have to allow the user to more than just interact with the computer. The interface needed to be transparent and remove itself from the user's concern so as to maximally allow the user to interact with the site and the other users of the site. It had to wholly engage the user and fully support the metaphor of a house, allowing the user to forget they were using a computer to interact with other people around the world.

When designing the overall look and feel of bianca, four criteria were used for evaluation of possible interfaces: the speed of a typical user's connection to the Internet, maximal use of screen real-estate, design criteria as defined by Donald Norman, and maintaining an overall virtuality. The pages of the bianca site are designed with a 14.4 Kbaud laptop user new to the Internet in mind. All pages have a consistent, compact, simple, and easy to use and understand layout. Most pages rely heavily on text for content and navigation and when graphics are used, they are small, one bit, black and white images.

5.2 Virtuality

As discussed earlier, bianca has a unifying overall virtuality of a house. Theodore Nelson describes the virtuality of a thing as "what it seems to be, rather than its reality, the technical or physical underpinnings on which it rests. Virtuality has two aspects: conceptual structure - the ideas of the thing - and feel - its qualitative and sensory particulars. In a movie, the conceptual structure consists of the plot and the characters, and the feel consists of atmosphere, suspense, and style" (Nelson, 1993). In bianca, the conceptual structure consists of the map and the layout it enforces on the site, and the feel consists of the loving asteticts, do it yourself attitude, and rough on the edges appearance. As presented to the user, the bianca site is a simple shack in the wilderness of the Web. The complex and sophisticated software holding the site together is beautifully masked by the employed house metaphor and the strictness with which all aspects of the site fit into that metaphor. Everything in the site in one way or another acts to support the site's overall virtuality.

5.3 Access Speed

As more and more users connect to the Internet from their homes with 14.4 or 28.8 Kbaud modems, the overall bandwidth with which people connect at is dropping. Because most users of the bianca site access through a 14.4 Kbaud modem, it was decided to sacrifice pretty graphic design for speed of delivery. Though a picture is worth a thousand words, on the Web its also worth a thousand bytes. When downloading over a 14.4 Kbaud modem, every byte counts. A page heavy with graphics can take up to 5 to 10 minutes to download. In a virtual community where quick response is critical to a user's experience, time is far more valuable than pretty graphics. Therefore, every graphic, design, and page layout on bianca is designed with the 14.4 Kbaud modem user in mind. All the graphics on the bianca site are small, one bit, black and white, thumbnail icons, except for the home page and the map page which contain slightly larger images. Graphics in the site are only used where necessary to add minimal environmental presence to the page. bianca also makes intelligent use of text and HTML tags for standard appearance, navigation, and content, all of which contribute to the site's overall virtuality. With such a heavy reliance on text and so few graphics, it is rare that a bianca page is ever larger than 25 Kbytes.

5.4 Screen Real-Estate

Another important factor involved in the interface of the site is an intelligent use of screen real-estate. As most users accessing the site have smaller 15 or 17 inch monitors, it was decided to fit as much information in the top of the screen as possible. This would greatly reduce the need to scroll down the page, a time consuming and disorienting process. We wanted to make accessible and useful the full range of capabilities available in each room without having to scroll down the page. We were interested in providing users with five pieces of information upon entering a room: the name of the room, navigation control, a count of users in the room, the last heard conversation, and a small graphic to enhance a room's character. In order to display the pertinent information and links without requiring users to scroll, it was necessary to use HTML 2.0 tables to effectively use all available screen real-estate. Navigation information, user count and the last heard conversation are displayed in the upper left of the screen and the room's name and icon are displayed in the upper right of the screen. This layout allows users to see all five pieces of critical room information without the need to scroll down and displays a good portion of the room's content as well. Figure 2 shows the layout of the kitchen, which is typical of the layout of all bianca's rooms.

5.5 Navigation

A major problem facing hypertext based systems is that of managing complexity and how not to overwhelm a user with large amounts of information (Gygi, 1990). In conventional documents, information is inherently presented linearly and authors spend considerable time organizing it in a cohesive manner and flow so as not to confuse the reader. Hypertext documents have no such linearity and allow users to branch off on many tangents by establishing multidimensional links among related items, thus creating potentially large dataspaces. With such a dynamic extensible media a high cognitive load is imposed on users as more effort and concentration is needed to maintain a mental image of the hypertext structure (Gygi, 1990).

Without cognitive control structures users can develop cognitive entropy: users may forget what they were doing, and may become confused as to how they arrived at where they are and what links they did or didn't follow (Pea, 1988). A major problem facing users of a large complex system is disorientation and a tendency to get lost in the dataspace. "It is particularly difficult to keep the user's model of the dataspace simple in a network-based navigational system" (Gygi, 1990). In complex dataspaces, users need a sense of the entire domain as they traverse within it. Unfortunately, there is no natural topology for dataspaces (Conklin, 1987).

In an effort to prevent disorientation and ease the cognitive load of users as they navigate through the bianca site, two navigational systems are employed: textual navigation links and navigational maps. The maps are the heart of the navigational system. Every page in the site contains a navigational map in the upper left hand corner of the page which serves to notify the user where they are at the moment and gives the user a sense of orientation within the context of the entire site. A small red dot on the map in the room the user is in orients the user as to where they are. Wherever the user is in the room, whatever depth in a room's level of information a user is, the user always knows where they are and where they can go. Besides the navigational map, textual navigation links are also provided at the top of every page. The links are readily apparent, and provide links to the home page, the map page, and the reference index for quick navigation to any room or room item in the site.

5.6 Norman Design

According to Donald Norman, design should:

· Make it easy to determine what actions are possible at any moment.

· Make things visible, including the conceptual model of the system, the alternative actions, and the results of actions.

· Make it easy to evaluate the current state of the system.

· Follow natural mappings between intentions and the required actions; between actions and the resulting effect; and between the information that is visible and the interpretation of the system state.

In other words, good design should make sure that "1) the user can figure out what to do, and 2) the user can tell what is going on" (Norman, 1988).

The interface design of bianca's rooms were designed with Norman's criteria in mind. At any given moment, a user of the bianca site can figure out what to do and can tell what is going on. When entering a room a user is presented with pertinent information about the room and can either join the chat area, explore one of the room's items or discussion areas, or click to another room. All possible actions and alternative actions are visible. The conceptual model is also visible. In all rooms, a user is presented with the navigation map of the site indicating what room they are in. The results of every action is immediate and apparent. When a user clicks on a link, the page is refreshed with new content.

The chat areas at bianca also reflect Norman's design criteria. It is easy to determine what actions are possible at any moment. A user can either participate in the conversations or link to specific areas of the site. The user's action is constrained by the interface. The left side of the chat area contains a list of links the user can take. The right side of the screen contains the chat form and all the possible actions a user can take while chatting. Figure 3 shows the top of a typical chat area.

While engaging in chat, a user can either post a message, view new messages, clear the form, or configure their chat environment. All possible actions are visible to the user. Every action by the user results in a feedback action by the system. However, evaluating the current state of the system may be difficult at times. Because of net lag, a post may take longer than the user thinks it should, and at that moment, the status of the system is unknown. The user is left wondering if their post was accepted by the system or not. However, when the user reloads the page, they are presented with the current state of the system, making an evaluation of the system as easy as observing the information on the screen.

Norman states that good design is also one in which the user can operate without instructions and has a good conceptual model of the system (Norman, 1988). All actions should be consistent with the conceptual model, and "the visible parts of the device should reflect the current status of the device in a way consistent with that model" (Norman, 1988). The conceptual model of bianca is that of a house. All possible actions within the site are consistent with the house model. A user can 'walk' from room to room in the site just as they can in a real life house. A user can chat with other users in the site just as they can in a real life house. When a user enters a room in bianca, all visible parts of the page reflect the current status of the room in a way constant with that of a house. A user can 'see' how many people are in a room and 'hear' the last conversation in the room when they enter, just as they can in a real life house. All actions the user can take are visible, clearly defined and intelligently labeled, making it possible to operate within the site without the need for help or instruction.

Norman also states that a good design will exploit natural mappings. A user should be able to determine the relationships:

· between intentions and possible actions.

· between actions and their effects on the systems.

· between actual system state and what is perceivable by sight, sound or feel

· between the perceived system state and the needs, intentions, and expectations of the user.

Natural mappings are particularly exploited in the chat areas of bianca. The possible actions a user can take are clearly defined and well labeled. The relationship between intentions, possible actions, and the effect of those actions on the system are readily apparent. If a user wants to post a message, they simply click the button labeled "Post Message". The action of pressing the "Post Message" button does exactly what the button states: it cause the system to post the message. Norman states "that the spatial relationship between the positioning of controls and the system or objects upon which they operate should be as direct as possible, with the controls either on the objects themselves or arranged to have an analogical relationship to them" (Norman, 1988). In the case of bianca's chat rooms, the controls are positioned to be easily usable, and are clearly labeled for the actions they result in. If a user wants to view new messages, they need only click the "Show New Messages" link. It should be pointed out that the two form buttons are separated by links, so as to clearly distinguish all four actions from each other. With this layout, the user will not accidentally press the "Clear Form" button instead of the "Post Message" button because they were positioned next to each other. Instead, the two types of controls, buttons and links, are separated by alternating the types. A button is next to a link, which is in turn next to a button.

Though bianca's user interface is the least evolutionary aspect of the site, it is still based on solid user centered design foundations. By incorporating the findings of previous user interface research and taking into account user short comings such as slow access speed and smaller display screens, bianca's user interface serves the need of it's community.

[ Next: Computer-Mediated Communication  |  Table of Contents ]