Hello everyone,

I said to myself that it will not harm anyone if I just step back a bit and take a look to some of the features that make FlairBuilder different. And the first thing that came into my mind was interactivity, something that I feel it makes FlairBuilder a capable prototyping tool.

There are many tools out there that are said to create interactive prototypes and click-through wireframes. While that may be partially true, I think it’s important that we understand what is an wireframe and what is a prototype, what makes them different, when to use one of the other, and what should be the expected results.

There are actually three main types of artifacts produced in order to communicate the ideas and concepts behind a website or application: wireframes, mockups and prototypes. Each of this artifact will help you answer one of the questions:

• What are the major layout elements? (wireframes)
• How will it look like exactly? (mockups)
• How will it work? (prototypes)

With these questions in mind you’ll know what to do in order to meet your client expectations and to properly communicate the product you are about to start developing. There is a lot to say about which type of artifact is most suitable for which type of client. I will not dive into that right now. I just want to highlight a particular artifact, namely the prototypes and what makes prototypes different and, in certain situations, considerably more efficient.

What is a prototype, again?

A software prototype is a digital artifact that reassembles very closely an yet to be built software product such as an website, a desktop application or a Rich Internet Application.  The key here is the level of resemblance between the prototype and the final product. While a prototype doesn’t have look exactly the same as what the client will get, it will most certainly have to behave and interact pretty  much the same way. That is because the very purpose of a prototype is to mimic the way people will use the final application or website.

There are so many questions that remain unanswered or even unspoken until the release day, only because your product hasn’t been properly confronted with the real world usage.

What is an interactive prototype?

Since prototypes mimic real applications, prototypes interactivity is measured against real software interactivity. When it comes to communicate an important design decision, it’s always a good thing to capture that idea in a prototype and let everyone interested visualize it and offer feedback.

Don’t expect anyone to imagine things for you! I can not stress this enough. Explaining in words how software should behave is generally dangerous if not doomed to fail. People need to see in order to understand, otherwise the communication gets tedious and inefficient.

A piece of software that appears to be functional will pose real problems and will raise real questions. And by real I understand something that was born out of real usage: page by page, form field by form field, while taking the time to actually read text, filling in form text fields, checking/un-checking checkboxes etc.

More than images can say

With the raise of the Everything 2.0, software user interfaces have become more and more demanding in interactivity, richness, responsiveness, fluency etc. Making the best design decisions and taking the right approach every time is hard and time consuming.

We need cheap and fast ways to test as many possibilities as possible before sticking with one approach. That’s were prototyping comes in. Rich interactivity is not something you can simply mock-up in Photoshop and annotate with tons of explanatory text. Nor will HTML hyper-linking help that much. Today’s web interfaces got so enriched that sometimes you have no other option but only get wet in coding those very dynamic potions of the UI.

Even if you have the know-how to code it or use a dedicated tool, prototyping rich UIs is a much more preferable to mere static images linked together.

How does FlairBuilder solves the problem?

In many ways! For now I will only highlight the interactivity related features of FlairBuilder that help you prototype rich interfaces.

Real widgets bring real results

FlairBuilder is probably the first dedicated prototyping tool to use real widgets in the prototypes. What does it mean? It means that every widget in the component palette is actually a real widgets as those used in real applications.  This way you may achieve the same level of interactivity as with coded prototypes without writing a single line of code.

Prototypes created with FlairBuilder have the full range of capabilities and characteristics that real applications have, from mouse and keyboard user interaction to page navigation, dynamic disclosures and transitions.

Site navigation and on page transitions

Most likely you will want to prototype simple or complex user work flows that consist of a sequence of steps on the same screen or on different pages. Either way, with FlairBuilder you have enough flexibility to accomplish that. With a flexible way to organize your project pages into folders and sub-folders and with an indefinite levels of master templates for each page.

A comprehensive set of predefined actions give you the tools you need to prototype the common use cases: page to page navigation, opening modal pop-up windows as well as non-modal floating panels. You can also mimic alternative views to the same content or related sections by using Tabs or Accordion menus or the Card Stack.

And much, much more…

Of course, there are so much more features in FlairBuilder that make prototyping easier and faster. I will try to detail them in future posts in this series or ‘Feature Highlight’ posts. I think this is good for me to detail as much as possible the capabilities and the features of FlairBuilder as  a product.

Until next time, have fun prototyping!