Design effective input

Here is where your presentation begins

Table of contents
Good form design

Good display & Web form design

Website design
 GOOD
FORM
DESIGN 1. Make forms easy to fill in.

they are designed. 01

2. Ensure that forms meet the purpose for which

3. Design forms to ensure accurate completion.

4. Keep forms attractive.

Introduction
 Make forms easy to fill in
Purpose:
To reduce error, speed
completion, and facilitate the
entry of data BY FORM FLOW
The cost is minimal >< time SEVEN SECTIONS OF A FORM
employees filling
Features data keyed in by users

GOOD
GOODFORM
FORMDESIGN
DESIGN
FORM FLOW & SEVEN SECTIONS
FORM FLOW:
Minimize the time & effort in form completion
Flow left -> right, top -> bottom
Requires to go directly to the bottom then back up

SEVEN SECTIONS OF A FORM.

Heading
Identification and access
Instructions
Body
Signature and verification
Totals
Comments

GOOD FORM DESIGN

 Heading

INTERNAL DOUBLE-CHECK
Help knows the problem and
correct it , prevent error. Body

Bottom:
Signature, verification, comments
Metting the Intended Purpose
Form are created to serve one or more purposes.
Sometimes it is s desirable to provide different information but still share some
basic information.
=> specialty forms are useful (multiple-part forms, continuous-feed forms,
perforated forms.

Ensuring Accurate Completion

significantly reduces error rates
Proper design ensures that users understand how to fill out the form correctly.
Keeping Forms Attractive

Aesthetic forms draw people

into them and encourage
completion.
Forms should look uncluttered.
Forms should elicit information
in the expected order
Different type fonts, thick and
thin lines can also encourage
interest

Software allows a user to scan an

existing form into the computer
Controlling Business Forms

Important Duties
Forms specialist who Deciding to reproduce
controls forms
Sometimes this job falls to
D forms, establishing
procedures in lowest cost
a systems analyst

Making sure that each form Preventing duplication,

in use fulfills purpose designing effective forms,...
Good display and
Web forms
design

Keep the display simple

Keep the display presentation consistent
Facilitate user movement among display
screens and pages.
Create an attractive and pleasing display.
Keeping the Display Simple
To only show the necessary for the particular action

THREE SCREEN SECTIONS

The heading contains Body of the display, use for Comments and instructions
titles, pull-down menus, data entry, organized from section, short menu of
icon left to right. commands
Captions, instructions,...

Use context-sensitive help, roll-over buttons

that reveal more information, and other pop-up windows
Keeping the
Display Consistent
displays should follow what is
shown on paper
=> locating information

How do it help?
Facilitating Movement

Make it easy to move The “three-clicks” rule Hyperlinks,

from page to page physically moving to
a new page

Scrolling arrows, context-sensitive pop-up windows, or onscreen dialog

Designing an
Attractive and
Pleasing Display
Displays appealing => MORE PRODUCTIVE, need less supervision, and make fewer errors
Displays should draw users into them and hold their attention
Avoid overcrowding by using multiple windows or hyperlinks.

Use logical flows, organize material so that they can easily find their way around

Use font styles and sizes that aid user understanding without drawing undue attention or causing
distraction.
 Using Icons in Display Design

Shapes should be readily recognizable

Numerous icons are already known to most users.
Can quickly tap into this reservoir of common meaning

Icons are worthwhile for users if they are meaningful. Icons are??
Graphical User Interface Design
Graphical user interfaces take advantage of additional features in display design

TEXT BOXES
Used to outline data entry and display
fields. Ensure that a text box is large enough
HTML5 browsers, a feature called a placeholder
Types: Email, telephone, and URL (a Web address).

CHECK BOXES
Check box is used to indicate a new customer
Contain an X or are empty
Check box text or label usually placed to the right
Graphical User Interface Design
Graphical user interfaces take advantage of additional features in display design
LIST AND DROP- TAB CONTROL SLIDERS AND
DOWN LIST DIALOG BOXES. SPIN BUTTONS.
BOXES

CALENDAR
CONTROL
Graphical User Interface Design
Graphical user interfaces take advantage of additional features in display design
IMAGE MAPS. MESSAGE COMMAND
BOXES. BUTTONS.

TEXT AREAS.
Form control & values
Web form GUI controls have some
way to store data
=> pair: name & value

How the value is obtained differs for

each Web form control.
Hidden fields

Invisible to User, does not Can only contains and Should not contain
take space on display cannot be be changed credential or sensitive
name & value information
Event-Response Chart
Dynamic Website
Static websites - the content of the website isn’t changed (the files are pre-rendered and are
the same for every user)
Dynamic websites - information is changed frequently (the file content is generated on user
request either by the server or by JS code on the client device)

Advantages:
Modify themself quickly
Disadvantages:
Will not work if JS is turned
off
May not be compliant with
Americans with Disabilities
acts
AJAX
Stand for Asynchronous JavaScript and XML
Allow developers to implement websites like traditional desktop programs
The data may be either a small text file or an XML document containing many
customers or repeating data
Has the advantage of making the Web work faster and of providing a smoother viewing
experience for users
 Using color is an appealing and proven way to

Using facilitate tasks requiring computer input

The top five most legible combinations of foreground

Color in lettering on background:

Black on yellow
Green on white

Display
Blue on white
White on blue
Yellow on black

Design Use color to highlight important fields on

displays:
Red - error
Yellow - warning
Green = safe
Website
design
Guidlines
Provide clear instructions

Demonstrate a logical entry sequence for fill-in forms

Use a variety of GUI controls to serve specific functions and

to create interest in the form

Provide a scrolling text box if you are uncertain how much

text will be entered
Guidlines (cont.)
Prepare two basic buttons on every Web fill-in form: Submit
and Clear Form

If the form is lengthy and the users must scroll excessively,

divide the form into several simpler forms on separate pages

Create a feedback screen that refuses submission of a form

unless mandatory fields are filled in correctly
Form design (eg.)

Merchant Bay - 2000 AirBnB - 2018

 Thanks!Do you have any questions?
youremail@freepik.com
+34 654 321 432
yourwebsite.com

CREDITS: This presentation template was created by Slidesgo, and

includes icons by Flaticon, and infographics & images by Freepik

Please keep this slide for attribution