Five ways to finesse your Web forms

As an active Web user, you most likely fill out several forms online every day, at a minimum. Forms are how we interact online, and they’re very much a part of our personal and professional lives, like it or not.

So why, as ubiquitous as they are, do so many Web forms leave us feeling frustrated? Why do so many users abandon  a form before they’re finished filling it out? Why does Luke Wroblewski, the man who literally wrote the book on Web form design and usability, feel like he has the right to stand up in front of several hundred Web designers (as he did at An Event Apart in San Francisco last December) and tell us that our forms “look like a poo storm?”

Forms are everywhere, and most of them are ineffective at best, downright unusable at worst. Even veteran Web users struggle to fill them out sometimes. Wroblewski explains the convoluted process that often turns the horse into a hobbled camel: regardless of who initially designs the form, marketing, sales, and IT all have a stake in what it inevitably becomes, each adding their own touches and requirements to it. And often nobody is minding the store to make sure the final form achieves its primary goal: getting users to complete it.

Here are some tips – from Wroblewski’s AEA presentation as well as a couple of my own — for the next time you have to manage the design of a Web form:

  1. Resist the urge to ask for every last detail. It’s understandable why it happens. The rare opportunity to get prospects to turn over information about themselves gets your salespeople and marketing teams salivating. But do you really need to ask for a person’s fax number? How about street address? What’s the least amount of information you can collect at this moment? People are more likely to fill out the form if they don’t have to labor over it. Consider each field and requested piece of information carefully before including it. And don’t forget to tell users how you’re planning to use the data, Wroblewski says — people won’t give you an email address or phone number if you’re planning to sell it to someone else or spam them repeatedly.
  2. Think linearly. How does the user’s eyes move through the form? Chances are, they do not naturally jump back and forth between side-by-side fields. Users tend to scan down the left side of the page, so your form should be designed accordingly, Wroblewski says. If you do need to jump around, use strong visual cues to draw users’ eyes to where you want them to go next. And by all means, avoid placing the “Clear All” button where users expect the “Submit” button to be — the biggest faux pas of Web form design is to stick a button in a user’s natural flow that will wipe out all of their hard work instead of rewarding them. It’s quite possible they’ll be so disgusted that they won’t bother filling the form out again after that.
  3. Don’t break with convention. Because we fill out so many of these things, we’ve all become very accustomed to the design standards of Web forms. Occasionally a talented interaction designer finds a way to tighten up space and give a form a truly unique look that also functions well. But often those who set out to build a better mousetrap fail in their attempts. Certain conventions work, so stick with them. For example, a trend is to place the field labels inside the fields. Designers also try placing them to the right or left, or underneath the field. But Wroblewski says studies show that users complete a form 10 times faster when the labels are placed above the field. Smart, thoughtful design is always welcome, but it’s not always necessary to innovate when a convention works perfectly.
  4. Treat the form as a holistic experience. Users get to the form from someplace, and when they finish the form they expect to be taken someplace else. People who create forms sometimes forget this, and focus more on the form itself than on the entire user flow. When sending the user to the form, be careful to only make promises based on reality — let users know what to expect and exactly what they will get from filling out the form. If using a multiple-part form, consider using a progress indicator, and make sure it’s accurate. (Wroblewski uses Fidelity.com as an example of a four-step progress indicator bar that misleads users by failing to mention the requirement to create an account in the middle of filling out the form, a major disruption in the flow.) And by all means spend as much time considering the confirmation page and process as you do the actual form. Users want to know they were successful, and want to be able to do something next as an immediate reward for their efforts.
  5. Use a writer. I’ve known some IT people who were great with words. Designers too. But much of the time, forms need content help. Instructions, labels and buttons often don’t communicate clearly what exactly users should do. Calls to action are unclear or nonexistent. And the opportunity to provide context-based help (such as pop-ups explaining what the information is for or why the company is requesting it) is often overlooked. An experienced Web writer can help you see the form from the user’s point of view and craft language that will make your form successful.
Written on March 10, 2010 by Stacey King Gordon in UX, Web, Web content strategy
Tags: , , , , , , - 0 Comments

