How would you do this? - Not code help, I want design suggestions

Disquette · 10/26/07, 9:28 AM

The new watershield for shaman works like this:

You cast it and get three charges.
Any time a charge is used, you get 200 mana back
At the end of a minute, any unused charges give you mana back
There is no cooldown on casting it.

It sounds simple, right? But, I'm trying to figure out a good way to graphically represent # of charges left and time left in a compact and "pleasing" way.

I am also a huge fan of not requiring people to read numbers on a bar. I design my mods so your peripheral vision will tell you what you need to know. Making the user read numbers runs counter to this.

So, any brilliant ideas on how to achieve this? I'm pretty much out of them. Some that I've played with so far are:

1) One traditional timer bar, where the height decreases as charges are used, while the width counts down like a normal timer bar.

2) One traditional timer bar, where the color changes as charges are used, wihle the width counts down like a normal timer bar.

3) Three small timer bars, all counting down simultaneously, but one bar disappears each time a charge is used.

4) Three small timer bars, none counting down. They would disappear as charges are used. A very thin timer bar would be overlayed on them which counts down like a normal timer bar.

Any suggestions are definitely welcomed.

aquasheep · 10/26/07, 9:55 AM

*edit nevermind, I just saw you already suggested what I did.

Opioid · 10/26/07, 9:57 AM

I remember back in the ancient tymes there was a lightning shield mod I enjoyed. it used a circle countdown bar for the overall time and 3 icons to represent the charges. I don't think it gets more compact than a circle overall, and all the data can be evaluated at a glance.

(crude mock up of what I'm talking about)

Ridan · 10/26/07, 10:00 AM

Something circular?

A circle divided in 3 equal parts.
Each time a charge is used, one part disapear.

The time would be represented as the circle Shading in grey (or some other color), clockwise (like the buff on blizzard UI).

When time is up or when all the charges are used, the circle would flash in red.

xereva · 10/26/07, 10:04 AM

I think you already gave some nice suggestions.

But what i think that is the most important that it is clear when you have to recast it. So a warning when it fades, or something to notice it... seems to me that an empty bar won't really get your attention.

EDIT: and something flashing in red like just suggested is always good ;-)

EDIT 2: Or an blue circular bar-timer, with inside that circle a smaller blue circle divided in 3 parts (like a pie). Each pie-piece is a charge, and disappears if used. In the same time the circular timer gets less. If the water shield fades they all (the circular timer and the pie-pieces) turn (or blink in) red. Hopefully this is a little clear without an illustration...
EDIT 3: hmm, would like something like this when at 45 seconds and 1 charge left:

Nemaa · 10/26/07, 10:08 AM

My idea based on Totem Timers' functionality:
It would be a single square shaped scaleable 1x1 button with the water shield's icon and charges on it. Under the button we could see the time left just like it would be a buff or debuff. The icon turns reddish (option for turning this off) when all 3 charges are used. When you press the button you cast water shield (you could also assign a hotkey for it). I like compact things and don't really like to see bars on my screen, but this is my sense of taste.

Kalman · 10/26/07, 10:18 AM

A circle whose radius represents time remaining, with three icons on top of it for charges.

So as the shield ticks down, the circle disappears.

Sovereignty · 10/26/07, 10:22 AM

I think the third option is, without question, the best. It has the highest potential for "on the fly" information gathering. There are two reasons I like it: first, it has the highest potential for accurate "on the fly" interpretation. You don't have to look to two different places to determine charge versus timer (option four) and you don't have to spend time interpreting or guessing what a specific combination of height and width means (option1). The second reason is probably less important, considering your feelings about text based mods. Ultimately, I think that having the "three bars" on screen appeals best to folks who use both symbolic and representational methods of information gathering. As such, it would probably be the most useful to the most number of people.

I would assume the frame for option 1 would have to be rather large to make distinctions about height and width meaningful. Option 2 is pretty okay, but might screw with some folk's color-coordination in their UIs. And Option 4 just seems needlessly complicated.

Originally Posted by Kalman

