Alan Dix's short courses and tutorials

You can download

  the complete tutorial notes (PDF).

  the complete set of HyperCard stacks as Macintish binhex-ed self extracting archive (98k)

Main topics

• Introduction
• Prototyping
• Storyboards
• Dialogue sequence
• Getting more from dialogue
• Adding more functionality
• Direct manipulation
• Comparing tools

Abstract

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

Abstract

Lecture Materials

  Prototyping

What, why and who

Problems

Tools for prototyping

HyperCard

  Storyboards

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

HyperTalk

  Direct manipulation

Windows, icons and menus

Pointers

  Comparing tools

Further information

---

http://www.hiraeth.com/alan/tutorials/prototyping/

Alan Dix 5/9/98