A few weeks ago, I wrote up a case study around the perplexing case of designing user experiences for lead generation pages. I’m going to cover the results of our test shortly, but in the meantime I wanted to share part of the conversion funnel that has forever changed the way I’m going to design for sign-ups.

Designers do a lot of work engineering the experience of creating compelling sign-up forms for a variety of reasons (joining communities, requesting more information, age-gating verification, etc.). I’d like to take a closer look at how the Thank You page of the conversion flow can be leveraged more effectively for experiences that aren’t necessarily tied to joining a social network.

That said, social networking sites are full of awesome examples where the Thank You jumpstarts the user’s uptake, so if you’re:

• Tumblr, you have your user create her first blog post
• Twitter, you have your user find cool people to follow
• LinkedIn, you connect with your email address book
• Meetup, you have your user join a group

But, let’s say you’re a more traditional (perception = less fun) business like a university, can you do more than guide your user towards more descriptive content about the program or services offered (where bounce rate will be high)? How can you make the most of that transaction? How can you parlay the validation “Thank You” into action that can be both inspiring and measurable?

Thank You messaging is not supposed to feel like the awkward end of a first date “Do I kiss him?” moment.

The user has shared her information with you, triggering a response and follow up campaign. She’s staring at the Thank You page, confirming she submitted her information correctly. This is a powerful moment to turn your Thank You into more than:

• a data verification step
• a reiteration of your brand’s identity and tagline
• a jumping off into content (where the bound rate will be high and not super effective in terms of engagement, relationship development, etc.)

Social marketing channels have helped turn Thank You pages into opportunities for secondary levels of conversion where you can experiment with Facebook Fan Page and/or Twitter acquisition.

This brings me back to the use case at hand, while our lead gen page had a number of design constraints, we found that we had a lot of artistic leeway in creating a Thank You page, so we decided to make the number one goal of the page to excite the user to join our Facebook Fan page.

First, let’s look at the original Thank You page, which did include Facebook & Twitter opportunities:

(Note: I apologize for striking through the brand name, my client is a major university and getting approval to share the brand is a bit of a juggernaut.)

Now, let’s look at the redesign of the Thank You page, which puts primary focus on Facebook Fan acquisition v. promoting both Twitter and Facebook equally:

The design:

• Inspired by the idea of the excitement around an “acceptance letter”
• Focused on the fun of university life and community
• Featured access to current students, faculty, and admissions through Facebook

The results:

• Increased Fan Page uptake from 28 fans per week (a consistent rate for one year) to 300+ fans per week (2+ weeks of ongoing data)
• Increased the quality of interactions on the Fan Page, where we were encouraged to see prospects asking questions that were fielded by students, admissions, and faculty
• Increased interaction with blog content, driving traffic to the parent site and making better use of all editorial collateral

As You Design Conversion Experiences Thank You Messaging is:

• Integral—A necessary part of the conversion experience, it’s no longer just a simple hello/goodbye world
• Instantly Gratifying—If you’re testing a conversion experience the results are ongoing and take time. Adding a secondary conversion exercise like Facebook Fan acquisition is an immediate way to leverage (in real time) effects of your messaging
• Social—Leverages warm fuzzies in innovative ways and gets users connecting with one another
• Sticky—The last thing the user will remember about your brand, and can have the added possibility of taking the conversation even deeper into her personal network

Perhaps, the biggest takeaway from designing a great Thank You experience is that the more you can leverage the Thank You, they more you can get your users to connect with your app and with each other the less money you’ll need to spend on post conversion campaigns, marketing, and more. I’d love to hear your experiences around the “Thank You” in your designs, examples, etc.

Thank you!

*Design by my brilliant partners at jjomedia.com

“Doh! %&^%&^%&!”

Another forehead-smack-worthy curse-laden moment: I’ve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.

While considering how much I really need to complete this form, I start making notes on how I’d design it to be a better experience. Seriously, how many date formats am I going to have to try before I get this sucker right? Do I need to phone a friend?

The lack of strong error messaging is a regular issue I encounter as both a user and UX designer. As the bearer of bad news to users, error messaging can be the element that determines whether your app gets a “Sale” or “FAIL.”

Editor’s Note: We’ll be covering UX tips and strategies at The Future of Web Design NYC on Nov 16th – 17th.

1. Error messaging is customer support

Error messaging is a critical component of customer support. Customer support teams are experts at talking to and coaching users towards conversion and success.

While QA hustles to break it down, customer support can work side-by-side to craft sensible messaging around those scenarios. The result? More sales, fewer customer calls and complaints.

Some mistakes (e.g. date formats, passwords, emails, forgotten fields) are both predictable and recurring mistakes that cannot be prevented by better design. Design the outcome to encourage the user to engage with the app’s voice, correct her mistakes, and move onwards.

2. No one ever died of humility

While it can be tempting to assume that the user is at fault when an error is made, it’s also possible that the process wasn’t clear enough in the first place.

Error messaging should be concise, friendly, and knowledgeable, but also employ humility, empathy, and apology. I personally love Firefox’s “well this is embarrassing” statement. I tend to crash my OS frequently, and it’s not FF’s fault, yet every time FF makes the assumption that I’m not at fault.

3. Bake with cookies!

Among the most unforgiving experiences occurs when a user fills out a form and having all her data it wiped out for having forgotten or mis-typed field. If you’re not a banking institution you don’t have the luxury of abusing your user by dumping her data.

Save as much information as is possible and safe for your user (e.g. re-fill everything possible with exceptions for passwords, TOS, etc.), and then clearly mark the areas your users need to correct. Saving user data will reduce user annoyance and the chances that she’ll abandon the process.

4. Don’t cheap out

Don’t cheap out on design when it comes to error messaging. Users who hit error messages are helping your team learn how to optimize your product.

Do use this as an opportunity to build a relationship and engage with humor. You can soften the feeling with typeface and words that don’t alarm, humiliate, or annoy.

Do use resourceful and helpful iconography to reduce the amount of words.

5. Error messages are not features

As great as your app’s error messages may be, they aren’t supposed to become legacy features.

