August 19, 2013

New UI Pattern: Website Loading Bars

Here’s an emerging UI pattern: a web page loading bar. Unsatisfied with progress indicators provided by the browser, some sites are implementing their own ones to show the load status of the next page. The progress bar appears as a thin line overlaying the content, sitting right underneath the browser toolbar, growing in width across the page as the next one loads.

Here is a screenshot of the bar on Medium (the thin green line highlighted at the top): loading bar

And here is a very similar implementation on YouTube, red this time, with a subtle glow effect: loading bar

I’m not sure what to make of it. Does a web page really need a loading bar, especially that the browser already has a loading indicator of its own (and in the case of Safari, a very similar looking progress bar)? Perhaps a case could be made for a reduction in perceived load time, and I am sure Google are testing this on YouTube (i.e. see if the bar reduces the number of abandonments, which it very well might), but for something like Medium where the content is mostly text and the load times very short it seems a little superfluous — and even in the case of YouTube, the load indicator is only for the page, not the actual video, which starts streaming only after the page loads. Still, as a UI pattern it is an interesting and subtle way to show load progress on a page.

As an aside: if you’re implementing progress bars, check out this paper by Harrison, Yeo and Hudson, which reports on their study of progress bars that sought to find the style to best reduce perceived time. The optimal style they found was a backwards moving and decelerating ribbed progress bar, which made the load time appear 11% faster than a solid colored bar.


As commenters have pointed out, the reason to use the bar is because you’re switching content via JavaScript rather than loading a new page. This makes sense since the browser’s own loading indicator may not get triggered. Without the loading bar or some other load indicator it may appear that the page is stuck rather than fetching new content. Ideally we would want to delegate the indicator to the browser, but if that’s not possible this is a nice UI pattern we can use.

July 16, 2013

Authentic Design

Smashing Magazine has just published an article I wrote titled Authentic Design in which I present my take on the flat design trend. Here’s the theme:

The recently popularized “flat” interface style is not merely a trend. It is the manifestation of a desire for greater authenticity in design, a desire to curb visual excess and eliminate the fake and the superfluous.

In creating new opportunities, technological progress sometimes leads to areas of excess. In the 19th century, mechanized mass production allowed for ornaments to be stamped out quickly and cheaply, leading to goods overdecorated with ornament. A similar thing occurred in recent years, when display and styling technologies enabled designers to create visually rich interfaces, leading to skeuomorphic and stylistic excesses.

In its desire for authenticity, the Modern design movement curbed the ornamental excess of the 19th century, making design fit the age of mass production. Today, we’re seeing the same desire for authenticity manifest itself in the “flat” trend, which rejects skeuomorphism and excessive visuals for simpler, cleaner, content-focused design.

Read the rest.

May 30, 2013

Google Authorship Search Listing Blindness

Here’s an interesting way a simple UI addition can backfire. Google Authorship is a service from Google that lets you link your site to your Google+ profile. The “benefit” of doing so is that you get your Google+ picture displayed next to your listing on the Google search pages, which looks like this:

Google search result with Google+ picture next to it

After using Google Authorship on his site, Alex Yumas from JitBit was shocked to discover that their traffic fell by 90%. The site in question still held the first result on Google for the relevant search query, but having a little Google+ avatar picture next to the result text was stopping people from clicking.

Why did people start ignoring or avoiding the first result? I think this is a case of sending the wrong signal to the user. The little avatar by the search result suggests the result is tied to social media — i.e. some entry on Facebook, Twitter or Google+ — or perhaps a blog post, but not a product page. If people were searching for an article, a link of this nature might make sense, but those looking for a product page will mentally block it out.

As Alex writes, he even found himself looking past his own site in the results:

Maybe it’s because people are used to filter out the ADs, in other words filter out the first couple of results that look unusual. I just did that myself – after looking at the page I even thought for a moment – “whoa, where’s my page, it’s not even in the SERP, where is it?”

On first glance, adding an avatar might make your result stand out, especially when nobody else has one, but the fact that it stands out does not guarantee that it will also get processed. In this case, standing out actually led to the result getting dismissed right away.

