It’s Friday, I’ve been working long and hard on very exciting client projects, and I’m just not up to writing cogent prose. So here are some UX WTF pics. Enjoy your weekend fellow UX’ers.

A “Non-Flash Version” button? You’re Doing It Wrong.

eCommerce Rule #1: Click a picture, get bigger picture.

eCommerce Rule #2. Don’t violate Rule #1.

While we’re on the topic of small product pictures…

When all else fails, there’s always after-the-fact design modifications.

How Not To Display Products, a photo by pjsherman on Flickr.

When I discuss design and usability, I try to share both good and bad examples.

Today’s a bad example day.

Here’s a product listing page – actually, it’s the store’s home page – that just isn’t working.

Why? Here’s a a few key reasons, and I’m sure you can come up with more:

•  The product pictures are ridiculously small and dark. I can’t tell one from another.

• There’s no context. I should be able to tell at a glance which products fit my guitar and which don’t.

• You’d have to be on the site to see this problem (it’s “store.guitarworks.net“), but they’ve implemented the wrong selection cursor. For some unknown reason, the cursor changes to “move” (grabby hand) instead of “select” (pointy finger). That’s just sloppy coding.

Diving down to the individual product page isn’t much better. I have piles of work to do, so you’re just going to have to check out one yourself. Try store.rsguitarworks.net/5WAY.html. And feel free to buy me some cream colored historic pickup rings for my ’08 Les Paul – if you can find them that is.

UPDATE: So I just belatedly realized that the reason for the “move” cursor is so you can drag ‘n drop your item into the shopping cart on the right of the page. Sorry, but that’s too clever by half. People don’t shop online like that. They click “add to cart”. And besides, there’s not enough information on a product listing page to make a selection. Sigh.

A few days ago I decided to sign up for eBay Classifieds so I could sell a few guitars I haven’t been playing much.

I cruised through signup with no problem…and then face-planted at this brick wall of a page:

Ouch. Stopped me dead in my tracks.

So what’s missing from this picture? I mean that literally, as in “what *should* be here but isn’t?

Yeah, you guessed it. A call-to-action in the main content area. Honestly, this workflow design is so 1992, I’m surprised it’s survived eBay’s typically close scrutiny of its user experience.

Here’s a simple way to turn this page from a brick wall to a well-marked path:

Or even better…try this one on for size:

Good workflow design is not rocket science, folks!

For the first time in recent memory, I did something I almost *never* do – I clicked on a banner ad. Yes, I know, for shame.

But here’s the thing: the banner image was enticing – it showed a cable management solution for “iDevice” plugs/cables that appeared well-designed and functional – and I just couldn’t resist. When I landed on the campaign page, I was just wowed – awesome product presentation, easy-to-navigate  categories, and all the buzzwords that give you that happy, hip feeling – “crowd-funded”, “domestically-produced”, etc.

I am so buying myself the iPhone cable holder in “Nibbles Green”.

The login process itself was remarkably friendly and easy, and cleverly split the process between email capture and password entry. There was no authentication round, which frankly is unnecessary for a shopping site. My only question with this practice is why bother to capture the email at all before the purchase….but I’m guessing it’s so they can tempt me with cleverly-designed email campaigns. After all, I *did* just cough up my email address, which is implicit permission to market to me.

Anyway, if you want to see what a well-designed experience looks and acts like, check out Fab.com.

One last thing: I’m like a month late providing reviews of those design tools I said I’d look at. Sorry! Project work comes first. I promise I’ll get around to it soon.

I love me my Omnigraffle. I’ve tweaked the hell out of it, thanks to the goodies from Graffletopia and Konigi. But the user experience field is rapidly shifting, and although I consider myself mostly an ideation research practitioner, I still have to create medium- and high-fidelity wireframe screens and workflows for clients.

With that in mind, I am going to try out two prototyping tools I’ve heard about over the past month:

1. Antetype – A desktop-based (as opposed to cloud-based) application. It looks like it has lots of widgets, the ability to export and send to clients, and the big potential advantage to me is that it supports adaptive / dynamic layout behaviors.
2. FluidUI – Bills itself as a tool for “iPhone and Android mobile mockups.” The big potential win for this tool is the claim that it lets you “test designs on phone and tablet.” If so, awesome.

So I’ll let you know how it goes. I’ve scheduled this post for Monday 9 July, so if you haven’t heard anything by end of week feel free to send me guilt-inducing messages.

[This conversation happened late last week..]

