Category — Prototyping

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

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.

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

Realtime Communication: Social Networks and the public sphere

There is another area of the web where the trend towards real-time interaction has left its imprint: communication. In the spirit of Jurgen Habermas’ work on the public sphere, social networks and the real-time web help rekindle public debate and discussion. In the past citizens would meet in public places, such as coffee houses and public squares, for discussions, in some cases serving as a counterweight to political authority. Today, the public sphere has expanded well beyond the physical constraints of a singular location and all the limitations that come with it (such as accessibility and time constraints). Public discourse can now take place over the internet, through social networks, and reach a much bigger and more diverse audience. Through the use of technologies such as RSS feeds, chats, and micro blogs like Twitter, user generated textual communication is happening in real-time with users being notified when new messages arrive and able to communicate back instantly. Social networks such as Facebook, StudiVZ, or XING allow their members to use messaging aside from traditional email, to benefit from even quicker return times. And the system works: Facebook is now one of the most visited websites in the world. But this shift to real-time communication via the web also has scientific impact. Sitaram Asur and Bernardo Huberman, two researchers at HP Labs, were astonished to discover through a computer model factoring in two variables (the rate of tweets around the release date of a movie and the number of theaters it’s released in) that they were able to predict opening weekend box office sales with 97.3% accuracy!

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.