That said, while JitBit lost traffic for some pages, others actually gained clicks, so it really depends on the context of the search. Read the rest of his post for suggestions on the types of pages Google Authorship could work for.

Update 2013-06-01

Matt Cutts, the head of Google’s webspam team, has weighed in on the issue over at Hacker News saying that the decrease in traffic was due to Google’s Penguin webspam algorithm update rather than Google Authorship. I doubt the Authorship change had no effect, but if Matt Cutts is right then its impact may not have been as severe.

January 7, 2013

When Infinite Scroll Doesn't Work

Dan Nguyen has an interesting writeup of Dan McKinley’s talk about why the implementation of infinite scroll at Etsy didn’t work. Essentially what happened was that Etsy had spent time implementing an infinite scroll interface (i.e. a list of results that automatically keeps loading more items as you scroll to the bottom of the list) before first testing their assumptions that more search results at a faster rate would boost user engagement. They found that the new interface just didn’t perform. Although the amount of purchases stayed roughly the same, user engagement has gone down — now people weren’t using the search so much.

I don’t think speed and volume are at fault here. I think the reason it didn’t work was because the kind of interaction the user has with the data is much more suited to a paginated interface than an infinite scroll. In the case of something like Etsy, the user is searching for something in particular within the list of results. In the case of something like Twitter, the user is scanning and consuming the flow of information. In the latter case, infinite scroll makes sense because the user is essentially reading or scanning down the list of tweets until they get bored. In the former case the user isn’t just linearly consuming the data, they’re mapping the information in their mind, trying to remember the items they like or think are worth researching further.

What this means is that people will want to go back to the list of search results to check out the items they’ve just seen, comparing them to what else they’ve discovered somewhere else down the list. Having a paginated interface lets the user keep a mental location of the item. They may not necessarily know the exact page number, but they will remember roughly what it was, and the paginated links will let them get there easier. Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one.

McKinley’s original assumptions — that users wanted more search results faster — were actually right, and their tests on each of these metrics individually have verified this (albeit with insignificant gains). A paginated interface that loaded more results faster would have worked a little better than what they had before. What they did wrong was use a new interface pattern in the wrong context, thereby upsetting other browsing mechanisms that people have relied on when using their site. An infinite scroll works well for something like Twitter where you’re linearly consuming an endlessly flowing stream of data without looking for anything in particular, but for search results pages where people are looking for a specific item and where the location of all the items the user has viewed matter, the paginated interface wins out.

December 6, 2012

Watching Them Struggle

You’ve probably watched somebody who is not technically savvy trying to operate an interface new to them, likely with little success. Maybe that interface was yours. You’ve spent countless hours cutting that thing down to the basics, refining the copy and making everything crystal clear, and yet, you watch with bewilderment as the user before you struggles and stumbles across the screen, doing everything possible to go in circles around the interface element they actually need, which to you seems blindingly obvious.

As I read through Robert Greene’s new book, Mastery, a realization struck me. In the book, Greene explores the process of becoming a master at a particular skill or profession, which, roughly summarized, involves practicing it for so long that everything involved becomes internalized and cross-linked in your brain, which then allows you to use this experience intuitively, rather than consciously. The master feels what’s right even before they have the words to express it.

This is very much what happens to someone we call computer savvy. Having used a computer for a very long time, all the processes involved in operating it have been internalized, have been learned and transferred into the subconscious mind. Presented with a new device or a new user interface, that experience is tapped into intuitively, which allows that person to make sense of the new interface almost instantly, without conscious thought.

Using a computer or browsing the Web is not considered a skill in the same way as playing a piano or painting is. This frames it differently to all the other professional “skills” and makes it seem like no big deal to those who do it on a regular basis. We talk about merely using software, not operating it. Overly technical software would fall into the skills category, but not the basic consumer apps or websites. Our familiarity with countless varieties of software and hardware makes us blind to just how much more we know and are used to. Since we’ve internalized all the little details and know everything intuitively, we don’t think about them. Indeed, we cannot think about them because just like tying a shoelace we don’t consciously think through the steps of the process, we go through it intuitively.