Me: “I ordered Season 2 of Doctor Who and sent it to my TiVo, but only the first two episodes are there.”

Amazon customer rep (yes, you can find a phone number for Amazon if you search long enough): “OK, I’ll set it to download again. Y’know, you can do this yourself, all you have to do is [explains in general where to go to view and manage my Amazon video orders].”

Me: “Great! I really don’t want to call again next time this happens!”

[Skip to today...]

I’m at Amazon.com, looking at my video purchases, and I absolutely cannot figure out how to re-download my videos. In “scent of information” terms, I am not smelling a thing. I’m hitting multiple brick walls, swirling from the help page back to the video library page, you name it. I’m stuck. Why does this feel worse than my experiences with other sites and services?

That’s easy. Amazon’s consumer site is just so damn useful and usable that it’s even more noticeable – and annoying – in those rare instances when it fails. When my high expectations for the Amazon experience – built up by years of great interactions with the site – are not met, it’s even more disappointing. This really underscores the need to design consistent and consistently usable customer interactions.

I’ve been meaning to write this post for a while. Patrick Neeman, UX Director at Jobvite and proprietor of UsabilityCounts.com and creator of the UX Drinking Game, maintains a page at UsabilityCounts that is full to overflowing with fantastic – and FREE – resources for managing your user experience career.

What’s so great about Patrick’s collection of resources?

• The UX resume template – this alone makes it worth the visit.
• For people considering UX as a career (and even for newish UX’ers), there’s “How to Get Started In UX“.
• An embedded preso by Lynn Teo that demystifies the stressful process of creating and maintaining your UX portfolio.

I could go on, but you need to just go check it out yourself.

One Page Of UX Career Awesomeness (my title) :: Patrick Neeman

Most UX’ers who’ve worked for a product or service company know that good product managers are our strongest leverage points, and often the most vocal proponents of UX research and design. As one great PM once told me, UX research was his “decision insurance” – that is, we were the folks who could bring the data to validate his business decisions…and also help him to recognize a mistake before it became too costly.

You may have also realized that even good product managers sometimes get saddled with a reputation for being flighty or inconsistent. Before I gained the business experience I have now, this quality mystified me. It wasn’t until I read some of the key product management books that I really got a handle on the mind of the product manager.

A good product leader is always trying to optimize the product-to-market fit. They’re trying to uncover and exploit the most sustainable and scalable business model. And (way) more often than not, a product leader will find that the plan for delivering a product, the product features, and/or product positioning needs to change. These types of changes have come to be known as a “pivot“.

That’s why you’ll find this article from Steve Blank as illuminating as I did. Not only does it explain how product leaders search for a sustainable and scalable business model; it also provides insight into the mind of the product manager. It’s short and to the point. Check it out.

Why Startups are Agile and Opportunistic – Pivoting the Business Model  ::  Steve Blank

Kia of America, I find your contact form instructions very confusing.

This has got to be a mistake, right? There’s no way a form was intentionally designed like this. This has got to be some leftover QA junk. Please tell me it is.

Long time no post. Sorry; life’s been a bit unbalanced as of late. All good now.

Today I’d like to draw your attention to two resources. One is an update from the good folks at interaction-design.org. They’ve just posted a sneak preview of their newest chapter of their online UX book. It covers socio-technical system design, and can be found here. I read it. It’s good. Check it out.

The second resource covers how to scale a development team, and it’s at Adam Wiggin’s blog. I found it an interesting read from the UX perspective because it illuminates how our engineering partners think about the organization of work and tasks. Another worthwhile read if you’re a UX’er and want to better understand the software developer mindset.

Enjoy.

Apologies to Mads Soegaard, who emailed me over two weeks ago to tell me that Interaction-Design.org has another “free as in beer” chapter available in their online UX encyclopedia.

If you haven’t checked out I-D.org, stop what you’re doing immediately and go there. I don’t care if you’re driving a commuter bus, operating heavy machinery, or sitting for an exam. Just go there now.

Here’s the kicker: not only do they have contributions from well-known UX’ers such as John Carroll, Holtzblatt & Beyer, etc…they’ve managed to nab a contribution by my favorite innovation writer, Clayton Christensen. Yes. Really.

Here’s the link to that chapter. I can’t wait to dig into it myself: Disruptive Innovation

Here it is, people. The longest dialog box ever.

I’m guessing 5000, maybe 6000 pixels wide?

I know I know, Audacity is free and I shouldn’t whine. I’m not. I’m just amused.

