Henrik Olsen's shared items

You can take any user interface in the world, and whether it’s gorgeous and intuitive or ugly and clunky, there’s one unifying factor that will right pretty much any wrong: speed. Think about it. The load screen, the spinning beachball, the three-seconds of stutter before your click registers as a click--those are the worst experiences you’ve ever had with any user interface. And they’re all related to core responsiveness.

These tricks give Instagram users a feeling of constant responsiveness.

This principle has led us to build faster and faster computers and faster and faster data networks, to cut the lag time behind multitasking and enable computers to wait on users rather than users on their computers. Almost everything on a modern computer happens instantly. It’s great. But what about mobile phones? How do you give this instantaneous experience when tethered to a shotty 3G connection?

If there’s one company who could tell you, it’d be Instagram. And what do you know, Instagram’s co-founder Mike Krieger lifted the curtain on three of their backend (and UI) tricks that give the Instagram user a feeling of responsiveness, even when someone’s phone is trapped on a lousy connection. The ideas aren’t just clever; they’re so logical that you don’t need to be a coder to appreciate them:

Instagram Always Pretends To Work
What Instagram labels as “optimistic actions” really boil down to something far simpler: Always make it look like the service is working, even when it’s not. In your Instagram feed, this idea plays out to the “like” button. Have you noticed that whenever you click it, even deep down in a subway, that like button lights up? If your connection is broken, of course you can’t upload the bits of data to a central server to inform a friend that their photo of last night’s dinner was simply divine. But registering the action gives positive feedback to the user. It’s a lie, sure, but it’s a white lie. No one gets hurt banging their heads in frustration, and the like can always be uploaded later.

Loading Content Based On Importance, Not Order
When you open Instagram, you’ll spot content downloading incessantly. Even still, how can a spotty connection build a list of all your friends’ photos instantaneously? Instagram loads content, not by chronological order, but by importance. If a lot of friends have liked something, that photo will be loaded before a more recent shot by the same person that no one cared about. A user will eventually want the option to see everything, but in a pinch, they’ll have access to the content most important to everyone they know. It keeps the social service social.

Anticipating The User’s Every Move
Now if there’s any single slap-yourself-in-the-head lesson to be learned from Instagram, it’s that there’s no reason a computer should ever be waiting for the user to hit “submit” to start the data upload process. Instagram hides data transfers in screens that most people would call stagnant. For instance, when you’re captioning a photo for upload, Instagram will already be pulling potential stores and restaurants that match your GPS location for checking in, and they’ll have been uploading the photo itself (though not sharing it) since you selected a filter. This cuts down, or even eliminates, all possible lag time on the next few screens that the user visits. Just because you need a few moments to think of a funny caption doesn’t mean that your cell phone can’t tackle a few other jobs while it waits.

It just goes to show, still waters run deep. The simpler a UI feels on the surface, the more engineers that are swimming underneath, keeping it all afloat.

[Image: CHEN WS/Shutterstock]

"What we are trying to do is make an operating system and a computer more like a web service." That’s the vision Caesar Sengupta, product strategy lead for Google Chrome OS, laid out for me last year, as the company was gearing up to launch its own cloud-based operating system to compete with Microsoft and Apple. It was a big bet at the time, and one the search giant is still banking on: that consumers want the desktop to feel more like the web.

Windows 8 is a bet that users actually want the web to feel more like a desktop.

But lackluster sales signal that perhaps Google is taking the wrong approach, or at least that it’s too soon for such a radical change. Chrome OS is in the process of a major redesign--with a new interface called Aura. So perhaps it’s high time Google takes a few notes from Microsoft, maker of the world’s most widely used operating system, which is taking a decidedly different bet on its latest entry, Windows 8: that consumers actually want the web to feel more like a desktop.

In Windows 8, apps give you web access, while keeping out the web’s chaos.

That might sound like a subtle distinction but the user experience is night and day. If you’ve had the chance to play around with a Windows 8 laptop and Chrome OS netbook like we have, though, here’s the difference. Google’s mantra is "the web is what you make it." It’s based on a philosophy that says that anything you need to do--read the news, watch a movie, check your email, open a file--can be done, and done better, in the cloud by using Google News, YouTube, Gmail, or Google Drive. Most Chrome OS apps aren’t so much "apps" as they are web bookmarks: Google’s own YouTube "app" is just a link to YouTube.com, Netflix’s "app" goes to Netflix.com, and so forth.

