No idea how to make H5? Here is a complete H5 case idea

Friends, do you still remember the NetEase H5 event that was constantly flooding your circle of friends? As an Internet designer, tears of shame flowed from the corners of my mouth. I was so greedy and envious! With the same nine years of compulsory education, why are their activities so effective? When others try it, it explodes, but when I try it, it fails. What elements does an excellent H5 contain?

Outline:

1. Event Overview
2. Theme Concept
3. Visual style design
4. Interactive animation design
5. About Adaptation
6. Data review summary

1. Activity Overview: OVERVIEW

Why do H5 activities?

This event was jointly organized by Ping An Bank's corporate business center and Planet B, using IT corporate's newly designed IP image, Light Bulb and its family members as the carrier.

The activity aims to promote corporate business middle-office products. The corporate IT IP designed by the wowdesign team - Dengbaozai and its family brand image, combined with the Dengbaozai flash check-in event, jointly operates online and offline to promote the corporate business middle-office.

2. Theme Conception: H5 THEME

1. H5 type selection

What kind of activity theme can attract users' attention? What kind of content resonates with users?

It can make them voluntarily forward the message and be willing to use this virtual activity to express their own personality to their friends. Therefore, the direction of the activity is particularly important. We classified the existing H5 activities in the market, analyzed which pain points of users they addressed, and gained direction from them.

1) Test class

It meets the needs of users to understand themselves in an interesting and low-cost way.

2) News Hotspots

It uses hot topics and events as materials, and is characterized by high timeliness, attention to distance from users, and a sense of participation and authenticity.

3) Interactive games

It is highly interactive and its characteristics are mostly fun, easy to use, and gives a sense of pleasure and accomplishment.

4) Public Welfare

Taking social hot issues as the subject matter, such as environmental protection, protection of endangered animals, caring for the elderly, etc., it starts from social focus issues, demonstrates social responsibility, and has a profound educational and warning effect.

5) Soft article stories

Guided by independent experiences and stories, most of them are well-known embarrassing things in life, work and relationships, which indirectly achieve certain marketing purposes.

2. What factors influence user participation and forwarding?

User engagement and forwarding fission data are the measures of the success of an activity. From the perspective of user psychology, the influencing factors are as follows: narcissistic and ostentatious psychology, resonance psychology, and good visual effects.

3. Current hot topics and user psychological state

Under the epidemic, everyone's psychology and economy have been greatly affected, anxiety and disappointment are rising, and they hope to express their emotions.

4. Comprehensive analysis conclusion

• Combined with the psychological state of users during the epidemic, the impact of the epidemic on their lives, work, and economy.
• By using the "resonance" in the screen-sweeping factor and combining it with familiar Internet buzzwords as tag keywords, it accurately meets the users' demands to express themselves and share their current situation.
• Use test-type gameplay to allow users to test and pick their own life status in 2020, understand themselves, and share their current situation.

Therefore, we hope that users can select keywords and test to generate a 2020 life status report, which will hit the users' hearts, resonate with them, and enable them to participate in and forward this activity. And select the theme "Pick your 2020 heartfelt words"

3. UI style design: H5 STYLE

Through the analysis of past H5 cases on platforms such as NetEase, the design styles are mostly Memphis style, vaporwave glitch style, illustration style and other relatively young, lively and expressive styles. Combining the line drawing style and theme of our IP image, we finally decided on the Memphis style design style.

This style can express a variety of personalized cultural connotations, ranging from naive and funny to weird and strange. The use of some bright, humorous and highly saturated bright tones gives users strong sensory stimulation and rich emotions, which fits the various heart-touching speech scenes of this event.

Design display:

4. Interactive dynamic effect design: DYNAMIC EFFECT

For H5, simple interactive operations that do not require thinking are the basic requirements, and cool and fun interactive effects are essential bonus items. We break down interactive effects into three aspects:

1. Operation guide animation

After the h5 theme of the homepage is clearly explained, the first thing is to guide users to the next tag selection page, so the button must be in the most comfortable click position and have the strongest operation prompts, so the button breathing and zooming animation prompt is a good choice.

2. Interactive transition effects

The consistency of interface transition elements and the entry and exit animations of interface elements can make the interface smoother and more coherent, and provide a better operating experience.

3. Tab flipping effect on tab selection page

The tag selection page is the core interactive part of the entire product. In addition to meeting the basic operational interaction requirements of ease of use, it is also necessary to increase the fun of the operation and bring surprising interactive effects to users, such as the 3D depth of field rotation and flipping operation of the tag, and click to select interesting dynamic feedback.

