sparklyballs Posted May 29, 2015 Share Posted May 29, 2015 Nobody likes blue balls Quote Link to comment
CHBMB Posted May 29, 2015 Share Posted May 29, 2015 Nobody likes blue balls Not even if they're Sparkly? Quote Link to comment
bonienl Posted May 29, 2015 Share Posted May 29, 2015 Here another proposal with standard green on/blink status. Share status is proposed as green/yellow/blue (but the last one requires a new 'state' definition) Btw. I like footballs Quote Link to comment
sparklyballs Posted May 29, 2015 Share Posted May 29, 2015 Here another proposal with standard green on/blink status. Share status is proposed as green/yellow/blue (but the last one requires a new 'state' definition) Btw. I like footballs keep that size Quote Link to comment
CHBMB Posted May 29, 2015 Share Posted May 29, 2015 Here another proposal with standard green on/blink status. Share status is proposed as green/yellow/blue (but the last one requires a new 'state' definition) Btw. I like footballs keep that size And a wheelbarrow!! Sparkly I think you and I are in danger of turning into this forums Morecambe & Wise. Quote Link to comment
SSD Posted May 30, 2015 Share Posted May 30, 2015 I think it is important that the hover text be individualized for each state, and provide more than a couple words. For example, the "invalid" state. What does that mean? I'll tell you - it is only on the parity drive as parity is being built. In this case it is not invalid at all - just means parity isn't fully updated yet. Could also mean the parity build was canceled, leaving parity disk in an invalid state. I still think these little icons are too small. And would like to see something a little bolder for a drive kicked from the array (red ball) - like highlighting the entire row red. Love the aesthetics but clarity is important too. Quote Link to comment
WeeboTech Posted May 30, 2015 Share Posted May 30, 2015 FWIW, I thought these road sign examples might help. If we consider Danger, Warning, Caution, Notice, Safe then it may be clearer when choosing state colors. Quote Link to comment
GHunter Posted May 30, 2015 Share Posted May 30, 2015 I think this should be simplified. Rather than trying to come up with a color / shape / blink icon for each possible state, stick with 3 icons. Then in the hover over popup box, explain the state in text. I think it was mentioned earlier, all the user is concerned about are 3 states: Green: everything is ok Yellow: warning that something the user should know about Red: critical problem that needs some attention Choose a different shape for green, yellow, and red to make it easier for colorblind people to differentiate between them. If you want to add a blinking icon for them (besides the solid icon), that gives you 6 states. But the hover over text would provide the details of each state that the drive / array is in. The less is more approach is better here in my opinion. Provide details in the hover over popup. Also, I'm not a fan of the separate spinup / spindown icon either. I'd prefer a onclick dropdown like you use on the VM page or a link in the popup if that's possible. I'm just voicing my opinion here but I do feel for those that can't see the icons clearly whether that is due to being colorblind or old age like me . 16 x 16 is kind of small! Gary Quote Link to comment
bonienl Posted May 30, 2015 Share Posted May 30, 2015 A variation on the existing solution (and icons are made a little bigger) Quote Link to comment
garycase Posted May 30, 2015 Share Posted May 30, 2015 Rather than trying to get too fancy with icon shapes and colors, I'd follow a couple of basic rules ... => Either use different shapes for each color (to resolve the color-blind problem) ... or, if you do have a common shape [e.g. green balls vs. red balls for disks that are good/disabled] be sure there's a differentiating inner symbol (i.e. an exclamation point in a red ball) => Most importantly, be sure every symbol has a fully descriptive hover text. In it's simplest form, you really only need two symbols => one for "all's okay"; and one for "you should read the hover text because something needs attention" Quote Link to comment
NAS Posted May 30, 2015 Share Posted May 30, 2015 Perhaps we should address this backwards and take the state list at the beginning and propose a smaller set of icons to match it. Then the icon author will have a clear remit to follow. Quote Link to comment
trurl Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green. If we stick with the 16x16 icon size a distinct symbol within the icon isn't as good having a distinct shape for each color. I still don't see how combining spin state into these can be made clear and simple. Perhaps if spin state were a symbol within each icon. Unless the icons are larger though the symbol will be too small. It should be easy to tell at a glance what the state is. Remembering a large number of combinations of colors, shapes, symbols is not good. The mouseover legend should only be a reminder, not something the user has to pull up all the time to figure out what is going on. Quote Link to comment
CHBMB Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green. If we stick with the 16x16 icon size a distinct symbol within the icon isn't as good having a distinct shape for each color. I still don't see how combining spin state into these can be made clear and simple. What about rotating the actual shape? Would rule out a plain circle but a circle with a black line would enable rotation to be seen? Quote Link to comment
trurl Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green. If we stick with the 16x16 icon size a distinct symbol within the icon isn't as good having a distinct shape for each color. I still don't see how combining spin state into these can be made clear and simple. What about rotating the actual shape? Would rule out a plain circle but a circle with a black line would enable rotation to be seen? Animation would work if it could be done. A circle could use a line like a clock hand or something similar. There would need to be 8 frames to the animation for it to work well with simple shapes. Quote Link to comment
NAS Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green.... And grey as well. Quote Link to comment
trurl Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green.... And grey as well. That means 5 symbols. What is grey supposed to convey? If you mean spin state then how do you combine that with disk disabled for example? Quote Link to comment
NAS Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green.... And grey as well. That means 5 symbols. What is grey supposed to convey? If you mean spin state then how do you combine that with disk disabled for example? TBH I am not sure what it will portray but I just mean people naturally "just get" a grey icon as meaning something like offline/passive. Its much the same as red, green and amber it is drummed in life long. Blue on the other hand is not intuitive we would need to teach people what that means. I think this should be simplified. Rather than trying to come up with a color / shape / blink icon for each possible state, stick with 3 icons. Then in the hover over popup box, explain the state in text. I think it was mentioned earlier, all the user is concerned about are 3 states: Green: everything is ok Yellow: warning that something the user should know about Red: critical problem that needs some attention Choose a different shape for green, yellow, and red to make it easier for colorblind people to differentiate between them. If you want to add a blinking icon for them (besides the solid icon), that gives you 6 states. But the hover over text would provide the details of each state that the drive / array is in. The less is more approach is better here in my opinion. Provide details in the hover over popup. Also, I'm not a fan of the separate spinup / spindown icon either. I'd prefer a onclick dropdown like you use on the VM page or a link in the popup if that's possible. I'm just voicing my opinion here but I do feel for those that can't see the icons clearly whether that is due to being colorblind or old age like me . 16 x 16 is kind of small! Gary To me this is the most sane summary yet. Quote Link to comment
trurl Posted May 30, 2015 Share Posted May 30, 2015 Red, yellow, blue, green.... And grey as well. That means 5 symbols. What is grey supposed to convey? If you mean spin state then how do you combine that with disk disabled for example? TBH I am not sure what it will portray but I just mean people naturally "just get" a grey icon as meaning something like offline/passive. Its much the same as red, green and amber it is drummed in life long. Blue on the other hand is not intuitive we would need to teach people what that means. Blue is information. A new disk for example. Grey could be OK as offline but if you combine it with a shape that is normally reserved for one of the other colors I think it is just confusing, as in the grey triangle that started all this. I don't have any color vision problems, but my eyes are getting a little old. Someone with both problems could have difficulty with the shapes if they are small and aren't really distinct. I can see how a square could easily be mistaken for a circle for example if the icons are small enough, and some of the examples we have seen are using the circle to mean good and the square to mean bad. And then trying to make all this work with either black or white backgrounds. How much larger can we make the icons without increasing the row spacing? Quote Link to comment
bonienl Posted May 30, 2015 Share Posted May 30, 2015 How much larger can we make the icons without increasing the row spacing? The best way to show this is by using real examples. In the attachment are four different shape sizes given for the green (=circle) and red (=square) icons in 16x16 format. The first row is the shape size which is currently in use by the webGUI. The second row shows a slightly enlarged shape, which still fits nicely in the current webGUI layout. The third row makes the shape even bigger, but it is too big for my taste. The fourth row is largest shape size in 16x16 format, for me this is over the top. Perhaps people can indicate what is still distinghuisable in terms of size, shape and color (to me everything is readable) ? Quote Link to comment
bonienl Posted May 30, 2015 Share Posted May 30, 2015 And some screenshots to see the icons "in action" ... Quote Link to comment
BRiT Posted May 30, 2015 Share Posted May 30, 2015 Just want to remind everyone that hover text is worthless when viewing the admin pages on a mobile device such as phone oe tablet. Quote Link to comment
bonienl Posted May 30, 2015 Share Posted May 30, 2015 Just want to remind everyone that hover text is worthless when viewing the admin pages on a mobile device such as phone oe tablet. Make that a feature request for version 6.1, there are several areas which need to be adjusted to do proper mobile devices support. Quote Link to comment
trurl Posted May 30, 2015 Share Posted May 30, 2015 How much larger can we make the icons without increasing the row spacing? The best way to show this is by using real examples. In the attachment are four different shape sizes given for the green (=circle) and red (=square) icons in 16x16 format. The first row is the shape size which is currently in use by the webGUI. The second row shows a slightly enlarged shape, which still fits nicely in the current webGUI layout. The third row makes the shape even bigger, but it is too big for my taste. The fourth row is largest shape size in 16x16 format, for me this is over the top. Perhaps people can indicate what is still distinghuisable in terms of size, shape and color (to me everything is readable) ? If you want to put some symbol inside them then the bigger the better. If no symbol inside then perhaps something could be done with the 3D effect to make the square more distinct. Maybe make it more pyramid-like as with the triangles shown earlier. Quote Link to comment
bonienl Posted May 30, 2015 Share Posted May 30, 2015 My personal preference is NO text inside the icons, the icons themselves are too small to have readable text (to my eye). Making the icons (too) large doesn't play nice with the tables though. With the 16x16 icon size a different shape is more distinguishable than text, in my opinion. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.