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 few weeks ago, Google decided to make a daring change to its interface design, one that was meant to make the site more aesthetically pleasing to its millions of users.  Google rolled out a set of backgrounds by well-known contemporary artists as a promotion of a new feature which was to allow users to choose and upload personal photos as a backdrop for the infamously plain, white search engine screen.  At the drawing table, this must have seemed like a fabulous idea to Google designers, a way to refresh their interface design and permit users to have more control of its settings.  However, like the plethora of ideas that are great in theory (but not in practice), Google’s new feature backfired.  On the day the new backgrounds were introduced, the number 2 trending search on Google’s trending pages was “Remove Google Background.”  Search engine searches speak volumes about what users want and are looking for.  Clearly, Google users were not looking for works of art to replace the white screen.  Within two days Google was back to its old design and users were happy to have the unadorned consistency back.

The Worldwide Developers Conference 2010 promises to be full of surprises when it kicks off on June 7 in San Francisco.  Apple’s chief executive officer, Steve Jobs, guarantees that the customers „won’t be disappointed“ by Apple’s newest developments. The focal point of the WWD will be the new iPhone 4G.  Apple was furious over leaked images of the iPhone a few months ago, but since the images did nothing but stir the public’s interest in the new device, the expected release of the iPhone 4G at the WWD will likely double the event’s publicity and excitement.  Here are a few things to expect from the new iPhone 4G interface design (these features are still firmly rooted in the world of speculation):

New Operating System

The iPhone 4G interface design will likely be powered by the new iPhone OS 4. The key new feature for this system is the facilitation of multitasking—users will be able to run apps simultaneously and switch between them with fluidity.  For example, users will be able to instant message a friend, look at photos and listen to their playlist all at once.

Prezi is a Flash-based app that is also taking a revolutionary approach to presentation tools by employing a zooming user interface design approach. A ZUI is a type of GUI where users can change the scale of the viewed area in order to see more details or less and thus peruse through documents. Traditional presentation tools, such as PowerPoint or Keynote, use an interface design based around the use of linear slides modeled after traditional slide projectors. By using a zooming user interface approach, Prezi’s presentations are more like one giant slide or a blank canvas if you will. All the different components of a presentation (text, pictures, video, audio etc…) or added on the canvas and a path through different objects and frames can be defined non-linearly as a visual map that users zoom in and out as the presentation unfolds across the matrix of ideas on the virtual canvas (and making slide transitions so last century)!

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.

Microsoft delivered a clear one-two punch to Google with its announcement of the simultaneous release of Office 2010 and the new Microsoft Office Web Apps in June 2010.  It’s no secret that the two technology giants have been at each other’s throats over the last few years, but “a lot of people say we will see pigs fly before we see Microsoft Office running in the clouds” said Microsoft’s senior director of platform strategy, Tim O’Brien.  Many in the technical realm never thought Microsoft would offer Office as a cloud application.  This new turn of events emphasizes just how critical web-based applications and their battle with Google has become — you could even be so bold as to call it a software usability war.

Micrsoft is clearly capitalizing on the popularity and usability of cloud apps. Cloud applications provide users the ability to instantaneously access and use software via the internet, avoiding the hassle of messy installation processes and facilitating a convenient user experience.  Cloud computing is cost efficient, flexible, and completely mobile. As the world of technology continues to evolve, cloud apps could become the software usability staple of the future. If you are thinking of designing your own cloud app, remember two things to ensure usability success: Real-time collaboration capabilities and interface design.

The world’s most popular encyclopedia just got a makeover. After months of beta testing by 500,000 account holders the new interface design theme, called Vector, went live replacing the old Monobook skin. The redesign follows a usability study conducted in April 2009 by the Wikimedia Usability Initiative Team along with a user experience consulting firm mainly focusing on the editing experience and process, drawing the following conclusion among others: that three quarters of updates are made by men of an average age of 25. Although 80% of users would like to edit pages found the editing process under the previous skin too intimidating. The usability studies found that young people were more willing to experiment with editing while older users were afraid to destroy the site.

A sleeker interface design improves usability

The result is a much sleeker interface design that scores big on usability providing users with “so much more less”. The new interface design looks less dated than monobook. For starters there is much less noise around the interface design and the menu items interaction, toolbox and languages are now expandable/collapsible, instantly clearing Wikipedia of unnecessary clutter that often goes unclicked. Navigation on the page has been improved with the use of much bigger tabs. The search bar has been moved from the middle of the left sidebar (where it was previously hidden between menu options) to the top right hand side of the website under the ‘log in/create account’ area. A discernibly big space between the two is there to make sure that users, particularly those with jittery hands, don’t accidentally click on log in and vice versa.

What are the limitations of paper prototyping?

Of course, as with all things, paper prototyping has its limitations.  Paper prototyping’s main drawback is also one of its main benefits: it’s on paper.  While this method is cheap and easy to use, it is also static and not interactive.  A hyperlink on paper looses all of its functionality as do drop-down menus, datepickers and text input fields or the like. Simulating the elegant subtleties of all these effects can be a real challenge using print-outs with a person fiddling through a stack of paper trying to find the right screen.

Rapid Digital Paper Prototyping with Wireframe Software

Thanks to wireframe software provided by companies such as Pidoco, you can infuse your prototypes with interactivity and sophistication.  The Pidoco wireframe tool allows you to create clickable wireframe prototypes that embrace interactivity with the ease of drag and drop functionality without the need for programming. These prototypes are created by way of web-browsers without having to install any software. Paper prototyping really is a great usability method, but if you are looking for something more collaborative and re-usable, take advantage of wireframing software to create interactive digital wireframe prototypes that can readily be adapted and test remote in online sessions.

This blog post is the second in a series of two about paper prototyping as a usability method.

How do you undergo usability testing with paper prototypes?

Paper prototyping as a usability test works best in the format of a workshop that is attended by both users and developers.  You should select users that represent the demographic targeted by your interface design.  Tasks, or use cases, have to be designed for users to go through before you can create the paper prototypes. Make sure to review your paper prototypes before you use them in a usability test.  During the usability test it is important to have a good facilitator, someone who is able to take note of issues raised and encourage users to be open and communicative with their feedback.  At the end of the usability test, make sure that the facilitator communicates the feedback/results to the rest of the team.

The four stages of prototyping

Paper prototyping is usually performed in four stages:

1.    Concept design state.  During this stage you brainstorm different approaches and strategies with a view of learning which thereof fulfills the targeted usability requirements.

2.    The interaction design stage.  This is when you organize the structure of your different interface designs.

3.    The screen design stage. This is when you create the initial graphical user interface designs by drawing them on paper.

4.    The screen testing stage. This is when you test and refine your interface design.