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.

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

The internet is based on links— it wouldn’t exist without them.  While search engines organize the internet, links build it. Links facilitate the internet’s ubiquitous exchange of information. If you want to improve your interface design’s online visibility, then building a link directory is a good strategy to begin with.  Link directories that are well-designed and contain helpful, related, and relevant links make your interface design more appealing to users.  In addition, the better your link directory, the higher your interface design’s search engine ranking.  This is because websites with excellent link directories are considered authorities on the given content of the site.

Link building strategies

There are various strategies you can employ when creating your website’s link directory.  When building your website’s link directory, think carefully about search engine optimizations.  Is it important for you to have a website that is highly rated among search engines?  Undoubtedly, a high search engine ranking is important to you, and some linking methods are better for search engine optimization than others. Here are a few popular methods of website linking that you can use

Adobe Flash (née Macromedia Flash) has become so ubiquitous with the internet that many users don’t even notice its presence underneath the interface design, unless of course you are an iPhone user! Most of the videos on the web are delivered via Flash. Not only video, but also games, widgets and apps that deliver content such as music use Flash. The iPhone’s lack of official Flash support has become such a hot issue and is nicely parodied by this photo that lampoons the iPad’s usability and user experience credentials. One of the upcoming Flash CS5’s flagship features allows developers to re-purpose existing Flash code and export it as iPhone, Android or Blackberry applications. To date, over 100 apps in the App Store have been created by a small group of developers using private beta versions (and this includes games that can be played concurrently by, say, someone using an iPhone while the other uses an Android phone).

Along with announcing its upcoming iPhone OS 4, Apple has changed the terms to section 3.3.1. of its iPhone Developer Program License Agreement to effectively prohibit the use of cross-platform software toolkits such as Flash and MonoTouch. But aside from Apple simply not wishing for a competing company to usurp its territory, there are a couple of other possible reasons not to allow cross-platform toolkits. The first has to do with maintaining quality. A single app based on Flash code for three different platforms might not play to the strategic advantages of each. Flash also saps a CPU’s power and is blamed by Apple to cause most browser crashes on the Mac OS X. Another reason is simply that Flash is proprietary technology. Unlike CSS, Ogg Theora, Javascript or HTML5 for that matter, Flash code is the fiefdom of Adobe. Whether or not iPhone apps created for multiple platforms would maintain ‘quality’ is open to debate, after all YouTube et al seems to work just fine whether one may be using a Windows, Mac or Linux computer. Regarding crashes on the Mac platform, Adobe itself has promised to speed up and improve Flash Player. Yet, also the argument that Flash is a closed proprietary system seems valid.

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 first part of a four part blog post series about the future of the real-time web.

The history of communications and information sharing has been overarched by an ever increasing acceleration towards real-time interaction. This shift is exemplified in the evolution of printing. Johannes Gutenberg’s 15th century breakthrough printing technology was used in the beginning to produce copies of the Bible (referred to as the Gutenberg Bible), one might say in order to share a collection of narratives, reflections and commentary on events set, at the very latest a millennium and a half before its production. The dissemination of printing technology led to the production of more and more current media from official government bulletins circulated in some centralized empires to the invention of daily newspapers, via printed periodicals, in the early 17th century. Emergent communications technologies such as telegraph, radio, television, computers, and the internet have since exponentially sped up the trend towards real-time diffusion of information as the time between emergence, or occurrence, of events and dissemination of the related information became shorter and shorter.

The advent of social networking websites, blogs and the availability of such media in a mobile context, enabled by increased miniaturization, sophistication and relative cost effectiveness of gadgets (such as mobile phones, cameras etc…), has allowed for images and information of important public or private events, including natural disasters like earthquakes, political events like election results, or the emergency landing of a commercial airliner in the Hudson River, to be published on the web before even traditional media houses can. As we venture into the future everything becomes faster, both our private day-to-day lives and business-related communication! We are moving to a real-time era, and here’s how the web supports this shift.

The Real-time Technology: Technology as an Enabler

As with the printing revolution in the 15th century, technology is a driver in the shift to the real-time paradigm. The development of the internet layed the foundation for the quick transfer of information of various formats: text, images, audio data, and even video files. Today the development of high bandwidth internet connections, mobile broadband, multiple-core processors and other technologies mean that users have not only faster access to data but can process even more of it more quickly (e.g. HD video). This has enables many of the modern applications that rely on almost instantaneous transmission of large amounts of data. Cloud computing, whereby technological capabilities are maintained off premises and delivered on demand via the internet, enables users to access supercomputing power via technologies such as the computational answer engine Wolfram Alpha to answer even the most convoluted equations within seconds using an active internet connection. An example of cloud-based applications is Spotify, a music streaming software-as-a-service that allows users to store music in the cloud, meaning online. Whereas in the past music collectors had to physically collect music through vinyl and CDs, the internet revolution allowed for a huge amount of music to be downloaded into the finite and relatively small dimensions of a hard-disk. The catch was always having to download and, oftentimes, document one’s collection. Now, the music is already ready for you to stream within seconds whenever you please – in real-time.

Key Benefits of Storyboarding

Storyboarding is useful for outlining, critically reviewing and optimizing the structure of a website and its interface design. It helps gain a good understanding of users’ requirements regarding a website’s interface design and structure and is a helpful communication tool to explore the tasks that need to be performed on a website or the context in which it will be used. Storyboarding is ideally pursued before the development process begins. When creating a storyboard, one should keep in mind these critical usability questions:

1.    Who are the visitors of the website? What is their background?

2.    What do they want to know? What do they need to know?

3.    How do visitors want to use the website? What tasks do they want to perform?

4.    How can I make navigating the website easy and simultaneously interesting for visitors?

Keeping these questions in mind when planning a website it is much easier to increase usage efficiency and marketability of a website, prevent costly development errors due to gaps in the requirements analysis, and ensure a great user experience. Creating websites that are well planned with user friendly interfaces will be more profitable for your project.

In this two part blog entry I shall explain storyboarding in the context of creating an interface design for a website. This blog post may be of interest for anyone interested in designing a website and is looking to gain more knowledge of how storyboarding aids the development process. Part 1 will focus on the basics and benefits of storyboarding while part 2 will go into some handy tools and resources.

Storyboarding Defined

Simply put, a storyboard is a series of sketches that allows one to visualize and organize content in films, narratives or interactive media, such as websites. Storyboards can be considered a kind of usability prototype that can help outline the structure and configuration of a website or clarifying a certain use case scenario. Storyboarding is the action of creating and using a storyboard to design a websites with a great usability or user experience by breaking down its individual aspects to identify critical functions, navigation paths, and other areas for potential improvement based on the perception of optimal usability from your user’s perspective. One might say that storyboarding can be used to create a blueprint of a website.