Back to articles page


The Impact of Ajax on User Experience – Part 3

Strategies for User Experience Professionals

Cindy Lu, Ph.D., CHFP
Vice President - User Experience & Usability
iNautix (USA) LLC - An Affiliate of Pershing
Published – 30 May 2007

As User Experience (UX) professionals, our goal is to help businesses create products that will result in compelling experiences for our users. We achieve this goal by understanding users' needs, the product context and technologies that will empower the product and creating a design solution for the product. Understanding the power of new technologies and future technology trends, limitations and best practices help us to provide the best design solutions.

The rapid adoption of Ajax and related Rich Internet Application (RIA) technologies has revolutionized the user experience on the web and advanced the development of web applications. How should we take full advantage of this trend to provide the best design solutions for our users?

This article will discuss the strategies for UX professionals who are interested in understanding Ajax in development and applying the best practice to product designs.

1. Ajax's Power and Limitations

You have probably read about Ajax and seen interesting interaction behaviors in products like Gmail, Google Suggest, Yahoo and Windows Live. You may also be considering recommending this technology to your clients and introducing new interaction patterns to enrich user experience.

In order to design products with Ajax, you should understand the technology and follow the development trends. You should understand how Ajax makes rich interactions possible and the technologies behind it. Finally, you should understand the difference between Ajax-empowered user interfaces vs. traditional user interfaces and the technology limitations.

Resources

Here are some resources for Ajax, RIA's and Web 2.0:

a) Articles and Blogs

b) Ajax Conferences and Training Classes

c) Ajax books

There are many Ajax books available.

  • I have found one particularly useful: Ajax Design Patterns by Michael Mahemoff. It covers the fundamentals of Ajax and reviews how Ajax enhances user experience. It also provides user interface examples in Ajax-based applications.

d) Web applications empowered by Ajax

There are numerous web sites and applications empowered by Ajax and related RIA's:

  • GO2WEB20.net is a web 2.0 directory site of more than 1,000 Web 2.0 sites and services.

Figure 1. Go2web20.com – Web 2.0 web site directory
Figure 1. Go2web20.com – Web 2.0 web site directory

  • Google's personalized home page illustrates how the user can easily personalize the portal page to fit individual's needs

Figure 2. Google Personal Home Page

Figure 2. Google Personal Home Page

Figure 3. Yahoo's livesearch.alltheweb.com

Figure 3. Yahoo's livesearch.alltheweb.com

Figure 4. Ajax.asp.net – AJAX Showcase
Figure 4. Ajax.asp.net – AJAX Showcase


2. Understanding new interaction patterns

Ajax's technical capabilities and related RIA technologies have enabled Interaction Designers to create new ways for users to interact with web applications. Some interaction designs are similar to desktop GUIs (such as drag and drop, preview in a slip panel, tree hierarchies) and some are completely new (such as sticky notes, dim transitions, spot light effect etc.)

How do you evaluate these new interaction patterns and their impact on users?

Here are some questions you should ask when you review new interaction behaviors you have found in Ajax-based applications:

  1. What job can the user accomplish with this component?
  2. What problem does it solve for the user?
  3. What does the solution consist of?
  4. How valuable is this solution?
  5. What is the context that the design can be used?
  6. What are the limitations and how can the limitations impact the user experience?
  7. Is there any evidence (rationale or user research) supporting this design?

Answers to these questions can help you understand the design value and make decisions as to whether they should be considered for your product.

Let's do an exercise to illustrate the above steps.

At Kiko.com web site, you can use the left panel to add labels, feeds, contacts and manage other tasks. You can use the side handle to open and collapse the panel (see Figure 5 and 6).

Figure 5. Kiko Calendar – Left Task Manager Panel
Figure 5. Kiko Calendar – Left Task Manager Panel

Figure 6. Kiko Calendar – Task Manager panel is collapsed
Figure 6. Kiko Calendar – Task Manager panel is collapsed

  1. What job can the user accomplish with this component?
    The user can manage tasks in the content area such as navigating to another calendar, creating a new appointment or adding contacts.
  2. What problem does it solve for the user?
    It solves the real estate problem on the screen. When the panel collapses, more data can be viewed on the screen.
  3. What does the solution consist of?
    The solution consists of an open/collapsible panel.
  4. How valuable is this solution?
    It is valuable when the screen estate is a problem for displaying a wide table. In this example, when the left panel is collapsed, it allows the user to view more appointments on the calendar.
  5. What is the context that the design can be used?
    In this example, the context is calendar. In some web applications, when the user needs to view a wide table, the design will be useful.
  6. What are the limitations and how can the limitations impact the user experience?
    When the panel is opened and collapsed, the calendar shifts. If there is a large amount of data and the performance is poor, it will impact the user experience.
    When the panel is collapsed, users who have motor skill disabilities may find it difficult to click the handle. In addition, can an assistive device interact with this component?
  7. Is there any evidence (rationale or user research) supporting this design?
    Providing the mechanism to show and hide some tasks on the screen gives the user the flexibility of viewing a wide table. However, the questions about accessibility problems need to be answered. Usability testing can be used to validate the design. It is also important to present this design to the development team to understand the implementation issues and performance impact.

