Forms - Layout and
Interaction Ideas
Still to do:
need to split out into ux cases
consider input masking

SOP Article * Required field
General Title: *
Location: *
Author
?
Teaser: *
Keywords
WYSIWYG Editor Toolbar
Pages
Photos
( Description text could go here )
Date: *
fieldsets listed down
left side - completed in
any order
Submit Cancel

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords ?
Last Name: *
Pages
Address
Photos
Address Line: *
City: *
State: *
Zip: *
Picture:
Select
E-mail:
Submit Cancel

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords ?
Last Name: *
Pages
Address
Photos
Address Line: *
City: *
State: *
Zip: *
Picture:
Select
E-mail: Select Image...
Browse : Source Search Source
upload interaction needs
Site
to be discussed with
engineers
Folder
Submit Cancel
Folder
Image
Image
Image
Cancel
Upload OK

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords ?
Last Name: *
Pages
Address
Photos
Address Line: *
+
City: * Add field
State: *
Zip: *
Picture:
/folder/folder/image Change
E-mail:
Submit Cancel

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords ?
Last Name: *
Pages
Address
Photos
Address Line: *
Address Line: *
The actions drop down
could also show:
City: * + Add field
Move field down
Move field to top
Move field up
Move field to bottom
>
- Remove field
State: *
Zip: *
Picture:
/folder/folder/image Change
Submit Cancel

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords ?
This is inline help text for the control above.
Pages Click X to close
Back to [Label]
Last Name: *
Photos
Address
Address Line: *
Bacl to label provides an
accessible shortcut back
Address Line: *
to the control
City: *
State: *
Zip: *
Submit Cancel

SOP Article * Required field
General Name
Prefix: * Close X
Author The ‘label’ must be at least
2 characters
First Name: *
Keywords J ?
Last Name: *
Pages |
Address
Photos
Address Line: *
Address Line: *
Validation callout.
Checks validity of field
when user clicks away.
City: *
This is not the only
method of validation
State: *
Zip: *
Submit Cancel

SOP Article * Required field
General Name
Prefix: *
Author
First Name: *
Keywords Joe ?
Last Name: *
Pages Bloggs
Address
Photos
Address Line: *
Bloggs
Address Line: *
City: *
State: *
Zip: *
Submit Cancel

SOP Article * Required field
Please correct the following errors:
1. Title is required and does not contain any data
2. Adress Line is required and does not contain any data
General Name
Prefix: *
Author
First Name: *
Keywords Joe ?
Last Name: *
Pages Bloggs
Address
Photos
Address Line: *
Bloggs
Address Line: *
City: *
State: *
Zip: *
Submit Cancel

SOP Article * Required field
Please correct the following errors:
1. Title is required and does not contain any data
2. Adress Line is required and does not contain any data
General Title: *
Location: *
Author
Location ?
Field highlighted even
Teaser: *
Keywords animated to draw user’s
attention
This is some teaser text
Pages
Photos
Edit
Date: *
13/12/2008
Submit Cancel

Subgroups

Form Name * Required field
Fieldset with
Group Header
label wrap
Label: *
Fieldset with
label wrap
Label: *
Fieldset with
?
label wrap
Group header >
Sub Group Header
Label: *
Aim is to avoid indentation
allowing maximum use of
estate estate and preserve
Label: *
vertical hanging lines to
make the form easier to
scan
Label:
Group header > Sub group header >
Sub Group Header
Label: *
Label: *
Submit Cancel

Category
Control and
Picker - Ideal
Interaction
Route we would like to go
if sufficent engineering
resource

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with
label wrap
Select
Fieldset with
label wrap
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with Sou |
label wrap
South-Central Asia
Select
Regions > Asia
Fieldset with
South-Eastern Asia
label wrap
Regions > Asia
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia |
label wrap
Select
Fieldset with
label wrap
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with |
South-East Asia X
label wrap
Select
Fieldset with
label wrap
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia |
label wrap
Select
Fieldset with
label wrap
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia
label wrap
Select
Fieldset with
Select Categories...
label wrap
Selected Categories
Browse: Search Results South
South-East Asia
26 results < Prev 1 2 3 4 5 Next > X
South Australia +
Regions > Australasia
South-Central Asia +
Regions > Asia
South-East Asia
Regions > Asia
OK Cancel
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia
label wrap
Select
Fieldset with
Select Categories...
label wrap
Selected Categories
Browse: Search Results South
South-East Asia
26 results < Prev 1 2 3 4 5 Next > X
South Australia
South-Central Asia
+ X
Regions > Australasia
South-Central Asia
Regions > Asia
South-East Asia
Regions > Asia
OK Cancel
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia South-Central Asia
label wrap
Select
Fieldset with
label wrap
User adds 3 more
categories
Submit Cancel

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia South-Central Asia Asia
label wrap Software Engineering
Fieldset with Select
label wrap
Submit Cancel

Category
Control and
Picker - likely
Interaction
Route we are likely to go

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with <none>
label wrap
Select
Fieldset with
label wrap
Submit Cancel
South-East Asia South-Central Asia Asia
Software Engineering

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with <none>
label wrap
Select
Fieldset with
Select Categories...
label wrap
Selected Categories
Browse: Search Results South
South-East Asia
26 results < Prev 1 2 3 4 5 Next > X
South Australia
South-Central Asia
+ X
Regions > Australasia
South-Central Asia
Regions > Asia
South-East Asia
Regions > Asia
OK Cancel
Submit Cancel
South-East Asia South-Central Asia Asia
Software Engineering

Form Name * Required field
Fieldset with
label wrap
Categories:
Fieldset with South-East Asia South-Central Asia
label wrap
Select
Fieldset with
label wrap
if the remove icon could
be revealed on mouseover
that would be better
Submit Cancel
Asia
Software Engineering

More examples
of pickers

Select Image...
Browse : Source Search Source
Site
Folder
Folder
Image
Image
Image
Cancel
Upload OK Displayed as floating
popup underneath select
button
Upload interaction needs
to be dicussed with
engineers

Select Folder...
Browse : Source Search Source
Site
Folder
Folder
Folder
Folder
Folder
Cancel
OK

Select Folder...
Browse : Search Results Folder
All Sites
26 results < Prev 1 2 3 4 5 Next >
Current Site
Folder
Repo
PATH: /folder/folder/
Folder
PATH: /folder/folder/
Search source is
Folder
selected from drop
PATH: /folder/folder/
down
Cancel
OK

Select User...
Browse : Search Results First
26 results < Prev 1 2 3 4 5 Next >
First Last
First Last
First Last
Ideally live scroll but
First Last
most likely gool old
pagination :)
First Last
Cancel
OK

Fieldset with
Select Tags...
label wrap
Selected Tags
Browse: Search Results Tag
Tag X
26 results < Prev 1 2 3 4 5 Next >
Tag Tag X
+
Tag
Tag X
+
Tag +
Tag +
Tag +
OK Cancel