forms & controls material from heim chap 10 & 11 and … compsci 345 / softeng 350
TRANSCRIPT
![Page 1: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/1.jpg)
Forms & controls
Material from Heim Chap 10 & 11 and …
COMPSCI 345 / SOFTENG 350
![Page 2: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/2.jpg)
Learning Outcomes Describe window level grouping strategies
and controls used for this purpose Compare the efficacy of buttons versus text
labels Describe common data entry controls Describe the attributes of good form design
![Page 3: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/3.jpg)
Dominant interface
1-3
Windows ME
Windows 7
Windows 3.0
Windows 95
Windows 1.0
Changes due to-Volume of applications-Fashion-Search-Interaction devices
The evolution of Windows interface
![Page 4: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/4.jpg)
Form Centric Systems
Health Informatics
Enterprise Resource Planning (ERP)
![Page 5: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/5.jpg)
Grouping
![Page 6: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/6.jpg)
Containers for visual organization Containers organize
functionality and facilitate navigation
Top-level containers: Primary windows
users' main interaction with the application or document
Secondary windows dependent on a primary
window (tabs etc) Utility windows
contents affect an active primary window
Plain windows no title bar or window
controls, typically used for splash screens
http://java.sun.com/products/jlf/ed1/dg/higk.htm
![Page 7: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/7.jpg)
Panes, Frames and Tabs
Panels can be used to group related functionality
provide a memory aid for the user Frames
can be resized by dragging the splitters at their edges minimized by clicking on their title bar
Panes and frames, Adobe Flash®.
![Page 8: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/8.jpg)
Panes, Frames and Tabs
Tabs increase the size of the dialogue by stacking layers on
top of each other and allow more elements to be accessed from one dialogue
Stacked tabs move around to accommodate the different levels this destroys location consistency
![Page 9: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/9.jpg)
Controls
![Page 10: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/10.jpg)
Controls: Buttons & Icons
Command Buttons: have short labels
Toolbar/Palette buttons:
function like command buttons, but they have icons instead of labels.
They are usually grouped by function
1-10
Microsoft PowerPoint icons and buttons
with tooltips Adding labels
------------------------------------------------
![Page 11: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/11.jpg)
Icons versus Text Icons
are signs and as such represent a significant degree of cognitive complexity
If designed properly, they are quick to recognize
Otherwise, they risk being obscure and ambiguous
Text buttons Are less libel to be
mis-interpreted But it takes longer to
read a word Take more screen
space
![Page 12: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/12.jpg)
1-12
Recognizing Icons (see chap 11 Heim) Icon Analysis Chart
Perceptual Recognizing the icon as an envelop Recognizing B as a bold letter
Cognitive Recognizing letter email Recognizing B bold command
Icon Name Distance Separation Trail Degrees
MailPerceptual Shape/
1/2Cognitive Letter/e-mail
BoldPerceptual Letter/bold/
2/2Cognitive Letter ‘B’/bold command
![Page 13: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/13.jpg)
Controls: Hyperlinks Hypertext / hyperlinks
have three states Normal – e.g. blue Active – e.g. red Visited – e.g. purple
Must be obvious
Try to avoid ‘click here’ screen readers for visually impaired search and list links, if they all say ‘click here’
they aren't very useful.
CSS can be used to change the color of hyperlinks There are four possible states
a:link { color: red } /* unvisited links */a:visited { color: blue } /* visited links */a:hover { color: yellow } /* user hovers */a:active { color: lime } /* active links */
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2
Hypertext links at Useit.com
![Page 14: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/14.jpg)
Data entry : Text
Text box should be used when there is a need to gather small, discrete
amounts of information If possible support auto-complete and/or auto lookup
Text field A multiline text box and is used to collect paragraph-length text Provide spell checker and other ‘normal’ text editing
functionality
1-14
Text boxes
Text field
Microsoft Word text boxes and text field
![Page 15: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/15.jpg)
Data entry : Numeric Text box Spinners
limited list of values that can be incremented or decremented using two arrows
Sliders displays a continuum of
values Currency
Is a special case of numeric
Text box
SpinnersSlider
A Slider, spinners and a text box for numeric entry in Microsoft PowerPoint
![Page 16: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/16.jpg)
Data entry : Selections Combo box
a combination of a drop-down list or list box and a single-line textbox
User can either type a value directly into the control or choose from the list of existing options
Radio buttons
Check boxes
Drop down / list box
List box
Text box
------------------------------------------------
Combo box, radio buttons, list box and check boxes in Microsoft Word
![Page 17: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/17.jpg)
Data entry : Others
Calendars on airnewzealand.co.nz and Apple’s Mac OS
Colour pickers on Microsoft PowerPoint & Colorpicker.com
Colour picker
Calendar – dates are particularly difficult because of different
conventions
![Page 18: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/18.jpg)
Non standard (but usable) controls
![Page 19: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/19.jpg)
Form Design
![Page 20: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/20.jpg)
Form Centric Systems
Jarret and Gafney (2008)
Have many, many (100’s) of forms Consistency is important Predictability is important
Users may be frequent or infrequent Data entry clerks who spend all day, every day using
system. Need to be able to quickly and accurately complete tasks Can be trained – but training is expensive
Manager who checks on the sales once a week. Needs to be able to remember where to find things.
Personas and scenarios help define the users’ needs.
![Page 21: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/21.jpg)
Form Centric Systems Keyboard entry is faster than mouse
Support keyboard entry for all controls and navigation Alt + letter for radio buttons etc Tab around form in logical order
Screen space is at a premium Minimise gaps between controls Consider different grouping strategies
Lines, white space, background shading Many times it won’t all fit on one screen
Use card sorting or observation to decide what to put where
![Page 22: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/22.jpg)
Critical elements of form design Type of control (choosing and auto compete
are nearly always better than free text) The label word or words - short but
unambiguous The spatial relationship between the label and
the control above left side right side Logical order of the data
name, address, phone number phone number, address, name
![Page 23: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/23.jpg)
Organizing form elements
Jarret and Gafney (2008)
Another level of wire framing
![Page 24: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/24.jpg)
Example of a problematic form
Jarret and Gafney (2008)
![Page 25: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/25.jpg)
Examples of steps to improve the form
Jarret and Gafney (2008)
![Page 26: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/26.jpg)
Result of the makeover
Jarret and Gafney (2008)
![Page 27: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/27.jpg)
Summary
![Page 28: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/28.jpg)
Forms Summary Describe window level grouping strategies and
controls used for this purpose …. …
Compare the efficacy of buttons versus text labels ….
Describe common data entry controls and how they can aid or hinder correct data collection …
Describe the attributes of good form design …
Describe the critical elements of form design …
28
![Page 29: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/29.jpg)
Summing up visual Aesthetics
There is a complex interplay of the elements An aesthetically pleasing interface is one that
Looks good Works well
Interfaces that look good are perceived as working better
29
![Page 30: Forms & controls Material from Heim Chap 10 & 11 and … COMPSCI 345 / SOFTENG 350](https://reader035.vdocuments.us/reader035/viewer/2022062713/56649f3e5503460f94c5e282/html5/thumbnails/30.jpg)
References
Jarret, C. And Gafney, G. (2008) Forms that Work: Designing Web Forms for Usability. Morgan Kaufmann, MA, USA.
Tidwell, J. (2010) Designing Interfaces, Second Edition: Patterns for Effective Interaction Design . O'Reilly Media.
http://www.androidblues.com/visualperception.html
http://giraffeforum.com/wordpress/2007/07/22/the-best-websites-are-useful-and-ugly/
http://en.wikipedia.org/wiki/Microsoft_Windows http://java.sun.com/products/jlf/ed1/dg/higk.htm
30
If you are doing form
design this is a MUST HAVE
reference