JAX London 2014: A retrospective
Create Interactive HTML Prototypes with Tiggr

Tiggr: Web and Mobile Prototypes Tool

MaxKatz
Tiggr-Web-and-Mobile-Prototypes-Tool

Max Katz shows us how to create interactive web and mobile HTML prototypes with Tiggr.

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.

               View the prototype in any browser (and mobile)

This is probably the coolest feature in Tiggr. Clicking the Web Preview button will open the prototype in any browser, so you can preview it and see how it will look. Make changes, and click Web Preview again. You instantly see the changes. Behind the scenes, Tiggr generates standard HTML/JavaScript/CSS files. Need to save HTML locally? That’s also possible.

This is nice but that’s not all. You can also share the prototype URL with anyone you want (to get feedback, etc.). For example, here is a finished mobile prototype, try it on your mobile device. Pretty cool, right?

Create interactive prototypes

One of the major and unique features in Tiggr is that you can create interactive HTML prototypes. What does it mean? It means you can use events such as “click” and “change value” and associate actions with them such as navigate to a prototype page, navigate to a URL, open/hide a pop-up, and more. Here is a list of all supported actions. (More are coming soon.)

Set HTML Attribute

Set Property

Navigate to Page

Navigate to Link

Open as Popup

Close Popup

When you view the prototype in a Web browser, it’s (almost) like running the real application. Using events and actions, you are no longer limited to just knowing how the UI should look, you can also describe how the UI should behave. This is a very important feature since user interfaces are very interactive today.

Stop e-mailing, start collaborating and sharing

E-mailing prototype images is rather complicated and, well, not very cool today. That’s why Tiggr allows you to collaborate on the prototype and share the prototype. During prototype design you can invite anyone (with different permission levels available). Your colleagues and customers can collaborate on the design in real time. There is even a chat feature inside Tiggr. This also works well if your teams are in different time zones.

Use advanced properties

As Tiggr allows you to create real HTML prototypes, you have access to all the same properties and settings that you would have if you were creating the prototype by hand. With Tiggr, you can set everything from font information to corner rounding.

Create and use page templates

Who doesn’t need or like templates? As the prototype becomes bigger, making changes that repeat on every page becomes more difficult and time consuming. That’s why we just introduced templates – a very frequently requested feature!. You will be able to save any page as a template and then use the template to create new pages based on it. How do you like this time-saving feature!

Custom components

Need to reuse two or more components multiple times? Now you can create a composite custom component to use anywhere in your project. The composite component will appear in Custom Components palette. To create such a component, just select two or more components and click Create Template button.

Annotations

Collaborating and sharing the prototype was possible since the beginning. However, it can be very useful to be able to leave notes or comments inside the prototype for users to view later, such as “Change button label to “Save”. Now this is possible with the Annotations features. Another cool and useful feature! To activate annotations, click Show Annotations at the bottom of the application.

Getting as close as possible to the real application

As you can see Tiggr is a rapid UI prototyping tool that allows you to create rich and interactive prototypes. No longer are you limited to just how the prototypes look, but you can define rich interactive behavior. Tiggr takes you as close as possible to the real application.

Create your first prototype today

Sign up (it’s free) and create your first interactive HTML prototype.

You can always tell us what you think by visiting our website or Twitter.

Author
MaxKatz
Max Katz is a Senior Systems Engineer and Lead RIA Strategist at Exadel. Max is a well-known speaker appearing at many conferences, webinars, and JUGs. Max leads Exadel
Comments
comments powered by Disqus