• Slow-loading, zoomy Flash animation? Check.
• Music that kicks on when page loads? Check.
• Throbbing animated .gifs? Check.
• Eyestrain-inducing oversaturated color palette? Check.
• Borderline offensive use of models in suggestive food-eating poses? Check check and check.
• Bonus points: The site designer link leads to an Apache setup page. Oops.

The site’s got one thing going for it. But I’m guessing they didn’t actually research the advantages of radial menus for speed of onscreen target acquisition….it’s more about the pizza visual metaphor. The pizza pie menu is actually more efficient than a drop-down menu. Read up on the advantages and drawbacks of radial menus here.

But the zooming pizza slices are, let’s just say, optically unpleasant.

Could this be another “so bad it’s great” site, like Ling’s Cars? Maybe. I have half a mind to reach out to the site’s proprietors just to find out. I’m just so slammed with the new and growing company I don’t have any time to go on this type of adventure these days.

Check it: www.pizza-pop.ch

Ubuntu One: Where Do I Look? What Do I Do?, a photo by pjsherman on Flickr.

This is an object lesson in how not to lay out a screen.

Background: While configuring a Linux PC, I found myself setting up Ubuntu One, Canonical’s cloud sync service. After I entered the confirmation code I received via email, I was taken to this screen.

My first reaction: Blargh! Where do I look first? What do I do?

Let’s break it down:

1. None of the calls-to-action appear to be primary. Nothing screams “Start here! Click me first!” The most visually prominent calls just sort of step on each other.
2. The layout is an eye-hurt. No really. I’m not exaggerating, it /actually/ hurts my eyes. I can’t recall the last time a screen layout actually made me go cross-eyed. Little thought seems to have been given to aligning the controls, text and links. I don’t mean to be too snarky…but it looks like the UI fairy barfed up links and controls onto the screen.
3. When I was a wee UX lad, mama always told me “If you can’t choose one font size, might as well use them all.” Unfortunately, mama was wrong. On this screen it’s disorienting. It adds to the difficulty users will experience trying to find a “start here” call-to-action.
4. Screenshots are helpful…in theory. But they have to illustrate something helpful to the user. This one falls short. The detail is too small to be of use. It just causes eyestrain. Or maybe I’m just getting old, and you youngsters have no problem with it. Well good for you. And get off my lawn.

I know I’ve ranked on Linux in the past, so I readily admit that Canonical has made great strides creating a better user experience for desktop Linux. Ubuntu 11.10 is by far the most usable Ubuntu release ever, and Ubuntu has always stood above other distros in ease of install, configuration and initial/ongoing use. But like any app or OS that comes from a legacy of “built by geeks for geeks”, there will always be areas of the user experience that don’t get the UX love and attention they deserve. This screen – even though it was probably created for more recent distributions – reminds us of Linux’s geeky origins.

One last thing, and this is a completely preference-driven personal peccadillo of mine…bevel-lowered grouping boxes must die. Hate ‘em. They’re /so/ Windows 3.11…

This is an impromptu video of me interacting with the Google+ “add people to circles” feature.

Like most things we interact with in the world, there’s some good and some not-so-good to the experience.

First, the good:
1. The people “cards” are just the right size. The picture is just right also – big enough so I can recognize the person, small enough to fit their name.
2. It was also a smart idea to just show the target’s name (or email if the name is unavailable). It makes for easier and quicker scanning and target acquisition.
3. The whole card is a click target.
4. You can select multiple cards with clicks; no CMD+ or shift+click necessary. However, using a key combination (which some people will carry over from the desktop software interaction paradigm) works just fine as well.

The not-so-good:
1. Drag and drop appears to be the only way to get people into circles. Really? Given Google’s demonstrated commitment to accessibility, I *can’t* believe this is the only way to manage circle assignment. I must be missing something. That just can’t be.
2. A few times I highlighted multiple cards and then inadvertently deselected them. I have no idea why or how.
3. Believe it or not, on first view I thought Google+ had only found 28 (7 x 4) people I knew. It took more time than it should’ve to realize that the card area was scrollable. I might not be able to pin that on Google however. I used Safari on Mac OS X 10.7, which together are a walking advertisement for iOS disappearing scrollbars.

So what does this little spiel demonstrate? I guess it shows that even cutting-edge design with massive resources behind it can still occasionally be a struggle for users. Oh, and don’t forget the accessibility.

