On October 13th I’ll be speaking at An Event Apart in Chicago, IL about Web Form Design in Action. I’ll walk through the latest applications of rich Web form interactions including: flexible inputs, dynamic help systems, inline validation, selection dependent inputs, and more.

If you are interested in going, feel free to use the discount code: AEALUKE for $100 savings on the event cost.
Official Description
The Web has been transformed by the recent proliferation of rich interactions and social applications. But the workhorses of the online world, Web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, Web form design matters. But web forms aren’t keeping up.

Building on topics in his top-selling book, Web Form Design: Filling in the Blanks, Luke Wroblewski will walk you through the latest applications of rich Web form interactions (made possible by dynamic technologies like Ajax) including: flexible inputs, dynamic help systems, inline validation, selection dependent inputs, and more. He’ll also outline how gradual engagement approaches to form design can create compelling new User Experiences for a wide variety of Web applications and services. Learn how these modern approaches to Web form design can enhance your Web apps.

Hope to see some of you there!

Tags: aneventapart, forms, guidelines
Go to Source

Contact forms can fail in many ways. Be sure they do not by following these guidelines.

There are some simple steps you can take to create the best bridge possible between you and your clients. The most obvious way to receive that feedback is through a contact form. It is an essential component for owners of websites. It creates a channel to hear feedback, suggestions, and even sell services.

The Basics

There are several things that a basic contact form should include. Meeting these standards will ensure you are on the right path for creating an excellent contact form.

What to include

Studio 7 Designs‘ contact form is clear and to the point

For the most basic contact form, you will need to include several key components. These almost always include the senders name, a way to get in touch with them, and a message. Also be sure to include a clear submit or send button. Failing to meet these basic needs will insure in a quick failure.

Make sure not to get too lengthy in what you are asking for. Remember that the user is simply contacting you not asking for a quote on their next large project they want to hire you for. If they are requesting a quote it is best to allow contact in two forms, one for simply contacting you and one for quotes. If too much is required a user will abandon ship.

How to structure it

When structuring your contact page it is best to place your fields in a traditional location that leads from who is sending to what they are saying. This can easily be done in two ways. One is to offer a single row of fields to fill out. The other is to create a two column contact page by presenting a few fields on the left (possibly including name and email) and then presenting the message field on the right. Both of these structures are intuitive and easily understood.

Breaking these conventions (Redd has discussed conventions in the past) can often lead to confusion or a failed attempt to contact you. It is also of utmost importance to offer a tab through order that is conducive to your contact form. For example, do not set your form up so that if you tab from one field to what you expect to be the next that it goes to the header of the page.

Clearleft utilizes a two column contact form that is beautiful in every sense.

Submission is Key

Submitting the message in the contact form is yet another seemingly simple part that many people overlook. There are two key components that must be considered when asking the user to send a message to you through a contact form:

The call to action button

Looking back to David Hamill’s discussion on Good Call to Action buttons we can learn much about what we must consider when choosing our “send” button. When choosing what word to use, we must always consider our audience. The two most common choices are ’send’ and ’submit.’ Both of which convey their message clearly. Another option to consider is describing your action more clearly. This could be worded as ‘Send Email.’

Submitted. Now what?

Once an email is submitted, a user expects for a sign showing them that their intended action was successful. If the message sends and no confirmation is offered, then a user may have doubts of whether or not their message will be received. We always want to leave the users feeling confident about their actions.

At UX Booth we show our users a message highlighted in green that reads ‘Thank you – your message has been sent.’ You may also consider including a more detailed message. If you know that you don’t ever answer emails over the weekends that may be something you would like to include, or tell the user that you will work hard to respond within 48 hours.

UX Booth offers a confirmation message to inform users their message has been sent.

Going the Extra Mile

So that covers the basics. That is how you can make an effective contact form, however, maybe you want to go a bit further. I believe the following tips should be done to create the optimal experience.

Fail Gracefully

If a user encounters an error on your contact form, it creates a barrier between yourself and feedback or even a sale. When a user encounters an error be sure to offer useful feedback. An example of what to avoid could be “Error 4055″. What does that mean? How is that going to help the user correct his or her problem?

Offer helpful hints along the form to help guide users while they are attempting to get contact in contact with you. One of the easiest ways to accomplish this is through jquery. Be sure to visit Web Resource Depot’s ‘16 Free Ajax Contact Forms‘ for some excellent examples.

One particularly interesting jquery option is one that is truly geared towards Usability. Comments are often presented to a user in the respective fields, but when the user clicks it, the text disappears and becomes lost. Now there is a way to keep the tip in the field when clicked. Be sure to check it out and consider it on your next design: In-Field Labels: A Better Way + jquery Plugin.

Offer an Alternative to the Form

FireHost offers many forms of contact along side their contact form.

One of the best ways to avoid a total loss of communication is to also offer an alternative to the contact form.

