Comment: This article introduces the entire process of NetEase Weibo's development with HTML5
HTML5 is increasingly favored by Internet development teams at home and abroad. Foreign, Google is enthusiastically developing the Chrome Web Store, Microsoft has released an Irish Spring theme website that supports the development of HTML5 technology, and Nokia has invested heavily in purchasing and building NOKIA MAP business. Domestic Internet giants are also interested in the new web development standards blown from across the ocean and have begun to test the HTML5 products.NetEase Weibo’s iPhone platform Web App product was successfully launched in the first quarter of 2012. Now I will share the experiences and lessons learned from this project development with you, and I hope to grow together with you in the HTML5 development environment.
Staffing
1. Developer configuration
Product Manager: 1 person;
Interaction designer: 1;
Visual designer: 1;
Front-end engineer: 1;
Backstage engineers: 2;
Tester: 1 person.
2. Development time
Interaction designer: 22 working days;
Visual Designer: 14 working days;
Front-end engineer: 50 working days;
Backend Engineer: Because of using the original backend data, you only need to cooperate with the front-end engineer to call the data
Among them, interaction and front-end use the longest time in the entire development cycle.
NetEase Weibo Web App Development Process
1. Functional requirements planning: different from the web and local clients
Person in charge: Product manager; Participant: Interaction designer
NetEase Weibo Web App (all refer to mobile phones in this article) is different from Web products and is also different from local clients.
1. Compared with the web, NetEase Weibo Web App has strong advantages such as mobility and media-rich, and has disadvantages such as small information presentation space and deep information architecture. The usage situations of the two are different. Weibo Web is mostly used immersively under abundant time and superior network conditions; Weibo Web Apps are mostly used under trivial time and network conditions of uneven quality.
Therefore, NetEase Weibo Web App should avoid the large and complete functions, and need to extract and select the functions most commonly used by users in the mobile environment from the web, and add unique needs functions on the mobile side (such as the localized service function will be considered in the iteration stage).
2. Compared with local clients, NetEase Weibo Web App has the advantages of no installation, simple upgrade, low development cost, and adaptable layout. It also has the advantages of slow response speed, low permissions for retrieving mobile phone native controls, and slightly weak stability.
Based on the advantages and disadvantages of the two, NetEase Weibo Web App needs to catch up with the high-quality experience of local clients and try to ensure lightweight and fast.
In a word, the functions of Web App can be more refined than those of Web and local clients, meeting the most core needs of users in mobile environments.
NetEase Weibo Web App function planning, as shown below:
2. Information architecture design: as shallow and narrow as possible
Person in charge: Interaction designer; Participant: Product Manager
People who have made mobile Internet products must know why the information architecture needs to be as shallow and narrow as possible. The biggest reason is the small and expensive display space of the mobile phone. The information architecture of the local client of the mobile phone needs to be shallow and narrow, and Web Apps need this even more, because there is always a bottom toolbar of the browser in the browser's page, causing a small piece of the already cramped display space to be eaten away. As shown in the figure below:
The browser toolbar at the bottom of the mobile phone screen is very useless for Web App products: Web App itself is a closed-loop application and does not require the browser toolbar. Even if it does not affect the large information architecture, it will erode the precious display space and have an important impact on the design of the navigation system (this part was briefly analyzed in the previous article "Discussion on Navigation Design of iPhone Web App".).
Webjx article introduction: NetEase Weibo, the actual development of HTML5.
3. Interaction design: simple and efficient
Person in charge: interaction designer; participants: product manager, visual designer, front-end engineer, back-end technician
Interaction design concept:
The specific interaction design concept of this product comes from: user usage scenario survey, competitor analysis, Web App research status, and Weibo Web App's own requirements. The interaction design concepts finally summarized are mainly:
1. Enhanced ease of search:
Strengthening global navigation, quick return to the homepage, regular common operations, timely animation demonstrations, simple and clear web page layout, etc.
2. Improve usage efficiency
Reduce the information architecture level, give appropriate shortcut key entry, ensure safe touch areas, consider user browsing habits, give priority to core functions, eliminate unnecessary visual noise, etc.
3. More intelligent and considerate
It supports offline use, automatic filling in information in editing after unexpected interruption, cautious use of warning boxes, assistance in search suggestions implementation, toolbars arranged for current task needs, active and effective feedback, etc.
4. Improve task concentration
Single task operation path, timely hidden tab navigation, eliminate interference factors, unavailable button grayscale display, task page maximization, no function minimization, etc.
5. Platform consistency:
Watch it now, click it, list view of the iOS platform, push screen animation during forward and return operations, modal view of the iOS platform, warning boxes, call-up native controls, simple and clear jump logic, etc.
The interactive design concept at this stage is no longer just a concept, but more of a specific design guidance for the Web App product. The design implementation method that carries the beautiful design concept is an important implementation in the design research stage.
There are many design content and details, here we will only pick up one detail to share with you:
Enhanced ease of search - Enhanced global navigation
Compared with the original wap Weibo, the fixed existence of the global navigation bar is a big change. Let’s briefly analyze the reasons for doing this:
–What is the user’s usage environment? - Outdoor mobile situations (such as on the subway or in line), or indoor idle state (such as browsing Weibo before going to bed);
–What is the purpose of the user coming to this page? -Browse Weibo;
–What are the common actions users use on this page? - Pull down to read, top and load new information, click other tabs to perform jump;
– What are the benefits if the global navigation bar is fixed at the top? - Convenient for users to return to the top, convenient for users to load new information, convenient for users to switch tabs, and has a strong sense of global control;
– What are the disadvantages if the global navigation bar is fixed at the top? -Swallowed valuable information display space
…………
During the user's use, the behavior of pinning, refreshing, and switching tabs is also a relatively frequent behavior, and the convenience of operation needs to be ensured. The fixed global navigation bar can meet this requirement: clicking the HOME key can be topped and refreshed, which can facilitate users to switch tabs. At the same time, the fixed global navigation bar can enable users to know clearly where they are and where they can go, giving users a strong sense of global control.
4. Visual design: Experiment of fresh style
Person in charge: Visual designer; participants: product manager, interaction designer, front-end engineer
The determination of the visual style of NetEase Weibo Web app has been discussed through multiple angles:
1. Should we keep the color tone consistent with the NetEase Weibo local client?
Products need to maintain a certain consistency on different platforms, and color style is also an important part of forming product temperament. So do we need to use skins similar to NetEase Weibo’s local client? The main color of the local client of NetEase Weibo is red.
The analysis is as follows:
–The benefits of using this red are: stronger product consistency; the product temperament formed by red is more energetic.
– The disadvantage of using this red is that the red area is slightly eye-catching compared to Weibo content, and immersive reading is more difficult to achieve;
Using NetEase Weibo Web App through safari browser, the final visual effect is different from that of local clients, that the browser toolbar always occupies a line of space at the bottom of the screen. Red is a relatively noisy color, while the browser's toolbar is blue and gray, which is relatively quiet. The huge gap between these two colors makes the glasses extremely uncomfortable.
Based on the above analysis, it is not suitable to use the local client's red color.
Webjx article introduction: NetEase Weibo, the actual development of HTML5.
2. What is the impact of running in Safari browser?
NetEase Weibo Web App is run and displayed from the safari browser, which is one of the environments for this product. The web page gives people a light and streamlined feeling, while the local client gives people a heavy and stable feeling.
Therefore, lightweight visual style is a good choice.
3. Current visual style trends
The fresh style led by Metro UI and Google+ has become a significant visual style development trend. After a period of exquisite and complex visual experience, I returned to the simplicity and fresh visual style began to be popular.
So, the visual designers have tried several visual attempts, including red, cool black, and fresh light gray. After comparing from multiple parties, everyone agreed that the fresh and light gray color was. Fresh and light gray are the main color, and the icon clicked state is the red commonly used by NetEase, which maintains the consistency of visual style to a certain extent.
5. Front-end development: Break the tricks
Person in charge: front-end engineer; participants: product manager, interaction designer, visual designer, back-end technician
When you reach this part, you may be more concerned about what the specific code is like and what the implementation framework is like? Sorry, the product secrets involved in the company, and the specific implementation code cannot be displayed to everyone. Forgive me!
Here we select 2 netizens’ questions to briefly answer:
Question 1: Can you talk about the front-end architecture? Why is sencha not used?
Answer: Because sencha touch 1.x/2.x, jQuery mobile, etc. are not ideal for customization, performance and resource consumption, NetEase Front-end has developed its own framework. As you said, it uses seajs to handle script loading, and iscroll simulates scrolling. It seems that the effect is still good. NetEase Front-end will continue to improve this framework.
Question 2: Can you take pictures and upload pictures?
iPhone Safari does not give permission to retrieve cameras and galleries, so this requirement is not yet met. By the way, if Android gives permissions, it will definitely meet this urgent need at that time.
6. Follow-up work
The subsequent work mainly involves interactive inspection, visual inspection, QA testing, summary and feedback to fix problems after it is launched, and planning for the next iteration. Everyone understands the project process, so I won’t say much.
Lessons learned from this
1. Feelings about workflow
1. Be the leader in excellent experience design.
This project is a typical example of design-oriented approach. First, it gives designers enough time and space to play, while technology can be counter-attacked. This working idea is the cornerstone of the entire product to get a good user experience. HTML5 technology is powerful and has too many possibilities; and design is to shape these technical possibilities into molds.
2. Product manager, interaction, vision, front-end communication in a timely and frequent manner
Throughout the entire project, product managers, interaction designers, visual designers, and front-end engineers hold a meeting every week. It was later proved that this frequent communication greatly reduced the rework rate and improved development efficiency.
3. Run quickly with small steps and focus on iteration.
NetEase Weibo products are relatively complex, and the development progress of HTML5 is relatively slow and the manpower is limited. It is impossible to complete all the functional details and go online at the same time. Otherwise, it will take one month to debug later, adding a heavy burden to the rapid development of the product. Therefore, it became an inevitable choice to only do the most core functions in the first issue.
2. User experience
1. The navigation system is more suitable at the top of the screen.
The browser's toolbar has always existed, which makes the tab navigation bar no longer suitable to be fixed at the bottom of the screen, and the top is more suitable.
2. Convenience is more important, and the most commonly used functions are cleverly set.
Due to product performance and browser performance, the current Web App fluency and jump speed are still not comparable to Native Apps, and the jump cost is slightly higher. Therefore, it is necessary to bring the most commonly used functions closer to users to reduce the waiting cost caused by jumps.
3. The visual draft is a balance between aesthetics and simplicity. Most visual drafts need to be implemented using code.
Almost all vision is implemented through code, and it is best not to be too complicated to visual design. It also takes time for front-end engineers to digest visual drafts.
3. Understanding of technical implementation
1. The permission restrictions of Safari browser, Web App cannot call camera tools and does not support the image upload function.
This is a headache and a helpless thing. The permissions given to the iOS system to the Web App are too low. In contrast, the Android system's Web App can retrieve camera controls and also support the Weibo image upload function (but the Android version has not been developed yet).
2. Cutscenes cannot achieve smooth effects like local clients.
The reasons are: good cutscenes will erode the performance of the product; HTML5 technology is not so perfect and mature; there is still a lack of a powerful browser.
summary
In addition to the permission issues of iOS system, the excellent performance of Web App is close to that of Native App. HTML5 technology has given wap web pages a new life and brought disruptive changes to wap. In HTML5 projects, functional planning is best for refining; the information architecture needs to be as shallow and narrow as possible; interaction design needs to strive for simplicity and efficiency; visual design also takes into account the browser's special operating environment; the front-end not only needs to gradually digest interaction design and visual design, but also boldly try to counterattack in new technologies and new problems. Frequent communication between the entire team is very necessary, and it is best to take small steps and run fast development steps.
With limited manpower and energy, there are inevitably biases. Everyone is welcome to make a fuss! Looking forward to discussing this interesting topic with you.