Category — GUI Prototyping Tool

Digg, the social news-aggregation and recommendation site, recently re-launched as version 4.0 to a storm of controversy coming from a significant number of long-term users. Reworking and relaunching a website with a new user interface design is a delicate matter. Usually the goal behind such an overhaul of the UI design is to make it more attractive and easy to use for the website’s users. Often, changes are done iteratively to optimize the GUI. When done right consensus should be that the new interface design is a marked improvement and should lead to an uptake by new users. The fourth iteration of Digg’s user interface design takes a cue from Twitter and Facebook, something a number of social networks seem to be doing more and more of.  And with good reason too! The popularity of both websites cannot be put down to a mere fluke. These two websites are busy setting the pace as far as conventions on social networks go.

The revolt against the new interface design has already claimed casualties as Digg’s VP of engineering was fired. The biggest gripe users have with the new Digg, in terms of user interface design, is the lack of the ‘bury’ button. Now users can only ‘like’ a news story but cannot ‘bury’ it to make the news story less popular. The reasoning behind the lesion of the ‘bury’ button is that users abused the feature. Now users have the option to either report a story, should they find it offensive, or they can ‘hide’ a story. ‘Diggers’ became attached to the bury button and as such removing it was bound to backfire.

During the last year a new type of app has been popping up all over the mobile world.  These so-called “check-in” apps allow users to notify friends and colleagues about where they have been, where they are, or where they are going via their smartphone user interfaces.  App developers have also begun to use extant location-based social networks — such as Friendticker, Foursquare, MyTown, BrightLite, Gowalla and, most recently, Facebook Places — to create games, challenges, city guides and dating services all centered on user locations.
consumers.

Color plays an integral role in our lives. Literally everything we see and do is painted in color.  Thus, the vitality and importance of color should not be forgotten when you are designing a user interface; in fact, the use of color can help distinguish your user interface from all the rest.  Using color in the right way can brighten up a drab interface design, increase its popularity with users and improve usability.  In order to use color, it is best to categorize how and why to use it.

Natural vs. Unnatural Colors

When thinking about your interface design’s color palette, it is a good idea to decide whether or not you want it to be inspired by natural colors or unnatural colors.  Natural colors are colors that occur in nature: browns, blues, greens etc.  Unnatural colors are colors that could appear in nature (most likely in a tropical rain forest) but are probably man-made or synthetic: fuchsia, hot purple, neon yellow, etc.  Put simply, earthen tones vs. bright, bold tones.

This is part one of a blog post analyzing the repercussions of the new iTunes’ Ping service in the music market.

If Facebook’s phenomenal success can be seen as a nail in MySpace’s under-construction coffin, Apple may have just hammered yet another one in. Despite being eclipsed in numbers by the former, MySpace continues to be doing well as far as the cocktail of music leveraging social networks is concerned. The newly released iTunes 10 has decided to leverage the number of Store accounts to muscle in this already crowded territory. This “social music discovery” network, called Ping, is arguably iTunes 10’s Unique Selling Point and is integrated right into iTunes’ user interface design. The feature allows anyone with an iTunes account to “follow” bands, friends and share suggestions

Ping has been described by Steve Jobs as “Facebook and Twitter meets iTunes.” Well not quite Mr. Jobs. At the moment Ping requires the latest version of iTunes, and an account, to run. Apple could have easily used Facebook and Twitter APIs into Ping’s interface design but clearly they prefer to be dictating terms and operating within walled gardens. A feature that Ping users will no doubt be clamoring for is a web-app version of the service. After all, what happens when wishing to access Ping from a computer, or mobile device, without the latest version of iTunes or none at all? Users would be faced with the seemingly arduous task of downloading, setting up and signing in. Way too much of a process for web surfers! In such a case services like Last.fm come up trumps allowing users to access the network through a number of platforms and interface designs. These range from web browsers, to mobile devices as well as stand-alone applications for Windows, Mac and Linux.

This is part one of a post on the interface designs of social networks. In part one of this blog post I shall look at why user interface design matters before looking closer at the registration processes and privacy concerns from the perspective of interface design.

Why does interface design matter?

Social networks have grown to become one of the internet’s key interfaces, attracting hundreds of millions of users. The popularity of various social networks has ebbed and flowed over time but with one look at the interface design of very popular social networks we can see the sound usability principles that have played a large part in their success. As interface design seems to account for a lot of the success, for this article I have decided to look at three of the most celebrated social networks, namely Facebook, MySpace and Twitter. In addition to this I shall also look at two other social networks with a particular localized strength. Friendster is particularly popular in Southeast Asia and meinVZ (along with studiVZ and schülerVZ) is particularly popular in the German-speaking countries. Together these networks have a combined total of 720,000,000 users!

Registration

The success of social networks is often measured in the number of members. Hence, having a smooth and expedient registration process is key for any social network. So, this is not just a usability or interface design issue. The number of steps required to register should be kept to as few steps as possible. This requires making the best use of the interface design to achieve these goals. The best example out of the social networks I chose to look at was Facebook. Registration occurred in one step with the sign up incorporated into the interface design of the homepage. All the other social networks I looked at linked the user to, at least, another page from where they could fill in their registration details.

Privacy

