In a bid to usurp Google as the world’s most popular search engine Microsoft’s Bing has been continuously updated in the past couple of months. And it would seem that Google is taking notice if its introduction of a Bing-like background picture to its interface design is anything to go by. Bing’s interface design is attracting the sincerest form of flattery for good reason. Both search engines have a winning interface design that displays search results with minimal noise, but there are some differences between the two that deserve mention.

In what ways does Google have a better interface design?

At first glance I found Google to score higher on usability. Firstly the advanced search option was more clearly labeled on Google as ‘advanced search’. The blue letting immediately made it clear that it was a clickable link. On Bing this option was only labeled ‘Advanced’ and even though underlined it had the same font color as the text next to it. The news items results for my search input (which in case you were wondering was Snoop Dogg) appeared much higher whereas on Bing I had to scroll down all the way to the bottom of the screen. Google adheres to the quasi standard of showing the login option in the top right corner, while Bing puts the ‘Preferences’ option in that spot, requiring users to search for the login.

So why did such a seemingly good idea backfire?  Interface designers are often looking for new ways to improve their websites.  Yet, before implementing changes to an interface design, interface designers should think about the user’s reactions first.  The Google background flop is an excellent example of how to understand users and what they want.  And what users (especially search engine users) want is familiarity and universality within the interface design:

1.    Familiarity.  A web site as popular and (dare I say) archetypal as Google needs to be familiar to the user.  The plain white screen background is one of the hallmarks of the Google interface design.  It makes the user experience simple and is in no way distracting.  Over the years people have gotten used to Google’s basic design, and changing this learned pattern decreases the user’s comfort and familiarity with the site, a big usability no no.

2.    Universality. A site with such a diverse range of users needs to be equally accessible to all.  There were likely many users who enjoyed the artwork that graced the screen of Google’s homepage.  But many were probably confused, maybe even annoyed by it.  Lack of contrast or not knowing how much else besides the obvious background design had changed may have made users insecure.  The brilliance of Google’s homepage design is that it is so simple and uncontroversial that it makes the site attractive to everyone. Thus, the more universal the interface design, the more popular it will be among users.

There are many more factors that contribute to website usability, but Google’s new background image feature struck at the heart of the user’s expectations formed by two principles: universality and familiarity. Having a universal interface design that users are familiar and comfortable with is a great asset for a website that should not be put at risk.  As redundant as it is to say, interface designers must keep user needs and experience at the forefront of the interface design process.  However, this interface design platitude is worth eternally repeating because as Google’s background images faux pas shows us, even the big boys make mistakes.

A quick example: Say your presentation is centered around 3 keywords or themes. These can be displayed as really huge items with further information on those themes much tinier and clustered around the keywords. As you go through your presentation you could zoom further down in which ever direction and angle. Prezi’s interface design for creating presentations is a breeze to learn and use thanks to very little noise and a few but powerful options (to adjust size for example). Prezi is also optimized for editing. Say you were going to perform your trusty presentation to an audience but wanted to leave something out: simply change the path to exclude the parts you wish to exclude rather than deleting slides. Just drag and drop all you may want to work with onto the canvas and the world is your oyster! Google wave users can look forward to embedding Prezi presentations allowing for non-locking, realtime collaborative editing between multiple parties on multiple devices. Considering that Prezi is similar in functionality to the Microsoft Office Labs pptPlex concept project, a look into my crystal ball tells me that the next iteration after Office 2010 will also include a zooming user interface design of some sort. But for now Prezi seems the leader of the new school.

Real-time collaboration capabilities

One of the main benefits of cloud computing is its facilitation of real-time collaboration among users. Cloud app mobility allows people to work and access their material from anywhere.  When designing your cloud app, think about ways to facilitate communication among users. For example, provide users with chat features or the ability to simultaneously access and edit documents (features already provided by Microsoft’s competitor, Google Docs, or by other more specialized tools like the wireframe tool Pidoco).  If your cloud app is related to gaming, make sure that players can easily communicate with each other.  The beauty of the internet is its capacity to provide the world with instantaneous forms of communication.  Don’t forget to make your cloud app a shining example of why real-time collaboration is one of cloud computing’s main benefits.

Interface design

It is important to have a cogent and executable concept behind your cloud app, but it is even more important to have an interface design that supports your app’s usability.  Cloud apps are completely dependent on internet access.  Many of them are accessed through a web browser. Think about internet connections. It’s great to have a high fidelity interface design, but is it usable for those with slow internet connections?  Think about the simple things like browser bars, the back button, page linking, even a possible search engine.  Do all of these seemingly simple features assist your user or do they detract from your interface design’s usability by making the user experience convoluted? Do they integrate well with your applications navigation flow and processes or are they misleading? Your interface design should be so simple to use and seamlessly integrated with the browser navigation options that your users don’t have to think about or notice it (well, maybe you can add some flair—it should look nice).  If you want users to appreciate the substantive value of your cloud app and what it potentially offers them, you have to make sure that the structure is clean and usable.

