NetEase’s popular H5 interactive gameplay!

In the early years, H5 was NetEase’s hit H5 interactive gameplay! It is actually more like a PPT on a mobile phone, supporting only basic gestures such as clicking and sliding. The focus is on content display, supplemented by interactive forms.

But today, the gameplay of H5 has made a qualitative breakthrough . Not only are there a wide variety of interactive forms, but the form and content can also be closely integrated, creating an effect where 1+1 is greater than 2.

In this issue, we will summarize the most popular H5 interactive gestures .

01 Click Interaction

Clicking is one of the most common gestures and can be used for page transitions. This kind of interactive gesture generally requires setting up click guidance .

Guides can serve as annotations to help users understand H5, allowing users to follow the ideas of H5 and promote the development of the plot. Personalized guidance design that matches the theme can quickly bring users into the situation.

For example, in Rednet’s “Take the Seeds of Hope to Beijing”, users can click on the luggage on the luggage conveyor belt to “unpack and inspect the goods”, check the representatives’ suggestions, and listen to their stories.

H5 uses a suitcase as a click button to build a scene for users to go to Beijing. Even if you cannot be present in person, you can still "participate" in the meeting and learn about its content.

Click gestures are also commonly used in test-type H5s . Users click on the screen to select different options and generate exclusive test results.

NetEase Dada’s “Test Your Philosophical Temperament”, “Test Who You Are in Ode to Joy” and “Breeding Manual” are all test-type H5s that can be completed with a simple click of interaction.

02 Combo Interaction

Combo interaction is mainly used in game H5. Continuously clicking the screen has a strong sense of rhythm, and associating the number of clicks with the point ranking will make it competitive, stimulate sharing, and attract more people to participate.

This single interactive method is relatively simple to operate, so it will be combined with limited time, limited number of times and other gameplay.

NetEase Dada’s “Marvel Movie 10th Anniversary” H5 has designed a segment for “beating” Thanos, where users need to tap the screen and record the number of times they “beat” Thanos within 10 seconds. After 10 seconds, users can see the number of combos and their ranking in the entire network.

"Protect Your Lucky Football" is an H5 that does not set a limit on the number of combos. Combos require accuracy rather than quantity. You need to click on the screen to control the height of the football. It cannot "fly" too high and hit birds and stone pillars, nor can it fall to the ground.

"Traveling Through 70 Years of China" is a video H5 produced by NetEase Dada to celebrate the 70th anniversary of the founding of New China.

The "Like for the Motherland" section requires users to tap the screen repeatedly, with each click counting as one point. The heart special effect produced during combos will change color, giving the user a sense of freshness.

The idea of ​​"like" comes from short video likes. Interactive gestures are a form familiar to users, which is conducive to promoting positive emotions of "cheering" for the motherland and enhancing the sense of experience and immersion.

03 Long press interaction

Long press requires the user to follow the instructions and touch a button on the H5 page for a long time to ensure continuous playback and smooth transition of the screen.

Since long pressing requires the user's finger to remain still and pause, users may find it boring. When designing, it is best to indicate the playback progress of the H5 and give users a reference for the duration.

Long press interaction is often used in H5s with a one-shot format. It often tests the connection between the stories and the switching of shots. If used properly, it can bring a good experience to users, allowing them to be more focused, thereby increasing the completion rate.

"You and Me Back Then" uses a long press action, allowing users to watch all content in picture-in-picture format.

"Wulin Wai Zhuan", "Chinese Paladin", "Young Justice Bao"...H5 looks back at the childhood summer movies of the post-90s generation, instantly evoking childhood memories.

"One Minute Tour of the Hong Kong-Zhuhai-Macao Bridge" also displays the scenery of the Hong Kong-Zhuhai-Macao Bridge by long pressing to advance. In order to prevent users from getting bored, the H5 will display the number of kilometers "traveled" at certain intervals to indicate the playback progress.

04 Parallax interaction of long images

Long-image parallax interaction is often combined with sliding gestures to drive continuous playback of H5.

Since the movement speed of parallax animation is different from that of the main visual picture, the sense of spatial hierarchy is more distinct.

This can increase the freshness of the picture and alleviate the visual fatigue caused by high-density content. Reduce the boredom of reading long texts and pictures, and assist H5 in smooth transitions through visual effects.

NetEase Dada’s “Confession” uses this method to advance the story by swiping down and present the changes of the protagonist to users. Use sliding gestures to control the playback of stories to make users feel more involved.

"We work hard to make every good thing you want" uses sliding long pictures + parallax animation to lead users through 1988 to 2018, connecting the 30-year development history of Industrial Bank.

"The Time I Met You in a Fairy Tale" uses a long picture, and when sliding, some small elements will be interspersed, making the whole H5 look cool and rich.

05 Drag interaction

