Alan Dix's short courses and tutorials

Prototyping User Interfaces in HyperCard

Alan Dix and Devina Ramduny

First delivered at HCI'95, Huddersfield, 29th August 1995

You can download
  the complete tutorial notes (PDF).
  the complete set of HyperCard stacks as Macintish binhex-ed self extracting archive (98k)

Main topics


HyperCard can be used to quickly generate different functioning and presentable user interfaces. This tutorial will demonstrate the range of prototypes which can be built using HyperCard and also expose its limitations. It will also discuss the circumstances in which different styles of prototype are appropriate. Although the emphasis will be on HyperCard as a prototyping tool, it can also be used to generate the interface for fully functional systems, and the latter half of the tutorial will cover issues which are applicable to both.

The tutorial starts with an introduction to prototyping, why you may want to use it and the different sorts of prototyping that can be used. the tutorial will then move through various types of prototypes with examples of how to do it in HyperCard and discussion of alternative platforms. The first kind of protoype considered and the simplest is storyboards, using simple graphics to mockup a single path through an application We will then consider the use of more sophisticated navigation methods to prototype the entire dialogue structure. Towards the end of the tutorial we will see how adding simple and more complicated) scripts can allow the prototyping of much of the functionality of an application and even achieve direct manipulation effects.

The tutorial is for anyone who wants to demonstrate interface ideas rapidly: whether commercial developers or researchers. No prior programming skill is assumed, but tutees will be introduced to aspects of HyperTalk, the HyperCard scripting language.

HyperCard stacks will be available demonstrating various aspects of the tutorial also HyperCard shells for developing some types of protoype.

Tutorial Notes

You can download the complete notes in Adobe PDF format.

Table of Contents

Lecture Materials
What, why and who
Tools for prototyping
Low tech prototyping
Using HyperCard
Simple storyboard shell
  Dialogue sequence
Building a HyperCard dialogue
Example drawing tool
  Getting more from dialogue
A dialogue simulator
Extracting dialogue
  Adding functionality
Information systems
  Direct manipulation
Windows, icons and menus
  Comparing tools
Further information Alan Dix 5/9/98