Of course, the fact that a technically savvy user might figure out a user interface faster is no revelation, what interests me is the extent to which we may be underestimating the effects of being familiar with a variety of user interfaces. We take for granted that we’ve spent years internalizing countless interfaces, learning their every nuance, pattern and variation, to the point that all this experience comes together as a coherent whole and used intuitively, without conscious thought. We take this for granted because we don’t consciously register that we know all of this. New interfaces just appear simple to us, self explanatory even.

All the myriad of tiny little details are there in our subconscious: all the countless varieties of buttons, tabs, links, windows, panes and so on, all wired together and ready to be called whenever we need to tap into this experience. We have a feel for all of that. We don’t know how much is there because unlike learning how to tie a shoelace, we never acquired this experience through a formal process — i.e. consciously noting that now you’re going to learn something — we’ve got it through daily use.

This is what makes the experience of watching somebody who isn’t technically savvy so strange and bewildering. The truth is that the interface that seems so simple is only so simple to us, to somebody with countless hours of experience of using such things. Our vantage point has changed so gradually that we never noticed any movement, and it has moved so far that we no longer remember where we began. Indeed, even consciously recognizing this fact doesn’t reveal the extent of the differences to us. Recognizing that we’re probably grossly underestimating our experience makes watching somebody struggle with a “simple” interface a lot less excruciating and a lot more sense.

December 5, 2012

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy

There’s a new trend in the redesign of technology news sites, which has emerged with the move towards responsive designs. The new wave of redesigns sees the old blog format being transformed into a full-screen, app-like experience, with multiple columns, fixed position elements and a global navigation bar at the top of the page.

So let’s see some examples. Here is The Next Web:

Here’s Mashable:

And here’s ReadWrite:

Here are some of the shared attributes of these designs:

There’s a lot to like. The new designs are responsive, meaning that they adapt to the device that you happen to be using to view them, showing more content on larger screens, and collapsing the columns one by one for smaller devices. On a smaller screen the content is still there, it just gets moved down or gets put away in a drop down menu. The typography centered style is also a good change, pacifying the aesthetic eagerness of the early Web with the restrained elegance of print.

But there are also things about this trend that I dislike. I don’t mean the concept of responsive websites, which is good, but rather the certain characteristics of the implementation that we see in the examples above.

My main issue with these redesigns is that instead of building the site like a physical page, they treat it like a canvas for an app. Scrolling the page up or down does not guarantee that the whole of the page will move. Some columns are fixed and will remain where they are no matter how far you scroll. Some columns scroll independently, forcing you to move your cursor over them to scroll the content within them. It feels like the solid page that we’re all used to has been shattered into little pieces that may or may not behave the way you think they will.

There are other annoyances. For whatever reason, scrolling is often laggy, which is made much worse on sites that load content as you scroll down. Most of these sites also choose to show up pop up menus on mouse hover, which are oftentimes fairly large. Should you accidentally move your mouse over the area you’ll see a portion of the page blocked by a menu item you never wanted to see. To fix the situation you’re forced to move the cursor outside the menu, all the while making sure you don’t accidentally move it over something else that will generate another pop up. It’s just plain annoying.

While I like the style direction, I think these sites are trying a little too hard to work like apps, and in doing so, they surrender the strengths of the plain website, namely: simple, responsive navigation mechanisms. Simple sites don’t lag and don’t have any ambiguous navigation elements. They behave like a page, which, while being a constraint, is not necessarily a bad thing. The new wave of responsive redesigns in tech news sites certainly look good with their nice typography and healthy use of whitespace, but they feel heavy, they don’t feel right in the browser. They look more like apps but the speed and responsiveness of a native app just isn’t there.

What do you think? Do you like these new designs, or do you agree with me that they’re trying a little too hard to break away from the physical page metaphor? Leave your comment below.

November 27, 2012

Just Don't Make It Annoying

