Design
Session Interface 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, harmonics, position, 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...