Category: Usability

10 best practices for mobile form design

if_seo_web-46_1046182.pngUX Matters had this interesting article on mobile form design. At frevvo, we’ve created thousands of forms and workflows for mobile devicesand we’ve learned a lot along the way. One thing is absolutely true:

“As technology continues to go through metamorphoses and our understanding of users’ needs becomes more refined, good mobile form design is constantly evolving.”
– Quoted from above article

Getting your forms to be genuinely usable on mobile devices is hard but can have big benefits. Fortunately, with frevvo, you don’t have to worry too much about this. Let’s take a look at a few things mentioned in the above excellent article:

1. Use a single input field where possible

It’s all well and good to say create a single input field called Name but if the form integrates with your CRM or some other back end system, maybe a First and Last name are required. With frevvo, you have all the flexibility in the world. Display a single field on the form called Full Name and use a business rule to split it into First and Last name hidden fields if that’s what you need. There’s going to be some guesswork to split it accurately but you can automatically get it right most of the time. Serve the needs of your marketing team and your users at the same time.

2. Create a conversational flow

if_seo_web_2-43_1045323.pngAs Justin Mifsud pointed out back in 2011, “A form is a conversation, not an interrogation.” The flow of information in the form should have a conversational feel. Usually, this means split the form up into multiple pages that feel natural. But, you have to consider differences between mobile and desktop forms. What might be natural on a phone with its limited screen real estate doesn’t make sense on the desktop and could be irritating – why do I have to walk through so many steps?

Fortunately, frevvo makes it easy. Simply drag in Page Break controls and mark them smart phone only. On a desktop or tablet with lots of screen real estate, you’ll see the whole form (or Section or Tab). On the phone, it’s broken up into multiple pages with automatic Next and Previous buttons.

3. Automatically pre-fill values in fields

No explanation necessary – the less stuff users have to fill in the better off you are. This is one of frevvo’s strongest suits. You can pre-fill information from any number of sources. For example, check out this example that fills out Customer information from a SQL database. Another common example: if the user is logged in, you can automatically fill in their personal information. It eliminates errors, reduces typing and is far less frustrating for users.

For mobile users, frevvo supports functionality like GPS integration. You can use the GPS device on the phone to pre-fill an address field or figure out the location of the closest physical store and display it on the form.

4. Make forms accessible

From the UX Matters article: Of the people who have disabilities, 91% use a mobile device, according to a 2013 study (PDF) by the Wireless Rehabilitation Engineering Research Center. Wow! I had no idea. Technology, especially mobile technology is making the world more and more accessible to people with disabilities but only with accessible mobile design.

Fortunately, with frevvo, accessible design is just built-in. Our forms and workflows have been accessible (satisfying WCAG guidelines) for years. Government organizations worldwide have legal requirements to provide accessible forms and many are already using frevvo for their constituents.

5. Break up lengthy forms into steps or stages

if_seo_web-48_1046184.pngThis is very connected to #2 above. With frevvo, breaking up lengthy forms into steps is a piece of cake. What’s best is that you can design your form once and set it up so that it’s broken up into steps on a phone with automatically generated Next and Back buttons. On the desktop with its abundant real estate, you can simply show the entire form or break it up into fewer steps. Again, satisfy the needs of your users with a natural user experience no matter where you are.

You can also create multi-step flows in frevvo (we call them screen flows) that explicitly walk you through multiple steps on all devices with a progress bar / nav bar at the top etc. It’s totally up to you.

6. Create minimal forms, but ask the essential questions.

rb-03This is a particularly crucial aspect of form design. Obviously, in frevvo, you can create as minimal a form as you want. One of the most effective things we’ve found is context-sensitive show/hide. It’s easy with frevvo using simple, visually-built business rules. In any form that’s displayed, hide away unnecessary fields until they’re actually “essential”. For example, on an Employment Eligibility Verification form, some questions may only be applicable to non-citizens. Hide them away until the user selects the “I’m not a citizen” option.

You’ll find that users are less confused and more likely to complete and submit your form if the screen is less cluttered. It seems obvious and fortunately, with frevvo, it’s also a piece of cake.

7. Display mobile-friendly error messages.

