Best Practices for Building Rich Internet Applications

Knowledge base
, ,
1

Best Practices for Building Rich Internet Applications

By Karlheinz Kronauer, Natural Product Manager

With the availability of Natural for AJAX to allow Natural developers to create Rich Internet Applications (RIAs), we thought it would be valuable to provide the Natural user community with general insights on:

  • Why many organizations are building RIAs.
  • Best practices to ensure successful RIA development.To learn more about Natural for AJAX, I encourage you to review these resources:
  • Natural for AJAX TECHcast
  • Natural for AJAX Fact Sheet


More and more, customers demand easy access to key information and data from a company’s Web site. This high expectation is driving many organizations to jump on the Rich Internet Application (RIA) band-wagon. They are building new applications or “modernizing” existing applications to allow end users to more easily and consistently access key data and information that typically resides in older, well-established programs. The value inherent in these older programs and their data means companies need to design and develop applications that combine the accessibility of browser-based applications with the rich user interface of graphical user interface (GUI) applications – the new RIAs – to get to back-end servers or mainframes. A successful RIA will provide all the benefits of a distributed, server-based Internet application along with the rich interface and interactive capabilities of a more traditional desktop application. In addition, a Rich Internet Application must have the functionality to interact with and manipulate data.[1]


With everyone jumping on the RIA bandwagon, it is important to step back and make sure that solid design and development principles and best practices are in place – development teams should treat the design and development of RIAs as any development project. Best practices for application development must be at the forefront because Rich Internet Applications need to provide a usable, accessible, and possibly re-usable, successful experience over the Web.


With a separate client-side engine, developers will deal with even more complex issues than they experienced during the design of distributed applications. In the RIA model, the client updates only those parts of the User Interface that changed and the server delivers only updated data. Now, more than ever, developers need to follow a solid, well-communicated application development life cycle.


By following a development life cycle and a set of well-defined best practices, organizations will[2]:

  • Speed the development process and deliver timely applications.
  • Lower overall development costs and total cost of ownership.
  • Design and build more reusable code.
  • Spread the value of applications across the entire organization.!!Best Practices!Application Development Lifecycle is VitalAs mentioned, RIAs bring an added layer of complexity to the design model. This added complexity means that an organization should implement an iterative approach to development and put well-established practices in place. The following is an example of the typical stages of the development process [3]:
  1. Plan and Prepare – understand the end-users’ needs; prioritize their tasks.
  2. Design and Develop – understand interactions and transitions; refine visual sensibility.
  3. Prototype – prototype main tasks; focus on performance issues.
  4. Test – plan what to test, plan how to test; revisit assumptions and iterate.

Plan and Prepare


Most of a development team’s time should be spent in the up front phase of planning and preparing. A successful RIA will be an application where the design and development team acquired an in-depth knowledge and understanding of the end-users and their experience. Goals for the application should be established – a Rich Internet Application should provide a rich user experience. RIAs need to be quick and responsive. They need to provide detailed information and data and provide end users with the ability to explore freely. Another key goal for an RIA would be to provide a single screen environment so that all data entry and validation occurs within a single screen. If development teams spend the time in this phase, the following phases will fall into place.


Additionally, the Plan and Prepare phase should focus on standards, or the lack thereof, for RIAs. Development teams need a solid understanding of the current state of flux and change in the standards environment. Other key focus areas for the planning and preparation phase are Security and Accessibility.

Design and Develop


Since RIAs are Web-based, Usability design plays an extremely important role in the Design and Develop process. If time is spent at the front-end understanding the end-user’s needs, then an RIA will be tied closely to end-user behavior and will, in turn, be highly useful and responsive to the end-user. Usability also drives the design and layout of a Web site, helping to ensure a site is easy to navigate and that end-users can easily find what they need. Designing and developing for application usefulness, easy navigation and responsiveness will drive the application’s availability. Here are a few additional helpful best practices from a couple of sources, including Forrester Best Practices[4],[5]:

  1. Don’t hard code behavior – dynamically add behavior to elements and classes.
  2. Don’t cram in features – all features are not equal; focus on key “surface” features.
  3. Make content useful and usable – users should be able to change content; don’t create barriers to tasks or add extra steps to the user’s task flow; make content interactive.
  4. Make effective use of space – give visual and contextual prominence to the most important content and functions.
  5. Understand the placement of interactive elements – easy to find, logical.
  6. Provide flexibility – developers decide whether elements, classes, or specific elements (ids) will trigger behavior; give users control over the order of steps in a process.
  7. Document output, parameters and dependencies.
  8. Provide visual continuity – preserve context; good transitions provide a strong sense of place so users don’t get or feel lost.
  9. Use meaningful icons and symbols – don’t make the user guess what they mean.
  10. Make sure the user can easily read the Web pages!A solid rule of thumb for the design and develop phase – apply basic best practices used to develop desktop applications (developed by Jakob Nielsen, 1994). These heuristics, or problem solving methods, still provide valuable guidelines[6]:
  11. User control and freedom
  12. Consistency and standards
  13. Flexibility and efficiency
  14. Match between system and user’s real world
  15. Visibility of system status
  16. Error prevention
  17. Aesthetic and minimalist design
  18. Recognition rather than recall
  19. Help users recognize, diagnose, and recover from errors
  20. Help and documentation

