Prototyping Your Applications Using Tiggr

If you've ever designed a user interface as part of a large team or for a customer, you'll know how valuable it is to get a prototype out there for feedback as soon as possible. There are a few prototyping tools out there to help you, but having recently discovered Tiggr, I think I have found what I needed. Not only is it a free, web-based tool allowing me to create prototype screen for the desktop, web and mobile, but I can do all of this collaboratively. To find out more about it, I interviewed Max Katz, community manager for Tiggr prototypes.

DZone: Could you introduce yourself please?

Max Katz: I’d be happy to. I’m a Senior Systems Engineer at Exadel.  I have been working with JSF and RichFaces since the beginning, helping customers with development and training. I present at various US and international conferences such as JavaOne, JBoss World, JSF Days, JSF Summit, JAX and Devoxx. I also oversee Exadel’s open source project hosted on http://exadel.org. I publish a blog at http://mkblog.exadel.com and you can always find me on Twitter: @maxkatz. I’m also the community manager for Tiggr prototypes.

As for Exadel, it’s an open source services and products company. Our main office is in San Francisco Bay Area with large development offices in Eastern Europe. The biggest one is in Minsk, Belarus. We are probably most well known for RichFaces. We are the company that created and continue to build RichFaces today. And, Tiggr prototypes is our latest web-based product.

DZone: So, what exactly is Tiggr?

Max Katz: 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 application prototypes that look and behave, as closely as possible, like the real application. 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
Large number of components (even more are coming soon)
Six layout containers such as tab panel, grid panel, etc.
Mobile controls based on jQuery Mobile components
Web Preview generates HTML/JS/CSS for the prototype. Many controls are interactive
Share the Web Preview link with anyone via email, Twitter, Facebook, or any other way
Navigation- Define navigation during design and move between pages when previewing in Web browser.

DZone: And it's completely free?

Max Katz: Yes, Tiggr is completely free. We are planning a paid version for the future but will always have a free one.

DZone: What inspired you and the team to create it?

Max Katz: It’s interesting. A lot of the products we have launched are born from our professional services engagements. It’s usually a general problem that we solved, so we figured other people could benefit from the solution.

As our development offices are in Eastern Europe, most projects use remote teams. A challenge that we faced is how do you describe how a user interface should look? Describing a UI in a requirements document is impossible. In some projects, graphic designers would draw the page, basically creating a static mockup, then the graphics file is emailed back and forth to get feedback. In many cases there would be very little information about the UI and developers would just start coding. When the application would be shown to the customer, the customer would say they thought the UI would look differently (or they just didn’t like it). Then, you’d have to go back and redo.

That’s basically how Tiggr was born. We thought it would be much much simpler if users could create prototypes online, collaborate with any number of remote users, share the prototypes, generate HTML, preview in any browser and get feedback. No more disconnect, missed requirements, and sending files back and forth. It’s basically a Google Docs model but for application user interfaces.

Here is another 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 want you to redo it. If we had Tiggr then, we would have created the prototypes, shared and collaborated with the customer, and gotten it approved before starting the development. It’s like an addition to your requirements gathering process.

DZone: What's your mission? Is there a long-term plan?

Max Katz: Our goal is to help people build application prototypes that look and behave, as closely as possible, like real applications. Of course, we want to make it feature-rich, simple, and fun to use.

We recently added a mobile palette with controls based on jQuery Mobile. The mobile Web apps market is exploding with so many smart phones and tablets coming out this year. Being able to create and preview mobile prototypes is going to be very important. Anyone with an iPhone, Android, or iPad can click on a Tiggr Web Preview link and see how the application will look on their device. We think it’s very cool. Here is a real example of a mobile prototype created with Tiggr: http://gotiggr.com/preview/5673/.

In adding this feature, we figured there was no need to reinvent the wheel and based our control on jQuery. When you look at the preview, you get a real jQuery Mobile applications. We can easily add other mobile controls from other libraries in the future.

We are also going to make Tiggr much faster in the coming release. Tiggr has a collaboration feature where two or more users can edit the project at the same time. However, we noticed that even though projects are shared and have multiple users who can edit, it’s not often that more than one user is editing at the same time. It’s usually one person editing, then another user comes in a little bit later and so on. What this means is that we can turn off collaboration when just one user is editing the project and make things run faster. (We don’t need to sync between users.) The moment a second user tries to join the project, we turn on collaboration.

In addition to all of this and adding new features that users want, we have the following in the pipeline: new UI controls, threaded discussions (users will be able to leave comments and discuss specific comments, screens or designs),  and Facebook mashup components.

DZone: When I logged in I noticed that Tiggr uses Seam, but I see that the rest is Flash. Have you any plans for other technologies, like HTML5, instead of Flash?

Max Katz: That’s correct. When you log in (Projects page), it’s RichFaces/Seam, and, when you design the prototypes on the whiteboard, it’s Flex. We have already had internal discussions about switching to HTML5. It’s something we will probably come back to in the second half of 2011.

DZone: Will there be any option to export a prototype to a usable user interface, such as HTML?

Max Katz: Actually, this feature already exists today, and I think it’s what makes Tiggr unique. The feature is called Web Preview and generates HTML/JS/CSS for the prototype. A new browser window opens and you can preview how the page will look when the application is running.  If you decide to share the preview, you can send the link to anyone via e-mail, Twitter, or Facebook. Because it’s just a standard HTML page, you can open it in any browser or on any device including mobile. There is also an option to save an entire project as an HTML bundle (.zip file).

Now, just to come back to why I think this feature makes Tiggr unique, a number of other tools out there allow you to create mockups or wireframes. That’s fine but all they really give you is a skeleton of how a page should look, typically very open to interpretation. The mockups and wireframes are also static. In other words, creating interactive or dynamic pages (like those using Ajax) is impossible. With Tiggr, you design pages with user interface components, not shapes and lines. Many components are interactive, which means you can interact with them in preview. For example, you can expand/collapse a panel or activate a suggestion box. You also get six layout containers such as tab panel and grid panel which greatly simplify UI prototyping. As for mobile, today, Tiggr has 15 mobile controls (based on jQuery Mobile). Lastly, there is a navigation feature which allows you to define navigation in the design and then navigate between pages in a Web browser by clicking a control. All these features give a very realistic view of the behavior of the application.

DZone: What has the uptake been like so far?

Max Katz: The uptake has been very good. We are always looking for more feedback and feature ideas. The best place to tell us what you think and what features you would like to see is here is to visit Tiggr community and forum. You can always read Tiggr’s blog at http://blog.gotiggr.com and follow Tiggr on Twitter at @gotiggr.