cancel-153645_640.png

This is yet another crucial aspects of good UX. IMHO, this is applicable on all devices not just mobile. We’ve seen so many instances of forms where you fill it out, submit, the server thinks for a while and reloads the page with errors. The errors may be displayed at the top far away from the fields. It’s a nightmare.

With frevvo, user-friendly error handling has always been a priority. Validation of controls is instant and usually automatic. If there’s an error, the user will know immediately. The control visibly changes (color/icon) and an error message appears right below the control. You can customize this message to be meaningful to the user and it can even be configured dynamically so that it tells the user precisely what went wrong.

With frevvo, you also cannot submit invalid forms. If required controls aren’t filled in or there are errors and a user still clicks Submit, the form will automatically highlight the errors/missing data. If you want, you can also display one or more custom messages right above the Submit button that was clicked so the user knows that something went wrong.

The thing you want to avoid is “Oops! An error occurred. Please try later.” Nothing’s more frustrating for users. Fortunately, with frevvo mobile [and other] user friendly error handling is automatic and built-in.

8. Avoid using drop-down menus and lists.

It’s true. Long drop down menus/lists are not very user friendly on mobile. Where they can’t be avoided, frevvo does provide a natural mobile friendly experience. For shorter lists, we definitely prefer radio buttons. With frevvo, it’s easy to lay them out so that if two or more fit on a single row, they’ll be laid out side by side and consume less real estate.

frevvo also offers an auto-complete Combo box though we’ve found that it’s not necessarily a better experience on mobile than a pick list. The good news is you can choose whichever control makes sense for your needs.

More from frevvo

9. Bigger buttons, radios etc.

One of the other things we’ve learned is that it’s genuinely harder to click things with your fingers on mobile. Therefore, in spite of the reduced real estate, frevvo’s controls are subtly larger, buttons are just a bit bigger, radios are easier to click on etc.

10. Responsive forms

LandscapeWhen fonts are too small to read or the screen looks cramped, what will many users do? Rotate the device to landscape mode so there’s more horizontal real estate. Nothing’s more frustrating and annoying than to see the same size form with the same fonts displayed on the landscape screen – even Google and Amazon do it.

With frevvo, all this is just automatic. From big wide desktop screens to small smart phones, your forms will automatically adjust. Rotate your device – the form will expand to take up all available space. Zero CSS3 or HTML5 or any code. It just works.

11. BONUS – Good looks

Let’s face it. People are more likely to use UIs that look good. Forms aren’t the world’s sexiest user interface but they are ubiquitous. Might as well make them look great. With frevvo, that’s also automatic 🙂 Do nothing and your forms will just look good on all devices. And there are many little bits of eye candy such as decorators – add little meaningful icons to your controls e.g. an envelope for an Email field or a map marker for a Zip Code. Styles let you customize colors so your forms fit into your brand and website. These are little things but they can make a huge difference.

Mobile is everywhere and forms are everywhere. You probably have mobile users filling out forms and participating in workflows in your organization. With frevvo, make them mobile friendly without the need to spend significant resources and money.

 

 

 

Get people to actually use your shiny new workflows

infopath-replacement.png

Hint: It’s all about Usability!

You’ve invested in workflow automation. Looks great but sometimes getting people to actually use it can itself be a Sisyphean task. People resist change and will quickly fall back to bad habits like emailing PDFs and Excel spreadsheets around to manage key information.

So, how do you onboard your users?

1. Involve them from the beginning

This is a pretty obvious one. The earlier you get stakeholders into the process the more likely they are to adopt it. People are naturally more invested in a solution that they’ve had a chance to impact. Soliciting feedback and actually implementing suggestions are critical elements.

When we work with customers on a new project, we go to great lengths to set this up. We spend time upfront to make sure we’re building something users want and make sure there are at least a couple of UAT-Change Request Implementation cycles. That way, the people who have to actually use the new system can affect it.

2. Usability, Usability, Usability!

if_seo_web-34_1046124.pngI can’t stress this enough. It does not matter how robust and awesome your system is. If it’s hard to use, it will not be adopted. If it looks good and is easy to use, people will forgive other shortcomings.

