Design Opportunities and Practices

By Andy Dennée, Associate Partner, Group Creative Director, Creative and Customer Experience Rich Internet Applications (RIAs) may represent the first, true expression of “convergence”, one of the most over hyped yet unrealized concepts from earlier this decade. But with the integration of rich visual interfaces, image and content manipulation, database connectivity, sophisticated animation, and high quality audio and video, RIAs offer companies the opportunity to provide transformative customer experiences that can drive user engagement, build brand, and increase conversion.

For companies beginning the development of an RIA, this article explores topics design teams should consider at the inception of the project related to design opportunities and interaction techniques unique to RIAs versus more traditional “Web 1.0” designs.

Before Initiating Your RIA Development Project:

Consider A Linear Versus Non-Linear Experience:

The traditional HTML-based, Web 1.0 environment offers an interaction experience that is largely linear and page methaphor based. In this standard approach, experiences such as form completion for a flight reservation or calculator tool, are typically page-by-page, forward or backward, with feedback and results displayed at the end of the process. With RIAs, design teams can offer more non-linear, free-form, and exploratory approaches to expressing interactivity. For example – a consumer may want to use a tool to explore information and make decisions by performing a series of interactions by “gaming” a varying amount of parameters, all while generating immediate feedback and results. This is exactly the type of experience that an RIA is well suited to deliver.

While RIAs can be developed to offer users free and non-linear experiences, this design approach may not be right for all applications or user groups. Prior to design, gain user insights through customer surveys or perform usability tests on similar applications in the marketplace in order to determine the best, most consumer-centric approach.

Empower Users to Undo and Re-Do:

No matter how much focus and energy is placed on the usability of an RIA, users will make errors or experience issues. As a result, it is critical for RIA development teams to keep this notion top-of-mind throughout the design process. But in the RIA paradigm, there is significant opportunity to help users recover from issues by building in undo or re-do actions within the screen view. Whether the application is a home remodeling tool that allows users to select colors and paint room scenes or a flight planner that helps customers sort flight destinations, times, and prices, it is easy to build in undo and re-do capabilities to allow users to “try on” options efficiently and quickly.

Provide Real-Time Micro and Macro Feedback:

During the process of interaction with an RIA, give customers both micro and macro feedback. In other words, use the capabilities of RIA technologies to direct users with validation or auto-correction while performing smaller, individual actions like text inputs (micro feedback) as well as displaying real-time results for shopping cart checkout or product recommendations (macro feedback) as key application steps are completed.

Optimize or Re-Invent User Interface Elements:

RIAs offer not only the ability to express new categories of
experiences, but also allow design teams to invent new and optimal user interface components (instead of just re-using a core set of “stock” controls or interactions). In the RIA world, it is more than possible to build a new interface component that is a combined drop-down list, free input box with Google suggest capabilities and quick-tip, auto correct validation.

But the key to successfully building new components is three-fold:

• Subtly weave existing and known interaction conventions into the presentation and behaviors of new interface elements. Provide enough reference to “historical” interface components to help the user recognize and interact with the element.


• Build interaction components that educate users by simply and intuitively guiding them through actions and steps.


• Think through the design “system” enough that components will work logically when applied to all situations so user “learning” is reinforced. For example – if a rich, visual calendar date input works in one area of the experience, but a more structured, traditional date field input is necessary at three other touchpoints, for the sake of consistency you may want to reconsider the need or value of having the visual calendar device.

Use Real Estate Carefully:

Effective use of screen real estate is almost always a challenge and primary consideration in any site or application design. But in RIAs, the added dimensionality of these technologies can ease management of screen space. Consider MINI’s often referenced Configurator RIA. The company lets users customize, select add-ons, and build a shopping list for the car of their choice. Users of the tool will notice that as you progress through the steps and click on accessory options, related accessory images are presented visually in a sliding pane below the car. If there are more accessory images than can be displayed, the pane scrolls to expose the additional options.

If this tool was built with standard HTML, it would most likely require multiple pages and/or significant scrolling. However, the design team is able to maintain a consistently sized interface that provides significant information without overwhelming the user.

Design In Terms of Modules:

When approaching the design of an RIA, break interface functionality down into component parts or modules. Consider how modules will interrelate in the user experience and how manipulating one module may ripple through and influence the information displayed in other modules. This approach will help you consider the design “states” of each module and will also provide significant context for the technical team in creating functional and technical documentation.

Beyond development approach, a modular design also maximizes one of the primary benefits of RIAs versus traditional HTML. RIAs let developers pull information from databases, display content seamlessly, and deliver fluid, orienting experiences for users. The disruptive page refresh of Web 1.0 is no longer a central part of the experience, and instead, modular components can be updated in real-time to provide immediate results and feedback as users interact with the application.

Take Advantage of Convergence (Finally):

As mentioned in the introduction, RIAs represent a sea of change in the Internet in terms of richness, interactivity, and convergence of disparate media into a cohesive experience. RIA technologies like Flash, Flex, or Silverlight support control and playback of high quality audio, video, and animations.

They also allow developers to create sophisticated interaction behaviors including “scene” transitions as well as image and content manipulation. These technologies also open new doors for visual designers by enabling use of high quality, easy-to-read typography instead of the aliased or graphic-based text of the traditional HTML world.

Plan for Measurement:

RIAs are also a significant opportunity to obtain a much richer set of analytics data related to user behaviors compared to a traditional HTML site. With the added depth and dimension of RIAs, there is much more data to track beyond metrics like unique visits and session length. For example, it is possible to collect and analyze sophisticated data from the various events that users trigger while interacting with an RIA.

But like RIA development as a whole, implementation of analytics in an application is a more complex and involved process than in standard HTML. Design teams should develop a plan and technical approach for customized tagging and messaging from the application to your analytics package. Organizations should also create a technical proof of concept for approaching analytics and ensuring success in the final application.

While RIAs offer a uniquely compelling experience for users as well as a business building opportunity for companies, they are also a new challenge for development teams. Building an effective RIA requires a thoughtful and novel design approach to meet user goals and ensure business success.

view printable PDF>>