Simple interactive design solutions and presentations on mobile devices

Users visit mobile sites not just to browse content, but to do things. In order to book tickets for example, the user often in the airline's mobile site to do things are: Query flight status, query specific flights, search and booking tickets. So how does mobile Internet user interface design Support task completion? What's the best way to convey information and show interaction on a mobile site? With the goal of finding the most design for simple interactions with mobile devices, I looked at the flight status as an example. I hope my analysis will contribute to this topic.

Interaction: Querying flight status

A traveler can inquire about the flight status by determining the departure date, or by entering the flight number, or by starting the city and arriving at the city or airport. Sounds simple enough, doesn't it? To analyze this task, the following are the steps involved in querying flight status:

The first step-decide whether to use the flight number or the departure and arrival of the city to query.

The second step-if you use the flight number, enter the flight number, and if you start and arrive in the city, the old input starts and arrives at the city's name, or their airport code.

Step three-Enter the flight date.

Step fourth-submit the form.

It's very easy to do this on the web. As long as two options are displayed on a Web page, users can move forward based on the information they have on their flights. Although it is more convenient to enter a flight number than a city name or airport code, the user usually remembers the city name more clearly than the airport code or flight number. But there are some details you should consider:

Which question should you ask first: travel date, flight number, or city?

Which choice should be first rendered: flight number or city?

Should you ask two travel dates to make sure that the workflow is complete, regardless of the way in which the user queries the status (flight number, city, airport code)?

Querying flight status on the Web

Different airlines have different ways of solving this problem. As a result, their web pages are quite different, as shown in Figure 1 and Figure 2. However, these differences have little impact on the experience of Web site users. In general, there is enough space on the Web page to display all the choices, allowing users to complete the interaction without any confusion.

Figure 1--on the united.com to inquire about flights

Figure 2--on the airfrance.us to inquire about flights

Querying flight status on a mobile site

However, when the mobile user interface is used, the easy interaction on the web becomes cumbersome. Small screen size, the use of touch-screen input is difficult to affect the user experience of the main factors. Since airlines have different understandings of this seemingly obscure issue, the mobile user interface for each interaction may vary greatly. And on mobile devices, these differences will affect the convenience of fast and successful query flight status.

Air France shows two choices on the first screen-through flight numbers or through city queries, requiring users to select one from, as shown in Figure 3. This simplifies the user interface, but adds an extra step. Lufthansa on the home page shows two choices, allowing users to enter the city name or flight number on the first screen, as shown in Figure 4. This page would like to provide two complete workflows, as well as the travel date input boxes and buttons, which increases the length of the page and pushes the second button under the scroll bar.

Figure 3--on the Air France mobile site to inquire about flight status

Figure 4--Check flight status on Lufthansa's mobile site

The example of an Air France is a stacked-in-time type design, and the Lufthansa example uses the proximity of the space, as I mentioned in a column in Uxmatters, designing for the Mobile Web:special considerations (see Francisco Inchauste's article The dirtiest Word in ux:complexity). If the user uses these two choices (departure and arrival city or flight number) is equally frequent, then the Air France stacked-in-time design is the best, the page design appears simple and refreshing. However, as I mentioned earlier, the number of people who start and arrive in a city query is much more than the number of flight numbers, so two options are shown to be unnecessary. But these two airlines are equally well treated for both types of search.

American Airlines tried to combine the two ways with and/or, as shown in Figure 5. JetBlue provides a travel date box for both options, as shown in Figure 6. Note that two companies have put the city search before the flight number search. For this reason, I think these two designs are better than the designs shown in Figure 3 and Figure 4. Although the two airlines are still the same way to treat the two options, they add a little weight to the city's inquiries.

Figure 5--on the American Airline mobile web site to check for flights

Figure 6 querying flights on JetBlue's mobile web site

Southwest is very different from the previous examples, as follows:

They not only make the choice of a city query more significant, but also set it as a required field. This solution still allows the user to query the flight status through the flight number, but the user must first enter the city name. Perhaps this is a business decision based on data analysis that shows how many user queries are used with only flight numbers.

They asked to enter the flight date immediately after the user entered the city name, and deliberately pushed the flight number query box to the bottom of the page, which was easily overlooked. On Southwest's website, the focus is entirely on the city.

Figure 7--Search for flights on Southwest's mobile web site

Learning points

The more we know about users and their needs, the more we understand the interaction patterns and the better the solutions are. I have some ideas when I analyze these websites. I think it might be useful to design a mobile community, especially with regard to design and workflow rendering.

Optimize for more frequent interactions

The higher the priority we give to frequently used choices, the more users feel designed to be useful. In the example of this article, because most users are looking for flights by city, it is best to give this choice the highest priority.

Show options with short Drop-down lists instead of radio buttons

It is difficult to use your finger to select the menu button on the device. Although both JetBlue and Southwest require a date, JetBlue requires the user to select a specific date using a radio box, while Southwest uses a short drop-down list to make the interaction easier.

Minimal text and boot

Users don't spend a lot of time reading text when they want to do something. The boot word can actually also interfere with the interaction. The best thing to do is to make the design as good as possible, so it's not necessary to guide the word. Note the difference between Lufhansa and Southwest design in this respect.

Minimum required input

Rather than having users enter city names or airport codes, let them choose from the Drop-down list. Reduces the amount of typing that users have on their mobile devices, making the input easier and helping to reduce usage errors. Note the differences in design between American Airlines and southwest-the latter require less typing.

I'm going to ask you a question: What do you think is the best of these examples, and what do you think are the simple interactive design solutions on mobile devices--such as querying flight status--and what can be improved?

This article is compiled from fries418, the original address.

The source of the translation: study and Time analysis, reprint, please indicate the source link.