Conversion rate’s big crime is it focuses purely on pressing the purchase button, independent of the quality of the experience.

And:

It’s easy to optimize for conversion rate while sacrificing a great experience. Conversion [does not equal] Delight.

This mildly irritated me and we ended up exchanging tweets (shown below), but it rapidly got the point where I couldn’t explain things in 140 characters.

I currently lead a UX design team on a large ecommerce site so I’ve done a bit of thinking about conversion rates, and while I’m loath to disagree with someone of Jared’s standing, suggesting that conversion isn’t critical makes no business sense at all. As UX designers in the commercial sector we’re here to make money for our clients or employers. We’re not here for the users, we’re paid because the company believes that a better user experience with help them get more money from customers.

Conversion is just about the critical measure for an ecommerce site. We get several million unique visitors a month, not all are there for shopping – in fact many are existing customers coming to manage their services or pay bills, but we’ll get to them later – at that scale even a small increase in conversion can have big implications for the profit being made, but that’s beside the point.

The point is: without conversion you can’t deliver a good user experience to your customers because you don’t have any customers! We put a lot of thought and time into delivering a great experience for new customers—not because we are kind, but because it means they are more likely to stay around spending money—but if they don’t convert, they don’t get out great user experience. That’s a UX fail. If people don’t buy your product it just doesn’t matter how good or bad it is.

Increasing conversion means you make more money and have the chance to deliver a good user experience to more people. This means it must be the primary focus of any ecommerce site, everything else can come later.  You might argue that it’s all a bit chicken and egg, where you need to focus on creating a good product so that you get good reviews and good word of mouth and happy customers. This is true, but why do you want good reviews and happy customers? So people buy stuff. So next time they need a similar product they buy from you. So they convert. If they don’t click the “pay” button with the correct credit card details what’s the point?

Pay now! is the fulcrum through which all ecommerce UX flows. All user experience before a customer presses “pay now” is leading up to getting them to press that single button. All user experience after they press it is leading up to them pressing it again, not pressing it on competitors site or telling their friends to press that button.

My irritation with Jared’s tweets was because it seemed to suggest that UX existed separately to commercial reality*. This would open the door to a UX design disappearing up it’s own backside very quickly.

*I’m sure Jared would never think this, but others will be only too willing to.

There is a school of thought going around saying that buttons should be avoided in interface design. This makes a lot of sense for touch interfaces, but before we get rid of them we should try to understand reasons buttons on interfaces are so successful in the first place. Until recently we’ve (mostly) only been able to interact with computers using physical buttons, so building digital interfaces out of skeuomorphic buttons works well- the UI is a direct metaphor for the input mechanism. Creating a button-less interface on a non-touch screen is likely to be more challenging.

Thought one point one: Mice are mostly just moveable buttons whose function changes according to its position.

Thought one point two: Are buttons skeuomorphic? They don’t normally get the designer ire reserved for the like of some of Apple’s apps. But yes, they redundantly mirror their real-world equivalent just to make the user feel like they are using something physical.

Thought two: There’s no such thing as ‘authentically digital’

I’m a big fan of Microsoft’s Metro interface style. It’s big, bold, flat, modernist design eschews all trompe l’oeil – Microsoft call this ‘authentically digital’. Being authentically digital is a seductive idea, but Metro is no more authentic than a DOS command line. The command line is an ‘authentic’ interface for machines where the main input method is keyboard, button based UI work well for machines where the main input method is mouse buttons and flat UI designs are a natural fit for the flat physically unresponsive input method of touch screens.

However if there’s no such thing as “authentically digital” there is certainly the possibility of using an inappropriate interaction metaphor.

Thought two point one: Digital authenticity is probably the same sort of deceit as the idea of NUIs or “natural” interfaces. That’s not to say it isn’t a useful deceit.

Thought two point two: In the near future, 3D gestures made available by the likes of the Kinect might well be the ‘natural and authentic’ input mechanism for 3D displays.

Now responsive design is the new black, I’ve been doing a lot of browser resizing to check how the pages behave at various device widths. But it’s frustrating to have to guess at the screen width your aiming at. Yes, there are browser plugins that resize your browser accurately, but they are slow and cumbersome if you need to test a variety widths.

So I’ve put together a cutting-edge technical solution consisting of a desktop background image with width guides marked on it. Instructions for using it are:

