Design Case ANALYSIS: Google wave scroll bar

Source: Internet
Author: User

After seeing some of the articles on Wave's scroll bar, I think it is necessary for Google's designers to write two words carefully. Wave's scroll bar is a positive attempt to improve the drawbacks of the current scroll bar, although the attempt is unsuccessful.

The scroll bar is simple and straightforward, it is a very common interface control, but from the outset, there are some problems with the design of the traditional scroll bar. In my opinion, Google's designers are trying to solve two of these problems through wave: 1. Traditional scroll bars force the user to switch the muscle group of the Palms frequently; 2. The mechanism by which the traditional scroll bar changes the height of the slider according to the length of the document is not appropriate.

First, first question. The muscle groups that humans use are not the same when it comes to manipulating activities such as clicks and moving the mouse. As a token of distinction, the first type of operation is called fine motion mode, and the latter is called rough motion mode. It is always difficult for users to switch between the two modes of motion. For example, in the Windows scroll bar, you are clicking on the scroll bar's "down button" slowly scrolling through the screen, if you want to click the "Up button" to browse the previous content, you need to move from the Click down button (fine motion) to the mobile Mouse (rough motion) and then switch to the Click up button (fine motion). A simple operation requires two times to switch the muscle group, which makes the user feel tedious, tired and therefore impatient. To solve the problem, Apple's scroll bar in MacOS was designed to tie together two buttons, making things better.

In wave, Google tries to go farther: they put the up/down buttons directly together with the scroll bar, reducing the switching distance between the three elements to a fairly small degree. In this way, whether to switch the scrolling direction or toggle the direction of the button and slider, can be done through fine motion mode. At the same time, if you click on the scrolling button continuously, the slider itself will not move, but the following shadow hints at the current screen display range, when the mouse moved the button, the slider will move to the shadow location-the same way as the chrome off tabs interaction.

Then the second question, in the traditional scroll bar, generally by changing the height of the slider to prompt the user's current display content for the overall content of the document ratio. But there are two problems: 1. Changing the height of the slider is not realistic-obviously the slider represents the size of the current display area, the length of the "slide rail" is the length of the document, why is the document longer, the rails unchanged, but the size of the slider changes? 2. Too narrow (short) sliders are difficult to select when the document is too long. So Google does the opposite by fixing the size of the slider and showing the length of the current wave through the height of the "rail". This way, when you see the height of the rails, the user has an expectation of the length of the entire wave, and a fixed length slider is easier to select.

Although the above two problems are Google in a clever way to solve, why the end is still being scolded? I think it's because:

    • Compared to the original scroll bar, the shadow of the wave scroll is too complex to design, although it reduces the user's physical load, but also increases the cognitive burden
    • People have developed the habit of keeping the rails highly fixed and inferring the length of the document through the slider, and wave has completely reversed the user's habit.
    • For many users, the slider is used much more than the button. For short documents, large-area sliders are easier to select, while larger active space (highly-maximized rails) is more likely to enhance user control.

Although not very successful in the end, but we can see from the wave of this attempt to Google's attention to the details of the interaction and the strong spirit of innovation. The importance of the product to the details, directly reflects the company's attention to users and sense of responsibility. In some of our commonplace places, there are a lot of refined details that we can find, improve and innovate. For example, (take the scroll bar for example), have you noticed anything special about the chrome scroll bar? (Hint: Try to search the current page for frequently occurring words)



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.