Forms - Layout and Interaction Ideas

Still to do:

need to split out into ux cases

consider input masking

SOP Article * Required field

Title: *

Submit Cancel

?

fieldsets listed down left side - completed in any order

Author

Keywords

Pages

General

Location: *

Photos

Teaser: *

Date: *

WYSIWYG Editor Toolbar

( Description text could go here )

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Picture:

Select

E-mail:

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Picture:

Select

E-mail:

upload interaction needs to be discussed with engineers

Select Image...

CancelOK

Browse : Source Search Source

Site

Folder

Folder

Image

Image

Image

Upload

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Picture:

Change

E-mail:

/folder/folder/image

Add field+

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Picture:

Change/folder/folder/image

Address Line: *

Add field+

Remove field

Move field up>

-

The actions drop down could also show:

Move field downMove field to topMove field to bottom

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *Photos

Address Line: *

City: *

Zip: *

Address

State: *

Address Line: *

This is inline help text for the control above.

Click X to closeBack to [Label]

Bacl to label provides an accessible shortcut back to the control

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Address Line: *

The ‘label’ must be at least 2 characters

Close X

J

|

Validation callout.

Checks validity of field when user clicks away.

This is not the only method of validation

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Address Line: *

Bloggs

Joe

Bloggs

SOP Article * Required field

Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Address Line: *

Bloggs

Joe

Bloggs

Please correct the following errors:

2. Adress Line is required and does not contain any data 1. Title is required and does not contain any data

SOP Article * Required field

Title: *

Submit Cancel

?

Author

Keywords

Pages

General

Location: *

Photos

Teaser: *

Edit

Date: *

Please correct the following errors:

2. Adress Line is required and does not contain any data 1. Title is required and does not contain any data

Field highlighted even animated to draw user’s attention

13/12/2008

This is some teaser text

Location

Subgroups

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Group Header

Label: *

Label: *

Submit Cancel

?

Label:

Sub Group Header

Label: *

Label: *

Group header >

Aim is to avoid indentation allowing maximum use of estate estate and preserve vertical hanging lines to make the form easier to scan

Sub Group Header

Label: *

Label: *

Group header > Sub group header >

Category Control and Picker - Ideal Interaction

Route we would like to go if sufficent engineering resource

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit

Select

Cancel

Categories:

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

Sou

South-Central Asia

South-Eastern Asia

Regions > Asia

Regions > Asia

|

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia |

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia |X

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia |

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia

Select Categories...

Cancel

South Australia

South-Central Asia

OK

Selected Categories

South-East Asia

+

X

Regions > Australasia

+Regions > Asia

South-East AsiaRegions > Asia

Browse: Search Results South

26 results < Prev 1 2 3 4 5 Next >

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia

Select Categories...

Cancel

South Australia

South-Central Asia

OK

Selected Categories

South-East Asia

+

X

Regions > Australasia

Regions > Asia

South-East AsiaRegions > Asia

Browse: Search Results South

26 results < Prev 1 2 3 4 5 Next >

South-Central Asia X

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia South-Central Asia

User adds 3 more categories

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia South-Central Asia AsiaSoftware Engineering

Category Control and Picker - likely Interaction

Route we are likely to go

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia South-Central Asia AsiaSoftware Engineering

<none>

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia South-Central Asia AsiaSoftware Engineering

<none>

Select Categories...

Cancel

South Australia

South-Central Asia

OK

Selected Categories

South-East Asia

+

X

Regions > Australasia

Regions > Asia

South-East AsiaRegions > Asia

Browse: Search Results South

26 results < Prev 1 2 3 4 5 Next >

South-Central Asia X

Form Name * Required field

Fieldset withlabel wrap

Fieldset withlabel wrap

Fieldset withlabel wrap

Submit Cancel

Categories:

Select

South-East Asia South-Central Asia

AsiaSoftware Engineering

if the remove icon could be revealed on mouseover that would be better

More examples of pickers

Displayed as floating popup underneath select button

Upload interaction needs to be dicussed with engineers

Select Image...

CancelOK

Browse : Source Search Source

Site

Folder

Folder

Image

Image

Image

Upload

Select Folder...

CancelOK

Browse : Source Search Source

Site

Folder

Folder

Folder

Folder

Folder

Search source is selected from drop down

Select Folder...

CancelOK

Browse : Search Results Folder

Folder

Folder

PATH: /folder/folder/

PATH: /folder/folder/

FolderPATH: /folder/folder/

26 results < Prev 1 2 3 4 5 Next >Current Site

All Sites

Repo

Ideally live scroll but most likely gool old pagination :)

Select User...

CancelOK

Browse : Search Results First

26 results < Prev 1 2 3 4 5 Next >

First Last

First Last

First Last

First Last

First Last

Fieldset withlabel wrap Select Tags...

CancelOK

Selected TagsBrowse: Search Results Tag

26 results < Prev 1 2 3 4 5 Next >

Tag

Tag

Tag

Tag

Tag

+

+

+

+

+

Tag

Tag

Tag

X

X

X