The above example illustrates that although a careful evaluation of a design solution is time consuming but it is important to understand the design and its limitations before applying it directly to your product.

Leveraging the experience of professionals in Usability, Interaction Design, Information Architecture and Computer-Human Interaction (CHI) can be an efficient way for you to quickly learn the new interaction patterns and their effectiveness. There are many great online communities such as CHI-WEB, UTEST, IxDA (Interaction Design Association) and SIGIA-I (SIG Information Architecture of ASIS&T)


3. Designing for Ajax-enabled products

When we design the product's user interface, we first understand the user/design needs and then apply existing user interface (UI) widgets and design guidelines. When the design problem is more complex than applying existing UI widgets and design guidelines, we create new solutions by mixing existing UI widgets with new interactions.

Ajax opens the door for innovation and as new UI widgets and patterns grow at a rapid speed, we must apply a different approach in design. Designing for Ajax is not just for the sakes of using new concepts and technologies; instead we want to provide a better solution by applying new ways of thinking.

As always, we must understand the design needs, i.e. what problems we are going to solve for the user and what information we want to present. We need to understand the expected outcomes from users when they perform the job with the product we design.

We should create design solutions without the constraints of existing UI widgets and patterns. We should focus on the best way to help the user solve the problem. During this process, keep in mind design principles (or usability heuristics).

  1. Minimalist design and only present the most relevant information to the user
  2. Make the information and interaction flow logically
  3. Consider the level of user control and system guidance
  4. Provide flexibility and efficiency
  5. Speak the users' language
  6. Make the design and interactions consistent
  7. Provide appropriate feedback (e.g. always provide feedback when the user performs an action)
  8. Prevent errors (e.g. providing suggested data format)

Only after you have clear design goals and have come up with draft designs, should you look into existing UI widgets to see whether you can apply them. After you have created the design solutions, you must re-examine the solution using the seven questions above to evaluate the solution's value.


4. Collaboration for Success

It takes a team to create a compelling product design.

User experience designers need to work closely with visual designers and developers to create product solutions. The designers' creativity can take our conceptual designs to a new level resulting in visually pleasing designs. It's important that the team shares the same design vision and understands Web 2.0 design trends.

Working with the development team in Ajax-based applications sometimes can be challenging. The development team may not have prior experience in developing Ajax-based applications. They must consider the constraints such as system performance, development effort and system integration issues. It is important for user experience designers to understand the constraints, work with the team to make trade-off decisions, and deliver the best solutions.


5. Testing with users

Usability testing and various user research methods have become so important to make sure Ajax-based applications do improve user experience. We must understand whether the new interaction behavior we created can bring the value to users and are understood. We must make sure whatever we do, either applying the existing interaction patterns or inventing new ones, it must support users' goals in an effective, efficient and satisfactory way.

Testing interactive prototypes with real users for all the new interaction patterns that you plan to implement in your product. In addition, you should also test the design when the front end and back end are connected and real data are passed between them. When there is a large amount of data, performance can be a big problem that can negatively impact user experience.


6. Addressing Ajax problems

We must address the problems created by Ajax carefully; find out whether there are solutions and whether the solutions are acceptable. We should work closely with the business and technical teams to assess the solutions.

Some known technical problems in Ajax include:

  • URLs and bookmarks
  • Back button
  • Print the screen
  • Browser compatibility
  • Accessibility

The technical community is working to solve the technical problems. The accessibility community is also working to come up with techniques to make Ajax accessible to assistive technology.

It is important to monitor the progress of solving these issues and asses their impact on the web applications under development.

In summary, Ajax is here and we, as UX designers, usability researchers and practitioners, must understand the new technology, its impact on user experience and limitations. We must open our mind to create the best user experience for end users and businesses and work closely across various functional teams to provide the best product solution possible.

This ends the 3 part series on Ajax and User Experience.
References

[1] The Impact of Ajax on User Experience – Part 1, Lu, Cindy, 2006
http://www.apogeehk.com/articles/AjaxUserExperienceStrategiesPart1.html

[2] The Impact of Ajax on User Experience - Part 2, Lu, Cindy, 2007
http://www.apogeehk.com/articles/AjaxUserExperienceStrategiesPart2.html