How to drive UX with AJAX

Default avatar.
July 15, 2015
How to drive UX with AJAX.
With mobile internet usage eclipsing desktop-based web browsing, it’s more important than ever for websites to be built with an emphasis on speedy page loads and fluid reactions to user input. One important technology we use to achieve this is AJAX, short for “Asynchronous JavaScript & XML.” AJAX allows you to update parts of a single webpage without continually throwing out the DOM (the HTML architecture of the page) — eliminating the need for entire page loads and creating a faster response to user input. Building websites on a 100% AJAX framework is a technique that reveals new possibilities as to what is attainable in web development. We began building sites as 100% AJAX nearly ten years ago and have since learned a lot about how to effectively employ it so that it improves user experience. In this article we’ll explore a number of the specific advantages, and some limitations, of this technique.

Fast user response

A key element of an effective UX is a speedy response to user input, but with a standard website, users are left waiting for interactions to take place as requests are placed over HTTP (or HTTPS) to the server, resulting in a complete page load for every change. This process occurs with every mouse click to request a new page, larger image, or more information; the DOM is completely thrown out and reloaded into your browser — this is often a wasteful process when loading pages on the same site, since they typically have similar content. kayak Kayak’s search is powered by AJAX, providing suggestions as soon as you begin typing. One major advantage of AJAX is its steady stream of information, unobstructed by the loading and unloading of the DOM, resulting in better control over the experience and a visitor’s attention. With AJAX, web applications can send data to and from the server asynchronously without interfering with the display of the existing page. The key difference between a standard AJAX implementation and a 100% AJAX-built website is that in the latter the basic DOM is loaded on the initial visit to the site, usually on the home page; everything else that occurs is simply a manipulation of that primary load. A prominent example of the fluidity afforded by AJAX is Google Maps. As you zoom in, out, navigate through a city in bird’s eye view or in street view, information is being seamlessly and continually delivered for your immediate use. When transitioning between pages or updating content in a web app, AJAX allows for user input to be responded to in a contextually appropriate manner, such as form output updated in real time without reloading the page, contextual animations transitioning between pages or when loading a detail view. google_maps When designing pages with a large amount of content, we employ AJAX’s infinite scrolling pattern, which not only saves browser bandwidth by only showing the information immediately relevant to the UX, but also reduces user friction. On our own company’s news page for example, more articles load as you scroll down, eliminating the use of pages and instead loading more information onto the screen as the reader requires it. This frictionless process of loading and unloading more content on-demand allows our visitors to get exactly as much news as they want without presenting barriers to their intent.

Seamless UX

Gaining control over how a website loads content creates a unique opportunity to design page transitions, loading animations, and visual cues that help the user understand the site’s hierarchy. This is also an opportunity for creativity with the company’s branding. A website with a 100% AJAX framework (because there is no full page load) does not provide feedback about its progress loading in the browser window, leading to potential confusion if a visitor is left waiting for an extended period of time with no response. This is where custom loading status indicators come into play, providing some indication that progress is being made during wait time. estesparkmedical Estes Park Medical Center in Colorado uses a personalized AJAX loader to maintain the coloring and brand of their organization as well as imparting the functionality of a loading symbol. zillow On the Zillow website, listings details are constantly updated without the use of the browser’s refresh button, giving home renters access to up-to-date information at all times. Small additions such as these are poignant in creating a memorable experience for your visitors and are made possible by the use of AJAX.

Taking control over the URL path using HTML5 history

Without individual page loads, a site is defined by having a single URL, causing problems on poorly built AJAX sites as users attempt to bookmark, or navigate using their browser’s forward and backward buttons. In addition, because Google’s search engine crawler historically did not read JavaScript, there have been concerns about how well AJAX-powered sites could be retrieved in Google’s organic search results. Both of these conditions are solved by gaining control over the URL path using the HTML5 history API. Each page of a 100% AJAX site and its alternate views are considered their own request; as you navigate through an AJAX site — even though it is technically a single page load — the URL in the browser updates to provide a unique address representing the current viewing state. In addition, we can listen for history change events in order to support the browser’s back button and return the previous viewing state. Each of these unique URLs are fully indexed by Google, meaning that this approach is fully compatible and helpful for SEO. a9 Amazon’s A9 search service depends on AJAX to retrieve substantial volumes of data without losing the user’s search history.

In conclusion

As you can see, AJAX is integral to the advancement of modern web development and supplants a number of inferior technologies that provided a poor user experience. Without AJAX, all page content had to be fully reloaded for almost every single user interaction, even if only some of the information had changed. This hindered speed, placed additional load on the server and used excessive bandwidth. By building on a 100% AJAX framework, we are able to create sites that are customized to the needs of clients, provide accessible navigation that can be bookmarked by site visitors, and that function on a much higher level. Featured image, data stream image via Shutterstock.

Mira Brody

Mira Brody is a copywriter and editor at Montana web design firm JTech Communications, where she's a member of the custom web development team providing technical writing and creating brand personas for a diverse array of clients.

Read Next

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…