1. Set the image to be your desktop background (Make sure that the image has been cropped to exactly your screen size)
2. Position the browser on the left edge of your screen
3. Resize the browser from the right

When the outside right edge of your browser in on the mark, the your browser’s viewport will be the labelled width.

Which browsers does it work with?

Chrome and Firefox on Windows 7. Those are the browsers I use; other browsers and operating systems probably have different widths of browser chrome. If you want to use this idea for other browsers and OSes then feel free to download the .eps and adjust it to suit your system.

On Win 7, Chrome’s chrome is 2 pixels narrower than Firefox’s so if you’re using Chrome you want to aim for the left edge of the central line. If you’re using Firefox, use the right hand edge. (Conveniently the line is 2 pixels wide :-)

Why is each width marked twice?

I’m glad you asked… Sometimes web pages have scrollbars sometimes they don’t. Use the upper, wider mark as a reference when your web page has a scrollbar and the lower mark when it doesn’t. The browser viewport will be the same width in both circumstances.

What about my desktop size?

For this to be useful for you you’ll need to have the background image exactly the size of your desktop. I’ve provided a few of the most popular desktop sizes, but it’s not exactly hard to crop or extend the image to the dimensions you need. (If you don’t have Photoshop, Paint.net is good for the simple image manipulation)

Why isn’t the width of my mobile device marked?

Because these are the sizes I found useful. There’s about a gazillion devices out there – the sizes marked here should cover at least 99% of mobile visits to a website. If you want another size marked or different labels, download the .eps file and roll your own.

What about device pixel ratios?

Yep. Various devices use various device pixel ratios. The number of physical pixels on the screen may not mean much about how a website gets displayed. It’s a minefield. This isn’t going to help you work it out.

I want to use it with my background image

If you work with images or designs it should be illegal to have anything other than a plain, neutral, grey background on your desktop.  Anything else will colour your opinion of the images you should be looking at. But seeing as I don’t rule the world quite yet feel free to download the .eps and overlay the guides on whatever you like.

Downloads :-)

So here are the files, I’m putting them up here under a “feel free to do what you want with it but a link back to me would be nice if you publish anything” type of license.

• 1920 x 1280
• 1920 x 1080
• 1680 x 1050
• 1600 x 1200
• 1440 x 900
• 1366 x 768
• .eps (in a zip file)

When the product was one for which public consumption is desirable the presence of the Facebook and Twitter icons made people 25 percent more likely to purchase. But when the product was more private in nature the icons suppressed purchase intentions, also by 25 percent.

Conventionally we see social media icons as enabling customers to spread the word about products, invaluable word-of-mouth direct from our marketing pages. Twitter and Facebook buttons provide a channel that allows visitors on our sites to influence their network, but this study shows that this channel can work in both directions. Social media icons make visitors feel exposed to the approval or disapproval of their network—even if they don’t share anything.

The icons become a focal point for social media anxiety, using them is inviting peer pressure onto your page. So we need to ask the question “does this perceived peer pressure work in our favour?”. If it does maybe a powerful way to increase conversion, if not, conversion will drop.

Being watched

It’s well understood that being watched makes people modify their behaviour.

When a plate of doughnuts is set out in a common area, office workers will take fewer if there are paper cutouts of eyes nearby. (Cognitive Surplus, Clay Shirky)

Social media icons appear to act in similar way to the paper eyes guarding the doughnuts—they make people feel watched.

What can we do about it?

There’s not really enough detail in the report to make any strong recommendations. But we should understand that social media icons may have a broader psychological affect than we might have previously considered and be very careful about where we place them.

And, however much clients don’t want to hear it, this report raises the possibility that the best social media for some products might be none.

It’d be interesting to see the results of this study broken down into people who use Twitter and Facebook and people who don’t. Is this effect only felt by social media users?

Resistance to disruptive technologies is common. But why can’t we see progress more clearly? Paraphrasing a million conversations going on in 2011:

“Kindles are nice, but I’d never get one as I like the feel of a book in my hand.”

Then 6 months later:

“Kindles are so easy. I can’t believe I used to carry a heavy book to work every day.”

Or a argument conversation with my brothers a while back about personal interaction in shopping; they argued strongly that people like, no, expect and demand personal interaction with a shopping assistant in supermarkets. But themselves, given the choice, both use the impersonal bleeping, touch screens of automated checkouts. Because it’s quicker.

