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