Assign a team member to study the error logs. Learn what happens when your users make mistakes and constantly optimize.

• What fields were incorrectly filled out?
• What did the users put in those fields or forget to put in those fields?
• How many sessions do your users log?
• What’s the abandonment rate?

Error messaging can be the simple tweak that influences your bottom line (conversion), so it’s worth ongoing evaluation and investment.

6. Everyone loves the funny guy

It’s easy to hide behind a great sense of humor, but it’s also easy to distract your user. Use low-key and relative humor like icanhazcheeseburger.com that doesn’t overshadow the error messaging itself.

7. Choose helpful over cute

Error messaging should be more helpful than cute. CushyCMS’s “Wharrgarbl” was only amusing and forgivable the first time I saw it, by the third time I was annoyed and still couldn’t figure out what the source of the problem was.

8. Go behind the browser

If you are low on resources or without customer support, integrate your error messaging within the user’s browser. This will force the user to stop and read what she’s doing incorrectly. Oddly, I’ve seen users mutter and blame the browser versus themselves or the app.

9. Don’t play hide-and-seek

Bring your user directly the area where the problem is. Meetup.com has fantastic messaging, but unfortunately during the sales process, they bring the user back to the top of the page, when the error is well below the fold. This causes the user to pause and think versus correcting and moving forward.

10. Don’t design single-size error messaging

One size error messaging is a bad idea. If a user has failed to put a size or choose a color of a purchase she wants to make on zappos.com, the error message should point out that specific issue versus being popped into the “Item Out of Stock” skin used elsewhere across the site (@zappos – please fix!).

Error messaging occurs when a user makes a mistake (dumb user) and it’s an element of your app’s design that can keep the party going or literally result in a lost sale.

If there were one thing I’d like you to take away from this article it would be that you go back to your team and talk about and revise your error messaging, and then let me know what the results are. My prediction is that writing hero-worthy error messages will result in improvement and lift across your sign-up, sales, and data gathering processes.

Personas are a powerful tool for helping you to better understand the needs of your users. In this comic, drawn exclusively for Think Vitamin, you’ll learn more about Personas and how they’ll revolutionize the way you design and build web sites.

Come hear Dan Cederholm, Jason Santa Maria, Joshua Davis, Bill Buxton, Daniel Burka, Elliot Jay Stocks and more speak at The Future of Web Design NYC on Nov 16 – 17th.

More about Personas

Putting Personas Under the Microscope
cooper.com/journal/personas

The Origin of Personas
cooper.com/journal/2003/08/the_origin_of_personas.html

Getting from Research to Personas: Harnessing the Power of Data
cooper.com/journal/2002/11/getting_from_research_to_perso.html

Personas and Goal-Directed Design: An Interview with Kim Goodwin
uie.com/articles/goodwin_interview

What’s your customer’s persona?
usatoday.com/money/smallbusiness/columnist/abrams/2005-02-18-persona_x.htm

More from Indi Young:

Book: Mental Models
rosenfeldmedia.com/books/mental-models

Look at it Another Way
alistapart.com/articles/lookatitanotherway

More comics from Brad Colbow:

Misunderstanding Markup
smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip

Alignment in design:
sixrevisions.com/web_design/the-brads-alignment-in-design

The Brads, a weekly web comic
bradcolbow.com

Al Gore invented the Internet. Drinking alcohol keeps your body warm. You won’t get pregnant if you stand on your head after … well, you get the idea. Myths are those hard-and-fast rules that often start as a plausible idea or once-off observation that grow and distill into ‘common knowledge’ as they virtually spread. I know I’ve believed a few of these. I’ve also asked my UX expert Twitter friends for their UX Myths – and they have many!

So, let me entertain you with a list I compiled of my favorite ‘User Experience myths’. Then perhaps you, like many UX folks, will have some myths of your own to share …

Note from the Editor: Doug Bowman, Dan Cederholm, Jason Santa Maria and more, will be talking about UX at The Future of Web Design NYC.

Myth #10: If the Design is a Good One, You Don’t Need to Test It

This myth states basically that if you are experienced, and you know what you’re doing, then you won’t need to do any user experience testing. The parallel myth to this is that Great Designers create finished products in one shot, with less need to mockup, prototype or user test. If there’s one theme I’ve noticed when studying experienced and successful design firms and approaches, it’s that user testing is absolutely key.

IDEO are known to create dozens of prototypes for testing during a product’s development. Apple’s Jonathan Ive has admitted his love of prototypes – and you can attribute part of Apple’s recent success to their willingness to spend the time, money and energy to prototype and test everything, even their stores.

I’ve been enjoying the trend in the software industry towards SCRUM and agile design, where quick turnaround, testing and redesign are key.

One of the reasons why user testing is often delayed, or skipped, is because of a tendency to think that testing needs to ‘formal’, ‘proper’ or extensive. When doing UX design on software applications Comic Life and Skitch, my co-UX designer and I often approached random people at our cafe hangout and asked them if they would take a few minutes to try our latest build. Because our applications are used in education, we also asked teachers and students to use our try our software.  You’d be surprised how helpful an independent experience of your design can be, and with minimal expenditure of time and money. My one tip is to make sure you’re being clear that you’re not testing them, just the product.

Myth #9: People Don’t Change

OS X Preference window includes a how-to video on using the trackpad.

This myth assumes that the population’s understanding of a technology stays the same. I remember using an early Macintosh and watching the tutorial on how to use a mouse. Particularly how to double-click, and how to pick up the mouse and move it to the edge of the mouse pad if you run out of room. (I’ve seen computer users who would still benefit from this tutorial.) In its place on a modern Mac is a video demonstrating multi-touch gestures.

There was an early time on the web when everything important needed to be ‘above the fold’; the area seen in a typical browser before any scrolling took place. This is now much less relevant. Here are some more myths that are not necessarily true anymore:

My point is that there is a history of cultural change that you can draw on. “Any customer can have a car painted any color that he wants so long as it is black” works for a while, and then grows old. Soon, people that use what you work on are no longer captivated or mentally constrained by the newness of the technology. (Of course, I’d still love those mouse tutorials back, and so may your customers.)

