Category — Prototyping Software

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.

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.

Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of Rapid Paper Prototyping, but adds interactivity (making wireframes clickable) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration features enable interface designers to new ways to work with much better time allocation, leaving more time for the creative process that really counts.

For the people who are into interface design, Rapid Paper Prototyping is old school! But ever considered doing screen design on screen?
With pidoco’s web-based prototyping software, interaction designers and screen developers can save valuable time, optimize communication within the team and build better websites for the web.

Rapid Paper Prototyping has already been in the know for a while to get a website started. The basic concepts of the layout will be put on paper and tossed around in the team. This prototype will then be put through a refinement process by implementing feedback from different stake holders. This paper wireframe will eventually act as a rough guide for the whole project – from start to finish. Some screen-designers even use these very limited paper prototypes for performing usability tests. Revealing usability issues in the prototyping phase can save a lot of money, since later changes in the so called ‘finished’ web project are minimized.

However, there are some drawbacks to Rapid Paper Prototyping.  Prototypes are not easy to add to the document servers and also difficult to collaborate on over different locations. Scanning paper prototypes and making them ‘clickable’ for testing use cases is also a time consuming task as we all know!

That is why many screen designers create their prototypes directly in MS PowerPoint or MS Visio and have them distributed to the relevant sources. True, that way one can share the designs more effectively but it is not really more interactive than making duplicates of a piece of paper handing it to colleagues. The prototypes still do not show the real capabilities for test user excitement:  links, dynamic menus and combo-boxes etc. cannot be reproduced effectively and need to be explained individually in long specs. Again, more time and effort has to be invested to get the message across.

pidoco° has spotted this problem and made it their duty to tackle it by providing a really nice web-based interface design software.

Now, where we have illuminated the hygiene factors, let’s move on to the higher level: the user experience. The difference between good usability and a real user experience, one can say is like the difference between just liking it and getting people to talk about it!

Serving users well and delivering everything that they expect is usability – a great user experience however is, when your site over-delivers exceeding expectations in some key areas. To create a great user experience, it is important to find out, what your users really want and expect. This can be done by user surveys and other (qualitative) studies. When you are clear about that, make sure, all hygiene factors are implemented and in place. Now it’s time to show your creativity and define areas in which you can and want to exceed expectations.

I suggest to either choose areas with low user expectations, since those are the low hanging fruits where it’s easy to over-deliver or issues that are the deal breakers where it is really important (and worth it) to put some more effort in to create something really impressive for your users.

But when creating real user experiences, do not make the mistake to just focus on your website! User experience has got to do with every point of communication over all the different media and channels (product, website, support etc.) between you and your users. It is like a web analytics system which only shows its real value, when the loop is closed and you can track users from the

Coming from a web design background we all know that usability is an important factor for the user adoption of a website or web application. But I think, these issues should nowadays be rather hygiene factors and good businesses should focus on the overall user experience, since this is what gets people talking and what multiplies success. But let’s take a look at the usability first.

Components of Designing Usability

Usability Design spans several dimensions we want browse though briefly, which are: taxonomy, interaction design, visual design, user feedback and content.

Taxonomy: focuses on the consistent classification of content, navigation and user orientation. Does the user know where she is at all times? Does she have ways to navigate to different areas of the website and is it clear by which clicks the user can complete a task (e.g. find something)?

Interaction Design: takes care of a consistent use of UI patterns and site components and aims to minimize the learning curve and to increase accuracy and efficiency of a task. Good interaction design ensures an always comprehensible user interaction and reduces frustration on the side of the user.

Visual Design: is aimed at optimizing the visual communication between user and website (or website’s content). Visual design communicates the underlying site’s structure to the user, pointing out relevant information or interaction artifacts at the appropriate time in the process. On a more general basis this manifests in graphic design standards (aka. style guides) and branding guidelines for a website.

Content: reminds you that even if you have perfect navigation and high usability, it all doesn’t help, when there is no relevant content. And relevant means a) there is everything, users want (including help sections and support pages) and b) that the provided content does match the expectations and is helpful.

In a heuristic evaluation, experts are sometimes ‘overly critical’ and provide only feedback on the problematic aspects of the interface, as this usability method really focuses on mistakes and not on overall feedback (positive and negative).

Although experienced in the field of (interface) design, your ‘experts’ need to have at least some experience with heuristic evaluation and must consider things like having the appropriate target audience in mind when judging the design of your site or interface.

And, of course, this is a purely qualitative usability method and can only provide a guide line based on usability best practices but does not substitute (rather complement) quantitative user tracking when the project is finally in use.

Conclusion about the Usability Method Heuristic Evaluation

Heuristic evaluations are the perfect usability method for testing and reviewing design concepts in a very early stage of a project (e.g. on a wireframe basis). Thus the feedback comes at the right time (before detailed design or even programming has started), still being possible to be considered in the next design phase. And with a heuristic evaluation you collect a lot of helpful insights to create customer centric design with rather limited effort.

Readings and Recommendations

To perfectly enable heuristic evaluations in an early stage of your project, interfaces should be sketched with a wireframing tool. Some of them even have the technical solution integrated to conduct heuristic evaluations remote via internet. Just google for things like “usability wireframe tool” .

However, the world is not just brilliant with digital interface prototyping. Although the prototypes are available in a digital format, theoretically allowing to share and interact on the concepts, many wireframing tools lack useful collaboration features. But given the fact that life in an agency circles around projects with different internal and freelance team members and sometimes several locations, (online) collaboration becomes more and more important.

Also the fast and steady technical invention of new web and interface controls (just imagine how Apple’s iPhone has influenced user behavior in the web), make it hard for the interface design tool providers to keep pace with development of the latest controls and a natural lag until these controls find its way into the wireframing applications is imminent.

But imagining the funny fact that these new and behavior breaking controls also have been developed and tested with interface design tools like the ones described here, the future looks bright for digital interface prototyping.

So we only can recommend testing these interface design tools since they all offer free trial periods of some kind. As a good example of what’s state of the art in the field, we have listed a completely web-based wireframing software with many interesting real-time collaboration features in the resources box.