I find that whenever I’m designing a user interface, the one safe rule to follow is simply this: just don’t make it annoying. This might sound banal, but there are often cases where blindly following best practices and design theory slowly pulls you off the right track, so that you end up designing something for the sake of a good design — whatever that is — rather than for actual use.

As an analogy, consider the organization of things on your desk. Cleaning it up, organizing things and putting them away might seem like a good idea if you want to achieve a productive working environment, but this doesn’t always work. Sometimes a messy desk is actually what you want because everything you need is available for your use right away. A disorganized desk might look messy, but if its user knows what all the things are and where to look for what they want, then the jumble of things is actually a setup that works for them. The more engaged you are in your work, the more things you need around you to sustain it.

As an extreme example, take a look at the Bloomberg Terminal, a computer system that gives finance professionals real-time access to market data. At first glance, it looks like a terrible mess. But this chaos of information is much like a disorganized desk which makes every item available to the user straight away, so that when they know what they want and where to find it, they can get it without any user interface friction. It’s an ugly thing made for speed and utility rather than beauty.

The design consulting firm, IDEO, proposed a redesign of the interface in 2007, but were rejected. When the user is familiar with a user interface like this, they won’t want it changed. There’s simply nothing to be gained by it. Yes, the learning curve can be improved, but existing users don’t care, and redesigning it will simply introduce more work for them. I’m sure the Bloomberg Terminal can be made better, but the current solution, while far from beautiful, actually works. Traders just want the information, with as little interface friction in-between, and this is exactly what an interface like this gives them.

A good interface works for the user by getting out of their way, not by inviting more interaction. Improvements like the organization and putting away of interface elements in their own groups and menus only matters when it’s actually facilitating something useful, i.e. improving the learning curve or making a mass of information more manageable. Organization for the sake of organization doesn’t ensure a good interface, just as any other design principle applied blindly for no other reason other than being considered a best practice. When in doubt, just use your own interface, and when you experience interface friction, when the interface becomes annoying by getting in the way of what you wanted: get rid of it by replacing it with what you need.

November 26, 2012

The Gleam of a Better Publishing Model

Craig Mod wrote a great article about what he calls subcompact publishing — a term that draws parallels with the 1967 Honda subcompact car. His premise is that the publishing industry has translated too many details from the physical medium to their new digital offerings, details that do more to bloat and confuse their product than create a publication that is perfectly suited to its new habitat. His suggestion is to go lean, to drop the idea of packaging a lot of articles into big issues that come out every month, and instead release a few articles, more often and using a much lighter format.

By dropping in weight, the user interface also gains in usability because every issue is only a few articles in length, which can all be listed on a single screen without the need to flip through pages, scroll or zoom around. Additionally, Craig Mod advocates using established technologies like HTML/CSS to mark up and style the content, which ensures that the file sizes are light and the content can also be published onto the Web. Craig dives into a lot more detail in his article, and I definitely recommend reading it in full.

A great example of this lean publishing approach is Marco Arment’s new publication for iOS called The Magazine, which publishes four articles every two weeks. Marco has initially launched this project as an experiment, but it has proven profitable almost immediately after launch. The lean approach, it seems, can work.

But are apps the right solution? David Heinemeier Hansson wrote a post about the stupidity of packaging every new magazine into its own app, reinventing the layout and navigation engine in the process. Such magazine apps are often bloated, slow and buggy, delivering poor user experiences. David writes:

It’s like every magazine is reinventing HTML and programming their own browser for it. Of course that’s going to end badly!

The solution when it hurts to hit yourself is to stop hitting yourself. Custom app development to publish a magazine is just nonsense.

I agree. I said the same thing a while back — the Web is the perfect distribution channel for publishers aiming to reach consumers through mobile devices and tablets. We’ve been developing Web technologies and layout engines for a very long time, and we have an army of designers and developers able to work with them. Today’s browsers are much faster and much more capable than ever before, and our mobile devices are almost always connected to the Internet, either by WiFi or through a mobile network. The lean magazine approach can work, but it need not be an app.

