Supporting the User Interface Design Process with Hypertext Functionality

V. Balasubramanian
E-Papyrus, Inc.
Edison, NJ 08817, USA., and
Graduate School of Management
Rutgers University, Newark, NJ 07102, USA.

Murray Turoff
Department of Computer and Information Science
New Jersey Institute of Technology
Newark, NJ 07102, USA.


The user interface design process can be divided primarily into three phases: planning and idea generation, prototyping and design, and evaluation. While a number of guidelines, techniques and tools exist for the actual prototyping, design and evaluation of interfaces, there is no methodology for the creative phases of planning and idea generation. We have arrived at a user interface design methodology that contains of a set of fifteen non-sequential, but highly connected web of design tasks to support the creative phases of interface design. We are also in the process of developing a tool, incorporating hypertext functionality, to facilitate application of this methodology to interface design. We report how hypertext functionality can encourage flexibility during the design process compared to other recipe-based or guidelines-based design approaches.


We define the user interface design process as the total set of design tasks to be carried out to transform a users requirements into a user interface design specification. While researchers have reported on methodologies to engineer the software design and development process in general (Humphrey, 1989; Jacobson and Jacobson, 1995), very little work has been done in developing a comprehensive methodology to support the user interface design process. User interface design can be divided into three main phases: planning and idea generation, prototyping and design, and evaluation. A number of design guidelines and tools exist for prototyping and design. Similarly, a number of user interface evaluation techniques have evolved over the past two decades. However, very few design techniques or tools exist to support the creative phases of planning and idea generation. We believe that guidelines-based design approaches do not support creativity and flexibility required during interface design. User interface design requires a judicious mixture of creativity, design knowledge and experience, task analysis and a thorough understanding of users requirements. Most interface design guidelines are recipes on how to make the user interface more usable. Most design tools such as User Interface Management Systems (UIMS) focus on assisting the developer to prototype and construct the actual interface objects. They do not actually guide the designer through the design process. They do not provide design cues as to how to go about carrying out the design. They also do not facilitate capturing details of the design and the rationale behind the design.

As part of our research efforts in this area, we have arrived at a design methodology containing fifteen non-sequential and highly interconnected set of design tasks. These interconnected set of tasks form a hypertext network. We are also in the process of developing a tool to support this design methodology. The methodology we have proposed along with the tool will support the interface planning phase by suggesting design tasks to be carried out. Being a creative process, user interface design cannot be sequential. Hence, our design approach provides flexibility by allowing the designer to carry out various design tasks in any order. At the same time, the tool will ensure that all the required tasks are completed and that the rationale is captured. The tool will incorporate hypertext functionality to enable non-sequential processing of design tasks and to increase flexibility since hypertext supports non-sequential problem-solving, backtracking, relationship management, and annotations (Bieber, 1993).

Overview of Methodology

Based on our experiences design interfaces for interactive systems, we have arrived at a design methodology consisting of the following fifteen design tasks (Balasubramanian and Turoff, 1995):

Figure 1. Hypertext network of user interface design tasks

This approach has also been successfully used to teach students and software professionals the process of designing an interface (Turoff and Hiltz, 1995). We believe that, in addition to usability considerations, the above set of design tasks provides a comprehensive approach to designing self-evident user interfaces for interactive systems. The above set of tasks are highly interconnected forming a hypertext network as shown in Figure 1. Since interface design is a creative process, the above does not imply any particular order by which the designer should carry out these tasks. The order is not as important as the completion of the process. While existing interface design guidelines imply that interface design is a straightforward and recipe following process, our approach is based on the fact that interface design consists of a complex set of non-sequential and iterative tasks for which we need automated support. We believe that this model of the design process can become a communication template between users and designers. By adopting this task-based approach, a designer can ensure that he or she has put together a complete interface design specification. Unlike other attempts to put guidelines online, what we are proposing here is a more specific tool designed to support the planning and idea generation phase of interface design.

Hypertext Functionality

Each of the fifteen design tasks can be treated as process nodes. Each of the process nodes receives a set of inputs and transformations are carried out on them to produce a set of outputs. The intermediate outputs form parts of the overall design artifact. The combination of design tasks, inputs, and outputs together form a hypertext network. Arrows represent data flows and relationships between tasks. A broad set of goals for an interactive system are input into these set of design tasks emerging as a "User Interface Design Document" at the completion of the tasks. Hypertext functionality enables non-linear interaction and backtracking through the various tasks. While the hypertext network supports various ways of solving the design problem (and hence encourages creativity and flexibility), the task-based approach helps impose structure on the creative process.

