jump to navigation

Anatomy of a good landing page December 17, 2010

Posted by jeremyliew in Ecommerce, UI, usability, viral.
add a comment

Both virality and direct response advertising are areas where getting the details right are critical. One element in both chains is the page on your website that a new user lands on (either from a friend invite, or from an ad.) Many developers don’t sweat the details on what they regard as “aesthetics”. Many designers focus more on making a page look good than getting users to do what you want them to.

Here is an ecellent “how to” that breaks down what a good landing page should look like.

(thanks startup digest)

 

Focusing on copy can dramatically improve user response June 18, 2009

Posted by jeremyliew in copy, product management, UI, usability.
2 comments

A couple of years ago I posted about how improving copy is an easy way to increase user interaction. Bokardo recently posted on a similar topic, about how microcopy can improve your user interface:

Microcopy is extremely contextual…that’s why it’s so valuable. It answers a very specific question people have and speaks to their concerns right on the spot. And because its so contextual, microcopy isn’t always obvious. Sometimes you have to hunt to find the right words. (or create an error notification service like I did) How to discover these hurdles? Talk to people! Why aren’t they adopting your software? What concerns do they have? What are they worried about? Successful salesmen know the power of these small turns of phrase. They have an arsenal of them for every situation.

Here are some other examples:

  • When signing up for a newsletter, say “this low-volume newsletter”
  • When people add their emails, say “we hate spam as much as you do”
  • When subscribing for something free, say “you can always unsubscribe at any time”
  • When selling an paid-for web application, be sure to let people know if you have a free trial.
  • When storing customer’s information, say “You can export your information at any time”
  • If offering optional account creation, say “If you create an account, you’ll be able to track your package”

All of these microcopy examples have one thing in common: they help to alleviate concerns of would-be customers. They help to reduce commitment by speaking directly to the thoughts in people’s heads. That’s why this copy can be so short yet so powerful.

Don’t be deceived by the size of microcopy. It can make or break an interface.

Writing good copy may not feel as heroic as implementing a huge new code base, but it can often by just as effective in increasing user interaction.

Three meta-rules for usability design November 20, 2008

Posted by jeremyliew in iphone, product management, UI, usability.
2 comments

I recently saw a useful deck from Create with Context about how people really use the iPhone. The company did a bunch of ethnographic research on how ordinary users (not power users) used the iPhone, and in particular, what were common mistakes made. Based on their research, here are their eight rules of thumb for designing for the iPhone:

1. Take advantage of learned behaviors
2. Avoid interaction inconsistencies
3. Provide clear conceptual link across widgets
4. Put space between action widgets
5. Plan for accidental overswiping
6. Don’t rely exclusively on multitouch
7. Provide visual feedback for taps
8. Provide interaction affordances

The presentation provides examples of all of these rules and what sort of errors are possible when they are not followed, and is well worth the 10 minutes it takes to review.

These useful rules of thumb fall into three metarules for design that make sense under almost all circumstances:

A: (1&2) Use UI standards whenever you can

When I was GM of Netscape I drove some bad design decisions for the Netscape 8 browser based on my idea of “efficiency”. The worst one was moving the browser dropdown menus to the right hand side of the application window, up a level so that it was on the same level as the logo and the name of the current web page. See a screenshot here (look at the top right hand corner of the page, in the black background with blue text).

We did this with the best intentions – to save some pixel height and thereby create more space on the screen for the actual webpage. Of course, since this “improvement” was different from the way that every other app in the world works, many users were confused and couldn’t find the dropdown menus at all. It was a bad idea.

I think that tagclouds, once all the UI rage, have since faded from the scene for the same reason. A few years ago they were the hallmark of web 2.0, all over the home pages of Delicious, Technorati and Flickr. But they are gone from all of these home pages now. The majority of users (not early adopters) found them to be too different from the standard forms of navigation that they were used to (left hand nav bars, top nav bars, search, headline-teaser) and didn’t use them.

B: (4&5) Make sure that user error is not catastrophic

This is obvious, but worth mentioning. The team building a product are by definition experts, and this can lead to a blindness to possible modes of error. Just five user tests will turn up the biggest problems.