Myth #8: Design to Avoid Clicks

“Everything should be made as simple as it needs to be, and no simpler.” Albert Einstein.

While we’re talking about reducing clicks, there is a myth, or perhaps it’s closer to an intuition, that the number of steps of interaction should always be reduced. But my experience leads me to believe that sometimes the result of an overly ‘optimized’ design is actually harder to use, and the user would have been much happier just doing a few more steps.

One example I’ve seen is the concept of ’styles’ in word processing and graphic design software. Styles offer the powerful ability to define a visual look once, and apply and update it for many objects. However, I’ve seen users struggle with the concept and resort to changing each element separately. Alternately, they multi-select objects and change attributes in this fashion. At at guess, it seems the time-saving ability of styles costs more mental effort than the physical effort it saves.

Interestingly, the study of ergonomics owes much to pioneering industrial designer, Henry Dreyfuss. If you ever think you’ve got it tough in the new field of User Experience Design, find solace in the fact that Industrial Design was in the same position in the 1930s—and Henry Dreyfuss was at it’s forefront. And if you’ve never heard of Henry Dreyfuss, then you’ll probably enjoy reading about another influential Industrial designer Dieter Rams and comparisons made to modern day Apple products.

Also,  there is an interesting story on the work of another pioneer Walter Dorwin Teague when consulting for Kodak. In an effort to sell more Kodak cameras to women, the ‘Vanity Camera’ was released in five distinct colors. The iPod, decades later was to use the same trick (and with a very similar color palette.)

Myth #7: UX Design Stops at the Edges of the Product

Interestingly, the ‘Vanity Camera’ mentioned above came in a satin-lined box colored to match the camera. If you’ve got this far, then you’re probably also the kind of geek who’s seen “unboxing” videos posted for  many new shiny pieces of tech, and understand how appealing good packaging can be.

In my world of software, the equivalent of unboxing is often the download and installation of software. Popular Linux distros like Ubuntu seem, in my opinion, to be offering one of the best virtual ‘out of the box’ experiences when finding, installing and updating applications. This Ubuntu screenshot demonstrates the app installer; a built in utility that makes it easy to search for applications by their description, knowing that they have some measure of safety, pick one you like based on it’s popularity (for example), automatically check that your system can run said application and if not, install the necessary pieces, install the application, and keep it up-to-date in future. Nice.

View larger

The Linux approach, in my opinion, is the best of any platform. Other platforms don’t offer such a seamless experience; I’m looking at you OS X, and your confusing virtual disk image installation method.

From a services perspective: I’ve read that Disneyland employees make note of your car and where you park it on your arrival—if you come back dazed at the end of the day and can’t find it, they’ll happily locate it for you.

IDEO provides another great story in it’s redesign of the hospital experience. One of the IDEO staff pretended to be a patient, lying on a gurney with a video camera and recording a typical visit in it’s entirely. The result? Patients on their way to, and from treatment spend the majority of time staring upwards; confused, disconnected and disoriented by constant motion between rooms all with a uniform vista of impersonal ceiling tiles.

These are all examples of the value in the ‘outer edges’ of a user experience. Often overlooked, in both product and service design.

Myth #6: If you Have Great Search, You Don’t Need Great Information Architecture

Or, “If you have great information architecture, you don’t need great search.”

After years of battling it out, the best practice seems to be to always offer BOTH a well-fitting structured information space, and also great search. Search is not the sole answer: Dr Williams Jones, Author of Personal Information Management and key member of the Keeping Found Things Found research team discusses the weaknesses of a pure search approach in a (fitting) tech talk to Google.

Conversely, you can’t get away without having search: There’s increasing integration of sophisticated search into areas which traditionally were organized hierarchically or spatially. For example, the OS X System Preferences window is searchable in a reasonably sophisticated way.

Notice the search for ‘wallpaper’ that revealed ‘Desktop & Screen Saver’

Myth #5: Can’t Decide? Make it a Preference

So, from myth number #4 you can tell that the user mental model can differ, and there’s not always a one-size-fits-all. In my experience, designing what preferences your product has, and how they will be presented, is long and challenging task.

I look at it like this:

Every preference which is not really needed is a design choice that I’m offloading to all the users of my product or service.

They’re all having to do the work I should have, and duplicate work at that. I know in the designs I’ve worked on, deciding on just what will have a preference is a massive issue worth paying attention to.

On simplicity:

Trust is increased by caring enough to unburden the user from extraneous decisions. Working on Skitch and Comic Life taught me an unexpected lesson: when a customer/user has total trust and familiarity with a product they cross a threshold of use: it starts being used innovately.

For example, we once received an email from a user who had used the drawing capabilities of our little screencapture and markup tool to design large, real-world signage for a restaurant. Sure, Skitch was designed to output smooth vector lines, but this was not quite the use-case in mind! The lesson was that when a product becomes very familiar to a user, they’ll often reach for it first when trying to solve a problem.

I tend to think of it like using a screwdriver to open a tin of paint. It’s actually not the best tool for the job (because it has a tendency to bend over time), but it’s the first thing that comes to mind for many people to use, and is something they are very comfortable with. Similarly, we once had a nice email from the forensic department of a Police force who wrote to say how handy they found Comic Life to be for laying out (gruesome, I imagine) crime scene photos. The simplicity of the tool meant it was applied in many contexts for which it wasn’t designed.

On choice:

A few months ago my girlfriend went looking on Dell.com for a new laptop. She was so overwhelmed with  choices that she gave up. This topic’s been covered widely, but if you’re not familiar with it then enjoy the research and storytelling of Barry Schwartz who discusses how too many options can not only lead to your customers making no choice, but (counter-intuitively) resenting the choices they do make.

The extension of this myth here is that “Pro” users need and want more choices. In my opinion there is some truth to this, but at the same time it’s a slippery slope to preference/choice hell.

Myth #4: Design Always with Implementation in Mind

This one is easy to interpret as ‘dream up anything and have someone else worry about the building of it”, which is not the case. Instead, I increasingly see it as the skill of having a split personality. On one hand, ‘the users experience is everything’ guy, and on the other ‘how can we implement this with the most sensitivity and understanding of the building materials?’

