Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Resources for from design - best practices for layout?

Avatar

Level 2

Hi,

I have made a number of forms fo the past few years.  I feel like they look dated and are somewhat stale...   I have found a few resources out there on Javascript best practices and more mechanical focused articles, but nothing really specific design as it relates to usability and "feel".  I realized some of this is subjective and varies depending on the form's purpose, but I am just looking for some new ideas.

  • Does anyone have a resource or listing of froms they think are outstanidng from a design perspective?
  • Is anyone willing to share forms they think are outstanding? Just that baisics like information collection?
  • How much color and line type objects become to much?
  • What are some design elements used in "web 2.0" (whatver that really means) that we sould be using in our forms.  tempered with what can be done.

I am looking for this to be an open disucssion and am curious to hear what works for others.  I hope others will find this interesting and helpful.

Cheers,

Tom

30 Replies

Avatar

Level 10

As for the design, I've just started using a new pattern to make all my forms responsive, easy to read, easy to use and to look professionnal...

Here's some tips I'm using to have great forms..

  • Design: Titles and subforms, grey out titles to make them evident to see + create a block using solid borders around the title and its content to show boundaries...
  • Design: Have a space between each block using  0.1337in subform height, that makes the content much easier to understand and to see
  • Design: Most flowable possible, using positioned subforms inside flowed subforms to have objects side by side but flowable in the form...
  • Design: Be consistent, don't change design from one form to another, make sure to always use the same method you are comfortable with... If you want to try something new create a new form and make some templates, otherwise if you use something new, apply it to all your forms

  • Form Idea: One of my first forms I've builded was a Form Builder, a page that asks what is needed to be fill up, then create the form with the selected options
  • Form Idea: Validation of a form builder should not be using the Validation by default of Adobe... Making your own validation script is the best.

                         All your field using a background color red or w/e using radial to edge to add some beauty to the form... Create a method in an object Script to validate all fields                          one by one; e.g. : on the exit method of a textfield, call your object function to verify if the value is null

                                   if using a radioButtonList use the option event exit, and put the whole radio list with a background color instead of each options

//HyperLinks for ideas / help

http://www.youtube.com/user/nbru24

http://help.adobe.com/en_US/livecycle/es/lcdesigner_scripting_reference.pdf

http://help.adobe.com/en_US/livecycle/es/FormCalc.pdf

Avatar

Level 10

Forms that Work is a good book for form design, it's focused more on web forms but a lot of the information translates to paper or pdf forms as well.

http://www.formsthatwork.com/

I used to follow some of the stuff at uxmatters.com, here's a list from them on top books (a bit old now). I haven't tried the other books.

http://www.uxmatters.com/mt/archives/2010/12/the-top-5-books-about-form-design.php

Creating Dynamic Forms with Adobe LiveCycle Designer by J.P. Terry is a great book that covers design as well as creating forms in Designer. It's on the second edition now. http://www.amazon.com/Adobe-LiveCycle-Designer-Second-Applications/dp/0321941993/ref=la_B001IGV1VM_1...

Avatar

Level 2

Thanks Magus  That is very helpful indeed.

Do you ahve a screen shot or sample you would share of how your first part gets implemented?  This soulds like a great idea.  By grey out do you mean a grey background?

.13337 is the space between fields?  I did not konw that could be set.  I will have a look a the grid setup.

I am going to try to put  a sample of your radio button idea together - Thanks!

Avatar

Level 2

Thanks to you Jono those are great resources. 

I really like the PDF forms Bible that is now pretty old.  I wish they would update it.  To be honest I think it helps a newbie (like me) much more than the J.P. Terry book.  J.P.'s book is fine, I just wish it was more complete - like an updated version of the Bible book.  I purchased Terrys book and went throught pretty fast.  Certainly learned some things about ES4 I did not konw.  I recomended it, but wish there were more options out there.

http://www.amazon.com/Forms-Using-Acrobat-LiveCycle-Designer/dp/047040017X/ref=pd_sim_sbs_b_1

This next link is pretty old as well - it is a webcast from the PDF central conference.  It covers a great deal of item, but I seem to remember there being some good discussion by Angie Okamoto on from design.  I think there is another out there she as done but I cannot seem to find it.

https://adobechats.adobeconnect.com/_a200985228/p55119181/?launcher=false&fcsContent=true&pbMode=nor...

Thanks for the info!

Avatar

Level 10

The grid is your friend. Especially helps for vertical alignment for automatic tab order.

I use points for the grid with an interval of 4/pc (1/4th of a pica or 1/24th of an inch). This gives a grid of 3 points and I do all my field and caption measurements in multiples of 3 points, it works really well for me. I'm from a prepress and typesetting background so points aren't too weird for me.

Avatar

Level 10

I've also just made some new adjustements to my forms, I created 2 simple snippet code to use in any form if it is needed

