Is a Landing Page or Microsite Better for Customer Engagement?

So you’re developing a new website, or you’re thinking about launching a new product or service on your current website, and you’ve been strategizing the best possible way to make sure customers actually notice what you’re doing. You’ve done your research, and now you’re facing the same question many developers and designers encounter: should you use a landing page or microsite to promote your stuff?

It’s a difficult question, to be sure. Both are similar in nature, but does one offer more benefit when it comes to customer engagement? Possibly. It all depends on what you’ve got to offer. Let’s take a look at both options to see which one comes out on top.

[content_upgrade cu_id=”167″]Already set on building a microsite? Here are 5 things you should include.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

The Case for Landing Pages

Landing pages are normally the go-to option, but what are they, exactly? And more importantly, are they really the better choice for engagement?

landing-page-form-encapsulation

 

A landing page is simply a page of content within a larger site that users “land on” when visiting your site. Most of the time when someone says “landing page” they probably mean home page, or “About Us” page — something that communicates essential information about something. But landing pages can be used for much more than that.

The best landing pages are about a specific call-to-action (CTA): they’re not just giving information, they’re expecting the visitor to do something, whether it’s purchasing a product, downloading a resource, or requesting additional information. Basically, landing pages are all about conversions — they’re designed to give users what they want (information and resources) in exchange for something you want (e.g. clicks, follows, or subscriptions).

Good landing pages are focused on getting visitors to take immediate action without ever leaving the page. This is called “closing the loop”: the goal is to keep visitors from leaving before they fulfill the CTA. If done right, good landing pages can seriously convert.

But what happens if they’re not done right? Well, let’s take a look at the pros and cons of using a landing page to engage customers.

Pros

They’re easier to measure. Landing pages are designed to make measuring their effectiveness easy. Basically, you would only need to know “out of X visitors, Y took action.” This means if you’re looking for a specific number of conversions to show the boss, landing sites are the perfect option because they provide instant results.

They cost less (than microsites). Since landing pages are single page additions to already developed sites, they don’t need a lot of fuss to get up and running. Using the style elements of the existing site also saves time that would otherwise be spent on creating CSS or HTML from scratch. Additionally, microsites often need separate domains (which cost money to host), while you can have a near infinite number of landing pages on an already-hosted site.

They’re CTA focused. While you could technically consider a microsite one giant CTA, oftentimes action steps in a microsite can be easily overlooked (we’ll get to that later). Landing pages, on the other hand, are only about the CTA, and they’re hard to miss. If you’re needing your customers to take an immediate action step, using a landing page may be the better bet.

They’re easier to A/B test. Because landing pages are often single pages, they can be easily updated and changed to test the effectiveness of different elements. Don’t like the button style? Just change it! You won’t have to mess with coding across an entire site just to see if one layout works better than another.

They’re easier to brand. Since landing pages are technically already part of a branded site, your customers will have no problem knowing that your business is the one behind the content. Microsites often include separate branding to make them stand out, which can make it harder to implement an integrated marketing strategy. If you want to avoid the question, “Will customers know this is us?”, then landing pages are the way to go.

Cons

They’re maybe a little too focused. While narrowing down your content and focusing on a CTA is a great way to engage certain customers, it may not always be what you want. Landing pages are designed to encourage visitors to respond to a specific service or product, and can often miss visitors who may want something else from you (or your site). This means that landing pages may actually miss a large chunk of your potential market if you’re not careful.

They’re not always compelling. In order to engage customers, landing pages need to include a lot of important information without being too long, while still being compelling enough to get reactions and responses to the CTA. Writing content that is impactful, brief, and equally fascinating can be difficult, and not all landing pages succeed in their attempt to impress.

They’re distracting (if not designed well). If it’s true that a well designed landing page is great at converting, it’s equally true that a poorly designed landing page is a disaster for customer engagement. If the page is distracting — offering too much content with no context, mixed messages, or too much media — it can actually send visitors away.

They can fail at converting (if there is “leakage”). As mentioned earlier, landing pages are designed to keep visitors on the page, but a poorly designed landing page (which are more common than you think) will mistakenly send visitors to outside sites, like Facebook or Twitter, without realizing that the more often you send someone away from your site, the less likely they are to come back to it.