Google seems to have done pretty well on these points. Now it remains to be seen how the new Microsoft Office Web Apps will fare.

The editing toolbar has also been revamped with the Article & Discussion tabs now on the far left of the main pane and the editing tab on the right side. The editing page has also been simplified to reduce noise and clutter employing collapsible menu items. A link and a table wizard have also been introduced to simplify the editing process. The revamp has been finished off with improvements in search suggestions among other refinements. All these changes to Wikipedia’s interface design work together to boost the ease of learning for new users, the efficiency of use for repeat users and the subjective satisfaction users feel when using the website. Other usability advantages that are brought about through the new interface design are the memorability of the system (is the new interface design like a bicycle that – once learned – users will be able to remember sufficiently well, even after a long period of time, to effectively use) and a lowering of error frequency and severity. It is often said that less is more, and Wikipedia confirms this view with its new website design. But the new interface design of Wikipedia doesn’t just do away with options but instead also repackages them in a more manageable and presentable format that offers much more, but with less noise, clutter, alienation and frustration.

Importance of usability

The manifold improvements undertaken by Wikipedia show how important usability and its impact on the users of a website – even such a well-known one as Wikipedia – are, especially when the users come from a wide range of backgrounds. The new interface design certainly is a step forward, but it remains to be seen how active the older Wikipedia users will become in editing pages and contributing their fading knowledge to the “collective memory”. This is a great case to prove that there is also a social or societal aspect of usability.

•    One-way linking:  A one-way link is a hyperlink that directs the user of your website to a different website, but only in one direction.  There is no reciprocal link, meaning that the website you link to is not connected with your own website. One-way links can be beneficial for your interface design because they bolster your link directory, but they can often be more advantageous for the websites you establish links to since you are basically providing these sites with advertising in your link directory, thus increasing their popularity.

•    Reciprocal linking: A reciprocal link is a joint link between two websites to guarantee mutual traffic.  You can submit your website to reciprocal link directories in order to network with other websites and increase your search engine popularity. With one way linking you provide your users only with links away from your website, but if you utilize reciprocal linking, various websites can provide their users with links to your website.  This increases the visibility and marketability of your own website.This method is valuable because Google, for example, uses link popularity algorithms as part of their ranking process.  The more your website appears in the link directories of other websites, the more popular your website will be.

•    Resource linking: Resource links are categories of links.  They can either be one-way or reciprocal.  In essence, they are hyperlinks to or from your website to another website deemed to be relevant or beneficial to users of your website.  Since you are posting links that are helpful to your users, i.e. links that correspond to the relevant content of your website, this method is extremely useful for increasing your website’s search engine ranking.  Search engines have recently made it clear that the quality and relevance of links that you post on your website are major factors in your website’s search engine rating.

Link building will increase the visibility and popularity of your website, but you should make sure that the link directories do not clutter your interface design. It is important that you establish well-organized link directories on your website, and it is vital that you find ways to have your website included in the link directories of others as this increases your search engine ranking.  You want your website to be seen as a common building block used in the continuous construction of the internet.

Apple’s influence is such that several websites such as YouTube, CNN, Vimeo, Reuters, Time, the New York Times, ESPN and more have converted content on their website to be streamed through HTML5. This along with Microsoft announcing HTML5 integration within its upcoming Internet Explorer 9 would seem to point to a future where Flash’s ubiquity will be less pronounced. Despite being squeezed out of the world’s most successful and lucrative mobile platform there are other encouraging signs for Flash. Android keeps growing in leaps and bounds, RIM is still growing, Samsung is releasing the Bada OS, Nokia and Intel have teamed up to launch the MeeGo OS, and Windows Mobile has been revamped as Windows 7 already boasting exciting handsets such as the Dell Lightning due to come out. Flash plug-ins can already be installed in jailbroken iPhones which even have a dedicated App Store in Cydia where developers can sell their apps. Upcoming tablet devices such as the HP Slate, the Dell Streak and the WePad all boast flash compatibility.

Perhaps another way for Adobe to counter is by (drum roll please!) emulating Apple! By this I am referring to the open source Webkit project which started out as Apple proprietary technology but is now being used by Nokia, Google, RIM, Palm, the KDE Project and more. Surely, if Adobe were to make Flash open source and also allowed other developers to improve the code, Apple’s major arguments against Flash would be shot down. The first being that Flash is a proprietary technology would no longer be valid and the second that it crashes often would be tackled by numerous developers who would then adopt and improve the then open source code.

HTML5 has to power to effectively render Flash redundant as far as the web is concerned but it is still a couple years away from mass adoption. What Apple is effectively trying to do is to hasten this. Websites such as YouTube are already in the process of making all of its videos available in the .H264 codec mainly to allow iPhone (and now iPad, too) users to use their website. In addition to numerous others that are “iPad ready” we can see a sort of conditioning at work that will no doubt have Adobe, a company that has long shared a symbiotic relationship with Apple, worried for the future. The way I see it is that they can continue as they are right now by betting big on systems like Android or they could, by going the open source route, make Flash even more entrenched while its ubiquity is still dominant. Perhaps then Apple would have to yield and allow not only for Flash to be used to code apps for the iPhone but also allowing Flash itself to be on the iPhone.

