Tuesday, March 20, 2012

Developing Rich Internet Applications the Right Way


A guide to ensuring quality and consistency when developing rich Internet applications.

Most of the projects I work on involve developing a new interface on a website or application that appears cutting-edge to users. It's no surprise, as user demands for rich, state-of-the-art interfaces have skyrocketed and users of consumer and enterprise applications no longer want "what works" but rather want what "is possible".
Enterprise frameworks like Microsoft SharePoint have adapted as well, adding architecture to support savvy, animated UI’s, invisible database calls through Ajax, and the ability to deliver any application to meet any user need. Thus businesses need to evaluate their current offering to users because, as the old saying goes, if Microsoft is enabling it, users are asking for it.
Once businesses make the decision to develop a Rich InternetApplication (RIA) - the industry term used to define savvy, animated applications that engage users--, the challenge becomes determining what exactly they need to focus on, what technologies should be used in the execution, and how do they understand if they have created a successful version of their product to satisfy user demands. For this blog, I wanted to outline a fundamental approach businesses should use in tackling these challenges and enabling their product development program a path for success.

Focus on what matters to users

The most common mistake in developing a Rich Internet Application is forgetting who the user is and what they are trying to accomplish when using your application. This seems like the reverse of what you would expect, but it’s true. Businesses commonly get carried away in bells and whistles and forget that users, whether consumers or in the enterprise, use your product to get something done.
Thus, when I engage with a client, I always have them create a list of the top five tasks a user is likely expecting to accomplish when using their product. Then, I can map many Rich Internet Application elements against those desires. Imagine the following example:
A consumer is ordering a Cable TV package online. The user wants to be able to choose the components of their Cable selection, add it to their cart, and see the price reflected in real time without having to click through several pages.
User Need: "A consumer is ordering a Cable TV package online"
RIA Solution: Deliver an exciting design that shows Cable Company A is setting the bar over their competitors in allowing consumers to do what they want, when they want.
User Need: "The user wants to be able to choose the components of their Cable selection"
RIA Solution: Develop an animated carousel of Cable Packages they can easily scroll through on the web or “flip” through on their phone, which visually maps components to price.
User Need: "They want to add it to their cart, and see the price reflected in real time without having to click through several pages."
RIA Solution: Allow the user "drag and drop" packages right into the shopping cart and update their total without forcing them to leave to a checkout page.
Thus, you can quickly map what your user wants to what the RIA interface would be. As you can see from the example, we have identified a) a design direction for the visual team, b) the “flip” carousel popularized in iTunes and the iPhone, and c) drag and drop shopping functionality with Ajax (behind the scenes database requests) for a seamless shopping experience. This allows my client to understand the scope of what they are trying to accomplish while outlining the core user needs.

Choose a flexible technology

Another common mistake businesses make is choosing a technology that focuses on accomplishing a single task, over a series of tasks. Often times, third party developers will build a custom component for a project and resell the components online to make extra money.
Clients will come along and see that component does exactly what they are looking for, at a lower cost that building it, and ready now. While I do not intend to imply that this is never a good solution - if a feature is truly a commodity then buy over build will be a good option - the real challenge understands how this component will fit into the lifecycle of your application.
Thus, when clients begin to make technology decisions for implementation, I have them evaluate the technology they are looking to implement against the three following variables. First, is this technology scalable? If you have to change one little thing, will it break?
If so, how much will it cost to fix? Second, does this technology live in harmony with the other components of your application? Many times, this requires a much deeper understanding of the technologies themselves and how, when combined, application performance will be affected and if the intended technologies will freeze-up under heavy stress on the application.
Lastly, does the intended technology require a new “skillset” in your organization to support? For example, Adobe Flash has its own scripting language called ActionScript that many Microsoft developers would not know. Thus, there will be a cost in the maintenance of the technology which you might not be fully aware of.

Technologies commonly used in the development of Rich Internet Applications include:


Microsoft Silverlight:

Silverlight is a powerful development platform for creating engaging, interactive silverlight applications for many screens across the Web, desktop, and mobile devices.

Windows Presentation Foundation (WPF)

Windows Presentation Foundation (WPF) provides developers with a unified programming model for building rich Windows smart client user experiences that incorporate UI, media, and documents.

HTML5

HTML5 provides developers with an exciting opportunity to bring rich, animated experiences to users right through the browser, without any downloads or third party players. As part of the advancement of browsers like Internet Explorer, Mozilla Firefox, and Google Chrome, new developments in animation capabilities allow developers to create experiences like never before. Moreover, with HTML5  you can build unified experiences for any HTML5 mobile application for mobile devices and port them seamlessly because the experience is through the browser and not dependent on the device itself.

jQuery
jQuery is a JavaScript-based framework which has allowed developers to deliver animation and user-centric experiences with little footprint on the programming aspect of a website.
Adobe Flash & Adobe Air
Flash is designed to reduce the cost and number of variables involved with delivering good user experience in product development
 Why Flash in Product Development?
·         Increased focus on User Experience
·         Deliver rich interactive applications for the Web that incorporates video, animation, interactivity
·         Stunning and visually appealing UI
·         Richer and more compelling Web experiences

Build in mechanisms to measure success

The last piece I focus on with clients when developing a Rich Internet Application is understanding how to measure success. Clients will far too often rely on feedback "out of the blue" then simply building in measurement mechanisms ahead of time. When you define your User Needs/RIA Solutions matrix in the beginning, it’s also important to outline what you are hoping the reaction for users will be when engaging with your new, cutting-edge UI components.
For example, a goal might be "fewer clicks when ordering the Cable package." Thus, in order to measure success you first have to know your current situation - how many clicks does it currently take a user to order the Cable package. Second, you have to have the ability to track the user’s progress in ordering and ensure that the 'drag and drop ordering functionality" reduces the amount of clicking (effort) the user must go through to complete the order.