Category — Real Time Collaboration

The process of interface prototyping, particularly user interface prototyping is important, especially in building complex websites. Using an interface prototype allows you to analyze the functionality and usability of your website before the lengthy and costly programming stage. The most important aspect of user interface prototyping is the ability to analyze usability and collaborate according to the needs of the person or organization running the website. There are four key stages to user interface prototyping, which will be explored in this blog.

Stage One – Assess requirements

In this stage, the website implementer establishes the requirements for a website interface prototype. User interface prototyping begins with the client’s needs and it is vital that collaboration is prominent throughout the interface prototyping process. Here it’s useful to look at the requirements a client might stipulate in the initial design stage, such as input fields, links to other pages and the use of visual media. Once these requirements have been established, the design process begins.

Stage Two – Prototype interfaces

In the design process, the user interface prototype is developed. The designer sticks to the brief that has been made by the website implementer and builds the initial prototype. This initial user interface prototype is then sent back to the client.

Stage Three – Test prototypes

Once the client has looked at the initial user interface prototype, it is likely that suggestions for changes will come about. At this stage it is useful if the prototype software enables real-time collaboration, so that the client and designer can communicate changes to one another quickly and effectively. Here the end user can also play an important role, especially if the prototype design software enables remote usability testing. This type of software enables you to see what problems end users may encounter and resolve them quickly and easily.

Stage Four – Adapt interface prototypes

The final stage involves components of the previous three process stages. The prototype is reviewed and revised until the client is satisfied that all the requirements have been met and there has been positive usability feedback from end users.

What are the benefits of interface prototyping?

There are many benefits to using interface prototyping. Not only does this allow for collaboration between the designer and implementer of the website, there is also the possibility to test the interface prototype on end users. That means not only is there the possibility to change design proposals early on, but end user problems can also be anticipated and resolved quickly. The main advantage of user interface prototyping is the speed in which the prototyping process happens, which in turn can save your company money.

With the advent of Web 2.0 Facebook has become the undoubted king of the hill leading to an A list Hollywood film with the humorous tag-line “you don’t make 500 million friends without making a few enemies”. Since launching its Facebook Connect set of APIs, there has been a proliferation of third party websites incorporating Facebook log in functionality in their interface design. Considering the large number of Facebook users and the central part social networking plays in users’ web habits such a move lowers the entry barrier considerably. The ability to sign up with a few clicks would entice users who find having to register and enter all kinds of personal information a convoluted process.

How has the social web impacted the interface design of web browsers?

As APIs from various social networks found themselves to the interface designs of various websites, the browser itself largely remains untouched. Mozilla Labs had experimented with an in-browser tool called Ubiquity that was used to post data to social networks. Other add-ons have also tried to bring the social web closer to the browser. Two browsers, RockMelt and Flock, have championed the integration of the social web into the fabric and interface design of the browser itself.  In the rest of this blog I shall look at RockMelt, which recently released a limited public beta. The browser is based on the open-source Chromium from which Google Chrome draws its code. By that virtue RockMelt’s interface design and functionality is similar to Chrome.

How does RockMelt incorporate the social web in its interface design?

One of the most striking things about RockMelt is that you have to log in when you start it. After authorizing it to connect with your Facebook account the browser instantly customizes its interface design to your social circle by way of slim sidebars to the left and right. This leaves plenty of space for the browser to be, after all, a browser. And while browsing the web users may update their status and post links to Facebook and Twitter (the only services supported at the date of writing) from the interface design of the browser itself. Built-in clients allow you to access your news feed or even manage multiple Twitter feeds. By incorporating social networks into the interface design of the browser itself RockMelt could streamline surfing the web as users won’t have to have extra tabs open and the ability to access feeds and post would mean less clicks.

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 and increase its popularity with users.  Yet, you need to consider it at the right point in time.  In order to use color, it is best to categorize how and why to use it.  This way, you can create a pleasant experience and envelope users in your interface’s ambrosial essence—design is, after all, an art form. As such, it should be added once the functional basics and the overall content strategy of a website or application have been determined and tested with end users.

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.

•    Natural Colors: Natural colors can provide comfort and familiarity for users.  They can also be used to underscore the theme of your user interface.  For example, if you are designing a travel website that has pages profiling different destinations, you can use natural colors that users will associate with each place: Greens for Ireland, browns for Arizona or the Grand Canyon etc.  Using these color palettes in tandem with images and written content will engage your users and leave your website more memorable.

