Why You Need Interactive and Clickable UI Prototypes for Your Next Project


Why You Need Interactive and Clickable UI Prototypes for Your Next Project

By Max Katz


Max Katz, the author of Practical RichFaces, will be speaking about RichFaces 4 at The ServerSide Java Symposium in March of this year. (TSSJS 2011). Register before February 11th and you'll be taking advantage of the early-bird discount.

Why You Need Interactive and Clickable UI Prototypes

If you've been building web or mobile applications, you probably know how tough it is to describe UI requirements in a text document. It's even more challenging for the person reading the requirements to understand what the heck the author meant.

Commenton this article here.

Sometimes visual aids help. It's probably safe to assume that many projects include pictures or drawings in the requirements document to help visualize the UI. Any visual aid in a requirements document will help.

It's also possible that many projects use a somewhat better solution than just inserting images or drawings into a requirements document – a mockup tool. A mockup tool is specialized software to create, well, a mockup of the UI. With a mockup tool you use lines and various shapes (rectangles, boxes, etc.) to create the outline or shape of the various UI elements.

The problem with mockups...

However,  mockups suffer from a number of drawbacks. First of all, mockups are static. Today, most user interfaces are very interactive with AJAX or AJAX-like features. Expressing such interactivity or navigation is just not possible with static mockups.

Secondly, mockups don't give you a realistic view of the UI. Mockups are typically drawn using lines and shapes such as boxes, circles, and rectangles. With such tools you can create an outline or draw the shape of various UI elements; however, this won't give you a realistic view of the user interface. There is a big divide between lines and shapes, on the one hand, and the final user interface in a Web or mobile browser on the other.

Thirdly, sharing or collaborating is usually done using the same old approach – e-mail. Most mockup tools let you save the mockup as an image which can then be shared via e-mail. Getting feedback or collaborating on the mockup becomes a challenge. You end up e-mailing the mockup image back and forth among project members asking for feedback followed by the resending an updated mockup image.

This problem can easily be solved by using a next-generation rapid prototyping tool called Tiggr.

Introducing Tiggr

Tiggr is a Web-based, rapid prototyping tool. With Tiggr you can create, share, collaborate, and preview Web and mobile user interface prototypes. The main idea is to give you tools to create interactive application prototypes that look and behave like the real application.

Here are the main Tiggr features:

●        Web-based - nothing to install, available anywhere

●        Rapid prototypes - instantly make and preview changes

●        Collaborate on a project with any number of remote users

●        A large number of components (even more coming soon)

●        Six layout containers such as tab panel and grid panel

●        Mobile controls based on jQuery Mobile components

●        A Web Preview feature that generates HTML/JS/CSS for the prototype. Many controls are interactive and clickable

●        Sharing the Web Preview link with anyone via e-mail, Twitter, Facebook, etc.

●        Navigation defined during design allowing moving between pages when previewing in a Web browser.


How Tiggr helps...

You are probably wondering how does Tiggr help with the drawbacks I mentioned above? I'll will explain.  Before I do that, it's important to point out a fundamental idea is that with Tiggr you don't create mockups, but user interfaces prototypes. A prototype gives you an almost real view of the user interface.

Tiggr prototypes are interactive. This means it's possible to define interactivity for various components as well as the navigation between page. For example, when you have a tab component, you can switch between tabs and place different content in each one.

We can take this even further. When you preview the prototype in any Web browser, you will be able to switch between tabs. Check out this example.

Need a drop-down menu? Easily create a drop-down menu with any number of options. When viewing in a browser, activate any menu. Here's another example

Furthermore, navigation is very important in any Web or mobile application.  Being able to define navigation in a prototype is important. With Tiggr, any button, link, or menu item can be used to navigation to any other page in a prototype. Check out how navigation works here

Tiggr’s design-time already gives you a very realistic view of the user interface. All components come with properties that you can customize for things like color, font, background, transparency, shape, size, margins. You get six layout containers including grid and tab and even more to help you with layout.

Being able to see a realistic prototype in design-time is great, but being able to view (preview) the prototype in a Web browser  – is even greater. Tiggr lets you view any prototype in a Web browser, any browser. Being able to view a prototype in a Web browser gives you the most realistic view of the user interface. Don't forget that the prototype is interactive and clickable allowing switching between tabs and clicking on buttons/links to navigate. Use it as a real application.

We recently added a mobile palette with components based on jQuery Mobile components. Now you can create mobile applications and preview them in any browser, be it on iPhone, iPad, Android or any other device.  Check out this mobile prototype.

Simplified collaboration...

With Tiggr, you no longer need to e-mail files back and forth. One of the main features in Tiggr is to simplify collaboration and sharing (think Google Docs model). Most projects today are done by remote teams. During design, you can invite any number of people to collaborate on the prototype. Invite colleagues, remote team members, and of course the customer. This doesn't mean everyone has to be logged in at the same time. Users can log in at different times and continue working on the prototype. Another sharing option is to share the Web Preview version. Create a Web Preview link and share it with a customer. This is a great way to show how the UI will look and get feedback. Share the link with anyone via e-mail, Twitter, Facebook or another medium.

Here is a real story. Early in 2010, we built over 20 pages for a big customer. When we showed it to the customer, they said: well, that’s not exactly what we wanted. We thought it would look different. We want you to redo it. If we had Tiggr then, we would have created the prototypes, shared, and collaborated with the customer. Then we could have gotten it approved before starting the development. It’s like an addition to your requirements-gathering process.

What's Coming Up

We are working on adding more components as well as adding more interactivity options. For example, one requested feature was to be able to define a pop-up panel in a prototype. We are working on adding such a component as well as interactivity options to be able to open and close it on some events. This is just one specific example.

Also, we are going to expand this event-awareness to all other components. For any component, you will be able to define an event (onclick, onblur, etc.) and an action such as navigation, hide/show, or toggle. The events and actions are only limited by what HTML/JS allows you to do. Our future direction is to give a tool to create rich, interactive, real, and clickable prototypes.

Commenton this article here.

We are always looking for interesting feedback and feature ideas. The best place to tell us what you think and what features you would like to see is to visit the Tiggr community and forum. You can always read Tiggr’s blog and follow @gotiggr on Twitter.

A few Tiggr screenshots...


Max Katz, the author of Practical RichFaces, will be speaking about RichFaces 4 at The ServerSide Java Symposium in March of this year. (TSSJS 2011). Register before February 11th and you'll be taking advantage of the early-bird discount.


Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past 6 years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel’s RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of “Practical RichFaces” book (Apress). Max holds a BS in computer science from the University of California, Davis.



27 Jan 2011

Related Resources