3.6 Concrete User Interface Design
A concrete user interface design is a detailed description or specification of the appearance and interactivity of the user interface to an interactive system, including the core object representations and the system behavior at the user interface. Concrete user interface design is the activity of producing such a description or specification.
Inputs to concrete user interface design include:
User profiles
Scenarios
Task models
Sequence diagrams, if they are used
The core model
The view model: static and dynamic
Interaction style and implementation technology choices
Outputs include:
Window, dialog box, and alert layouts; interaction techniques used in these layouts; and the resultant system actions during and after use of the interaction techniques
Core object representations, interaction with core object representations including any selection and dynamic feedback
Menu and palette layouts, system actions on menu item and button choices, shortcuts, and undo facilities
Hopefully the outputs also include:
Help facilities
User documentation
Training aids
These outputs may be represented using
Text and diagrams
Sketches and storyboards
Interaction sequences
Tool-generated layouts
Prototypes
An aspect of the outputs is to show how user interactions affect the state of the core and view models. Interaction sequences, which are defined and discussed in the next section, allow designers, if they so desire, to tie prototypical user interactions to changes in model state.
3.6.1 Interaction Sequences
Interaction sequences show graphical depictions of prototypical interactions that are representative of user interactions and associated system responses. Thus while an interaction sequence might depict a user drawing a line of a particular length and direction, the interaction sequence is interpreted as depicting all line drawing situations. Interaction sequences can be used in three kinds of situations:
Interaction sequences may be used early in and throughout the design cycle for many visualization and design purposes, often quite informally, and almost certainly without the use of pre- and post-conditions (discussed below in this section). Interaction sequences are both expressive and easy to use for visualization and design; on a whiteboard they provide a fluid medium for redesign.
Interaction sequences may be used to specify interactions where the pre- and/or post-conditions are important for design and/or subsequent development purposes.
Interaction sequences may be used to document and specify concrete user interface design details, particularly for detailed specification where cursor changes, cursor movement, alignment, and dynamic feedback are important.
An interaction sequence is composed of screen shots or sketches of screens or fragments thereof, interspersed with renditions of user interactions that may vary in scale from a simple button depression to more complex interactions such as the use of a menu or dialog box. An interaction sequence may optionally include a pre-condition that characterizes conditions that are required to undertake the interaction, and may optionally include a post-condition that specifies what will be true after the interaction is completed. Pre- and post-conditions can be expressed using different levels of formality. Natural language is sufficient for most interactive system and user interface design purposes, and the Object Constraint Language (OCL) [Walmer and Kleppe 1999] can be used if precision is required. The pre- and post-conditions are expressed in terms of core and/or static view model states. In post conditions it may be useful to adopt the convention that overlines are used to refer to system state before the interaction, and non-overlined state information refers to systems state after the interaction. An example interaction sequence that belies the ease of informal use of interaction sequences appears in Figure 3.24. In fact the example illustrates use of the notation at a formal extreme, more suited for detailed specification, rather than design, purposes.
){kind=link}
Figure 3.24 Examples of interaction sequences. Normally, these interaction sequences would be used with natural-language pre- and post-conditions. The detail shown here illustrates the level of fine-grainedness that can be achieved if the system description demands it, and the way in which a formal link can be made to core and static view model states. From [van Harmelen 1994].
Although interaction sequences are useful for the three purposes outlined above, it would be counterproductive to attempt to use interaction techniques to describe all interaction with a medium or large sized development; if only because working out which interaction sequences are applicable at a given point in time requires evaluation of all pre-conditions. In such cases designers should consider sketches, storyboards, and prototypes to convey design information, and selectively limit their use of interaction sequences to interesting, complex, or otherwise important aspects of interaction.
Interaction sequences draw on unpublished user interaction and screen depictions used by Stephanie Wilson and myself in the period 1984 to 1986. Pre- and post-conditions were added later by myself circa 1991.
3.6.2 Prototypes
Lo-fi prototypes were not used in this study, although they could, and indeed, should have been used at various stages from soon after the inception through the concrete user interface design stage.
A small number of medium-fidelity prototypes were tested by prospective users. The prototypes provided partial functionality along a scenario path of initiating and terminating a conversation. Two screen shots from one version appear in Figure 3.25. Users were introduced to the task, to communicate with other users, and were asked to use the prototype to initiate a conversation, to imagine a typed conversation with other users, and to leave the conversation. The users were asked to verbalize briefly their reactions to or feelings toward the system as they used it, and to mention if things were hard or easy to do. Sometimes the users were prompted in a non-directed fashion to express their feelings toward and reactions to things that they had noted as being easy or hard, as well as the reasons why they thought those things were easy or hard.
){kind=link}
User feedback on the prototypes ranged from comments about functionality (for example, "It would help if I knew who's online when I'm using this") to questions and comments about the context of use of the system (for example, "Is this for business or personal use or what? If it's for...").
Figure 3.25 Initiating and terminating a conversation