It runs smoother, it’s more beautiful in full screen, it’s refined.

Microsoft, on the other hand, aims to press the power of the web into its desktop experience. Things we’d traditionally always pull up a browser to do--follow social feeds, check stocks or the weather, look up directions--have now been upgraded to lightweight desktop apps: more efficient than widgets, more practical than traditionally installed programs. Sure, they arguably perform the same functions, but the desktop experience is superior to the web: It’s integrated with the interface, it runs smoother, it’s easily accessible with other apps, it’s more beautiful in full screen, it’s refined. Rather than click an "app" on Chrome OS to go to Weather.com, the Weather app on Windows 8 tells me everything I need to do--more quickly and cleanly. The same is true for the Finance and Maps tiles, as well as the People app, which integrates many social networks--Facebook, Twitter, LinkedIn--into one experience.

Or, to crystallize the two company approaches in a different way, just look at Google Docs and Microsoft Office. Google believes it can take what have traditionally been desktop applications--office productivity programs--and convert them into web apps, so you’d write a text document online just as you would an email. Microsoft, inversely, envisions building the advantages of the web right into Office, so, for example, you can store all your documents in the cloud and still edit them offline. At present, if you had to write an important document for school, or fill out a complex spreadsheet for work, would you choose Google Docs or Microsoft Word and Excel? Your answer to that question should indicate how comfortable you feel not only about each product’s user experience, design, and stability, but about each company’s long-term goals.

To be fair, Chrome OS does offer some decent and real web apps. NPR and The New York Times have created interesting experiences, and there are a few tolerable examples from independent developers such as Weather Underground. But all in all, the web-based apps are simply too slow and too clunky to compete with apps we’ve seen already on smartphones, tablets, and now on desktops. No theme unites them. That might change over time, but right now, they just don’t play well together.

Chrome’s fake apps promise an ecosystem, then just send you out to the web.

Essentially, it’s the difference between running Twitter’s app on your iPhone, or pulling up Twitter.com in your mobile Safari browser: You’d prefer the former to the latter. And while Twitter, HBO Go, and DropBox look and feel and run dramatically different on the web, when ported to the iPhone in app form, they all appear born of the same experience, with the same design language, principles, and DNA--thanks to Apple’s high standards.

Microsoft almost once went down the same road as Google.

Microsoft has clearly learned this lesson from Apple, and is now approaching the design for Windows 8 in the same way Apple did for iOS. Interestingly enough, Microsoft almost once went down the same road as Google in seeking to make the desktop feel more like the web. Back in 2010, when the company was showing off Internet Explorer 9, it imagined a world where you’d simply pin a web app to your taskbar. The problem was, like on Chrome OS, these "apps" for eBay, Hulu, and Facebook were just links to their homepages.

Thankfully Microsoft pursued a different approach. Now, when a third-party developer like Box.net wants on Windows 8, it builds a Metro-style app that is well integrated with the platform’s user experience. Compare that to Box’s Chrome OS "app," which, as you might guess, is just a link to Box.net.

Chrome simply takes you to Google Maps… …while Windows 8 creates a beautiful app experience. Products from Google always feel as if they’re built in silos.

This speaks to the larger issue of how Google thinks about product and design. Products from Google always feel as if they’re built in silos. No one is doubting that Google is capable of great or popular products: Search, Gmail, Chrome (the browser), YouTube, Android, Maps. But they feel disparate. So while Microsoft and Apple have long worked to provide a common thread across their product lines, it feels like an afterthought for Google to decide, only recently, that Google+ should be the "social spine" that unites all its products; that Google Play should be its sole media center; and that Android and Chrome OS should be the software it all runs on.

It seems complicated, slipshod even. How will its desktop experience, Chrome OS, merge with its foreign mobile software, Android? What happens to the company’s "social spine" if Google+ fails? Where does the Chrome Web Store fit into Google Play, already a messy experience that Google sloppily jammed together with the Android Marketplace, Google Music, and Google Play Books?

