hci 3e - ch 3 (extra):
DESCRIPTION
additional slides for Chapter 3: The interactionfromDix, Finlay, Abowd and Beale (2004).Human-Computer Interaction, third edition.Prentice Hall. ISBN 0-13-239864-8. http://www.hcibook.com/e3/TRANSCRIPT
![Page 1: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/1.jpg)
chapter 3
the interactionextras …
more about widgets
![Page 2: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/2.jpg)
understanding and choosing widgets
widgets - bits that make the GUIwhat do they do
what are they good for
![Page 3: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/3.jpg)
one-by-one – WIMP elements
widgets - bits that make the GUI what do they do what are they good for
![Page 4: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/4.jpg)
widgets?
• individual items on a GUI screen ...– checkboxes, menus, toolbars, buttons etc.
• three aspects:– appearance- what they look like– interaction - how they behave– semantics - what they mean
![Page 5: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/5.jpg)
appearance
![Page 6: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/6.jpg)
appearance includes words• verbs - action words
– quit, exit, embolden, italicise• adjectives - description/state words
– bold, italic• nouns - usually as a form of description
– Times New Roman, US Letter• beware of mixes …
– embolden + italic !!?!
![Page 7: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/7.jpg)
behaviour
Move mouse off target withbutton still down – highlight removed
Release mouse – nothing happens
Move mouse over button – highlights
![Page 8: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/8.jpg)
behaviour … ctd.
• some bits the toolkit does for you– but is it right?
• some you control– e.g. drawing, interactions between widgets
• beware timing issues– e.g. large selections under Windows apps.
![Page 9: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/9.jpg)
semantics
• menus, buttons,…, etc.
• do things …
… lets make it bold italic
![Page 10: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/10.jpg)
YOU say what it means
• semantics usually up to you– although widgets may link direct to
database– even then, you say what links
• think separately:– meaning first - what you want it to
do– then appearance - how you do it
• choose the widget for the job
![Page 11: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/11.jpg)
what do you want?
• actions– usually menu, buttons, or toolbar
• setting state/options– usually checkbox, radio button, combi-box
• but …– menus can be used to set state etc. ...
![Page 12: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/12.jpg)
how many?
• one of several options– radio buttons, selection menu
• zero, one or more options– checkbox, multi-choice menu
• free choice– offer recent/typical shortcuts– one line text boxes often terrible!
![Page 13: HCI 3e - Ch 3 (extra):](https://reader033.vdocuments.mx/reader033/viewer/2022061120/546d54c7af795963268b4dd6/html5/thumbnails/13.jpg)
and more ...
• number– fixed e.g. bold, italic, underline– variable e.g. font list– scolling through telephone list …
• liveness– grey out inactive options
• dynamic interactions– some choices dependent on others