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.

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.

Through prefab website elements (e.g. radio buttons, links, navigation items, controls etc.) GUI designers can create clickable and animated web or software interfaces in no time. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that will later be overhauled anyway.

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

For the usability method ‘heuristic evaluation’ a few usability experts gather around an interface prototype or website and evaluate whether each page and control follows established usability guidelines or usability patterns. Compared to the usability method ‘expert review’, where the expert’s feedback is rather open, in a heuristic evaluation the usability check is based on a list of established usability design patterns (aka. heuristics).

How to conduct a Heuristic Evaluation

In a heuristic evaluation, usually around 3 usability experts, which are in the best case specialists from the field of human computer interaction (HCI), but in the more common case fellow designer with an avocation in usability and user centered design, judge all elements on a website/interface, the structure and workflows, write down notes and prioritize them by impact on the overall user experience. The result is a usability report that presents an actionable check list of aspects to be solved by severity – sometimes even altered by alternative design solutions.

Advantages of a Heuristic Evaluation compared to other Usability Methods

If you are a web designer or information architect, you will probably know your peers and can easily gather 3 friends to review your site in a heuristic evaluation, checking with the latest usability patterns. This makes it rather cost effective, since you can in turn provide feedback in a heuristic evaluation for their screen designs.

As there is no installation or tech setup required, it is easy to implement too and a heuristic evaluation can be obtained early on in the design and planning process. Applying heuristic evaluations and reviewing conformity to established guidelines in the early stage of prototyping keeps your project within budget and avoids re-designing of already detailed screenshots or even re-programming of code.

With such a heuristic evaluation, studies have shown that around 90% of all usability bugs on a website can be traced.

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.

When you are into interface design, Rapid Paper Prototyping is an old hat! But ever considered doing interface design on screen?

With pidoco’s web-based screen design software, interaction designers and screen developers can save valuable time, optimize communication within the team and build better interfaces for the internet.

Rapid Paper Prototyping has already been established as THE way to get a GUI started. Rapid Paper Prototyping is about sketching ideas with pen an paper to be shared and iterated within the team. This concept will then go through an ongoing, sometimes collaborative, design process by implementing feedback from different stake holders. This paper-built prototype will finally act as a roadmap for the whole project – from beginning to the end (but is there a real end?). Some screen-designers even use these basic sketches for running usability tests. Revealing usability issues before programming can save a lot of money, since later alterations in the so called ‘finished’ web app are minimized.

However, there are problems with Rapid Paper Prototyping.  Sketches on paper are only scanned to add to the project documentation and also difficult to collaborate on in larger teams. Transforming paper sketches into interactive, digital documents for getting the grip on how workflows are reproduced in the design is also a time consuming task as we all know!
That is why many companies create their wireframes directly in MS PowerPoint or InDesign and have them send to the relevant sources. True, that way one can share the data more effectively but it is not really more interactive than making copies of a piece of paper handing it to the team. The Visio-type static wireframes still do not show the real functionality:  links, dynamic menus and combo-boxes etc. cannot be reproduced effectively and need to be explained individually in long paragraphs. Again, more time and effort has to be invested to get the message across.

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