The Right Way to Wireframe: reflection on a hands-on workshop

As with many books and classes that begin with the words “The Right Way to …”, the moral of this pre-conference workshop put on by four well-known UX thought leaders was that — you guessed it — there is no “right way” to wireframe.

But during this four-hour workshop, we as participants did witness how lots and lots of sketching, pitching and critiquing, and collaborative problem-solving can turn out several different approaches that all solved the same problem in different and creative ways.

Churning out ideas — lots of ideas
I took the workshop because I increasingly am playing the role of an IA and UX designer, and see it as an important part of the content strategy work I’m doing. But I’m first and foremost a word person, and naturally freeze up when called upon to visually organize and prioritize ideas — terrified I’m going to do it wrong and not quite confident in the process I use.

I learn by doing and seeing others do, so hands-on workshops are ideal for me, and this one was no different. The first thing we did was break into four different groups (some of which were large enough that they broke into subgroups) based on wireframing tool of preference. I use Omnigraffle for site maps and (I was embarrassed to admit, until I learned later in the session that many others were in the same boat) often turn to Adobe InDesign for wireframing simply because it’s comfortable. But I’ve been very interested in Axure for some time, and now that the software has a Mac beta version I wanted to learn more about how to use it — so I aligned myself with the Axure group. (Other participants grouped into groups using Omnigraffle, FireWorks, and Balsmiq. The point of all that was that there are many different ways to skin a cat, and they all work fine.)

We received basic requirements — personas for two different types of users, as well as basic background about the organization we were designing for, and some rough and somewhat vague must-haves, leaving things mostly open to interpretation. Then it was time to sketch.

Six to eight thumbnail sketches. Five minutes. No rules. GO. Of course I froze. I’m a verbal thinker, and would much rather have listed requirements and ideas first, before starting to draw. But the sketching was a fantastic exercise for two reasons:

  • It got us thinking in terms of blocking out areas, shapes, relationships, rather than thinking detail — because there was no time for detail. In retrospect, I think about the Graphic Design Cookbook and its basic building blocks inspiring designers to explore thousands of possibilities.
  • It got us used to the idea that sketching is the first thing UX designers do, and that they do it for a long time. They start with thumbnails and move on to more detailed sketches, but they may go through dozens, even hundreds, of pieces of paper before they are happy enough with a solution to put it into wireframing software. Thinking on paper helps designers stay loose and open to ideas, and makes evolution much more possible than it would be in the software.

When our workshop leaders showed their wireframing processes in videos at the end of the workshop, I was actually relived to see that one of them is a verbal thinker like me — he starts with writing out all his ideas and requirements in long, messy lists. But all four of them sketched and sketched for days before moving on. Sketching is essential.

Design becomes collective
Next, we engaged in a process similar to what burgeoning architects go through in architecture school: “design studio,” where everyone gets a chance to put his or her sketches up on the wall and pitch concepts. As a team we agreed on which pieces we like, and then we started sketching layouts based on the elements and concepts that worked for us.

At that point, we took our sketches to another group and presented to them, collecting their positive and critical feedback that we took back to our table to further iterate the design. Before our eyes we watched our wireframes become further refine. As somebody who tends to work alone, I always enjoy being reminded of how collaboration and feedback can continue to make a solution better and better.

We regrouped, drafted our final sketches, and then it was time to design the wireframes in Axure. While our group’s noble volunteer worked the software, the workshoppers passed out beers, which we all continued to sip as each group presented our electronic wireframes and talked through our solutions.

Having walked and talked through the process, I feel more comfortable wearing a wireframer’s shoes now. Especially inspiring were the videos documenting the unique process of each of the UXers running the workshop … confirming that there is, indeed, no single “right way” to wireframe, but that it all involves a lot of iteration, noodling, paper, sticky notes and time.

Russ Unger (@russu):

Will Evans (@semanticwill):

Todd Zaki Warfel (@zakiwarfel):

Written on February 19, 2010 by Stacey King Gordon in Design, UX
Tags: , , , , - 3 Comments