The interface design tasks and the relationships between them have been mapped to the general semantic framework for hypertext functionality proposed by Rao and Turoff (1990). The framework proposes that all hypertext networks can generally be classified to contain six different types of nodes and twelve different types of links as shown in Figure 2. The individual tasks themselves can be classified as nodes of specific types while the numerous pathways between them can be treated as links of specific types. For example, the node type makes it explicit to the designer whether a task is atomic or composite. In Figure 1, the task "Identify Objects" is a collection node (C) with a number of sub-tasks or activities within it. The link type specifies the nature of relationship between any two tasks. For example, "Identify Objects" task is linked to "Identify lateral linkages or relationships" by a path link (P). This means it is preferred that the latter task be carried out immediately after the former task to maintain continuity and context. Note that it is only "preferred" and not "mandatory." Other node types used found in the network include detail node (D), association link (A), branch link (B), membership link (M), lateral link (L), specification link (S). Some of the links labeled "?" have not yet been typed. Each of these design tasks, in turn, can be further decomposed internally into sub-networks. Also, each of the design tasks is associated with a rationale component which enables the designer to take notes, make annotations, and capture the rationale behind design decisions. It must be noted that although the labeled arrows are shown uni-directional, they are actually bi-directional, enabling the designer to go back and forth between the linked tasks. Also, it is evident that the set of tasks need not be carried out sequentially.

The tool will provide a history mechanism (both session and global) whereby the designer can maintain an audit-trail of the completion/traversal of various design tasks. This will also support task-based backtracking between the tasks and the intermediate artifacts that are created during the various design tasks. Most commonly repeated tasks will also be provided as hypertext templates easing the burden on the designer. All design tasks will be provided as a set of cue cards and as each task is completed the designer will be prompted with the most appropriately related tasks. The tool, incorporating hypertext functionality, will be designed and implemented using the seven-step Relationship Management Methodology (RMM) (Isakowitz, et al., 1995).

Figure 2. General Semantic Framework for Hypertext Functionality (Rao & Turoff, 1990).


We have proposed a user interface design methodology to support the creative phases of interface design. We believe that a non-recipe based, hypertext approach to design encourages creativity and provides the flexibility required for carrying out interface designs. The methodology and the proposed tool will actively provide the designer with a set of design tasks to be completed as opposed to being a passive online reference for guidelines and other usability principles. While many UIMS assist in the generation of interface components, the designer must know the mechanics of the tools. Instead if more time is focused towards actual pre-design activities and capturing the essentials of design in a formal manner, then an interface generator can be integrated along with the proposed tool to generate interfaces based on higher-order design specifications. The tool will also function as an organizational memory system, specifically geared towards the acquisition, storage, retrieval, and dissemination of interface design specification and rationale in software development projects. The design rationale captured during the design process can be utilized to produce transcripts of the design process along with the user interface design specification.


Balasubramanian, V., and Turoff, M. A Systematic Approach to User Interface Design for Hypertext Systems, Proceedings of the 28th Annual Hawaii International Conference on System Sciences (HICSS `95), Maui, January 1995, Volume III, pages 241-250.

Bieber, M. Providing Information Systems with Full Hypermedia Functionality, Proceedings of the Twenty-Sixth Hawaii International Conference on System Sciences, 1993.

Humphrey, W. S. Managing the Software Process, Addison-Wesley Publishing Company, 1989.

Isakowitz, T., Stohr, E. A., and Balasubramanian, P. RMM: A Methodology for Structured Hypermedia Design, Communications of the ACM, 38(8), August 1995, 34-44.

Jacobson, I., and Jacobson, S. Series of articles on the Software Engineering Process, Object Magazine, January, March, June, and September 1995.

Rao, U., and Turoff, M. Hypertext Functionality: A Theoretical Framework, International Journal of Human-Computer Interaction, 1990.

Turoff, M., and Hiltz, S.R. The Design and Evaluation of Interactive Systems, Book in Progress, 1995.

Back to homepage of Murray Turoff
Back to homepage of Roxanne Hiltz