In modern society, people's leisure and entertainment activities have become rich and diverse, and watching movies has become one of the ways for people to relax. Online ticketing systems play an important role in this.

This article takes Maoyan and Taopiaopiao as competing products, starts with the movie screening interface for ticket purchase, and conducts a comparative analysis of the interfaces involved in the ticket purchase process in terms of vision, interaction, and functionality.

The opinions expressed in this article are based solely on my personal experience using the product.

1. Experience the environment

Phone model: iPhone 8 plus;

Mobile phone system: ios 12.1;

Application versions: Maoyan V9.8.1, Tao Piao Piao V10.0.6;

2. Visual Contrast

1. Hot Screening Interface

Overall, Maoyan's banner design makes the interface content richer; in contrast, Taopiaopiao's interface appears simple and clean.

Top tab bar:

The selected state of Maoyan is the brand color font + brand color short line, and the unselected state is gray; the selected state of Taopiaopiao is black font + brand color short line, and the unselected state is gray - both applications use hue contrast in different states. From the contrast effect point of view, the contrast intensity between the selected and unselected states of Maoyan is more obvious.

search:

Maoyan only uses the brand color icon to represent the function entrance, which shows that the search function is not very high in Maoyan - the advantage of doing this is that it saves space and the position is more flexible; if you need to add other functions, you can directly adjust the position of the search icon.

Taopiaopiao uses a light gray rectangular box + a dark gray icon + a dark gray prompt text to represent the function entrance, which shows that the search function has a higher level in the application; the advantage of this is that the search function occupies a larger space on the interface, attracting more user attention, allowing users to see at a glance and complete search tasks quickly.

Buttons: In terms of shape, Maoyan and Taopiaopiao both use fully rounded buttons. In terms of color, Maoyan’s button uses solid color fill + diffuse projection; Taopiaopiao uses a gradient color from left to right; the ticket purchase and pre-sale buttons of both are also represented in different colors.

Personally, I prefer the design of Taopiaopiao. The gradient can provide visual guidance and is interesting.

2. Cinema selection interface

Looking at the entire interface, Maoyan uses light gray dividing lines to divide theater information; Taopiaopiao places each theater on a card, which is placed on a light gray background layer.

Filter bar: Maoyan displays all the filter conditions on the screen, which is neat and concise; in this column, Taopiaopiao has information on both sides and a blank space in the middle, making the interface seem unbalanced.

In each cinema module, Maoyan and Taopiaopiao use labels of different colors to represent the services they can provide. For the design of cinema card and coupon labels, Maoyan uses solid color fill to contrast with other stroked labels, while Taopiaopiao uses the same stroke form as other labels - it can be seen that Maoyan pays more attention to the promotion of cinema cards and coupons.

3. Session selection interface

Top navigation bar: Maoyan uses a pure white background; Tao Piaopiao connects the navigation bar with the interface and uses a dark picture background; it is obvious that Tao Piaopiao’s design raises the level of cinema information in the interface.

To enter the navigation interface, Maoyan uses a positioning icon to represent the function entrance. This design is more conspicuous and helps encourage users to take the next step. Taopiaopiao requires users to click on the detailed address to enter, so this design appears to be more obscure.

Maoyan uses two positions to promote discount cards, which takes up a lot of space on the interface and is completely unnecessary. It would be better to use brighter colored cards for promotion like Taopiaopiao did.

Movies playing in theaters: Maoyan uses a dark background to focus users' attention on this part of the interface, but the contrast between the poster and the background is not so obvious; Tao Piaopiao uses a white background, with a clear contrast between the poster and the background, making the poster of each movie more prominent.

There are two different amounts of ticket price: original ticket price and discounted price. In order to highlight the discounted price, Maoyan uses solid color filling to attract users' attention. Taopiaopiao only uses two different color fonts for distinction and contrast. Personally, I think Maoyan's design has a more obvious contrast effect.

When the show is full: Maoyan uses a button with reduced transparency in the brand color to indicate this; Taopiaopiao directly uses gray, and when there are fewer seats left, Taopiaopiao also uses text to provide reminders, which is really user-friendly.

4. Seat selection interface

1) No seat selection

In the entire cinema area, Tao Piaopiao uses red dotted circles to circle the best viewing positions.

For unselectable seats, Maoyan and Taopiaopiao both use the same gray as the background; for selected seats: Maoyan fills them with brand colors; Taopiaopiao not only uses brand colors, but also adds brand avatars to the seats, which effectively spreads the brand image.

