10 Features You Need When Creating Interactive HTML Prototypes [In Pictures]

Are you still using a prototyping software that can only give you static drawing or an image as an output? Are you still sending static mockups or wireframes back and forth via email to get feedback? Did you ever to preview a prototype in the Web browser? So, drop your pencil and start creating real and interactive web and mobile HTML prototypes using Tiggr. Tiggr is Web-based, so there is nothing to install or download (well...it does use Flash player, but you probably already have it). Access it from anywhere.

With Tiggr 1.2.6 release last week which added new features and enhancements, I’d like to tell you about top ten feature that are very helpful and will make it much simpler to create, share and preview interactive HTML prototypes in your projects.

Web-based

Interactive HTML prototypes

You might be using a mockup creation tool. Mockups are OK, but suffer from a number of drawbacks. First of all, mockups are static. Today, most user interfaces are very interactive with AJAX or AJAX-like features. Expressing such interactivity or navigation is just not possible with static mockups.

Secondly, mockups don't give you a realistic view of the UI. Mockups are typically drawn using lines and shapes such as boxes, circles, and rectangles. 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 divide between lines and shapes, on the one hand, and the final user interface in a Web or mobile browser on the other

Check out this web prototype (click on links/buttons): http://gotiggr.com/preview/9261/

Check out this mobile prototype (click on links/buttons): http://gotiggr.com/preview/5673/

All the UI controls that you need

Tiggr comes with all the UI controls that you need (and more is planned):

Plus, every component comes with properties (button properties shown):

Stop sending prototypes and start sharing and collaborating

Are you still using email to send prototypes back and forth? Well, it’s probably time to stop doing that and start sharing. Share the project with any number of users and specify exactly what each user can do:

Navigation

What’s a Web application without navigation? In Tiggr, you can define navigation and test it in a browser or mobile browser. Button, link, asset (image, banner) and menu all support the navigation feature.

Create mobile applications

Mobile applications are becoming very important and Tiggr makes is very simple to prototype mobile apps as well. Now, not to reinvent the wheel, Tiggr mobile components are based on popular jQuery Mobile components. Check them out:

(Pre)View the prototype in a Web browser

With most mockup or wireframe tools, the most you can get as an output is a saved image. Going from a static image to an interactive Web applications is not simple. There is a big gap. With Tiggr, you can view the actual prototype in a Web browser, with many interactive controls and navigation between pages you get as close as possible to the real application (and, we are working on actions and events, to make it even more real).

Check out this web prototype (click on links/buttons): http://gotiggr.com/preview/9261/

Check out this mobile prototype (click on links/buttons): http://gotiggr.com/preview/5673/

Share Web Preview

What would be good about viewing the prototype in a Web browser if you couldn't share it or show it to your customer? You can easily do that. Just get the URL, and share it via email or via any social network:

Export to HTML

Sharing and collaborating in real time is fine but sometimes you would like to run a prototype locally. In that case, you can export the entire prototype as complete HTML (HTML, JavaScript and CSS) and run in locally, use it as starting point in development or share it with someone.

Layout containers

Layout containers make it easy to build user interfaces:

What's coming up?

We are working on adding events and actions. You will be able to specify events such on onclick, onchange, etc and specify what to do on that event. This will make the prototypes even more real and interactive. Stay tuned.

Community

If you like what you saw and have feedback or suggestions, let us know at http://getsatisfaction.com/gotiggr, via Twitter (@gotiggr) or on Tiggr blog: http://blog.gotiggr.com.