Why online copywriting is more important than ever

You know those brands that you really dig — that you feel you know so much about and relate to so viscerally that you’ll love them forever, like an old college roommate?

Like people, there probably aren’t many of those brands in your life. But the ones you’ve found you’re holding on to, and they continue to delight you with their ability to be there when you need them, to really get where you’re coming from.

Smart copywriting (combined with a great product presented in the right environment) is largely responsible for that fuzzy fondness you feel for a brand, especially when you interact with it online. That was the premise of Denise Wilton’s talk on “Writing for Relationships” at IxDA’s Interaction ‘10 in Savannah earlier this month. Wilton is the creative director of MOO.com, the wildly successful online printing company that has exploded among creatives and entrepreneurs for their fun design options and easy-to-use system.

But a large part of MOO.com’s success, Wilton asserts, is its ability to create a tangible brand online, where customers don’t have the luxury of interacting with a face-to-face salesperson but still crave the same kind of friendly service they’d get at bricks-and-mortar store. (And, in a world where live employees are MIA most of the time at physical retail stores anyway, there’s a real opportunity to deliver superior experiences even when your salespeople are chatty bots following well-crafted scripts.)

In fact, Wilton talks about Little MOO — the friendly bot who sends automated updates about the status of a customer’s business card order — and how people react to it: replying to it, sending email asking how Little MOO is feeling, treating Little MOO like a real relationship. The way Little MOO and all of the copy on MOO.com is crafted fosters relationships with consumers who feel like they know the brand intimately.

Wilton argues against all the people who say users don’t read online. “People read online all the time,” she says. But copy has to be targeted, useful and authentic, or users will indeed skip over it. “We know people only read what’s necessary online,” she says. “We have to make every single word count.”

Relationship-building through smart writing

  • Lead customers from the monologue to the conversation. Web pages start out as monologues — you’re telling customers what they need to know. But once you make a sale, or two or three or ten sales, you can begin engaging customers in real conversations, through blogs, Twitter feeds and email newsletters. The tone of voice can be a little different in these communications — more casual, more intimate, maybe even more brand-focused or inward-looking — because you’ve formed a relationship and people start to care, to want to join the tribe. Until then, keep the information useful and strictly audience-focused.
  • Figure out what your business is all about. “Are you selling online banking, or are you selling more time to spend with your kids?” Wilton says. “Before you work out your tone of voice, you have to work out what you’re really doing with your business.” A writer who is able to create a tangible, lovable brand voice through copy knows what the brand’s all about, inside and out — and it’s a hard thing to teach that to others, Wilton says.
  • Write for context. In the spirit of making every word count, provide copy that truly supports the sales process — avoiding gratuitous prose. “Context is everything! Otherwise you’re just the annoying shop assistant,” Wilton says.

See Wilton’s entire presentation here.

Written on February 18, 2010 by Stacey King Gordon in Branding, Web content strategy, copywriting
Tags: , , , - 0 Comments

How to write, design and think like a storyteller

Storytelling is so much a part of what I do — of what anyone who is a communicator, written or visual, is striving to do — but there is an art and craft to good storytelling that can shape the success with which we spin our tales. Without understand some of the techniques the best storytellers use, our attempts at leading readers through a narrative can fall flat.

That’s why I was particularly thrilled with Cindy Chastain’s presentation “Thinking Like a Storyteller” during Interaction ‘10, the annual conference of the Interaction Design Association (IxDA), which I attended in Savannah the first week in February. Chastain is a user experience designer but also a screenwriter and filmmaker, and she often relates these disciplines as she talks about how to create captivating experiences for users.

A few of her observations that hit home for me:

There are two narratives going on at once.
There’s the narrative that you as the writer or designer create, and then there is the user’s narrative — the “stream of self-talk” that goes on as a person interacts with a product. Each step of an interaction raises new questions, prompts a user to want more information, and draws the user further into the experience — it’s important to understand how to build the right emotional and cognitive cues into these interactions, Chastain says.

