100 likes | 322 Views
1. CSc 238 Human Computer Interface Design Part III - Designing Interaction Details. Chapter 21 Controls. 2. Controls. Manipulatable, self-contained screen objects that allow users to interact with digital products Principle : Avoid control-laden dialog boxes! (but know why?)
E N D
1 CSc 238 Human Computer Interface DesignPart III - Designing Interaction Details Chapter 21 Controls
2 Controls Manipulatable, self-contained screen objects that allow users to interact with digital products Principle: Avoid control-laden dialog boxes! (but know why?) Four Flavors • Imperative controls • Selection controls • Entry controls • Display controls
3 1. Imperative Controls • Buttons (and pliancy – “dynamic visual hinting”) • Butcons (your toolbar – half button, half icon) Tooltips The cursor in search of a tooltip Hyperlinks DESIGN Principle: Use links for navigation, butcons for action.
4 2. Selection Controls • Check boxes • Single, binary choice • Flip-flop buttons - avoid • Radio buttons • Mutually exclusive • Combutcons – borders • List controls – drop down • Earmarking • List with check boxes – to check • Dragging & Dropping • Ordering lists • Horizontal scrolling - never • Entering data in a list • Combo boxes • List box and edit field • e.g. Change font type • Tree controls
5 3. Entry Controls • Bounded and unbounded e.g. the screen resolution control • A text field that rejects a user’s input after he has entered is not a bounded control, but a rude control. • Enter values between 4 and 8 limit values to 4, 5, 6, 7, 8 • Bounded slider
Spinners • Dials & sliders • Thumbwheels • Unbounded entry: text edit controls • Validation • Active versus Passive validation • Clue boxes (like a tooltip)
7 More… • Handling out of bounds data • Units of measure (don’t require user to perform trial and error) • Insert and overtype entry modes • Using text edit (INPUT) controls for output: a bad idea.
Text controls (values that could be changed, in and editable field – so it can be changed) Scrollbar Use thumbs to show % visible Number of pages First sentence of each page as you scroll 8 4. Display Controls
Splitters • Drawers are panes in sovereign applications that can be opened & closed with a click. • Place to put functionality that is rarely used. Bottom line “… ensure your control are well-behaved”
Advertise pliancy with cursor hinting. • Don’t overuse. • Don’t allow pane to become completely unusable. It’s in here!