Detail Design tips: Details of the scroll bar design

Article Description: disappear from the scroll bar to see the detail design.

I believe all designers pay attention to detail! Even if sometimes forced by a variety of reasons, can not achieve as perfect as expected, but the heart must have a tangled insistence. In the most recent project, an alternative list was designed for the selector, and a "detail-specific issue" was found. The following illustration is an example. It's easy to choose between a fixed area and scroll for more when there are many alternatives. (Original intention)

Figure A: Original intention, and expected effect but after implementation, found a problem: the scroll bar is hidden. The scroll bar is displayed only when you scroll the mouse in the alternative content area. This affects the user's perception of this functional block, and there is little more to be realized. Unexpected

Figure B: The scroll bar is missing, this is not what we expect. After debugging, we still can't control the display of the scroll bar, so we have to modify the design. Lengthen the height of the area so that the content below is partially exposed. Use incomplete to imply that there is more. When the area has a slide, the scroll bar itself comes out. (solution)

Figure C: Use the incomplete form to make hints back to the problem. Potentially affected are users of browsers (Safari or Chrome) that use the WebKit kernel on Mac OS X 10.7.3. The ultimate reason for this is because a system default option (shown below), "automatically displays according to the input device". This is an Apple detail design that can display or hide scrollbars based on different input devices, such as the mouse or touchpad. It is precisely because of it, if you are using a touchpad or magic mouse and other touch-like mouse, you will find that in the WebKit kernel of the browser, some features originally have scroll bar, now disappear. A simple adjustment of the design, you can better solve the problem (such as Figure C).

The scroll bar controls the elegant design, and sometimes it can cause problems. As a designer, you can respond and solve problems in the same elegant way.

Author: Bohemia