Apple has long tied its products together well into straightforward families of software and hardware: iPhones and iPads and iMacs; iOS and Mac OS X; the app store and iTunes. Microsoft, of course, has had trouble with this process before, but it’s certainly worked hard to make Windows, especially now with its fresh Metro design, the unifying force across products like Bing, Office, Xbox, and Windows Phone.

Google ought to take cues from both companies on this front. And judging from the initial designs of Chrome OS’s latest build, Google does seem to be doing so. Its new Aura interface looks remarkably like the Windows 7 taskbar or the Mac OS docking bay.

[Image: Christian Delbert/Shutterstock]

Last week, I attended a conference presentation where a team presented findings from their A/B Testing efforts. It was a cute presentation where they posted the control and test variants, then asked the audience to pick which one “won” the A/B test. They compared the audience answer to the variant that demonstrated the best increase in the conversion rate (sometimes as little as 0.9%, which the presenters declared as a “huge increase”). For dramatic effect, the variant that won often broke many commonly accepted design principles, supporting their case that A/B testing trumps our traditional rules of good design.

Maybe so. Yet, that wasn’t the part that interested me the most. What interested me was something completely different.

A few months ago, I had conducted usability tests on the online service produced by the presenters’ company’s — the very one they showed in their presentation. Our study looked at several sites, asking shoppers to buy the products and services offered, looking for what each site does well and where their weaknesses were. It was really insightful on many different levels.

In our study, we watched more than a dozen of the presenters’ company’s own customers attempt to buy products. While many were successful, a surprising number weren’t, even though this company is the biggest in its industry (and hailed by many as the most successful). Their site looks slick, but when folks sat down to use it for its primary goal, it’s design put up a ton of frustrating obstacles.

In many cases, the users thought they ordered the product they wanted, only to discover upon receipt that it wasn’t at all what they wanted. As we watched those shoppers make their orders, we could see that they would not get what they wanted. Yet, the design of the site was so convoluted and confusing that the shopper never detected the problem until it was too late.

That’s why, when I was sitting in the conference presentation, I was quite surprised by what the presenters showed. All the examples were not things that made the shopping experience difficult. They were not things that were giving their customers problems. They were little things that, if dramatically improved, wouldn’t, in my opinion, affect the overall experience of the site or the satisfaction of customers buying their products.

I get that the presenters probably didn’t want to reveal their secret sauce to an audience of a hundred or so user experience professionals who might (like me) be working for their competitors. Maybe they were also working on the problems I saw in our study, but didn’t want to talk about that publicly.

However, the A/B tests they presented showed they were applying a ton of effort to optimize things that weren’t close to the things we saw preventing sales on their site. If the message was that A/B testing helps, I didn’t get that because I saw them futzing around with tweaking insignificant button text when there were huge deficiencies in the design that they still haven’t resolved.

Maybe the presenter’s team is working on these things that are wrecking their shopping experience? Maybe they aren’t using A/B tests for these hard problems? I don’t know.

Yet I’ve seen this before: A/B tests are fun and they easily become part of the dog-and-pony show. They give numbers and a clear, easy-to-see winner. They get execs and stakeholders excited, because “improvement” is easy to spot. But are we doing damage to our mission when we give so much attention to these tests of trivial design changes?

Part of this might be because the presenters were determining their winners by using the wrong measure. Conversion rate has lots of problems as a measure of success, but its big crime is that it focuses purely on the pressing of the purchase button. It doesn’t measure whether the users are happy with that purchase or whether they are delighted with the product they finally received and the way they received it. It’s easy to optimize for conversion while sacrificing a great experience. Conversion ≠ Delight.

We should be careful about how we show off tools like A/B tests. Someone might think we don’t actually care about the users’ experiences, as we optimize for overly simplistic measurements.

Brian Pagán of User Intelligence in Amsterdam argues that touch-free gestures and Natural Language Interaction (NLI) may open up further paths toward a true Natural User Interface (NUI).

“User interfaces for computers have come a long way from vacuum tubes and punch cards, and each advancement brings new possibilities and challenges. Touch-free gestures and natural language interaction are making people’s relationship with computers richer and more human. If UX practitioners want to take full advantage of this changing relationship, our theories and practices must become richer and more human as well.”

Read article

Jeff Atwood starts his article This Is All Your App Is: a Collection of Tiny Details as a post about cat feeders, but stick with it. It’s gold:

