Category — Rapid Paper Prototyping

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.

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

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.

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

From Rapid Paper to Rapid Digital Prototyping

Through prefab screen elements (e.g. radio buttons, links, navigation items, controls etc.) information architects 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.