Good reading: 37signals’ Ryan Singer on separating design from implementation.

Myth #3: People Know What They Like

For background on this one, have a read of Predictably Irrational by Dan Ariely and Yes! 50 Scientifically Proven Ways to Be Persuasive by Robert B. Cialdini — you’ll soon see the hard scientific evidence that our ‘tastes’ can be quantitatively swayed by external situations, environs or people. (By the way, the latter book is much more research driven, and much less cheesy than its title implies).

There is also the infamous story of ‘chunky spaghetti sauce’ told by Malcolm Gladwell (Here’s a TED talk where he retells the story) imploring that market research (asking people what they want) won’t always reveal the products they do want. This one is also easy to misinterpret — asking what people want is a great thing—it might just take you some detective work to find out their real needs, and imagine how to fufil and surpass them.

Myth #2: People Read

Short: They don’t. :-)

Long: The thinking usually goes something like “If the user is confused, some text explanation will help.” Or you, or someone in your team will think that a dialogue box, page of instructions, or a warning sticker will help clarify a situation.

OK, I just invented the above equation, but it seems pretty close to the truth. Eye Tracking studies I’ve seen from the Nielsen Norman Group highlight that many web surfers are only reading the links on pages.  So the point is to make sure that linked text actually says something, instead of [click here]. And that text is concise. And readable.

It’s not sexy, but improving the text in your site, application, product design, service script etc. can have the biggest payoff for effort. 37signals have written about the relation of copywriting to UX design, but I wish good copywriting got more coverage in User Experience texts.

In my opinion dynamic text (dialogue boxes, popups) seems most readily ignored/confused by users. For example, most users seem not to see Skitch’s popup help tip.

However, this small piece of static and useful text in the Comic Life interface(below) seems to work well.

Myth #1: The Design Has to be Original

Truthfully, I don’t know if this one is a myth, or just a hard lesson for me to learn. I love to solve problems, to come up with the ‘aha!’ moment of inspired UX design. However, if I’ve learnt anything in UX design it’s that the great design solution you seek is probably already out there in the corner of someone else’s product or service, and they’ve done the usability testing for you! Look for ’standards’ or memes in design, assess their UX suitability and quality, and use them.

And You?

That completes my Top Ten of User Experience myths, most of which seem to have just enough truth to remain popular. Or not—you tell me! It seems everyone has a story to tell about User Experience design and I’d love to hear yours.

Special thanks to my twitterer friends for their contributions. Photo credit for black Photo credit for black cat Photo:

As everyone knows, captchas can be a real nightmare. Besides their serious accessibility issues (have you ever clicked the “Hear a set of words”?) they’re a real pain in the ass to enter.

It can be very discouraging to a visitor if they have to re-enter the captcha text every time they make a mistake on the form. So frustrating in fact, that they’re likely to give up after making a couple mistakes.

Here’s an example from the Gmail signup, of how not to do it:

Yesterday, I came across a great way to handle this. When you’re signing up for Twitter and you enter the captcha correctly, but make a mistake on another field (like email address), it removes the captcha which means you don’t have to enter it again. Hoorah!

View larger

I’m not sure if Twitter has A/B tested this screen, but I’d bet a chunk of change that it improves signup rates significantly.

On a side note, if you’re a frontend developer, you’ll enjoy two awesome talks by Britt and Dustin from Twitter:

1. “The Future of Frontend Engineering – Learning from Twitter” by Britt Selvitelle
2. “The Future of JavaScript Design Patterns – Unleashing Full Object-Oriented Capability” by Dustin Diaz

Read more at The Future of Web Apps site.

It’s always the little things that count. I recently noticed the download notification bar on the bottom right of Firefox 3.5. It tells you how many downloads are active, and roughly how long they’ll take to finish. The reason why this works is simple, it saves at least two clicks which it would normally take to bring up this download window:

This just shows how it’s important to pay attention to the small details in your app – it makes the life easier for your customers, thus increasing their loyalty to your app. Bam!

We recently sat down with Ryan Singer, lead designer at 37signals, to ask him several questions that are on web designer’s minds. He talks about copywriting, being a project manager, frontend development skills, handcoding and where to find inspiration. Here’s a transcription of the interview …

What websites do you usually go to for design news, inspirational, or tutorials?

I’d have to say probably my favorite place right now for inspiration is ffffound.com. It’s not really web design exactly but it’s a lot of really cool imagery, a lot of cool colors, shapes and stuff like that.

As far as design news, I don’t know if there’s anything so interesting out there that I’m really watching for, but there’s new great design in all directions, coming from all different places all the time. Things like poster design, new typography ideas, etc.

Is there a particular web designer that you’re looking up to right now?

You know, I’m seeing more and more good design actually all the time. However, I can’t say that I have a favorite right now.

Generally I’m seeing just a lot of cool stuff and stylistically, style continues to advance. But the copy and the clarity isn’t necessarily getting better. I’m not seeing very many sites where I think, “Wow this was really well thought out and well written. I still don’t see a lot of that.

Why is there a lack of copywriting skills among web designers?

Nobody seems to be talking about it. Where are all the blog posts about how to make really super-clear content?

The thing that’s really easy to look at and copy are pixels, color combinations and type. I think it’s really hard to look at a website as a writing project because as a designer, we have all these magic tricks we can do with our CSS and our HTML and everything and we kind of have to put that in the back and make that take a back seat to, “do I really have anything to say here?”

Last week I posted to our blog about Jacob Neilsen’s site, praising the the Alertbox articles. Each one is completely crafted as a piece of writing. Something to be read and understood and digested. I love the way certain points are bolded and the way the whole thing is structured is really well thought out. I think it’s a really inspiring example of great copy.

If you’re a designer who doesn’t do any writing, you’re going to hit a brick wall in your career at some point.

What books can designers read to get better at copywriting?

One of my favorite books is by a guy, William Zinsser, it’s called, On Writing Well. That was an inspiration for me and I remember reading that and feeling like it really helped me a lot.

