Interactive experience trends that will become mainstream in 2015-2016

The most important interactive design article in May! This year, Baidu's designers started from the perspective of experience, combined with a large amount of existing reports and materials, to find those interactive experience trends that have already emerged and will form a certain scale this year. What’s different from last year is that the article also provides application scenarios of these trends, which is definitely worth reading in depth>>>

Mobile products:

The number of mobile applications continued to grow strongly in 2015, but the mobile interaction experience was changing. Compared with the endless new forms that emerged last year, this year's interactive experience trends are more about optimizing and deepening the experience in a certain aspect, with fewer creative leaders emerging. This shows that mobile applications have entered a new stage after the "explosion" in the market. This is closely related to the saturation of the smartphone market, the increase in phone screen size and the improvement in user awareness of applications.

1. Extensive Usage of Multimedia Search

With the continuous breakthroughs in technology, search input methods are no longer limited to text search. Multimedia search has made significant progress in the quality and accuracy of search results, creating a transition from entertainment to practicality. In many mobile scenarios, multimedia search has irreplaceable advantages over text search. The Baidu Mobile Trend Report 2015 found that the next generation of mobile Internet users (those born after 2000) are more receptive to multimedia searches. In addition, in terms of data traffic, the rapid growth of 4G also provides the necessary conditions for the practical application of multimedia search.

Camfind can search by taking photos of objects and accurately identify the color, texture, and attributes of the search object. And provide relevant pictures and relevant search results.

Google's voice recognition has become one of its main forms of search, with high application in many private scenarios, and the accuracy of its voice-to-text conversion has also been greatly improved.

Application scenarios: The cost of text input is too high, there is no ability to input text, or the search object cannot be described in text.

2. More Entries Proposed Contextually

According to the data in the "2014 Mobile Internet Data Report" released by TalkingData, there are an average of 34 applications installed on each mobile device in the country, and an average of 20 applications are opened. The competition brought by a large number of applications has prompted more applications to increase frequency of use and enhance ease of use by placing entrances in front of the main interface. However, the front-end entry approach only partially improves convenience, and mostly increases the user's usage burden and negative emotions. The pre-placement that is suitable for the scene will appear particularly considerate, reduce user interference, and enhance product stickiness and humanistic care.

NetEase Cloud Music has placed quick functions such as "Previous Song", "Favorites", and "Delete" on the lock screen interface. It brings great convenience to users who want to operate quickly. At the same time, these functions can also be folded into the "Menu", which is a very thoughtful design. Amap has moved the mobile navigation interface to the lock screen, solving the inconvenience of having to frequently unlock the phone when using it for navigation while walking.

The lock screen interface of the IOS system will recommend applications that may be needed based on the user's geographic location and surrounding information. For example, if a user opens the lock screen interface near China Merchants Bank, a quick entrance to the China Merchants Bank application will appear in the lower right corner of the screen.

Application scenarios: Applications with clear usage scenarios and frequent operations. You can add scene-based front-ends to the lock screen, notification bar, and other locations.

3. Minimalism of Interaction

The diversification of Internet terminals and the complexity of usage scenarios have made users' operations increasingly fragmented and impatient. Simplifying and shortening the process has become an inevitable trend. At the same time, users' awareness of mainstream interaction methods has increased, and their trust in conventional interaction processes has also greatly improved. Some simplification methods that seemed radical two years ago do not bring too much cognitive costs to users now.

Blink greatly simplifies the process of multimedia social networking. When socializing with picture content, the three actions of "selecting the target to send to", "creating the content to send", and "sending" are all completed by a single trigger event of "clicking on the contact". When engaging in video social networking, just long press the contact and then release it to complete the whole process.

Chrome integrates the "close" and "new" windows into the "refresh" action. The transformation of a drop-down action includes three forms of operation. Avoid the tedious process of switching in and out of multiple windows.

Application scenario: Simplify processes with many steps and frequent operations. Such as multimedia social networking, payment, etc.