They might be really, really boring. Having a unified brand is great for marketing, but if you’re launching a new product that needs to stand out, having the restrictions of a landing page’s one-size-fits-all design may be limiting.

Who is a landing page good for?

Landing pages are transactional in nature — for example, visitors give their information (credit card, email, etc.) in exchange for a product, resource, or service — which makes them great for businesses that need immediate results that can be measured by transactions. If your goal is to get your customers to take an action (and/or complete a simple task), and you don’t want to do a lot of extra work when it comes to design and branding, then landing pages are the perfect choice.

The Case for Using Microsites

Microsites are less well known than landing pages, but depending on how they’re used, they can make a powerful impact on engagement. But what is a microsite, exactly?

screen-shot-2013-05-09-at-10-01-44-am

A microsite is like a mini-website made up of several pages or sections (3-5, typically). Unlike regular websites, however, a microsite is focused on one campaign or promotion. They’re designed to let the customer know about one thing, and one thing only.

Most microsites are built to hold more information than can be contained on a single landing page. They’re created for bigger, more complex marketing campaigns of a particular product or service. But they’re not for everyone. Certain industries seem to thrive with microsites more than others.

A great microsite will convert customers through different tactics than a typical landing page. While landing pages focus on the immediate action, microsites will focus on informing now and creating action later (think: “Call us for more information” instead of “click here for more information”). A good microsite will create curiosity that sticks with a customer, and it will use “leakage” into social sites to create buzz that brings customers back repeatedly.

Of course, this means microsites are a bit riskier when it comes to engagement, but could they possibly be more effective? Let’s take a look at the pros and cons of using microsites.

Pros

They’re better for relationships. Because landing pages are designed to create action, they don’t always give your customer a real look into who you are as a company. Microsites, on the other hand, offer in-depth information about you (and what you’re promoting). Since most microsites are made up of several pages, they give visitors a chance to spend a significant amount of time learning about the benefits of working with you. Their “soft-sell” nature creates a sense of awareness that can boost your brand and public relations.

They’re more flexible (than landing pages). Microsites offer much greater flexibility than landing pages in both design, content, and function. While landing pages try to squeeze as much content into a single page as possible, microsites let you take your time with your story; allowing you to show what you want, when you want, and where you want. You can also come up with some really clever ideas for site designs that wouldn’t work on normal landing pages.

They can include multiple engagement points. Because microsites encompass several pages, you can include several different CTAs, which means that visitors have multiple chances to engage with your company. This is especially beneficial if you think about the narrowness of landing pages (which, as mentioned, may miss certain customer demographics). If your microsite doesn’t entice someone on the first page, they may be enticed on a different page.

They’re perfect for certain industries. Due to their flexibility, microsites can be a great advantage depending on the industry you’re in. A great example of an industry that uses microsites to their advantage is the auto industry. Companies like Ford often build microsites for specific vehicles or contents and giveaways. If your industry often rolls out large campaigns or products, microsites are a great choice.

They work with leakage. While having “leakage” — a place where visitors can click away from your site (e.g. to Facebook) — on a landing page is bad for business, leakage on a microsite is no problem at all. In fact, microsites are the perfect choice if your desired method of conversion requires earned trust (brand awareness, relationships built through networking and blogs, etc.). If you’re okay with a “sales cycle” approach to engagement, then microsites may be for you.

Cons

They cost more (than landing pages). Because microsites are technically separate (albeit smaller) sites, they require separate hosting fees and URLs, which can cost more than just adding a landing page to an existing site. If you’re being creative with your microsite (or even if you’re not) you’ll still need to pay a designer to design the site for you, which can eat up time and money.

They don’t always measure well. When it comes to conversions, landing pages are easy to measure, but microsites can take time to see the same amount of engagement. Visitors will generally linger longer, which means they may be more likely to activate a CTA, but it also means they’re more likely to click away from the site all together. You’ll have to find alternate ways of measure engagement to make sure you’re getting the figures you want.

