1 / 10

CSc 238 Human Computer Interface Design Part III - Designing Interaction Details

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

bette
Download Presentation

CSc 238 Human Computer Interface Design Part III - Designing Interaction Details

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 1 CSc 238 Human Computer Interface DesignPart III - Designing Interaction Details Chapter 21 Controls

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

  6. Spinners • Dials & sliders • Thumbwheels • Unbounded entry: text edit controls • Validation • Active versus Passive validation • Clue boxes (like a tooltip)

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

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

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

  10. Advertise pliancy with cursor hinting. • Don’t overuse. • Don’t allow pane to become completely unusable. It’s in here!

More Related