What’s the one skill that new designers focus on?

You gotta start handcoding! It’s the number one basic craft of web design, if you don’t handcode then you’re not going to be able to move into doing web app interfaces, which is really what I’m doing now.

You’re not going to able to work on applications or collaborate on code or make apps, websites that really have a lot of behavior unless you get into handcoding, so I think that’s like the barebones thing that for sure everybody should be doing.

What software do you use for coding?

I happen to use Vim, which is a little bit of a nerdy tool, but a lot of my coworkers use Textmate and love it. A lot of people say that BBedit is great and I also hear that Coda is really nice. There are all kinds of options out there.

As a designer, do you need to understand frontend development?

The more you understand about frontend development, the better designer you’ll be. If you are really familiar with handcoding and you understand basic HTML markup and you know how CSS selectors work then you’re really well prepared, for example, to use the fact that jQuery and Prototype both have a way to refer to pieces of your mark-up using CSS selectors even though your not using CSS.

If you’re designing web app user interfaces, then I think it’s important to get into understanding how an MVC framework works like Rails or Django. If you can understand how your templates fit in to the view, as the “V” in MVC then that’s a huge leap. You can really start doing work with programmers and you can have ideas and you can make them into reality instead of just making designs and handing them off to somebody and hoping that someone else can plug them in.

How do you learn about MVC?

It depends on your situation. If you’re a designer and you work with programmers already (who are friendly) then just ask them questions. They can really get you started on the right path. Don’t be afraid to ask dumb questions – they’ll appreciate the fact that you’re trying to learn.

If you are a little more programming minded and you’re on your own, there’s all kinds of stuff you could read, a basic primer on Rails would help a lot.

Getting into programming in general is quite useful. Before I did web design I setup Access databases and Filemaker databases and stuff like that. Jason Fried did the same thing actually – he started with Filemaker databases, and I think that basic understanding about how does a database work, just what are the pieces and trying to visualize, how could I display that or how could I manipulate that data, is a really good kind of foundation level.

What is a typical day in the life of Ryan Singer?

Ugh, it’s pretty busy lately. We are a small team and we try to do a lot with a few people. We actually just brought on a new designer, so we’re up to three designers now which is going to help. I spend a fair amount of time designing UI for new features. We always design the interface first, before building anything.

So part of my day is actually designing new features, another part of my day, because I’m also working as a product manager here, is to figure out what we should be doing next and who’s going to be doing it.

Also I love, I just love, getting into Rails and making things work too, so I do a fair bit of programming everyday. As much as I can plug stuff in, I do it.

Do you think being a product manager has helped you become a better designer?

No, not at all. I think that it’s the opposite actually. When you’re wearing your ‘Manager Hat’ you start to create a barrier between you and the designers and developers that are actually implementing the app.

It’s really harmful to the product because anytime you have a separation from the one whose coming up with the ideas and the ones who are doing the work, it’s a bad thing.

As a designer, is it important to be interested in the business side of things?

No. Either you’re interested in the business side or you’re not. However, if you have an understanding of what compels people to make buying decisions and how marketing works, you can feed it into your design work.

Okay, well with that, I think that our time is up, thanks so much for your time.

Yeah sure thing, thanks for chatting.

Like this article?

If you enjoyed, this article, feel free to re-tweet it to let others know. Thanks, we appreciate it! :)

Photo Credit: DHH

I’ve been noodling on how best to present a coherent vision of user-centric website and web service design and think I came up with at least a basic model that will serve my purposes. It’s made up of identity, friends or contacts, services, activities and notifications.

To get concrete, let’s take The Future of Web Apps (London) site. The site’s pretty hot from a purely aesthetic perspective, but from an interactive or social point of view, it’s lacking. This is something that can be remedied, though, with a revised conceptual model and the adoption of a few forward-facing technologies (not all of which are completely baked just yet) but many of which are already becoming the de-facto foundations for decentralized social applications.

The Problem

The fundamental problem with the FOWA site, like most sites today, is that it is site-centric, rather than user-centric, and this has a profound effect on how the site is designed, the features it offers, and what people’s expectations for the site might be.

On the one hand, the site has an obligation to be informative, providing the basic event details: dates and location, schedule, speakers, how to book tickets, etc. On the other hand, and in support of the organizers’ desire to promote and improve engagement before, during and after the event, the site could do so much more to connect attendees and act as a digital scrapbook of everything that occurred during the event.

So while event sites still need to meet promotional and informational objectives, there’s no reason why they can’t also serve to facilitate socialization and aggregate the social objects and creative output that result from such gatherings.

The Opportunity

Now, don’t get me wrong. The point is not to turn every site into a social network. However, especially in this case, where socializing is a large part of the event’s appeal, there’s no reason why the FOWA site shouldn’t make it a little easier for folks to meet and connect before the event — to see who’s coming, and maybe to dog a couple of their friends into attending as well.

In order for social features to get traction, they’re going to need to provide an obvious upside without being too time-consuming or hard to use. Any friction to enjoying these social features — especially before making the upside obvious or significant — are going to inhibit their use and adoption.

Therefore, the easiest way to minimize barriers is to reuse the social connections and tools that people maintain elsewhere. As long as an external service provides a means for extracting media, data or connections, you can let other someone else focus on storing, editing and adding metadata to content, or simply facilitate adding event metadata to remote social objects. An event site, just like the event it represents, should really be a zeitgeist for a moment in time — an epoch for ideas, connections and learning.

The Building Blocks

The foundational building blocks of such a site begin with:

• identity: who is this person? Do they have an account or profile elsewhere that represents them or that they might rather use for identification?
• contacts or friends: a way of expressing or importing relationships between individuals as well as details like email, name, location or URL, to help find friends who might have already signed up
• services: sources of media like photos, videos or other content that can be imported or republished
• activities: atomic-sized descriptions of what someone’s doing or has done (commonly aggregated into so-called “lifestreams”; popularized by Facebook’s newsfeed)
• notifications: sites typically take email for notification for granted, but folks increasingly prefer to receive updates via other services, like feeds or Twitter. Given people the ability to choose how they want to be contacted will probably improve the likelihood that the recipient will appreciate hearing from you.

