i have a large form with a lot of fields. I used fieldset on it. How could I create a better experience to user/accessibility with this large form?
I think about split it. What do you think about it?
Don't re-invent the wheel and confuse the user. Keep it simple. You could break the form down into separate parts, either into separate steps or pages and even with a progress indicator to keep the user informed of where they are.
Form design patterns:
http://patterntap.com/tap/collection/forms
It would be much easier to answer this if I knew a little bit more about the form and what kinds of users you want to be accessible for (ie - you would want to use different techniques if you are trying to be accessible for seniors than you would use if you want to be fully accessible for sight impaired users). Rbaker gave you a tremendous answer and I encourage you to follow his advice/read the link he provided.
However, I would like to add one thing. There is no rule that says that a form has to appear on one page. There is also no rule that says that a 'form' cannot consist of a number of individual questions. Depending on who you want to be able to use your form, a system flow like:
Do you accept our privacy policy? (Click 'yes'/'no)
What is your full name? (Click 'ok')
Would you like to register? (Click 'yes'/no')
You wouldn't have to refresh the page after each question, but if you gave users some idea of how close they are to being finished the form, an individual question approach might be less intimidating and more accessible for your users.
Finally, be proud of yourself for being concerned with accessibility! Best of luck!
i think better if you can post screenshot of that form. from my experience you can tryout some of the steps
1. Keep only fields which you need for uyour system rest take out.
2. Divide into different section
3. if needed can have accordion kind of panels
4. please have proper feedback system, better if you can prompt feedback while filling the form itself instead of waiting for submit or finish button.
5. from the visual, great to have white/gray kind of interface
6. have proper instruction for fields if needed
7. button with affordance
artsrajesh
You need to check out the information on this guys site. Most amazing I have seen anywhere on the net
http://www.lukew.com/presos/
there are many videos, pdf's, power points on form best practices
here is a good start on the site.
http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
and here
http://www.lukew.com/resources/articles/web_forms.html
Related
I am contemplating building a website for my wedding next year. It would contain information about the event, photos and blogs from my fiancee and I.... you get the picture.
One feature i'd like if possible would be a way of letting my guests RSVP online. I envision that their physical invite has a passcode, which they enter into a text field on the site and tick whether they can or can't attend.
The passcode they entered will be compared against a secure guest-list containing names and passcodes. If it doesn't match, they receive an error message, if there is match however, the information is then relayed to me via email. I will probably build the site using Wordpress, so I would be dealing with PHP.
Can anyone recommend how i might approach this project, as being a front-end dev I have absolutely no idea and my ambition exceeds my limited PHP knowledge.
Would love to hear your ideas or suggestions.
Speaking in generalities, for this sort of thing I find it useful to start by outlining the various components of the system.
While the info pages can be static, you'll need a database to which you can persist your invite data, so I'd start by thinking about the data entities. Devise a list of entities that will exist in the system that might need data tables. E.g. invite, blog post etc.
Then think about the operations that need to be performed on those entities. Are they read-only? Do you need to create new ones, or modify existing ones? You'll need to write code to perform those operations at some point.
Then think about the various ways information from those entities might need to be presented to the user. This gives you an idea of what templates you'll need to build.
If you're thinking of using Wordpress, you can cover off the blog functionality and static page stuff using that application alone. You'd then need to think about how the RSVP functionality might be implemented separately to Wordpress, or within it as a plugin. If you're really lucky, there might be a plugin out there already that will do what you need - or something similar that you can augment yourself.
If you're new to the backend side of things I'd recommend building a blog + static page site using Wordpress, getting it "done" and then looking at the RSVP stuff as a second phase. At least then if it proves unfeasible you still have a useful working site.
Hope that helps!
I'd build this as a simple plugin for WordPress and create an additional DB table that would hold the name against the passcode (this could be auto-generated based on the ID or otherwise).
You could then make a simple admin page when you can add new guests and check the response of guests.
First: congratulations with your marriage. From what I understand you have very little knowledge of PHP so start with reading a few books or articles about basic PHP/MySql. Then, put your ideas in a drawing or flowchart and just go for it. Make lots of mistakes, learn from them, ask for help on SO or a PHP colleague or friend. And above all, have fun doing it.
If I were in your shoes I would install the contact 7 plugin. In the contact form, add passcode as a required text input. Have the results emailed to you and to them. They could make up the passcode which is the downside.
This doesn't have all the options you are wanting but you can either spend several hours writing your own php code and then trouble shoot it, or just install the plugin and be done in 30 minutes.
When I first started web development with php, when using POST I would have the page with the form that contained the information and then another php page which the “action” attribute pointed to and hence where the all the processing i.e. database work was done. After making a website with many forms I found that I was building up lots of pages and it was getting quite messy.
Then I started to look for a way to avoid this. I then found that I could post a page to itself and hence halving the amount of pages that I needed to use to submit a form. I did this using the isset() function in php. The problem with this is that the whole page needed to be refreshed.
Even more towards the future I discovered jquery and its use of ajax to submit forms etc. This led me back to me original problem of having too many pages and getting confused with what did what. So now I am wondering (although I’m not quite sure I can make sense of it) if there is a way to combine the two? Can jquery use ajax to process a form which points to itself?
The other options that I was thinking of would be to have one page that I send all forms and actions to, which has all my processing in and determine which section to use based on a switch. I’m not sure of the effects that this would have on performance though.
What views do you have on each of the methods?
What are the pros/cons?
Are any of the methods I mentioned frowned upon/bad practice?
This question has been baffling me for a while now, and so I thought it best to get the thoughts of the experts.
Thanks in advance.
Adam Holmes.
Well the answer is quite simple. Jquery uses AJAX to request pages the same way as you would with a regular form. Thus you can use jquery to post information from the form on the page itself, and then as you would normally with isset() do whatever you want.
The obvious advantage is that you don't need to refresh the page, and everything seems more seamless. However sometimes you will need to refresh anyway, for instance during logging in. The disadvantage is that users with javascript off will not be able to use that form, however from my experience this now mostly applies on mobile devices, and in limited manner even then.
I would say that using jquery/ajax to submit your forms is the way to go, just be sure to provide javascript-less alternative if it is something essential and if you receive a lot of traffic from mobile devices.
Somebody else will probably provide more elaborate answer, so take this just as a little summary.
jQuery can process it, and send anywhere you want :-)
Don't you thinked about using some kind of classes and autoload ( PHP 5 ) ? - it makes choosing in your second option much simpler ( somepage.php?class=Foo&.... )
I am quite new to web development and have a task to develop a web application that will basically show the user 5-15 pull down lists on one page, where each selection will limit the choices in all other lists. The user should be able to start with any one of the lists (so no set selection order) and when the user have selected something in each list or all parameters are otherwise locked by previous choices the user has to press the GO button and some calculations will take place, presenting a database selection. Basically it is a muliple parameter product selector application.
The relations between the lists are not simple, and could need calculated fields etc, and one list could affect the content of several others. The database behind will be MYSQL, probably a single large table, with perhaps 30 fields and 500-5000 rows. I will be using PHP, JavaScript and perhaps AJAX unless you have a strong reason not to.
I have done some research and found three ways to do this:
Send all data to the browser and handle the filtering etc client side with Javascript.
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
Use AJAX to change all list content dynamically without reloading the whole form.
Since I am so new to this I have a hard time telling which way to go, what pitfalls there are etc...
I have some conserns:
A. Slow initial loading. Worst for #1?
B. Slow dynamic response. Worst for #2?
C. Complicated programming. Worst for #3?
D. Compatibility issues for different browsers and plattforms. Have no idea of which method is most likely to create problems...better if I use some Framework?
E. Could I even try to make something at least part-working for people with javascript turned off? (like selecting each list on a new page and having to press GO button each time)? (I think I can tell my users they must have Javascript on so no big issue....) Perhaps #2 is best here?
F. I think the specification of "free selection order" means I have to download most of the database initially, so perhaps I should try to avoid that option.....if I keep it I might as well use method #1, or???
G. It would be best to do as much as possible of the selction/filtering in SQL to allow future extensions by building custom SQL code, so that gives a big minus to #1...
H. Other pitfalls etc???
I have found tutorials etc for all three methods, but if you can point to good resources like this I would appreciate it, especially so I dont base my code on examples that are not smart/good/compatible....
1:
http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
http://javascript.about.com/library/bl3drop.htm
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20523133.html
2:
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list3.php
3:
http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html
http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu
http://www.noboxmedia.com/massive-ajax-countryarea-drop-down-list/
http://freeajaxscripts.net/tutorials/Tutorials/ajax/view/Create_AJAX_Dynamic_Drop_Down_List_using_PHP_-_xajax.html
3+jQuery:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
Now to the question: Could anyone experienced in all these methods help me out a bit, with the evaluation of methods 1-3 above so I can choose one and get started on the right track? Also, will I be helped by learning/unsing a framework like jQuery+jSON for this?
Rgds
PM
I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.
Send all data to the browser and handle the filtering etc client side
with Javascript.
You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).
Send parameters back to the server after each selection and reload the
whole form after each selection.
Probably a littebit Javascript and
most code in PHP.
I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..
Use AJAX to change all list content
dynamically without reloading the
whole form.
By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)
My personal recommendation is to go with AJAX.
Raw SQL or not is really a question of what backend you are using.
You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.
The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.
It's no easy task to make it fully customizable.
The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.
jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.
Currently I'm wondering if there is a way to post to a website using captcha for a human-check. The following question is asked, ofcourse this is done with random numbers:
Type this number in digits; 'twohundredandfive': [ input ]
The form is sent using AJAX. So when reloading the website the number to be typed changes.
A way to get pass this is reading and converting the number, then post some data, but at the second request the number already has been changed (which is good). But IS there a way to avoid this?
Don't think I'm using this for bad intensions, the described form is used in one of my applications. It is just a check to get sure bots can't get pass.
Thanks so far :-)
A CAPTCHA should test whether the entity solving it is human. To my eyes, the problem you are setting looks like it would be fairly trivial to solve algorithmically.
Given that a human can pass the test, then it's certainly possible to write an automated bot which will pass it too. As to whether there is a "back door" which allows access without solving the CAPTCHA, only you can decide that by analysing your source code.
I hate CAPTCHAs. More often than not, they are unreadable to humans as well :)
I heard one Microsoft researcher offer the following scheme: put 4 pictures up, 3 of little puppies, one with a kitten. Ask the user to click the kitten. With a large enough sample base, you can create a random picture/question any time the page refreshes. No one will bother developing an algorithm to analyze photos to that degree.
read this post for another interesting idea.
Converting strings to numbers has already been discussed in another question where many references to the google calculator were given, which does a great job in such conversions, so your approach is not suitable for testing whether your user is human.
As for an alternate solution, I can only link to another great answer.
I have to build a large form for users to fill out in order to apply for graduate study at the college I work for. There will be a large amount of information to collect (multiple addresses, personal information, business information, past school information, experience, etc...) and I want to know the best way to handle all this. I'm going to be using PHP and Javascript.
Are there any helpers or pieces of frameworks that I can use to help with the building/validation of the form, something I can just pop into my existing project?
Also would like any advice as far as keeping track of a large form and the resulting data.
You need to use multiple pages, and you need to include a mechanism whereby users can leave, and come back and fill out the rest of the form later (or if they're accidentally disconnected). Otherwise you're going to have all sorts of user issues, not due to your service, but because they're using computers and internet connections that are flaky, etc.
Survey software is probably a reasonable approximation of what you're doing, and there are survey packages for most PHP CMS's. Are you building this from scratch, or do you have an existing CMS underneath?
-Adam
A few tips, without knowing all the specifics of your form:
Don't show the user everything at once - this can be accomplished by multiple pages, or by selectively showing/hiding elements on the form as the user progresses through it. Provide contextual navigation that says "You're on step 3 of 10" so the user can get a sense of where they are in the form and how much effort is required to finish it.
Providing a mechanism to save and return later is a fantastic idea. If possible, provide a link to an email account of their choosing - you want to make this component as easy to use as possible, and requiring them to fill out an additional username/password to retrieve their data is just another barrier to completion.
Only ask for what you absolutely need. Yes, you're going to have to fight some political battles here - everyone wants as much as they can get. One way to combat this (especially effective when you have pressure from multiple groups) is to build out some prototypes: 1 with EVERYTHING and one with several sections reduced or removed. Have stakeholders from each group fill out both of them and measure their time to completion or roll-throughput yield. When you've got completion data, and they realize how much every other group is asking for (in addition to their group) they are easier to work with. In short, remove as much as possible - let the user go back later to provide more details if they wish.
Write down all your inputs on index cards and see how they logically fit together. More often than not you will find more efficient groupings or orderings. More than likely you will come up with much more usable ideas. This is extremely important when converting paper forms to online forms. Usability.gov has a fantastic case study on this topic.
A List Apart have an article on building sensible forms that is a good read
Why does the form need to be large on the first instance? Can't you trim it down to the bare essentials for the account and provide a way for them to come back later to flesh out the rest of the details?
For form validation, pop a gander on the jQuery validation plugin, Validation
Well I agree with Adam but I have some advise for you.
If I were you, I would create some virtual hidden tabs instaed of multiple forms with a next button.
You can create some which can control by javascript. First show the first one which will collect personal information like Name,Birthday,email, and etc... .
Once user filled them out and clicked on next button,hid this and show the other which will ask for other information like address and so on.
Once the whole dive compeleted, at the last div put a submit button which will submite the whole information to the server at once.
By why do so?
User will not get shocked becuase will not see a long form at each time and will fill out with patient.
You hit server at once;usually universtites and college's servers are too busy, you better design a form which hit the server least. This could count as performance tip.
Since you will submit the whole data at once, you would not worry about the issue that user will continue to fill out the other pages or not,so you will use less session which still will count as a performance tip.
This way makes your form more interesting and you can called you did something like Ajax.
You can add Javascript form validation to make it more user-friendly, but one thing you should never skimp on is the server-side validation... which has historically been awful in PHP.
One thing that'll make your life a million times easier here is the filter library, especially filter_input_array() since you can build the input validation programmatically instead of having to copy and paste a lot of checks. It takes some getting used to, but it's much, much better than the old way of doing things.