Category — Rapid Paper Prototyping

Wireframing is an essential part of successful interface design processes. A great interface design does not just appear in one fell swoop. It comes about iteratively through constant refinement. It is about evolution and not revolution! This is where wireframing comes in handy through the traditional Graphical User Interface Design separation of “church and state”. This separation is the differentiation between an interface design’s content and its features, commands and other factors. With the latter, we are talking about layout, navigation, and other processes such as login and checkout. The idea behind wireframing is to test wireframes to ensure usability first, and only then worry about fleshing out the final aesthetics and content. Available to this end are various wireframing tools and the rest of this blog shall be dedicated to comparing a few of them.

The most rudimentary (and cheapest) way of creating wireframes is through the use of pen and paper. Some interface designers are also creating “paper wireframes” through PowerPoint, Fireworks, or Illustrator. Paper prototypes are cheap to create, and software allows you to easily add text, symbols, stencils, and the like as well as employing templates for even more rapid iteration. However, interactive wireframing tools possess the added advantage of interactivity, which opens doors for collaboration between team members and even clients. Furthermore, they engender feedback from all stakeholders and can even go as far as mimicking website functionality (such as clickable links etc.). Interactive wireframing tools usually allow for simple interface design by employing drag-and-drop of pre-fabricated UI components. This means that interface design can be done by virtually anyone without having to know coding. Wireframing tools can be web-based Software-as-a-Software or a native client that you install.
Examples of interactive wireframing tools include Axure, pidoco, Balsamiq and iRise. The wireframes can then be used in usability testing in order to be improved. Usability testing can be done with paper prototypes or digital prototypes.  Digital prototypes often require expensive specialized usability testing software such, but in rare cases (such as pidoco) does a wireframing tool also have the capability to conduct usability testing without the need for additional software.

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

Froyo also boasts Flash 10.1 support and a revamped Android Marketplace that will allow users to send apps to a phone directly over the air. In addition, Froyo has a new wizard that helps you refine your interface design in terms of home screens, widgets and shortcuts. The latest iteration also allows you to tether your phone, effectively turning into a modem for your other computers.  All these new features and more open new avenues for interface designers and developers to make more innovative and user friendly tools and solutions for mobile devices. And considering the fact that Android is making its way on to tablets, ginormous HD TVs, automobile dashboards, microwaves and more, the future does look bright for the OS.

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.

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.

Interestingly enough, Zuckerberg’s statements retain the much abhorred ambiguity that started his troubles in the first place.  Zuckerberg has only confirmed that Facebook will address the interface design issues in the coming week, but he did not specify how.  As users trust in Facebook continues to erode, it is paramount that Zuckerberg and his organization find a way to redeem themselves by enacting quick and clear measures that will simplify the user experience of the privacy options including changes to the interface design. If they are unable to do so in a timely manner, the future of the social networking giant may hang in the balance.

Facebook CEO Mark Zuckerberg ended his silence about the recent privacy controversies in a letter to tech blogger Robert Scoble and via an op-ed piece in the Wall Street journal. Zuckerberg acknowledged that Facebook security features were too convoluted and stated that “in the coming weeks, [Facebook] will add privacy controls that are much simpler to use”.  In addition, Zuckerberg promises that Facebook users will be given a much easier method for opting out of all third party services.

Zuckerberg’s response was prompted by a tidal wave of fury about Facebook’s lack of easy-to-understand and easy-to-use privacy options in its interface design from users across the globe.  An initial security glitch, in which some users were able to view the private chats or messages of their friends, created a snowball effect among users as they also began to complain that Facebook’s interface design was a conveyor of confusing privacy policies and made their private data to easily available to third parties.  One of the main problems with Facebook’s interface design, according to many users, is that there are too many settings and the settings are anything but usable or clear in terms of allowing users to make their desired selections.

It’s no secret that consumers are flocking to the internet to fulfill their shopping needs. Online shopping has become one of the most popular forms of commerce in the last ten years.  According to Reuters, consumers spent 27 billion dollars online during the 2009 holiday season—and that was only in the United States.  It’s easy to see why eCommerce is so alluring.  In theory, the internet should be a shopper’s paradise—click a few buttons and buy anything you want from the comfort of your own couch. But in reality, online shopping isn’t always such a delightfully efficient experience. No matter how interesting the product or beautiful the graphic design, many consumers lose patience with online shopping sites because they simply aren’t usable.  Usability is the driving force behind eCommerce and if your site isn’t functional due to poor interface design, the consequences can be disastrous for you and your company.