SlideShare a Scribd company logo
1 of 33
Download to read offline
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

More Related Content

More from AlfrescoUE

Alfresco Share - Advanced Search Wireframes as at 21 June 2010
Alfresco Share - Advanced Search Wireframes as at 21 June 2010Alfresco Share - Advanced Search Wireframes as at 21 June 2010
Alfresco Share - Advanced Search Wireframes as at 21 June 2010AlfrescoUE
 
Project Swift Advanced Search Wireframes
Project Swift Advanced Search WireframesProject Swift Advanced Search Wireframes
Project Swift Advanced Search WireframesAlfrescoUE
 
Project Swift Advanced Workflow Wireframes
Project Swift Advanced Workflow WireframesProject Swift Advanced Workflow Wireframes
Project Swift Advanced Workflow WireframesAlfrescoUE
 
Simple Rules In Alfresco Share UI Wireframes
Simple Rules In Alfresco Share UI WireframesSimple Rules In Alfresco Share UI Wireframes
Simple Rules In Alfresco Share UI WireframesAlfrescoUE
 
Admin Ui Console Dev Screenshots
Admin Ui Console   Dev ScreenshotsAdmin Ui Console   Dev Screenshots
Admin Ui Console Dev ScreenshotsAlfrescoUE
 
Share for iPhone - Visual Design
Share for iPhone - Visual DesignShare for iPhone - Visual Design
Share for iPhone - Visual DesignAlfrescoUE
 
Share for iPhone UI Wireframes - User Story Six
Share for iPhone UI Wireframes - User Story SixShare for iPhone UI Wireframes - User Story Six
Share for iPhone UI Wireframes - User Story SixAlfrescoUE
 
Share For iPhone UI Wireframes - User Story One - Browse For A Document
Share For iPhone UI Wireframes - User Story One - Browse For A DocumentShare For iPhone UI Wireframes - User Story One - Browse For A Document
Share For iPhone UI Wireframes - User Story One - Browse For A DocumentAlfrescoUE
 
Share For iPhone UI Wireframes - User Story Eight - Invite To Site
Share For iPhone UI Wireframes - User Story Eight - Invite To SiteShare For iPhone UI Wireframes - User Story Eight - Invite To Site
Share For iPhone UI Wireframes - User Story Eight - Invite To SiteAlfrescoUE
 
Share for iPhone UI Wireframes - User Story Two - Search for Document
Share for iPhone UI Wireframes - User Story Two - Search for DocumentShare for iPhone UI Wireframes - User Story Two - Search for Document
Share for iPhone UI Wireframes - User Story Two - Search for DocumentAlfrescoUE
 
Share for iPhone UI Wireframes - User Story Five
Share for iPhone UI Wireframes - User Story FiveShare for iPhone UI Wireframes - User Story Five
Share for iPhone UI Wireframes - User Story FiveAlfrescoUE
 
Share for iPhone UI Wireframes - Creating a Wiki Page from a Site
Share for iPhone UI Wireframes - Creating a Wiki Page from a SiteShare for iPhone UI Wireframes - Creating a Wiki Page from a Site
Share for iPhone UI Wireframes - Creating a Wiki Page from a SiteAlfrescoUE
 
iPhone Paper Prototype - Creating a Wiki Page Outside a Site
iPhone Paper Prototype - Creating a Wiki Page Outside a SiteiPhone Paper Prototype - Creating a Wiki Page Outside a Site
iPhone Paper Prototype - Creating a Wiki Page Outside a SiteAlfrescoUE
 
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a Site
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a SiteShare for iPhone UI Wireframes - Creating a Wiki Page Outside a Site
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a SiteAlfrescoUE
 
iPhone Paper Prototype - User Story Ten
iPhone Paper Prototype - User Story TeniPhone Paper Prototype - User Story Ten
iPhone Paper Prototype - User Story TenAlfrescoUE
 
iPhone Paper Prototype - User Story Five
iPhone Paper Prototype - User Story FiveiPhone Paper Prototype - User Story Five
iPhone Paper Prototype - User Story FiveAlfrescoUE
 
iPhone Paper Prototype - User Story Four
iPhone Paper Prototype - User Story FouriPhone Paper Prototype - User Story Four
iPhone Paper Prototype - User Story FourAlfrescoUE
 
iPhone Paper Prototype User Story Thirteen
iPhone Paper Prototype   User Story ThirteeniPhone Paper Prototype   User Story Thirteen
iPhone Paper Prototype User Story ThirteenAlfrescoUE
 
iPhone Paper Prototype - User Story Eleven
iPhone Paper Prototype - User Story EleveniPhone Paper Prototype - User Story Eleven
iPhone Paper Prototype - User Story ElevenAlfrescoUE
 
iPhone Paper Prototype - User Story Nine
iPhone Paper Prototype - User Story NineiPhone Paper Prototype - User Story Nine
iPhone Paper Prototype - User Story NineAlfrescoUE
 

More from AlfrescoUE (20)

Alfresco Share - Advanced Search Wireframes as at 21 June 2010
Alfresco Share - Advanced Search Wireframes as at 21 June 2010Alfresco Share - Advanced Search Wireframes as at 21 June 2010
Alfresco Share - Advanced Search Wireframes as at 21 June 2010
 
