1. Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface

2. Agenda Questions Graphical interface design Auditory interface design Audio in Java Project updates

3. 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

4. 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

5. 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

6. 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!)

7. 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?

8. 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

9. 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

10. 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.

11. 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/

12. 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

13. 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

14. 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

15. 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/

16. 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/

17. 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();

18. Putting It All Together http://www.philipglass.com/