Published on <a href="http://ift.tt/2qbu0Kd">| Prototyping: From UX to Front End &mdash; Medium</a> Miklos Philips 
Web forms are annoying, inefficient and they fill people with dread. Does anybody actually like filling out web forms? Nevertheless, they are a ‘necessary evil’ that can make or break some of the most critical online interactions.
Web forms are still mostly based on old paper forms — zombie leftovers of system-centric UIs (vs. user-centric). It’s been 30 years and we’re still typing the same information into forms over and over again.
<img alt="" src="http://ift.tt/2qGrIGG">One can see how web forms come from paper forms like this KFC job application.
Thankfully, major shifts are on the way. Five years from now we will look back in horror at the awkward, slow, frustrating way we used to input personal data when filling out job applications, credit card applications — dealing with e-commerce checkouts, account registrations… virtually any task requiring information entry. Notwithstanding the importance of these interactions, the design of the forms that enable them is often very poorly thought through.
<img alt="" src="http://ift.tt/2qbaHRo">Who doesn’t love the DMV? This kind of form will hopefully become a dusty ol’ relic of a lost past very soon.
The bottom line is, most web forms today — whether desktop or mobile — are simply terrible user experiences. Despite countless books, studies, articles and whitepapers from UX industry gurus such as <a href="http://ift.tt/1YC0NYG">The Nielsen Norman Group</a>, <a href="https://baymard.com/">Baymard Institute</a> (e-commerce) and <a href="https://www.lukew.com">Luke Wroblewski</a> (co-founder of the Interaction Design Association), many organizations — even those whose lifeblood depends on it — don’t follow web form design best practices.
That translates into billions and billions of lost revenue.
Shockingly, <a href="https://www.amazon.com/">Amazon</a> — the big multi-billion dollar behemoth of e-commerce — is ranked very low in ‘overall checkout UX performance’ by the Baymard Institute when considering user interactions with forms such as shipping &amp; store pickup, credit card information, validation errors and more. How much business is lost due to such poor UX?
Today most web forms are frustrating, slow to fill out and put usability last.
<img alt="" src="http://ift.tt/2qbu2lj">Account registration forms such as these are a mental strain on people and time consuming to fill out.
In terms of time and cognitive strain, online forms tend to be a giant nuisance. They’re overwhelmingly error-prone, lack default values, auto-completion and auto-formatting; they handle input errors badly — and that’s not even talking about mobile forms which require a distinct design mindset and have different usability issues.
<img alt="" src="http://ift.tt/2qGgmCo">Job application forms have some of the worst UX. An active job seeker fills out these forms with the same information again and again.
Organizations often try collect too much information from users even when it’s not required to complete the transaction. Donation forms are often the biggest offenders as they insist on gathering donor profile data for their own statistics, not considering the interests of the donor. Imagine if you were told as you’re about to give someone your hard-earned coin that you have to wait, cash in hand as they grill you with questions entirely for their own statistical use. No, thanks.
Mobile forms — account registrations, checkouts, etc. are fraught with their own unique issues and challenges. Input is awkward because the screen is small and lacking a full-size keyboard — people have to use their fingertips to tap and swipe UI elements. Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.
Small screens mean fewer visible options at any given time, requiring users to rely on their short-term memory to build a mental model of the system behind the scenes.
<img alt="" src="http://ift.tt/2qbkmY0">Domino’s Pizza ‘create profile’ steps are fraught with bad usability on mobile devices and require too much awkward user interaction.
<h3>Evolving Web Forms</h3>
Web forms are in the midst of an evolutionary phase. Ahead of the birth of an entirely new paradigm, we are somewhere between the painful, clunky, tedious and repetitive ‘typing into forms’ early phase, and the easy-breezy, goof-proof future where Touch ID, voice-printing, computer vision, facial recognition and iris scans will unlock our personal data and seamlessly and securely provide all the necessary information to systems that need it.
<a href="http://ift.tt/23dFPhw">UX designers</a> are constantly striving to improve the experience and reduce the pain that comes with filling out web forms, but in this intermediate phase are still only providing ‘vitamins,’ not the ultimate ‘painkiller’ solution.
In order to provide a more user-friendly, seamless user experience, some of the latest form designs try to eliminate a few of the frustrations by implementing an interface that doesn’t bear any resemblance to conventional forms. They do succeed in making our lives significantly easier, but still have a way to go.
<img alt="" src="http://ift.tt/2qboQhw"><a href="http://ift.tt/ZDZDsZ">Typeform</a> uses a ‘conversational UI’ for a speedy user experience on this job application form. Keyboard shortcuts are indicated and built into most steps and answers making it a very efficient way to fill out a form
<h4>Autofill Comes to the Rescue</h4>
Google’s Chrome browser and it’s Autofill feature was a long-awaited god-send for more efficient form completion. It stores frequently entered personal data securely — including credit cards — for speedy web form-filling. A recent study by Google found that disabling Chrome’s Autofill feature resulted in 25% fewer form submissions. The study demonstrated that without it the experience is so annoying, some users abandon filling out forms altogether.
Surprise! Tedious typing into forms is something people want to avoid.
<img alt="" src="http://ift.tt/2qb5IjO">Google Chrome’s Autofill feature helps with repetitious filling out of web forms
<h4>Password Managers Relieve the Pain</h4>
Constantly retrieving and typing passwords for hundreds of online accounts is tiresome. Password managers came to the rescue a few years back and are now widely used. <a href="https://1password.com/">1Password</a> and <a href="http://ift.tt/vPTMLz">Dashlane</a> are two leading solutions that with a few clicks or taps securely store and autofill encrypted passwords for websites and apps.
<img alt="" src="http://ift.tt/2qbq1NT">Once unlocked with a master password or a fingerprint ‘Touch ID’ Dashlane’s password manager autofills passwords
<h4>Social Sign-ins Put and End to Registration</h4>
According to research compiled by<a href="http://ift.tt/1WlDT2M"> WebHostingBuzz</a>, 86% of users report being bothered by having to create new accounts. A social sign-in eliminates the need for registration. It is a form of single sign-on using existing information from a social networking service such as Facebook, Google+, LinkedIn and Twitter. It increases registration and minimizes barriers to entry by reducing the need for usernames and passwords.
<img alt="" src="http://ift.tt/2qbgk1Z">
<h4>Mobile Device Tech Eases the Burden of Forms</h4>
There have been numerous usability improvements made for mobile forms that also drive some of the new best practices on desktops — such as storing and retrieving frequently used values, using phone features (camera, GPS, voice, contact list) to pre-populate forms and auto-format data (based on a ZIP code pre-select the US State).
Also, depending on the type of input needed, the keyboard can be changed; suggestions/ autocomplete based on the first letters typed can be used, and phone numbers and credit card numbers can be auto-formatted.
<img alt="" src="http://ift.tt/2qGrJue">The Apple Pay app uses the iPhone’s camera and computer vision to simply take a picture of a card to register it, no tedious keyboard input required
<h4>Web Form Trends</h4>
As discussed, traditional web form design follows the old paper-based model — that’s why they look so similar. Previously, the technology to collect personal data any other way wasn’t available — it is today. In an effort to leave behind conventional web forms entirely, designers are presenting users with a clean UI and underlined areas to signify where text inputs go. This way, filling out a form feels more natural and less like data entry.
<img alt="" src="http://ift.tt/2qbiZsJ">To move away from the ‘data entry look’ with input fields and dropdowns, designers are coming up with cleaner designs for mobile forms<img alt="" src="http://ift.tt/2qGnkaM">A desktop <a href="http://ift.tt/1efyA4G">Google Form</a>
Another trend is to make asking for user input more conversational which creates a ‘more human’ interaction. A precursor to a more sophisticated world of chatbots and other input methods of the future, it involves interweaving user input fields into naturally flowing sentences and questions.
<img alt="" src="http://ift.tt/2qGsOCb">A simple, conversational contact form (<a href="http://ift.tt/2qbbwtE">Nelu Cebotari</a>)<img alt="" src="http://ift.tt/2qGojYc">Mobile forms are becoming minimalistic and conversational (Designs by <a href="http://ift.tt/1Sklu7J">Alex Cristache</a> and <a href="http://ift.tt/2nR8L0h">Fabio Basile</a> on Dribbble)
<h4>Machines Talk Back. Chatbots and the Rise of Automated Agents</h4>
Typically, bots are artificial intelligence platforms that use instant messaging as an application interface. Instead of putting the burden on users by asking them to fill out forms, chatbots relieve that burden by making the interaction more natural and conversational — some bots are not AI but real humans interacting via chat to provide an awesome user experience.
Even though the time something takes may be the same — to complete a simple travel booking for example — because the interaction is conversational and broken up into ‘chunks,’ the cognitive strain is reduced and the experience improved.
<img alt="" src="http://ift.tt/2qbeDld"><a href="https://www.rga.com/">R/GA</a> and the <a href="http://ift.tt/SxK98S">Ad Council</a> built a voting bot to drive Millennials to the polls. Simply called ‘GoVoteBot,’ it interacts with users in real time on Facebook Messenger.
Travelers can now make reservations with <a href="https://www.hyatt.com/">Hyatt Hotels</a> using the <a href="http://ift.tt/1yREj4f">Facebook Messenger</a> app, or simply engage in a live chat with the Hyatt team to ask free-form questions — like whether there is availability around particular holidays.
<img alt="" src="http://ift.tt/2qbj27G">Using Facebook Messenger, Hyatt Hotels uses its customer relations staff to help guests make reservations and check availability.
Insurance is another industry ready for disruption by the rise of automated agents. Facebook making its Messenger platform available for anyone to develop and deploy chatbots also opened the door for the automated insurance agent.
<a href="https://withjack.co.uk/">Jack Insurance</a> in the UK does just that. It was built to provide simple business insurance for freelance creatives and web professionals such as web <a href="http://ift.tt/1ZuiNAt">designers</a>, <a href="http://ift.tt/2qbeEWj">developers</a>, and <a href="http://ift.tt/1QZ44Yu">illustrators</a>.
<img alt="" src="http://ift.tt/2qbmnDP">Jack is a simple chatbot that walks professionals through the insurance process — no forms.
However, band-aiding a form-filling experience with chatbots and the like is only a halfway measure. It won’t work in the long run because people will continue to have to provide a lot of personal data repeatedly.
<blockquote>“We can’t solve problems by using the same kind of thinking we used when we created them.” — Einstein famously said.</blockquote>
To get from the ‘vitamin phase’ to the ‘painkiller phase’ we need to think differently and make a giant leap into the new paradigm.
<h4>The Rise of AI. User-Friendly Data Collection of Tomorrow</h4>
Who hasn’t gone through the arduous and repetitive process of trying to book a summer vacation? When I planned one recently, I filled out numerous forms over and over again with three airlines, a dozen hotels, two car rental companies, airport transfers… the same names, addresses, credit card numbers, frequent flyer club numbers, phone numbers, email addresses… the process is utterly soul-killing and completely ridiculous.
Google reports that stress runs unchecked: 69% of leisure travelers worry they’re not finding the best price or making the best decision while booking a trip. Add to that the poor user experience filling out endless forms with the same information 90% of the time, and we’re talking about a process that is incredibly frustrating and stressful. Even with Chrome’s autofill feature and the other conveniences mentioned earlier, the experience is still harrowing and filled with tedium.
The long-term UX vision is not to keep perfecting web forms, but to kill them altogether.
As mentioned earlier, because of the array of technologies available on mobile: GPS, fingerprinting (Touch ID), voice-print and recognition, iris-scans, face recognition, computer vision, AI assistants and chatbots, the unavoidable personal data collection that must occur for a successful online transaction will be revolutionized on mobile first. Accordingly, desktop sites could utilize mobile devices’ tech capabilities for sophisticated ID verification by linking with them.
<img alt="" src="http://ift.tt/2qGrM9o">Can we put an end to conventional search, filtering results and web forms and come up with a simpler, radically more pleasant interaction when trying to book travel?
Let’s imagine an ideal future with a personal data vault that stores everything about a person super securely: their name, home address, work address, phone numbers, frequent flyer miles, date of birth, etc. This personal data vault could be unlocked by a combination of biometric verifications, security questions and a master password. Once unlocked and granted access, the site or app would be able to access all the necessary information it needs without the user having to type in any information.
<img alt="" src="http://ift.tt/2qbes9B">
Depending on platform and device, different methods and fallbacks could be used to unlock the vault. To avoid users having to input data, the system would then ask simple questions using a chatbot, or some other conversational UI with optional voice-recognition and natural language processing. If voice input is not practical, keyboard input would be available.
Taking it a step further, this personal data vault could link with other vaults (a girlfriend/ boyfriend/ spouse’s for example) that with the owner’s consent would be temporarily unlocked to access relevant information (access would be brief and only the requested information would be made available). A travel app or site could then securely access all necessary data, and make travel arrangements effortlessly.
Web forms will soon become old-school — interesting artifacts of a bygone era for which there will no longer be any need. In the scenario described above, UX designers will be faced with designing better experiences without forms. All of the conventional interactions, including typing information into web forms would disappear into the background.
<h3>The Nature of User Input is Changing</h3>
The internet and smartphone use have created an overwhelming, ever present abundance of data. ‘Future tech’ such as computer vision, IoT, artificial-intelligence (AI) and machine learning is already here, changing the nature of interactions and the UX landscape.
Conventional UIs are disappearing, and web forms are a part of that shift. Certainly, some need for forms will never go away such as third parties entering info about a person—I can think of government services or medical applications for example—but interfaces where less and less user interaction will be needed to provide input will become widespread. Especially with a person providing their own personal information.
AI techniques such as machine learning can extract value from having access to personal data, and smart algorithms can predict what data would be needed to make the completion of job applications, travel bookings and online purchases easier for users.
While we’re championing hopeful aspirations, and pursuing these lofty UX ideals, there remains a fracture between inventive ways to eliminate web forms entirely, and security concerns around personal data. Robust and secure systems can be designed, but we will need to deal with these concerns. Studies have shown that people are willing to share personal data and allow tracking if they derive significant value and time-savings from it.
To stay ahead of the game, UX designers should begin to ponder future scenarios filled with chatbots and ‘conversational UIs.’ We will need to optimize the experience and figure out the use case scenarios. Are the interaction steps as smooth and efficient as possible? What is the tone of the chatbot? Are we reducing the time it takes to get things done or increasing it? With biometric ID verifications coming, what is that interaction going to look like? How can we serve our users better and deliver amazing experiences that make life easier?
Technology and the nature of interactions will change, but the sum and substance — the best practices of UX design, the ‘user-centered design process’ will continue to evolve and ultimately prevail.
I hope you enjoyed this article. <a href="https://twitter.com/MiklosPhilips">Follow me on Twitter for UX tidbits</a>
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2pIip9S">http://ift.tt/2pIip9S</a></iframe><img src="http://ift.tt/2qGpAPj" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qb1I2K">RIP Web Forms — You Will Not Be Missed!</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

RIP Web Forms — You Will Not Be Missed!

Top Stories