Stuff on my Wall

Experience Maps – Mapping the Customer Journey

I love experience maps. They show you how a potential customer navigates all of the different touch points during a research/purchase/interaction process, and what they’re thinking and feeling. They’re usually based on a combo of qualitative and quantitative research.

Finding examples of them can be a bit hard and, if you’ve never done one before, having some examples can be very helpful and inspirational. And since I’m not much of a designer, I like finding ones that look nice and tell a good story.

Some good examples of experience maps and the processes that can be used to develop them can be found here:

User Experience Toolkit – WebmasterRadio.FM

Well, it’s pretty hard to put a podcast on your wall, but I figured I’d make an exception for this one.

I had the opportunity to chat with Tim Ash on WebmasterRadio a couple of weeks ago about what’s in my UX toolbox, some of the research methods I use, my upcoming presentation at Conversion Conference in Chicago (register with my promo code and get $100 off!), and my love of fun shoes.

You should check it out: User Experience Toolkit with Ian Everdell « Landing Page Optimization – Online Radio – WebmasterRadio.FM.

Bad Form: Microsoft Outlook Web Access Password Reset Form

You’d think that resetting your password would be a pretty straightforward thing to do, right? Microsoft has managed to make it annoying. Read about it at Bad Forms: Microsoft Outlook Web Access – Password Reset Form.

97% of Websites Suck – Lessons Learned From 1,500 Website User Experience Reviews

With 1500 website reviews under their belts, Forrester has come out and said that the vast majority of fail at even the most basic of user experience best practices.

To be fair, they have a fairly strict measure of what counts as a “pass”. But when you’ve got sites that still don’t cut it for basic things like text legibility, that’s not so great.

The sliver lining of this UX cloud is that sites are improving over time. Not surprisingly, B2B sites lag behind B2C sites (there’s just something about being able to directly tie your website to revenue that seems to make B2C sites do better sooner), but they’re catching up.

You can read a quick summary of the report or download the whole thing if you’re lucky enough to be a Forrester member: Lessons Learned From 1,500 Website User Experience Reviews | Forrester Blogs.

Make My Logo Bigger Cream: Products Every UXer Should Know About

Just watch this.

If you want a quick rundown of the products:

  • Make My Logo Bigger Cream – Logo too small? Try this cream that will instantly make your corporate logo the biggest element on your ad or website.
  • White Space Eliminator – Got too much loose white space floating around? Get rid of it with this handy spray.
  • Starburst Dust – Having trouble attracting attention? Add a few starbursts and see immediate results!
  • Fluorescensizer – Starbursts not enough? Use eye catching fluorescent colours too!
  • The Emotionater – Want to bring a tear to your customers’ eyes? Slather this stuff on for more cute puppies, rainbows, and patriotism than anyone can resist!

Using a Good Image? Make it Great with a Caption!

We all use images in our web designs. We know that we should pick images that are related to the content, convey a message, aren’t stock, and so on. We know that using faces or skin, playing with directionality and empty space, and keeping images simple (high contrast, few subjects, plain background) can really make images stand out and help guide attention on a page.

But when we watch users interact with pages, we can see that they typically only glance at images (if they even do that – peripheral vision can let us determine the gist and relevancy of an image without even looking at it).

So when you’ve put the time and effort into creating/choosing and using a good image, how do you get people to stop and look at it so that you can get your message across?

Add a caption.

Sean d’Souza over at Copyblogger provides some great whys and how tos for adding captions to your images. His focus is on landing pages, but I think you can apply the same principles site-wide (remember, every page can be a landing page… thanks Google!). It’s a simple thing that can make a big impact.

How to Instantly Transform Your Landing Page Images from Good to Great | Copyblogger.

How Not To Do Site Search: GO Transit

I left a bag on the GO Train the other day (for those of you not in the Toronto area, the GO Train is our commuter rail system). After trying to chase the train down the highway (I didn’t quite make it to the next station in time), I resigned myself to hoping that someone else picked it up and turned it in.

The customer service rep at the train station told me that the lost and found was located at the main train station in Toronto, but if you’ve ever been to Union Station you know that it’s big and kind of disorganized. So I decided to check the GO Transit website to find out exactly where the lost and found is.

