Announcement

Collapse
No announcement yet.

POLL: Colored Icons or Gray Icons?

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #31
    Originally posted by macromark View Post

    I assume you're referring to the 'disable' icon being red with a yellow background? That one does stand out.... maybe should be more like this?
    Click image for larger version Name:	image.png Views:	0 Size:	22.1 KB ID:	1593251
    Click image for larger version Name:	image.png Views:	0 Size:	3.6 KB ID:	1593252
    Reducing contrast too much causes readability issues for folks who are sight-impaired so we don't want to get too aggressive with that.
    Yes, that was the one that was harsh. the contrast I mentioned was the bright yellow against the red. I know Yellow is a tough color when you have a white background. But for a dark background, the colors which work change. Which does bring to mind the idea of a Dark Mode. Many seem to like those sorts of Themes
    Karl S
    HS4Pro on Windows 10
    1070 Devices
    56 Z-Wave Nodes
    104 Events
    HSTouch Clients: 3 Android, 1 iOS
    Google Home: 3 Mini units, 1 Pair Audios, 2 Displays

    Comment


      #32
      Colored looks better to me, but it should be a toggle setting for those who are visually impared can still use the Grey colors which are easier to see if you are colorblind.

      Comment


        #33
        Originally posted by Jon View Post
        modern UI design standards suggest all one color. I don't necessarily agree. I think the right answer is somewhere in the middle. Color can be used when it has a clear meaning and is standard across the app, and to common practice. The examples shown in the colored example are all good choices. I think red look of HS3for delete and other negative actions is ok. Yellow or amber for disabled or warning actions is ok. Green is good for positive actions. Neutral stuff should be neutral colored. This includes stuff like the arrows and add. I could go either way on the blue edit button. I don't think it needs to be colored, but because it's the most common action, the blue is a good hint of that.
        I would add though that the colors could be a bit more understated from what's in the screenshot. The colors shown above are a bit too in-your-face. More muted colors would look more modern.
        Also, I don't like multicolor icons. (like the disabled icon example) They tend to look outdated and childish. Single color is both modern and useful.
        One place in those screenshots that could use improvement is the alignment of the icons. The position of the icon is just as important as the image and color. These should be in a columnar layout. All edit buttons should align, all up arrows should align, etc... If a particular function isn't relevant for a given line, that column should be blank for that line, leaving the void where the icon would have been..
        Thanks Jon, I didn't have to write an almost identical post

        Most major UI players sort of came together (got influenced?) a decade ago that too many colors came to be a distraction. I got frustrated then, but now it's cool.

        "colors could be a bit more understated from what's in the screenshot" - I think the balance IMO is to look at the total panel and only slightly augment a particular icon relative to others. This could be done with different levels of 'bold' or greyness, or a different color, part of a restricted color palette, one that limits hue, intensity, etc.

        It's a hard trick to follow for HS. They were blamed for the 1970 look of HS3. I would encourage HS to look into accepted practices (for now...) on UI design. May I emphasize "restricted color palette"...​

        LATE EDIT - having a choice of color or grey icons in the poll is restrictive IMO. How about subdividing the 'color' choice with "striking colors" and "soft differences" ?

        Comment


          #34
          Colored icons, just give another way to easily differentiate icon purpose when working quickly

          Comment


            #35
            Originally posted by macromark View Post

            I assume you're referring to the 'disable' icon being red with a yellow background? That one does stand out.... maybe should be more like this?
            Click image for larger version Name:	image.png Views:	0 Size:	22.1 KB ID:	1593251
            Click image for larger version Name:	image.png Views:	0 Size:	3.6 KB ID:	1593252
            Reducing contrast too much causes readability issues for folks who are sight-impaired so we don't want to get too aggressive with that.
            I really like this one. Can you post the custom.css changes for this, I'd like to try it. Somewhere there's the green ✔️ also, right?

            Comment


              #36
              I don't care for the colored icons. I also agree on working on the alignment of the icons.

              There has got to be a reason companies like Microsoft and Apple spend millions on UI development and come up with the designs they do.

              Comment


                #37
                Originally posted by andyf View Post

                I really like this one. Can you post the custom.css changes for this, I'd like to try it. Somewhere there's the green ✔️ also, right?
                If anyone wants to experiment with this in their own system, it's pretty easy to do. Just locate the custom.css file in the HS4 html folder and add these styles, then save that file. You should see the color changes after you refresh your pages.
                Code:
                .fa-edit {
                color: #1879b9;
                }
                .fa-save {
                color: #00af1e;
                }
                .fa-sticky-note {
                color: black;
                }
                .fa-check {
                color: #00af1e;
                }
                .fa-trash-alt {
                color: #e40b00;
                }
                .fa-running {
                color: #004069;
                }
                .fa-ban {
                color: #df9d00;
                }

                Note that these are hex values for the colors. You can also change to common values like green, blue, yellow, red, etc

                .fa-check {
                color: green;
                }​
                💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

                Comment


                  #38
                  Originally posted by macromark
                  If anyone wants to experiment with this in their own system, it's pretty easy to do. Just locate the custom.css file in the HS4 html folder and add these styles, then save that file. You should see the color changes after you refresh your pages.
                  Code:
                  .fa-edit {
                  color: #1879b9;
                  }
                  .fa-save {
                  color: #00af1e;
                  }
                  .fa-sticky-note {
                  color: black;
                  }
                  .fa-check {
                  color: #00af1e;
                  }
                  .fa-trash-alt {
                  color: #e40b00;
                  }
                  .fa-running {
                  color: #004069;
                  }
                  .fa-ban {
                  color: #df9d00;
                  }

                  Like this. I’ll play later.


                  Click image for larger version