Despite what we might think, speed trumps personal service, convenient form factors trump pleasing physicality.

It was too long ago for me, but I imagine there where the same stuckist arguments about vinyl and CDs. There certainly were about film cameras and digital cameras; digital would never be able to replace film—it just doesn’t have the same ‘grain’ as real film. But 15 years later, it turns out that the grain that some photographers took so much care over in their darkrooms was entirely unconnected to taking great photographs.

This kind of resistance is common. I imagine we’ve all had it some form or another. The reason is that we confuse incidental attributes of the current technology with being qualities essential to the experience. It’s not that we just don’t like change but we think the change will diminish our experience by removing things we feel are important. It takes some time for us to understand what our basic needs are and separate them from an entrenched technology.

The longer a technology has been around the more likely it is for its users to conflate their needs with attributes of that technology. The groove in the vinyl was high quality music. Turning a page was reading. A friendly chat with your local grocer was shopping. These are things that had no alternative for generations, so they became entrenched; they became part of how we understood what we needed.

So what?

A fair question I suppose, but not what I was hoping for when all I asked for was some proof reading. So this:

• An appreciation of this will allow us to design better solutions for encouraging people to adopt new technologies or designs.
• Challenging ourselves to guess what tomorrow might strip from our designs and experiences might lead to better, simpler, longer lasting designs. Which parts of our designs will be rendered quaint and unnecessary in a few years?
• It also goes some way to explain skeuomorphic designs. Maybe some (bad) designers feel that faking the attributes of the old technology will allay user’s doubts about the change. (I don’t believe users are that gullible and I’m sure people would be better served by designs that highlight the benefits of the new technology by being “authentically digital”.)
• I’m going to guess that it’s these discarded attributes of technology that we once thought so essential that go on to fuel nostalgia. The discarded attributes are nice—physical objects are nice but, as it turns out, just not as nice as having easy access from hard drive, a friendly chat is nice but not as nice as shorter queues. So tapping into this historic but orphaned niceness makes sense if you want to evoke past experiences of technology. (For digital products I’m not sure that there’s a difference between skeuomorphism and nostalgia.)

Crystal ball gazing

So what are the things we think we can’t live without but are really just attributes of current tech? I’m no futurologist, but here are some not very profound or original ideas from the top of my head:

• Browsers? I’m sure how we access the web will be radically different in a few years and I’m not sure browsers will survive.
• Email? I hope so anyway.
• Telephone numbers are beginning to go away but not fast enough.
• Mobile phones? One day soon we’ll give up the pretence that mobiles are still phones.
• Car steering wheels? Self-driving cars are making fast progress.

Does this make any sense? What would you add to the list?

Sarkozy warns of disintegration,
Inquiry into unfair exam advice,
Child killer Black gets 25 years,
Lodger quizzed on double killing,
Dying woman calls for law change,
Double decker destroyed by fire,
Twitter did not incite rioting.

It almost made sense. I was just reading through them without any reflex to click. Links need to look like links. If not they might work for the aware and the awake, but a lot of browsing happens in people’s half-focused down time or in the evening with a beer and one eye on Master Chef.

So my tip of the day is to design for knackered, half-cut, attention depleted zombies.

“Hi”

“Hi, I’d like to buy doodad”

“Great, here are the doodads we stock, we think this one is especially good.”

“Thanks, I’d like more details on that one”

…. etc.

It’s not exactly rocket science but hopefully someone might find it useful. Callouts are probably an oddity in the Axure world, as Axure is more based on prototypes rather than wireframes. But at work we use Axure more for traditional wireframes than prototypes so need callouts for on-page documentation. In this environment Axure’s killer feature is it’s SVN based system for collaborating on a shared file. (Try getting three people to successfully update a 100+ page Visio document at the same time without errors…)

Anyway, here are some simple callouts in a widget library that you might like to use. I’ve made them a light blue, similar to the Konigi OmniGraffle wireframe stencils as it seems that that is what many people think callouts should look like. As it happens, we use orange callouts but it’s easy enought to edit the library to have whatever colours you like and change the callouts’ colours in your Axure document.

Get it here: EE_Callouts.zip 

(It’s under the Creative commons attribution license so use it for whatever you want, but if you reshare it please give me a credit.)

