CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

1. Assignment 1

Lecture 8 - Interactive Components

Computer (presentation) --> User (interpretation)
User (action) --> Computer (execution)

Dialogue

• Single thread of conversation
• Explicit turn-taking
• Implements a set of conventions
  • conversations
  • interfaces, e.g. a button

Button

1. Move mouse over button
2. Press button
3. Move mouse while button is pressed
4. Release mouse button

Dialogue conventions

1. Prompt
   • system is ready for input
   • control passed to user
   • what kind of input: conventions
     • special tracker icons
     • not ready conventions
2. Echo
   • immediate feedback that the system is active
   • conventions
     • change colour
     • change cursor
     • other things like
3. Trigger
   • Passes control to interface
   • Examples
     • Enter
     • OK button in dialogue box
     • Release mouse button when dragging
     • Second click (double click)
4. Acknowledgement
   • Indicates that command has been accepted & is being processed
   • Examples
     • Tracker icon changes
     • Cursor to next line
     • Web page with caterpillar (Windows uses butterfly.)
   • Means `please wait'
5. Response
   • Result of the execution
   • Temporal interfaces: shows part of the system, difference oriented
   • Spatial interfaces: re-presents the system

Designing Interactive Components

What we try to achieve

All of the following are problematic

• Controllability
• Observability
  • Different things look different
  • Similar things look similar
• Consistency
  • enables learning transfer
  • consistency of appearance
  • consistency of action
• Freedom from modes
  • User can do anything anywhere

How we try to achieve it: UI toolkit

A collection of components that are assembled into an interface.

Apple, for example, controlled the look-and-feel of third party applications by providing a UI toolkit.

• Strongly encouraged developers to use it
• Lots of other things along the same line
  • books
  • sample code
  • Macintosh University

UI toolkits

Important properties of a UI toolkit

• Complete
• Consistent
• Customizable

Completeness

Types of components

1. Containers
   • hold other components, including other containers
   • usually have a layout policy
2. Canvases
   • hold uneditable pictures and text
3. Selectors
   • choose one of many
   • selection aspect
   • `now' aspect
4. Changers
   • change a value
5. Text editors
   • enter & edit text

Anatomy of a file chooser

• container
• text editor
• selector
• buttons

Anatomy of a button

• container
• selector
• canvas

Macintosh Seven

Return to:

• CS349 - Spring 2010 - Lecture schedule
• CS349 - Spring 2010
• CS349 page
• Bill Cowan's home page.