4. Lightweight of Information Structure

The content carrying capacity in a large screen space is more complicated. Behind the intuitive flat visual design, the flat information structure is more important. There is a trend towards lighter and clearer information structures. A light information structure can not only strengthen the content itself, but also reduce the user's cost of understanding the information structure and logic, and shorten the distance for users to reach information.

In the core and high-frequency paths of browsing application details, Baidu Mobile Assistant uses a half-layer pop-up mode to "reduce the burden" of the overall framework and browsing behavior, avoiding page-level jumps as much as possible, while reducing the burden of users' browsing behavior and making the operating experience lighter and more natural.

As a "small and beautiful" functional application, UniqDay will take users' learning costs and acceptance into consideration at the beginning of product design. UniqDay uses a lightweight structural design to make users remember it the first time they use it. When adding and editing the countdown days, UniqDay cleverly uses pop-ups or translation to help users understand their current location, keeping the core module stable in the user's line of sight and reducing page-level jumps.

EMO breaks through the traditional framework layout and extremely strengthens the core functions. This immersive experience design is an extreme manifestation of lightweight and flat structure, allowing users to focus more on the function of listening to music according to their mood and the presentation of the content itself without being interrupted by other operation paths.

Application scenarios: Reduce the burden on applications with many information levels and frequent page jumps, or vertical applications with simpler functions.

5. Animation performance is more functional, bridging the cost-benefit gap

With the release of Android 5.0 Lollipop and iOS 8, two major mobile terminal systems at the end of 2014, smooth motion effects have gradually become a "standard feature" in an application or system. The current use of motion effects has led to an over-consumption of design and emotion. It needs to play a more directional and functional role. By naturally mapping abstract languages ​​through directional and suggestive dynamic effects, the hierarchy and logical relationship between interfaces and information can be more intuitively reflected, making applications easier to understand, simplifying the user guidance process, reducing user learning costs, and even bringing surprises to users.

The Android 5.0 Lollipop system relies on the Material design language's definition of card-based design and creates a textbook example of quantum motion effect design. The system uses a lot of skeuomorphism and clear directional animation to guide users and reflect the hierarchical logic of the page.

Yep! uses smooth displacement and deformation effects to help users understand the interactive mechanism of the search process (select an activity - send an invitation - wait for other users who want to do the same thing to match - search results), making the process smoother and more self-explanatory.

Application scenarios: This trend will be generally applicable to application scene transitions, prompts, and complex information hierarchical presentations.

6. HTML 5 interactive content is widely used to continuously enrich product performance

In October 2014, W3C announced the finalization of HTML5. The development of HTML5 technology has triggered innovations in interactive forms: we can see the widespread use of forms such as shake and 3D view. At the same time, we can see that in 2014, the designs of HTML5, such as story scenes and product sentiments, have concentrated on igniting the spread of mobile Internet and will bring a continuous wave in the future.

"Just One Word Between Us" by Dianping focuses on text-based reading performance. Differentiated sound and motion effects are used to create different story scene atmospheres, and text is used to cleverly outline text stories with different themes. Although there are no characters throughout the story, it triggers users' own associations everywhere, prompting users to have emotional resonance in multiple dimensions.

"The World of Dream Crystal Ball" presents users with a wonderful visual story scene with delicate visual images. Animations such as 3D view rotation allow users to zoom in to see details or zoom out to see the overall picture, unfolding the story like a verbal story, arousing user curiosity and attracting user participation.

Application scenarios: Operational activities that emphasize brand influence are suitable for emotional design.

7. Cardization continues to play its advantages in multiple terminals and achieves a classic design model

The card-based content presentation breaks the original model: content first, remove all distractions. It is a design pattern that is currently widely used. In scenarios where users need to browse a large amount of information, the efficiency of content presentation is improved. At the same time, cardization still has very obvious advantages in multi-platform website design and adaptation to various screen sizes.

The content of the mobile app is presented in a card-like format, which is very prominent in information presentation and has great display effects on device interfaces of different sizes.