Depending on your audience you may notice you receive fewer emails and more phone calls if the chance is offered. This is a common difference in generational use of the internet. David Hamill (yet again) saves the day by writing about the basics of <a rel="nofollow" target="_blank" href="http://www.goodUsability.co.uk/2009/06/providing-contact-details/”>providing contact details. In this article he discusses many different ways to include information that should not be left out.

Conclusion

Your contact page is often the only way for clients, readers, and users to reach you. Make it as easy and pleasurable as possible for them. In many circumstances it can be the make or break point in terms of a sale or networking opportunity. By incorporating a few of these simple guidelines, you can increase the chance of that user getting through to you.

What contact form blunders do you hate? How have you made your contact form easier to use?

Go to Source

Date: Thursday, July 23, 7:00 PM – 9:00 PM
Location: Carnegie Mellon University, Bldg 23 Moffet Field
Mountain View, CA 94040
Cost: Free

Official description
The Web has been transformed by the recent proliferation of rich interactions and social applications. But the workhorses of the online world, Web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, Web form design matters. But web forms aren’t keeping up.

Building on topics in his top-selling book, Web Form Design: Filling in the Blanks, Luke Wroblewski will walk you through the latest applications of rich Web form interactions (made possible by dynamic technologies like Ajax) including: flexible inputs, dynamic help systems, inline validation, selection dependent inputs, and more. He’ll also outline how gradual engagement approaches to form design can create compelling new User Experiences for a wide variety of Web applications and services. Learn how these modern approaches to Web form design can enhance your Web apps.

Hope to see some of you there!

Tags: forms
Go to Source

We’re planning on launching the full site in January, but we wanted you to have a sneak peak at the great program we’ve put together. This year’s Summit is really exceptional and we think you’ll want to be there.

UIE Web App Summit 2009

At the UIE Web App Summit, you’ll meet the innovators and world-class designers behind today’s most successful web apps. 

We’ve carefully crafted this four-day Summit to include two days of intensive full-day workshops on form design, Ajax, RIAs, design deliverables, wireframes, accessibility, design patterns, and web standards. Our world-class presenters will be talking about:

* How to implement a Web 2.0 strategy and design
* Creating highly-effective design deliverables
* Using design patterns and components to achieve reuse
* How to create wireframes and prototype for Ajax

We round out the conference with two more days of featured presentations from world-renown experts, to give you fresh perspectives and new insights on today’s web app design challenges. 

Last year’s Summit attendees told us they returned to their teams empowered to make an immediate impact, all fired up and ready to go. You’ll come away inspired to create amazing applications that will delight your users.

Register by January 7 for a Limited-Edition Web App Summit iPod nano

By registering early, you’ll receive a very cool gift: the latest Apple iPod nano.

This limited-edition Web App Summit 2009 iPod nano can store 2,000 songs, 7,000 photos, or 8 hours of video on an internal 8GB hard drive. Plus, it will sport the slick Web App Summit 2009 logo on the back. 

We’re sending an iPod nano to every person who registers before January 7. This is not a raffle or drawing — by signing up you are guaranteed to receive your iPod nano.

We hope to see you in Newport Beach!

Go to Source

Over at Semantic Foundry, designer extraordinaire, Will Evans, has a wonderful essay explaining how he uses wireframing as both a problem setting and a problem solving approach.

I pick my primary audience and the one activity which allows them to solve one goal quickly, effortlessly, elegantly. In this case, the primary audience wants to easily find the best cruise, at the right time, for the right price. I don’t even look at the requirements document or competitive analysis until after I have sketched a couple of ideas either on paper or using Omnigraffle, which explores the primary goal. I’m not looking for solutions at this point because the first round of wireframes provide a space to engage in a dialogue with other designers, stakeholders, and the wireframes themselves.

It’s a great description of how Will tackles a design and he’s provided his work products for you to download.

Read Will’s essay: Shades of Gray: Wireframes as Thinking Device

[Plug: At the upcoming UIE Web App Summit, we have two sessions dealing with wireframing. Dan Brown will talk about how wireframes are an essential part of your overall design deliverable strategy in his full-day workshop, Communicating Design: Essential Deliverables for Highly Effective Design Teams. James Box and Richard Rutter will spend half of their full-day seminar, Wireframing and Prototyping for Highly Interactive Web Apps, demonstrating how to use wireframes when building Ajax and social networking tools.]

Go to Source

Subscribe to our podcast via

Yes, if you do it right, using Ajax techniques can improve accessibility. Surprised? You shouldn’t be. Ajax is like most techniques and technologies on the web—they are what you make of them.

I had a chance to talk with Derek Featherstone, a world renown expert on web accessibility and principal of Further Ahead, a consulting firm out of Ottawa, Ontario that helps their clients get the most out of their web site designs.

In the podcast, Derek tells us that we first need to know how to think about Ajax as a design tool. Today’s toolkits (such as jquery.com/”>jquery) can really help designers build functional prototypes to demonstrate their interaction concepts to developers, who will then integrate their ideas into the production system. Taking advantage of the many available libraries gives you a sandbox for trying out interactions without having to know the best practices for implementing the code.

