Elegance != Usability: No scroll bar, more phone calls to the help desk. Aggh.

Apple is making great inroads into removing some of the clutter that has built up in our desktop UI over the past few decades. Recently they removed the scroll bar on static views (the scroll bar does not appear until the view is scrolled). Response to this has been mixed. For some, its elegant, minimal and natural progression in this age of multi-touch gestures and touch screens. For others, its taking away an important context signal for the information you are reading – how much more there is to read.

I’ve been somewhat on the fence on this issue, but a recent experience has shifted me towards the latter view – that the scroll bar is useful for providing context on the information space one is interacting with – and that we still need it. Here’s an example of why we need it c/o the State Farm Insurance website:

It was that time of year, time to pay my insurance premiums. Grumble, grumble. I use State Farm. Their website is far from perfect but it is moving in the right direction. I’ve used it before, so things were moving smoothly. However, at the Provide Payment step I saw the following in MacOSX 10.7 Lion (smudges added by me):

Insurance form without a call to action

The idea here is that you select the Payment account for each policy using the pull-down in each policy box. You can also add a new form of payment. Then you continue on to the next step. In usability/conversion terms there are several sub-optimal things here. I’m going to focus on two:

1. Firstly, the pull-down menu is very easy to miss. Imagine an older, poorly-sighted person trying to do this for the first time. Cue an expensive – for all concerned – call to the help desk. Solution: required form fields can be highlighted to make them more noticeable. Here you could add a subtle background shading around the pulldown, as well as give it a default menu text of “Select”.

2. Secondly, and I think more seriously, where is the primary “Continue with Payment” call to action? To anyone technically savvy, its fairly obvious – its below the fold. In other words, the user has to scroll down after they’ve selected their payment account. Ideally, State Farm would ensure that the Call to Action is always visible in standard sized screens (my browser window was over 900px high, much bigger than the “standard” 768px, but still has the problem). However, the presence of a scroll bar could also help here. The lack of a scrollbar on the Payment form removes an important visual clue that there is more to this form than meets the eye. Some payees will fail to scroll down. Phone calls to help desks. Aggh.

The same thing happened later at the Authorize Payment step of the flow. You check the box … and then what? Of course, by this stage, the user should know to scroll down. If they’ve made it this far!

Apple: please bring back a minimal scrollbar

Now some would say that this is primarily a design issue with State Farm’s website which could have been picked up in testing. I would somewhat agree with this – a primary tenet of good UX for conversion in any workflow is to ensure that your primary call to action is easily discoverable (ideally prominently visible). However, the lack of a scrollbar does make the situation significantly worse. On small screens, it can be hard to fit everything “above the fold” even with good responsive design techniques.

The lack of context here (that the form continues below the fold) is emblematic of the subtle scaffolding the scrollbar provides to any information interaction: how much more is there to read / complete / scan? People sometimes argue against this based on the tenet that paper doesn’t have scroll bars, computing devices don’t need them either. This is rubbish. Paper provides a bunch of other context as to the size of the information space you are interacting with – such as the number of pages you are holding, the length of the page, and so on. Computers don’t have these affordances.

Apple – please bring back a minimal scrollbar. It doesn’t have to be the stonking great in-your-face widget we used to have in yester-year. A useful improvement would be to always display the minimal scrollbar which you do show when the mouse is moved. The catch is that we need the scrollbar to clue us to move the mouse in the first place !