First, the user needs to see the key points. The users who enter the hotel reservation website or section are generally very purposeful. In fact, they already have a very complete idea in their hearts, and they come to the website just to complete the plan. Therefore, letting users see the content they need intuitively on the homepage and reducing the appearance of other unimportant content as much as possible is a good way to improve the user experience.
AnyForWeb travel website hotel booking design analysis 1.png
Just like Agoda's design, the website's first screen is set with imaginative landscapes as the background. The quickest entry for hotel reservations is the most eye-catching. Even the company's slogan appears only briefly at the top of the page. The homepage design is based on popular content, and the recommendations are listed according to the preferences of most users and the number of clicks. This idea is really good, but are there too many "popular countries" and "popular cities" at the bottom ...
Second, using a suitable large image as the background, using a beautiful high-resolution large image as the website background seems to have become a versatile design method, a large image with simple text, you can easily make the website inexplicably tall . In the choice of pictures, "Is it aesthetically pleasing enough?" May be our focus, and "Is it appropriate" may be more important to our overall design. The "fit" mentioned here includes many aspects, such as color, layout, size, and even the meaning expressed in the picture.
How to choose a good picture: "Designer Finding Skills! How to quickly and accurately find the right big page background? 》
AnyForWeb Travel Website Hotel Booking Design Analysis 2.png
The use of pictures on Airbnb's website is worth learning from. The first screen is dominated by big pictures. Among the bustling crowd, a man and a woman walk happily and have a feeling of going home. The second half uses photos with local characteristics as backgrounds, allowing users to have a more intuitive understanding of local customs.
Third, reduce the delay when switching pictures May be the most attention and first appear in the hotel details page about the hotel pictures, and these picture content may be loved and hated for users. When the user is browsing, they will feel that the picture is complete but a bit messy, and when the user does not need it, it will cause delays due to some normal operations. If the website can display some pictures first, let users who need to see more pictures click into a special picture section, and categorize these pictures, so that users can quickly find the content they need in a targeted manner. This design is more consistent. user experience.
Travel a lot
AnyForWeb Travel Website Hotel Booking Design Analysis 3.1.png
Youduoduo's detail page pictures use the effect of zooming in the picture after hovering the mouse, and there is also a "All Pictures" button.
AnyForWeb Travel Website Hotel Booking Design Analysis 3.2.png
Click "All Pictures", a pop-up window will appear, and the left category shows the classification of the picture content type for users to choose; the right side shows pictures and thumbnails. This form makes the parts of the picture very clear.
4. Complete and detailed hotel information The information in the hotel information detail page is very similar, but some subtle differences can make the user experience of the website very different. Most website introductions take official information such as "hotel profile" as the primary content. In fact, users don't really need these official materials, and the practical content that is closely related to them is what they are most concerned about.
Where to live
AnyForWeb Travel Website Hotel Booking Design Analysis 4.png
The ranking of the content pages of the hotel is different from that of most websites. The text introduction part is arranged in the order of "hotel facilities", "hotel policy", "hotel introduction" ..., and is really designed according to the actual needs of users.
Fifth, special information should be specially marked. The special information mentioned here does not all refer to important information. It can also be some preferential information, gift items, or quantity reminders that some website owners think need to attract users' attention.
AnyForWeb Travel Website Hotel Booking Design Analysis 5.png
Booking is a professional global hotel booking website, and the design in the website is more user-friendly. As shown in the case of the hotel reservation process, the text and colors used are from the perspective of the user, and different colors are displayed for the content that the user may be interested in. This practice is very conducive to sales.
Six, vivid and vivid comment page The comments of other users are one of the sections that many users who are choosing will pay attention to. These comments may play a great role in guiding their final selection, so this part of the design should be more Value. The regular division will make users feel dull and monotonous, and try to design a lively and vivid comment section, which makes it easier for users to accept and recognize.
AnyForWeb Travel Website Hotel Booking Design Analysis 6.png
The review section of the TripAdvisor website is designed as a dialog box, which supports both graphics and text, which increases the user's trust and makes users feel more involved when browsing.
Seven, emotional reservation calendar Although the reservation calendar is only a very small link, but users can easily cause confusion here, so giving users a timely interactive response becomes particularly important, color difference display or small annotations will not appear redundant. But in this part of the design, we must also pay attention to that the area should always be kept clean and tidy, and we should not neglect the sense of sensation because of too much content.
Where to go
AnyForWeb Travel Website Hotel Booking Design Analysis 7.png
Qunar's reservation calendar design is very considerate. When selecting a date, a light blue shade is displayed, and the user is told the total number of days with a small logo, which greatly reduces the user's thinking time.
8. Interaction to generate feedback When browsing any website, users like to have a feeling of "I am not alone", so a small action generated by each mouse hover will make users feel very warm.
AnyForWeb Travel Website Hotel Booking Design Analysis 8.1.png AnyForWeb Travel Website Hotel Booking Design Analysis 8.2.png
Yilong's homepage is fully interactive, with feedback on almost every hover. However, although the case website has a lot of interactive responses, it will not be redundant and complicated. This also gives us some inspiration: when there are many interactive actions on a page, it is necessary to pay attention to the response that is generated within a specified range. Once it exceeds the range and affects other sections, it will be too cumbersome.
Nine, split the complex process Most of the hotel booking process will not be very complicated, and is generally similar to the general online shopping process, but the first time booking users may feel a little less secure, and split and display the entire process is to eliminate user anxiety The best way.
AnyForWeb Travel Website Hotel Booking Design Analysis 9.png
Tongcheng website carefully split the whole process. Expressing each of the more important links in spoken text allows users to not only have a clear understanding of what to do later, but also increase the affinity of the site.
X. Reduce input boxes and required fields Full-screen input boxes and required fields marked with a red asterisk are inherently an offensive visual experience, and many websites happen to do this! Why must users be registered before they can book or purchase? This mandatory behavioral requirement makes users feel that they are in a passive position. Wouldn't it be better if the website could resolve the login registration problem with a soft attitude?
AnyForWeb Travel Website Hotel Booking Design Analysis 10.png
For example, the way of Tuniu.com, "login or register for more discounts", such guidance may be easier for users to accept willingly.