This is the fourth and last part of a four part blog post series about the future of the real-time web.

Real-time Collaboration: Utilizing the capabilities of the Web in Business

And there is yet another field where the real-time paradigm is causing disruption. In business where different people work together, saving time and increasing productivity is of great importance. That is one reason why businesses have long started adopting social networking to speed up communication and foster team work. Now, real-time is entering the picture in the form of real-time collaboration. The great promise of real-time collaboration is allowing work to be done across different teams, countries and even continents simultaneously – if necessary even while communicating directly! In a globalized world where virtual firms, international partner networks, and outsourcing are on the rise, this is a superb value proposition.  Modern applications provide collaboration features such as chat, audio and video conferencing, or digital whiteboards. But there is still more: From Google Docs allowing the sharing and editing of documents online and the upcoming Google Wave which even shows you live keystrokes of your collaborators as they type, more and more innovative real-time collaborative applications allow for an ever faster, virtually immediate turnaround, speeding up team work considerably. Other services that facilitate real-time collaboration include WebEx, an on-demand video conferencing suite or pidoco°, a wireframe software used for rapid software prototyping and user interface design, which even permits synchronous remote usability testing. Many of these applications mainly work online and are offered as software-as-a-service.

Conclusion: Where the Real-time Web is Going.

With more and more software applications operating through the cloud computing model and being operated through web browsers, the web of the future (secure and adequate internet connection permitting) will be an even more virtual construct, having more in common with outsourcing than inside contracting. It will be the basis for real-time applications and real-time collaboration – which can be considered a combination of real-time communication and real-time editing. Services such as Mashpedia and Kosmix aggregate your search input with content from wikipedia, YouTube, Flickr, and other sources, as well as live feeds from websites such as Twitter to effectively usher in an era of the real-time encyclopedia. And there are many more examples. Morgan Stanley recently released a report showing that the mobile internet is expected to surpass fixed internet within the next decade, allowing for even more immediate exchange of information, whether at home, at work, or on the go. The trend is going toward real-time interaction in all areas of our lives. The future of the real-time web is in fact happening right now!

This is the second part of a four part blog post series about the future of the real-time web.

Real-time Information: Importance of Filters and Agents in Making Use of Available Information
The internet has been a great promoter of data generation, with estimates of a petabyte of data being generated daily (that’s 1 million gigabyte or about ten thousand large hard drives each day)! The great thing about the internet is that data is not only generated by professionals or institutions as is common with traditional media (think of TV stations, publishing houses, etc.), but also comes from a large amount of individuals. The growing importance of networks such as Twitter and Facebook, for example, has led to Google indexing user-generated content in its search-engine.

Data on its own is abundant and can exist in many forms. Every second, new data is released on the web in real-time and becomes accessible immediately. The data becomes information after it has been given meaning by way of relational connection. So identifying and combining relevant data becomes the challenge. Software solutions such as the open source Hadoop project help in processing large amounts of data. Today, filters and agents provide users with information relevant to them. Most websites today are accessed via search engines that allow users to identify relevant information through search terms. And since there is so much information out there on so many websites, those that maximize usability and user experience will likely be winners in user retention – the real capital of many websites. Irrelevant or hard to retrieve information will only serve to repel users from web services. With relevance being key, suppliers of intelligent systems will continue to be heavyweights of knowledge. One should look no further than Google or Wikipedia as examples of successful agents and filters. Other important information services include RSS feeds and other means of staying up-to-date on new information as it comes online – in real-time.

Storyboarding How-To

Storyboards can be created from (usually smaller) sheets of paper, post-it notes, using a white or black board, using office software programs, or using a more specialized software program. A storyboard does not usually require a high level of artistic detail; instead it should only focus on details that are relevant for the interface design of the website. Thus, a storyboard can be built with simple shapes, such as basic line drawings. In some cases, simple wireframe prototypes can be used for storyboarding purposes. There are a few wireframe tools that even allow for wireframes that look hand-drawn. For optimal results, keep the following basics in mind while creating the drawings of your storyboard:

1.    Website navigation: Include the buttons and links that users will need to find their way through the website.

2.    Content sections: Don’t waste time on details, rather focus on how you plan to present the relevant content areas?

3.    User login boxes: Some websites have a login section. Include it if it’s relevant.

4.    Search boxes/engine: How do users of the site find relevant information?

5.    Page connections: How do individual pages of the website relate to one another?

Simple storyboards allow you and your clients or prospective users to focus on the important aspects and the usability of the user interface and not on details, such as graphics, color, fonts or other design characteristics. Thus, when creating a storyboard prototype, focus on the fundamentals first. Solid fundamentals usually trigger innovation in later stages of the web design process.