Identity

It can almost be taken for granted that just about everyone who comes to your site and wants to interact probably has an account or profile someplace else that they maintain (especially if your site is for an event called “The Future of Web Apps”). Indeed, all sites seem to presume an email address at minimum these days, and increasingly it’s becoming safe to assume presence on at least one of the following: MySpace, Facebook, LinkedIn, Yahoo, Flickr, YouTube, Google or owning a personal blog somewhere. It’s certainly not universal — yet — but for the audience that does maintain a profile elsewhere, it seems a wise idea to start looking at how you can leverage it.

After all, who really needs yet another password? Why not let them sign-in to your site using credentials that they’ve established elsewhere, say at Facebook, WordPress, Blogger or Yahoo? All of these sites act as identity providers, because they support the OpenID protocol. And so when someone signs in to your site, verifying their OpenID to you, it’s no different than you sending them an account confirmation email, except there’s no need to deal with checking email or worrying about the confirmation getting marked as spam. The whole verification process takes place in the browser.

Going one better, why not also import their existing profile? Here you have several options: scraping hCards from sites like YouTube, LinkedIn or Flickr (and many, many more); requesting several basic profile attributes with SREG ; making use of the Attribute Exchange protocol.

By supporting the concept of remote identities on your site, you’re implicitly recognizing that your site is not the only one that people use — and that you want to make it as easy as possible for people to interact. Your first priority — and your customer’s — should not be to create another account and another password, but instead to consider what you’re offering, and whether it might provide them any value. Getting the account creation step out of the way means this process can happen faster and more immediately.

Contacts, Friends and Relationships

Now that you’ve discovered who someone is, wouldn’t it be useful to help someone find the people who they might already know on your site? You might be tempted to take the discredited approach of just asking for someone’s username and password for their email address book, but why take on the liability of someone else’s email password when you can now skip this uncomfortable and unpopular password anti-pattern?

Again, you have several options: scrape friends lists marked up in XFN from blogrolls, Twitter or other microformatted services; use the new Portable Contacts API with OAuth to do friend-importing; use a proprietary delegated authorization protocol to access some of the more popular address books. For an example of this done right, see the New York Times’ TimesPeople social network:

Now, it’s important to keep in mind that the purpose of importing friends should be to provide real value: to aid in sharing and connecting. A simple but very valuable way to leverage such “portable contact lists” is to show someone a list of their friends who are already planning to attend the event. Better yet is to keep a record of someone’s friends and if any of them end up registering, let both parties know of each other’s plans. This can be done by storing hashes of identifiers (i.e. do not store the actual email address itself unless the email owner has provided it to you) and matching those hashes whenever someone new signs up.

And of course, if you allow people to connect through your site, always make sure that they can take that connection offsite by supporting the Portable Contacts API (i.e. allow for export of the speakers’ public contact information)

Services

Just as more and more people maintain accounts elsewhere, more and more people use several web services to store their photos, videos, links, blog posts, tweets, wishlists and the like. Similar to how it’s convenient reuse existing user accounts, it’s equally easy and useful to import their existing content from somewhere else.

Of course you can always just specify a universal tag (say, “fowaexpo08″) and subscribe to correctly marked-up media . Even better is to facilitate the contribution of specific pieces of content — from services that might already be indicated in what’s called someone’s “discovery profile”: an XML document marked up in the XRDS-Simple format. The beauty of this format is that it is designed to be attached to someone’s OpenID URL. So at the time of OpenID account verification, you can grab someone’s public discovery profile to learn about the different services that they use. The format also specifies how to identify “authorization endpoints”, which essentially are the gatekeepers to accessing private data stored on these remote services.

By combining OpenID, XRDS-Simple, Portable Contacts and OAuth, you can enable someone to reuse an existing account, discover their list of friends, request authorization to access this list, and then, if granted, suggest people already on the site with whom they can connect or invite to participate. What used to be a cumbersome and dangerous process is now smooth, straight-forward and secure, and applies to more than just accessing your friends.

Activities

Now that we have identity and friends accounted for, and know what services someone uses, it becomes fairly easy to start to expose, on your site, the activities that someone performs related to the event. In its simplest form, when someone registers to attend the event, you can create an activity for them, both in their personal stream but also as a feed that they can bring elsewhere; when someone connects to a friend, just like on Facebook, you can expose that; when someone imports a photo or video, you can offer a thumbnail; when someone tweets about the event (say, using the hashtag), you can quote them… and so on.

The point of activities is not to show off everything that someone does, but to highlight relevant activities as a means of social discovery.

There is much work still to be done on the basic format for activity streams, but the most basic activity takes the form of actor verb social object. If you publish activity streams on your site, it is suggested that you consider using the hAtom microformat to start, and then mark up the various components using the respective classes: actor, verb, object. At least until something better comes along.

In the meantime, for an event site, activities could be useful for exposing interest in sessions, or helping attendees to let speakers know that they’re looking forward to hearing them or even for spreading new information about the event in bite-sized chunks (i.e. new speakers, etc).

Notifications

The last thing to consider is how to handle notifications. While email still reigns supreme, syndicated content and services like Twitter have become alternative viable means for staying in touch.

There are lots of options here, from instant messaging over XMPP to SMS to Twitter to posting activities of your own. The important thing is to recognize that email isn’t the only means to stay in touch any more — and for some, might not even be the most preferable method of contact. The interest to drive people back to your site must be balanced against the obligation to provide useful communication.

Web services are increasing the types of notifications they offer, and provide fairly granular control over how they contact their members. Mixin is one example to consider:

Another is Brightkite:

Thinking about your opt-in notifications strategy ahead of time — by coordinating efforts among your team to reduce duplication and increase value — will likely improve your read and conversion rates, and keep your attendees satisfied and informed.

Conclusion