Name:	image.png
Views:	144
Size:	108.5 KB
ID:	1593267
                  HS4 Pro, 4.2.19.0 Windows 10 pro, Supermicro LP Xeon

                  Comment


                    #39
                    glad you're polling........

                    Comment


                      #40
                      Originally posted by John245 View Post
                      Gray icons. Looks more professional. Also colorblind people will not see the colored icons (colors to prevent red, green, blue and yellow).

                      Please keep in mind that companies as Apple are using grey shaded icons. There should be a reason for that.

                      ---
                      John
                      Yes, colored icons are easier to read.

                      Hans

                      Comment


                        #41
                        Contrast is always going to be the better option.

                        Comment


                          #42
                          Originally posted by macromark View Post
                          If anyone wants to experiment with this in their own system, it's pretty easy to do. Just locate the custom.css file in the HS4 html folder and add these styles, then save that file. You should see the color changes after you refresh your pages.
                          Code:
                          .fa-edit {
                          color: #1879b9;
                          }
                          .fa-save {
                          color: #00af1e;
                          }
                          .fa-sticky-note {
                          color: black;
                          }
                          .fa-check {
                          color: #00af1e;
                          }
                          .fa-trash-alt {
                          color: #e40b00;
                          }
                          .fa-running {
                          color: #004069;
                          }
                          .fa-ban {
                          color: #df9d00;
                          }

                          Note that these are hex values for the colors. You can also change to common values like green, blue, yellow, red, etc

                          .fa-check {
                          color: green;
                          }​
                          Apparently not that easy. I changed my custom.css and nothing happened. I'm on Linux. Do I have to reboot HS?

                          Click image for larger version  Name:	Screenshot 2023-02-16 at 2.53.38 PM.png Views:	0 Size:	86.9 KB ID:	1593280

                          Comment


                            #43
                            Colored, easier to read at a glance. Will be great to have à setup choice.

                            Comment


                              #44
                              Make icons configurable by swapping css or however necessary, provide some default icons as HS see's it, plus, colored, grayscale, dark, light.
                              Let user decide at runtime and you are one and done...
                              3.0.0.548: HS3PRO - 3.0.5.10: AIAlert - 2.1.1.0: APIWeather - 2.0.64.0: BLBackup - 2.0.45.0: BLLAN - 2.0.37.0: BLRoombaWifi - 1.0.0.3: DevLog - 1.2.5.15: KeyPad - 3.0.2.25: NetCAM - 0.0.0.52: Pushover 3P - 3.0.0.5: SendVFD - 1.0.0.3: Tiles - 3.0.11.0: Z-Wave

                              Comment


                                #45
                                Originally posted by andyf View Post

                                Apparently not that easy. I changed my custom.css and nothing happened. I'm on Linux. Do I have to reboot HS?

                                Click image for larger version Name:	Screenshot 2023-02-16 at 2.53.38 PM.png Views:	0 Size:	86.9 KB ID:	1593280
                                custom.css is in the html root folder. Are you changing the correct file? I think there might also be a custom.css file in the html/css folder. If you're changing that one, might not work.

                                I'm a Windows guy so I'm not sure about Linux. Maybe someone else can weigh in on the reboot question.
                                💁‍♂️ Support & Customer Service 🙋‍♂️ Sales Questions 🛒 Shop HomeSeer Products

                                Comment

                                Working...
                                X