Improving User Workflows with Single-Page User Interfaces

Booking Travel in a Multi-Page Environment

The potentially tiresome experience of repeated online searches is worsened by the linear, multi-page user interfaces that most travel sites still offer. These user interfaces force customers to follow a predefined, linear path, going straight from a search to a form page for booking. While this may suit the fast bookers who know what they want, it does not suit those who still want to look around.

In a multi-page environment, there are likely to be separate pages for almost every task in the purchasing process, including a search page, a page listing search results, pages displaying detailed information about individual search results, some options pages, pages showing pricing and availability, and booking pages. It’s difficult to make sense out of such dispersed information. When customers are looking at a page showing details about a particular search result, they can’t see the list of search results, making it difficult to compare and rank different results. When they are looking at a list of results they can’t see the search criteria that produced them, making it difficult to adapt their search criteria and come to grips with all the different offerings.

Customers who need to assess a great many search results must visit and revisit a lot of pages. In doing so, they often lose track of the big picture and waste a lot of time clicking back and forth and waiting for the server to deliver pages. They may become disenchanted with an online travel site that seems to punish them for not knowing exactly what they want.

Multi-page travel sites don’t support customers well in searching, evaluating, comparing, or deciding. Frustration might result in customers’ quitting halfway through the purchasing process. Studies show that 60 to 80% of customers leave a Web site after having a poor user experience. In many cases, they never return—for the simple reason that they have gone to a competitor who does a better job of offering what they are looking for.

Booking Travel Using a Single-Page User Interface

Using a single-page user interface greatly improves the user experience on an online travel booking site. Such a single-page user interface should comprise at least steps 2, 3, and 4 of the purchasing process—searching, evaluating, and deciding. Figure 2 shows a concept for a single-page user interface for a travel booking site. The main functional modules that support these steps are search, search results, detailed views, and a summary showing a customer’s selected options and their prices. Customers should be able to view and use these modules simultaneously. Since the available real estate on a single page is limited and unchanging, displaying all of this requires showing and hiding information and functionality as appropriate. At the beginning of the purchasing process, you allocate more space to the search module; later, to detailed views; and in the end, you may want to focus on a summary view. Modules, therefore, can have various states. For example, after a customer clicks a search result, the list of search results partially collapses to make space for a detailed view, but remains in sight, showing basic information about each result—such as location, name, and price—and allowing comparisons.

Spatial adjacency of all key components makes it easier to search, adapt searches, understand the available offerings, recognize patterns, evaluate and compare options, and make a decision (3). Ajax technology supports real-time connections between these components, so customers can sort or filter search results and immediately see their lists of search results change. As soon as customers add options or upgrade to a higher level of service, they see the effect on their total price. Combining spatial adjacency with immediacy creates very powerful applications. For example, slider-based filtering lets customers easily reduce a list of hundreds of options to a couple of holidays that really match their requirements. Customers can look around and play with different options, giving them much greater control over the purchasing process.

This feeling of control is further increased by a forgiving application that makes it easy to try out a lot of possible combinations while staying on the same page and getting immediate error feedback. The user interface supports your every whim and doesn’t punish you for not knowing what you want.

Once you accept the fact that some customers need time and prefer to come back next week rather than making a purchase right away, user recognition becomes key. Users don’t like having to provide the same information all over again. User recognition should be an integral part of an online travel booking application. The application should use the information in user profiles and retain information about previous trips or searches, updating dates as necessary, but leaving all other information unchanged. Doing all of this decreases the repetition of tedious tasks and enhances the user experience. 

All of these characteristics contribute to the creation of a user interface that doesn’t unnecessarily interrupt customers with error messages or make them wait—in other words, a non-intrusive user interface that lets users focus on their tasks and reach a state of flow, or immersion (4). In such a state, it’s much easier to reach decisions and feel good about them.

Conclusion

Single-page Web applications are much better at supporting complex user workflows than multi-page Web applications are. Booking a holiday can become an easy and fun thing to do. And it’s not just customers who benefit. A better user experience can only increase your site’s conversion rate and customer satisfaction and loyalty.

Just having a single-page user interface is not enough, of course, if it’s not well designed. Both a Web application’s overall layout and its controls require special attention, because users may not be familiar with the characteristics and functionality of advanced Web applications. To give just one example, when showing and hiding different parts of a page, it’s important to subtly animate their appearance and disappearance to avoid disorienting users.

Perhaps the most important challenge for designers of single-page Web applications is the tradeoff between flexibility and usability. As an application’s flexibility increases, its usability decreases. The reason for this is its signal-to-noise ratio—that is, the ratio of relevant to irrelevant information on a page. If this ratio is high, an application is more usable. However, a Web application that is very flexible may offer too many possibilities and thus raise the level of noise in the ratio (5). So the challenge is to keep an application page as simple as possible. Packing a page with loads of cool controls is technically possible, but it’s not a good idea. Show only what is relevant to the task at hand and offer other functionality as needed. 

References

1. In The Paradox of Choice: Why More Is Less (2004), Barry Schwartz distinguishes two basic personality types when it comes to people making choices. Satisficers settle for something that’s good enough, choosing the first option that more or less meets their needs, whereas maximizers look for the very best choice, scrutinizing all possible options in detail. Even if maximizers make objectively better choices in this way, they’re less happy with them, because they can never be sure they haven’t missed an even more perfect option.
2. A press release from comScore Media Metrix, Media Contacts, and Yahoo! Search Marketing, on July 25, 2006, reported the study results.
3. The importance of spatial adjacency is a recurring motif in the works of Edward Tufte—for example, see the conclusion of the chapter “Sparklines: Intense, Simple, Word-Sized Graphics,” in Beautiful Evidence (2006).
4. Mikail Csikszentmihalyi popularized the concept of immersion, or flow, in his book Flow: The Psychology of Optimal Experience (1990).
5. For a description of the flexibility-usability tradeoff and signal-to-noise ratio, see Universal Principles of Design: 100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design (2003) by Lidwell, Holden, and Butler.