Putting this all together, we start to see that a more formal conception of the components of user-centric web services is becoming clear. A user-centered web service prioritizes the situation of the individual and his or her use of the service, rather than the objectives of the service. This means: making logins easier and passwords fewer, the ability to interact with known friends without having to add them all over again, surfacing activities as a mechanism of discovery, and using several means of notification based on convenience. Indeed, this approach is necessary for continuing to innovate, create and offer new web services. Luckily, as this article demonstrates, a number of open and non-proprietary technologies like OpenID, OAuth, XRDS-Simple, Portable Contacts, and microformats exist that will make this approach not only feasible but simple and less costly to implement.

The conference or event site example used here is just the obvious case of a user-centered web service that would benefit from recognizing the broader context in which their users exist on the web. Hopefully through greater promotion and adoption of the technologies and concepts outlined above, we will start to see a new wave of highly valuable, useful and low-effort user-centric event sites blossom that provide high value through low-cost interactions for users and developers alike.

A New Type of Gorilla is Born

Clearleft is comprised of skilled professionals who have a passion for the processes used to create usable websites. It was that passion that led to the birth of Silverback, a usability testing application for the Mac. Usability testing is something that is often overlooked for an array of different reasons:

• The cost and time is perceived as too high, and therefore left out of the scope of projects.
• Not enough staff to administer and process the tests.
• Lack of the proper equipment or tools.

So, assuming you don’t have thousands of dollars, usability experts, and testing labs at your disposal, what are you to do? Enter Silverback.

What is Silverback?

Simply put, Silverback is beautifully simple usability testing software that utilizes your Mac’s built-in iSight webcam and microphone. With its simplicity and its affordable price point ($49.95), Silverback allows anyone to perform usability testing with little or no budget. The best part about Silverback is that it comes ready-to-use right out of the box. There are no large configuration files or settings, it just works. Jonathan Christopher of Monday by Noon says it best when he states:

My favorite applications do one thing and do it well. Silverback will be one of those applications.

Clearleft are known for their elegant interfaces, and it is immediately apparent that they paid close attention to the interface of the application itself. The interface eliminates the cruft and gets out of the way, allowing you to run the tests and parse the results without sifting through an intense interface. It is this attention to the little details that allow you to keep your usability tests simple and focus on the user interaction, versus setting up the application and learning the interface.

How Does it Work?

Setting up projects is a quick and painless process, and setting up the profiles is just as easy. Silverback utilizes the iSight camera of your Mac, which can turn your laptop into a portable usability lab. Once you create a project and a profile, you can start recording the session. While the test is in progress, Silverback is completely transparent to the user. It records the video and audio of the user, as well as highlighting the clicks of the user. You can control the recording process via the Apple remote, setting chapter markers while the test is in progress. The participants of the test only see what they need to see, and nothing more.

Once the session is completed, you can make notes on the session and then export the test. Once you are ready to export the test, there are options that allow you to place the video in any corner of the screen. Along with the placement of the video you can change its transparency. I see this as one of the greatest features, as you can see the video and watch the user interacting with the interface or website, and make it semi-transparent so that you can still easily see all possible clickable areas. Depending on the time of the session and your exporting options, you may want to go make yourself a cup of coffee while you wait for the test to finish exporting as it can take some time. The final exported video can then be stored for later review, and you can use the interface to make notes about the test.

Is it For Me?

In the beginning we looked at some of the different reasons that developers overlook usability testing. Silverback addresses those barriers with:

• Cost. The cost of the application is $49.95, with 10% of the profits made on the software going to save the gorillas. This makes the application affordable no matter what the size of your organization.
• Staff. The simplicity of the application makes it easy for anyone to use. While it may take a more skilled individual to process the results, it is very simple for anyone to setup and administer.
• Equipment. The only hardware you need is an Apple computer equipped with an internal or external iSight camera and a microphone (if you choose to record the audio and video).

Many developers are familiar with the different analytics tools available to them. Analytics are a vital part to understanding a website. They allow you to see the quantitative data associated with your website. However, analytics fail to show you some of the qualitative data associated with your website. Performing usability tests give you a glimpse of that qualitative aspect, as you can setup and execute tests and see how a user responds. You are seeing first-hand how a user navigates and performs different tasks on your website.

It is important to note that, just as with anything else, it takes professionals to analyze the results and then plan for a proper course of action. This does not replace usability experts. Silverback is just another tool in a web developer’s toolbox. When used properly, it is a very powerful and lightweight application. Silverback comes with a free 30 day trial, but I will admit that it only took minutes for me to realize that this is a must-have tool. If you are looking for a tool to help you perform usability tests on a smaller budget and minimal staff, then look no further than Silverback.

Software Name: Silverback

Maker: Clearleft

URL: http://silverbackapp.com/

Price: $49.95

Rating out of 5: 4

The gap between the high-end standards-aware freelance developer with the freedom to choose and the corporate web worker is a wide one, and it doesn’t look as if it’s likely to narrow any time soon. But, just as not every start-up employee skateboards from meeting to meeting coding Django on her iPhone, not every business suit uses FrontPage to juggle his marquee tags. There are many corporate developers who do care about cross-browser compatibility, semantic code and accessibility.

So this article is for the suits who care: if you can’t use cutting-edge tools, technologies or techniques, what can you do to ensure that you’re doing all you can for all of your users? My tried-and-tested method is:

1. Get buy-in from the top
2. Some accessibility is better than none
3. Educate your content providers

Get Buy-In From the Top

The last major redesign project I was involved with was successful from an accessibility point-of-view because we had buy-in from the board. Having convinced the top brass of the need for accessibility we wrote a “constitution” for the new site that says all content must be accessible to people with disabilities, and where this clashes with aesthetics or organizational convenience, it trumps them. If you read it, you’ll see that I’ve sneaked in some accessibility-related rules under a different guise.

The CEO then sent this to all the directors. The advantage of this is clear: when a content owner is exasperated at the time you spend marking up a long important document rather than simply linking to a PDF of the Word document they gave you, you can just point out that you’re just doing what you’re told and invite them to complain to the CEO.

Achieving Buy-In