C: (3,6,7&8) Give users visual clues as to what does what

This is an area where designers sometimes come with the wrong instincts. Making things look good is definitely not the same as making them easy to use. In fact, sometimes these factors are contradictory.

One common example is in formatting a page to fit a screen. While the most aesthetic design has all the elements of a page fitting neatly into a grid so that nothing is “cut off” by the fold of the screen, in fact having partial images disappearing off screen is an important visual cue to users that there is more below the fold. Similarly, overly stylized icons can confuse a user as to what they represent. Also, UI that is too subtle can leave a user confused as to what is clickable and what is not, and what they should be clicking on next. Why are some web ads and social network profiles so garish and “ugly”? Because they serve not to please the eye, but to draw the eye, and they do that job well.

Keep these three simple meta rules in mind when you’re designing your user interactions.

Which user experience research tools a startup should use, and when November 7, 2008

Posted by jeremyliew in A:B testing, product management, UI, usability.
6 comments

I recently posted about how usability testing can slow down launch but speed up success. But usability testing is just one of many elements of user experience research, with others including the ethnographic field studies made popular by Ideo, the A:B testing becoming standard for web 2.0, customer feedback, focus groups etc. With so many tools at your disposal, which user experience research tools should you use and when?

Jakob Nielsen recently posted about this topic, and concluded that it depends on what phase of product management you are in. For startups, my summary of his work is below:

Ideation: At the very beginning of the process you are looking at new ideas and opportunities. In this phase, aside form the founders vision, ethnographic field studies, focus groups, diary studies, surveys and data mining of webwide behavior can all be useful. Most startups will not have access to proprietary user data of existing products to identify additional opportunities.

Pre-launch: Once you’ve settled on a product idea and are working towards (beta) launch, you want to improve design and functionality as much as possible to minimize risk and maximize the likelihood for a successful launch. In this phase rely on tools such as cardsorting, paper prototype and usability studies, participatory design, desirability studies and field studies (including closed alpha launches to “friendlies”) to improve the user experience.

Post-launch: Once you’ve pushed the product out you will have live data that you can use to compare the product both to itself and to its competition. In this phase, usability benchmarking, online assessments, customer emails, surveys and A/B testing will be your primary tools

Nielsen provides some additional frameworks to differentiate when to use different forms of user experience research in his post. The site is a good resource about user experience in general.

How robust are communities? November 3, 2008

Posted by jeremyliew in communities, product management, usability, user generated content.
4 comments

Wired has an article in its November issue about Urban Baby and You Be Mom. Urban Baby is an anonymous forum for Moms. Like 4chan, its anonymity makes for a mix of candid discussions, raw honesty and trolling, but with a mommy bent (think cheating, divorce and public schools). Says Wired:

Then in May, UrbanBaby, which was purchased by CNET in 2006, launched a redesign. All hell broke loose.

The changes weren’t huge, but each of them subtly altered the flow of conversation. CNET added a wide sidebar on the site to create space for ads. This reduced the reading area, a big problem on a board with hundreds of comments per hour. Discussions had been organized chronologically, but immediately after the relaunch, the default setting had “most popular” threads at the top, even if they had been started days earlier. Worse, you had to refresh your browser to see new posts. UrbanBaby users went nuts, demanding a return to the old design.

They soon got it. But not from UrbanBaby. A week after CNET rolled out the hated redesign, a couple of work-at-home computer programmers—longtime UrbanBaby users themselves—launched a rival site called YouBeMom.

They perfectly re-created the look and feel of the old boards. Better yet, they made improvements, including a souped-up search engine and privacy controls that make sure your spouse can’t use your computer to find out what you’ve been posting. They also set up a blog to capture users’ requests for site improvements and to outline what YouBeMom plans to do about them.

Within days, there was a mass exodus of users from UrbanBaby to the new site. CNET won’t give out traffic figures, and neither will the owners of YouBeMom. But I logged on to both sites recently and compared how often people posted. I’d estimate that YouBeMom has three times the traffic of UrbanBaby. That’s just how fragile a social application can be.