Getting the details right is the difference between something that delights, and something customers tolerate.

Your software, your product, is nothing more than a collection of tiny details. If you don’t obsess over all those details, if you think it’s OK to concentrate on the “important” parts and continue to ignore the other umpteen dozen tiny little ways your product annoys the people who use it on a daily basis – you’re not creating great software. Someone else is. I hope for your sake they aren’t your competitor.

∞ Permalink

Jason Fried in Why is Business Writing So Awful?, a good post on caring about the words you use to describe your product:

Unfortunately, years of language dilution by lawyers, marketers, executives, and HR departments have turned the powerful, descriptive sentence into an empty vessel optimized for buzzwords, jargon, and vapid expressions. Words are treated as filler – “stuff” that takes up space on a page. Words expand to occupy blank space in a business much as spray foam insulation fills up cracks in your house. Harsh? Maybe. True? Read around a bit, and I think you’ll agree.

∞ Permalink

Personas are one of the most controversial tools in the professional UX toolbox. People either swear by them or swear at them. When they work, they are awesome, but when they fail, well, they fail gloriously.

For the past few years, we’ve been researching why so many persona projects have such dismal results. We discovered there are basic factors that are critical for a project’s success, yet most teams ignored them.

In today’s UIEtips, I look back at an article that discusses five of these factors. We look at the role of research, who should be involved in the personas, and other essentials that differentiates between a successful persona project and a failed one. I’m sure you’ll find it helpful for planning your projects.

Read the article: Five Factors for Successful Persona Projects

If you’re looking to get more out of personas, you’ll want to tune in to Whitney Quesenbery’s May 22 Next Step virtual seminar, 7 things You Can Do with Your Personas. Whitney will tell you the 7 characteristics of effective personas and describe how to use them for improving user experiences. Learn more about this virtual seminar.

Have you tried to use personas in your projects? What have you found to be the keys to your project’s success (or the reason for your project’s demise)? We’d love to hear your thoughts below.

In the early 90’s, Jakob Nielsen declared in-person user research as state of the art. “User testing with real users is the most fundamental usability method and is in some sense irreplaceable, since it provides direct information about how people use computers [...]”.¹ Sometimes in-person user research can be logistically impractical or cost prohibitive, so remote user research is often employed as an alternative. As well, companies that specialize in user research often combine both in-person and remote user research.

In-person user research has been around the longest, and is still widely used as a great way to gather feedback on websites, advertisements, or software. In-person research usually involves letting users perform tasks on a computer while asking them questions,...read more
By Sabina Idler

Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.

There’s a great line in the Postal Service song, This Place is a Prison, that states, “It’s not a party if it happens every night.” Although the singer specifically refers to a life of too much partying, it’s a good reminder that anything that happens too regularly loses its significance.

This same concept holds true in our navigation. As humans, our brains are wired to notice contrast, things that stand out from the norm. It’s why photocopiers employ big, green start buttons. It’s also the reason that the interface on my smartphone offers a collection of colorful icons instead of just text links.

When looking for Yelp on my iPhone, I’m not scanning for the word “Yelp;” I’m scanning for a red square. This is a much faster mental calculation than exhaustively reading each application’s name. It’s clear in both cases that the designers have put prioritization and visual language to work.

Defining our terms

Prioritization is the act of giving an element prominence relative to its importance in a (navigational) hierarchy. With regards to a navigational hierarchy, this is done by first considering each element’s relationship to its user’s goals.

Prioritization is the reason why items like “Settings” or “Profile” are typically less noticeable than the primary actions on a site or application. It can be communicated in a variety of ways, but essentially prioritization means that items of more importance should call more attention to themselves.

Visual language, on the other hand, involves using visual elements to convey meaning. Often times this is done through illustration or iconography, though any visual cue that reinforces the function of an element contributes to that application’s visual language.

By way of contrast, consider text-only navigation structures – especially those that use the same font size. Without introducing/incorporating a rich visual language, these structures don’t reach their fullest communication potential. Simple visual cues go a long way towards helping users parse information because they facilitate recognition over recall.

Hobgoblins

Unfortunately, designers often do the exact opposite in their designs. In their desire for consistency they often force users to carefully scan each item until they find what they’re looking for. Emerson once termed this kind of foolish consistency “the hobgoblin of little minds.”