There is one missing piece however, and it is payment processing. On iOS, Apple has your credit card on file. Should you want to subscribe to a magazine through Newsstand, the digital publication marketplace on iOS, you can do so just by filling out your password. You’ll be paying Apple, not the publisher (who will in turn receive their payment from Apple), which increases trust, especially for new publications. They also provide an option for trial periods, meaning that people can subscribe to a magazine for free, and then automatically activate the subscription when the trial period runs out. This removes the barrier for trying out and subscribing to a digital publication on an iOS device.

No such thing exists on the Web, or at least not anywhere close this level of simplicity. What’s needed is a marketplace much like Apple’s Newsstand, but for the Web. The company running it would have your credit card on file, allowing purchases to be made simply by filling out a password. Having customer’s payment information also allows for models other than regular subscription, for example, the purchase of individual issues or even individual articles. Payment processing isn’t difficult, what’s difficult is to get to that same level of frictionless purchasing that Apple have built on the iOS.

November 23, 2012

Effects of Typography on Reader Mood and Productivity

In their paper titled The Aesthetics of Reading, Kevin Larson and Rosalind Picard present their findings on the effects of typography on reader mood and cognitive performance. They conducted two studies, each involving 20 people. The participants were divided into two groups of 10 and were given 20 minutes to read a specially typeset issue of The New Yorker on a tablet device. One of the groups got a badly typeset version (using Courier, with spaced out words), the other a properly typeset one.

Three metrics were taken:

  1. Participants were interrupted during the experiment and asked to estimate how much time they thought has passed since the experiment began. People who find their task enjoyable and are in a positive mood experience a faster flow of time and so are likely to underestimate the amount of time that has passed.

  2. Participants were asked to rate their experience of the text using a questionnaire.

  3. Participants were asked to perform a cognitive task after their reading. A different task was used in each of the two studies. The first involved the candle problem, in which you are asked to attach a candle to the wall using a box of thumbtacks in a way that the wax won’t drip down to the table below (the solution is to use the empty box as the stand). The second task involved showing the participant groups of three words and asking them to provide another word that will create a common compound with each of the three (e.g. ‘ice’ for the three words: ‘water’, ‘skate’, and ‘cream’).

Here’s what the researchers found.

1. Time flies when you’re reading beautiful text

The researchers found significant differences in perceived time spent reading. Those reading the properly typeset version of the magazine consistently underestimated the amount of time that has elapsed before they were interrupted. In the first study, the bad typography group underestimated the time by 24 seconds on average. On the other hand, the good typography group underestimated it by 3 minutes and 18 seconds on average.

The second study showed similar results, with the bad typography group underestimating the time by 2 minutes and 21 seconds on average, and the good typography group underestimating it by 5 minutes and 12 seconds on average. The second study increased the time before interruption, but the difference is significant and consistent.

2. What they say may not reflect how they feel

The questionnaire proved less reliable. The first study showed little differences. The second study, however, turned out in favor of the good typography group. It’s not clear why the second group rated their experience of the text so differently from the first, but it is possible the changes in the content played a part.

3. Good typography boosts cognitive performance
— at least for some tasks

In the cognitive tasks, the results were mixed. In the candle task, 4 participants from the good typography group solved the task. None were able to do it from the bad typography group. The difference in performance in the second study was not enough to yield reliable conclusions, though the good typography group did perform better again.

Typography matters

The lesson here is twofold. First, good typography has a clear impact on the mood of the reader. People who are reading a well typeset page are more engaged in the experience and find that time flies by faster. Second, research has shown that positive mood improves creative problem solving1, and since typography can be used to influence mood, it is possible that good typography also has direct effect on our productivity, at least in the sphere of certain creative tasks. Good typographic design then is not just a way to communicate the character of your text and strengthen reader engagement, it could boost their cognitive performance, too.

  1. Isen, A.M., Daubman, K.A., Nowicki, G.P. (1987). Positive Affect facilitates creative problem solving. Journal of Personality and Social Psychology

