Alfresco Share - Forms

2,172 views

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,172
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Alfresco Share - Forms

  1. 1. Forms - Layout and Interaction Ideas Still to do: need to split out into ux cases consider input masking
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Subgroups
  13. 13. 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
  14. 14. Category Control and Picker - Ideal Interaction Route we would like to go if sufficent engineering resource
  15. 15. Form Name * Required field Fieldset with label wrap Categories: Fieldset with label wrap Select Fieldset with label wrap Submit Cancel
  16. 16. 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
  17. 17. Form Name * Required field Fieldset with label wrap Categories: Fieldset with South-East Asia | label wrap Select Fieldset with label wrap Submit Cancel
  18. 18. Form Name * Required field Fieldset with label wrap Categories: Fieldset with | South-East Asia X label wrap Select Fieldset with label wrap Submit Cancel
  19. 19. Form Name * Required field Fieldset with label wrap Categories: Fieldset with South-East Asia | label wrap Select Fieldset with label wrap Submit Cancel
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Category Control and Picker - likely Interaction Route we are likely to go
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. More examples of pickers
  29. 29. 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
  30. 30. Select Folder... Browse : Source Search Source Site Folder Folder Folder Folder Folder Cancel OK
  31. 31. 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
  32. 32. 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
  33. 33. 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

×