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.
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.
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:
- Responsive design taking up the whole or most of the screen
- Wide, simplified navigation bar at the top of the page
- Navigation bar drop down menus on mouse hover
- Fixed sidebar columns, or columns that scroll independently
- Big typography, especially for headlines
- Most headlines coupled with images
- Flat style, and flat, single color icons
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.
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.
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.
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:
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.
Participants were asked to rate their experience of the text using a questionnaire.
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.
- Isen, A.M., Daubman, K.A., Nowicki, G.P. (1987). Positive Affect facilitates creative problem solving. Journal of Personality and Social Psychology
Jakob Nielsen has published a damning usability review of Windows 8. The key problems he highlighted were:
- Added cognitive overhead from having to manage two distinct desktops, i.e. Metro1 start screen and the old traditional desktop
- Lack of multiple windows for Metro-style apps
- Difficulty distinguishing buttons from labels in Metro’s flat-style UI
- Low information density in Metro apps
- Difficulty distinguishing between app tiles that show too much live content rather than identify the app
- Problems with Charms discoverability and reliability, e.g. showing the “search” charm for apps that don’t support it
- Tricky, error-prone gestures
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.
- Otherwise known as “Modern UI”, but I’ll just call it by the name everyone knows it as here.
Information Architects have recently updated their popular distraction-free app, iA Writer, with a responsive interface. The basic premise of the app is distraction free writing, so from the first release there was no preference panels to play with and no configurations to tweak. The only thing you could do after you launched the app was write.
Even though the app worked well enough, the developers did want to introduce an option to change the size of the font. But how could they do it without introducing new interface buttons or preference panes? What they did is very clever. In the same way that a modern, responsive website adapts to changes in the size of the Web browser, iA Writer now adapts to changes in its window size, reducing the size of the text as the window gets smaller. The column size remains the same, optimized for readability, but now there are three text size “modes” to use for different types of writing: large font size for composing an essay, medium for jotting down an outline, and small for reviewing what you’ve written.
Oliver Reichenstein writes:
Inspired by our deep experience designing for the web, we’ve given Writer for Mac a responsive design, changing the font size based on window width. This maintains the text’s typographic proportions, zooming in and out without reflowing the text. I don’t know why it took us so long to find this obvious solution. However, given that no one else has done it, the simplicity of this solution is perhaps not as obvious as it seems in hindsight.
It’s a very clever solution, the sort of thing that seems obvious after you’ve reached it. It’s an interface without a visible interface, a way to change the behavior of the app without the need for preference panels, shortcuts or buttons.
Can this idea of the responsive interface be used for other apps? I think so. For example, the popular email app, Sparrow, has two modes of viewing email: a single list of emails, or the same list of emails with a message panel on the right, which shows you the contents emails as you click on them. To show or hide this panel you have to go to “Window” options in the menubar or use the keyboard shortcut. It seems to me something like this is ideal for being triggered by a change in the size of the window. Make the window large and the message panel will appear. Make it small and only the list of emails will show.
The key is to think of “modes” of use. Do your users use the app in various scenarios that rely on window size and/or the amount of tools needed? If they do, as in the case of iA Writer or something like an email client, then a responsive interface could probably work really well.
Here’s an interesting interface experiment by TOKI WOKI: an alternative character picker for the browser. Mobile operating systems like Android and iOS have a way to insert alternative characters, for example, by holding the letter ‘e’ on the virtual keyboard, you’ll be presented with the choices of using ‘è’, ‘é’, ‘ê’, ‘ē’, among other variations, giving you quick access to an expanded Latin alphabet.
On the desktop browser, however, you have to rely on the operating system’s character picker, which is sometimes not the most convenient of tools. Quentin from TOKI WOKI has built a JavaScript character picker that works much the same way as the pickers on mobile devices do: hold down a key and you’ll be presented with alternatives. You can then use either the mouse cursor, the keyboard or the mouse wheel to pick the character you want. Here’s the demo.
Here’s a screenshot of the interface in action:
OS X Mountain Lion already has this feature, brought back to the desktop from iOS, but this might still be useful for sites targeting multiple environments. There is a GitHub repository with the code.
In a comment on my post about optimizeLegibility, Marco Arment points out that there are significant, and even fatal, performance problems with this text-rendering mode on mobile devices. Marco Arment writes:
I did some testing with Instapaper to determine approximate optimizeLegibility performance limits. A 5,000-word article in Instapaper for iOS, for instance, will only use optimizeLegibility on devices with an A5-class or greater CPU. To avoid problems on older iOS devices, I wouldn’t recommend using optimizeLegibility blindly and unconditionally on any pages longer than about 1,000 words. And I wouldn’t recommend enabling it on Android at all.
So for now it seems like it’s a good idea to be conservative with the use of this property, using it sparingly and avoiding it altogether for older mobile devices. If in doubt, use it for headings only.