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.

 

 

 

Citizen developers and the I.T. skills gap

In previous articles, we’ve talked about the contributions being made by citizen developers in may organizations. They’re using low-code platforms like frevvo to create mobile web apps in record time for day-to-day business problems.

Last week, I came across this nice new infographic from the University of Alabama at Birmingham Collat School of Business. As they say, “the skills gap is the difference between the technology available and the workforce’s ability to use it.”

Highlights of the infographic are:

Almost 40% of companies have a moderate to major skills gap. The resulting digital inefficiency can be deadly – costing you as much as 20% in lost productivity. Simple things like automating routine, everyday processes like Purchase Orders and Leave Approvals can go a long way.

digital-inefficiency

Automation can make a huge difference.

We think citizen developers can make a huge difference, especially when they’re given access to and training on low-code platforms like frevvo. We see it in our customers all the time – citizen developers at many frevvo customers have helped to create incredibly effective, high-quality apps quickly and at reasonable cost.

In fact, Central Wyoming College recently created a fully digital Purchase Order approval that looks great, works on mobile devices and meets business requirements in less than 10 days of work. It’s hard to imagine anyone coding an app that quickly.

meet-citizen-developer

Check out the infographic on UAB’s website.

Among pacesetters, who believe technology is essential to development and blaze the way forward, almost 80% use citizen developers.

You have little choice. You simply cannot afford to take months to create a web portal or mobile app. Mobile developers are extremely expensive if you can find them. There’s huge benefit and tremendous ROI to be gained from using a low-code approach for an increasing array of projects.

With every release of frevvo, there’s a little less code to write – whether through new and upgraded wizards or the Visual Rule Builder or a new connector.

Hundreds of customers are already benefiting. Why not give it a whirl? Sign up for a free trial and see for yourself. It takes 30 seconds and you can install a template and try it out instantly.

Embed frevvo on mobile pages

mobiledevicesfrevvo’s forms and workflows already work well on mobile devices. They’ll automatically resize to fit your phone or tablet, the icons and controls will be slightly larger, long forms can be broken up into multiple pages etc. They just work without much tinkering if any.

But, customers want to embed them in their mobile web pages. Since the web page and form are usually served up from different hosts, we have to use an iframe. And iframes are notoriously difficult on mobile devices. It’s doubly tricky for us since the size of the form can change e.g. when the user selects a different Tab or expands/collapses a Section or clicks + to add a repeating item.

This slideshow requires JavaScript.

Fortunately, mobile browsers & devices have now evolved to where we can provide this to customers. As you can see from the slideshow above, frevvo’s own Contact form is embedded in our website and renders perfectly in an iframe on tablets and phones. The forms will resize automatically to the device width, they height will automatically increase if the form height changes (switch Tab, expand Section etc.) and device rotation will also work automatically. We’ll be rolling this out in the next few weeks and customers won’t have to do anything.

We’re also working on rolling out truly responsive forms on desktop browsers since we finally have no customers still using [the much-hated] IE8 and almost no one using IE9 either. But, that’s for another article.

[Infographic] The path to successful mobile apps

path-to-mobile-appsIn today’s business world, mobility has become synonymous with productivity in the workplace. The use of mobile technology has become a core aspect of everyday life, both at home and in the workplace.

70+% of the U.S. workforce will soon consist of mobile workers and mobile access has redefined how your employees work. They expect instant access to connected applications and information and this access has redefined how your employees work. They expect on-the-go access to their day-to-day business applications. The apps must fully work on all mobile devices and they also need to look good and be user-friendly. Otherwise, 60% of your employees will abandon your mobile app and revert to e-mailing PDFs around.

How will you deliver? Mobile apps that work on multiple platforms take forever, are absurdly expensive and require skills that are extremely difficult to find. If you don’t get it right, employees won’t use them.

That’s where a low-code platform like frevvo comes in. Check out this new infographic on how a platform like frevvo can help you overcome the barriers and get on a path to successful mobile apps.

Right now, our customers are creating customized apps for routine day-to-day approvals in days and weeks using existing [citizen] developers.

They don’t need HTML5 or CSS3 or Android app development skills and it doesn’t take 6 months and $100K to roll out a first beta version of the mobile app only to find out that employees hate the user experience and won’t even use it.

With frevvo, you too can easily start with a pre-built template and modify it to meet your business requirements. It’s easy and hundreds of customers are already doing it. We can help.

Learn more by visiting our website where you’ll find several customer success stories. Explore some of the examples and contact us for more information.

70+% of U.S. workforce will be mobile

PeopleFirstI came across this article about an IDC forecast on the U.S. mobile workforce. It links to an older version of the article but a newer one is here (payment required). IDC suggests that by 2020, the number of U.S. mobile workers will grow to 105.4 million and will make up an astounding 72.3 percent of the total U.S. workforce.

“Mobility has become synonymous with productivity both inside and outside the workplace, and the mass adoption of mobile technology in the United States has cultivated an environment where workers expect to leverage mobile technology at work” – Bryan Bassett, Research Analyst, Mobile Enterprise: Device Solutions at IDC

Your employees expect to work on-the-go using their mobile devices – everything from responding to customers to routine day-to-day collaboration with colleagues. Yet, it’s practically impossible to find skilled native app developers and building mobile apps is absurdly expensive.

What’s a CIO to do? Turn to a platform like frevvo. Apps built using frevvo are wow-code, citizen-developer friendly, fast, effective and incredibly affordable. And, they just work automatically on all devices: desktops, tablets, and smartphones.

