Hot answers tagged

137

It is a skeumorphic depiction of notching, indicating that the area can be pulled/dragged. Similar to the notching on the end of the gun slide (providing extra grip to the fingers). This appeared as early as Windows 98 (see the bottom right corner of window). Edit: This is not unique to guns, but more of an industrial design technique. See here the ...


97

While Bowen's gun example is decent, an even better example would be the back of your TV remote control (or many other devices that store batteries under a slide cover): The notching on the pistol, the battery cover, and plenty of other everyday items are primarily to provide extra friction/grip for your fingers, while also pointing out the best place to ...


20

To add to the existing excellent answers. This type of design feature is known as an affordance (see https://en.wikipedia.org/wiki/Affordance). Notched or textured surfaces are used in real life objects to suggest they can be gripped or pushed by a finger, and this has been adopted as a skeuomorphism in computer UIs. Here's a screen-shot of Java Swing's ...


12

Apple removed scrollbars from appearing, unless in use, from viewports in 2011 with the release of Lion, immediately sparking multiple articles about how to get them back. The usability rationale and merit of this can still be debated today. Not showing it until it is needed is a clean design and does not clutter the display, but the user must figure out ...


6

Yes, you should. While there are parts of your scenario that we don't know, there are some generalities than can and should be applied based on known formulas and user expectations. One of those is the thumb minimum size. Take a look at the image below: here you have scrollbars from lots of different systems across decades. However, you'll notice that ...


6

Other answers have adequately addressed the skeuomorphic inspiration for this convention, but since the question also asked about history, let's look at that a bit. I'd nominate Macintosh System 7.0 (1991, but I vaguely recall the UI style being widely previewed before then) as the originator of this convention... you see the ridging in active scroll bar ...


2

I would say that it is becoming very common if this is not already the case. Microsoft has been marketing the Surface Pro on all fronts, to the extent that it can be seen to have the processing capabilities of a desktop machine. You will find that the single OS/multiple device strategy for Windows that plagued the desktop users a little bit with Windows 10 ...


2

Have the user agree separately to each term and condition you specifically want them to be aware of: Label1 [Textbox] Label2 [Textbox] Terms and Conditions [Textarea] [] I will not upload any copyrighted material to this service [] I promise to be respectful to other users [] I am aware that all my usage data will be sold to the Russian mafia [Submit] By ...


1

So, to combat this - should we set a minimum height that a scrollbar thumb can become? Yes, for both reasons you state. The scrollable content could be so large that the thumb shrinks to 0 pixels, thus effectively negating both points: A thumb of size zero can neither be dragged nor seen. The drawback for this is that it then negates the benefit ...


1

Before anything, I only used LibreOffice once or twice so I'm nowhere close to an expert on that software, therefore this answer applies to general models, like in your screenshot, The above being said, I think the approach displayed on your image, is the correct one. The problem here is you seem to be considering the whole software screen as the viewport ...


1

Best option from your post (d) seems to be the best one. One drawback of (d) is that the user can ultimately see only as much as the screen allows. In case of very long text, the exapnded content box may not fit in screen. My suggestion Let the text scroll slowly when mouse pointer hovers over content box. The scrolling speed should be slow enough so that ...


1

Is the social bar used frequently by your users? If it's not remove it without any hesitation. If it is useful only for you as a developer and not for the users, the answer is clear - get rid of it. Screen space on mobile devices as you know is very limited, so you need to maximise the viewport. In my opinion the sticky header is OK if it's slim, and the ...


1

The scrollbar and alphabet-index next to each other is likely to be too fiddly for mobile users. Mobile users (at least on iOS) are used to using the index in a fast-scroll way. The iOS contacts app only has an index (on the right), no scrollbar. Unless it is pure B2B or internal ECommerce for really old-school/ corporate audience, you should really take ...


1

Index on left and scroll on right is might be a good option. If the user uses the website from a mobile device then they cant able to select the alphabets as the screen size is too small and you cant accommodate all the alphabets in one single screen. so you can use like in the below image. The list is categorized by alphabetical order and each alphabet is ...


1

I would say definitely not overlapping. It would be very difficult for the users to select whatever they are looking for. It's the standard in every computer browser to have a scroll bar on the most right, so you should keep it this way. What you should consider more is the spacing between the list lines, the index and scroll bar. I think it looks nice the ...


1

You can Fixed the height of table area. Table header and end of table Scrollbar visible all the time. The table data scrolls based on records in Horizontal/Vertical manner. Example of Fixed header table in CSS. No JavaScript used. http://codepen.io/chiranjeeb/pen/LGsiv


1

No, you don't need to adjust the height to solve your problem. The height is an indicator for tracking current screen position relative to the full document. Setting a minimum height defeats this purpose. What you should adjust instead is the click area for the thumb control. download bmml source – Wireframes created with Balsamiq Mockups ...


1

It can work but it has some issues ...so make sure there is a tutorial or a label to show the user how this works. For example, if the user hovers over the yellow part, you might include a tooltip that says Jump to code example C, for example. Note that a similar approach is used in browser and other apps...here is how the Chrome browser handles finding ...


1

An opinion from the other side: Oh my word I love this behaviour. I have moved to a Mac for work and I miss it dearly. When you're working on or reading a document or webpage, you can grab the bar scroll up or down to check something, and then drop it again to continue from where you were. As has been said here already, it's about cancelling an operation ...



Only top voted, non community-wiki answers of a minimum length are eligible