Bottom confirmation button: Maoyan has a smaller corner radius; while Taopiaopiao and Hot Movies use full rounded corners.

Before selecting a seat, Maoyan's confirmation button is unclickable, and is indicated by an orange button with reduced transparency to prompt the user; Taopiaopiao's design is basically the same as Maoyan, using a gradient button from left to right with reduced transparency; however, the gradient button is more dynamic and interesting than a solid color fill.

2) Seat selection interface (select seats)

When the seat is selected, both seat maps use green + checkmarks, which form a sharp contrast with the red color; the transparency of the confirmation button at the bottom becomes 100%, stimulating users to take the next step.

5. Order details page

The entire interface of Maoyan uses colors to divide information. Since the price is recalculated in the middle of the interface, it occupies the interface space, and the ticket purchase instructions are not displayed in the interface; this way, the interface does not carry as much content and looks neater and simpler.

Taopiaopiao uses cards to divide information. Since only the amount to be paid is displayed at the bottom of the interface, there is space to display the purchase instructions. Compared with Maoyan, Taopiaopiao's interface appears a bit complicated.

Both Maoyan and Taopiaopiao’s cinema discount cards use colorful backgrounds to attract users’ attention. The amount saved after opening the card is the focus. Although Maoyan uses color to highlight it, the font size has become smaller. Taopiaopiao uses the icon after the amount saved to attract more users’ attention.

Button to confirm payment: Based on the consistency of design language, Maoyan is still orange with small rounded corners + text, while Taopiaopiao is gradient with full rounded corners + text.

6. Movie ticket details page

The Maoyan movie ticket interface uses a light gray background, and one screen carries a lot of information, giving people a crowded feeling; Taopiaopiao is very different, using a dark background layer, which forms a sharp contrast with the white card, and the first screen interface only displays the most necessary content, which looks much cleaner and refreshing.

Maoyan uses a red rectangle to display the time until the show starts, which can attract users' attention very well; Taopiaopiao directly puts the time at the top of the interface, increasing the space occupied to attract more attention and ensure that users can see it at first glance.

Buttons for applying for ticket changes and refunds: Maoyan directly uses color and gray to indicate whether the button is clickable on the first screen, so that users can visually know whether they meet the application requirements; Taopiaopiao places the button at the bottom of the last screen, which can greatly reduce the possibility of applying for ticket changes and refunds; but users cannot judge whether they meet the application requirements just by color, and can only know by reading the copy below the button or clicking the button; in this regard, Taopiaopiao's design is not as user-friendly as Maoyan.

Maoyan reveals a small part of the next screen's content at the bottom of the first screen, informing the user interface that there is other information. This is a very good design. From a visual perspective, users have no idea whether there is any more content on the Taopiaopiao order, and they will only swipe up to find the required function or information. Of course, this design also plays a role in reducing the number of ticket changes and refunds.

7. Movie details page

The first half of Maoyan's screen uses a dark background, and the hue uses the color in the poster. The dark background of each movie details page is different; the subsequent movie reviews, detailed information, recommendations, etc. are on a white background, forming a contrast between the front and back to prevent visual fatigue; Tao Piaopiao's screens are all white backgrounds.

The trailer cannot be played directly on Maoyan’s details page and can only be redirected to another interface; while Tao Piaopiao uses the upper half of the first screen interface to play the trailer, and other information is moved to the bottom of the interface.

Maoyan uses orange to represent movie ticket purchase ratings, which is very eye-catching and intuitive; Tao Piaopiao’s ratings are not in color, but in black, but are visually supplemented with orange stars.

8. Trailer playback page

Maoyan has two different trailer playback pages, which are distinguished here by (Figure 1) and (Figure 2).

In the trailer playback page (Figure 1), all videos are presented to users in the form of a list with preview images on the left and introductory text on the right; in the trailer playback page (Figure 2), the interface focuses more on the video playback function, and the introductory text is at the top of the video playback area, covered on a black gradient layer; both trailer playback pages provide a purchase ticket button in a prominent position to stimulate users to purchase tickets.

The trailer playback page of Tao Piaopiao has only a few movie introduction texts, and the ticket purchase button is above the movie introduction texts; the like, comment and share buttons are allocated in the lower right corner of the interface, which is convenient for users to operate; other than that, the interface does not have any redundant elements, and the almost full-screen video playback interface gives users a great visual impact and allows users to focus their attention on the trailer playback area.