People intuitively understand narrative structure.
For thousands of years, people have been telling stories. Children as young as 4 years old understand the shape of a story — the arc that takes the reader from least to most complex and then back down, bringing readers ultimately to a “soft landing.”

Writers and designers should pay careful attention to that time-tested arc, being careful not to disrupt the narrative flow (by inserting annoying ads or offers just when the story is starting to flow, for example) and to be sure to guide readers to a satisfying ending rather than leaving them hanging. Techniques commonly used in screenwriting such as “slow disclosure” create suspense and draw the reader into the story.

True character is revealed in action.
When we write or design experiences, we’re enforcing a brand character, with a voice and a personality of its own. When thinking like a storyteller, there’s tremendous potential to create a character or series of characters not only through the words we use, but in how and when the user receives a response or a follow-up, where the user is taken next or other “actions” that help readers/users feel like they are starting to understand what the “character” is all about.

See Cindy Chastain’s entire presentation here.

Written on February 17, 2010 by Stacey King Gordon in Branding, Business communications, Web content strategy, copywriting
Tags: , , - 0 Comments

Why I embrace content strategy (and you should too)

“A heart is not judged by how much you love; but by how much you are loved by others.” – The Wizard, Oz

“I hate our Web site.”

That’s how many of my projects begin. A client calls, in a tizzy and in a rush. The company’s or the program’s Web site (in the client’s words) sucks, and the client is finally sick of it.

At first glance, the site may be (but is not always) nice-looking, with cool graphics, an attractive color palette. But try using it. Try reading it. Try navigating it and wading through content once you get a few levels down, where the interface design devolves from lovely and engaging to mucky and clumsy. Frustrated yet? So are the client’s customers.

The client wants a redesign, pronto. A “facelift,” they may call it. A “makeover.” At this point, it’s my job to back everyone up and analyze why the Web site does indeed “suck.” And almost always, the answer is crystal-clear: the site has no content strategy.

It doesn’t just need a facelift. It needs a heart and a soul.

