interface design session 11 lbsc 790 / infm 718b building the human-computer interface
TRANSCRIPT
![Page 1: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/1.jpg)
Interface Design
Session 11
LBSC 790 / INFM 718B
Building the Human-Computer Interface
![Page 2: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/2.jpg)
Agenda
• Questions
• Graphical interface design
• Auditory interface design
• Audio in Java
• Project updates
![Page 3: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/3.jpg)
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
![Page 4: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/4.jpg)
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
![Page 5: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/5.jpg)
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
![Page 6: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/6.jpg)
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!)
![Page 7: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/7.jpg)
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?
![Page 8: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/8.jpg)
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
![Page 9: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/9.jpg)
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
![Page 10: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/10.jpg)
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.
![Page 11: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/11.jpg)
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/
![Page 12: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/12.jpg)
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
![Page 13: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/13.jpg)
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
![Page 14: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/14.jpg)
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
![Page 15: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/15.jpg)
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/
![Page 16: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/16.jpg)
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/
![Page 17: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/17.jpg)
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();
![Page 18: Interface Design Session 11 LBSC 790 / INFM 718B Building the Human-Computer Interface](https://reader035.vdocuments.us/reader035/viewer/2022072016/56649efc5503460f94c0f808/html5/thumbnails/18.jpg)
Putting It All Together
• http://www.philipglass.com/