I found much higher comment volume and more vibrant conversations at YouBeMom as well when I looked at conversations on similar themes on both sites. The moral of the story according to Wired:

People have a very sophisticated sense for their online hangout—if you mess up the feel of it, or impede the ways they want to schmooze online, they’re gone.

What a terrific parable about the importance of community. What is strange though is that the traffic stats don’t appear to bear it out:

According to Compete, not only is Urban Baby far bigger that You Be Mom, but the redesign actually seems to have dramatically grown usage.

Sometimes communities are more robust than you think. Redesigns almost always create a lot of negative feedback when they first occur because all users hate change. You have to leave a little time to pass for users to get used to the changes before you can truly judge if the redesign has been a success or a failure.

There are three classes of user within social media, creators, curators and consumers. It may well be that many of the Urban Baby creators moved to YouBeMom, but the 90% of social media consumers, who read but don’t write, stayed at Urban Baby.

Do any readers have experiences of the impact of redesigns on a community?

Applying game design to building apps (and games!) October 28, 2008

Posted by jeremyliew in game design, game mechanics, product management, usability.
2 comments

Dan Cook has posted the slides of his recent talk, “The Rescuing Princess Application“:

My talk was on building an application that rescued princesses. The goal was to give interaction designers some insight into how game design might be applied to the domain of more utilitarian applications.

The notes fields are heavily annotated with more details about each visual. For those of you who attended, this deck also includes a third section on game design patterns that I didn’t have time to cover in the time allotted.

This is a terrific presentation for product managers and designers, as well as for people building web games. Read it – it will take you about 10 minutes

Also, check out Dan’s list of recommended reading:

Dan’s blog
Chemistry of Game Design
What activities can be turned into games?
A Theory of Fun, Raph Koster
Shufflebrain: Putting the Fun in Functional

Dan particularly recommends the Shufflebrain presentation. The Shufflebrain team recently launched Photograb*, their first game of their own, that applies many of their principles of game design. Check it out on Facebook.

* Lightspeed provided the seed round of financing for Shufflebrain.

Usability testing slows down launch but speeds up success October 10, 2008

Posted by jeremyliew in A:B testing, product management, UI, usability.
9 comments

I hate hearing the term “user error”. Good usability testing should eliminate most user error. I am a big proponent of A:B testing with live users. However, often a small usability test can quickly highlight any big problems before you go live so that you are working from a better starting point.

Many developers like to quickly prototype and push code out quickly, and I am a fan of this. However, if taken to an extreme, it can lead to products based on incorrect assumptions. Noah Kagan notes that at Mint:

We did surveys, user testing and psychological profiles. This was extremely useful in identifying the types of users we may have on the site and especially for seeing how people use the site. I never really did this before and was AMAZED how people use the site vs. what I expected

As Noah points out, usability testing can be easy and cheap. What it requires is simple:

1. Determine what you are trying to test. This is usually a list of the form, “How easy is it to complete task X?”

