For years many usability experts told us that scroll bars on a touchscreen interfaces are forbidden. The idea of touching and dragging on a touchscreen was considered too hard for users. Then along comes the iPhone and other smart phones and the scroll bar’s time has come.
I recently added a few judiciously-placed scroll bars to the client’s kiosk interface to solve a UI design challenge. Several screens had tables with Previous and Next buttons that required a screen change to display additional data. By adding the scroll bars to the tables, I was able to display all the data on the same screen and save the users’ time.
In testing, I found that the scroll bars were used successfully by every user. Interestingly, each user did interact with them in a different way. Not everyone touched and dragged on the thumb icon—Adobe’s terminology not mine. Some used the up and down arrows to navigate, while others touched in the bar itself. As long as everyone accessed the information, their method was irrelevant, and testing—a success!
Keep in mind your demographic if you plan to implement this handy interface space saver. I counted on user’s familiarity with web browsing and smart phones to make the intuitive leap to an airport kiosk. The big assumption was that any one not familiar with web browsing would not be using a kiosk in the first place.
Designers and developers: An important usability tip to remember is that scroll bars need the same sizing considerations as buttons when used on a touchscreen. Buttons, scroll bar and all other interactive elements must be at least 3/4” in height and width to accommodate most fingers. On a 72 ppi resolution screen that would be 54 pixels.
In case you’re wondering, horizontal scroll bars are still forbidden and probably always will be. But can you use vertical scroll bars on a touchscreen interface? Yes you can!