auspice icon indicating copy to clipboard operation
auspice copied to clipboard

Various usability issues/suggestions

Open Xkeeper0 opened this issue 4 years ago • 1 comments

Putting a handful of accessibility and usability notes in this issue.


The text on the bottom of this page is extremely difficult to read. The links are "#5097BA" (contrast ratio 3.24), but the font they are rendered in is too thin to even fill a full pixel. The text itself is "#888" (CR 3.54) and has the same font thickness problem. This seems to only directly affect the data page, and not the narrative sections. (https://nextstrain.org/ncov/2020-03-04)

image


The pagination dots are very tiny and difficult to hit with a mouse. They appear to be about 6 pixels in diameter. There is also no hint as to where they go; a tooltip or other indicator upon hovering, indicating what section it represents, would help make it more clear. (It may also be worth changing from simple dots to something indicating that the pagination is referencing the section below, browser tabs.)

image


Long sections cannot be scrolled with the arrow keys. Even if you first click on the right side of the page, pressing the up or down arrow keys will still swap between sections. (Clicking on the right side and then using page up/down will scroll it, but not until the click has happened, and it will stop working if you change sections.)

image


If the page is zoomed in, it becomes impossible to read parts of the narrative. In this screenshot, the text below the "next section" arrow is not readable - scrolling will swap to the next section, revealing that the text is actually cut off entirely.

image

image

Xkeeper0 avatar Mar 05 '20 20:03 Xkeeper0

Great suggestions -- thanks @Xkeeper0. Would you mind breaking these out into separate issues? Hopefully we can get people to help submit PRs for each of them.

One quick point regarding the right-hand-side of narratives dissapearing as you change sections. This is by design -- each left-hand-section is associated with a right-hand-section (either text or more commonly a view into the tree/map). When you move between sections, the right hand part should change. Your point about scroll-ability and being too greedy with binding the up/down arrows is spot on.

UPDATE: #956 details the narrative scrollability issues

jameshadfield avatar Mar 05 '20 21:03 jameshadfield