Welcome to Axure Community Site Sign in | Join | Help
in Search

Axure

RIA (Rich Internet Application) Prototyping

"Does Axure RP support designing Rich Internet Applications?"

This is a question we are hearing more these days as companies continue to adopt some of the new (and not so new) technologies like Ajax, Flash, Silverlight, and JavaFX that enable richer and more dynamic interfaces for web applications.

Short answer: Yes

Long answer: 

===========================

A Rich Internet Application (RIA) typically means that the application may emulate functionality found in desktop applications, may have animation in the interface, may have client-side data interaction and logic, and generally provides functionality within a page rather than only when moving from page to page. Some examples of RIA functionality include menus, drag and drop, form validation, accordions, sliders, changing visibility, and zoom.

The process of designing an RIA today is similar to designing traditional web applications. It involves beginning with a lower fidelity sketch or wireframe and filling in visual, interactive, and functional fidelity as the design progresses thereby creating a prototype. The optimal level of fidelity is just enough to verify that the design satisfies the requirements and that it is usable. It should also clearly communicate the design to everyone involved.

Axure RP supports design at a wide range of fidelity. For RIA design, Axure RP generally supports low to medium fidelity design and for some functionality high fidelity is possible. At some level, you are able to use Axure RP to describe or storyboard or prototype the RIA functionality. Some RIA functionality that would currently be prototyped at a lower fidelity in Axure RP are drag and drop, animations, and widgets like sliders.

Some RIA functionality that can be prototyped at a high fidelity currently are dynamically hiding, showing, and changing layers, rich client style menus, tabs, rollover effects, custom tool tips, in context tools, and basic client-side data interaction and logic. More support for high fidelity RIA prototyping is planned for future releases.

===========================

Here is a sample Axure RP file created in version 4.6 that contains some common RIA design patterns: Flyout Menus, Custom Tooltips (like Netflix), Accordion controls, Inline Editing, Zoom, and Form Validation. Each are at varying levels of fidelity, but hopefully these examples will give you some ideas on how to use Axure RP to prototype your RIA.

RIADemo46.rp

Here are some screenshots of the Inline Editing example from the prototype. This example takes advantage of dynamic panels and the ability to read data from a text field and set the text in a text panel.

1. A picture and label.

Inline Edit - 1

2. As the mouse moves over the Label, a tooltip and custom tooltip are shown.

Inline Edit - 2

3. Clicking the label changes the label to a text field with options to save or cancel.

Inline Edit - 3

4. Edit the text field to any value.

Inline Edit - 4

5. Clicking Save takes the value from the text field and puts it into the original label.

Inline Edit - 5

All of this happens right on the page.

Try it yourself along with the other RIA designs.

Here is the RP file again RIADemo46.rp. This will open in 4.6 and above.

Published Friday, June 29, 2007 5:20 PM by victor

Comments

 

asenator said:

Beautiful - you are doing a great job !

January 8, 2008 2:48 PM
Anonymous comments are disabled

This Blog

Syndication