Archive for the ‘Design’ Category

Awesome Post on Designing a website by Andy Rutledge

Posted on December 10th, 2007 in Design, Product | No Comments »

I just came across Andy’s blog - something tells me I should have been reading it a long time ago. Oh well, better late than never.If you’re interested at all in web design, I highly recommend adding it to your reading list.

A little taste from two of his posts:

Objectivity be Damned
Designing a website is like designing a sex chair. You can gather all the objective data you like from the most comprehensive of studies, but if you’ve not had sex in a chair – in a variety of different chairs - and fully and intuitively appreciate the various issues of, let’s say, alignment and accessibility (ahem), you’ve no business designing that chair. Put another way, if you ain’t feelin’ it, neither will anyone else.

Don’t Walk; Run
I typically craft my articles to speak directly to designers, aspiring designers, or sometimes simply to the broad spectrum of design industry wonks. With this article I’m instead speaking to business owners and marketing managers who are planning to enlist the services of creative agencies for company projects. Many of you are being duped and defrauded, or are about to be, costing you time and money.

Got Blist?

Posted on November 25th, 2007 in Design, Product, Technology | 2 Comments »

Matt gave Dave and I a quick demo of Blist’s software last week and I have to say I came away very impressed with what they’ve been working on. They’ve clearly thought a lot about the user experience and it shows. They’ve innovated a lot on the UI front and I saw some things I hadn’t seen before that I think will be very well received.

I’m looking forward to their launch.

Search Shortcuts in Yahoo Mail

Posted on October 31st, 2007 in Design, Product, Search, Technology | No Comments »

I noticed a small menu called “Search Shortcuts” in Yahoo Mail a couple of days ago. This is a great example of a simple feature addition that has a huge payoff.

Search Shortcuts

People send photos around all the time and having one-click access to all photos in your email account is awesome. If you click on the link, you’re presented with a thumbnail view of the photos in your email which you can sort/slice etc. In addition, in the left nav you get a list of filters that allow you to narrow the list by person, by file type or by time. You can select multiple images and save them all to disk, or you can forward photos with one click.

Search Results

I think this is absolutely awesome. They could have achieved the same thing with just the ?My Attachments” link, but instead, they thought about the primary use case and made it easily accessible. Features don’t always have to be complicated to deliver a lot of value.

Cool Feature on Linked In - “Take Action” menu item

Posted on October 3rd, 2007 in Cool, Design, Product | No Comments »

This isn’t new but I recently realized how cool this is. If you get an invitation to connect on LinkedIn, they display it on your home screen. In the past, you had to click on the invite to go to a page where you could act on it. Recently however, they started providing a “Take Action” link. If you click on this it overlays a small menu on the page where you can decide how to deal with the invitation.

Linked In Take Action Links

This is simple but thoughtful - they are making life easier for the user and accepting fewer page views for the action of responding to an invitation. In the long run, a better user experience will translate to a better business. It’s nice to see a company doing this. All too often, user experience gets sacrificed for page view inflation. Don’t do this.

Measure Aggregate Behavior, but also remember to observe individuals

Posted on September 17th, 2007 in Design, Judy's Book, Product, Technology | No Comments »

Measuring consumer behavior and watching consumers interact with your site are the best ways to find out what works and what doesn’t. There’s a great post on Signal vs. Noise about some of the things behind Amazon’s success. Two paragraphs that jumped out at me:

Use measurement and objective debate to separate the good from the bad. I’ve been to several presentations by ex-Amazoners and this is the aspect of Amazon that strikes me as uniquely different and interesting from other companies. Their deep seated ethic is to expose real customers to a choice and see which one works best and to make decisions based on those tests…

…This is done with techniques like A/B testing and Web Analytics. If you have a question about what you should do code it up, let people use it, and see which alternative gives you the results you want.

This data driven approach is especially valuable for a company in Amazon’s position where small changes in things like the click-to-sale rate could have a massive dollar impact. Even if you’re not in a position to do testing at this scale (or don’t have the traffic to make it meaningful), watching individual users is still incredibly valuable.

In an ideal world, you’d be able to do both - measure the aggregate and observe the individual.

P.S. If you find this mythical ‘ideal world’ tell me how to get there.

Related Posts:

How to make your site better

Posted on August 30th, 2007 in Deals, Design, Judy's Book, Local, Product, Technology | 5 Comments »