•    Unnatural Colors: Using bold and bright colors is also a good strategy for distinguishing your user interface from the rest, but be judicious about it.  Too much bold can turn users off or detract their attention from important content.  Bold colors are best used when you are trying to shock users or grab their attention.  For example, if you are designing a new website you may want to have the “breaking news” section in a neon color. Or you may be creating an avant garde art website that uses all vibrant colors because you know that your users will generally be people who are interested in being challenged aesthetically.  But be careful. Unlike natural colors, unnatural colors can affect your user interface as dramatically as their hues—for good and bad.  So tread the unnatural color spectrum carefully.

Understanding how and why to use natural or unnatural colors is an important part of designing a successful user interface.   Colors enable you to craft a pleasant experience and engage users in your interface’s content, but consider usability issues when experimenting with colors—design is, after all, an art form.

Online analytics is becoming increasingly important to improve the usability of various user interface designs because it is a quick and professional way to ensure that the right content is being disseminated to the right audience.  Using or implementing fully-integrated and successful online usability testing programs is important because it gives companies a competitive edge in a software world that is evolving to new sophisticated heights.  The easier a company can make it to discern how to best deliver their services to a target group may ensure their survival and success in the future.

How the interface design change functions

So how exactly does this new panic button work? The panic button is actually an app called „ClickCEOP“. Users have to add the app to their Facebook interface and then a tab appears in the interface design, which contains a clickable button. The button allows the user to contact authorities when he feels a user is acting suspiciously or inappropriately.
While the panic button is no doubt a helpful feature and a strong indication that Facebook is taking the safety of its users much more seriously (or at least succumbing to user demands much more easily), its addition to the British Facebook user interface design shows that Facebook is willing to move its privacy features from a personal to a more public sphere. And this does not come without complications. For example, the Facebook security user interface has generally been very private. You as a user control who looks at your profile and what that person can see etc. It has been about you controlling your own information. While users have always been able to notify the Facebook powers that be of someone’s „bad behavior“ or had the power to block people, Facebook hasn’t before had such a direct interface with public authorities. There is definite potential for misuse with the introduction of the panic button – kids will be kids after all. Thus it will be interesting to see if there is a rise in reported suspicious activity on Facebook, and it will be even more interesting to see how authorities will respond to panic button clicks of different types. This trend shows that social networking is evolving and it points towards a more public understanding of online communities.

Internet usage and connectivity varies greatly around the world. In Germany, around 72% of all households have internet access. While this may seem high, especially when put into the context of developing countries, it still means nearly one third of all households lack internet access. One of the reasons for this could be age and the age-related habits or requirements of elderly people. In Germany, 60% of adults use the internet whereas 80% of 10-13 year olds use the internet. Statistics from the US reveal that overall 79% of adults use the internet, but on further inspection one can see that the number of 18-29 that use the internet, at 92%, is double the amount of those aged 65 and over, at 42%.

Another reason could be differences in income or social status. On a macro level, the countries with the highest number of computers per people and households with internet tend to be those with the highest GDP. Within those countries, households from a lower socioeconomic background tend to have less internet access. In Britain, this led to the then premier Gordon Brown to start an initiative to provide 270,000 economically disadvantaged families with laptops and free internet connection. China, with 298 million users, has the most internet users in the world, but considering its huge population that only means that 22.4% (below the world average) of their population are using the internet. Africa by contrast has an average internet penetration rate of 8.7%.
Could the reason a third of the population in countries like Germany do not use the internet be due to inadequate interface design and/or usability issues in general? While many popular websites have interface designs that are designed with the best usability principles in mind, they often focus on younger age groups – not only in content and functionality, but in important areas of interface design. These include small to medium font sizes or navigation elements that require good eye-sight, screen layouts that are unfamiliar to people used to print products, complex navigation schemes and a plethora of options to select, as well as terminology and language which often includes modern non-native terms like “Home”, “Account”, “Login”, and the like. All these elements of an interface design pose potential barriers to use by older people.

Aside from other reasons for the lack of 100% internet access at home – such as people not feeling the necessity perhaps having (free) internet access at work, school, wireless access at their favorite cafe, or even from their mobile phone – usability and interface design issues may help explain part of the large portion of the population that still doesn’t use the internet. This shows that in order to improve and facilitate internet use for certain groups in the population, such as the growing group of elderly people in developed nations, their special requirements in terms of usability and interface design will have to be catered to. This may well open new market opportunities, such as accessible internet and others. Yet, there needs to be more, perhaps even special arrangements by providers taking into consideration the needs relating to content and layout of interface designs with special settings or access options for certain population groups.