They require dedicated content. Creating a content and marketing strategy for a microsite can be more time consuming, as well. Because their focus is to tell a story more than share information, you’ll need to create more content to fill the pages and make sure that all of it is equally engaging. If only one page of your site is interesting, you could risk turning away visitors faster than a landing page.

They could dilute brand identity. If your goal is to use your microsite for creativity and you don’t mind people confusing your business for something else, then microsites are great. But if you’re concerned about that confusion, you might be better off with a landing page (or at the very least a less creative microsite).

They mean a little more work. When it comes to changing a landing page, a few clicks usually does the job. With microsites, however, you’ll need to login to an additional site to make changes, and if your company has more than one person monitoring sites, this can make things a little more challenging. Microsites also mean more work if you’re constantly A/B testing, too, as it takes more effort to rework an entire site than it does a single page.

Who is a microsite good for?

Microsites are relational in nature — for example, visitors spend time getting to know your brand and researching your campaign — which makes them great for businesses that want to create a personal touchpoint with their customers. If your goal is to create engagement through multiple channels and you don’t mind getting a little creative, microsites are the perfect option.

[content_upgrade cu_id=”167″]Don’t miss our 5 things to include in your microsite![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

So, which should you choose?

When it comes to choosing between a landing page and a microsite, it all comes down to a few things: your industry and business goals, your preferred conversion style, your time commitment, and your flexibility with branding. Basically, the right option comes down to who you are and what you’re trying to accomplish.

If you’re a business that wants to build brand reputation, you have time and money and love being creative, and you really don’t need customers to fulfill an immediate CTA when they visit your site, then microsites are probably the best choice.

If you’re a business that wants to measure conversions on a daily basis, you want customers to know you but you’re more interested in getting your product or service to them as quickly as possible, and you want your brand to be unified so that people know you by sight, then landing pages are the way to go.

The biggest dilemma will be for businesses who see themselves as a mixture of both. You might be a business that wants to be able to measure your engagement rates, but you might also want people to trust your brand (and you don’t mind when they “click away” every so often because you know they’ll be back). If that’s you, then the choice becomes a little less clear. You’ll have to rely on conversion styles to make your choice.

Essentially, both landing pages and microsites are great for customer engagement, but they go about it in different ways. If you want fast, easy conversions, use a landing page; if you don’t mind a slow sales cycle approach, go with a microsite.

But ultimately, the choice is yours and yours alone.

How Tweaking Your Microcopy Can Instantly Double Your Conversion Rates

There’s no denying that words have power, but how often are you thinking about words when trying to improve your website’s conversion rates? Chances are, not as often as you should.

Words – in this case, copy – can have a significant impact on what happens (or doesn’t happen) on your site. (If you’re still not convinced, this video by Andrea Gardner might change your mind). But what words are the most important when it comes to generating leads?

As it turns out, it’s not about big, bold headlines or catchy CTAs. It’s all about microcopy.

What is microcopy?

Microcopy is the copy that shows up in less obvious (but heavily trafficked) areas around a site – like the instructional text on forms or applications (“Please write your full name”), the words on a CTA button (“Subscribe Now!”), or the label on a form field (“Credit Card Number”). It’s often unnoticed, but it’s extremely essential to user experience.

Mark Boulton, author of the book Designing for the Web, gives the perfect example of using microcopy to alleviate customer concerns. After running into issues with people trying to purchase his book, he added a small piece of microcopy to his purchasing instructions, which solved the problem. After the original copy (“Transactions are handled through PayPal”) he added, “but you don’t need a PayPal account to buy this book“. As it turns out, people weren’t buying through his site because they thought they needed to create a PayPal account. By changing his microcopy, he instantly changed his sales numbers.

markboulton-microcopy

Tumblr is another great example of a company that used microcopy to improve their sign-up experience. When users are about to submit their information, they’re asked to choose a sub-domain name for their site. The microcopy next to the form field assures them that they can “change it at any time.” Who wouldn’t breath a sigh of relief knowing that whatever they enter now won’t be held against them later?

tumbler-microcopy

But it doesn’t stop there. Microcopy not only has the ability to improve user experience, it also has the power to make or break conversions.

[content_upgrade cu_id=”160″]Need help with your microcopy? Check out our bonus content for inspiration.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

How does it affect conversions?

When it comes to getting users to subscribe, little words and phrases can significantly impact whether or not people click that button.

Take Veeam, for example. They noticed on their quote request form that visitors were continually asking for a price (which couldn’t be displayed due to a privacy policy) before submitting their information. Veeam decided to change the microcopy on their submission button from “request a quote” to “request pricing” and saw a staggering 161.66% increase in clicks. Similarly, another company found that changing two little words in their newsletter subject line resulted in a 23.88% increase in click-through rates.

Likewise, ContentVerve saw an 83.75% increase in newsletter subscriptions simply by adding three bullet-points of microcopy under their form headline that briefly explained the benefits that visitors would receive after form submission.

contentverve-image

So what does this all mean? Basically, good microcopy significantly improves conversions.

It should be noted, however, that bad microcopy can also negatively affect conversions. For example, student website WriteWork noticed that after changing their CTA button from the original text (“Read Full Essay Now”) to “Get Instant Access Now”, conversions actually fell by 39%. It turns out that context is just as important as the words themselves.

But the fact remains, having good microcopy on your site can help alleviate user concerns and generate more leads. But what exactly makes “good” microcopy?

How to tell the good from the bad

At its core, good microcopy is something personal – it lets users know that there are real humans behind the screen. Good microcopy uses natural language to communicate important messages.

Take this prompt text from Social Inbox as an example:

social-inbox-microcopy

Instead of simply saying that the “tweet text goes here,” it gives a much warmer set of instructions by asking, “What do you want to say to your beloved followers?”

Good microcopy also gives a sense of personality and helps users relate to your brand – it makes them feel special, like your business really knows them. Bad microcopy, on the other hand, makes people feel like they’re just another number.

Meanwhile, good microcopy helps alleviate customer concerns. Like the examples listed before, good microcopy answers questions users don’t even know they have, like whether or not they can change something later. Bad microcopy, on the other hand, means customers will have to find another way to get questions answered, which usually means you’ll be wasting time frequently answering the same questions. (You might not have to create a FAQs page, though. Simply ask yourself: “Is there somewhere I can use microcopy to answer these questions instead?”)

Bad microcopy will also demand an action (“Subscribe!”) without offering anything in return (which, let’s face it, nobody likes). Good microcopy, however, lets customers know about the benefits they can receive. If you really want people to fill out your forms, tell them what’s in it for them. While most websites use landing pages to go into more detail about the perks that come along with subscribing, you can reinforce the idea by using microcopy in important places like headlines and buttons to assure customers they’re getting the most bang for their buck.

Where to tweak your microcopy

Even though microcopy is subtle by nature, it tends to be most effective in high-traffic areas. While there are plenty of places that microcopy can be (and often is) utilized, here are a few of the most essential places on your website you should check for microcopy adjustments.

Form headlines

Headlines can include the headline on the form itself (the title that lets people know what they’re signing-up for) or the headlines on the landing page associated with the form.

Form headlines are all about conveying value and relevance to the customer – they should answer the “what’s in it for me” question. Adjusting specific aspects of the headline (like saying “Get FREE Marketing Tips!” instead of “Subscribe”) can help encourage subscribers.

[content_upgrade cu_id=”160″]Need examples of great form headlines? Check out 6 form headlines that generate leads.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

CTA buttons

CTA buttons – like the “Subscribe” buttons at the end of a form – are the perfect spots to use microcopy, especially if you’re looking to double your conversion rates. A great example of this is the $300 million dollar button story, which details how one company tweaked the copy of their “Register” button and increased conversions by 45% (the company made an extra $300 million the following year).

Form fields (Instructions)

Form fields are an important part of gathering information that you need from customers, but they’re also a great place to take advantage of the power of microcopy. You can easily quell customer concerns by adding instructions that let users know what they should do.

One site owner noticed that customers were entering their addresses wrong (or so he thought) because he kept getting credit card fail messages. It turns out that customers were entering their shipping addresses, but not their billing addresses, which caused the transaction to be declined. As a quick fix, he added some microcopy: “Be sure to enter the billing address associated with your Credit Card.” Problem solved.

Final thoughts

While general copy is always important to a site’s user experience, nothing quite compares to microcopy when it comes to improving conversion rates. If you’re spending hours on your site and you’re still not seeing the subscription number you’d like, try tweaking various aspects of your microcopy, tracking your changes as you go. Test out different areas like headlines, buttons, and form fields to see if you can add text that would benefit customers and generate more leads.

Progressive Enhancement: Start Using CSS Without Breaking Older Browsers

Once upon a time (okay, the late 90’s and early 00’s) most websites were developed using Graceful Degradation (GD) – a web design strategy that attempted to standardize the way users viewed websites from different browsers (which was a reaction to the great Browser Wars, of course).

As browser development progressed, GD allowed users with updated browsers to experience the best and brightest design elements available, while users with older browsers had a slightly “degraded” (though still functional) experience. The aim was to encourage users to continually update their browsers as newer versions came out, or to switch to more popular browsers that supported more design elements. This strategy worked well in the early days of the web, as most browsers were still relatively new and needed fewer updates to be considered “modern.”

Flash-forward a few decades, however, and things are a bit different. Most browsers go through several updates annually, and some have ceased to be updated at all (Netscape, anyone?). What this means for web developers and designers is that sites created using GD are no longer functional with today’s modern browsers.

So, why not just force everyone to use modern browsers? Not everyone who uses the Internet is able to (or even wants to) update, which means that no matter how much developers want users to be on the latest version of their site, people will continue viewing web pages without proper support. So how should developers approach web design knowing that not everyone who visits their site will be using a modern browser? They should build their sites using Progressive Enhancement.

What is Progressive Enhancement?

Progressive Enhancement (PE) is an alternate design strategy that offsets any issues caused by older browsers. Unlike GD, which is optimized for modern versions and degrades with older versions, PE starts with the old – sites are built with basic HTML elements supported by older browsers – and adds the latest bells and whistles on top of it for modern browsers. PE builds sites basic enough that any browser can handle them, but complex enough to meet contemporary design demands.

PE works by using layers of code, with the first layer being HTML. CSS is then added on top of the HTML to alter the visual and design elements as needed. Then JavaScript is added to the final layer for modern usability (the “flashy” features of Web 2.0). The layers can be adjusted to create any look and feel, while the simplistic foundation makes it viewable from any browser without major complications.

PE-Friendly CSS Tools

The best way for developers to take full advantage of PE is to use CSS tools like flexbox (flexible box layouts), filters, and blend modes in their web designs to create sites that can be viewed on any browser.

[content_upgrade cu_id=”150″]Want help learning these CSS tools? Check out our list of resources![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Flexbox

One of the best ways to use CSS with PE is to create layouts with flexible box, or flexbox, instead of the standard grid layout. The boxes expand items to fill any free space, making sites adaptable to a variety of display and screen sizes. This is not only extremely helpful for older browsers, but for modern portable and mobile devices.

wp-blendmodes-1024x546

Flexbox adds to the four basic CSS layout modes: block layout, inline layout, table layout, and positioned layout. It’s intended for laying out more complicated pages, as it allows for the position and size of certain elements to remain consistent.

With flexbox you can also create fluid layouts, specify how excess space is used, control the direction of certain elements (left-to-right, top-to-bottom, etc.) and reorder any element as needed.

It does have a few drawbacks, however. While it’s technically supported across all browsers, it does require slightly different syntax for older browsers. For example, Google Chrome still requires a “webkit” prefix, and Firefox and Safari will still need to use older syntaxes to run properly. But despite these caveats, flexbox is a great way to give websites a modern feel (think mobile-friendly) without breaking older browsers in the process.

Filters

Another great way to use CSS without causing browser issues is to use filters to add graphic effects like blurring, sharpening, or color shifting to different elements. Filters can also be used to adjust the rendering of an image, background, or border.

cssfilters

Why is this important? Filters can be used through CSS to add graphical changes to a site without affecting the HTML. Any browser that has a basic Scalable Vector Graphic (SVG) specification will show filters (which include almost all browsers, regardless of version). Developers at Mozilla were the first to discover how useful filters and CSS styling could be. They combined CSS and SVG working groups to make filters available for HTML as well, making it a universal tool for adding graphic effects.

Filters work best as a post-processing step after page content has been laid out. Basically, when browsers load a page, they first apply styles, then layouts, and then render the page. Filters are the final step before the page is copied to the screen. They take a snapshot of the rendered page as a bitmap image, and create pixelated graphics over the top, which gives the page a “filtered” effect (like looking through a camera with a filtered lens). Any number of filters can be used to create effects without impacting the original HTML.

Of course, there are some limitations. Filters can potentially impact loading speeds (though very minimally), and while they work across all browsers, Internet Explorer has the most trouble when it comes to applying them. IE can only apply filters to images and text, not chunks of HTML, which could cause some rendering issues with older versions. But for most browsers, filters are a great choice for adding effects without compromising the site’s structural integrity.

Blend Modes

Though technically considered “experimental,” blend modes are another great way to add dynamic effects to a website without causing too much trouble for browsers (though it should be noted right off the bat that they do work better with newer browsers). How do blend modes work?

flexbox

Blend modes – like multiply, screen, overlay, and soft light – take layered pixels and combine them in different ways to produce a new effect (think of one picture on top of another picture, then blended together). Normally blend modes are created using Adobe Photoshop and implemented on static sites, but they can also be utilized on dynamic sites with CSS.

The most common way to do implement blend modes is with CSS Compositing and Blending, including background-blend-mode (which allows blending between background layers), mix-blend-mode (which blends elements with their backdrop), and isolation (which stops elements from blending with their backdrop). Using these modes, images can be manipulated without taxing the site’s HTML.

Getting blend modes to render smoothly across browsers is still a bit of a challenge, however, as they tend to be better supported by newer browsers. But they can still function in older browsers by using vendor prefixes or by activating experimental features. Similar to filters, IE has the least amount of support when it comes to blending modes (As of 2014, IE has them listed as “under consideration” for further support) but for the most part they can be used without too much drama across multiple browsers.

[content_upgrade cu_id=”150″]Have you taken advantage of our 9 Places to Learn CSS Tools yet?[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

It can be a hassle to create websites that are viewable on old and new browsers alike. The best way to overcome browser issues when designing a site is to use Progressive Enhancement to layer HTML, CSS, and JavaScript to overcome any issues. By taking advantage of CSS tools like flexbox, filters, and blend modes, you can make the most of CSS without crashing older browsers. And while some tools may work better than others when it comes to browser support, they all have some advantage when creating dynamic sites that need to look good on any browser.

5 Creative Ways to Use Forms to Improve Your UX

Thousands of people use web forms every day. In fact, forms play such a key role in almost every online transaction – from newsletter sign-ups to surveys, checkout processes, event registration, quote requests, and even logins to social media sites – that you’d be hard-pressed to find a website that doesn’t include a form. Even typing a question into Google is considered filling out a form, and no matter where you go online, you’re bound to run across some little text field requiring your personal information. Don’t expect that to change anytime soon.

Top research company Gartner Tech predicts that the popularity of online forms will continue to increase as the years go on, stating that by 2020 online users “will manage 85% of [transactions] without ever talking to a human.”

With the popularity of online forms comes the increasing need to stand out in the crowd, however. The more that forms are used, the more users will expect something new and different to hold their attention. The best way to get your form to stand out from the thousands of other similar forms is to create a unique user experience (UX).

A good UX is one that makes forms fun, easy, and fast to use, while also including memorable features. With that in mind, here are a few creative ways you can design your forms with an interface that will never be forgotten.

Focus on visual elements

Most forms consist of a few basic elements: title, form fields, text input fields, and submit buttons. While these elements are standard (and necessary) for collecting information, they don’t necessarily make your form stand out from the crowd. The best way to get your form noticed is to make it as visually appealing as possible.

Creating animated transitions (also known as text input effects) is a great way to pump up the visual elements of your forms and make them both fun and functional. The best way to do this is using CSS transitions and pseudo-classes. The folks over at Codrops give a few inspirational ideas for adding animated transitions to your forms.

Bart-Nederveen-Sign-Up-Form

If you don’t want to go the animated route, you can always use additional visual cues to improve UX without all the fancy CSS. Using simple elements like lines, arrows, and photos (especially photos that use eyelines to lead the user’s gaze to where you want them to look) will help draw attention to your form. Other design focus points like contrast, complementary colors, and the use of blank space will help your form get noticed in all the right ways.

[content_upgrade cu_id=”141″]Need some examples of creative forms? Check out our list![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Think like a mobile phone

When it comes to being visually appealing (and super UX-friendly), mobile forms can’t be beat; they’re easier to use, cleaner in design, and faster than their online counterparts. In many ways the mobile form is preferable to fill out, but that doesn’t mean you should ignore your web form. In fact, you could use the same design features that make mobile forms so great to boost your web forms.

For example, try designing your web form to align vertically, like it would appear on a mobile screen (or eliminate the use of above-field labels all together and put your labels in the text fields). You don’t even need to design two forms: simply use the same number of form fields and headers you would put in your mobile form in your web form, too. The benefit of this is not only a seamless integration when it comes to branding, but it also improves your UX by making the transition from web to mobile a lot smoother.

Card_scan

Use single-fields for a unique UX

As Shakespeare says, “Brevity is the soul of wit.” This sentiment is also true when it comes to building forms: the simpler the better. While most contact forms are already fairly simple, you can’t get much simpler than the single-field form interface (also called the minimal form interface).

The concept is pretty straightforward: a form interface that only shows one text input field at a time, and reveals the next input field with a subtle transition. The idea is to eliminate clutter and distraction by using only elements that are helpful for the information needing to be filled in.

Single-Field-Form-Interface

This form style is probably most useful for short forms, questionnaires, or contact forms, as they require much less work than longer, more complicated forms (like registration forms). Of course, simple-field forms have their disadvantages (you can’t go back and change your answers, for example), but the sheer simplicity makes it a great option as a creative alternative to the traditional form.

Try focusing attention with fullscreen

Similar to the single-field concept, the fullscreen form is another great, minimalistic option if you’re looking to experiment with your forms. Fullscreen forms aim to provide a completely distraction-free experience for users by making your form the focus of the whole page.

Fullscreen forms usually come with a few basic elements, including standard form fields, navigation dots (or numbers) that show form progress and steps, and a continue (or “next”) button that moves the form forward. The fullscreen really only displays one field (or grouping of similar fields) at a time, creating a focused experience where users can carefully review the information they’re inputting.

fullscreen-form

Fullscreen forms are especially beneficial when you require slightly more information from the user but don’t want to over-complicate your fields. The focused UX provides a visually appealing option that allows for more information while giving you all the simplicity of a single-field or traditional form.

Go “Mad Libs” with form function

Perhaps one of the more innovative ideas when it comes to forms, the natural language user interface (NLUI) – a “Mad Libs” style form generated from pre-selected sentences and dropdown menus – is a creative deviation from tradition.

These forms take a very human approach to submitting information. Instead of the standard label-plus-input-field, they use common phrases or fill-in-the-blank style language prompts to encourage specific user input. For example, if you were attempting to find out where you users liked to vacation, you would have them complete the sentence “I feel like travelling to…” instead of answering a question like “Where do you go on vacation?”

Natural-Language-Form

The personalized sentence feels more relatable – like talking to a friend or trusted colleague – and less like you’re answering questions at a mandatory deposition. The benefit to UX with natural language forms is that they humanize your brand while also letting users feel excited about providing their personal information.

In terms of numbers, NLUI forms have also been shown to increase conversions. In 2014, GoodUI.org tested natural language forms on one of their sites and found that signups had increased by up to 29% compared to their standard forms. While the “Mad Libs” style NLUI form is still relatively new, it’s nevertheless an extremely creative and potentially lucrative option when it comes to changing up your form type.

[content_upgrade cu_id=”141″]Still need inspiration? Try our list of 7 Examples of Creative Forms.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

Good UX relies on quickness and ease of use while also providing creative elements that make the experience fun. By incorporating features that both simplify and beautify your form, you can hold user attention and get people to actually want to fill them in. Using CSS for animation, developing humanized questions with your text fields, or eliminating text fields all together and switching to a mobile-friendly design will help move your forms from ordinary to extraordinary.