November 21, 2012

Blurring of the Lines

Jakob Nielsen has published a damning usability review of Windows 8. The key problems he highlighted were:

Nielsen concludes that Microsoft’s new operating system is terrible for PCs and weak for tablets, adding that the OS can be greatly improved on the tablet side with a few mild updates:

I have great hopes for Windows 9 on mobile and tablets. Just as Windows 7 was “Vista Done Right,” it’s quite likely that the touchscreen version of Windows 9 will be “Metro Done Right.”

As to the PC side, Nielsen is less optimistic:

The situation is much worse on regular PCs, particularly for knowledge workers doing productivity tasks in the office. This used to be Microsoft’s core audience, and it has now thrown the old customer base under the bus by designing an operating system that removes a powerful PC’s benefits in order to work better on smaller devices.

A year ago I wrote a post on the merging of the two interfaces, Aero and Metro, and have concluded that it’s a mistake to try and push both the mobile and the desktop experiences together into one. Each interface was designed specifically for its own environment where it worked best, so it never made sense to ship both together. Apple’s strategy of maintaining two operating systems side by side, iOS on the mobile, and OS X on the desktop, has so far worked exceptionally well for them, so that path was definitely not a risky one to take for a company like Microsoft, especially having seen their competitor pave the way.

Why did they still do it? Why did they decide to combine the world of mobile and desktop into a unified experience? My guess is that the answer lies in the way Microsoft sees the future of mobile computing. Instead of seeing tablets and laptops as separate categories, they see them as one, as an ever flowing progression towards thinner, lighter and more mobile devices. Just as the laptop has overtaken the desktop in sales, they see the tablet overtaking the laptop. The device gains a touch screen, becomes thinner and lighter, drops the dedicated hardware keyboard. Viewed this way, the tablet is an evolution of a computing device, not a new category of mobile devices.

If this is the view of the market that Microsoft subscribe to, then Windows 8 is the answer to that. It’s a system that caters to that ever more mobile device that is neither tablet nor laptop, and yet both at once. It’s an OS that assumes that most computing will be done on devices that resemble powerful tablets with detachable keyboards, not on the laptops and the desktops of today. It’s an OS that tries to serve everyone at once, to cover all use cases and all markets. It blurs the lines between content consumption and creation, between mobile and desktop.

But this only holds if the original premise is correct, that the tablet is the evolution of the laptop, and I just don’t think that’s right. Where the division lies is not a the desktop and the mobile level, or between the laptop and the tablet, but between professional use (i.e. content creation), and light/entertainment use (i.e content consumption). While tablets are not necessarily used purely for content consumption, their limitations (small screen size and lack of a hardware keyboard) mean that this will always be their main use.

The PC does not die just because there are more mobile devices on the market, it remains to play its own role. There is a clear line between devices you use for things like writing, coding, photo editing, 3D design, and so on, and devices you use for reading, browsing the web, watching videos and playing games. While the latter can be done on both, the tablet and the PC, the former will always require a PC, and because of this, there will always be a need for an operating system tailored specifically for it.

The road to a good OS is not a blurring of the lines between PCs and tablets, but rather an amplification of the differences through a strong focus on the uses that each category serves. The desktop OS should make use of large screen real estate and the precise targeting of the mouse cursor. The mobile OS should be optimized for the small screen and for the rough tap of the finger. The desktop OS should focus on power users and multi-tasking, the mobile OS should focus on content consumption. They environments they run on are different, the use cases are different, and the solutions should be different.

It doesn’t make any sense to port a user interface optimized for mobile touch devices to the desktop, and neither does it make sense to give tablet users the desktop interface. Each was custom built for its own environment, and each is optimized to be operated by different methods. In their compromise, what Microsoft are doing now is giving a tablet to people who want to buy a PC, and giving a PC to people who want to buy a tablet. Since there is no hybrid device that works great for everything, there is no point in compromising the experience by designing a hybrid UI.

  1. Otherwise known as “Modern UI”, but I’ll just call it by the name everyone knows it as here.