Create Interactive HTML Prototypes with Tiggr

Tiggr: Web and Mobile Prototypes Tool

Max Katz
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
Max Katz
Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces”, and is a frequent speaker at developer conferences.
Comments
comments powered by Disqus