Visual Screen Design

Week 5 - Forms

Learn the rules so you know how to break them properly Dalai Lama

emiel.ruis@han.nl @mastermiel

Forms

Forms

Forms

Registration

Forms

Shopping, data-acces

Forms

Screen based controls

Forms

Screen based controls Radio Button Check Box Open list Box Dropdown Box Text Box

Forms

Radio Buttons: There are several items, but the user can only select one item. Number of items up to 7

Forms

Checkbox: There are multiple items, the user can select multiple items. User confirms "something" / approves.

Forms

Dropdown Box (menu) There are several items, but the user can choose only one item Number of items > 7 Attracts attention (even more than the submit button) Most optimal: use default value as label

Forms

Text Box

Open question User can fill out / type answers

Forms

Lastig?!

Design a form is not difficult. A good form design is possible, as long as you know the rules. It takes time and attention. A developer is happy when the form technically works.

Forms

Forms

When designing Forms consider the following issues.

Forms

Make choices visible

Dynamic Forms are useful, but also unpredictable for the user When possible, use radio buttons instead of menus

Forms

Consistency

Use the same type of controls for similar actions and menus

Forms

Forms

Progressive Disclosure

Do not bother users with fields that are not important to him/her. Only make fields visible when the user indicates that they are relevant.

Forms

Forms

Place / alignment labels

Forms

Labels aligned left, next to the input fields.

Right-aligned labels, next to the input

Labels aligned left, above the input

Forms

Left aligned
User sees the link between label left and right input field No unnecessary eye movements But fixation time between label and input field is long (500 ms)

Forms

Forms

Right-aligned Number of fixations reduced by half (compared to leftaligned) Time between fixations much shorter (140-250 ms) Total time almost reduced by half Where to start reading > no problem

Forms

Top / left aligned

At a glance: label + input field. No extra fixation required If necessary. Additional fixation + / - 50ms

Forms

Forms

Forms

Most optimal: Label above the input field Least optimal: Label next to it, left aligned. When places next to input (space ...) > Right align

Forms

Forms

Forms

Visualization of input controls

Do not vary unnecessarily in the width of input Please note: Width input field creates expectations! Gestalt!

Forms

Alignment of the input fields (preferably on the main axis)

Forms

Alignment of the input fields (preferably on the main axis)

Forms

Forms

Visual structure

Select axis (s) Dont vary unnecessarily in the width of input Note: Width input field creates expectations!

Forms

Visual structure

Hard lines are counter-effective! Do not exaggerate in supporting associations (between labels in input fields)

Forms

Visual structure Apply structure to the form: Create a partition Visualize the division? (Not too hard / subtle!) Label the elements Provide feedback / feedforward How long many steps left?

Forms

Buttons: Naming: Clear (meaning) is more important than length

Forms

Buttons

Forms

Order
order form layout

order input data (tab)

order items Easier to scan Ensure that there is a sequence!

Forms

Forms

Forms

Tab-sequence

Forms

Dividing Forms

Split into multiple pages or one long form? Balance visuals and usability How many steps are there? Can I skip steps? Which step am I?

Forms

Forms

Dividing visualy

Forms

Dividing visualy

Forms

Minimize data entry

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Primary actions and the rest Avoid unnecessary mistakes!

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Primary / Secondary

Forms

Feedback

Inline validation (confirmation and suggestions) Errors (indication and possible solution) Progress (indication) Success (confirmation)

Forms

Inline validation (confirmation and suggestions)

Forms

Inline validation (confirmation and suggestions)

Which fields are required (do not tell afterwards!) Provide instructions Show examples

Forms

Inline validation (confirmation and suggestions)

Feedback

Inline validation (confirmation and suggestions)

Forms

Errors (indication and possible solution)

Forms

Progress (indication)

Forms

Progress (indication)

Forms

Succes (confirmation)

Forms

Registration forms

Websites love registered users Contact / spam Statistics Users hate registrating Necessary evil No one registers for his / her pleasure

Forms

Registration forms

Minimize the pain!

Forms

The 5 basic rules for registration forms 1. 2. 3. 4. 5. Be honest and open. Do not confront the user with unpleasant surprises ... Explain briefly to the user why they should enter data Make clear to the user what the advantages are for them to register The less questions, the better The less personal / sensitive data, the better

Forms

Tot slot

1. -

Analysis What controls do I choose? How do I order them? Sketches! How do I keep the form short and clear?

2. Design your form User-centered

Forms

Learn the rules so you know how to break them properly Dalai Lama