At frevvo, we just digitized a completely customized Purchase Order approval workflow for a University customer in 45 man-hours.

You too can effectively support those 3 in 4 workers who are rapidly transitioning to working on their mobile devices. They can fill out forms, sign documents, approve expenses, attach receipts and everything else in their daily work routine anytime, anywhere and from any device.

Check out our website for some examples and this short (4.5m) video on creating beautiful, responsive mobile web forms with frevvo.

Mobility Part 4: Low-code platforms are the future

mobile-apps-10

43% of organizations use low-code platforms to support their I.T. strategy

Demand for mobile apps is exploding but continues to exceed development capacity and available skills. Companies are looking beyond native app development to other options using citizen developers.

They’re turning to low-code platforms including frevvo. Images in this article are from the OutSystems 2017 State of Application Development Report (opt-in required) – a provider of low-code mobile app development tools.

Low-code platforms dramatically increase productivity since they enable citizen developers not just coders-by-trade to develop applications. Citizen developers at many frevvo customers have helped to create incredibly effective, high-quality apps quickly and at reasonable cost.

At frevvo, we recently created a fully digital Purchase Order approval for a University customer that looks great, works on mobile devices and meets business requirements in just 45 hours. It’s hard to imagine anyone coding an app that quickly.

mobile-apps-12Companies have little choice. In today’s business world, they must respond quickly to a rapid changing environment. Taking months to create a web portal or mobile app is simply not an option for most. Mobile developers are extremely expensive if you can find them.

As the various underlying technologies mature and platforms like frevvo get better and better at taking advantage of these advances, there’s huge benefit and tremendous ROI to be gained from using a low-code approach for an increasing array of projects.

With every release of frevvo, there’s a little less code to write – whether through new and upgraded wizards or the Visual Rule Builder or a new connector (SharePoint is coming soon, major upgrades to the Database Connector are in the works) or an ever-increasing variety of pre-built templates. I’m sure other platforms like OutSystems are no different.

Hundreds of customers are already benefiting. Why not give it a whirl? Sign up for a free trial and see for yourself. It takes 30 seconds and you can install a template and try it out instantly.

Mobility Part 3: Citizen Developers deliver results

In Part 1 and Part 2, we talked about how demand for mobile apps is exploding but there are many barriers to overcome. Companies are looking for new ways to tackle the mobility challenge by choosing the right technology to fit the problem and spreading development among more people.

mobile-apps-7

Alternatives to Native App Development

Everything needs to work on mobile. But it doesn’t have to be a native app. As technology has matured, companies have discovered that they no longer need to take a native-only approach to app development. Progressive web and responsive web have rapidly become mainstream as companies realize that these apps meet their business needs but they’re also much faster and cheaper to build. They also don’t require the same skill set that native app development does addressing one of the most important barriers to mobility.

Nowadays, mobility is about reaching users through all channels, especially mobile web browsers, as users often don’t bother to install an app.

As a result, I.T. professionals preference for native app development has steadily declined to where just 17% prefer it in 2017 down from almost 30% 2 years ago.

User expectations are exceedingly high and they want apps that not only deliver function, but that also look and feel amazing and alternative approaches are increasingly able to deliver.

Citizen Developers offer a viable alternative

mobile-apps-4An obvious side effect is that companies are looking for less technical, cheaper and easier-to-find skill sets like HTML5, JavaScript and UX over specialized mobile app developers. A growing number are turning to citizen developers who are not coders-by-trade.

Two-fifths (43%) are already supporting or planning to support citizen developers and it’s a trend that’s on the rise. Gartner predicts that 70% of  large enterprises will empower citizen developers in the next 3 years.

These citizen developers can genuinely help companies get things done without the need to hire people with hard-to-find and expensive skill sets.

mobile-apps-8In companies that support citizen developers, over 50% are already prototyping and building departmental applications and almost a third (30%) are building employee-facing applications. Customer-facing and enterprise applications remain the province of professional coders by and large but citizen developers are making strides there as well.

Low-Code, Great UX and Citizen Developers

At frevvo, we see these trends converging in our customers. They’re often using frevvo for employee-facing applications like Purchase Approvals or Travel Authorizations.They definitely want to digitize these on mobile devices and they need to look great otherwise employees won’t use them. But, of course, spending $500K on a native mobile app each time is a non-starter.

That’s where we come in – citizen developers with skill sets that already exist in many organizations can certainly drag & drop fields onto e-forms, setup basic workflow routing and, in some cases, even do some integration (wizards, wizards, wizards …). Of course, I.T. still needs to get involved at some stage e.g. SQL database integration and JavaScript-based business rules.

Technologies like frevvo allow app development to be spread out among more people. That in turn eases pressure on IT teams, freeing them up to meet business needs.

Automating these applications can deliver tremendous ROI with customers saving over 50% of the cost and seeing positive returns in under 3 months. And we’re working every day to further reduce the required skill sets e.g. with our upcoming Visual Business Rule Builder (more on that in a future article).We’ll write more about it in upcoming articles. In the meantime, check out our website for some examples and this short (4.5m) video on creating beautiful, responsive mobile web forms with frevvo.

Concludes in Part 4.

Graphs and many of the insights in this series of articles can be found in the OutSystems 2017 State of Application Development Report (opt-in required). Credit: the afore-mentioned OutSystems report for all images in this article.