In the latest Apple Watch apps, card-based design is also frequently used. In the Baidu mobile interface below, the card-based design can display important group buying information at a glance. The location service in Baidu Mobile also adopts a card-based design, ensuring that different card combinations and content displays can highlight the service content. .

Application scenarios: applications that need to display a large amount of information, cross-platform applications, etc.

8. Optimize and popularize large-screen operation to create an efficient experience

Nowadays, large-screen mobile phones can be seen everywhere. A larger screen can display more content, and the advantages are incomparable. According to the "IDC World Smart Device Tracking Report", the market share of large-screen devices will continue to rise. Users are also increasingly accepting large-screen mobile phones with an open mind.

Screens are getting bigger, but our hands are not. For large-screen mobile phones larger than 4 inches, the user operating experience is not satisfactory. As the operational inconveniences caused by large screens need to be addressed urgently, “design for large screens” came into being. By optimizing the interface structure, adding gesture operations, and adapting the one-handed operation layout, users can free their hands and operate more freely and conveniently on the large screen.

1. Focus on key functions at the bottom:

Move the "Function" or "Navigation" buttons originally in the top navigation bar to the bottom of the interface as appropriate, ensuring that users can use the buttons in an easily controllable area when operating with one hand, thus shortening the operation path and reducing click costs. Content-based applications such as Light, KEEP, and MONO design the main function buttons at the bottom of the screen, which not only improves the accessibility of operations, but also highlights the content and improves the reading and browsing experience.

2. More gesture operations, slide instead of click:

Taking iOS users as an example, the conventional return button is mostly set in the upper left corner of the screen, which is a blind spot that is difficult to reach for users with large screens. Storehouse is assisted by gesture operation, and users can exit the interface by swiping right, which brings great convenience. Users have gradually developed the habit of swiping instead of clicking to exit. PEEK is a gesture-based application that performs corresponding operations through gesture changes, boldly abandoning function buttons.

3. One-handed mode, reducing the operating area:

Due to the universality of the need for one-handed operation, both client products and system platforms have made corresponding solutions to adapt to one-handed operation. In specific scenarios, users can enter one-handed mode through a simple trigger method, narrowing the control range and controlling it to the area in the lower middle part of the page that is easily accessible by fingers. Double-clicking the Home button on the iOS system and the pull-down and hovering function on the Hammer phone are both system-level interaction solutions. At the product level, Baidu Input Method innovatively designed an input panel that can adjust its position and size independently, which has received very good user feedback.

Application scenarios: Platforms, tools, etc., applications that require frequent one-handed operation

9. Emotional permission requests increase conversion rates

During the first use of some iOS applications, due to functional service dependencies, they will request users' permission to call system functions, such as obtaining geographic location, accessing the camera, etc. The request is usually in the form of a dialog box, which is direct but intrusive. Usually, users will reject this scenario, which will lead to a loss of experience in related functional services and cause users to leave. Emphasizing the “pre-emptive” nature of permission requests during onboarding will effectively solve this problem. Delivering service value through emotional means allows users to understand the purpose of the call, which will effectively enhance user trust and thus increase the authorization conversion rate.

Before calling the iOS system camera request, the Looksery product conveys the purpose of calling the camera to users through emotional icons and interrogative language, allowing users to understand the purpose of the call, thereby greatly improving the authorization conversion rate.

Before obtaining the user's geographic location, the Gogobot product describes the corresponding usage scenarios and their necessity to meet the user's psychological expectations of opening this permission and improve the authorization conversion rate.

Application scenario: Applicable to applications that need to request system permissions, especially those that strongly rely on them

Generally speaking, in the coming year, the mobile application experience will be refined and deepened in their respective fields, pushing the experience towards a more extreme direction. At the same time, screen size, user cognitive accumulation, and changes in the product market provide more favorable conditions for improving user experience. We hope that these changes can be mastered and utilized by designers to create better experiences.