1. Reset Data Form Except For 'x' Number of Fields

    

     1.1 Creating a script Object with two small methods to return a table with somExpressions of those you want to reset data

    

   

     1.2 Call the method in a click_event and send the form you want to reset data for, in this case it's             Main page

    

Enjoy!

Avatar

Level 10

And the second snippet code validates any form to check every fields if values are not null, if a value is null it will setFocus on the first null field

2. Validate Form and Focus on First Field that Fails Validation

     2.1 Create a script Object with two small methods to return a table of fields that have null values

     2.2 Create this method in your object as well, and will be called on a click_event

     2.3 The click event is where you write the special validation for different forms

I will post a form template as an exemple for these function

Enjoy!

Message was edited by: Magus069

Avatar

Level 10

Here is a sample of a basic form using my validation method and reset field method.

Please provide any feedback to my template form.

Can't preview in browsers, press CTRL + S to save it on your PC

https://drive.google.com/file/d/0Bz8yb5apn8y4a1RUY1R0R0RSbWs/edit?usp=sharing

Enjoy!

Avatar

Level 10

I've updated the sample for a more efficient function on Reset and Validation...

The reset function had some issue with more than one subform's instance, also added some new functionality to it to be more flexible

I've also separated the script objects and added some more pertinent comments so now it is easier to follow up my functions

Hope this will help!

https://drive.google.com/file/d/0Bz8yb5apn8y4TElTT0xZcGg4MTA/edit?usp=sharing

Avatar

Former Community Member

Magus069,

I've tried to use your validation script but I'm getting a syntax error. I'm hoping I can get this to work because it appears it will fit perfectly in a form I'm working on.

I placed the 2.2 and 2.3 snippets in the click event of a button on page 3 of a flowed form. Wondering if these have to be on different events.

The only changes I made were the field names for the exceptions array. Any suggestions would be appreciated. Here is the error message I get.

SyntaxError: syntax error

22:XFA:PersonalEDDQ[0]:PBPernsEDDQ[0]:SectionII[0]:EDDQSectionII[0]:ValidatePEDDQ[0]:click


Avatar

Level 10

Hi, I am not sure exactly what could bring up this issue, the validation code should be in a script object, and should be called from a button click.

I would surely help you, but if it's a syntax error it would help to see what you have done so far.

Avatar

Former Community Member

Hi,

I re-read your original post on Feb 17, 2014 5:42 AM and made some changes.

I created a script object on my form. I copied your snippets 2.1 and 2.2 into the object.

I added a button to my form, and copied the snippet 2.3 to the click event.

I changed only the field names in the exception code. I am fairly new to scripting and figured that the error message appears to indicate the line which contains the problem.

If this is a correct assumption, it seems to be pointing to this line.

 

var tab = myForm.getValExpressions(Main,tabExceptionFields);

Avatar

Level 10

Alright, do you think you could send me your form, maybe there's an issue that my validation is encountering in your form.

Avatar

Former Community Member

I tried to publish my form here but it is not allowing me. Any other suggestions?

Avatar

Level 10

Hi Kgetch,

Sorry for taking so much time in answering you for this question. I've just reviewed your form and found the problem.

As per the example you have seen in the form, 'Main' is suppose to be the Subform/Form which you want to validate. If your goal is to validate the complete form, you should be using PersonnalEDDQ in this case.

If in another example, you would want to validate 1 page only, instead of validating all different page you would have to write PBPernsEDDQ.

In another example. if you need validation only in a part of your form, which would be a subform somewhere in the PDF, you could write this: EDDQSectionI or EDDQSectionI2... etc.

Hope this helps!!

Mag

Avatar

Former Community Member

Mag,

Thanks for the help! However, Something still is not right.

I changed the Main referenece to PersonalEDDQ so it would validate the whole form. I them previewed the form to try the validate button but is still does not seem to do anything.

I dont think I messed up any of the other scripting but I went over it several times comparing it to your sample.

Avatar

Level 10

Hi Kgetch,

Sorry for not seeing this before...

I've just notice that there is a syntax error in your button...

Please verify your 'if' statement right under the line : var tab = myForm.getValExpressions(PersonalEDDQ, tabExceptionFields);

Avatar

Former Community Member

Magus069...that did it! Seems to be working now.

I'll have to test it to see how it behaves in various scenarios.

Thanks for the help! Very much appreciated!

Avatar

Level 10

No problem, keep me updated if you see any inconvenience or scenarios which would be considered as a bug.

Enjoy!

Avatar

Former Community Member

Mag,

I was testing a little this morning and it seems that the checkboxes in my form are being skipped.

For simplicity, I edited the validation button script to just validate the first page of my form which contains a bunch of required fields and several checkboxes.

One set of checkboxes should probably be set up as an exclusion group but others can accept multiple selections. Should your script be picking up the checkboxes or is there a different classname that needs to be added to list in the function?