Interface Design
Session 11
LBSC 790 / INFM 718B
Building the Human-Computer Interface
Agenda
•	Questions

•	Graphical interface design

•	Auditory interface design

•	Audio in Java

•	Project updates
Layout
•	Group things meaningfully
–	Design in a natural task-oriented flow
–	Use the corners
•	Leverage consistency
–	Similar things should look similar
–	Different things should look different
•	Encourage exploration
–	Make it obvious which way to go
–	Avoid hidden functions
•	Strive for simplicity
–	Use hierarchies judiciously to limit complexity
Color
•	Design for monochrome displays
–	Provides assured access for color blind users

•	Add muted colors where they help
–	Useful for rapid recognition of categories
–	Limit to 4 colors per screen (7 per application)

•	Pay attention to readability
–	“Similar” colors look different on another display
–	Different systems may have different defaults
Size
•	Don’t make icons too small
–	Fitts’ Law: Time = f(distance, size)

•	Size can be used to illustrate quantity
–	Scale size coding by at least 1.5

•	No more than 4 font sizes
Animation
•	Drill down
–	Mouseover tool tips, menu expansion
•	Illustration
–	Change over time, icon behavior (on mouseover)
•	Display space reuse
–	Ticker tape, slide show
•	Visible transitions 
•	3-D visualization
–	E-archivarius demo
•	Attention management (once!)
Graphical Design Critique
•	Select any 3 GUI’s you know and can use here
–	e.g., Windows XP, Google, USMAI catalog

•	Work in in groups of 3 to critique each
–	Using IBM design guidelines 
•	http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/6
–	What are the 3 best features of each?
–	What are the 3 principal weaknesses of each?
Aural Perception
•	We respond to sounds without prior focus
–	Lack of focus limits simultaneous stimuli

•	Absolute amplitude & pitch hard to interpret
–	But changes stand out clearly

•	Stereo effect provides a sense of direction
–	Relative amplitude, phase difference
Auditory Display
•	Nonspeech audio output for user interfaces
•	Same objectives as graphical output:
–	Alert the user to exceptional conditions
–	Provide ubiquitous feedback
–	Present information
•	But different characteristics
–	Effective even without focus
–	Fairly low resolution
Auditory Display Design
•	Need a metaphor
–	Clock ticking, alarm bells, keyboard clicks, etc.
•	Channel is easily overloaded
–	Focus helps manage cognative load
•	Changes are more useful than values
–	Pitch, amplitude, position, harmonics, etc.
An Auditory Image Display
•	Display 2-D images using only sound
–	Sweep from left to right every second
•	Audible pause and click between sweeps
–	Top pixels are high frequency, bottom are low
•	Blind users can detect objects and motion
–	Time indicates horizontal position
–	Pitch indicates vertical position
–	Sweep-to-sweep differences indicate motion
Encoding Audio
•	Number of channels
–	1 for mono, 2 for stereo [typically interleaved]

•	Samples per second [per channel]
–	44,100 for CD; 8,000 for (wireline) telephones

•	Bits per sample and quantization technique
–	16-bit linear (“pcm”) [signed or unsigned] for music
•	In normal or swapped (“little-endian”) byte order
–	8-bit logarithmic (“mu-law”) for speech

•	Header format
Common Audio File Types
•	Audio files are headers followed by data
–	File type specified data format
•	.au (Unix)
–	Big-endian, often 8-but mu-law
•	.wav (Microsoft) 
–	Little-endian, often 16-bit pcm
•	.aiff (Apple)
–	Big-endian, less often used
•	.raw (headerless)
–	Requires the user to configure parameters
Playing Audio in an Applet
•	All applets have an AudioClip class
–	Handles only one format (8-bit mu-law mono .au)

•	import java.applet.*

•	Obtain the audio file from the server
clip= getAudioClip(getDocumentBase(), fileName)

•	Play the clip
–	clip.play() plays it once
–	clip.loop() repeats until clip.stop() is invoked
Playing Audio with Java Sound
•	Import javax.sound.sampled.*
•	Open the file (must be .au, .wav or .aiff)
audio = AudioSystem.getAudioStream(fileName);
•	Determine the encoding
format = audio.getFormat();
•	Set up audio output for that format
line = AudioSystem.getLine(format); [roughly…]
•	Copy bytes from the file to the audio output
•	Examples are available
–	http://java.sun.com/products/java-media/sound/
Audio in the Java Media Framework
•	Additional file types
–	.avi, .mpg, .mp3, .mov 
•	Includes support for streaming audio
–	RealPlayer SDK includes JMF Classes
•	Allows synchronization with other media
–	Video and MIDI music
•	Requires a separate download
–	http://java.sun.com/products/java-media/jmf/
Playing Audio using JMF
•	import javax.media.bean.playerbean.*;

•	Create the media player bean
MediaPlayer mp=new MediaPlayer();

•	Load a file
mp.setMediaLocation(“file:///C:/temp/test.mp3) 

•	Play the file
–	mp.start();
–	mp.stop();
Putting It All Together
•	http://www.philipglass.com/