Create Interactive HTML Prototypes with Tiggr

Tiggr: Web and Mobile Prototypes Tool

Do you build Web or mobile user interfaces? I'm guessing many of you will say yes.

Were you ever reading a new application UI requirements doc, but then had to stop and ask yourself, "What the heck does this mean? I don't understand how this is supposed to look or what it does." Well, welcome to the world of describing UI requirements in a text document.

Describing UI requirements in a text document is, well, very challenging. No wonder the saying "A picture is worth a thousand words." exists. OK, so not everything is so bad. You can include pictures in the document created using some general-purpose visual tool or a more specialized tool such as a mockup tool. Pictures definitely provide much more information, but they still don't provide certain information that you need.

Pictures (or what you get as a result from using a mockup tool) just don't give you a realistic view of the UI. Mockups are typically drawn using lines and shapes such as boxes, circles, and rectangles, sometimes even hand-drawn like UI components. 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 gap of missing information between this sort of picture and the final user interface inside a browser.

Pictures are static, but user interfaces today are highly interactive. Describing UI behavior through this kind of image is very limiting.

One other aspect of how things are done now is that 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 of an updated mockup image. Sound familiar?

Real story. Early in 2010, we built 20 pages for a big customer. When we showed it to the customer, they said, "Well, it's really nice, but that's not exactly what we wanted. We want you to redo it." And then, we and the customer wasted a ton of hours (irrespective of who was really at fault).

In this day and age, it's time to start creating realistic, interactive HTML prototypes, static mockups are just not sufficient anymore. A tool that can help you with that is Tiggr. Tiggr is a Web-based application for creating and sharing interactive web and mobile HTML prototypes. If we had had Tiggr back in the time described in our story above, we would have created the prototypes, shared and collaborated with the customer, and gotten it approved before starting the development. Tiggr is like an addition to your requirements gathering process.

Create Web and mobile prototypes

With the rapid growth of mobile Web applications, it's important to be able to create prototypes for mobile devices. In addition to standard Web components, Tiggr comes with jQuery Mobile components to make it easy to build mobile prototypes using the most popular framework (jQuery).

 

In addition to components, Tiggr also provides numerous layout components to make it simple to lay out the application.

          

Pages

Max Katz
Max Katz

What do you think?

JAX Magazine - 2014 - 05 Exclucively for iPad users JAX Magazine on Android

Comments

Latest opinions