The previous analysis is about the process of users purchasing tickets by directly clicking the buy button on the popular screen. However, if users do not find the movie they want to watch after swiping up a few screens on the popular screen, they will use the search function to search for it. In such a situation, the design of the search page will also affect the user experience.

The search page analyzed here refers to the search interface that you jump to by clicking the search icon or search box on the hot screen interface.

9. Search Input Page

It is obvious from the search page that Taopiaopiao's interface is carefully designed, which also confirms the aforementioned search function's high level in Taopiaopiao.

On the search input page, Maoyan only displays the search scope in the search box, with no other design elements.

In the search interface of Tao Piaopiao, three lists are displayed by default. Each list shows the top ten. A red upward arrow indicates an increase in the list, a green downward arrow indicates a decrease, and a gray horizontal line indicates unchanged.

The top three rankings on the hot search list are distinguished by colored fonts from the gray of other rankings, and there will be colored labels behind the names of the top three movies.

Tao Piaopiao’s weekly box office chart and wanted-to-watch chart no longer just show the names of the films, but also display their posters.

10. Search Results Page

Maoyan's search results page is displayed to users in the form of a feed stream. Each movie module consists of a poster on the left, movie information in the middle, and ratings and buttons on the right; the eye-catching red and orange buttons on the right can attract users to click.

The search results of Tao Piaopiao are divided into two categories, movies and information/videos; the movie section will introduce one of the movies in detail, and provide a carousel image and a ticket purchase button.

In order to maximize the use of interface space, the information and video parts are mainly presented in horizontal browsing mode, and the information is mainly displayed to users in the form of a feed stream with text on the left and pictures on the right. Some videos are interspersed in the information feed stream, and are presented in a format of text on the left and preview pictures on the right. A play button is provided on the preview pictures to distinguish them from the information content.

The design of inserting videos in the information feed can allow users to take a break after watching information for a long time, relieve fatigue and feel surprised.

3. Interactive comparison

1. Refresh

Maoyan has two interactive gestures for refreshing: click the icon in the bottom tab bar, or pull down; Taopiaopiao can only be refreshed by pulling down.

Both of these refresh methods are relatively common, and each user's habits may be different. Maoyan takes both into account.

2. Loading animation

In special cases such as slow network, long operation time or too much data, the running speed of the application does not meet the user's expectations; at this time, the interface should provide clear feedback information to the user, prompting the user that the system has not crashed but is solving the problem - loading animation can attract the user's attention and reduce the user's psychological anxiety.

Maoyan and Tao Piaopiao both use an infinite loop loading animation to prompt users that the application is performing an operation and they need to wait for a while, but they do not specify how long they need to wait. Both also incorporate their brand image into the loading animation.

Maoyan's design is more traditional and looks clean and intuitive; in comparison, Taopiaopiao's design is more emotional and warmer.

3. Cinema selection interface

When users buy tickets again and enter the theater selection interface, they are most likely to choose a familiar theater because the operational costs of re-selecting and entering the search are very high.

Tao Piaopiao will prioritize displaying information about the last theater visited on the theater selection interface. Unlike other theaters, the movie showtimes in the last theater visited will also be displayed to facilitate user selection.

Jakob Nielsen mentioned in his 10 usability principles that we should help users remember; Tao Piaopiao fully embodies this principle in its theater selection interface.

4. Jump to the theater details page from the show selection interface

On the show selection interface, click area ① to jump to the theater's details page.

To enter Tao Piaopiao, users need to click on the dark-colored image area, which is an invisible interactive gesture that is not easily discovered by users. The design of Tao Piaopiao to increase the proportion of theater information space in the interface may also be partly due to this reason.

5. When the user enters the seat selection interface

Maoyan and Tao Piaopiao will both display the cinema’s seating layout in the upper left corner of the entire cinema’s seating selection area. The display will disappear after a few seconds and will not cause too much interference to users. Tao Piaopiao will also indicate the best viewing area in red.

If the selected viewing time is not today, Maoyan and Taopiaopiao will also display a Toast at the top of the screen to remind the user; the color used in Maoyan's pop-up window does not contrast well with the background.

In comparison, the strong contrast of Tao Piaopiao can attract more users' attention and remind users to pay attention to the movie-watching time they choose and not to make the wrong choice.

6. Switching sessions