One problem with corporate accessibility is that while corporations generally care about accessibility in the abstract (because they don’t want to get sued, and they don’t want negative publicity), they don’t actually understand how to show that they care. In my own experience, working for a UK legal regulator, accessibility is seen as a legal compliance issue (”does this comply with the DDA?”) which can lead to a grudging attempt to be accessible, because a corporate lawyer will naturally try to do the minimum required to stay in compliance; minimizing risk while minimizing costs.

The way to overcome this is to focus on the customer. I find the following arguments successful in getting accessibility discussed in a positive, “good-to-have” way rather than in a legal compliance “oh-well-if-we-must” way:

• Accessibility is good for Search Engine Optimization (SEO)
• Accessibility enhances usability for everyone. An April 2004 formal investigation into UK web accessibility (PDF) reported "all users, not just disabled people, would benefit greatly from the measures required to make sites accessible and usable by blind people".
• Accessibility has many quantifiable business benefits (PDF). Legal and General, a British financial services company, redesigned its site with accessibility in mind and found:
  • 40% traffic increase
  • Doubled conversion rates
  • Doubled online revenue
  • 100% ROI in 5 months

Some Accessibility is Better Than None

I often see standardistas boast "I don’t care about accessibility" because it’s assumed to be inherent in standards-based development. (I doubt that’s true if you’re making Ajax pages, as you’ll need WAI-ARIA attributes to be added to HTML elements in order to ensure accessibility).

But that is based upon the premise that your web infrastructure and office politics mean that you’re able to do standards-based development. Assuming you have a website that deals with the storing, manipulation and display of company data, you’ll need a CMS of some kind. The best code is produced by the best CMSes, and many of those are unavailable to corporate developers because:

• they’re open source and most corporate IT departments don’t like open source, due to perceived "risk" and lack of someone else to shout at if there’s a problem
• they are free or very cheap (this is why start-ups often have better tools than big corporates with deep pockets: they use the free ones like WordPress, PHP, Rails, Drupal, etc. because they have to)
• they are very new and don’t have a pedigree that reassures those whose job depends upon procuring the right CMS
• there’s a feeling that they can’t possibly compete with costly behemoths like Sharepoint, Teamsite, Vignette (AKA "no-one ever got sacked for buying Microsoft")

We could talk all day about why terrible tools are so prevalent. (In my experience, the reason why a terrible tool isn’t replaced is because someone senior paid $500,000 for it and sure as hell isn’t going to admit a mistake and scrap it.)

Working Around Bad Tools

The terrible tools can hamper your efforts to be accessible in several ways. One of the worst ways it can do this is by having some archaic WYSIWYG editor that allows authors to cheat and make “headings” by choosing size and colors which are translated into font tags on the front end, and therefore there is no structure for an assistive technology user to navigate by.

You can cure this by with a CSS rule that naughtily over-writes the tag: font {color:red; font-size:xx-large; text-decoration:blink; background-color:yellow;} which means content authors see hideous flashing text. It will, I guarantee, encourage them to write proper headings.

Sometimes, terrible tools have to be worked round. You might never be able to get 100% valid code, or remove all the nested tables that you’ve added into pages just to stop them looking atrocious.

But that doesn’t mean that you won’t make a difference if you do what you can. While I was working on The Law Society website we had thousands of pages in the CMS that were full of <font> tags, double-<br>s to separate paragraphs and some table layout. Even if we could have run a script over the proprietary database to change those, it wouldn’t have been good use of our time, as every page would still need to be manually verified.

However, the site-wide header and navigation was controlled by a single include file, so we amended that to change the navigation from elaborate tables with <img alt="bullet"> to be a CSS-styled unordered list. It would be easy, with such an architecture, to add some WAI-ARIA document landmark roles to help screenreader users. These changes were comparatively simple and made screenreader users’ lives much easier. The site will never validate, or win a clean code award, but it’s more accessible than it was.

Incrementally Improve the Code

So you know you have loads of bad markup and “imitation” headings lurking around, but fixing them all will take too much time and effort. Sort out the biggie pages, such as the home page, “contact us” page, “about us” page and the other top 10 high-traffic pages (check your server logs) straight away.

Whenever any other page needs any kind of editorial amend, take a few minutes when the page is open for the editorial change to correct the markup, too. You’ll find that the most commonly updated pages will be corrected first, and they’re very likely to be most-important or most-visited so a sort of "accessibility through natural selection" process takes over.

Educate Your Content Providers

Most big corporates have multiple people throughout the business submitting content for publication. Generally, they aren’t web specialists and submit their content in Microsoft Word format. It’s vital to give them a Word template that defines the styles they can use for bullets and numbering, etc., so they don’t get a nasty surprise when they see that their lovingly-created purple lightning-strike bullets haven’t made it onto the website.

Consider organizing half-day training sessions on how to use Word styles so that headings are methodically created rather than imitated with font size and bold. This pays off as there is no ambiguity if you’re having to mark up their content by hand. (I would have killed for a Word macro that converted documents into HTML with no style information, only the structural information. If you know of one, please tell the world!)

If you have to publish in PDF format, it will be more accessible if it’s made with a proper Word structure. (Adobe has published a useful cheat sheet on how to author Word files for conversion to more accessible PDF.)

Get Your Content Providers Writing HTML

Go mad! Dream big! Turn off the WYSIWYG, throw away Word and train your content providers to deliver you HTML. Most web content (as opposed to headers, navigation, forms, etc.) consists of a few conceptually simple elements:

• headings
• paragraphs (including abbreviations)
• links
• bulleted/ numbered lists

So train people to send you the content ready-marked up. It won’t be perfect, but it’s simple to run it through HTML Tidy to make it validate. It will be shorter and better-structured if they have to consider the heading hierarchy. Of course, you will still need to add the more complex elements like images and data tables yourself, but they are rarer, so your workload will diminish, their control over the content will increase and your users will get a more accessible website.

Accept the Compromises

It’s hard, when you’re a professional, to accept that something you produce is less than perfect. But all web design is a compromise: liquid layouts versus line length, design versus page weight, and so on. Complete accessibility is never completely achievable as there is such a vast range of needs. So, be a zen master and accept the compromises: simply by caring and trying to do what you can, you’ll make your company’s website more accessible and lives of your disabled visitors easier.