The best way to figure out what works and doesn’t work in your product is to watch a member of your target audience using it. Prior to our recent release we conducted a number of simple focus groups at Judy’s Book where we had people come into the office for individual 30 minute sessions with our site.

One point to note here: don’t ask users what they want. Observe them doing the actions they want to do. This will tell you far more. Also, while individual sessions may seem inefficient, they avoid group think, so you get an honest opinion from each person rather than one collective opinion.

The Process:

The sessions had the following format:

  • Initial impressions with no guidance - we just put the site up on a screen and asked for their reactions.
    • What do you think?
    • Who do you think this site is for?
    • What catches your eye?
    • What’s the first thing you would click on?
  • Targeted Questions
    • How would you find deals in your city?
    • What does that heading mean to you?
    • If you click on that link, where do you think it would take you?
    • What do you think of the store logos on the right of the page?
  • Observing Simple Tasks
    • If you were looking for a digital camera deal, how would you go about doing it?
    • If you wanted to find deals from Amazon, how would you start?
    • If you were looking to see if a store offered free shipping, how would you go about it?

What we learned:

Putting even a handful of users through this exercise is incredibly instructive, and humbling. No matter how well you think your site works, watching someone new try to use it makes you cringe from time to time. When you’re closely involved with something it’s hard to see all its flaws but three 30 minute sessions with new users will bring them all out into sharp relief.

We learned a lot from these sessions but in this post, I’m going to focus on the challenge of displaying online and local deals on the same site. Prior to this release at Judy’s Book, our site showed users online only deals by default and then after clicking on a link labeled “View Local Results” you would be shown the local deals that were relevant. This seemed logical enough until we asked a user to see if there were any local deals she cared about. She didn’t have a clue how to proceed.

Once we showed her, we then asked her to find a deal from Amazon and she started trying to find it in the
Seattle store directory. After seeing a couple of users proceed in this way, it became clear that the distinction between online and local deals was meaningless to users. They just wanted to see the deals relevant to them.

From the user’s perspective, it became clear that they wanted to see the deals they could access in one place. Sitting in Seattle, I can buy from my local Target, but I can also buy from Amazon.com. The distinction between online and local isn’t relevant when I’m browsing deals - it only becomes relevant when I try and act on what I see.

What we did:

This insight led to a fundamental change to the site. Instead of creating silos of online and local content, we blended the two. As a result, users see all deals that are relevant to them, whether online or local. Using filters in the left nav, they can narrow the list if they want.

As a result, on our Seattle Deals page, a user now sees our best local and online deals blended together. This is a much more logical and natural experience. You don’t have to toggle between “Online” and “Local” to find Amazon.com versus your local Target. In hindsight, we probably should have thought of this earlier, but watching a real user wrestle with this issue in person really hammered the point home.

Going Forward:

It’s hard to find the time to invite people in and have them use your site but at the end of the day, it’s a very cost-effective way of improving things. Even though it can be hard at times, and it inevitably leads to changes which can also be problematic, simple usability testing like this is critical. The payoff in terms of feedback, for what is at the end of the day, a very small amount of time and money, is staggering.

Right Click Preview in Gmail

Posted on August 28th, 2007 in Design, Product | No Comments »

If you’re using the Better Gmail extension in Firefox, you can get a right-click message preview in Firefox.

Gmail Right Click Preview

The goal of enabling users to scan messages without unnecessary clicks is a noble one, but I don’t think it  should come at the cost of the expected right button behavior. I think a mouseover preview would have been better.

Every Page Counts

Posted on August 23rd, 2007 in Business, Design, Product, Technology | No Comments »

Seth’s post on follow through and caring about the last inch is a must-read if you haven’t read it already.

Obsessing about the last inch of follow through ensures that the important parts of what you do get just as much (if not more) commitment.

You can’t afford to stop caring about the little things. The equivalent argument when it comes to web sites is: “Well, so few people see that page, we can leave it looking crappy.”

This is incredibly dangerous thinking. The truth is that sometimes you have to cut corners to get something released, but you can’t accept leaving things in a shitty state and you better make sure you come back around and fix it. (By the way, the reverse, obsessing about the little things, is often how great products get built.)

If something isn’t worth doing right, don’t do it, or kill the feature. Otherwise, if it’s up and viewable to your users, then make sure it’s your best work.

