Forms & controls

Material from Heim Chap 10 & 11

Jim WarrenCOMPSCI 345 / SOFTENG 350

Learning Outcomes Describe top-level grouping strategies and

controls used for this purpose Compare the efficacy of icons versus text

labels Describe common data entry controls and

their roles 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

Windows 8

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

Important subclasses include modal dialogues, multiple document interface (MDI) document windows

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

Panels, 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

Panels and frames, Adobe Flash®.

Panels, 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 envelope Recognizing B as a letter in a bold typeface

Cognitive Mapping envelope image (i.e a postal letter) email Mapping 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 (sometimes 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

Walk-up user Needs to be able to see where things are

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, especially for frequent users Alt + letter for radio buttons etc Tab around form in logical order

Screen space is at a premium Minimise gaps between controls Consider different strategies to indicate grouping

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 And many times ‘less is more’ – consider shunting things off

to other forms, other apps or even dropping all together (especially for less frequent users)

Critical elements of form design Type of control (choosing and auto compete are

nearly always better than free text) The label (also called ‘caption’) word or words

Short but unambiguous The spatial relationship between the label and the

control Generally left side is superior to above, below or right side

Logical order of the data name, address, phone number phone number, address, name

Logical membership of elements in groups E.g. such that you get good tab labels (never label tabs

“Member Info 1”, “Member Info 2”!) and logical panels within the form (see ‘chunking’ next slide)

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 top-level level grouping strategies and

controls used for this purpose …. …

Compare the efficacy of icons 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

30