Usability suggestions

[cristinamullin]

Describe the solution you'd like

Kiki S reviewed the shiny app and provided the following usability suggestions:

• Flag tab: provide option to sort “flag reason” alphabetically
• General: When you scroll to the bottom of a tab can there be a “next page” option so you don’t have to scroll back up to the top?
• Add some visual separation or shading in between sections to draw the eyes to the next sections or to draw the eye to text you want people to read.

[JamesBisese]

#1 Flag tab: provide option to sort “flag reason” alphabetically - **I think this is just a template setting for the table of data. 1 hour.

#2 General: When you scroll to the bottom of a tab can there be a “next page” option so you don’t have to scroll back up to the** top? I propose that we add a 'Back to Top' button that shows up if the user is scrolled down more than 1 page height. That way we minimize pathways through the UI. 2 hours

#3 Add some visual separation or shading in between sections to draw the eyes to the next sections or to draw the eye to text you want people to read. This is subjective, but I get the idea of adding additional separators. 4 hours plus back and forth time as users provide comments

[JamesBisese]

Sorting is controlled by a single flag (ordering = TRUE) in the DT::renderDT() call.

        output$flagTable <- DT::renderDT(
          shiny::isolate(switchTable()),
          escape = FALSE,
          selection = "none",
          colnames = c(
            "Flag reason",
            "Results affected",
            "Required/Optional",
            "Switch 'on' to flag for removal"
          ),
          rownames = FALSE,
          options = list(
            dom = "t",
            paging = FALSE,
            ordering = TRUE, **<- this is all it takes to add sorting**
            preDrawCallback = DT::JS(
              "function() { Shiny.unbindAll(this.api().table().node()); }"
            ),
            drawCallback = DT::JS(
              "function() { Shiny.bindAll(this.api().table().node()); } "
            )
          )
        )

The table can now be sorted by any column

[JamesBisese]

Issue #2 - General: When you scroll to the bottom of a tab can there be a “next page” option so you don’t have to scroll back up to the top?

There is a weak 'back-to-top' already in the application. This is a known metaphor.

I replaced it with a 'gototop' button that disappears if the user is already scrolled to the top, and animates the scrolling.
source: https://github.com/lgnbhl/gotop

[JamesBisese]

Issue #3 is not addressed. (Add some visual separation or shading in between sections to draw the eyes to the next sections or to draw the eye to text you want people to read.)

This one seems to be open-ended, and there are other more critical UI issues (in my opinion). I can easily make suggested UI improvements, but I'm not a designer and don't see an obvious fix.