First try: Can I find information about it just using the site navigation?

The main navigation from the GO Transit website.

Nothing jumped out at me right away (although upon further review, if you click on Union Station -> About Union Station and open the station map, Lost and Found is indicated on there), so on to option two.

Second try: Site search.

I clicked on the search box…

Google Translate on the GO Transit website.

Hang on, that’s not a search box. It’s where a search box would normally go, looks like a text box, and even has the Google logo. But it’s actually translation (it says “Select language” in the box, but as a regular ol’ web user I didn’t actually read that).

Then I discovered the “Search GOTransit.com” link above that, which took me to a separate page that would let me search the site:

GO Transit site search

The surprisingly large block of text did catch my attention (after all, how much can you possibly write about searching a site?). It reads:

Use the form below to search for documents in this web containing specific words or combinations of words. The text search engine will display a weighted list of matching documents, with better matches shown first. Each list item is a link to a matching document; if the document has a title it will be shown, otherwise only the document’s file name is displayed.

Type the word you are looking for and click the Start Search button.

Seriously?

I think most people using the GO Transit website probably understand how a search engine typically works. There’s no need to say “weighted list of matching documents”. And of course “better matches [are] shown first”. It would be stupid to design a search engine that displays stuff that doesn’t match first.

“Each list item is a link to a matching document.” Yup, that’s how search generally works.

“If the document has a title it will be shown, otherwise only the document’s file name is displayed.” That’s just poor content design. Give everything a title. Oh, and most people using the site search probably won’t care.

So I typed in “lost and found” and got these results:

GO Transit site search results for "lost and found"

Where to start? Problems abound:

