Thread Tools Display Modes
02-24-18, 07:49 PM   #1
Eungavi
A Theradrim Guardian
Join Date: Nov 2017
Posts: 64
Differentiating interruptible and uninterruptible spells on castbar?

So, I've always been curious on how others would differentiate interruptible and uninterruptible spells on castbar.

Until now, I haven't done anything to differentiate them (cause I'm super lazy ), but I started to feel that I'm wasting so much int'ing spells on those uninterruptible spells

How's everyone managing those?

Text? Color? or Texture?
  Reply With Quote
02-24-18, 08:46 PM   #2
Tim
A Rage Talon Dragon Guard
 
Tim's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2008
Posts: 308
My UI is a graphical based one so I use a graphic with a yellow glow.

You could....

- make the status bar color something different than the rest
- add a glowing border
- add a shield icon

It's really up to you how you want to differentiate the bars. What's going to get your attention the most so you spend less time wasting interrupts when you can't interrupt.
__________________
AddOns: Tim @ WoWInterface
Characters: Mage, Priest, Devoker, Pally
Battle Tag: Mysterio#11164
Current PC Setup: PCPartPicker List
  Reply With Quote
02-24-18, 09:22 PM   #3
Justgiz
An Aku'mai Servant
Join Date: Jul 2006
Posts: 30
In my layout, i make the border of the bar white and because the normal color is a dark gray, its really easy to notice.
  Reply With Quote
02-25-18, 05:53 AM   #4
lightspark
A Rage Talon Dragon Guard
 
lightspark's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2012
Posts: 341
I desaturate the icon and colour the bar grey.



Different enough for me.
__________________
  Reply With Quote
02-25-18, 09:22 AM   #5
Ammako
A Frostmaul Preserver
AddOn Author - Click to view addons
Join Date: Jun 2016
Posts: 256
If you'll be sharing it for others to use, I'd recommend at least a shield icon, unless you have experience in making things colorblind-friendly.

(Not sure how much the in-game colorblind options actually help.)
  Reply With Quote
02-25-18, 04:22 PM   #6
Eungavi
A Theradrim Guardian
Join Date: Nov 2017
Posts: 64
Thanks for the idea guys!

I guess lightspark's solution would be the best matching style for me
  Reply With Quote
02-25-18, 05:32 PM   #7
aallkkaa
A Warpwood Thunder Caller
 
aallkkaa's Avatar
AddOn Author - Click to view addons
Join Date: Jun 2017
Posts: 98
Originally Posted by Ammako View Post
If you'll be sharing it for others to use, I'd recommend at least a shield icon, unless you have experience in making things colorblind-friendly.

(Not sure how much the in-game colorblind options actually help.)
I'm not colorblind but I do have some trouble diferentiating different tones of the same color (more than most people) because of my diabetic retinopathy. I can see the difference in Lightspark's bars but not at a quick glance - sp. given that I won't have the two bars one above the other ...
Just sayin'
The shield of course is perfectly noticeable. But a high(er) contrast version of Lightspark's would work as well (for me).
  Reply With Quote
02-25-18, 05:41 PM   #8
Eungavi
A Theradrim Guardian
Join Date: Nov 2017
Posts: 64
Originally Posted by aallkkaa View Post
I'm not colorblind but I do have some trouble diferentiating different tones of the same color (more than most people) because of my diabetic retinopathy. I can see the difference in Lightspark's bars but not at a quick glance - sp. given that I won't have the two bars one above the other ...
Just sayin'
The shield of course is perfectly noticeable. But a high(er) contrast version of Lightspark's would work as well (for me).
Thank you for sharing your thoughts!

Although, I'm not planning to release my UI, that sort of comments really helps me to consider things more broadly
  Reply With Quote
02-25-18, 06:14 PM   #9
lightspark
A Rage Talon Dragon Guard
 
lightspark's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2012
Posts: 341
Originally Posted by aallkkaa View Post
I'm not colorblind but I do have some trouble diferentiating different tones of the same color (more than most people) because of my diabetic retinopathy. I can see the difference in Lightspark's bars but not at a quick glance - sp. given that I won't have the two bars one above the other ...
Just sayin'
The shield of course is perfectly noticeable. But a high(er) contrast version of Lightspark's would work as well (for me).
Yeah, we're all different. I have a mild case of deuteranomaly, that's the reason why I went w/ those colours.