What should a user do if he wants to change the movie show time after entering the seat selection interface?

Maoyan requires clicking the back button to re-enter the theater's show selection interface to choose a show to watch; Taopiaopiao allows users to change seats by swiping left and right on the seat selection interface, and if they feel that the show information takes up too much space on the interface, they can fold it; in comparison, Maoyan's design increases the user's operation path, while Taopiaopiao's design is more convenient and faster.

7. Lock your seat

When the user selects a seat and clicks the Confirm Seat Selection button, in order to avoid the special situation where a seat is selected repeatedly, the system will lock the seat before the interface jumps to the order details page.

During the period of locking seats, feedback information needs to be provided to users. Different from the processing method of the previous interface loading, Maoyan and Taopiaopiao both use Toasts, which is a lightweight feedback prompt that causes less interference to users.

The main purpose here is to inform the user of the operating status of the system to avoid overwhelming the user.

8. When cancelling seat selection

If you just cancel the previous seat selection on the seat selection interface, there will be no pop-up prompts on Maoyan and Taopiaopiao.

However, if the ticket purchase process has reached the order details page, and then returns to the seat selection interface and clicks the return icon on the seat selection interface, Taopiaopiao will display a warning box (Alerts) regardless of whether the seat selection has been canceled on the interface.

The warning box provides two options for users to make a decision, ensuring that users cancel their seat selection based on their subjective will and avoiding misoperation. In fact, emotional elements can be added to the design of the pop-up window, such as a crying brand image, which is more conducive to retaining users.

Click the return icon on the Maoyan seat selection interface to jump directly to the previous operation interface without any warnings or prompts to retain the user.

As mentioned earlier, Maoyan’s trailers have two playback interfaces. Here we analyze them from an interactive perspective. Different jump paths connect different playback interfaces.

9. Trailer playback page

1) Maoyan trailer playback page

Figure 1: There are many ways to jump to the trailer playback page (Figure 1). Here I mainly analyze two situations that I learned when using the product; you can jump to the trailer playback page (Figure 1) by clicking the play button from the hot screening interface, or by clicking the button on the poster on the details page.

On the trailer playback page (Figure 1), when a trailer is finished playing, the next one will be automatically played in the list of all videos; (Figure 2) All the movie videos contained in the two tabs of Trailer and Official Video will be in the playlist of all videos (Figure 1).

Figure 2: You can jump to the trailer playback page (Figure 2) from the details page. The trailer will only play after clicking the play button in (Figure 2); after playing one trailer, it will automatically pause. If you want to watch the next trailer, you need to click the play button of the next trailer.

Although this increases operating costs, users can choose the videos they want to watch based on their own wishes.

2) Tao Piao Piao trailer playback page

There is only one interface for the Tao Piaopiao trailer playback page, but there are two situations for the playlist depending on the different jump paths.

In the first case, after clicking the play button on the popular interface, you will be redirected to the trailer playback page; the system will automatically play the trailer. After the trailer is finished, do not slide the interface, and this trailer will be played in a loop; slide up to play the first trailer of the first movie in the popular interface list.

For example: On the popular interface, after clicking the play button of "I'm Waiting for You at the End of Time", the first video in the video list on the details page of "I'm Waiting for You at the End of Time" will be played. After playing, if you do not slide the interface, it will automatically loop; if you slide up, the first video in the video list on the details page of "Eight Hundred" will be played; after playing, continue to slide up, skip "I'm Waiting for You at the End of Time", and play the first trailer in the video list on the details page of "Inception".

In the second case, you jump from the details page to the trailer playback page; if you do not slide the interface, the trailer will be played in a loop; if you slide up, it will be played according to the video list.

Swiping left on the trailer playback interface will jump to the movie details page, which will help users understand the detailed information of the movie and then consume it.

I personally think that Maoyan’s design is more in line with my expectations. On the popular interface, I clicked the play button on the poster. What I wanted to watch was the trailer of the current film.

When using Tao Piaopiao, if you enter the trailer playback page from the popular interface, you can only watch one; and after playing this one, I swipe up and it plays trailers of other movies, but I expected it to play the next trailer of the same movie; if you want to watch more trailers, you can only enter the details page and click again, which increases the user's operation cost.

10. Search Input Page

When the user enters the search input page, the keyboard will pop up immediately, and the input box will be in focus, ensuring that the user can directly enter the search content without any clicks.

11. Search Results Page

