Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Tahoe - Contrast of selected records in listgrid

    Hi there,
    Currently we are getting lots of feedback from our customers regarding the new tahoe skin.
    Most of the time the cusomers are not "used to" the new skin. We have been worked with the new Tahoe-Skin and we now like it.
    However some feedback we can understand and would like to optimize this.

    Many our customers seem to have problem with the readability on selections in listgrids. There may have a not properly configured display (contrast, brightness), or have to work with the sun shining to the display - this we can only assume. But we are getting a lot of feedback that the white color on blue background in Listgrids is hard to read.
    In fact there are 3 different colors used in the Listgrid
    1. No selection: dark font(#3F3F3F) on bright background (#F5F5F5, #FAFAFA, #FFFFFF)
    2. Hover on a record: dark font (#3F3F3F) on light blue background rgba(182, 227, 255, 0.79)
    3. Selection: White font (#FFFFFF) on blue background (#5FBAF2)
    4. hover on a selected record: white font (#FFFFFF) onslightly lighter blue (#83c9f5).



    Our customers are reporting that the readability of the selected records are hard to read (3 and 4)
    Considering the contrast ratio between white and the selection-color (blue) we have to agree that this can be hard to read (http://leaverou.github.io/contrast-r...F-on-%235FBAF2).

    A solution could be to switch to a lighter background-color (e.g. the color of the hover-color) for a selected record and keep the color of the font at black.
    I know we could replace this color manually, but firstly we have to do this modifications every time and secondly this does not solve the problem for all other smartclient users.
    Therefore we think this should be fixed for all users.

    Is there a way to improve the used color-scheme for selected records?

    Best regards
    Last edited by SimonF; 7 Sep 2017, 01:53.

    #2
    After review and seeking out several opinions, we have no one agreeing that there is a contrast issue with state 3, and a small minority seeing a possible contrast issue with state 4 but all agreeing that, given that it's a transient state, it's not an issue.

    Note also that readability is obviously affected by the size of a font and the font itself. Elsewhere you've indicated that you are using "Dense" density with Tahoe and that readily explains why you'd see legibility issues that we don't. If you want to stay at "Dense" density, you might consider using a resizeFonts() call that is the equivalent of Compact density.

    You've also reported some users having troubles with fonts - this also could be part of the problem.

    Overall, we'll wait to see if there is any more feedback before making any changes here. You are of course free to modify the skin as you like.

    Comment


      #3
      Thanks for the fast reply.

      One of the older bugs I've reported was indeed with the dense density. For the release with the Tahoe-skin we have decided to let the user choose between medium and compact density. Our default is set to medium-density.
      I think medium is also the recommended density, as far I have followed your instructions given in the forum.

      I indeed have reported multiple issues regarding the Tahoe skin.
      Some has to do with chrome update(https://forums.smartclient.com/forum...-latest-chrome).
      Some are caused due to - we don't know yet (https://forums.smartclient.com/forum...-55-0-3-32-bit)
      Some are still open
      https://forums.smartclient.com/forum...ult-font-arial
      https://forums.smartclient.com/forum...ver-in-firefox

      and there is a great number of issues, which already were fixed (also multiple color affecting issues)
      https://forums.smartclient.com/forum...enabled-button
      https://forums.smartclient.com/forum...is-hard-to-see
      https://forums.smartclient.com/forum...d-and-clinched
      https://forums.smartclient.com/forum...roperly-filled
      https://forums.smartclient.com/forum...ver-in-firefox
      https://forums.smartclient.com/forum...-open-combobox
      https://forums.smartclient.com/forum...ith-background
      https://forums.smartclient.com/forum...and-datepicker
      https://forums.smartclient.com/forum...ent-background
      https://forums.smartclient.com/forum...rise-and-tahoe
      https://forums.smartclient.com/forum...does-not-match

      So with the >100k customers we already did filter out many feedbacks regarding the new skin. Most feedbacks we are getting is about a "new look" - the user are habituated to the Enterprise-skin. So the new skin looks very different and they have to adapt themselves to the new skin. However, if we get enough feedback that the font is hard to read we have to investigate further.
      That's how we found out about the "download-font-feature" in internet explorer. This option can be disabled, which several customers have deactivated as default setting. Also we haven't seen the blurred font in window-title by ourselves at first. Replacing the font seemed to be also the only option to improve the readability for the mainly business customers.

      I can understand that you have to wait for more feedback for changing a major color-set in the listgrid. This means - by now - we have to do the changes by ourselves to improve the legibility of records of a listgrid. This might be a disadvantage of our fast release-cycles. Switching to Tahoe in production, as (it seems to be) one of the first does cause additional work by reporting the issues and summarize the feedback we are getting from our customers.

      Thanks

      Comment


        #4
        It didn't seem like there were any new action items in that post - let us know if we missed something.

        As far as the feedback on contrast, it would be good to know what percentage of the users who complained about contrast were using Dense density, and whether such users accept switching to another density as a solution. Or, if you try using resizeFonts() as recommended, whether that stops the complaints.

        Tahoe targets Spacious density. That was the density in which all the original design samples were built, and also images don't need to be scaled at that density. While it scales very well, we still wouldn't recommend running it at "Dense" density.

        Comment


          #5
          We are neither using "dense" density nor we do support "dense" density. So none of the feedbacks does reference this density.
          Users can only choose between "compact" and "medium" density. Please do not recommend us to change from "dense" density, when we are not using/supporting it.

          We have already recommended all users, who are complaining that they should try to switch to "medium" density. But this didn't changed the readability for them, so we did get the same feedback.
          As you have already described, there will be no changes for the time being, so we will have to find another solution ourselves.

          Maybe our fix is also interesting for others, so I write our interim solution:

          Currently we are replacing all "#5fbaf2" with "94D6FF" and do append this snippet, to increase the readability for our users.
          Code:
          .tallCellAltSelected, .tallCellAltSelectedDark, .tallCellAltSelectedOver, .tallCellAltSelectedOverDark, .cellSelectedAltCol,
          .cellSelectedDarkAltCol, .cellSelectedOverAltCol, .cellSelectedOverDarkAltCol , .cellSelected,.cellSelectedDark,
          .specialColSelected, .recordSummaryCellSelected, .recordSummaryCellSelectedDark,
          .tallCellSelected,.tallCellSelectedDark,
          .cellSelectedOver,.cellSelectedOverDark,
          .specialColSelectedOver, .recordSummaryCellSelectedOver, .recordSummaryCellSelectedOverDark ,
          .tallCellSelectedOver, .tallCellSelectedOverDark ,
          .treeCellSelected, .treeCellSelectedDark , .treeTallCellSelected, .treeTallCellSelectedDark , .treeCellSelectedOver, .treeCellSelectedOverDark, .treeTallCellSelectedOver,.treeTallCellSelectedOverDark{
          color:black !important}
          This does increase the contrast of the text.
          The contrast with white color on the original blue background is 2.1 (http://leaverou.github.io/contrast-r...F-on-%235fbaf2).
          With the snippet and the color-correction we have black text on light blue background, which increases the contrast to 13.3 (http://leaverou.github.io/contrast-r...0-on-%2394D6FF would also be better with the default dark color of #3f3f3f http://leaverou.github.io/contrast-r...f-on-%2394D6FF which would also push the contrast to 6.7)


          Best regards

          Comment

          Working...
          X