I have always been fascinated by writing and creating. As a snotty teenager I loved writing plays and stories and when a friend showed me how I could link one page to another my imagination exploded. Sixteen years later I am stitching content together to make stories; never ending stories.

What do I mean by a never ending story? I mean that designing for the web should have a continuous flow like a water slide with the user being guided through to your “required user tasks”.

In this article I’d like to show you one of the tools I use to bring interactivity to my stories using Flairbuilder.

Do Wireframes Answer all our Questions?

When teaching web design I always explain that wireframes are essential for mapping out elements on a page. They should be kept as simple as possible and concentrate on the story of the page, type of elements and how the user interacts with them. For me everything on the page needs to have a purpose and work towards the required user tasks. Required User Tasks are the aims of the site including things like signing up for a newsletter, purchasing a product or signing up for a service.

How do elements interact between pages? These types of questions require you to also design the interactions. If the user is logged in, how will the navigation change? When the user clicks this button what happens? These are questions that only interactive wireframes (or prototypes) can answer.

The questions should revolve around the user and guiding them and helping them achieve tasks. Looking at flat wireframes cannot answer this entirely. When the user can push, pull, drag, drop and navigate through a design then you will know if your UX is designed correctly or not.

Faster Than a Speeding Prototype

As you will see later I can create an interactive design in under 5 minutes. I challenge anyone to achieve that with code! There is a lot of talk about how coded prototyping right away is better than wireframing and I agree with many of the points. However we are talking about interactive wireframes (which is what a prototype essentially is) and they are much quicker to create. They get you to the user testing phase much quicker without getting bogged down with semantics and constantly having to refresh browsers every two seconds.

Dragging and dropping an element from the components bar will always be quicker than coding it. Resizing a container with your mouse will always be faster than coding a row and working out which class to use in the grid system. Speaking of grids, we can assign a grid to our design in Fliarbuilder which helps with both the PSD and of course the coding stages.

With the rise of technologies like SCSS and LESS, taking re-usable code to even sexier level, I think we need to identify site wide re-usable elements. To start writing any CSS before we know the whole story is a mistake in my opinion.

“Seeing is Believing and Experiencing is Understanding”

We have a choice, we can do hi-fidelity wireframes with every bell whistle and all the bells. Or we can make very simple designs that look hand drawn.

So the complexity is up to us for the page design but we are here to talk about interactivity! Below is an example of a new course booking for Web Courses the school side of what we do.

The booking form is one of the most important parts of UX on our site so we had to get it right. By creating the interactive prototype I was able to test it out on people all over the globe before arriving at this version.

Interactive designs should predict the expected i.e tell the user what is coming next and give it to them in a way they naturally progress into and clearly understand and gives a sense of achievement so they are willing to carry onto the end.

There are some elements that we find manywhere (word made up by my girlfriend) Flairbuilder makes it easy to create theme in seconds. Here are some examples of popular UI elements that I created in a matter of minutes while doing some User Experience Training in Bangkok.

How to Create Interactive Wireframes

Interactive wireframes are a wonderful tool for realizing user flows. As they are quick to construct you can do iterative user testing very regularly. Using Flairbuilder has helped me create some websites im very proud of and that receive positive feedback for the user experience.

It’s funny when I see the “update available” screen, I am like a kid at Christmas wondering what Farther Christian (Cristian is the entrepreneur behind this wonderful piece of software) has brought me.

The last tip I want to give is that annotations are vital. When you are designing start to annotate parts that need explaining to someone who has never seen the system before. You’re not writing how they work, as that should be apparent in the design, by why. Adding why things work this way give context to the client, users (and testers) and importantly the developers who will make your design into a reality.

Making things simple and intuitive is our aim as User Experience Designers:

Websites and applications are more than the pages they consist of. User elements are gaining in complexity as they achieve ease of use and simplicity and by designing for interactivity we can cultivate better and better user experiences.

For more information on Flairbuilder see their official site : http://www.flairbuilder.com/