V. About Adaptation: ADAPTATION

1. Screen adaptation

To adapt to 16:9 and longer full-screen mobile phones, the page must be broken down into the main layer, element layer, and background layer.

1) Main layer, element layer

Each element needs to be positioned in a corresponding relationship. For example, the main layer can be adjusted to the center of the screen by cutting the image, and then the distance between the element layer and the top and bottom can be determined.

Note that the data here needs to be adapted from the short screen (16:9, that is, iPhone 6) to the tall screen, with the short screen as the basis, so as to avoid the problem of element overlap after adaptation.

2) Background layer

The background image is scaled and cropped to fill the screen according to the screen size. Therefore, the background layer is generally designed to be a relatively simple picture to avoid large visual differences when cropping and scaling.

2. Result page scalability adaptation

In an H5 activity where you select a tag category, the result page needs to display the tags selected by the user, but the number of tags selected by the user is uncertain, which involves the issue of length adaptation of the result page.

Therefore, the background color of the label display part needs to be a solid color or a two-sided continuous image, and the height of the two-sided continuous image must be consistent with the height of a single-row label. Ensure that for each additional row of labels, add a two-sided continuous background image of the corresponding height to ensure that the background page height is always adapted to the height required for the corresponding number of labels.

6. DATA SUMMARY

1. Pageviews (PV) and users (UV)

In order to detect the effectiveness of the activity, the number of views (PV) and the number of users (UV) were pulled through the data platform at each period of the activity to help us determine the dissemination fission effect of the activity, and analyze its influencing factors: number of exposures, channel quality, and attractiveness of title content. By continuously optimizing the influencing factors, we can ensure that the expected activity effect is achieved within the planned time.

2. Funnel data

By analyzing user churn through funnel data, we can further analyze the reasons for churn: whether the page operation instructions are clear, whether the page content is attractive, and page usability, which helps us optimize operation instructions, content design optimization and usability checks.

3. This H5 event can improve

1) UI style should be more in line with the theme

In terms of theme expression: First of all, as an activity theme that touches the heart during the epidemic, it does not convey the atmosphere of the heartbreak and the epidemic very well visually, resulting in insufficient sense of immersion in the activity, and users’ perception of the theme of the activity is not clear enough. It is more of a continuation of the IP style of Dengbaozi.

Style selection: This h5 design is based on the newly born IP image "Light Bulb" as the visual KV main body, and the initial expression form of the IP image is line drawing style, and other expression forms have not yet been expanded. In this case, the Memphis style of line drawing is an inevitable choice.

Therefore, after the IP image has a mature and richer style, there will be more possibilities for experimentation in the style of the entire event to find the best visual expression of the theme of the event.

2) Motion effects need a big breakthrough

With the improvement of mobile phone performance, cool and novel h5 animations are a good way to enhance user experience and capture users' curiosity and attention. But this requires a lot of investment in development resources, as well as the design and research of motion effects on the design side.

Tmall and NetEase’s recent H5 animations have used a lot of 3D visual effects and 3D depth of field operations, which is of great help to the innovative experience of H5. There is still a lot of room for research in the animation field in this event.

3) Operational copywriting needs to be more eye-catching

In this era of information explosion, without an eye-catching title, you are destined to be silent in the vast amount of information.

For this purpose, we conducted a large amount of user research after the launch, and tried multiple directions for the title, such as business promotion orientation, real-time hot spot orientation, etc., combined with the three-break title structure commonly used in news. We also conducted AB testing and user research. Among them, titles with real-time hot spot feedback are the best, while business-oriented titles are not attractive to C-end users.

Therefore, when designing B-side products in the future, unless there are special requirements, try to design titles and content based on the hot topics and points of curiosity that users care about.

4. Conclusion

• Before designing an event, you need to clarify the design background, determine the corresponding design theme and direction, and what kind of event theme can attract users to participate.
• Memphis style, vaporwave glitch style, and illustration style are good choices for H5. Memphis style is easiest to produce visual effects, but this all needs to fit the theme and help render the theme atmosphere of the event.
• On the basis of ensuring user experience, H5 activities can add fun and interesting interactive effects, which is a plus.
• Since mobile phones on the market vary in size, adaptation issues must be considered.
• The data review and summary after going online can help us find problems and make the next event better. An attractive title can make you half successful.

Author: WOWdesign

Source: WOWdesign