Science & Technology

T-Cubed: Facebook’s Redesign a Sign of the Era of Mobile Design

Note: This article is hosted here for archival purposes only. It does not necessarily represent the values of the Iron Warrior or Waterloo Engineering Society in the present day.

Facebook announced another redesign last week (which should come as no surprise to anyone who uses the website), bringing some new changes to how content is organized on the main page of the network and other visual tweaks to how stories are displayed. A large move behind the change was combining the design behind the mobile and desktop versions of the site to make it more consistent for users.

On the left side of the screen is the new menu, much like you’d see in the mobile applications, and Facebook Chat, both contained in a tall black sidebar. It’s easier to filter the News Feed to show specific themes, such as games, music and sports, or have a feed of all content (Most Recent) by using a table in the upper right corner of the screen. At the top, for those who don’t already have it changed, the layout is changed to show Facebook’s new Graph Search tool in the top bar. A much larger focus is put on content in the News Feed as well, replacing little boxes with giant photos with overlaid text, widgets for different kinds of content and cleaner, compartmentalized views for stories.

Most of these elements are already present on Facebook’s mobile apps, and in a move that has become more common in user interface design in the last few years, most changes are moving from the lower size displays to the larger ones. The longstanding trend in web and application design since earlier days has been to design for desktop hardware and displays and then build a small, perhaps less functional version for a mobile operating system. In the days where Pentium processors reigned supreme and PalmPilots were the most advanced computers one would have in their pocket, it made sense to target larger displays with your primary design since most people were using desktops and laptops to access content. With the advent of the iPhone and other modern smartphones, and even more with the release of the iPad, it has become increasingly important to put effort into mobile devices as more people start doing their primary communicating through these new interfaces.

On The Iron Warrior, at the beginning of March our statistics show that 60% of our traffic originated from Windows, 22% from OS X and 2% from Linux. Part of the remaining percentage is from mobile devices, as 9% of our traffic originates from iOS, 4% from Android and 1% from BlackBerry. Now, our website is not too heavily visited, since we only get about 3000 visits per month, mostly from a select demographic, but it’s very likely that looking back before 2006, mobile devices as a whole would have registered at a mere 1% of the traffic for our site, if even that. Considering that much of our time on production weekends is spent working on the site in the browsers, our statistics overrepresent Windows as a source of our website traffic, so mobile usage is a greater percentage of outsider traffic than is reported. Our website isn’t the best right now on mobile devices, but it is definitely something we are prioritizing when looking at how to improve it for the future.

You don’t have to just look at our traffic to see how important it is to target mobile devices when considering design. Net Applications reported that for February, websites had 79% of all traffic originate from Windows, 6% from OS X, and 1% from Linux. For mobile devices, 8% of all traffic originated from iOS and 4% from Android. These are worldwide statistics, so results in each country likely vary, but the fact remains that at least 12% of traffic to websites comes from mobile browsers, and their share is climbing continuously. More than ever, it has become important to take as much into account how a website looks on a phone or a tablet versus a desktop browser.

An increased importance placed on simplicity and a boom in mobile app design has helped in fuelling the trend in bringing mobile design to the desktop. When Apple first launched iOS, they took OS X and packaged down the necessary parts of the operating system to make something that worked for mobile devices. In recent versions of OS X, elements introduced into iOS have been working their way back up, bringing features like true full-screen applications and simplified menus back to the desktop operating system. Part of this, on Apple’s part, is necessitated by the 11-inch MacBook Air, whose screen is almost as small as an iPad’s yet needs to fit a desktop operating system inside of it. Another part of this is that by reducing elements down to their fundamental components out of necessity, it becomes easier to realize what is truly needed to be shown to a user and what should be hidden away, and just because a desktop has more screen space to work with doesn’t mean it should be filled with useless controls and endless menus. Instead, the controls that are needed in the moment should be displayed, but the main focus should be on content. iTunes 11 does this extremely well, by hiding the former sidebar into a menu on top, bringing greater focus to the user’s albums or movies, or to the iTunes Store should the user want to navigate to it. This lets the sidebar be more useful, such as in the Podcasts window where it now displays a list of the podcasts that a user is currently subscribed to, and upon being clicked it displays a list of recent episodes.

Google has been showing improvement in this regard as well, and Google Chrome is another good example of how to keep design simple yet practical. All that you see on the screen is one little bar for the URL and a couple functions, and the list of tabs, keeping a much larger portion of the screen reserved for content. When compared to how Internet Explorer was during that period, notorious for allowing rows of useless toolbars, it was a reminder of how web pages, and not gimmicky buttons around the page, were the primary use of a web browser and how that philosophy should be reflected in the browser’s design. Microsoft’s efforts on Windows Phone with their flat, text-based visual language were brought into Windows 8, which was one of the things that went in the operating system’s favour upon release. The parts that still clung to old design paradigms looked oddly old and out of place, a bizarre juxtaposition of a bold, new cleanliness for Microsoft’s products against the monolithic and complicated design from before.

So, if you’re looking for what design ideas will be coming to desktops in the future, your phone is probably a good indicator. It wouldn’t be surprising to see more Holo-like elements brought to Google OS, or for news sites to look a little more like Flipboard and less like The New York Times, for the age of crowded toolbars and bulky interfaces is reaching an end, and the age of intuitive and understandable controls masking powerful functions is making its debut.

Leave a Reply