Maoyan and Tao Piaopiao have similarities in the design of their search results pages.

For example, both will highlight keywords, allowing users to quickly find what they want; and add buttons for buying tickets or watching what you want to see on the search results page, which helps users improve operational efficiency.

When the search results contain too much content, they are displayed in categories to improve the clarity and readability of the information. On Maoyan's search input page, you can see that the search scope is limited to film and television dramas, so the search results page uses blue labels for simple distinction.

The Tao Piaopiao search results page is divided into two parts: movies and information/videos. The movie part displays the number of search results, allowing users to clearly understand the amount of search content. Only three movies are displayed by default, and the other movies are folded. Information and videos use horizontal and vertical cross-shaped interactions to show users as much content as possible.

4. Function Comparison

1. Hot Screening Interface

Tabs bar, click to switch the current channel, providing users with greater choices and bringing more traffic entrances.

The difference between the two is that in addition to popular movies, movies in theaters, and movies to be released/soon to be released, Tao Piaopiao also provides the function of watching movies online; this helps users who do not want to go to the theater but still want to watch movies, meets their needs and solves the pain points of these users.

Since the search function is at different levels in the application, Maoyan’s design provides interface space for the operation banner, which can play a good role in attracting traffic; Taopiaopiao has no banner space in the hot movie interface.

Tao Piaopiao has a QR code scanning function on the right side of the search box, where users can scan the code and verify tickets; Maoyan does not have this function in the hot screening interface, but Maoyan has placed this function at the bottom of the movie ticket interface.

2. Cinema selection interface

There are many similarities between Maoyan and Tao Piaopiao in the design of the cinema selection interface.

For example, in each theater module, the distance between the theater and me will be displayed. Users can set the filter condition to "closest distance" and directly select the theater they want to go to by comparing the numbers.

Tao Piaopiao also provides a positioning function in the navigation bar, allowing users to choose a cinema based on their location; in the positioning interface, the nearest cinema is displayed by default, and the cinema location is magnified.

Compare two ways of choosing a cinema:

It is very convenient and quick to determine the theater you want to go to by comparing distances directly on the theater selection interface. In comparison, the method of selecting a theater based on the positioning function provided by Tao Piaopiao is a bit complicated, which increases the user's operating cost and is not as intuitive as the former.

3. Share screenshots

Maoyan and Taopiaopiao both provide the function of sharing screenshots. After taking a screenshot using Maoyan, the system will pop up the Activity Views, where users can share it.

After taking a screenshot using Taopiaopiao, a Snackbar will appear at the top of the screen, allowing you to share the show information and seat information with your friends; the Snackbar will stay at the top of the screen for a few seconds and then disappear automatically without interrupting the user's current operation; it can serve as a reminder without annoying the user.

4. Movie details page

Maoyan cannot play trailers directly on the details page, you need to jump to other interfaces.

As mentioned earlier, there are many jump paths, but there are only two trailer playback interfaces; Tao Piaopiao can play trailers directly on the details page, and the playback order of the trailers is based on the list in the video part.

Tao Piaopiao also displays the film’s ranking on the weekly box office chart on the details page, making it easier for users to understand the chart.

When users click the "Want to Watch" button on the details page, Maoyan will pop up a trailer list below the button, guiding users to watch the trailers and learn about the movie content. When users click "Want to Watch" on Tao Piaopiao, not only will feedback information be given below the button, but a sharing function will also be provided, which will help increase the number of users watching the movie.

5. Movie ticket details page

On the movie ticket details page, Maoyan places the sharing function in the navigation bar, which can attract more attention and is convenient for users to operate; Taopiaopiao's sharing function is placed on the second screen. Compared with Maoyan, the sharing function is not as high in the level of Taopiaopiao's movie ticket details page.

Maoyan provides a function at the bottom of the interface to scan and verify the authenticity of the ticket, which has been mentioned before. Taopiaopiao has placed this function in the navigation bar of the hot movie interface.

Personally, I think the chance of using this function is very small. Taopiaopiao places the function level a bit high, and Maoyan’s design is relatively better.

5. Thoughts and Conclusions

This time, we only compared and analyzed the ticket purchasing processes of Maoyan and Taopiaopiao from a few relatively small aspects.

Of course, due to the different backgrounds and positioning of the products, both have many advantages and disadvantages of their own. As long as you observe, think and summarize more in the process of using the products, you will find many interesting design details.

Author: Xingchen Hester

Source: Star Hester