User Experience - It’s the little things that annoy you

Posted on August 2nd, 2007 in Design, Product | 2 Comments »

My home page is a personalized Google page, and overall, I love it. There’s one instance though when it always irritates me just a little bit and that’s when I’m adding new RSS content. The initial flow is fine. You select ‘Add Content’ and then select ‘Add by URL’ at which point you are presented with this box:

Add by URL Input Form

Now this doesn’t look so bad at first glance, but the problem is that the leading “http://” is not selected. Why you may ask? It’s because typically, when I want to add a site to my Google homepage, I don’t know it well, so I go there, select and copy the URL to the clipboard and then come to this input form to add it. Instead of clicking “Add URL” and then “Ctrl-V” to paste, I have to select the http:// in the input box so I can paste over it. Every time. If I don’t do it, you get the following:

URL Error

I get what Google is trying to do. They place the cursor at the end of the http:// so you can begin typing a URL right away. I know Google is very rigorous about their UE so maybe in their testing they found that most people like to type URLs rather than cut-and-paste them in. (I’d be surprised if this were the case, but you never know.) You also don’t want a blank input form because the presence of the ‘http://’ is a cue to the user that they need to put a URL in that input box.

There’s a small tweak to the box that makes it better and Wordpress uses it. They present you with an input box where the ‘http://’ is pre-selected.

Wordpress Input Form

The benefits of this approach are subtle, but important. The http:// is present and stands out. The fact that it is pre-selected means that if you copy and paste a URL directly from the browser bar, it overwrites the existing text so you don’t get the Google error case shown in the second screenshot. Also, if you type a URL, you overwrite the text but the dialog box is smart enough to know that you entered a URL and to treat it as such.

Now I agree that this is a tiny, tiny nit but the fact remains that it annoys me every time I add content to my Google home page and in contrast, I get the warm fuzzies every time I use the Wordpress input box. User experience works this way. You have to help your users win in small ways and they add up to making them happier. Joel has a great article in which he talks about this topic:

Put people in direct control of the stuff around them and they will, more or less, on average, be happier. It explains why some people like stick shifts, it explains why lethargic user interfaces make you frustrated and depressed, and it explains why people get so goddamn mad when Sony decides to install viruses on their computers just because they tried to listen to a CD.

If you’re a software designer, this is it. This is your big chance to do something meaningful to improve the world. Design software that puts the user in control and you’ll increase happiness, even if your product is the most boring accounting software imaginable. You can do this at the most microscopic levels:

  • The bookkeeping software I’ve been using for the last six years makes a beep when you record a transaction.
  • The Apple iPod includes a tiny internal speaker so that the thumbwheel sounds like it’s clicking when you rotate it.
  • The Sonos digital music system has a handheld controller with a motion sensor built in. The instant you pick it up, the screen lights up.

It’s really hard to focus on tiny details when there are huge swaths of functionality that are missing staring you in the face, but ultimately, the little details are going to be the things that make a difference. If you can deliver enough small, positive surprises to your users (think gorgeously wrapped power cables, a click wheel that clicks, headphones with cords that match the device) they are going to love your product.

Closing the loop

Posted on July 17th, 2007 in Design, Judy's Book, Product | 3 Comments »

Most affiliate sites are designed to get users to discover the site, find what they are looking for and then click through onto the target merchant site to complete a purchase. Some sites take this a step further and try to close the loop. I was trying to book a flight on Kayak and clicked through on a JetBlue flight link. I then ended up not completing my transaction and clicked the back button. Kayak presented me with this screen:

Kayak Closing the Loop

My original search was in the background underneath this dialog box. I think this is fantastic. I didn’t complete my transaction - it’s a great opportunity for them to attempt to salvage me as a customer. The options to check for my flight or to be alerted for other flights going to NYC (my destination) make a ton of sense. By doing the extra work to personalize my options, they make me far more likely to engage with one of these secondary calls-to-action.

This is something we don’t do at Judy’s Book today but we are working on adding. Ultimately, our goal is to help the user succeed in what they were trying to do. If they don’t succeed with their initial path, trying to find out why and presenting an alternate path is a far better thing to do than to just say “oh well.”

  • Askablogr

    Ask Me a Question!
  • My Blog Log

  • Post Categories

  • Meta