While internet access is a good indicator of internet use, statistics on this indicator do not tell the full story. Consider these facts: The mobile phone application market is expected to grow to $15 billion by 2013. In places like Africa the leapfrogging aspect of mobile phones means that it is easier and cheaper to access the web via a phone than to have internet access at home, leading to a large percentage of internet users not accounted for by internet access statistics. In addition, it is worth noting that internet use can never be 100% of the population considering that some people, like those in prisons, are often not allowed to use the internet.

Better co-operation can solve hardware and user interface design compatibility problems

As technology continues to evolve, hardware designers are packing more and more processing power into smaller devices.  The convenience factor of a small portable phone or laptop is clear, but are they now becoming so small that it is becoming progressively more difficult for users to interact with the actual interface? In the case of the iPhone 4G,  it is anticipated that the small and sleek design will force the interface design to adapt, i.e. force the controls to be packed closely together, potentially making it difficult for users with large hands or fingers.  This would obviously frustrate users and lower the iPhone’s overall usability. Perhaps it seems like a picky point (maybe not such a big deal in the grand scheme of things), but the bottom line is that interface designers need to be thinking about the constraints of the hardware that serves as vessel for their apps or websites.  Thus, there should be a clear line of communication between the interface and hardware design teams.   This can only help create smooth and streamlined interaction between the two mutually dependent parts – the hardware and the user interface.  Apple’s recent reported and anticipated iPhone 4G problems aren’t really all that horrible or astonishing—but they do provide fruit for thought and bring to light the importance of hardware and user interface design working together.

What are some things that smartphone OSes can learn from each other?

Any of the would-be challengers (here’s looking at you MeeGo, WebOS and Bada) wishing to gain a sizable chunk of the smartphone pie is going to have to try and emulate these aforementioned strengths in their respective OSes. The iPhone still remains the OS to beat proving that a great user interface design, solid usability and positive user experience will be a winner with consumers. While the bare-bones Android’s interface design is not the most pleasing (Motorola Droid/ Milestone users can attest to that) it can be tweaked as shown by HTC’s Sense User Interface design (which is based on the TouchFLO 3D user interface design) to enhance  user experience. The iPhone would also do good to pick up some of Android’s tricks such as allowing tethering effectively turning the phone into a WiFi modem. The iPhone also needs to improve cloud functionality to match Android as, for example, if you download apps for the iPhone on your desktop the only way to transfer them is through a pesky cable.

Who are the others?

It would seem, however, that social networking has reached a critical mass and is at a crossroads. Until now, there have been largely closed and centralized environments along the lines of mobile phone carriers that only allow you to call others who use the same provider for free. In addition to a solid interface design and usability foundation, the best ways (David’s slingshot, as it were) to challenge Facebook is on issues of privacy, data ownership and decentralization. Already a number of notable projects are in the works that address those issues and I shall briefly mention a few. The Appleseed project is working to create an open source, fully distributed and decentralized social networking software. In effect any entity would be able to create compatible websites which users can join. And if you decide you don’t like the site you’re on, you can sign up for another Appleseed compatible site and immediately reconnect with everyone in your network. OneSocialWeb is creating protocols that allow for communication between social networks meaning that if you meet a friend on another network you wouldn’t have to create a new profile just to connect with them. Perhaps the project that picked up the most buzz is Diaspora, “the privacy aware, personally controlled, do-it-all distributed open-source social network”, after it received pledges of $175,000 from over 4,600 people on Kickstarter after asking for only $10,000! It will be interesting to see how social networks will evolve over the next couple of years.

How does portability enhance user experience?

It is also worth noting that the web apps, being built with standard web tools, would function on any web browser supporting these technologies. What will set Chrome apart from other browsers is the ability to easily find and create convenient shortcuts to access these apps. According to Glen Murphy, a Chrome user interface design team developer, another important UI design principle of Chrome is “cutting Chrome back to absolutely nothing… moving towards this simpler, high performance approach”. This approach is going to open many opportunities for web developers and interface designers to create enriching apps that will make browsers even more ubiquitous and useful, at least as far as the desktop is concerned.