Test


Testing RIAs is vital to success. Two important types of testing should be considered – heuristic evaluations and Usability testing[7]. Testing for heuristics as an application is being built will help make sure that fewer errors are built in. Including heuristic evaluations also helps a team ensure that the application ends up with content and functionality that is easily found on a web site and is useful.


Implementing usability tests helps a development team determine a site’s effectiveness from the user’s perspective. In other words, does the application meet the end user’s goals? With usability tests, developers have the opportunity to watch users in action, listen to comments and then identify areas where users are getting stuck, having difficulty or getting confused.


Working closely with end-users to understand their needs, goals and expectations helps programmers develop applications to meet end user expectations successfully. The end result is high satisfaction ratings during Usability testing with end-users.


Communication is KeyIt is vitally important that all stakeholders in the building of RIAs be on the same page. Everyone should have a clear and concise understanding of what it will take to build a high performing Web application. An ‘all for one and one for all’ mentality is important for success as all team members in the development process play an equal and vital role in an application’s success. An application lifecycle development process that encourages open communications should be adopted and put into place. All stakeholders involved – marketing, business owners, end-users, Web designers, application development, IT – must be able to quickly and easily communicate with each other and be able to share their expertise.[8]Shared ObjectivesObjectives will only be shared if there is open communication within the development process. Team members and stakeholders must agree on the objectives for a Rich Internet Application prior to its design and development. Shared objectives will help the development team put the appropriate measurements in place by which to test and evaluate the application. Success is highly dependent on a team’s ability to manage the design, development and testing of an application to meet and achieve objectives.!ConclusionFlexible, customizable, reusable code adds value to an organization without any appreciable cost to development. The number one objective should be a great user experience with any Web-based application. To get there, an organization’s development team needs best practices in place, especially when designing and developing the new RIAs. According to Forrester Best Practices, “To make the most of their investments, firms planning to invest in RIAs must apply design best practices and run multiple tests on their RIAs before — and after — they go live.”[9]


[#1] McMullin, Jess; Skinner, Grant. “Usability Heuristics for Rich Internet Applications”.
http://www.boxesandarrows.com/view/usability_heuristics_for_rich_internet_applications. February 2008 issue.
[#2] Govella, Austin. “Best Practices: Implementing javascript for rich internet applications”.
www.thinkingandmaking.com/entries/63. July 7, 2005.
[#3] Sundermeyer, Mike; Wibismo, Himgan. “RIA Design Best Practices”. Macromedia. www.aces.edu.
[#4] Govella, Austin. “Best Practices: Implementing javascript for rich internet applications”.
www.thinkingandmaking.com/entries/63. July 7, 2005.
[#5] Rogowski, Ron. “Smackdown: Rich Internet Applications Versus HTML”. Forrester Best Practices. December 7, 2006.
[#6] McMullin, Jess; Skinner, Grant. “Usability Heuristics for Rich Internet Applications”.
http://www.boxesandarrows.com/view/usability_heuristics_for_rich_internet_applications. February 2008 issue.
[#7] Rogowski, Ron. “Smackdown: Rich Internet Applications Versus HTML”. Forrester Best Practices. December 7, 2006.
[#8] Loosley, Chris. “Managing Rich Internet Applications”.
http://performancematters.blogspot.com/2006/04/managing-rich-internet-applications-7.html. April 10, 2006.
[#9] Rogowski, Ron. “Smackdown: Rich Internet Applications Versus HTML”. Forrester Best Practices. December 7, 2006.