We have a long for which has 3 sections:
requester, shipping and billing
each section screen or more long so the form is 3+ screens long. From usability perspective what is the best way to display messages on the form.
Grouped list of error messages at the top of the form.
Grouped messages for each section at the top of the section
Error messages near to the form field which actually has the error.
Personally, I would like, at the top of the page before the form headers, to have something like:
There was an error with your form submission in the following section(s):
Shipping, Billing
Where Shipping and Billing are anchors that will take me down to that section of the form.
Then, above that section, have the relevant messages to that section:
Shipping
- You need to fill in an address
[rest of form here]
Billing
- You need to fill in a name
[rest of form here]
Grouped messages for each section at the top of the section
with a visual change to the form field which actually has the error.
I find it most usable if there is a generic error at the top of the form saying something like "There were errors submitting your information, please correct the fields in red" then show the more specific error messages next to each form field that had an error.
Roger Hudson has a very good article on writing accessible forms
and an example on error handling.
I like to have a dialogue that shows the type of effected fields, let's them click okay, then scrolls them to the first error in the form.
The affected field is then indicated with a flag/border/marker of some kind and a message letting them know the type of problem.
So, if they entered a malformed email address like "me#me'com" if would let them know the email address is malformed. The exact wording is really dependent on the type of user you are targeting.
I HATE forms that tell you there are errors at the top, then have tiny little asterisks by the fields.... ugh.
P.S. It also drives me nuts when a form has a "password" or other sensitive field and it gets emptied without marking it as a required, corrected field as well.
Related
I have been sent an example of a mailchimp HTML email which allows users to re-express their wish to stay on a mailing list. It just contains a brief message and one big button "Opt In" which users simply have to click once. The code of the button is as follows:
<img src=3D"https://somewebsite.us6.list-manage.com/track/open.php?u=3D=e57uw79a33&id=3Dhs7de4d771&e=3D936b9800f2" height=3D"1" width=3D"1">
(Obviously I've changed the URL and ID parameters for security). I'm trying to work out how the sender has done this. I'm not clear whether the result of hitting this button moves the subscriber onto a new list, flags them in some way, or removes subscribers that haven't clicked the button after some time limit- but any of those would suit our needs.
After a long time searching the net and options within Mailchimp, I still can't work out how to do this?
The most relevant article I can find about "Reconfirming a list" is this, but it seems a very roundabout way of doing it, plus the example email I have received appears to have been sent with Mailchimp which goes against what the article says, PLUS the article's instructions is to provide a link to a signup form rather than an embedded one-click button within the email itself, which is what I want.
A way to track the reconfirmations of your mailing within mailchimp:
Create a new campaign for your old list. Add a button 'Yes I want to continue to be on this list' and 'No thanks, remove me from the list'. The buttons should point to two different urls that undisputedly match the intent (e.g. example.com/stay-on-list or example.com/unsubscribe); prepare them on your website with whatever message you want to give them.
Send the mail; Mailchimp will track the links clicked for every user (this is by default, check your settings if you might have changed this) (this is actually why I hate to be on mailchimp, but for today it's convenient).
Wait a few days (or just before you want to send your next mailing)
Go to 'Reports' and click on your latest campaign
Click on the numbers clicked link and then do for the 'continue' link: Download the list as CSV; upload this CSV to a new list which is now 'cleaned'
For the 'unsubscribe' button; download the list, open it in your spreadsheet program (Excel, LO Sheet), grab the e-mailadresses and unsubscribe them manually from old list.
You now have two lists: one cleaned with properly confirmed addresses and one with members you're not sure of. You could try again with your next mailing but at a certain point you probably have to discard your old list (actually, EU-focussed organizations already should've already discarded these lists, but if you're a small org you might get away with it (AT YOUR OWN RISK: THIS IS NOT LEGAL ADVISE)).
But you may want some additional proof, because you don't have a list of who clicked what when. The risk is that someone someday might dispute his or her intent to be subscribed to your list. And the user dump you made from people who clicked on a link isn't really giving you much information that you can use and say, well at that day you did click on Subscribe. To the rescue is the MailChimp data dump (Click Username > Account > Settings > Manage my data), which actually gives you quite a simple table of timestamps, links and emailadresses. Will this hold in court? I really don't have a clue, it is easy to fake (it would've been better with ip-addresses etc), but at least it gives you some track record. Note that the data in mailchimp itself is not hard to fake, but maybe one day this data is gone, hence keep the MailChimp data dump.
(btw. before you do all this, maybe clean up your list beforehand: https://mailchimp.com/help/remove-inactive-subscribers/)
Actually, I quit mailchimp in favor of MailingBoss, but I believe AWeber also does this... they have what's called a "capture email" that is unique to each list... if you connect a button to it by using "mailto" link ... then it opens the users default email client and pre-populates their main email in it. Once they send that email to your capture email, it ads their email to your list. Pretty sweet stuff for mobile users.
Here's a vid on it
I couldn't figure out how to achieve this with MailChimp ...but in regards to the technique you want to use, after reading the MailChimp documentation I believe that the person likely achieved it by simply using segmentation... anyone that clicked the button was segmented and then perhaps only that segment was sent their follow up emails or maybe even the the segment that didn't click the link was manually unsubscribed on the back end...
In PHPfox, i want to call "Pages" name in drop-down in Signup form. Reason for calling "Pages", Actually i have created many pages for college name & that are saved in database. So if someone comes for signup, i want to show them college name in drop-down (which are basically "Pages").
Please help me.
Thanks in advance.
You will need 2 plugins, one to show the HTML and one to process what to do with the user input:
1) Make a plugin that fetches the pages, maybe the hook user.component_controller_register_1 or another in that controller would do but otherwise you can always use a low level hook like run_start and check if its the section where you want it.
To show the HTML you have 2 options: include a JS file to populate the sign up form with anything that you want, or if you have a custom template you can just assign the array to the template variable and look through it in your template.
2) Once the html part is showing and working make a plugin for the sign up routine, I think the hook user.service_process_add_1 should be enough given its location.
Dont forget that the input name for the signup is an array, so your drop down needs to look somewhat like this:
<select name="val[my_dropdown]">
I'm looking for a simple anti spam form submission solution, other than Captcha. I've tried implementing Captcha into my website for anti-spam purposes, but it's been too difficult to integrate into the site. I don't get many spam attacks but I'd like to have something in place for the random spam that I get. Does anyone know of something they think would work?
you can add an additional textfield to your form and hide it with css. human users don't see the field, so it should always be empty. spambots usually fill out all form fields and don't know that this one is hidden. if you receive any content in this field, reject the form submission.
Put up something like "What is 3 plus 6?" and give the user a form to type the answer. Any human will get that, including blind ones who can't see a captcha, but no bot will. You don't even need to vary the numbers, really.
Currently, HTML5's new input types,
<input type="number"...>
<input type="email"...>
<input type="url"...>
simply focus on any offending text-boxes with mismatching user input upon form submission.
Problem: Focusing is fine. However it's a very subtle way of telling the user why the form is not submitting.
Which of these is the better solution to let the user know what's wrong:
Add css on a focused textbox by
adding a background color. It's still
slightly subtle and the user might
not immediately understand why a
particular textbox is focused.
Javascript validation (jQuery
validation plugin) for displaying error messages. In which case, I might as well use ordinary input types, and do everything here.
Suggestions are welcome!
According to good old usability heuristics:
Error prevention:
Even better than good error messages
is a careful design which prevents a
problem from occurring in the first
place. Either eliminate error-prone
conditions or check for them and
present users with a confirmation
option before they commit to the
action.
Help users recognize,
diagnose, and recover from
errors: Error messages should
be expressed in plain language (no
codes), precisely indicate the
problem, and constructively suggest a
solution.
http://www.useit.com/papers/heuristic/heuristic_list.html
The best choice is to clearly notify the user about the error (not only where has happened, but also why...). Above that the UI should be clear enough to prevent the user from unallowed input.
IMHO you can use JQuery for error handling, still leaving html5 types, which are "semantically" better than ordinary input types.
Make them go red.
Which approach do you all think is better?
Next to each field, highlighting each field in a distinctive color or with an easily distinguishable mark, so it's self evident where the problems are, especially on a long form. Also place a help icon next to each failure providing more information in case it's needed by some users. In addition, do not forget to preserve the data that's correct in between failures.
I put a summary of the errors at the top of the form that gives details as to why a field value is incorrect such as "Field1 is Required and must be an integer". I also add visual indicators on the field that errored, typically an asterisk next to the field or changing the color of the input area.
It will always depend on the situation, but...
I prefer to do a non-obtrusive indicator (* perhaps) beside each field and show more detailed messages or a summary message at the top (or bottom) of the form with longer forms.
If the form is shorter, you can probably get away without providing a "summary". I changed my mind on this, you should probably provide a summary.
Identifying the field with an error is important, definitely. However, a summary at the top letting the user know that there are errors below can be helpful for a long form. Additionally, you can put more details in the top summary section that you might not have room for below.
We supply a small indicator next to each field with an error. When you roll over the indicator a tool tip gives you what needs to be fixed. We then also give a summary at the smae time so they can see all of the errors they need to fix.