I was recently reminded of a thought that’s been knocking around in my head for a while: when will we stop learning to write? When will children stop being taught to write with a pen? Will, in the not-too-distant future, pens and pencils become quaint antiques, as we see cassette tapes or non-digital cameras? If you where a toddler today why would you bother learning to write? It’s hard, messy, frustrating, slow and largely irrelevant to everyday life. Signing my name is about the only time I write anything now. If I have to write something longer it takes a few lines for my fingers to remember what they’re doing—it’s surprisingly easy for us to forget even skills we take for granted.

I’d guess everyone is more or less happy with the idea (if not reality) of a paperless office but less so the corollary of a penless office. But if (when?) people stop learning to write, it’d follow that they’d stop buying pens. There’d be no more desk draws full of half used ballpoints.

I still draw and sketch (for work and occasionally fun), but with touch screens undoubtedly becoming ubiquitous, will our children be given a iPad and drawing app instead paper and crayons? If so will we forget how to make any kind of physical mark in the world? The death of physical mark-making would be a pretty significant moment in our culture. It’s what humans have been doing since we settled down in caves, probably before. At least 32,000 years of leaving marks behind in the world would end.  We often think of digital as being more permanent than the physical, but really what will be left in 20,000 years?  30,000 years? I could go and carve my name on a remote, sheltered, rock face and have reasonable expectations that my writing would out survive our culture. I think it’d be a safe bet that anything written on this blog won’t be around for those time-scales.

I’m still unsure exactly what a NUI is…

..but this video, from last year, of Bill Buxton talking about touch interfaces is worth a look: http://channel9.msdn.com/posts/TechTalk-NUI-Whats-in-a-Name

Directions  = recommendations?

People asking for directions to location can be seen as a ‘vote’ for that venue: http://glinden.blogspot.com/2011/05/value-of-google-maps-directions-logs.html. There’s probably a lot in it but the semantics of “I need to get to … ” are quite different to “That place was great!”. Not least as one happens before the event and one after.

Boris bikes API

Boris bikes finally open up their API : http://www.tfl.gov.uk/tfl/syndication/feeds/cycle-hire/livecyclehireupdates.xml

W3C DeviceOrientation Event Specification

http://dev.w3.org/geo/api/spec-source-orientation.html

It’ll probably be a while before this is usable in real websites, but it’d be super useful.

Custom vibration patterns in iOS5

http://www.gottabemobile.com/2011/06/10/ios-5-lets-you-customize-your-own-vibration-patterns/

I’m not totally clear how useful this implementation is, but it’d be interesting if vibration was extended with richer ways to provide feedback to users of mobile devices.

Windows 8 and OSX Lion move towards touch

http://www.fastcodesign.com/1664020/how-apple-and-microsoft-borrow-from-smartphones-in-new-desktop-uis

I’d put a different take on it than Fast Co.—it’s not so much about borrowing from mobile devices as moving towards touch-based interfaces. Both companies have had to address how touch UI works on mobile platforms so it’s natural that they will carry that learning forwards as the PC operating systems try to cater for touch. It’s not so much mobile vs desktop as it is touch vs mouse.

Persuasive design is the new trendy

http://uxmag.com/design/why-persuasive-design-should-be-your-next-skill-set

Lots of talk about persuasive design, but I’m so fed up with talk of ethics in design/UX/creativity. If I’m working on a ecommerce website it’s my job to increase the likelihood of someone buying something. There’s no ethics involved in that. If the site was a book shop specialising in hate literature then there’d be a question of ethics as to whether I wanted to work for them, but that’s a question entirely outside design. If you think that using design to get people to do something or change their behaviour has ethical issues you need to grow up.

Semantic web a-go-go

http://www.schema.org/docs/gs.html

Google, Bing and Yahoo throw their weight behind some structured markup. If they can’t make it work no one can. There’s a need for this, even if it’s imperfect, so I hope it gets some traction.

Content management systems

http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/

A nice look at CMSs. CMSs are important and often undervalued. If you’re building a content based site, the IA and UX of your CMS is as important as that of audience facing site. Your users want nice content so give your content creators a nice site to create content in and they’ll create nicer content.

And finally…

http://www.datacollective.org/sparkblocks.html

Because we all want more graphs in our tweets.