Dragging is different from sliding. You need to hold down the screen and drag from one point to another. The speed of movement is controlled by the user. It is suitable for planning topics such as picture display or narrative .

NetEase Dada’s “Sleeping Position Competition” H5 uses skeletal animation technology. Users can drag the limbs of the little man and DIY their own sleeping position on the bed.

In addition to being able to choose scenes and character appearances, H5 also provides small objects on the bed for matching, which can be enlarged or reduced to decorate the bedroom.

06 Pair-finger zoom interaction

Two-finger interaction requires the user to touch the screen with two fingers at the same time, such as sliding the screen to zoom in or out of something, and is also often used for screen transitions.

This type of interaction requires micro-manipulation of gestures and the gameplay is somewhat complicated. But the interactivity is stronger and more interesting than single-finger clicking and sliding.

NetEase News' H5 "Comments are closer to the truth than news" adopts a time-travel setting, and designs a two-finger zoom-in gesture to enter the next page, and click the button to view the details of the current page. The consistent gestures on each page make it easier for users to understand.

07 Sound Interaction

In addition to tactile interaction, there is also auditory interaction. Voice interaction methods are relatively rare, and most of them are related to recording. You can record a paragraph according to the H5 instructions and generate your own audio by DIY.

NetEase Cloud Music's "Voice Live Single with a Story" allows users to record, tell their own stories, and create recording files. After the recording is completed, a customized poster is generated with the copy.

You can control H5 with voice, or select music clips of your own choice and DIY it into a complete song.

NetEase Cloud Music's "Play Music, I'm Never Afraid" allows users to choose their favorite style from several sound effects, then tune the original song to generate personalized music.

DIY music represents personal preferences and has certain social attributes.

08 Writing Interaction

Writing interaction is a form of interaction with a high degree of freedom, and users can freely create text and drawings based on prompts.

The images created through painting have distinct personalities and are also a reflection of user emotions. Faced with the characters drawn by themselves, users can also devote themselves to H5 more attentively, and the churn rate is often not high.

NetEase Dada's "Rio" provides users with certain guidance and allows them to draw images of little people, ropes, parachutes, etc. according to the prompts.

Although the lines of these images are a bit rough and the contrast with the background is sharp when they move, because they are original characters, users are more tolerant of the images.

The writing interaction of text is often used in testing H5. The user enters the name or what they want to say according to the prompts, generates a poster and obtains the test results.

NetEase News’ H5 “Protect Chinese Characters in Your Name” allows you to enter your own name and find endangered Chinese characters that you need to protect.

The H5 test generates rare characters that are rarely used in daily life. The theme of "Protecting" Chinese characters can not only allow users to recognize these endangered Chinese characters, but also give users a sense of mission to actively share and spread Chinese characters.

09 Gravity Interaction

Simulating existing physical laws can greatly lower the threshold of understanding and add interest to planning.

Mobile phones provide many possibilities for technical development in terms of hardware. By making full use of hardware devices such as gravity sensors, gyroscopes, and speed accelerators, you can innovate H5 gameplay and increase the sense of immersion.

When you shake your phone, H5 will automatically determine the angle at which the phone is tilted. Because it is highly technical, gravity interaction is often used on a specific page.

NetEase News' "Space-Time Love Agency" uses the mobile phone's gravity sensor to shake the phone to wake up the protagonist and start the plot.

10 3D Space Interaction

3D interaction mainly uses 3D technology to build three-dimensional scenes, break through the limitations of flat pictures, and emphasize the sense of hierarchy .

However, this type of interaction is difficult to develop and design. Considering the user's usage habits, the gameplay of 3D interaction is relatively simple, often combined with basic gesture operations such as clicking and sliding, and 3D appears as a highlight of H5.

《My Neighbor Totoro Online Gachapon Machine Opens Today! 》 has made elements such as “Gachapon machine” and “gold coins” into 3D, and the originally normal-proportioned anime characters into Q version.

Twisting the capsule toy is a dynamic process. If two-dimensional flat images are used, the interactive effect is not obvious; 3D objects emphasize the user's sense of presence and restore the unknown fun of the capsule toy, making the H5 more realistic to play.

11 Panoramic Interaction

In 360° panoramic mode, users can slide up, down, left and right.

This type of H5 carries the entire screen interaction in a VR -like form, pays more attention to the design of the H5 scene, has a strong sense of spatial three-dimensionality, and requires smooth 360° boundary connections of the screen.

However, due to the large amount of content being loaded and the large size of H5, problems such as screen freezes during playback are likely to occur.

NetEase News' "One Hundred and Twenty Years" presents a panoramic scene to introduce users to the 20-year development history of NetEase. Users can rotate their phones 360° to view the panoramic picture and immerse themselves in the virtual scene created by H5.

Author: DaDaer

Source: NetEase H5 (wangyih5)