View Website Design Analysis by thunder

I wanted to write an article about the design and analysis of the thunder website a long time ago. Thunder has always been a website where I watch movies online. It is also my favorite website, so I am also happy to analyze its design, first from the structure analysis, that is, navigation, search, detailed information display, and playing page order.

1. Global Navigation

The home page navigation of thunder is very clear and clear at a glance,

 

According to the human visual path, most people except the Arabic and other minority languages are from left to right, from top to bottom, that is, the red arrow in the figure. This is also why it can be clear at a glance. Let's take a closer look at the Navigation:

 

Thunder looks at the Logo as a clickable link to return to the home page. In fact, the question of whether or not the Logo can be clicked is not a big problem, but for some expert users, it is a shortcut to return to the home page. Adding the design here can increase the user experience.

 

Usability navigation is very eye-catching and concise. It is placed next to the Logo, reducing the user's memory burden. When the user wants to log on, he can immediately move the mouse to the Logo. It also makes room for the advertisement on the right.

 

The main navigation bar contains a list of channels. The Division of content channels is very reasonable. The users who come to Xunlei may be idle for some time and may prefer watching TV series, some users are not very wealthy in time. For example, I don't have much time. I don't have enough time to watch TV series, so I have to watch movies. So I went straight to the movie channel as soon as I got up.

 

Secondary navigation is not very conspicuous here. Secondary navigation adopts the special form. The advantage of this topic is that it can recommend a lot of content, we can also take the most important topics to recommend.

 

After you finish the home page navigation, you can see the in-channel navigation:

 

From the perspective of different channels, consistent layout, the same color, the top global navigation color of each channel is much lighter than the current clock speed below, let your vision focus on the main navigation of the channel. There is a search box next to the main navigation of each channel to facilitate direct search. Another advantage is that it does not affect the main navigation as much as possible, after all, there are still a few users with specific search targets looking for their favorite content relative to the root category.

 

CATEGORY navigation

The popular category on the top right of the main navigation bar can help you quickly locate the current hot category.

 

From the above channel, we can also see that the channel-dominated navigation has a "classification" label. From this small and small energy-saving perspective, we can see that Thunder has paid more attention to the use of classification for navigation. Click "category browsing" on the movie channel to view the page.

 

Select a category, and then the page

 

After the page is displayed, the filtering conditions such as category are still displayed on the left. After each condition is switched, the search results on the right are displayed based on the selected conditions. The entire process is very clear, so you don't have to think about it. If you don't feel the existence of navigation, you can go straight to the movie you want to watch.

 

Associated navigation

In the associated navigation, Thunder has done a lot. In this regard, it never disappointed me. There is an interesting place on the homepage:

 

"You may like it". Although thunder may not be able to make a guess on this recommendation information, thunder offers different recommendation information for each user, this gives the user a feeling of being valued, and allows the user to close the right side of the title label. You can also set not to display it next time to reduce user interruption.

 

2. Search

Search can be used in either case. The first case is that the user has a specific search keyword, and the second case is that the current navigation cannot find the resource you want to search. From this point of view, search does not need to be placed in a very important position. As long as I want to use it, I can immediately know where it is.

The search entries on the home page are placed under the main navigation bar:

 

Compared with the main navigation of a page, the color of the search bar is much lighter and the visual focus is on the main navigation bar. However, the position of the search bar complies with the default design of most websites, it is placed between the main navigation and the content area. Therefore, it is very convenient to search for entries.

 

The search entries on the homepage of the channel are placed on the right of the main navigation bar of the channel:

 

Here, we also follow the principle that the location is not large and the location is obvious.

 

3. Details page design

In fact, at thunder, the status of detailed information pages is not very important. Links on many pages are directly linked to online playback pages. Only on the search results page, there is a link to the detailed information page:

 

The detailed information page is also clear and concise:

 

The title is very obvious, the key links are very prominent, there is not much blank, and there is no congestion.

Provide users with recommendation information:

 

 

4. Online playback page

Online playback pages are the final service pages, which are crucial pages in the entire system and the ultimate page that determines the user experience. The rest of the system is well designed, it cannot make up for the poor page. The online playback of the online playback page of thunder is the same as that of the detailed information page, which is very simple: