1
|
- Session 6
- LBSC 790 / INFM 718B
- Building the Human-Computer Interface
|
2
|
- Questions
- Human-Computer Communications
- Graphical User Interfaces
- GUI’s in Java
- Event handling
|
3
|
- Language-based interfaces
- Command line interfaces
- Interactive voice response systems
- Graphical User Interfaces (GUI)
- Virtual Reality (VR)
- Ubiquitous computing
|
4
|
|
5
|
- How the user thinks the machine works
- What actions can be taken?
- What results are expected from an action?
- How should system output be interpreted?
- Mental models exist at many levels
- Hardware/operating system/network
- Application programs
- Information resources
|
6
|
- Visual
- Position/motion, color/contrast, symbols
- Auditory
- Position/motion, tones/colume, speech
- Haptic
- Mechanical, thermal, electrical, kinesthethic
- Olfactory
- Vestibular
|
7
|
- Image
- Fixed view, movable view, projection
- Acoustic
- Headphones, speakers, within-ear monitors
- Tactile
- vibrotactile, pneumatic, piezoelectric
- Force feedback
- Joystick, pen, dexterous handmaster
|
8
|
- Inertial
- Locomotive
- Stationary bicycle, treadmill, ...
- Olfactory
- Chemical (requires resupply)
- Temperature
|
9
|
- Closely spaced dots appear solid
- But irregularities in diagonal lines can stand out
- Any color can be produced from just three
- Red, Blue and Green: “additive” primary colors
- High frame rates produce apparent motion
- 24 fps (16mm film), 30 fps (NTSC video)
- Visual acuity varies markedly across features
- JPEG and MPEG suppress imperceptible features
|
10
|
- Text
- Keyboard
- Optical character recognition
- Speech recognition
- Handwriting recognition
- Direct manipulation
- 2-D: mouse, trackball, touch pad, touch panel
- 3-D: wand, data glove
- Remote sensing
- Camera, speaker ID, head tracker, eye tracker
|
11
|
- Match control actions with on-screen behavior
- Use a cursor for visual feedback if needed
- Rotary devices
- Linear devices
- Touch pad, touch panel, touch screen, joystick
- Rate devices
|
12
|
- Windows
- Icons
- Menus
- Pointing devices
|
13
|
- Direct manipulation
- Point and click, scrolling, sliders, …
- Menus
- Text
- Complete or dynamic queries
|
14
|
- Select a metaphor
- Desktop, CD player, map, …
- Use icons to represent conceptual objects
- Watch out for cultural differences
- Manipulate those objects
- Select (e.g., left click, right click, double click)
- Move (e.g., drag and drop)
|
15
|
- Conserve screen space by hiding functions
- Can hierarchically structured
- By application’s logic
- By convention (e.g., where is the print function?)
- Tradeoff between breadth and depth
- Too deep Þ
can become hard to find things
- Too broad Þ
becomes direct manipulation
|
16
|
- What to do when menus become too deep?
- Merge keyboard and direct manipulation
- Select menu items by typing part of a word
- After each letter, update the menu
- Once the word is displayed, user can click on it
- Example: Windows help =
index
|
17
|
- Windows (and panels)
- Resize, drag, iconify, scroll, destroy
- Selectors
- Menu bars, pulldown lists
- Buttons
- Labeled buttons, radio buttons, checkboxes
- Icons
|
18
|
- Platform-specific
- Development tool tuned for a windowing system
- Microsoft Windows, Mac, Unix X Windows
- Native look and feel (Optional in Java)
- Design using capabilities available on every system
- Separation of content management and display functions
- Common look and feel (Default in Java w/Swing)
- Adopt a common look and feel across platforms
|
19
|
- Swing: High-level abstract operations
- Layout managers
- Low-level operations for detailed control
- Absolute positioning
- Drawing (Graphics)
|
20
|
- JButton
- JToggleButton
- JRadioButton
- JCheckBox
- JList
- JMenuBar, JMenu, JMenuItem
- JComboBox (pop up menu)
- JTree
- JSlider
- JTextField, JTextArea
|
21
|
- JLabel
- Icon
- JProgressBar
- setToolTipText()
|
22
|
- Create a GUI object
- JButton swapButton =3D new JButton(“swap”);
- Register the class containing the event listener
- swapButton.addActionListener(swapHandler);
- Create an inner class to “handle” the event
- “implements” the appropriate listener interface(s)
- class swapHandler implements actionListener { … }
- Create appropriate listener methods in that class
|
23
|
- componentListener
- size, position, visibility
- focusListener
- gain or lose keyboard input
- keyListener
- mouseListener
- mouse clicks and window entry/exit
- mouseMotionListener
|
24
|
- Displayable windows
- Subordinate windows (“dialogs”)
- JOptionPane, JColorChooser, JFileChooser
- Grouping for layout management
- Specialized containers
- JScrollPane
- JTabbedPane
- JSplitPane
|
25
|
Some Layout Managers=
div>
- GridLayout:
graph paper, identical shapes
- BoxLayout: one
column (or row)
- FlowLayout:
rows, with “component wrap”
- (defa=
ult
for JPanel)
- BorderLayout:
top, bottom, sides, center
-  =
; &n=
bsp;
(default for JFrame)
- GridBagLayout: graph paper w/different shapes
|
26
|
- On a blank sheet of paper, write a
- single sentence that will convey
- to me what you found to be the
- most confusing thing that was
- discussed during today’s class.
|