Alfresco Share - Forms

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 )


Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Picture:

Select

E-mail:


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


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+


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


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


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


Name

Prefix: *

First Name: *

Submit Cancel

?

Author

Keywords

Pages

General

Last Name: *

Photos

Address Line: *

City: *

Zip: *

Address

State: *

Address Line: *

Bloggs

Joe

Bloggs


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


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



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





Submit

Select

Cancel

Categories:





Submit Cancel

Categories:

Select

Sou

South-Central Asia

South-Eastern Asia

Regions > Asia

Regions > Asia

|





Submit Cancel

Categories:

Select

South-East Asia |





Submit Cancel

Categories:

Select

South-East Asia |X





Submit Cancel

Categories:

Select

South-East Asia |





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 >





Submit Cancel

Categories:

Select

South-East Asia


Cancel

South Australia

South-Central Asia

OK

Selected Categories

South-East Asia

+

X


Regions > Asia




South-Central Asia X





Submit Cancel

Categories:

Select

South-East Asia South-Central Asia

User adds 3 more categories





Submit Cancel

Categories:

Select

South-East Asia South-Central Asia AsiaSoftware Engineering

Category Control and Picker - likely Interaction

Route we are likely to go





Submit Cancel

Categories:

Select


<none>





Submit Cancel

Categories:

Select


<none>


Cancel

South Australia

South-Central Asia

OK

Selected Categories

South-East Asia

+

X


Regions > Asia




South-Central Asia X





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


Site

Folder

Folder

Image

Image

Image

Upload

Select Folder...

CancelOK


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


First Last

First Last

First Last

First Last

First Last

Fieldset withlabel wrap Select Tags...

CancelOK

Selected TagsBrowse: Search Results Tag


Tag

Tag

Tag

Tag

Tag

+

+

+

+

+

Tag

Tag

Tag

X

X

X

Design

Alfresco Share - Forms