Originally posted by macromark
View Post
Announcement
Collapse
No announcement yet.
POLL: Colored Icons or Gray Icons?
Collapse
This topic is closed.
X
X
-
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
-
Originally posted by Jon View Postmodern 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..
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
-
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?
Reducing contrast too much causes readability issues for folks who are sight-impaired so we don't want to get too aggressive with that.
- Likes 1
Comment
-
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?
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;
}
Comment
-
Originally posted by macromarkIf 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; }
HS4 Pro, 4.2.19.0 Windows 10 pro, Supermicro LP Xeon
Comment
-
Guest
-
Originally posted by John245 View PostGray 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
Hans
Comment
-
Originally posted by macromark View PostIf 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;
}
Comment
-
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
-
Originally posted by andyf View Post
I'm a Windows guy so I'm not sure about Linux. Maybe someone else can weigh in on the reboot question.
Comment
Comment