Usability (for end users) should probably be your #1 criterion in selecting a workflow automation system. Some tips:

  • Great Looks: Employees are also consumers. They use slick apps everyday and get used to a fantastic UX. If work apps have old-fashioned, clunky UIs they’ll never catch on.
  • Sensible Terminology: Make sure your buttons, labels, messages are familiar and helpful. For example, if the workflow will route to the CFO for secondary approval the button should say “Route to CFO” rather than the generic “Continue”.
  • Help Text: Some fields require further explanation. The Label is not always enough. Take the time to add help and it can make a huge difference. Tooltips and placeholders are other options.
  • Mobile friendly: It has to work naturally on all devices. Buttons might need to be slightly larger on mobile so they’re easier to click using your finger. Forms may need to be broken up into multiple pages to avoid overwhelming smaller screens.
  • Speed: Don’t underestimate the value of performance. People love systems where they don’t have to wait around.
  • Consistency: A big part of great UX is consistency. Buttons should be in the same place, labels should follow consistent conventions, the look & feel should not vary dramatically from one process to the next.

3. Training / Feedback

1492276951_seo_web_3-01.pngEnd user training should be part of every rollout. But, it’s just the first step. Once people have used the new system for a period of time, they’ll have feedback for you. It’s worth going back and actually talking to stakeholders – is this helping you? Are you doing less manual work? Do you genuinely have more time for things that matter? What can we improve?

4. Iterative improvement

Once people tell you what you can improve, it’s important to go back and actually address issues as quickly as possible. Nothing’s more frustrating than getting it 90% right only to see users abandon your system because you overlooked a couple of things.

5. Communicate success

Share meaningful success stories with everyone involved in the system. Recognizing people’s efforts (company meeting, spot awards) in bringing change to the organization will always be appreciated as long as you don’t overdo it and the recognition is for real measurable gains.

Ultimately, though, we’d advise you to focus hardest on Usability. If they find it hard to use the new workflows, the rest doesn’t matter.

 

Announcing frevvo 7.2

form-workflowToday we’re happy to announce the general release of frevvo 7.2. Cloud customers were automatically upgraded on April 29. On-Premise availability is coming up shortly – subscribe to Release Announcements for the precise date. This release also includes upgrades to the Database Connector.

We know that frevvo is powerful software but there’s also a learning curve. frevvo 7.2 is the first in a series of updates this year focused on making it easier to use.

Visual Rule Builder

VRBTopDiagram3

One of the main areas customers tell us about is Rules. They’re really really powerful and many customers love the flexibility of being able to write JavaScript code and create very complex, dynamic behavior. But, they can be hard to use. Enter the Visual Rule Builder. Using it, you can create many rules visually rather than writing JavaScript. Read more in this blog article and find detailed documentation here. We’re excited about this new capability and expect improvements over multiple releases to make it easier and increasingly capable of replacing JavaScript-based rules.

This release also includes some security enhancements – e.g. user ids no longer appear in URLs and are replaced by opaque UUIDs – and other under-the-hood improvements needed for future ease-of-use improvements.

Database Connector

The DB Connector is one of the most widely used connectors – customers have created all kinds of integrations with their SQL databases. Most of the improvements made in this release are fairly technical and we won’t go into details here. See the Release Notes for reasons to upgrade. We’ve also made several under-the-hood improvements so we can make this oft-used connector easier to use and as point-and-click as possible. We’ll detail those in future blog posts.

We’re excited about this release and several upcoming ones. The focus is squarely on updating and making so many of the good things we do easier to use.

 

Using Control Templates

When designing forms and workflows, there are some common use cases that come up very frequently. Some of these have associated business rules. Control Templates provide a mechanism for building these once and re-using them many times. Let’s take a look at an example and see how you can use it. You can try these templates by clicking on this link and download the form here if you want to view them in detail.

Automatically set today’s date

Purchase Order, Employee On-Boarding, Expense Report, Leave Approval and many other forms have a date control that should be automatically set to today’s date. Instead of making the user type it in, we can just set it up automatically with a trivial business rule:

if (form.load) {
if (tDate.value.length === 0) {
tDate.value = frevvo.currentDate();
}
}

