chapter 3 the interaction extras … more about widgets
understanding and choosing widgets widgets - bits that make the GUI what do they do what are they good for
one-by-one – WIMP elements <ul><li>widgets - bits that make the GUI </li></ul><ul><li>what do they do </li></ul><ul><li>wh...
widgets? <ul><li>individual items on a GUI screen ... </li></ul><ul><ul><li>checkboxes, menus, toolbars, buttons etc. </li...
appearance
appearance includes words <ul><li>verbs - action words </li></ul><ul><ul><li>quit, exit,  embolden, italicise </li></ul></...
behaviour Move mouse off target with button still down   – highlight removed Release mouse   – nothing happens Move mouse ...
behaviour … ctd. <ul><li>some bits the toolkit does for you </li></ul><ul><ul><li>but is it right? </li></ul></ul><ul><li>...
semantics <ul><li>menus, buttons, …, etc. </li></ul><ul><li>do things … </li></ul><ul><li>…  lets make it  bold italic </l...
YOU say what it means <ul><li>semantics usually up to you </li></ul><ul><ul><li>although widgets may link direct to databa...
what do you want? <ul><li>actions </li></ul><ul><ul><li>usually menu, buttons, or toolbar </li></ul></ul><ul><li>setting s...
how many? <ul><li>one of several options </li></ul><ul><ul><li>radio buttons, selection menu </li></ul></ul><ul><li>zero, ...
and more ... <ul><li>number </li></ul><ul><ul><li>fixed e.g. bold, italic, underline </li></ul></ul><ul><ul><li>variable e...
Upcoming SlideShare
Loading in …5
×

HCI 3e - Ch 3 (extra):

752 views

Published on

additional slides for Chapter 3: The interaction

from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HCI 3e - Ch 3 (extra):

  1. 1. chapter 3 the interaction extras … more about widgets
  2. 2. understanding and choosing widgets widgets - bits that make the GUI what do they do what are they good for
  3. 3. one-by-one – WIMP elements <ul><li>widgets - bits that make the GUI </li></ul><ul><li>what do they do </li></ul><ul><li>what are they good for </li></ul>
  4. 4. widgets? <ul><li>individual items on a GUI screen ... </li></ul><ul><ul><li>checkboxes, menus, toolbars, buttons etc. </li></ul></ul><ul><li>three aspects: </li></ul><ul><ul><li>appearance - what they look like </li></ul></ul><ul><ul><li>interaction - how they behave </li></ul></ul><ul><ul><li>semantics - what they mean </li></ul></ul>
  5. 5. appearance
  6. 6. appearance includes words <ul><li>verbs - action words </li></ul><ul><ul><li>quit, exit, embolden, italicise </li></ul></ul><ul><li>adjectives - description/state words </li></ul><ul><ul><li>bold, italic </li></ul></ul><ul><li>nouns - usually as a form of description </li></ul><ul><ul><li>Times New Roman, US Letter </li></ul></ul><ul><li>beware of mixes … </li></ul><ul><ul><li>embolden + italic !!?! </li></ul></ul>
  7. 7. behaviour Move mouse off target with button still down – highlight removed Release mouse – nothing happens Move mouse over button – highlights
  8. 8. behaviour … ctd. <ul><li>some bits the toolkit does for you </li></ul><ul><ul><li>but is it right? </li></ul></ul><ul><li>some you control </li></ul><ul><ul><li>e.g. drawing, interactions between widgets </li></ul></ul><ul><li>beware timing issues </li></ul><ul><ul><li>e.g. large selections under Windows apps. </li></ul></ul>
  9. 9. semantics <ul><li>menus, buttons, …, etc. </li></ul><ul><li>do things … </li></ul><ul><li>… lets make it bold italic </li></ul>
  10. 10. YOU say what it means <ul><li>semantics usually up to you </li></ul><ul><ul><li>although widgets may link direct to database </li></ul></ul><ul><ul><li>even then, you say what links </li></ul></ul><ul><li>think separately: </li></ul><ul><ul><li>meaning first - what you want it to do </li></ul></ul><ul><ul><li>then appearance - how you do it </li></ul></ul><ul><li>choose the widget for the job </li></ul>
  11. 11. what do you want? <ul><li>actions </li></ul><ul><ul><li>usually menu, buttons, or toolbar </li></ul></ul><ul><li>setting state/options </li></ul><ul><ul><li>usually checkbox, radio button, combi-box </li></ul></ul><ul><li>but … </li></ul><ul><ul><li>menus can be used to set state etc. ... </li></ul></ul>
  12. 12. how many? <ul><li>one of several options </li></ul><ul><ul><li>radio buttons, selection menu </li></ul></ul><ul><li>zero, one or more options </li></ul><ul><ul><li>checkbox, multi-choice menu </li></ul></ul><ul><li>free choice </li></ul><ul><ul><li>offer recent/typical shortcuts </li></ul></ul><ul><ul><li>one line text boxes often terrible! </li></ul></ul>
  13. 13. and more ... <ul><li>number </li></ul><ul><ul><li>fixed e.g. bold, italic, underline </li></ul></ul><ul><ul><li>variable e.g. font list </li></ul></ul><ul><ul><li>scolling through telephone list … </li></ul></ul><ul><li>liveness </li></ul><ul><ul><li>grey out inactive options </li></ul></ul><ul><li>dynamic interactions </li></ul><ul><ul><li>some choices dependent on others </li></ul></ul>

×