The client's "Annotations / Page Notes / Orphans" tabs have usability issues

[seanh]

The sidebar has a set of 2-3 of what our code calls "selection tabs" at the top for switching the view between annotations, page notes and orphans:

(The orphans tab only appears when there are orphans, the other two tabs are there all the time whether there are annotations or page notes or not.)

A number of usability issues have been identified with these, including:

• The buttons are small and hard to click (not good for people with fine pointer control issues, or for touch or mobile)

• Not immediately familiar or recognisable, which may make the interface harder to use and slower to learn. The tabs don't look like tabs or buttons, and they don't look like links either (they aren't blue or purple or underlined like most links on the web, or bold like other links in our sidebar).

• Because bold text is used to indicate the currently selected tab, when you click on a different tab the other tabs jump around horizontally (as can be seen in the gif above).

• It's not compatible with the customisable branding feature that we're developing for the client. Since the background colour of the client is now customisable, these tabs don't play well with other background colours. eLife explicitly called out that the tabs are awkward with their white background. The team on our side agreed. This addresses that problem as the centered button group makes less assumptions about the background and would play better with branding.

A solution might be to make the tabs look more like a common "view switcher" control, which should look better, be more immediately recognisable as a familiar type of control that's used for this purpose, be more consistent / fit in with the rest of the sidebar UI, and be easier to click especially on touch screens and mobile. Some examples of what this could look like:

There's a pull request with more detailed notes about this suggestion: hypothesis/client#429

[seanh]

@dawariley as requested:

Rob pointed out that when there are only two tabs it's not clear which is selected and which unselected. Dawa suggested changing the black text on the unselected tabs to be light grey. Dawa would also like to see a version where the selected and unselected tab style are simply reversed

Here's how it looks with the foreground text on unselected tabs grey:

Moving:

(To choose the color I just went through our $grey-1 ... $grey-7 variables and tried to pick the one that was least different from the normal black colour while still being different enough to notice the difference.)

And here it is if I change it so that the selected tab has the white background and the unselected ones(s) are grey:

Another approach to this might be to try to make the selected button look more depressed, though I'm not sure yet exactly how this effect is achieved, but here's an example from Gnome:

[seanh]

@sean-roberts suggested removing the drop-shadow in Slack.

With:

Without:

[seanh]

The https://hypothes.is/docs/help page in production (about 150 annotations apparently) is a good example of the "popping" issue. This issue already existed with the old selection tabs but it more apparent with the new view switcher because it's a bigger control:

[seanh]

Hmm, I don't think that holding rendering of the view switcher until the first batch of annotations has been received (hypothesis/client#481) has solved the popping issue. Here's the /docs/help page on production with the delayed rendering:

(The GIF recorder has speeded up the animation for some reason, it's actually much slower / worse than that in production.)

You can see that the view switcher isn't rendered at first, but it is still rendered before any of the annotations are rendered. I guess it takes some time, after the first batch of annotations is received, before any annotations get rendered. Perhaps because it takes time to thread and render all the annotations? Also the counts on the annotation tabs don't appear until the annotations do, so they're not there when the tabs are first rendered.

I think it needs to not show the tabs at all until the same moment at which the annotation cards and the counts in the tabs become available, which is different from when the first batch of annotations is received.

Needs investigation when I have more time...

[dawachan]

Thanks for making the tab colour changes and for presenting other options to consider. I agree more investigation and consideration is needed. I have other priorities to work on this week.. but this is definitely on my 'to do' list.

[seanh]

Update: the view switcher solution to this issue that was in progress has been rolled back. I'll leave this issue open to track the problems with the existing tabs, but unassigning Dawa and myself from it and removing it from the sprint. Also deleting the todo-list comment above as it refers to the rolled back solution.