Date post: | 14-Dec-2015 |
Category: |
Documents |
Upload: | gordon-gibbs |
View: | 215 times |
Download: | 1 times |
Forms & controls
Material from Heim Chap 10 & 11 and …
COMPSCI 345 / SOFTENG 350
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
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
Form Centric Systems
Health Informatics
Enterprise Resource Planning (ERP)
Grouping
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
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®.
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
Controls
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
------------------------------------------------
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
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
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
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
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
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
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
Non standard (but usable) controls
Form Design
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.
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
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
Organizing form elements
Jarret and Gafney (2008)
Another level of wire framing
Example of a problematic form
Jarret and Gafney (2008)
Examples of steps to improve the form
Jarret and Gafney (2008)
Result of the makeover
Jarret and Gafney (2008)
Summary
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
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
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