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): And here is a very similar implementation on YouTube, red this time, with a subtle glow effect: 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...

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...

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: 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...

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...

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: 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...