Tiggr: A Tool for Building Interactive Html Prototypes

by on 05/02/11 at 6:53 pm

If you design desktop or mobile user interfaces, you know how valuable it is to get a prototype out there for feedback. Designing highly interactive user interfaces today requires a tool that shows how a prototype looks and behaves. With such a tool, you would no longer be limited to just a static image. You would be able to view and test the prototype in any browser and interact with it.

A tool that can help with you with that is Tiggr. Tiggr is a web-based application for building and sharing highly interactive web and mobile HTML prototypes.

Multiple palettes for fast and easy prototyping

Tiggr comes with multiple palettes to make it easy to build prototypes. One palette has web components, another has various containers to help with your layout. To make it simple to build mobile prototypes, Tiggrs comes with a jQuery Mobile components palette. An Annotations palette adds notes and comments to the prototype. Quickly drag and drop components from a palette and use the large number of properties available to configure the component’s look and behavior.

Collaborate in real-time with anyone

Tiggr’s built-in collaboration features allow you to collaborate with anyone during prototype design to get feedback. You can chat with coworkers or customers in real-time right on the web application. This saves a lot of the time that often gets used up sending mockups back and forth via e-mail.

Build highly interactive, clickable HTML prototypes

Real applications are interactive, so your prototypes should be too. With Tiggr it’s possible to define your navigation, set events and pass variables to open and hide pop-up windows, panels and other objects. This allows the prototype to not only look like the real application but also behave like the real application.

Check out this interactive prototype created entirely in Tiggr. The prototype shows Seven Wonders of the World. When you a select a wonder, a different image is loaded. For every click event, we set a different image (changing the src attribute). That’s not all. Clicking “Find out where?”, will open a pop-up window with the location of the wonder. This is an example of setting a JavaScript variable. Tiggr supports click, change and load events. Here are a few actions you can set:

  • Set HTML attribute
  • Set property
  • Navigate to page
  • Navigate to link
  • Open as popup
  • Close popup

Export your prototype to HTML

When you’re ready to use the prototype as the starting point of your application interface, Tiggr allows you to export the complete prototype in HTML, JavaScript and CSS. This makes it possible to run the prototype on your computer, make changes or share the prototype in HTML with coworkers and customers.

View and share your prototype in any browser

Tiggr’s powerful Web Preview feature allows you to view and test the prototype, including all interactions, in any web or mobile browser. You can also share the Web Preview URL with coworkers or customers to get feedback.

Add comments and notes to your prototype

Adding comments and notes to your prototype is simple with the Annotations palette. Tiggr comes with many other features such as page templates, custom composite components, uploading images and much more.

You no longer need to send static mockup pictures back and forth to get feedback. With Tiggr, you can collaboratively design highly interactive web and mobile HTML prototypes that look like and behave like the real application. Tiggr prototypes can be viewed, tested, and shared in any browser to get feedback.

So, sign up and create your first interactive prototype! You can always tell us what you think by visiting our customer community page or going on Twitter @gotiggr.

About Max Katz:
Max Katz is a Senior Systems Engineer and Lead RIA Strategist at Exadel. Max is the community manager for Tiggr. Max writes about RIA technologies on his blog, and can be found on Twitter as @maxkatz. Max holds a Bachelor of Science in computer science from the University of California, Davis and MBA from Golden Gate University.

2 Responses to “Tiggr: A Tool for Building Interactive Html Prototypes”

  1. Anonymous

    Jul 16th, 2011

    At our company, we use http://mockflow.com. It works out toy $6/mo, which is slightly less expensive. There is a free account too, for freelancers who only need to mock-up one website at a time. I’ve only seen the interface at gotiggr in the screenshots, but mockflow looks cleaner/easier to use too. Anyways, they’re both a huge improvement over using Photoshop to make a mock-up. Glad this technology is available, I didn’t see anything like this back in 1996 when I started.

  2. Sleekbitz

    Feb 24th, 2012

    Use ClickThru to convert your static designs into interactive prototypes. Since ClickThru focusses on adding interactivity layer to existing designs, you can use your favorite design tools and hence you can decide the visual fidelity of your prototypes. Visit http://www.sleekbitz.com for demo and free trial version.

Leave a Comment