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)

 

Test your design intuition December 10, 2009

Posted by jeremyliew in A:B testing, UI.
1 comment so far

I’m an advocate of A:B testing of all elements of design and copy. However, that doesn’t mean that good design intuition can’t help advance the baseline from which you start your testing.

Which Test Won? has a list of real world A:B tests run on different homepages, lead gen pages, search landing pages etc, all with an eye to which helped advance the funnel the best.

Which Dell Coupons Page Layout Resulted in More Sales? A/B Test by an Online Publisher

VERSION A

VS.

VERSION B

TechTargetvasm TechTargetvbsm

Helpfully, it also analyzes the results and draws specific design conclusions.

I recommend checking the site out for anyone in social media, social gaming, ecommerce or lead gen.

Does Twitter’s 140 character limit improve writing or reading? July 29, 2009

Posted by jeremyliew in twitter, UI.
5 comments

Fred Wilson recently posted about the importance of SMS as a mobile interface, saying that in the debate between web apps and mobile apps on phones, you should not ignore the least common denominator, SMS.

I believe that Twitter’s native implementation of sms is an important part of its success. The 140 character limit was driven by the 160 character limit of sms and the initial design of the service put sms compatibility up there near or at the top of the system requirements. Other competitive services, including Facebook, are just not as natively available via sms the way Twitter is.

In general, I agree.

However, he also notes that:

Of course most people access Twitter and Facebook and other web services via mobile web interfaces and apps. I don’t know the current percentages but I think something less than 15 percent of Twitter updates are posted via sms. And the number of people following via sms is also relatively low.

I”m sure a lot more than 15% of Twitterers tweet some of the time via SMS,  so the 140 character limit has its benefits for making it easy to tweet. However, I think that there is another very important advantage to limiting tweets to 140 characters, and that is that it keeps the cost of spam down.

Many people have complained that Twitter is getting spammy, and that as a user follows more twitterers, they see a decrease in the signal-to-noise ratio in their feed. Obviously, it is always better to have a high ratio of signal-to-noise.

But if the “cost” of noise is low, then you can tolerate more noise. Twitter’s 140 character limit helps keep the “cost” of noise low; it is easy to scan the feed and skip over tweets that are not interesting to you. Since Twitter has few ways to filter the feed to minimize noise, short tweets are important to reading as well.

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.

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.

Social Media: Culture = f(UI) December 19, 2007

Posted by jeremyliew in culture, facebook, game mechanics, interaction, Internet, myspace, social media, social networks, UI, web 2.0.
5 comments

Lightspeed hosted a summit for portfolio companies and friends of the firm in the fall, focused on consumer internet user acquisition. One of the panels was about building community on a social media site, and on that panel Angelo Sotira (CEO and founder of deviantART) noted that for social media sites, culture is a function of UI. (deviantART is the leading community for artists and their fans on the web, and is an Alexa top 100 site. [Disclosure: my wife did some consulting for deviantArt.])

I was reminded strongly of this when reading Judith Donath‘s paper on Signals in Social Supernets that was published in the special theme issue of JCMC on social network sites guest edited by dana boyd and Nicole Ellison:

Variation in the design of SNSs promotes the development of different cultures (Donath & boyd, 2004; Lampe, Ellison, & Steinfield, 2007; Lenhart & Madden, 2007b). On a site where creating a link involves little cost, users may amass thousands of “friends,” but an observer has no way of knowing which, if any, of these links represent a relationship between people who care about or even know each other (boyd, 2006; Fono & Raynes-Goldie, 2007). On Orkut, for instance, one simply clicks on a profile to request a connection, and being connected provides no special access or information.

On sites with higher costs for creating a link, the observer has reason to believe that the links represent genuine relationships. Members of aSmallWorld are careful to request connections only with others whom they are sure wish to be linked to them, since they can be banished for having a few link requests declined (Price, 2006). On LiveJournal, making the link is easy: It is one of the few sites in which this can be done unilaterally. However, linking is generally done to give someone access to part of one’s journal, and linked members’ posts appear on one’s own space. This makes “friend” a relatively significant signal, as friending someone both reduces one’s privacy and publicly connects one with that person’s writing (Fono & Raynes-Goldie, 2007).

The meaning of these links is also personally subjective. For some people, listing someone as a “friend” on a social network site is an indication of personal and positive acquaintance. Others are far more casual, willing to add friends indiscriminately (boyd, 2006). This has ramifications for the reliability of the profile itself. Viewers may trust the self-created content of a profile if they believe that its links are to people who know that user well, while links that they believe have only minimal connection add little credence.

SNSs are designed for different audiences. LinkedIn is for professionals. It has no photographs, the profiles are resumés of education and work, and the comments are in the form of testimonials from co-workers. Identity is firmly tied to one’s professional self, and there is limited ability to explore other people’s networks. MySpace, popular with young people, has a very different atmosphere. Its profiles feature photographs, music, and embedded programs, and users can explore the network far beyond their own acquaintances (although they can choose to make their profile visible only to direct connections). This open interface makes it a rich environment for the jokes, links, and software that function as information fashions (discussed below).

Identity in MySpace is fluid. Some profiles are real people, presenting themselves much as they would offline. Some are commercial entities, such as bands, charitable organizations, or celebrities; still others are fictional personas, made for creative experimentation or as fronts for spam. No single design is ideal for all sites. What is important is that designers be fluent in not only the fonts and colors that make up the graphical design of the site, but in the social costs and benefits that shape its emerging culture.

Once a culture takes hold on a site, it is very hard to change. People building social media sites should be careful to think through the implications of their UI (including such mechanics as keeping score and exposing popularity) as their choices will likely have long term implications that can’t be easily reversed by a subsequent tweak to UI.

I’d love to hear other examples of sites where the dominant culture is a function of UI.

UPDATE: Bokardo has a good related post on how changes to Digg’s UI changed its culture