When converting paper forms and manual process to electronic forms and automated workflows our customers are looking for solutions that lets them control the design. Often a cookie cutter solution doesn’t fit the way your business works.
Yesterday a customer needed a form that allowed for a comment for every selected medical issue checkbox option. In fact, the business required a detailed comment for each selected issue. Most eforms allow for a single comment per set of checkbox options. Using Live Forms’ business rules and theme customization features they created the web form they needed to fit their specific business requirements.
We agree with our customers… it’s very important to have a solution that enables YOU to control the form design and workflow so that it fits YOUR business rather than shoehorning your business into a solutions that doesn’t quite ever fit.
Came across this cool infographic from Click Software while doing some research into business/enterprise mobile apps. Like everyone else, we see our customers wanting to automate their business workflows on tablets (mainly iPads). As the infographic shows, enterprise tablet adoption is growing rapidly, it’s a huge market etc.
What I found most interesting is that their research shows that 3/4 of all mobile apps developed in 2012 will be integrated with enterprise services. No wonder I.T. is terrified.
One of the things customers love about frevvo forms is the built-in real-time validation. It’s a key usability feature.
Everyone’s filled out a form where you enter your data, click Submit, wait a while and get some errors. The errors are displayed at the top and fields in error are not highlighted. Often, some fields (e.g. passwords) get reset.
Real-time validation makes life a lot easier for the user. But, is it better to show a positive validation (e.g. a green tick) to indicate success or negative validation (e.g. a red background) when there’s a failure? We find the tick marks very distracting. On small screens, they also take up valuable screen real-estate as the image at left shows.
frevvo’s approach is to be minimize intrusions:
Don’t bother the user unless there’s something that requires attention.
Mark errors clearly and prominently and don’t let the visual indicator fade away and disappear.
Provide a clear and concise error message.
Show the error message next to the problem control.
Provide the feedback in real-time and not after submitting.
Don’t reset passwords or make the user enter data again.
It’s hard enough to get users to complete forms; why annoy them even more? Try it. You’ll find that users make fewer errors, complete forms faster, successfully submit them more often and are generally more satisfied.
Following up on my earlier article about top-aligned labels, I happened to be working today with one of our partners in Europe and this same question about placing labels to the left of the control came up. We realized that a label can translate into a much longer string in another language. And, that can obviously create problems if the translated label doesn’t fit. And don’t forget about right-to-left languages like Hebrew and Arabic. Horizontal labels could create unexpected results.
The problem gets even worse using the translated form on a mobile device where screen real-estate is already limited as the image shows. Yet another reason to stick to top-aligned labels.
Note: the labels were translated using Google Translate. Hopefully, it’s reasonably accurate since I don’t know Greek 🙂
As mobile continues to explode, there’s a lot of buzz around responsive web design. But what happens when forms are in the picture? A “responsive” site attempts to optimize its presentation across a range of displays. That’s fine when your users are mostly consuming content. When they need to interact with your site, client-side responsive design is not enough.
I’ll focus on just a couple of important items in this article. If you’re interested, Chui Chui Tan’s excellent article Mobile Form Design Strategies offers a number of guidelines for efficient mobile forms.
Desktop Forms are not usable
As the image hopefully makes clear, the user will have a very difficult time successfully interacting with your site. So, how can we improve the user experience? There are many considerations but I’ll focus on the two that I think are the most important:
Break the form up into small steps. The above form has three logical steps: choose a product, create your profile, and provide an address.
Make use of the device’s features to make life easier for the user e.g. specialized keyboards.
With frevvo Live Forms, customers will be able to easily create forms that look and work great on a mobile device. The software will automatically break up the form into steps and add Back and Next buttons. The user can also swipe back and forth to navigate through the steps. Of course, as the form designer, you can always tell frevvo where the logical breaks are.
If available, the device will automatically show the most appropriate keyboard for your control e.g. date and time pickers, email addresses, numeric fields, phone numbers etc. Users don’t like having to switch keyboards on the phone to find the @ symbol when entering an email address or switch to the numeric keyboard to enter a phone number. It’s a small convenience that I’m sure your mobile users will appreciate.
Of course, there’s a lot more that frevvo can do for you on mobile devices and I’ll be sure to post updates in the coming weeks.
As mobile’s exploding, everyone wants to deploy their web forms to tablets and smart phones. But even large companies like eBay can make crazy mistakes. I tried their mobile registration form and it won’t submit. It’s a simple mistake: the zip code field is mistakenly programmed to be a telephone. I know they have specialized apps for phones but hey, I might end up here in my mobile browser. The form illustrates how hard it can be to get it right.
Obviously, if you use frevvo, you won’t have to worry about these details but didn’t someone at eBay at least try the form once 🙂
We’ve had this question come up a few times. frevvo forms only support top-aligned labels i.e. the label must be placed above the form field rather than to the left. Why is this? It’s a question of usability. Without any eye-tracking study (and many have been performed), the picture below should make it obvious.
Your users have less to do (fewer eye fixations) to fill out the top-aligned form and studies have confirmed that it takes people less time to fill out top-aligned forms with fewer errors and higher completion rates.
If you really, really want you can create forms with left/right-aligned labels via a custom theme. But, you’ll end up with more usable forms if you just leave the labels where frevvo places them.