Funny enough, I never notice shields, that's one of few reasons why I don't use them in my UI >_>
__________________

Last edited by lightspark : 02-25-18 at 06:27 PM.
  Reply With Quote
02-25-18, 06:57 PM   #10
aallkkaa
A Warpwood Thunder Caller
 
aallkkaa's Avatar
AddOn Author - Click to view addons
Join Date: Jun 2017
Posts: 98
Originally Posted by lightspark View Post
Yeah, we're all different. I have a mild case of deuteranomaly, that's the reason why I went w/ those colours.

Funny enough, I never notice shields, that's one of few reasons why I don't use them in my UI >_>
"I never notice shields." Yeah, we really are "all different" ... I mean, I can imagine a situation where you wouldn't't notice the shield.

Still, there is work done on accessibility, namely for web pages. Much/most of what's been done by W3C's Web Accessibility Initiative can be used in any GUI, for the WWW as for anything else.
Here's a few links you may check out if you're interested:
WAI homepage: https://www.w3.org/WAI/
Page-evaluation tools (e.g. "how visible is this text color on this background color?"), sp. for the WCAG (Web Content Accessibility Guidelines) 2.0 (lookup tests for other guides/reccomendations changing the options on the left): https://www.w3.org/WAI/ER/tools/?q=w...-guidelines-20
  Reply With Quote
02-25-18, 07:37 PM   #11
lightspark
A Rage Talon Dragon Guard
 
lightspark's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2012
Posts: 341
Originally Posted by aallkkaa View Post
"I never notice shields." Yeah, we really are "all different" ... I mean, I can imagine a situation where you wouldn't't notice the shield.
Heh, yeah, "different" cuz we aren't actually that different >_>

Despite my colour weakness, hate this term, btw, colours are what catches my eye, whereas something like shield on the bar is completely ignored by my paracentral/near-peripheral vision.

Originally Posted by aallkkaa View Post
Still, there is work done on accessibility, namely for web pages. Much/most of what's been done by W3C's Web Accessibility Initiative can be used in any GUI, for the WWW as for anything else.
Here's a few links you may check out if you're interested:
WAI homepage: https://www.w3.org/WAI/
Page-evaluation tools (e.g. "how visible is this text color on this background color?"), sp. for the WCAG (Web Content Accessibility Guidelines) 2.0 (lookup tests for other guides/reccomendations changing the options on the left): https://www.w3.org/WAI/ER/tools/?q=w...-guidelines-20
Ugh, thank you for reminding me how shitty w3c website is, in spite of who these guys are, they still have this poorly designed/formatted site...
__________________
  Reply With Quote
02-26-18, 07:05 PM   #12
aallkkaa
A Warpwood Thunder Caller
 
aallkkaa's Avatar
AddOn Author - Click to view addons
Join Date: Jun 2017
Posts: 98
Originally Posted by lightspark View Post
Heh, yeah, "different" cuz we aren't actually that different >_>

Despite my colour weakness, hate this term, btw, colours are what catches my eye, whereas something like shield on the bar is completely ignored by my paracentral/near-peripheral vision.
I didn't imagine exactly that, but something along those lines, yes.

Originally Posted by lightspark View Post
Ugh, thank you for reminding me how shitty w3c website is, in spite of who these guys are, they still have this poorly designed/formatted site...
Well, that's often the thing with easily readable stuff: it often doesn't look all that pretty. And inversely, pretty layouts and graphics are often not very readable.
But some of the tools provided by the WCAG do allow you to test some color schemes and, in one go, see how they look on screen as well as get a rating for their readablity. So I reckon they're useful in helping you make a good decision in this regard.
  Reply With Quote
02-26-18, 08:48 PM   #13
lightspark
A Rage Talon Dragon Guard
 
lightspark's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2012
Posts: 341
Originally Posted by aallkkaa View Post
Well, that's often the thing with easily readable stuff: it often doesn't look all that pretty. And inversely, pretty layouts and graphics are often not very readable.
But some of the tools provided by the WCAG do allow you to test some color schemes and, in one go, see how they look on screen as well as get a rating for their readablity. So I reckon they're useful in helping you make a good decision in this regard.
Certain tools are useful, sure... I wasn't talking about them, I personally don't find the way the text on certain pages is organised/formatted to be easy to read at all, but I digress.

