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.

Through prefab stencils (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces within minutes. 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.

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 interface design software, interaction designers and screen developers can save valuable time, enhance the creative process and build better interfaces for the internet.

Rapid Paper Prototyping has already been known to be the solution to get a web-application started. The basic concepts of the layout will be put on paper and tossed around in the team. This prototype will then go through an iterative design process by integrating feedback from colleagues or even clients. This paper prototype will eventually act as a rough guide for the whole project – from start to finish. Some screen-designers even use these basic sketches for performing usability tests. Revealing usability issues in the prototyping phase can save a lot of money, since later alterations in the so called ‘finished’ web project are minimized.

However, there are some drawbacks to Rapid Paper Prototyping.  Prototypes are only scanned to add to the document servers and also difficult to collaborate on in larger teams. Transforming paper prototypes into clickable wireframes for testing use cases is also a time consuming task as we all know!

That is why many companies create their concepts directly in MS PowerPoint or InDesign and have them distributed to the relevant sources. True, that way one can share the data more effectively but it is not really more dynamic than making copies of a piece of paper handing it to the team. The Visio-type static wireframes 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 text. Again, more time and effort has to be invested to get the message across.

But even if screen designs have already been made in some hi-fi graphics software (e.g. InDesign, pidoco° can add value to the design process by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the feedback process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

The pidoco° screens design software consists of three main modules which complement each other perfectly. Together, they enhance the interface design process and optimize the general workflow in all stages of collaborative web design.

Digital prototypes are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the web concept, just use the clickable wireframes to perform a easy to set up remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.