2. Recruit representative users. If you’re testing a new user experience, Craigslist is fine for this [Tip – if your core user is a middle america, . But make sure that your testers are truly representative. Your existing user base is another good place to find testers, but make sure that you’re not just listening to just your loudest users. The key is to pre-qualify the users to ensure that they are “average”.

3. Do the test. First ask them what their first impressions of the site are. What captures their attention? What would they do first? Ask the users to speak out loud during the session, explaining what they are thinking at all times. Then ask them to complete the tasks that you have listed. Watch and listen. Note what they find easy, what they find confusing, and what they don’t find at all.

This can be incredibly frustrating for you. You’ll think that some things are “obvious” that are not, or you’ll be shocked to see how unfamiliar users are with your site, or even with how browsers work. Remember that your role is to learn, not teach. Don’t touch the screen, the keyboard or the mouse; don’t point out how to do anything (even when they are “doing it wrong”, even if it is a “basic mistake”). You can provide encouragement and reassurance, or ask questions about why they did something, but that is it. You’ll be surprised at what you see.

The key is to internalize that there is no such thing as “user error” and there are no “stupid users”. If users are having problems achieving the tasks that you laid out for them, then the fault lies with your site. You’ll need to review your UI.

I prefer to do these usability tests over webex with users at their own computers. This makes the interaction as natural as possible for the testers. As an added bonus, you can then record both their screencast and the phonecall for later review.

Usability testing does not have to be a lot of work/ You only need to test five users to uncover most usability problems.


The most striking truth of the curve is that zero users give zero insights.

When you’ve completed your usability test, go back and makes some changes, but then come back and test again:

You want to run multiple tests because the real goal of usability engineering is to improve the design and not just to document its weaknesses. After the first study with 5 users has found 85% of the usability problems, you will want to fix these problems in a redesign.

After creating the new design, you need to test again. Even though I said that the redesign should “fix” the problems found in the first study, the truth is that you think that the new design overcomes the problems. But since nobody can design the perfect user interface, there is no guarantee that the new design does in fact fix the problems. A second test will discover whether the fixes worked or whether they didn’t. Also, in introducing a new design, there is always the risk of introducing a new usability problem, even if the old one did get fixed.

Also, the second test with 5 users will discover most of the remaining 15% of the original usability problems that were not found in the first test. (There will still be 2% of the original problems left – they will have to wait until the third test to be identified.)

Finally, the second test will be able to probe deeper into the usability of the fundamental structure of the site, assessing issues like information architecture, task flow, and match with user needs. These important issues are often obscured in initial studies where the users are stumped by stupid surface-level usability problems that prevent them from really digging into the site.

This can all feel like overhead when all you want to do is launch. Trust me, it isn’t overhead. Getting this stuff closer to right the first time will only help you reach your goals faster.

Improving copy; an easy way to increase user interaction August 5, 2007

Posted by jeremyliew in Consumer internet, copy, interaction, Internet, usability, viral, viral marketing, web 2.0.
5 comments

Wired’s August edition has a good article about how newspapers are putting their readers to work which is worth reading. But one section that jumped out at me has broader applicability:

A GetPublished! button features prominently on many Enquirer Web pages, and the submissions land in Parker’s queue. They almost never resemble anything commonly considered journalism.

“It used to read, ‘Be a Citizen Journalist,'” Parker says. “And no one ever clicked on it. Then we called it ‘Neighbor to Neighbor,’ and still nothing. For some reason, ‘Get Published’ was the magic phrase.”

Changing copy can make a huge difference in your level of user interaction.

Direct marketers have known about the importance of good copy for years. Good email marketers constantly test and refine subject lines to improve open rates. Many best practices in email marketing subject lines have evolved that are often directly applicable to other areas. The same is true of the best lead generation businesses who are constantly tweaking their landing page copy and form-fill flow to maximize the completion rate.

Copy can improve interaction rates in media businesses as well as these more transactional examples. Another example is in social media optimization (an element of search engine optimization). For example, this list of the top 101 advertising headlines ever written (top 10 excerpted here):

1. They laughed when I sat down at the piano – but when I started to play!
2. They grinned when the waiter spoke to me in French – but their laughter changed to amazement
at my reply.
3. Do you make these mistakes in English?
4. Can You Spot These 10 Decorating Sins?
5. How a “fool stunt” made me a star salesman
6. How a strange accident saved me from baldness
7. Who else wants a screen star figure?
8. Who else wants a lighter cake – in half the mixing time?
9. Free to brides – $2 to others
10. Free to high school teachers – $6 to others

may seem dated, but many of them follow the same rules for headlines that help your article get Dugg today.

Email virality and other forms of viral marketing can also often be tuned and improved through better copy. When dealing with email invitations from friends, more social messages may be more effective than the hard-sell/call-to-action type copy of the examples linked to above. For example, Flixster (a Lightspeed portfolio company) asks in the email subject:

Do we like the same movies?

while Tagged‘s subject line is

[Friend] has Tagged you 🙂

In both cases the actual copy is important, but more important is the fact that the companies constantly A:B test their copy to optimize and improve their conversion rates.

The takeaway here is that, although technology startups full of top notch engineers often look to improving the product to improve user interaction rates, sometimes something as simple as a change in words can have much the same result.

I’d like to hear from readers of examples of how small changes in copy improved their user interaction rates. [Note the call to action!]