Let’s take a look at a few bad examples:

Craigslist

Craigslist offers both little prioritization and a non-existent visual language. Users are required to read nearly each entry on the home page before finding the link they’re looking for.

Jimmy John’s Website

Every time I order a sandwich on the Jimmy John’s website, I find myself carefully re-reading each navigation item. For the sake of consistency, every navigation item looks the same: red, black, and white. The sandwiches at Jimmy John’s are great; the navigation, less so.

Microsoft Metro UI

One of my favorite recent violators is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will be arriving soon on the desktop with Windows 8. By making the home screen tiles all the same color with white lettering and white icons, the user has to read each tile instead of responding to unique icons and colors. (John C. Dvorak recently wrote a great piece about this in PC Magazine.)

Rdio iPhone App

The Rdio iPhone App interface makes the same mistake as the Microsoft Metro UI. While they do incorporate iconography, the consistency of color and size of the icons forces the user to closely scan each item. In an otherwise beautiful and successful app, I find myself repeatedly scanning the home screen options to find my desired action.

Apple iTunes

In Apple’s iTunes 10 (as well as its Finder), the sidebar items were converted from color to grayscale. In bringing consistency, Apple removed the contrast between each entry, thus requiring users to scan more closely and read labels to find the desired content. Previously, if you were looking for podcasts, you scanned for the purple icon. Now you have to scan for the word “Podcasts” because the icons run together.

Path Sliding Menu

The Path iPhone app uses a similar sliding navigation to that found in Facebook app. There is one important difference, however, in that Path does not use icons with labels whereas Facebook does. Each time I open the Path navigation, I have to read each entry until I find the one I want. With Facebook, I’m reacting to the visual patterns and selection is much faster with less cognitive load.

Learning by example

So now that we’ve seen them, can we avoid these hobgoblins of consistency and create more effective navigation structures? Let’s look at some good examples:

Mint

Mint has long been viewed as an exemplary user experience and they have some nice touches in areas that use highly visual navigation. The “Ways To Save” tab in particular relies on a thoughtful collection of icons for navigating.

ESPN

The ESPN site has a variety of different navigation styles throughout, but I find the hover state for the primary navigation items to be particularly effective with its combination of photos, videos, and various text weights.

Volkswagen of America

When browsing the vehicle model options on the Volkswagen of America website, the dropdown navigation menu combines prioritization – Sedans before Convertibles – with visual language – an iconic version of each vehicle in varying colors.

Twitter Web App

The Twitter web app has a very simple interface with only a handful of links, but each is accompanied by a distinct and meaningful icon to set it apart and the most important action, composing a new tweet, is set apart in bright blue.

Instagram iPhone app

The buttons on the Instagram app effectively combine both prioritization and visual language. Each button is identified by its associated icon and the most important one (the camera) is centered and stands out with a blue background.

EPB Fiber Optics

The EPB Fiber Optics website makes good use of varying levels of priority within the top level navigation. The primary navigation items are all in black with the most important option (“Order Now”) set off in blue.

Guidelines for success

We’ve seen examples both good and bad, now let’s try to generalize a bit. The following guidelines can help us create more prioritized, visual navigation schemes:

1. Pay attention to User Goals and/or Conversions

   When trying to determine how to prioritize and bring meaning to your navigation, think in terms of your users’ primary goals and/or site conversions. Make those elements prominent and easy-to-understand.

2. Be Inconsistent

   Take inspiration from the photocopier: instead of striving to give all navigation items the same size and appearance, leverage inconsistency in your design so that the most important items receive the most visibility.

3. Use Visual Language, not just Textual

   Where it makes sense, use icons and other visual cues to bring additional meaning to your navigation instead of using only text. This will allow the user’s brain to process more quickly by relying on pattern recognition instead of reading.

4. Size (and Color) Matters

   Use size and color distinctions to differentiate more important links or buttons.

Final thoughts

With so many aspects to consider when designing navigation, it can be easy to fall back on convention and create more work for your users as a consequence. While there will always be situations where using these techniques doesn’t make sense, keep in mind that differentiation can be a powerful tool.

Not all navigation is created equal. By employing prioritization and visual language in your navigational elements, you’ll help users forget the navigation altogether. They way they can focus on the content they’re really after.