Derek also discussed common misconceptions about Ajax. He said that, while implementing Ajax that aids accessibility has its challenges, it’s within the technical reach of most developers.

I was glad when he reminded me that many interactions that improve experiences for people with special needs also improve the experience of average users. Techniques like managing large data sets on one page through Ajax-powered content updates can also help users with special needs by maintaining context which is normally degraded by full-page refreshes.

As always, I found Derek’s insights fascinating and I bet you will too.

[In case you hadn't heard, this year we asked Derek to build a brand-new, full-day seminar just for UIE's Web App Summit. His session, Designing Great Interactive Experiences for Everyone: Implementing Ajax and Accessibility will unleash a torrent of information about integrating Ajax best practices into your design workflow.

For people who are new to Ajax, he'll define the technologies and techniques involved, and describe what they're really good for and what they are not. For those who are using Ajax currently, Derek will delve into where to get your biggest wins with these interactions and what the best practices are for enhancing accessibility with Ajax. It's going to be a great session from one of our best-rated presenters. You won't want to miss it.]

Go to Source

I’ve created five categories and a catch-all to capture the solutions and companies (not so much technologies) that are leading the next generation of Business Intelligence. The categories are:

• Analyst tools
• Dashboards
• Targeted solutions
• Open-source and free
• Advanced visualizations
• Other stuff

Naturally I’ve focused on areas of Juice expertise and focus — not coincidentally, the places where we feel BI has neglected end-users. According to a study by the Business Application Research Center, BI end-user adoption sits at a lowly 8%.

I’m happy to take your suggestions (and update the post) for things I’ve missed in these categories or for entirely new categories.

Analyst tools

Tools that make it easy for analysts to pull data from multiple sources, analyze, visualize and share it.

Winner: Tableau, the reigning king of visual analytics tools, has added more web-based functionality to allow for online sharing and collaboration.

Runner-up: Good Data has arrived on the market with a web-first platform designed to democratize analytics. I had a chance to get a demo from the management team and was impressed with the ease of use and high-quality data presentation.

Dashboards

“A frequently updated analytical display that is clear and concise” (via a recent post)…and not likely to draw the rage of Stephen Few.

Winner: BonaVista Systems wants to make Excel a “first choice dashboard tool.” From the humble position of sparkline plug-in vendor, BonaVista has taken a leadership role in encouraging more effective dashboard design.

Runner-up (tie): Two BI companies, Qlikview and Microstrategy, seem to be following BonaVista’s lead. Unfortunately, they may only be dipping in a toe as I found just a couple examples that break from the traditional over-glossy, gauge-riddled dashboard interface.

• Qlikview
  
• Microstrategy
  

Targeted solutions

Companies that serve a narrow slice of the BI world extremely well. The desire to be all things to all people has been an Achilles Heel of the BI industry. The general purpose BI platforms often prove too broad and too generic to serve the unique problems of specific industries or functional areas.

Winner: Wall Street on Demand is a brilliant, below-the-radar provider of information solutions to the financial sector. Their sparse, articulate marketing text and few screenshots hint at a company that knows exactly what they do and deliver high-quality BI solutions. I wish I knew more.

Runner-up (multiple): The following are just a few companies that have focused on an industry or functional segment to deliver targeted BI solutions:

• Quantivo for customer behavior analytics
• Visual I|O for pharmaceuticals
• LucidEra for sale pipeline reporting and analytics

Open-source and free

(I know there is a difference.)

Winner: Pentaho offers an open-source end-to-end BI suite that is a competitive alternative to the big-guys. Of course, the implementation it isn’t necessarily cheap or easy.

Runner-up: If anything should scare the BI industry, it is the possibility of a Google Analytics model extended into more general data analysis and visualization tools. Google Fusion Tables may just be the tip of the iceberg.

Advanced visualizations

Bringing leading-edge visualization techniques out of academia and into the business world.

Winner: Many Eyes continues to impress with high-quality visualizations. They are easy to create and clean in design and Usability. Impress your boss with a slick visualization in your next presentation.

Runner-up (tie): Openviz / Advanced Visual Systems and Panopticon appear to be the two BI vendors battling it out for leadership in advanced visualization solutions. Unlike Many Eyes, these guys lack Tufte-esque sophistication in infoviz design. That said, there is a big difference between creating a one-off New York Times-quality visualization and delivering a toolset that is re-usable in many different situations.

Other stuff to be admired

Free charts with good default design. InetSoft’s Style Chart and Google Charts offer free, embeddable charts.

Jargon-free BI marketing. With few exceptions, BI web sites are densely populated with those awful stock-photography people sitting around conference tables (or worse, the ethnically-diverse V-formation marching at you) and meaningless business jargon and techno-babble. I really appreciate Blink Logic’s web site with its straight talk and clean, readable design.

Beyond the desktop. RoamBI has a great-looking iPhone application that is designed to “transform your data into insightful, interactive visualizations delivered to the iPhone.” It makes the Oracle and Qlikview iPhone apps look old-school.

Go to Source