Easy enough. Now, let’s turn it into a reusable control template.

Step 1: Put the Date control in a Panel and give it a nice user-friendly name like Current Date Panel. You can publish just the control but it’s necessary to put it into a panel so that the associated rules get carried along.

datePanel
Panel with a User-Friendly Name

Step 2: Drag the Panel into the Custom palette. Hover the mouse over the header of the custom palette area while dragging. The header and drag icon will change and you can drop the control into the palette.

customPalette
Drag/Drop into Custom Palette

Step 3: When you drop it in, a wizard appears. Enter any desired tags, a description and make sure you check the box next to the rule. The read-only box will automatically get checked. The tags can be used later by other designers to find the published custom control. The read-only box prevents changes to certain properties that could cause the associated rule to fail. Then click Submit and Voila! You have a published custom control.

publish
Publish Wizard

 

How can another designer use it?

It’s simple. In the Form Designer, open the Custom Palette and click the Search link. In the wizard that shows up, you can view all published custom controls or enter a string and click the Search Controls button to narrow the list by tag. When you find the control you want, check the box next to it and click Finish.

searchCustom
Find Published Templates

The control will appear in your Custom Palette from now on every time you open the Form Designer. To use it, simply drag & drop it from the Custom Palette into your form. The layout and behavior will be preserved. In this example, the date will automatically initialize to the current date.

The example form above also contains templates for calculating a sub-total and grand total for line items in a Table and for initializing controls automatically with the currently logged-in user’s information (e.g. First Name, Last Name). You can download the form by clicking on this link to view the controls and associated rules. We’ll discuss these examples in a separate how-to article.

 

 

La Cité College chooses frevvo for student applications integrated with Salesforce, DocuShare and Oracle.

Deeply rooted in the National Capital Region and Eastern Ontario for over a quarter of a century, La Cité is the largest French-speaking applied arts and technology College in Ontario.

lacite1

1200+ registration forms have already been submitted electronically with a 24/7 service offering. Students save time since they no longer have to stand in line for registration. Instead of lining up, they simply complete the process on their smartphones.

La Cité serves a diverse population from students and faculty to a large student body. Students, in particular, prefer to use their mobile phones for almost everything. Yet most of La Cité’s forms and applications were paper or PDF documents that had to be printed out, hand-filled and signed. They didn’t integrate with databases, DocuShare (their document management system) or salesforce.com (CRM).

That means students filling out long forms by hand and standing in long lines to register, internal employees scanning and indexing paper forms and a tedious, inefficient overall experience.

Students love the built-in mobile support. Now that the forms are compatible with devices, 60% of responses have come in on mobile.

La Cité decided that they needed to improve services to students and staff. They selected frevvo Live Forms and, in a matter of months, they’ve replaced several paper/PDF forms with electronic ones. They’re available 24/7, work automatically on mobile devices, and integrate with DocuShare, Oracle and salesforce.com. frevvo forms also work in multiple languages including French, which is the dominant language on La Cité’s campus. Data is pre-populated, frevvo’s build-in validation ensures fewer errors, documents are automatically stored in DocuShare and salesforce and students are no longer standing in line.

Co-Op applications, which used to be paper are now electronic. As a result, the number of applications has gone up from about 10 in previous years to over 70.

The results have been impressive and La Cité plans to roll out several additional forms and workflows in the coming months.

Click here to read the Case Study and contact us if you’d like more information or to sign up for a free 30 day trial.

4 weeks vs 1 year? Really?

Building it themselves would be out of reach – we’re talking hundreds of thousands of $ and a year of time. With frevvo, it’s up and running in just a few weeks.

automation
Complex forms & workflows are really hard to program by hand

It started out as a casual conversation at lunch. But, I was so surprised at the answers I couldn’t believe my ears. Check out the little Q&A below with Courtney Bernard, one of our Customer Success whizzes.

FB (Frevvo Blog): What do you do at frevvo?
CB (Courtney Bernard): I wear a few hats in the Customer Success area. Obviously, some client services but I also do some training & customer support. I also do some of the voice overs for frevvo’s videos.