Project Swift Advanced Search Wireframes
Project Swift Advanced Search WireframesProject Swift Advanced Search Wireframes
Project Swift Advanced Search Wireframes
 
Project Swift Advanced Workflow Wireframes
Project Swift Advanced Workflow WireframesProject Swift Advanced Workflow Wireframes
Project Swift Advanced Workflow Wireframes
 
Simple Rules In Alfresco Share UI Wireframes
Simple Rules In Alfresco Share UI WireframesSimple Rules In Alfresco Share UI Wireframes
Simple Rules In Alfresco Share UI Wireframes
 
Admin Ui Console Dev Screenshots
Admin Ui Console   Dev ScreenshotsAdmin Ui Console   Dev Screenshots
Admin Ui Console Dev Screenshots
 
Share for iPhone - Visual Design
Share for iPhone - Visual DesignShare for iPhone - Visual Design
Share for iPhone - Visual Design
 
Share for iPhone UI Wireframes - User Story Six
Share for iPhone UI Wireframes - User Story SixShare for iPhone UI Wireframes - User Story Six
Share for iPhone UI Wireframes - User Story Six
 
Share For iPhone UI Wireframes - User Story One - Browse For A Document
Share For iPhone UI Wireframes - User Story One - Browse For A DocumentShare For iPhone UI Wireframes - User Story One - Browse For A Document
Share For iPhone UI Wireframes - User Story One - Browse For A Document
 
Share For iPhone UI Wireframes - User Story Eight - Invite To Site
Share For iPhone UI Wireframes - User Story Eight - Invite To SiteShare For iPhone UI Wireframes - User Story Eight - Invite To Site
Share For iPhone UI Wireframes - User Story Eight - Invite To Site
 
Share for iPhone UI Wireframes - User Story Two - Search for Document
Share for iPhone UI Wireframes - User Story Two - Search for DocumentShare for iPhone UI Wireframes - User Story Two - Search for Document
Share for iPhone UI Wireframes - User Story Two - Search for Document
 
Share for iPhone UI Wireframes - User Story Five
Share for iPhone UI Wireframes - User Story FiveShare for iPhone UI Wireframes - User Story Five
Share for iPhone UI Wireframes - User Story Five
 
Share for iPhone UI Wireframes - Creating a Wiki Page from a Site
Share for iPhone UI Wireframes - Creating a Wiki Page from a SiteShare for iPhone UI Wireframes - Creating a Wiki Page from a Site
Share for iPhone UI Wireframes - Creating a Wiki Page from a Site
 
iPhone Paper Prototype - Creating a Wiki Page Outside a Site
iPhone Paper Prototype - Creating a Wiki Page Outside a SiteiPhone Paper Prototype - Creating a Wiki Page Outside a Site
iPhone Paper Prototype - Creating a Wiki Page Outside a Site
 
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a Site
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a SiteShare for iPhone UI Wireframes - Creating a Wiki Page Outside a Site
Share for iPhone UI Wireframes - Creating a Wiki Page Outside a Site
 
iPhone Paper Prototype - User Story Ten
iPhone Paper Prototype - User Story TeniPhone Paper Prototype - User Story Ten
iPhone Paper Prototype - User Story Ten
 
iPhone Paper Prototype - User Story Five
iPhone Paper Prototype - User Story FiveiPhone Paper Prototype - User Story Five
iPhone Paper Prototype - User Story Five
 
iPhone Paper Prototype - User Story Four
iPhone Paper Prototype - User Story FouriPhone Paper Prototype - User Story Four
iPhone Paper Prototype - User Story Four
 
iPhone Paper Prototype User Story Thirteen
iPhone Paper Prototype   User Story ThirteeniPhone Paper Prototype   User Story Thirteen
iPhone Paper Prototype User Story Thirteen
 
iPhone Paper Prototype - User Story Eleven
iPhone Paper Prototype - User Story EleveniPhone Paper Prototype - User Story Eleven
iPhone Paper Prototype - User Story Eleven
 
iPhone Paper Prototype - User Story Nine
iPhone Paper Prototype - User Story NineiPhone Paper Prototype - User Story Nine
iPhone Paper Prototype - User Story Nine
 

Recently uploaded

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Recently uploaded (18)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

Alfresco Share - Forms

  • 1. Forms - Layout and Interaction Ideas Still to do: need to split out into ux cases consider input masking
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 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. Category Control and Picker - Ideal Interaction Route we would like to go if sufficent engineering resource
  • 15. Form Name * Required field Fieldset with label wrap Categories: Fieldset with label wrap Select Fieldset with label wrap Submit Cancel
  • 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. Form Name * Required field Fieldset with label wrap Categories: Fieldset with South-East Asia | label wrap Select Fieldset with label wrap Submit Cancel
  • 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. Form Name * Required field Fieldset with label wrap Categories: Fieldset with South-East Asia | label wrap Select Fieldset with label wrap Submit Cancel
  • 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. 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. 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. 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. Category Control and Picker - likely Interaction Route we are likely to go
  • 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. 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. 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. More examples of pickers
  • 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. Select Folder... Browse : Source Search Source Site Folder Folder Folder Folder Folder Cancel OK
  • 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. 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. 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