Month: August 2012

“Your” Design

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.

You can try it here – Many Comments Form

Image

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.

Doing nothing … I wish

Sometimes, especially on beautiful, warm sunny days like today, it sure feels like it’d be sweet to help 🙂

No such luck here – we’re getting ready to roll out a massive new set of capabilities in frevvo this year with a huge focus on mobile (tablets and smart phones).

  • Deploy all your “stuff” in one place – from simple contact/survey forms to complex workflows like performance reviews/sales orders.
  • Design to your heart’s content. I mean really design not just tweak. Make the software fit your business rather than the other way around.
  • Access your stuff from anywhere: create a frevvo “space” and it’s available on your desktop, your tablet or your smart phone.
  • frevvo will automatically generate smart phone / tablet views for your forms that take advantage of their unique capabilities. Or, if you want to customize this see the second bullet.
  • Quick Views will let users quickly approve or reject tasks especially from their phones.
  • Grids, e-signatures on touch screens, PDF export … this release is chock full of new things.

It’s all exciting stuff and we’re racing to get it done but it’s warm and sunny and …

The Great App-splosion

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.

The Great App-splosion

Instant (real-time) validation

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.

iPhone form with ticks
The ticks take up space and distract the user
iPhone form with errors
The user is alerted only if there’s a problem that needs attention. The error is prominent (we don’t like it when it fades away) . A context-specific error message is displayed near the problem control.

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.

It’s Greek to me …

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.

Greek form with horizontal labels
Greek form with horizontal labels

Note: the labels were translated using Google Translate. Hopefully, it’s reasonably accurate since I don’t know Greek 🙂

Mobile web forms

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

Desktop Form on iPhone

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.

Break the form into small steps
Break the form into small steps

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.

iPhone Date keyboard
iPhone Date keyboard

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.

Oops! Even the big guys don’t get it right

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 🙂