On topic though, it's nigh impossible to make an artwork-heavy UI to be colour-blind-friendly while being appealing to the rest of the audience w/o colour sensitivity issues if you want to use universal colour-blind-friendly pallete.

Universal colour-blind-friendly palletes are garbage, in most cases they look like shit to your average person w/ normal vision, they are also too conservative to express many things. Want to show green health bar and blue mana bars, eh? Good luck w/ that, or you'll make all tritanopes very sad >_>

Colour mapping and/or multiple colourblind-friendly pallete presets do work in many cases, but they aren't optimal either, esp if you have to convey a lot of info via status bars, in this case status bars' textures w/ patterns is the safest and best solution, they can also be incorporated into your design, but unlike the aforementioned colour-based approaches, it's time-consuming to develop, and, if we're talking about commercial products, we aren't , it's more expensive as well.

And, as a "colour-weak" person, I think that hobbyists should ignore this stuff entirely, unless they really want to do it. We're like <5% of the user base, that's assuming we're represented proportionally.
__________________

Last edited by lightspark : 02-26-18 at 10:02 PM. Reason: many edits later...
  Reply With Quote
02-27-18, 06:37 AM   #14
aallkkaa
A Warpwood Thunder Caller
 
aallkkaa's Avatar
AddOn Author - Click to view addons
Join Date: Jun 2017
Posts: 98
Excellent points, Lightspark (and incidentally, you sound much more savy than me on the subject, although "Universal colour-blind-friendly palletes are garbage" is mostly a subjective statement).

Also, I now realised linking top/root pages to WAI and WCAG may not have been my best idea yet.

Something a bit more on point:
http://gmazzocato.altervista.org/colorwheel/wheel.php
How I would personally use this myself would be to, for example:
1. Design something where I used two colors to differentiate between two different states (e.g. your two differently colored bars, for interruptible and non-iinterruptible spells);
2. Input the values of those two colors in the webpage above;
3. Aim at an AA level of compliance (AAA would be welcome but I'd settle for AA for gameplaying) and, if needed, adjust one or both of the two colors to reach AA;
4. Look at the new two colors: do they still look good (in my subjective opinion of course)? If so, go with them, otherwise, probably just go with the original non AA-compliant colors.

So yeah, use something like the page above as post-design adjustment tool, aiming at reaching AA compliance through minor adjustments only. If possible. If not, well...
  Reply With Quote
02-27-18, 07:31 AM   #15
lightspark
A Rage Talon Dragon Guard
 
lightspark's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2012
Posts: 341
Originally Posted by aallkkaa View Post
Excellent points, Lightspark (and incidentally, you sound much more savy than me on the subject, although "Universal colour-blind-friendly palletes are garbage" is mostly a subjective statement).

Also, I now realised linking top/root pages to WAI and WCAG may not have been my best idea yet.

Something a bit more on point:
http://gmazzocato.altervista.org/colorwheel/wheel.php
How I would personally use this myself would be to, for example:
1. Design something where I used two colors to differentiate between two different states (e.g. your two differently colored bars, for interruptible and non-iinterruptible spells);
2. Input the values of those two colors in the webpage above;
3. Aim at an AA level of compliance (AAA would be welcome but I'd settle for AA for gameplaying) and, if needed, adjust one or both of the two colors to reach AA;
4. Look at the new two colors: do they still look good (in my subjective opinion of course)? If so, go with them, otherwise, probably just go with the original non AA-compliant colors.

So yeah, use something like the page above as post-design adjustment tool, aiming at reaching AA compliance through minor adjustments only. If possible. If not, well...
Well, in this case, picking only two colours for the UI element, it will work, I agree, no objections there whatsoever.

However, at the same time this tool highlights the "universal colour-blind-friendly palletes are garbage" problem quite nicely. I was talking about the case when you need to create a pallete for an entire UI, when you work with complementary, triadic, and other colours, so there's more than just 2 colours. In this case it's kinda easy to adjust the pallete for people w/ normal vision and green- and red-blind/weak people, however, as soon as you add blue-blind/weak people to the mix you run into a problem, you pallete becomes too limited. That's when you have to start using other methods.
__________________
  Reply With Quote

WoWInterface » Featured Projects » oUF (Otravi Unit Frames) » Differentiating interruptible and uninterruptible spells on castbar?

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off