I’ve Found It: The Worth Thermostat Ever, a photo by pjsherman on Flickr.

After many years of working in user experience, I’ve found the semi-mythical holy grail of poor design: in my grandmother’s condo I encountered the dreaded “which way is which?” thermostat.

Just looking at this picture, you might think that pressing the left-facing button would lower the temperature, and pressing the right-facing button would increase it. And you’d be wrong. At least, I think you’d be wrong.

If only they were reversed, I could at least deal with that….but sadly no, what we have here is *both* a 90-degree control rotation (or negative 90; I’m not sure), and some kind of mode problem where I couldn’t actually just change the temperature on the fly without entering a “temperature change” state.

And no, I never discovered how to enter the “change temp” mode…I just sweltered in the Florida heat for the rest of the visit.

Here’s a great example of how feature requirements and design have combined to cause a lost sale. Some background: This is the donation page for the Presidential candidate I support. I’m not getting into who it is; those who know me personally can probably guess, and those readers who don’t can visit candidates’ donation pages until they find this example.

I’m your typical semi-involved voter: I care a bit about local policitics, I try to vote in every election, but don’t always make the smaller or off-year ones. But I do care about state and national politics, and since I live in *the* quintessential swing state, I feel like my vote actually matters.

This morning I received a call-to-action email asking me to donate, and followed the link, landing at the page you see (in part). I noticed the “Make this a monthly recurring donation” checkbox, and immediately thought “Awesome! That’s what I want to do!” I figured it would be easier for me to just automagically kick in $25 per month until the general election was over. So I ticked the box, expecting to get one of those “For how many months?” dialog or AJAX partial page update. Nope. Nothing. Which sucks for the candidate and party, because I – and I suspect many, many other small donors – only want to make a recurring donation until the general election is over. And if I can’t do this – or easily figure out how to do this – there is no way I’m setting up an autopayment.

This is a classic failure of the product managers and designers to understand the customer. They may *want* me to set up an autopay in perpetuity. But I guarantee that most small, semi-involved donors most certainly do not want to do this.

Lesson: Learn what your customers want from your product and what their motivations are when they use it. Wishful thinking about user behavior is not a good way to meet their wants and needs.

I’m on my way back from my company’s all-hands meeting.

After all the excitement and motivation the week inspired, I felt moved to write a UX mini-manifesto. A mini-festo, if you will.

Excuse any grammar or spelling issues; I’m composing in Evernote on my phone. I would love to hear my readers’ and followers’ comments on this post.

You’re an experience design practitioner. In your organizations, you should be responsible for:

• Creating an inviting and well-designed initial user experience.
• Designing and validating:

Along the way, you also:

• Collaborate on the definition and optimization of product development lifecycle processes with our functional neighbors – i.e. PM, Dev, QA, Marketing, and Social/Community Management.
• Measure, track and improve the user experience.
• Discover opportunities to delight customers in ways that are not easily discoverable by market-level research methods.
• Occasionally uncover strategic jobs that customers need doing, and design opportunities for more sustaining vs. incremental product innovations.
• Provide the business with both strategic and tactical customer insights and understanding.

eBay: Hah Hah, Made You Think!, a photo by pjsherman on Flickr.

Standard disclaimer: I am a user and fan of eBay. When it comes to user experience, they do lots of things right.

Here’s one thing they did wrong: They provided half-hearted, linkless “help” in the form of “to do x, go to [place A] or [place B]“, without including links to those locations. This is a no-brainer and should’ve been coded ages ago.

As a result, I had to hunt around for a small but still-annoying period of time before I found where I needed to go.

Somebody add that to the eBay UX fix list.

Message Can’t Be Blank? Why The Hell Not?, a photo by pjsherman on Flickr.

This screenshot is about a year old, so my apologies to the site if they’ve fixed this UX issue.

The point remains, however, that when someone wishes to unsubscribe from your email list, it is incredibly imperious to *require* them to explain why.

Sure, as a business you might *like* to know, but you have no right to demand an answer.

That’s treating your visitor rudely.

A Dubious Claim, a photo by pjsherman on Flickr.

Paypal goes a little too far with this login transition screen.

“The world’s most loved way to pay and get paid”?

I don’t think so.

Using marketing-speak in the UI is one thing. It’s come to be expected and (mostly) accepted. Just make sure it doesn’t trigger your users’ BS detectors.

Whatever You Do…Don’t Search For “ASCII Mr. Burns” Or Google Will Flip Out, a photo by pjsherman on Flickr.

