    
|
|
|
|
|
Incorporating web forms into your website isn’t always the easiest thing to do; they often look very sales-driven, and don’t always flow well with your designs.
But we need forms because they are the ultimate way to capture important user-contributed data.
At Formstack (a web app that allows you to create online forms) it’s no surprise we love talking about web form optimization and best practices. Users are more likely to see and complete your forms if they are easy to use and displayed strategically in your designs.
Let’s explore a few strategic form-presentation techniques along with some examples.
The most fundamental technique for displaying a web form is to have a dedicated web page for it. Examples of form pages are contact forms and sign-up forms.
People who come to form pages are generally ready to act, or are more likely to do so. For instance, when a user clicks on a sign-up button, they already have the intent to use the form they will encounter because they have a task they wish to complete (i.e., sign up for an account).
For long web forms (like online surveys or e-commerce checkout processes) it would be better to use a form page because they need more screen space. In addition, having a dedicated page will allow the user to focus at the task at hand without distraction.
To be user-friendly and more successful at capturing information, form pages should be as short as possible. When we encounter unnecessarily long forms, there’s a higher likelihood we’ll choose to abandon it because there’s too much time and effort required from us.
An example of a form page is HealthTab’s sign-up page.
We can see in this example:
This technique of displaying web forms is good for forms that need to be usable and available on multiple or all pages of a site. Examples of these forms are email newsletter sign-up forms and site search forms.
Unlike form pages where the user has explicitly decided to see the form, on-page forms are presented without the user’s permission. So we must make sure our on-page forms don’t drastically interrupt their experience.
Since we know our users will see on-page forms without prior knowledge about them, we should be extremely transparent when describing the form. Being transparent will help build trust and encourage people to use the form.
We can see an on-page form example by looking at the bottom of Sacha Greif’s blog posts where he has an email newsletter sign-up form strategically placed on the right-hand sidebar.
As we can see from this example:
Modal windows are a way to display content on demand without requiring the user to leave the current page.
Modal windows walk a fine line between being useful and being annoying (like popup windows), so using this technique should be used with utmost care.
You can see many sites today automatically showing modal windows as soon as the page loads. While this method might guarantee that you get your message in the face of your visitor, it’s frustratingly invasive.
Allow your users to naturally find what they need through good, honest and thoughtful design.
Under Armour, for example, immediately prompts new site visitors with a modal window that contains an email sign-up form.
But is this effective?
As a newcomer to the site, how willing are you to give away your email address to this sign-up form?
While this strategy might gain some traction for your email list, you need to prioritize UX.
Using modal window forms is a good technique if doing so can provide UX improvements.
For example, Spotify uses a modal window form to speed up their sign-up process.
Instead of the user clicking on their sign-up button and then being directed to a form page, a modal window pops up near-instantly, saving her a few seconds and making the transition to the sign-up web form much smoother.
In the Spotify example, we can see a good rule to follow when displaying modal window forms: Let the user request for the form, don’t force it onto them. This concept is called progressive disclosure.
Off-canvas layouts have become increasingly popular in mobile UI design. And for good reason: When a designer is only working with about 2-3 inches of screen space, she doesn’t want to cram the screen with too much stuff.
By placing elements such as navigation menus, auxiliary text and web forms off the screen until the user needs them, we can enhance UX and take advantage of progressive disclosure.
In concept, it’s similar to modal window forms. Where they differ is in execution.
Forms that are suitable for off-canvas placement are those that aren’t regularly used, but are nonetheless essential and critical when a situation calls for them.
One type of form that is well-served by off-canvas placement are search forms.
The common design pattern for search forms is to place them at the top of the layout.
In other words, people expect search forms at the top-right or top-left of the screen when they need to search the site. But these locations are prime real estate that can be used more optimally for more critical elements. Not everyone that visits a web page needs to perform a search, so placing a big search form wastes valuable space in a vast majority of situations.
A good solution that allows the designer to shrink the space a search form takes up is to put it off-canvas until the user asks to see it.
We can see this in Bellroy’s off-canvas navigation menu.
Placing not-always-crucial forms off-canvas allows us to free up screen real estate for more important elements.
When they become crucial — such as in the case when a user is having a hard time finding something specific on a site — that’s when we can show it to them.
Regardless of what design strategies you use to collect user information, make decisions based on your users’ needs.
In business, it’s important to maximize leads or signups. But it’s even more important to keep your users happy.
Where have you found success with form placement in your designs? What’s one of your biggest pet peeves when it comes to lead generation techniques in UX/UI design?
Eva McKnight is the PR Specialist at Formstack. When Eva’s not bragging about the awesome ways to use Formstack, you can find her taking too many pictures of her cat or trying to avoid cooking. She loves connecting with other PR professionals and digital marketers. Connect with Eva on Twitter.
Lance Padgett is the SEO Specialist at Formstack where he manages search strategy and strategic outreach campaigns. He also does design and development work too. He loves building things, makes a mean loaf of bread and can talk sports with you all day. Connect with Lance on Twitter.
The post Optimal Techniques for Strategically Displaying Web Forms appeared first on Six Revisions.
]]>
With growing numbers of businesses taking their products and services to the web, offering greater reach and accessibility of their wares to their existing and potential clients, we as web designers need to be ready to deliver on their e-commerce web wants and needs. Across the Web we see numerous examples of both ends of this spectrum, e-commerce websites done extremely well and, unfortunately, some extremely poorly.
Here we’ll shine a light on what makes an e-commerce website really work. We discuss the basics that are required for success and highlight them with some sites that exemplify the points in focus. Overall, much of the weight of a successful e-commerce site falls under the UX umbrella, with functionality being key.
And while it is true that could be argued for every site on the Web, given the very nature of them, e-commerce sites’ success rely so heavily on usability and function, that any choice which would strain either of these aspects of the site should not ever be considered.
Not only do you need at least one very prominant search box on the site, it also needs to work impecibly. Visitors are going to be searching for the items they wish to purchase from the site and if the search function is below par, and they have any kinds of issues whatsoever finding exactly what they’re looking for, it could cost users and potential buyers. In fact, chances are, with the high number of both local and national chains operating in the same markets the users will end up going to a competitor where they don’t have as many issues.
So be clear not only with how they can search the products and services on offer, but also be sure that you give them a trail of breadcrumbs that highlight where in the shop the item they were searching for hides. This way they can easily browse related items in the same category. It is all about giving them as much flexibility to access the store items as possible, while doing it subtly enough as to not overwhelm them. It is a fine balance to strike indeed.
Like the search box, visitors not only need an easy and apparent way to get to their shopping cart from any page on the site, the cart itself needs to be highly user friendly and functional. Users have expectations that need to be looked after if they are expected to stick around and spend their money at any particular site, and the shopping cart is one area where dropping the ball on meeting those expectations can be unneccessarily costly.
Customers need to be able to easily delete items from their cart as well as change the quantities of items in there. Meeting these expectations is good, but exceeding them where you can is even better. Go above and beyond by offering an estimate on shipping based on the customer’s zip code and offering multiple shipping options when available. Make the entire check-out process completely intuitive, an absolute no-brainer, so as to remove any chance of customer confusion.
Naturally you want to showcase the product line in the most effective and attractive way possible. The photographs of the products is the last place any client needs to try and save some money, so you may need to convince them to hire the best photographer they can afford. Make sure the product images show them in their best light possible, and to do so, there needs to be a professional on the other end of the lens.
A gorgeous image with just the right light and composition versus a dark fuzzy photo will make the difference between a sale and a customer lost to a lack of professionalism on display. Almost as important as the way the products look is the way they are described on the site. Give as detailed a description as possible, covering everything the customers could possibly have a question about. Color choices, exact dimensions, weight, and so on.
Though they are often vital to the mission at hand, the prettiest pictures and best descriptions in the world won’t make a bit of difference if the customer can’t find the button to actually purchase the item. The various calls to action throughout will be the proverbial bread and butter of any ecommerce site. Make sure you highlight them effectively enough to find the users’ eye as they’re lead through the design and visually commands them to click.
Which also leads to the next point, be sure they all work properly. Again this is an area where lack of functionality can spell disaster for the site’s effectiveness and overall popularity. If the site is known to have issues with any of CTA’s, then what is the enticement for users to return in search of goods they possibly cannot access or procure. And it is always frustrating for a user when the design visually calls to them saying “Click Here”, and when they do, absolutely nothing occurs.
If the potential customers are going to be giving their payment details through the site you want to make sure they feel as secure as possible in doing so. If there is anything on the site that gives them a less than comforting feeling, with regards to the security of the information required to complete their transactions, good luck getting this to be a successful ecommerce site. So site security has to be priority. Visably so.
Make sure the site have an up-to-date SSL certificate to start with. Also be sure that the site uses an approved and reputable payment gateway to offer users a sense of comfort when they begin handing over their payment information. And speaking of said info, it is good practice to never save credit card information being transmitted via the site. Not only that, but be sure to encrypt all communications with the credit card processor.
Hopefully, if all the other advice is followed, the customers coming to the site will be able to easily find what they are looking for and make their purchase without impedence, but with so many factors influencing all user interactions with the site this is not always a guarantee. Should the users end up with a question they need an answer to, before they buy from the site, giving them a simple way to contact someone who can help is a must.
If someone cannot be on hand immediately to address the customer’s concerns, it becomes imperative to make sure and get back to them in as timely a manner as possible. Keeping them waiting around, is never any kind of solid plan. It can often backfire and cause them to seek out alternatives to your shop.
| Create Typographic Images with Typo-Painter – only $5! |  |
If you have good software skills and are still looking for a summer internship, check out the 2014 Google Summer of Code program. You can earn $5500 by coding for an open source software project this summer. You will probably work remotely, but in close collaboration with a mentor at one of over 100 participating organizations. To maximize your chances, explore the organizations and find one that needs your skills. Details here; apply by Friday, March 21.
]]>
If you have good software skills and are still looking for a summer internship, check out the 2014 Google Summer of Code program. You can earn $5500 by coding for an open source software project this summer. You will probably work remotely, but in close collaboration with a mentor at one of over 100 participating organizations. To maximize your chances, explore the organizations and find one that needs your skills. Details here; apply by Friday, March 21.
]]>
If you have good software skills and are still looking for a summer internship, check out the 2014 Google Summer of Code program. You can earn $5500 by coding for an open source software project this summer. You will probably work remotely, but in close collaboration with a mentor at one of over 100 participating organizations. To maximize your chances, explore the organizations and find one that needs your skills. Details here; apply by Friday, March 21.
]]>
If you have good software skills and are still looking for a summer internship, check out the 2014 Google Summer of Code program. You can earn $5500 by coding for an open source software project this summer. You will probably work remotely, but in close collaboration with a mentor at one of over 100 participating organizations. To maximize your chances, explore the organizations and find one that needs your skills. Details here; apply by Friday, March 21.
]]>New cars will soon come with high-bandwidth connections and app stores.
Starting next month, many car buyers will be getting a novel feature: Internet connections with speeds similar to those on the fastest smartphones—and even a few early dashboard-based apps, engineered to be as dumbed-down as possible.
]]>In this article we're going to have a look at Moboom, a platform for creating responsive web designs for desktop, tablet and mobile devices.
]]>