Bandwagons, start your engines
At this point let me say that by even writing this post I feel like I’m jumping into the content strategy parade that is taking the Web world by storm this year. Fueled by the publication of the book Content Strategy for the Web by Kristina Halvorson, content strategy is the discipline du jour. It’s the subject of blog posts and Tweets (search for the hashtag #contentstrategy), online groups, and programming at popular Web events such as SxSW. Content strategy is even getting its very own annual conference, debuting this April in Paris, France (and I am proud to say I have forked over the euros to attend).

The world doesn’t need another blog post about content strategy. But over the past several months I’ve made the decision to shift the focus of my business to this important discipline, as the foundation for all of the Web project work I do. I haven’t quite perfected my elevator pitch to friends and family about this change — it isn’t easy to explain Web content strategy to people who don’t live in the Web world — but I do want to explain to my clients and peers why this focus is important to me — and to them.

Content strategy essentially combines everything I’ve already been doing in my work: using business strategy to drive Web content, site architecture, user experience, design and functionality. The difference is that the content strategy comes first, and that the entire process of a site design begins with a well-developed plan for what content should be featured on a site, based on a company’s strategy, goals, audience needs and position in the competitive landscape. The content strategy then drives all other decision-making: information architecture, UX and UI design, functionality, even the choice of a company’s content management system.

What content strategy is, and what it isn’t
There’s more to it than this of course. A true content strategy has to do with not only what the content should be, but where it’s coming from, who’s authoring it, and how it will be managed post-launch. It may include an editorial strategy, an editoral calendar, a style guide. It’s an end-to-end plan for content — rare in a world where content has long been the most-often-neglected element as well as the one that’s hardest to wrestle to the ground in any Web project.

There are hot debates across the Internet about what exactly content strategy entails (some people believe it’s more about classifying and organizing content than about managing it going forward, for example — everyone seems to have a variation on the definition).

And as with any “awakening” in a community, the clamor for content strategy has led to a great number of misunderstandings and misinterpretations among people whose hearts are in the right place but who are repurposing “content strategy” to their own end. I recently read an article that detailed “10 content strategies for 2010,” which included “launch an email newsletter” and “write some white papers” in its list. No. Those are things that may come out of a strong content strategy, but they are not in themselves content strategy.

Kristina Halverson herself course-corrected hungry content strategy disciples on her company’s blog a couple of weeks ago, reinforcing the true definition of content strategy:

Content strategy is a plan to get you from where you are now with your current content (assets, operations, distribution, maintenance, and so on), to where you want to be. But for some reason, we want to skip that part and rush ahead to the execution piece. Which is why we tend to mix up content strategy … with tactics.

Content strategy is the reason for having a Web
The Web is content. People forget that. It’s the entire reason for the Web in the first place. The nature of that content has changed; now content can be text and video and audio and animation and interaction. But it’s still content. People don’t come to the Web for design. They come to solve a problem, to complete a transaction, to learn something, to find entertainment. That involves content in one form or another.

When companies decide to launch a Web site, they know they need a Web presence. They have a sense of what they want to communicate. They know they want something attractive and engaging that wins prospective customers over to their side. Maybe they want a shopping cart, or an online forum, or a cool interactive Flash. They think about content enough to determine what pages they might want, in order to complete an information architecture and build the site framework and navigation. But they don’t think about the guts of the site ahead of time. And therein lies the problem.

As Kristina Halvorson eloquently describes in her book, content development almost always comes in the final one-third of a Web project — after the IA, after the wireframes, after the user testing, after the visual design, after the CMS has been selected and almost completely implemented. What happens next is classic: a Web writer (and how many times I have been that writer!) or a cross-functional team of contributors comes along with a bunch of Word docs. An SEO specialist slaps on some keywords (and the writer rewrites to make the copy search engine-friendly, often rendering it human-unfriendly, but that’s a topic for another post). A content producer copies and pastes Word copy into the CMS and proofreads it for funny characters and formatting.

Launch day. The site looks great! But over time the cracks begin to show. Content is confusing, repetitive, incomplete, inconsistent or dull. It’s also really hard to find. And did I mention out of date? The online forum has a bunch of spam comments. The blog hasn’t been updated in three months. The Web site, quite simply, sucks.

What you get with content strategy
Starting with the guts means you’re starting with the heart and soul of a site, the why and how. What are our goals, and what content helps us achieve them? How do we execute content in a way to meet our specific goals?

Just as example: a company wishes to distinguish itself as a thought leader in its niche. How do we do that? Do we have a truly distinctive voice to bring to the table, a unique point of view and proprietary knowledge that we can share? How can we offer it up in a way that’s engaging, and to what end are we doing so? How do we put the resources in place to sustain our approach over time?

What you get with content strategy is the foundation for a rewarding customer experience that communicates your company’s or organization’s value while meeting your strategic goals. If it’s done right, here’s what that looks like:

  • Your site tells a multifaceted, but cohesive, story about who you are, what you’re all about, how you’re different and what users can or should do next — from home page to deepest-darkest detail page.
  • Your site design leads users to the most important content and functions, while empowering them to find the content they want the most.
  • Your site provides valuable information to users who will come to see it as a go-to source for decision-making, professional enrichment, problem-solving tools, or whatever other purpose your content serves.
  • Your site delivers what it promises to deliver. Enough said.

By the way, content strategy isn’t just for Web sites. It’s for your entire online presence, including social media platforms you’re managing. If you’re trying to answer the question “Should we be on Twitter?”, you’re asking the wrong question. Content strategy governs everything you publish online, and content across platforms should be inextricably linked.

I have so much more to learn, and 2010 is my year of immersing myself in content strategy and user experience by attending conferences, reading everything I can my hands on, listening to podcasts and meeting others who are as passionate about this discipline as I am.

But suffice it to say that my focus on content strategy will be a good thing for my clients. At An Event Apart in San Francisco recently, programming guru Jeff Veen declared, “We can make more Web!” Which is great. But in partnership with my clients and with content strategy at our backs, I’m hoping to make better Web.

Written on February 4, 2010 by Stacey King Gordon in Web content strategy
Tags: , - 2 Comments
« Older Posts