Really Google? I’m on my home network. No one else is using my connection, according to my outbound connection monitoring software.

Nothing but little ol’ me on Firefox.

One-Try Lockout? That’s BS., a photo by pjsherman on Flickr.

This is a pure customer experience issue: I was just locked out of my AT&T wireless account after a SINGLE INCORRECT PASSWORD ENTRY.

I suppose it’s theoretically feasible that someone was trying to crack my account at the very moment I was trying to legitimately log in, which would explain why I was locked out after a single try. Odds are, probably not.

Thanks the inconvenience, AT&T.

And companies wonder why we call instead of self-service on the web. It’s because the web is basically a brittle support mechanism.

Given that the average support call costs anywhere between 5 and 50 dollars (sorry, no recent reference; going from memory), I’m about to cost AT&T ~ 15 or 20 bucks because someone decided to implement a single-attempt lockout policy.

Whatever. Time to call a CSR and burn some of AT&T’s cash.

RushLimbaugh.com…Wait For It…Not Enough White Space, a photo by pjsherman on Flickr.

This morning I followed a link from an independent writer’s feed, and found myself for the first time on Rush Limbaugh’s site.

I don’t like the guy or what he stands for. He’s a liar and a bully. But let’s get beyond that and talk about his site.

Clearly there’s too much…stuff. Multiple rows of nav, a riot of highly saturated opposing colors (ouch my eyes), and…not enough white space between elements.

Maybe he did that on purpose. That would be so meta and clever if he meant that. Get it? Not enough white space? Because, uh, that’s what he believes…there’s not enough white space.

Yeah…somehow I doubt it was intentional.

There’s A Lot Of User Assistance In That There Screen, a photo by pjsherman on Flickr.

My company uses this product to (surprise!) document our expense reports. When I started a few months back, one of the first emails I received from my colleagues was the “Here’s how you create an Expensify report” message. It was that hard.

Last time I logged in I noticed a whole bunch of user assistance in the UI, including a “faux-modal” lightbox that provides links to the two most common actions (“add expenses” and “new expense”). They’re not the most well-crafted sentences in the world, but they get the points across.

Because I was in a user-assistance-y mood, I also noticed the “How do I?” links on the left for the first time. I have no idea whether they’ve been there since I started using the app, or whether they were new as well.

In any case, while Expensify’s main workflow isn’t exactly the most well-designed interaction I’ve seen, at least they’re providing a bit of guidance at the front end.

A reader sent me a link to this infographic about user experience jobs. Although I disagree with a few items in the skillsets and tools section, I found it useful enough to pass on.

Yes, her organization is a UX recruiting firm, but that there constitutes disclosure, and the fact that I’m receiving nothing from them by posting this constitutes full disclosure.

I don’t know exactly why I’m getting all journalistic about this, so without further ado here’s a screenshot and link to the graphic. Enjoy.

Classy Fridge Infographic, a photo by pjsherman on Flickr.

I just like this infrographic from our refrigerator. There’s something classy about the dress shirt cuff and suit sleeve. Also note the grey circles that call attention to the different ice cube maker switch states.

Not sure I get the warning though. “Ejector fingers”….riiiight…

Expensify Makes You Feel Good About A Password Reset, a photo by pjsherman on Flickr.

And this, folks, is how you put your customers at ease and make them feel better about interacting with your web app.

Lesson: If you have an opportunity to a) make your customers not feel stupid, and b) make it easy to fix a mistake, do it.

NYT Joinwall = Bad User Experience, a photo by pjsherman on Flickr.

I’d love to get a peek at the New York Times’ server logs and see just how many thousands of bounces this page generates every day.

Understand, it’s not a bad interaction design. It’s a fundamental misunderstanding of how to treat visitors.

In other words, the NYT is shooting itself in the foot and driving away visitors in droves.

How Not To Incorporate Graphs In Your Blog Post, a photo by pjsherman on Flickr.

Finding myself working in the info security world, I have little doubt that the content of this article is spot-on.

The problems lay with the graphs embedded in the article:

1. The graphs are unreadable at the embedded resolution.

2. It’s not immediately clear that you can click to embiggen them. You merely *hope* that you get the hand cursor when you roll over the images.

3. When you do click the image, you’ve lost context. Even a simple title or line or two of text recapping the post content prior to the image would help maintain continuity and context.

On the plus side, at least the embiggened image is not the same size as the thumbnail, which is probably in most people’s list of top 10 annoying web design flaws.