NavigationArts.com

our company

Contact Us

Navigation Arts Location Map

Connect

Find out more about our consulting services. McLean. Boston. New York.

What's New

uxpa

UXPA

How to Create Award-Winning UX Portfolios and Case Studies

Solutions

Thinking Big

Clark Construction

Digital Innovation

Reimagining how our clients can do business in the digital world.

Thinking Small

University Website Design

Mobile & Responsive

A responsive design approach engages users wherever they are. Web. Tablets. Mobile.

User Experience

Left Brain

PFC Energy

Critical Thinking

User-centered digital strategies help our clients surpass their competition.

Right Brain

National Aquarium

Immersive Design

Exciting and memorable visual experiences guide users through digital channels.

Technology

Sitecore

sitecore

Certified Partner

NavArts is one of only 7 Sitecore partners in the USA with 4 or more certifications.

Drupal

Drupal 7 Content Management

Open-Source

NavArts brings proven process and UX skills to the popular open-source platform.

our work

Case Study

State Department

A new site for the State Department guides journeys across the globe.

Design

Portfolio_Water

Portfolio

Cutting-edge design to revolutionize the world of user experience.

Insights

Webinar

Nicole Dingess

What is UX?

UX should be in your digital vocabulary, but do you fully understand its significance?

Search

Form Under Function by:


April 10th, 2013

There are few things more frustrating than being shut down by an online business because of their terrible forms (#TOTALFAIL). Books (or tweets) could be written on the subject of form usability, as they are often the worst offenders in my travels on the web.  I’m shocked when I’m confronted by an awful or broken form on the site for a large organization that relies on their brand to invoke some level of trust.

Here are a few ideas and highlights that the front end development and UX teams at NavigationArts have come up with to promote more friendly and usable forms.

You Should Care

Forms often perform the most critical task on your website- they connect a site owner to its users or customers. In his book, Web Form Design: Filling in the Blanks, Luke Wroblewski has listed the three main areas in which forms can help your business run smoothly:

  1. Commerce: Direct sales…buy something from us!
  2. Community: Contribute to us…participate in the conversation!
  3. Productivity:  Empower users to self-service…stop calling us!

Test It

The most obvious thing you should do is test your form. Make sure it behaves and responds as it should with both good and bad input.

Input Masks

A great way to offer some suggestions to your users about what content you are expecting is by using input mask plugins. There are some good plugins out there such as Dynamic Field Masking Plugin and the jQuery Masked Input Plugin to help you accomplish this.

Placeholder Text

Another great way to provide feedback about a particular form field without otherwise muddling up the interface is by using placeholder text- a tool supported in most modern browsers.

Contextual Help

Contextual help, in the form of tooltips and icons, is another great tool to create user friendly forms. This is especially helpful when a field may require a more in-depth explanation than what can be provided by other means.

Touchable

Native form elements often do not translate well on touch devices because of their size.  Redesigning forms for touchable use is also a great opportunity to address the aesthetics of native forms which are, across the board, fairly drab and unappealing. Increasing the size of elements so that they can be more easily checked or clicked is important.

HTML5 Elements

Using the appropriate HTML5 form elements is not only more semantically meaningful, but it also enables better usability on devices that can respond to the type of input with a more appropriate response. For example, instead of a text field for a phone number, input type=tel , on many devices the phone keypad is exposed instead of the QWERTY keypad.

Validation

Providing real time validation is often useful for keeping your users on track when filling out a form. It is a more satisfying experience for them to correct a field based on a validation hint than to see a big, ugly fail message flashing at them in red. Ouch!

In order to facilitate this on the front end there is an old standby jQuery plugin aptly called “Validation.”

Forms are a key part of understanding your user and gaining relevant information from them to support and grow your business. By providing friendly and usable forms, you are allowing your users to feel successful, making them more likely to return to your site.

Tags: Usability, User Experience,




Comment on “Form Under Function”


April 2014
M T W T F S S
« Mar    
 123456
78910111213
14151617181920
21222324252627
282930