FB: This recent project, what’s it all about?
CB: It’s a customer in real estate (Jameson Sotheby’s International Realty). They sell real estate. But, before selling any property, it must first be listed – an MLS listing. That means filling out tons of paperwork – anyone who’s sold a house is probably familiar with this. You have to fill out literally dozens of forms, sign in a bunch of places, write in the same info over and over again, correct mistakes etc. It’s painful.

For our customer, obviously, speeding up the listing process is a good thing. They wanted to turn everything into an electronic form/workflow. No more mistakes, duplicate typing or signing, save tons of time.

FB: Ok, so what’d you do?
CB: We did it for them.

FB: Just like that?
CB: Well, no. This is an MLS listing. It’s huge. I’d guess there were 350 maybe 400 fields at least. And, it’s really complex. Many fields depend on others. For example, some fields are part of one type of listing others are not. Choose an option in one field and a bunch of other fields may be affected. We needed to generate a nicely formatted PDF. And, the entire form must work on a mobile device (usually a tablet) since associates are typically out in the field. So, it wasn’t easy to do.

468f687102e8ae95d3bb546f922f2ba9
FB: Put that in a bit of context for us. If I wanted to hire someone to build this, how long would it take?
CB: Well, it’s a guess since I haven’t estimated it but I’d say easily 4-6 man-months for development and about the same for QA. Then there’s PDF generation and mobile. Do you really want it to look good on a tablet? That takes work and lots of time. So, somewhere between 9 to 15 months is probably a good bet. Of course, that’s if it works at all. The complexity is high so there’s a definite risk that it’ll fail.

[Spoiler: This is the part where I couldn’t believe my ears.]
FB: How long did it take you?
CB: Well, they did some of the testing work. It took us about 80 hours (2 weeks) in total. Assuming they spent about as long, we’re talking about 4-6 weeks total.

FB: WHAT? 4 weeks vs 1 year? Seriously?
CB: Yes seriously. I mean the 4-6 weeks of work was spread out over 4 months (holidays, other projects, delays etc) so 4-6 weeks is the actual time we spent.

FB: How the heck is that even possible?
CB: I know. It’s crazy. frevvo is incredibly good at making these large, complex business forms usable. If you had a simple 1-page form with 10 fields, the difference wouldn’t be so drastic. But, as complexity rises, the # of fields increase, dynamic behavior, business rules, PDF, mobile etc. come into play, the cost of building rises dramatically. That’s where frevvo really shines. It’s amazing how easy it is.

FB: Jameson’s must have been pleased?
CB: Without question. They’re reasonably big but not huge. Building it themselves would be out of reach – we’re talking 100s of thousands of $ and a year of time. frevvo puts the benefits of this kind of automation in the hands of companies like Jameson Sotheby’s who realistically wouldn’t have access to it otherwise. That’s huge!

FB: And, what else do you do when you’re not helping customers succeed?
CB: Read, listen to podcasts, ride horses, go hiking, play with my son, watch Downton Abbey and root for my beloved New England Patriots.

There you have it folks! A single form that would have likely cost $100s of K completed in a matter of weeks and far far lower cost with frevvo. And that doesn’t even take into account the productivity benefits that will accrue for years to come.

Read the Jameson Sotheby’s International Realty Case Study. Highly automated organizations get 5X more done and save up to 80% of costs compared to those who are still using paper/email based processes. Why not try frevvo yourself? Contact us now for more information.

Jameson Sotheby’s International Realty chooses frevvo to automate MLS listings

Jameson Sotheby’s International Realty is the exclusive Chicago and North Shore affiliate of the Sotheby’s International Realty global network. Jameson’s has a 30-year-old reputation for integrity, honesty and results in the Greater Chicagoland area.
jamesons
The company sells real estate. They want to get listings out as soon as possible and provide their associates with a great user experience. Unfortunately, listing a property is a time-consuming process involving many paper forms, lots of data, and multiple signatures.

They chose Live Forms to automate the process and eliminate paper, collect data electronically, sign on any device and expedite listings.

Read the Case Study.

Highly automated organizations get 5X more done and save up to 80% of costs compared to those who are still using paper/email based processes. Why not try frevvo yourself? Contact us now for more information.