❑ Two problems must be addressed in user interface
design:
🞍 How should information from the user be provided to
the computer system?
🞍 How should information from the computer system
be presented to the user?
❑ User interaction and information presentation may be
integrated through a coherent framework such as a
user interface
⚫ User interfaces and interaction styles
⚫ Why are forms important in UI design?
⚫ Simple guidelines and examples for form design
⚫ Input fields and how to best design them
⚫ This lecture and the associated activities
provide the underpinning knowledge that
contribute to the learning outcomes of:
🞍 understand the issues involved in developing and evaluating
interfaces to interactive applications
Types of user interfaces?
Kendall & Kendall, 2002
⚫ What is the purpose of the screen/form?
🞍 What are the tasks? Why are they needed? Where is it
performed?
⚫ Users - Who will use it? How will they use it?
⚫ Sample Design
🞍 Assumptions and constraints. What specific information is
needed? Will it be viewed on screen or printed?
🞍 Form organisation
🞍 Create an attractive layout and design
🞍 Labels
🞍 Use familiar terms and images
🞍 Input Fields
🞍 Reduce input data problems
🞍 Help and errors
🞍 Provide feedback to users
Clear explanation
Input fields
Labels
Good examples
Adapted from Wroblewski, 2008
1 2
4 www.tesco.com
Adapted from Wroblewski, 2008
⚫ When a form is first entered, position the cursor
in the most likely default position.
⚫ Allow forward and backward movement by
field and within fields.
⚫ Make protected areas on the screen
completely inaccessible. Allow the cursor to
rest only on user-editable areas.
⚫ Do not use auto tab unless fields have fixed
lengths and users are high frequency and
experienced.
⚫ Provide titles and page numbers or place
markers on screens in a multiscreen form.
Top-aligned labels
⚫ When data being
collected is familiar
⚫ Minimize time to
completion
⚫ Require more vertical space
⚫ Spacing or contrast is
vital to enable efficient
scanning
⚫ Flexibility for
localization and complex
inputs
Right-aligned labels
⚫ Clear association
between label and field
⚫ Requires less vertical space
⚫ More difficult to just scan
labels due to left rag
⚫ Fast completion times
Left-aligned labels
⚫ When data
required is unfamiliar
⚫ Enables label scanning
⚫ Less clear association
between label and field
⚫ Requires less vertical space
⚫ Changing label
length may impair layout
Right-aligned
Top-aligned
Left-aligned
Eye-tracking study (Penzo, 2006)
⚫ In Western cultures:
• for single fields, place caption to left.
• for list fields, place caption above.
⚫ Justify captions/and fields according to user, task, and data
type.
⚫ Separate the (longest) caption (in a left-justified group) from its
field by no more than 1-2 spaces (following the delimiter, for
example, a colon).
⚫ Separate one caption field group from another by three or
more spaces horizontally, or by one or more lines vertically.
⚫ Break up columnar fields or long columns of single field
items into groups of 5 separated by a blank line.
⚫ Provide distinctive field group and section headings in
complex forms.
⚫ Distinguish fields (i.e., contents) from captions (i.e.,
labels).
⚫ Captions should be brief, familiar and descriptive.
⚫ Indicate the number of character spaces available in a
field.
⚫ Indicate when fields are optional.
Adapted from Wroblewski, 2008
Adapted from Tidwell, 2011
Adapted from Tidwell, 2011
Adapted from Tidwell, 2011
⚫ Consider providing pop-up or pull-down menus
for fill-in forms with many, but well-defined entry
options.
⚫ Avoid complex rules for entering data in the
various fields of a form.
⚫ Provide meaningful (in field) groupings to break
up long input formats (chunking).
⚫ Provide defaults whenever possible. Allow
simple (single key) acceptance of defaults.
⚫ Make high-frequency inputs easy to express (e.g.,
y/n)
⚫ Allow abbreviated input when it can be
unambiguously interpreted (e.g., "y" for "yes")
⚫ A system should be "case blind" when it really does
not matter (e.g., "yes", "Yes" or "YES")
⚫ Let the user specify the unit of measurement. Do
not require transformations or calculations.
⚫ Keep input fields short if possible.
⚫ Avoid frequent shifts between upper- and lower-
case characters.
⚫ Do not require leading zeros e.g. 007
⚫ Provide prompts when use will be relatively infrequent,
inputs must be formatted, and users are not working from
a source document (i.e., help with syntax).
• Prompts should be brief and unambiguous.
• Place prompts to the right of fields, or with automatic
inline help system
• Provide instructions for navigation and completion on the
screen or through online help.
• Place instructions in a consistent location across
screens and make them visually distinctive.
• Use consistent terminology and consistent grammatical
form and style in instructions.
Automatic inline help
Help within an input field
User-activated help
Adapted from Wroblewski, 2008
Adapted from Wroblewski, 2008