Site Search Design

  • If you’ve used a search engine in the last 10 years, you’re probably used to seeing a linked title, a couple of lines of text, and then a URL (or some slight variation of that). You’re not used to seeing a four column table. I’d suggest you go for consistency with widely-accepted standards.
  • Because they’ve chosen columns, typically long pieces of text (like filenames and page titles) are wrapped into 12-15 character line lengths, making them very difficult to read. The columns don’t take up any less room than displaying 3 or 4 lines of text, so why bother?
  • Filenames? First of all, they’re not that helpful (e.g., result #4: buspassengersave.aspx). Second of all, they’re already in the URL. They’re really just taking up space.
  • Size? Unless they’re downloading huge documents on a dial-up modem, most people don’t care. Oh, and what does this number represent? Bytes? Kilobytes? Characters? Words? Monkeys it took to write the content?

Site Search Functionality

  • Didn’t they say the “better matches [are] shown first”? The first result is “copy of default.aspx”. That’s the homepage. Actually, it’s a random copy of the homepage. And I did a Cmd-F for “lost and found” on the homepage just because I was curious. It’s not there.
  • I checked the other 9 pages – no “lost and found” on any of those pages either. Generally I’d recommend picking a search engine that will return helpful results.
  • There are two copies of the homepage and three copies of the “citylocations.aspx” page in the first ten results.
  • Probably your site search engine shouldn’t index things in the “_private” or “to_be_removed_sept302007″ folders. Most of these are blocked from Google by the GOTransit.com robots.txt file (although not all of them – they should check that), so why is the internal search allowed to index them?
  • Something like “lost and found” should probably return one page. It’s pretty clear what I’m looking for. Tell me what the lost and found policy is and where I can go to find the lost and found. Pick a site search engine that lets you create priority pages for specific search terms.

Third try: Google

I gave up and Googled “go transit lost and found”. Google’s got it figured out – they returned the page I was looking for in the #1 spot:

Googling "go transit lost and found"

Perhaps GO Transit should consider using Google site search as their internal search engine? Luckily the guy that I talked to at the Lost and Found counter was friendly and helpful, because I was relatively annoyed with the website.

My bag wasn’t there, but apparently I was speedier than they usually are – I’ll keep my fingers crossed and check again next week.

The Myth Of The Sophisticated User: Frustration is Frustration

I just came across this article and thought it was quite brilliant. In it, Robert Hoekman Jr. describes how just because you have users who are technically savvy doesn’t mean that they are any more likely to tolerate a poor user experience than non-technically savvy users.

In fact, I would argue that the opposite is true. Maybe it’s because I also work on UX for a living, but I consider myself a pretty savvy user and would think I find it more frustrating than a non-savvy user would when something doesn’t work.

I think this is because I understand what the problems are. I recognize that this is not a user error. It’s an interface error. Non-savvy users tend to blame themselves when errors occur. Savvy users know they’re generally not to blame.

Give it a read: The Myth Of The Sophisticated User – Smashing UX Design | Smashing UX Design.

Designing Great Pricing Pages

Designing great pricing pages

You already know that customers want to compare products and some of the best practices around what you should do. But if you want to see some more examples of good pricing pages along with commentary on what makes each design particularly effective, look no further than onextrapixel.

Most of the examples they give are online, SaaS-type offerings geared at getting users to sign up for a service, but the best practices are applicable to other products and services as well.

To summarize some of the good design choices you can make on your pricing pages:

  • Highlight the most popular product
  • Provide a free trial if you can
  • Use colour to your advantage
  • Create a nice, logical feature list
  • Think about the order you present products in
  • Make your call to action stand out

What are you waiting for? Go take a look at the examples and then see what you can do on your own pricing pages.

“Eye Tracking” Facebook vs. Google+ and the Validity of Computer-Generated Gaze Behaviour

Facebook vs. GooglePlus Gazeplot Comparison

It was bound to happen sooner or later (and I’m not surprised that it happened sooner).

Bryan Eisenberg posted “gaze plots” generated by Feng-Gui of Facebook and Google+ this morning, and asked the G+ community for feedback on what they thought. So I replied…

First though, thanks to Bryan for sharing this, because it is important to think of design from a behaviour standpoint, and having these discussions will bring more awareness of that.

So, here’s Bryan’s original post and my reply:

Original Post

“I just ran a Feng-Gui visual attention analysis on FaceBook stream versus Google Plus stream. I am going to write up my full analysis but I am curious about your impressions of the gaze plots. What does this show about what each one’s primary goals are?”

My Response

I think it’s important to look at these “gaze plots” with the understanding that they are generated by a computer.

Yes, Feng-Gui and other systems use algorithms based on vision science, but they’re generally quite poor at taking intent into consideration – that is, our gaze behaviour can change quite significantly depending on what we want to do, and computers typically can’t account for that.

These tools use properties of visual salience (e.g., contrast, colour, edges, etc.) along with things that we know are visually important to humans (e.g., faces), and typically profess to represent the first 3-5 seconds of behaviour (I believe Feng-Gui does 5 seconds).

So you can look at these “gaze plots” and assume that they’re reasonably accurate given the constraint that the “person” looking at the screen has no specific task or goal they’re trying to accomplish and has never seen the screen before.

There are a couple things that immediately jump out as questionable to me:

1) The first “fixation” in both cases is over on the right side of the page. For G+, it’s on the “Start a Hangout” button, probably because it’s big and green and stands out from the rest of the page. But I would wager that very few people actually look there first, especially if they’ve been to the G+ homepage before.

For FB, it’s the ad for Crazy, Stupid, Love. Humans are extremely adept at ignoring ads, especially when we’re familiar with an interface and know where they are (not that everyone would ignore it – maybe you like to check out the ads… but it’s again unlikely that you would do it first).

Most eye tracking studies reveal that Western cultures typically look at a web page from left to right and top to bottom (the same way we read), in an F-shaped pattern. Yes, there are deviations from this, but the “gaze plots” here don’t resemble this at all.

2) There is no “attention” paid to the stories appearing the in the stream/news feed. Again, this is extremely unlikely, because most people will be coming to these pages for one of two reasons: they want to read what their friends are up to, or they’re going to navigate to a different page (the navigation isn’t getting much “attention” either).

Anyway, I will stop my diatribe there. Thanks for sharing, Bryan, as thinking about design from a behaviour perspective is always important. I’m quite confident in saying that Google has probably done a bunch of real eye tracking and user experience research on the G+ interface and has taken those results into consideration.

What Do You Think?

So you’ve heard my position on it. What do you think?

« Older posts

Copyright © 2014 Stuff on my Wall

Theme by Anders NorenUp ↑