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.

In this two part blog entry I shall explain storyboarding in the context of creating an interface design for a website. This blog post may be of interest for anyone interested in designing a website and is looking to gain more knowledge of how storyboarding aids the development process. Part 1 will focus on the basics and benefits of storyboarding while part 2 will go into some handy tools and resources.

Storyboarding Defined

Simply put, a storyboard is a series of sketches that allows one to visualize and organize content in films, narratives or interactive media, such as websites. Storyboards can be considered a kind of usability prototype that can help outline the structure and configuration of a website or clarifying a certain use case scenario. Storyboarding is the action of creating and using a storyboard to design a websites with a great usability or user experience by breaking down its individual aspects to identify critical functions, navigation paths, and other areas for potential improvement based on the perception of optimal usability from your user’s perspective. One might say that storyboarding can be used to create a blueprint of a website.

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.

The pidoco° screens design software consists of three main entities which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of interactive web design.

Clickable wireframes 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 concept sketches, just use the digital prototypes to perform a plug&play 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.

But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the 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 designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

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.

Introduction to Rapid Prototyping
In research, development and study, prototypes play an important role. These developed prototypes help to do testing prior to production and help to pinpoint the possible problems that are occurring due to the design faults. Earlier generating a prototype model was extremely costly process and also time taking. But with the aid of Computer Numerically Controlled (CNC) Machining, the speed at which a prototype is developed has increased. With Rapid Prototyping, this time period has even decreased from few days to a few hours.

Rapid Prototyping is an additive manufacturing process that generates a model of an object directly from a CAD model by building it in layers. For this computerized equipment are used that builds a three-dimensional model of a casting from a CAD drawing.

There are different forms of Rapid Prototyping available depending upon the needs. One can differentiate between them by the methods these systems employ to make the layers. Following are few of the main types of Rapid Prototyping:

Stereolithography (SLA)
Stereolithography uses UV ray to solidify liquid acrylic polymer layer by layer on a moving platform and after many layers, the prototype in the preferred form is formed. This process is carried on in a VAT, a device that is filling up with photocurable liquid acrylate polymer. Stereolithography is one of the most used forms of rapid prototyping because of accuracy (Tolerances= 0.0125mm), less time taken (depends upon the size and complication of the part) and where parts details are fine and their geometry is to difficult to machined.

[Read more →]

Through prefab website elements (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.

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.