A circle whose radius represents time remaining, with three icons on top of it for charges.

So as the shield ticks down, the circle disappears.

I'm not sure combining elements like that is really less complicated than numbers. Not to mention circles are ugly.

stayclean · 10/26/07, 10:23 AM

Maybe you could use Avion to graphically represent it. I haven't had any experience using it, but its just another option for you I guess :P

sathran · 10/26/07, 10:32 AM

The way I see it, you could interpret the shield as a mana repository, on a time base.
A time bar on top with some numbers underneath: charges left and expected total mana left, could do the trick and be pretty simple to understand.

I'll try to express myself as best as I can using the code tag:

████████████
••• 600 mana

Taryenne · 10/26/07, 10:33 AM

What I use at present is

The background shows the duration remaining using a shader feature thats quite clear ingame
Text font/size and colour can be changed for clarity

Malan · 10/26/07, 10:47 AM

Disquette I like the circular representation mentioned above, although it may not mesh well with some of the other bars on DisqoDice.

Shakkha · 10/26/07, 10:57 AM

i think a circular representation wouldn't go very well with the rest of the disqo add-on gfx style.

I think a single bar decreasing with 3 boxes under (or over) it who would disappear when charges are used could do the trick. Something like:

[XXX] [XXX] [___]
|||||||||||||||||||)

dunno if that will relay the idea in a legibile way.

Krennick · 10/26/07, 11:01 AM

Well, I'd like to challenge the assumption that you need to track duration.

The way I read this shield, it's the 'free mana' shield. If you pop it up once per minute and don't care about it you are guaranteed to get 600 mana per minute. It seems almost too good to be true tbh, but nevermind that. If you take dmg and lose charges on your shield you can put up another shield and maximise your return over time from the shield that way. It'll cost a global cooldown, but 600 free mana for one global cooldown is a tradeoff that is a good deal in about 9 out of 10 cases.

The way I see it you want to track your status between any of these three:
1) Shielded, with some charges up - plenty of time before it expires. You want to know how many charges are left, and nothing else really.
2) Shielded, with some charges up - not much time before it expires. You want to know how many charges are left and you want to know that it is about to expire
3) Not shielded

As a graphic I'd go with a 'juggling balls' setup - a triangle of smallish balls. I'd pick a medium/light blue for charges, and dark/shaded red tending towards black for not charged.

Status 3 above would be a graphic of 3 dark/shaded balls showing that it's not up.
Status 1 above would be a graphic of 1-3 blue charged balls and 0-2 dark/shaded balls with no other funny stuff.
Status 2 I would do as a copy of status 1 with a 'this thing is about to expire' flashing warning in the last 5 or so seconds before it expires.

Due to the delay imposed between discharges, I find it highly unlikely that you will want millisecond precision on refreshing the water shield. Any time in the two seconds following expiration will give the same return.

Due to the way I understand it working you'd practically never gain anything from refreshing it before it expires.

Disquette · 10/26/07, 11:04 AM

Wow, thanks much for the responses. I didn't think I'd get so many.

Malan, I agree, it doesn't mesh well. However, I do like it as a concept, and could possibly make it its own separately draggable frame so that it isn't forced into the same format.

I could possibly have it toggle with Option 3, just so I can get *something* in there for now. This is because...

I have no idea how to make a circular status bar. If anyone knows off hand a current mod that does this, I'd be really interested in seeing it so I could steal^H^H^H^H^H learn how to code that way.

Kalman - the issue I have with your suggestion is that as the circle gets smaller, the message goes away (much like someone mentioned with a bar disappearing ). I like to have something to look at as opposed to relying on memory when possible, though I suppose my current coding shows that I don't follow this concept very well. This is why I really like the mod that ______ (a poster in here who has kept his mod private thus far) made for watershield reminders. It has a textual equivalent of the red flash when the watershield is gone.

Thanks again, and more options are always helpful to broaden the horizon of possibilities.

EDIT - I'm being swayed by Krennick's ideas. Does anyone have a counter challenge to that?