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

http://www.visualprosthesis.com/

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 serverclip= 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 encodingformat = audio.getFormat();

• Set up audio output for that formatline = 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 beanMediaPlayer mp=new MediaPlayer();

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

• Play the file– mp.start();– mp.stop();

Putting It All Together

• http://www.philipglass.com/