Privacy is the single biggest concern regarding social networks. I found meinVZ to have the best privacy policy – certified in line with Germany’s strict data protection laws – making users feel more comfortable in the knowledge that they are in control of their data. New users are automatically “invisible” and this is communicated to users on the homepage. It is up to users to then make their data available. MeinVZ was also the only one to have a direct link to privacy settings from the main site scoring high in findability. Twitter by its open and minimalist nature does not have many privacy settings unlike other networks that have a whole section devoted to privacy. Facebook has long been a target of criticism for its ever shifting goal posts regarding privacy. Furthermore its privacy settings were very complex and divided into many sections. This prompted a rethink resulting in more streamlined and easier to grasp privacy settings a while ago. From a strictly interface design perspective I find Facebook’s current settings to be the easiest to set, once you have found them that is! To start with, while they may not have their own dedicated button, privacy settings are accessible via a drop down menu, whereas on MySpace and Friendster it takes 2 steps. Users have to first click on settings and then on privacy settings. They did a very good job of simplifying it to not overwhelm the interface design meaning users do not have to scroll down and be confronted with a lot of text (which users have to do on meinVZ). However changing privacy settings is easier on meinVZ which offers users basic settings but allows users to immediately fine tune their settings unlike Facebook’s that would require a 2nd step to start customizing.

There is a plethora of information available to web designers about how to create interface designs that are characterized by optimal usability.  Yet web designers continue to make the same usability mistakes time and again when developing their user interfaces.  It is not as though web designers aren’t aware of common usability pitfalls—they usually consider them during the creative process and many are well-versed in usability red flags.  Yet this does not always ensure that designers will end up with a user-friendly interface design.   That is why it is important to beat the concept of usability pitfalls to death—if every website floating around in the world wide web was perfect then we wouldn’t need to do it.  But that isn’t the case so it is good to remind ourselves of the illnesses that can attack website usability in order to find ways to keep user interfaces healthy and strong.

Among the new announcements at the recently concluded Google’s I/O Developers conference was the next iteration of the Android OS, namely 2.2 (codenamed Froyo). Android has grown in leaps and bounds since its inception with a new market survey showing Android powered phones overtaking Apple in the US, the world’s biggest smartphone market. According to Google, the latest version of Android will be up to five times faster at running apps and three times faster at browsing due to the use of just-in-time Java compilers and the same V8 JavaScript engine as Chrome.

Froyo’s browser includes more HTML5 features, such as allowing the browser to access hardware features such as the accelerometer (to rotate the screen automatically), the microphone and the camera which can all now be accessed by web apps. What this means for interface design, interaction design and web development is that voice recognition comes to the fore as an extra input and control device. Google’s voice recognition and translation services are examples of how users may potentially use their voice to perform web searches, control their android phones or even change the channel on the, also newly announced, Google TV.

Integrative interface designs: Apple’s iPad model

Apple recently introduced its new iPad and proved that they understand how important integration is to simplicity and usability. The iPad functions like a combination of the OS system and the iPod. Apple was smart in realizing that two of its more popular programs could be a force to be reckoned with if they were combined. Combining the features of the iPod and OS operating system’s interface designs increases simplicity because the user is able to consolidate all his „Apple needs“ into one place. Apple’s new iPad shows that integrating extant interface designs not only vamps up usability through simplicity, but it also a produces a lucrative marketing strategy to promote a profitable product.

Simplicity works

Successful interface design relies on usability, and usability often relies on simplicity. If you want to create the most usable and therefore profitable interface design possible, keep in mind that simplicity often works. Gooogle and Apple understand that, and look where it has gotten them.

In order to bring back some funk to it’s Hotmail brand and to compete better with the likes of Gmail, Microsoft has spruced up the interface design of and added new features to their webmail service. Over time the nature of the content of inboxes has morphed from a majority of mails coming from people you knew. Today’s inbox includes a lot of spam (which now makes up 90% of webmail traffic), mail from other services such as social networks, newsletters and other types of mail such as sending yourself a document which you want to be able to access later away from your computer. The new Hotmail  segregates the different types of email to let you know exactly which types of mails you have received allowing to directly go to the desired type (such as mails with photos attached to them for example) from the revamped homepage.

A great new feature is the sweep function which allows you to move all mails from one or more contacts into a desired folder (such as the trash folder) with a couple clicks. Furthermore this feature can be made to work automatically. In effect MS is trying to make Hotmail the service of choice to centralize your emailing as POP mail such as Gmail and Yahoo Mail Plus can be forwarded and automatically swept into their own folders. Photos are automatically previewed and can be viewed as a slideshow all without leaving Hotmail.  Those sending photos can have their photos made into an online album on MS’s new free cloud-hosting service, SkyDrive, for all users to see, comment, tag friends or add photos regardless of email service used.

As the saying goes ‘if it ain’t broke don’t try to fix it’. When Microsoft released Office 2007 to succeed Office 2003, users were treated to a revolution in the popular office productivity suite’s interface design as some of the core handling patterns learned by using previous iterations of the Office no longer applied. The menu buttons and toolbars on the interface design of Office 2007 were a radical and unexpected departure. MS implemented its new Fluent User Interface design ‘Ribbon’ to replace the previous system of layered menus, toolbars, and task panes with a new system “optimized for efficiency and discoverability”. In many ways Office 2007 in comparison to its previous iteration was like Vista to Windows XP. Some users that had gained mastery of XP found themselves unable to do things on Vista they could easily do on XP. Even power users were stumped by Office 2007’s learning (or should I say re-learning) curve leading many to simply stick to their guns much in the same way many never felt compelled to upgrade to Vista. Some who upgraded to the 2007 iteration even used add-ons that simulated the classical menu user interface design.