Discuss: Your Input - Icon Shape

290 posts / 0 new
Last post
Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Agreed

Agreed

Cinnder wrote:

In contrast, I can't even tell what some of the pictures are meant to be in Izzy's square icon example, much less what those buttons might do.

Multiple state changes along with usage state on a visually busy (to the extreme) button will not help me play the game any better. The richer approach looks pretty, but would be way to confusing to the user once they tried to use them. Or they would just be using shortcuts anyways and not actually need or want to look at he buttons themselves.

Those types of images might be useful for emotes or macro buttons.
I almost want to start another thread for us to interpret what each of those graphics could mean in Izzy's square icon example.

Interdictor
Interdictor's picture
Offline
Last seen: 1 hour 11 min ago
11th Anniversary Badge
Joined: 08/22/2013 - 05:26
As long as I can look at the

As long as I can look at the Icon and instantly know what power I am looking at (or at least have a pretty good idea of what it's going to do), I should be fine.

In the old game, you could look at an icon and see instantly what set it belonged to (via it's colour), what basic effect it had (damage via the little "explosion" icon and relative strength via the number of little explosions, healing via the "+" icon), whether it was single target, AoE, PBAoE from the border, and so on. If CoT follows that philosophy I'll be satisfied.

That said - I can get behind circles, squares or hexagons for the power buttons, but I would stay away from triangles for buttons you have to click. They might be very space efficient on a UI if you stagger them up and down, but they also tend to lead to more misclicks. And if you space them out you just negate the only reason for having them. They might work better for enhancement slots and certain buff/debuff status effect icons or the equivalent.

Radiac
Radiac's picture
Offline
Last seen: 2 days 18 hours ago
kickstarter11th Anniversary Badge
Joined: 10/19/2013 - 15:12
Izzy wrote:
Izzy wrote:

just googling, came across this blog: link
had an image on it:
do you think players would like more richer icons, or more flat silhouette ones, with subtle shades perhaps?

I really like the detail that some of the more detailed icons here have.

I don't know if the game NEEDS that level of detail, but it would be cool of the powers had it. I mean it would make the UI look cooler, to me. I also think that it would be good if every powerset had a coherent, unique theme of some kind making the icons look like they belong to the set. I know that some secondaries will be very similar to some primaries, if not exactly the same, but I'd like it if every power looked like it belonged to the set it was from and if every set looked different enough from all the other sets.

That said, it might make sense to have the primary sets be one shape and the secondaries be a different shape, to make similar powers in similar sets look different in the icons, if not in the icon art.

For the record, I like the more detailed painted art better than the flat symbolic art.

Here's on idea, is it possible that every power set in the game, at least at time of roll out, would be represented by at least one of the iconic characters of the game? If so, you could do up the art on the power buttons to look like the character who has that set doing the power. Like if Burning Blast is a set Overclock has (seems unlikely, but ignore the bad example) then all the Burning Blast power buttons would depict art of Overclock doing his iconic prototype version of the power. It's true that the powers can be modified to look NOTHING like that, but then the toon is going to look nothing like Oveclock, so you're just using that to have a nice piece of art there instead of 2D symbol like something off of the instructions for putting together an Ikea desk. I like the idea of giving every power set (and thus every power) a prototype or "good example" of what it can be like that.

R.S.O. of Phoenix Rising

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
i think Planet10 was pointing

i think Planet10 was pointing out that if each power had its own rich/detailed graphic it could mean you would have to remember each and every different graphic for every power in all the power-sets for your characters. :/ I kinda agree. :(

It might be easier on the Dev's as well to just change the Color tints from one powerset to the next, and reuse the silhouette Iconography, when appropriate.

ex: if for knock iconography we had a second icon, i would like my Water (blue) power-sets to resemble this now.

for myself, I chose the 3rd Icon as the person being thrown back, as the 3rd power's primary benefit, to me, is its Effect, since it wasn't a high damage attack.

of course, later down the line, MWM could add a Silhouette pack for Kicks from the Cash Shop (could be earned in game as well) and you can swap some power icons with them. ;)

Interdictor
Interdictor's picture
Offline
Last seen: 1 hour 11 min ago
11th Anniversary Badge
Joined: 08/22/2013 - 05:26
Radiac wrote:
Radiac wrote:

Here's on idea, is it possible that every power set in the game, at least at time of roll out, would be represented by at least one of the iconic characters of the game? If so, you could do up the art on the power buttons to look like the character who has that set doing the power. Like if Burning Blast is a set Overclock has (seems unlikely, but ignore the bad example) then all the Burning Blast power buttons would depict art of Overclock doing his iconic prototype version of the power. It's true that the powers can be modified to look NOTHING like that, but then the toon is going to look nothing like Oveclock, so you're just using that to have a nice piece of art there instead of 2D symbol like something off of the instructions for putting together an Ikea desk. I like the idea of giving every power set (and thus every power) a prototype or "good example" of what it can be like that.

Interesting idea but I'm not very fond of it. To me that will say "this is character X's power" not "this is MY power". Plus I agree with some others that those art-based icons are not very informative and some downright mystifying as to what they are actually supposed to be.

wmilliken
Offline
Last seen: 4 months 1 day ago
Joined: 07/16/2015 - 21:16
After reading the feedback

After reading the feedback here, and thinking a bit, I wound up going for the square for everything clickable, and triangle for the two non-clickable icon types (which I assume will be for use in status displays). My reasoning boils down to whether the different icon shapes would actually help me play or not, and I realized that it probably wouldn't -- I'd still need to look at the interior image to figure out what it did, and I don't so much care *how* it does it.

I generally use toolbar location to distinguish classes of buttons (e.g. normal combat clicks on main toolbar, longer term buffs on a separate toolbar, utility powers and toggles on a third toolbar). So icon shape wouldn't be needed for a cue, for me. And what's inside the icon will usually be more important to me than what class of action the icon represents, which is really more of a programming thing, rather than a player thing. For me, an icon for a button just says "something happens when I click this", and what *kind* of thing happens is shown by the interior image and color. Decorations around the icon to show status information about the action's availability and recharge are important as well, and it looks like those are present in some form.

I will note I'm not an uber player, and tend to be slow-reacting, so what I'm looking for in a toolbar is stuff that I can take in quickly without having to parse a lot of information. What does this action do? Is the action available? If not, how soon? Is the action boosted in some way? -- those are the main questions I'm looking to the toolbar icons to answer. The square icon seems to be the easiest to read the interior image quickly, and most likely to present an interior image clearly, so that's why I went for that.

If I had the option to use custom shapes in my toolbars, I'd be inclined to use them to classify powers into use classes like "single target attack", "AoE attack", "single target heal", "AoE heal", "interrupt", "taunt", and the like, rather than the general program mechanic the power belongs to. Since the proposed icon families don't do that, I'd rather have all the buttons have a uniform shape.

Fireheart
Fireheart's picture
Offline
Last seen: 10 hours 37 min ago
11th Anniversary Badge
Joined: 10/05/2013 - 13:45
Cinnder wrote:
Cinnder wrote:

The screenshots from Fireheart and Izzy are a perfect illustration of the point I made on another thread supporting a game-wide icon scheme similar to that of our old game and avoiding square 'painting' icons.
While some players won't look at the icons, some (like me) will do so frequently. I don't know what power sets were in Fireheart's build, but just by looking at the icons I can tell what about 2/3 of them would do. In contrast, I can't even tell what some of the pictures are meant to be in Izzy's square icon example, much less what those buttons might do.

That might be because the powersets in my tray, were for a Fiery Aura/Dual Blades Tanker. Izzy's first one might be Invulnerability and Super Strength?

However, the big, colorful collection was not Powers, but icons for Costumes and other features bought on from the Store, after Freedom. I see some sword-styles, new character-slot, Vault or Bank access, fire-juggling emote, Plant Growth Powerset, lots of random stuff. These were not designed to be used in a 'dynamic' sense, like power-icons are. As noted, they're too 'busy' for that purpose.

Be Well!
Fireheart

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
K eepI tS impleS tupid

K eep
I t
S imple
S tupid

Just because you CAN go for maximum "eye candy" factor, doesn't mean you SHOULD or that it would necessarily be WISE to do so.

Deviate from the expectations of your audience/supporters at your peril. You want a system that is so intuitively OBVIOUS that there doesn't need to be a huge pile of documentation for people to read through in order to make use of it all. You want something as bog simple as handing the keyboard and mouse to A CHILD and have them just intuitively grasp things with very little need for experimentation/familiarization.

There is comfort in simplicity. We all played a game where a simple UI allowed us to devote our attention where it was needed most ... GAME PLAY. Straying from that legacy for the sake of eye candy does not seem to be a particularly prudent move (to me, anyway).

Stick with Circles for Toggles and Clicks. It's something that we all remember, fondly, from City of Heroes ... and for better or worse, it's what we're all natively EXPECTING to see in City of Titans. Ain't broke, don't fix.

The Nimbus could be done outside the Icon Circle, in the "white space" around each Circle inside the "lozenge bar(s)" of the Trays. Use the entire "square" of space around each Circle for Nimbus representation.

Izzy ... if working with a designed space of 128x128 pixels to include a Nimbus and a Circle ... would you say that having a 100 Pixel Diameter Circle area for art ... would that be prudent? Put a 4 Pixel wide "border" around that Circle, and you're looking at an overall width of 108 Pixels for an entire Standard UI Icon. You then have the remaining "white space" around the Circle to put any and all Nimbus information into the space external to the Circle.

Would you be able to provide us with a mockup of that? 100 Pixel Diameter Circle with a 4 Pixel wide "border" around the Circle, and having each of those elements be tiled within a 128x128 section of a Power Tray? I'd like to deconstruct and then reconstruct the elements in an iterative process, experimenting a prototyping as we go, if possible. This is going to be a Some Assembly Required iterations request, but I'd like to take things one step at a time, if I may. You've got the tools. Would you be so kind as to indulge me?


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
128x128 WxH

128x128 WxH
Nimbus: 10 px Width, Height
White Outer circle: 4 px Width
Inner Circle: 100 px

the nimbus is an eye sore, so i put them in their own outer circle. ;)

edit: like this? zoomed in at 100%, 100%, 150%

Cinnder
Cinnder's picture
Offline
Last seen: 18 min 53 sec ago
Gunterkickstarter11th Anniversary Badge
Joined: 08/26/2013 - 16:24
Fireheart wrote:
Fireheart wrote:

That might be because the powersets in my tray, were for a Fiery Aura/Dual Blades Tanker. Izzy's first one might be Invulnerability and Super Strength?

My point was that I don't need to know what the power sets were to determine what most of the buttons did, because in the old game there was a sort of 'symbolic language' where various elements combined in an icon to indicate its use, regardless of power set. For example, just going through the bottom row you presented I know that they are:

  1. Special attack, forward arc
  2. Single attack, medium strength
  3. Single attack, low strength
  4. Single attack, reduce defence
  5. AOE attack
  6. Increase health
  7. (This is the only one I'm not sure about)
  8. Increase defence
  9. Increase health
  10. Something to do with movement (run?)

I'd like to see a similar system in CoT through use of icons, nimbus, red/green dots or whatever so that we don't have to learn new symbols for each new character.

Fireheart wrote:

However, the big, colorful collection was not Powers, but icons for Costumes and other features bought on from the Store, after Freedom. I see some sword-styles, new character-slot, Vault or Bank access, fire-juggling emote, Plant Growth Powerset, lots of random stuff. These were not designed to be used in a 'dynamic' sense, like power-icons are. As noted, they're too 'busy' for that purpose.

True, but they are still typical of most MMOs in their inscrutability. Here's an actual set from SWTOR:

There's a heckuva lot of silhouettes there, but not much that tells you what these powers actually do. Maybe they change the style of your character's backlighting? :-) And the first one in the second row from the top: I don't even know what that is supposed to be. A smear of jam on a fish filet? An x-ray of someone who swallowed a tiny bat'leth?

I'm just hoping CoT will avoid this sort of thing and go with a scheme that supports interpretation better.

Spurn all ye kindle.

Empyrean
Empyrean's picture
Offline
Last seen: 19 min 21 sec ago
11th Anniversary Badge
Joined: 03/16/2014 - 07:51
Cinnder wrote:
Cinnder wrote:

...I'm just hoping CoT will avoid this sort of thing and go with a scheme that supports interpretation better.

As per usual, I strongly agree with Cinnder.

Champions, DCUO, and TSW--and pretty much all the other games that I've seen--do not have internally consistent icons in the way CoH did, and that makes things much harder to catch on to and less intuitive than it was in CoH.

CoH had almost developed an Ideogrammatic language, and that was a huge QOL boon across the board to make the game better to play.

FIGHT EVIL! (or go cause trouble so the Heroes have something to do.)

ScorpionKing
ScorpionKing's picture
Offline
Last seen: 1 year 8 months ago
Joined: 09/07/2015 - 13:28
The Line #5 Square is kind of

The Line #5 Square is kind of hard to read at a glance. There are tons of colors I can't tell the difference between without careful observation which makes the plus sign just blend in with the shaded portion of the cube.

All in all I really like where this is going. Just looking at the different pictures of the old power-bar I can immediately pick out the different abilities and their different effects. A big dot with small triangles from it is a high damage melee hit and the small spike mass is an explosion. The different colors indicate the elemental quality of the attack. The arch over the icon means the attack is conal. Its just so easy to tell all the different effects of powers.

My personal preference is to use circles. circles make it easy to have a timer. One of the shortcomings of CoH was that timers were hard to read. The circle being grayed out was good but I don't think they should have had the circle recede into the background. A better indication would have been the circle being grayed out with a line rotating around the center like a clock, something we all know about and can read easily. A step beyond would be to have straight up numbers. This wouldn't be as stylish but would be really easy to read compared to the other two cool-down indication methods. If you choose any I really hope you don't choose the receding method as its really hard to tell sometimes when a power is about to come off of cool-down and could end up with me sitting over it waiting for the power to come back.

You see these claws. If I manage to scratch you you'll be out of blood faster than you can call an ambulance.

Fireheart
Fireheart's picture
Offline
Last seen: 10 hours 37 min ago
11th Anniversary Badge
Joined: 10/05/2013 - 13:45
Some games I play use a

Some games I play use a 'sweep hand' to indicate cool-down time, but they also have the option of a numeric timer that can be toggled in Options.

Be Well!
Fireheart

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

128x128 WxH
Nimbus: 10 px Width, Height
White Outer circle: 4 px Width
Inner Circle: 100 px

the nimbus is an eye sore, so i put them in their own outer circle. ;)

/em kiss noise

THIS is (very nearly almost) PERFECT.

You want something which at 100% scaling is a little oversized, so that it's friendlier to scale down via UI Options Menu Settings, rather than being something you need to scale upwards. With a 100 pixel radius Art Area you can put in a sufficiently distinct iconography that will scale really well.

The entire icon is 128x128 but you can then put everything within a "box size" of 150x150 to include everything out to the borders of the Power Tray and still have some white space around the icons.

Also, the Octagonal Nimbus Triangles looks like it might be the easiest to shoehorn into providing the additional Effects Cues that we've been wanting to incorporate into the Nimbus rather than into the icons themselves. Turn THIS ...

  • Cones
  • Player Only
  • Point Blank Area of Effect
  • Single Target
  • Summons or Drops
  • Summons or Drops, Area of Effect
  • Targeted Area of Effect
  • Teammates
  • Ally Area of Effect
  • Miscellaneous Icons

Take that broad set of expectations and code them into the Nimbus like so ... using the N, NE, E, SE, S, SW, W, NW eight points of reference ... and the direction the triangles point (either inwards to the center, or outwards to the edges) as your references.

  • Single Target = N pointing OUT
  • Cones = NW + NE pointing OUT
  • Point Blank Volume of Effect = N, NE, E, SE, S, SW, W, NW pointing OUT
  • Target Volume of Effect = NE, SE, SW, NW pointing OUT

  • Player Only and Miscellaneous Icons = Empty Nimbus (no triangles)

  • Teammates and Ally Volume of Effect = N, E, S, W pointing IN
  • Summons or Drops = SE, SW pointing IN
  • Summons or Drops, Volume of Effect = E, SE, S, SW, W pointing IN

Izzy ... could I pressure you into making a mockup of a power tray with all of these Nimbus types using this image as a starting point of reference? It's okay if it looks "too big" right now. We can always have the UI elements scale down later. It's getting them to scale UP that would eventually be a problem.

If we can get away with using circular icons and pack the necessary information into 8 triangles pointed in 1 of 2 directions (in or out) then we'll not only have the "shape" of our icons, we'll also be able to play up the nostalgia factor. Note also that such a system would leave room open for use of a 128x128 SQUARE icon for Macros, so as to leave the largest available area for text inside the icon.

And if we can get THAT part nailed down ... the shape and the nimbus for Powers, then the next step is to work on the iconography that goes into the 100 pixel diameter circle. Again, for reasons of Tried And True™ (not to mention nostalgia factor) I'd recommend keeping the iconography simplified in much the same way that City of Heroes did, rather than going in an Artsy Fartsy direction that creates visual noise with too many shapes and colors. You know ... like this ...

Also note that the "White Outer circle: 4 px Width" region can be used to convey information. It's where you can put the "orbiting dot" indicating a Toggle On condition. You can have it switch between light/dark depending on whether the Power is fully recharged (Y/N) or not. You can even assign it a "special color" to indicate that this specific Power has been set to Auto Activation whenever it is fully recharged.

/em swipe clapping hands in satisfaction

Izzy ... if you would be so kind as to prototype the appearance for us ...


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
sorry, was preoccupied with

sorry, was preoccupied with something... just couldn't let it go. ;)

ex:

Darkfaith
Darkfaith's picture
Offline
Last seen: 22 hours 40 min ago
kickstarter11th Anniversary Badge
Joined: 11/05/2013 - 18:11
Izzy wrote:
Izzy wrote:

sorry, was preoccupied with something... just couldn't let it go. ;)
ex:

I -really- like the one on the right. It's easy to see, easy to interpret, and the Nimbus around the edge stands out nicely.

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Redlynne wrote:
Redlynne wrote:

Take that broad set of expectations and code them into the Nimbus like so ... using the N, NE, E, SE, S, SW, W, NW eight points of reference ... and the direction the triangles point (either inwards to the center, or outwards to the edges) as your references.Single Target = N pointing OUT
Cones = NW + NE pointing OUT
Point Blank Volume of Effect = N, NE, E, SE, S, SW, W, NW pointing OUT
Target Volume of Effect = NE, SE, SW, NW pointing OUT
Player Only and Miscellaneous Icons = Empty Nimbus (no triangles)
Teammates and Ally Volume of Effect = N, E, S, W pointing IN
Summons or Drops = SE, SW pointing IN
Summons or Drops, Volume of Effect = E, SE, S, SW, W pointing IN

Are you co-opting Nimbus to signify a power's directional (single target, cone, etc) qualities? I don't think that was the intent of Dev.
I thought Nimbus was supposed to be an ebb/flow indicator for whatever influence it has on the character or power.

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Planet10 wrote:
Planet10 wrote:

Are you co-opting Nimbus to signify a power's directional (single target, cone, etc) qualities? I don't think that was the intent of Dev.

Guess you'd better ask them to be sure of that.

Planet10 wrote:

I thought Nimbus was supposed to be an ebb/flow indicator for whatever influence it has on the character or power.

In City of Heroes, whether a Power was a Single Target/Cone/AoE/etc. was something that was "baked in" to the Power by the Devs at the game mechanical level and was not subject to change. Powers that started out as Cones were always Cones, for example. This was an immutable property of the Powers themselves. There was no way to take a Single Target Power and "convert" it into being a Cone or a PBAoE ... or whatever. What the Powers affected was "locked" and those properties were represented on the Power Icons themselves using a visual cue language that Cryptic developed and maintained throughout the game's entire run.

City of Titans isn't going to be following that precedent.

In City of Titans, not only are we going to have Aesthetic Decoupling, so that how a Power looks when Animated will be mutable (emanation point, colors, visual effects, etc. etc. etc.), but what a Power AFFECTS will also be mutable as well(!!). This means that you can take a Single Target Power ... add the right Augment to it and ... now you have a Cone Power ... or a Target Volume of Effect ... or whatever. Those Augments will then come with Refinement Slots, which can do things like increase the radius of an Effect, making Cones and VoEs "reach" farther away, or perhaps even adjusting the Angle that a Cone can affect, by making it wider or narrower. In the case of a Cone attack, a very "narrow" Cone with a very long radius on it can represent a sort of "piercing" styled Line Effect where you can hit multiple things if they're lined up right.

Because these properties of Powers are being designed to be modified through Augments/Refinements, it is necessary to "move" the visual language denoting this information out of the Icon Art itself and instead render it in the Nimbus region surrounding every Power in your Power Trays. This then turns the Nimbus into something that can be easily modified, without adjusting the Icon Art, so as to convey the necessary details at a quick/cursory glance so long as you're familiar with the visual language being used to present/encode that information for ease of reference. The Nimbus region thus contains information that represents how a Power "works" when Augmented and Refined by the Player, as opposed to being something that is "locked in" and immutable based on how the Power was designed originally by the Devs.

Planet10 wrote:

Are you co-opting Nimbus to signify a power's directional (single target, cone, etc) qualities? I don't think that was the intent of Dev.

As you can clearly see, I was under the impression that this was the entire point of the exercise. I'll let the actual Devs speak for themselves as to how correct that interpretation of intent is.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Doctor Tyche
Doctor Tyche's picture
Offline
Last seen: 21 hours 40 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 11:29
Redlynne wrote:
Redlynne wrote:

Planet10 wrote:
Are you co-opting Nimbus to signify a power's directional (single target, cone, etc) qualities? I don't think that was the intent of Dev.
Guess you'd better ask them to be sure of that.
Planet10 wrote:
I thought Nimbus was supposed to be an ebb/flow indicator for whatever influence it has on the character or power.
In City of Heroes, whether a Power was a Single Target/Cone/AoE/etc. was something that was "baked in" to the Power by the Devs at the game mechanical level and was not subject to change. Powers that started out as Cones were always Cones, for example. This was an immutable property of the Powers themselves. There was no way to take a Single Target Power and "convert" it into being a Cone or a PBAoE ... or whatever. What the Powers affected was "locked" and those properties were represented on the Power Icons themselves using a visual cue language that Cryptic developed and maintained throughout the game's entire run.
City of Titans isn't going to be following that precedent.
In City of Titans, not only are we going to have Aesthetic Decoupling, so that how a Power looks when Animated will be mutable (emanation point, colors, visual effects, etc. etc. etc.), but what a Power AFFECTS will also be mutable as well(!!). This means that you can take a Single Target Power ... add the right Augment to it and ... now you have a Cone Power ... or a Target Volume of Effect ... or whatever. Those Augments will then come with Refinement Slots, which can do things like increase the radius of an Effect, making Cones and VoEs "reach" farther away, or perhaps even adjusting the Angle that a Cone can affect, by making it wider or narrower. In the case of a Cone attack, a very "narrow" Cone with a very long radius on it can represent a sort of "piercing" styled Line Effect where you can hit multiple things if they're lined up right.
Because these properties of Powers are being designed to be modified through Augments/Refinements, it is necessary to "move" the visual language denoting this information out of the Icon Art itself and instead render it in the Nimbus region surrounding every Power in your Power Trays. This then turns the Nimbus into something that can be easily modified, without adjusting the Icon Art, so as to convey the necessary details at a quick/cursory glance so long as you're familiar with the visual language being used to present/encode that information for ease of reference. The Nimbus region thus contains information that represents how a Power "works" when Augmented and Refined by the Player, as opposed to being something that is "locked in" and immutable based on how the Power was designed originally by the Devs.
Planet10 wrote:
Are you co-opting Nimbus to signify a power's directional (single target, cone, etc) qualities? I don't think that was the intent of Dev.
As you can clearly see, I was under the impression that this was the entire point of the exercise. I'll let the actual Devs speak for themselves as to how correct that interpretation of intent is.

You are right on target.

While there are limits to such augmenting, the goal is to allow players to better customize their powerset over time.

Technical Director

Read enough Facebook and you have to make Sanity Checks. I guess FB is the Great Old One of the interent these days... - Beamrider

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

sorry, was preoccupied with something... just couldn't let it go. ;)

BOTH of these look wonderful, Izzy.

It's a really odd thing, but on an intuitive/emotional level, I read the left icon as being "calmer" while reading the right icon as being "more aggressive" simply as a result of the change in the outer boundary shape from a circle to an octagon. I'm also really loving the play of light on the "glass and metal" look of the individual icons themselves when viewed as a combined whole. It generates a "faux 3D" interpretation of being a polished cabochon of clear glass inset into a metal ring (like you'd wear on a finger). This is almost a sideline aspect, but I think that it is important, from a Design Style Aesthetic point of view, to have the Icons we plan to use feel evocative of something rather than just being "pretty pictures" thrown together in slapdash fashion with no real rhyme or reason to them other than to look pretty.

So here's a question for you Izzy that is going to impinge on Premature Optimization.

Which of these two SHAPES is easier and requires fewer resources to handle/manipulate easily, given the constraints of the tools that you're using to make them, Izzy? The circular outer edge or the octagonal one?

Note that the octagonal shape looks like it requires a couple of extra pixels of thickness at the vertex points, meaning that the octagonal shape you are showing looks like it's using a total area footprint above 128x128 (132x132?). For a true "apples to apples" comparison, both icons need to be constrained to fit within the same dimensional boundaries, for which I'm requesting a limit of 128x128 (since that's a "Power of Two" where 27=128) and makes in-game use of a 50% size of that (for 64x64 icons) relatively straightforward and simple.

I'd like to see two examples of each type (circular and octagonal) with equilateral triangles pointing radially In and Out, for a total of four examples. We can then use those four examples to do a cross comparison on whether to use equilateral triangles in the nimbus or use "broad base" isosceles triangles at the 8 compass points for easy visual cues. After that, it's mainly just a question of "which triangles are ON/OFF" in the Nimbus region to quickly and easily convey the necessary information about how the Power is Augmented (and therefore, Refined). I appreciate that you're making clear that the "off" triangles are present in these examples, since we're basically "sketching" this right now and it's nice to have the reminders there for making judgements, but I'd recommend that for actual production the "off" triangles simply be omitted from the Nimbus area in order to reduce visual clutter. So keep the markings of the OFF triangles for right now, but with a mind to not have them appear in the finished production version.

Last, but certainly not least, I've been thinking about the need for "white space" in between icons to prevent accidental clicks of the wrong icon. To this end, I'd recommend that only the 100 pixel diameter in the center of the icon be "actively recognized" as a Mouse Clickable area, and therefore be the only portion of the icon that responds to Mouse Cursor Hover for pop-up tooltip text. Doing that gets us the necessary "white space" of inactive area between adjacent icons, is something that would be UI Intuitive(ly obvious) to use, and represent the best Industrial Design we could have for the actual User Interface, methinks.

So ... Izzy ... might I pressure you into generating four icon examples for us that fit into a 128x128 pixel defined icon space?

  • Circular outer edge with equilateral triangles pointing OUT (1) and IN (2) with both ON and OFF triangles visually represented?
  • Octagonal outer edge with equilateral triangles pointing OUT (1) and IN (2) with both ON and OFF triangles visually represented?

If you want to go ahead and do another set of four icon examples where the only change is switching the triangles from being equilateral to being broad based isosceles triangles, that would be lovely. I'd like to think that looking at such a pair of four icon examples would let us nail down more definitively which is easier to "read" at a glance.

Oh, and just to make things interesting ... I'm thinking it would be a good idea to make it such that the coloring/tinting of the 100 pixel diameter "art area" and the 4 pixel "ring" around that and the IN/OUT triangles and the (what here looks like brushed metal) Nimbus Ring ... all of them ... as things which can be User Defined would be a Wise Choice™ so as to permit plenty of UI customization. The icon SHAPE in the 100 pixel diameter "art area" could be something which is "fixed" and doesn't change, because that's visual language, but the coloring (you're using a blue here in these examples) could be something which is defined as part of the Avatar Builder "experience" so as to link the colors used in the Power's FX to the coloring of the "art area" in the Icon that represents it in the Power Tray.

Is it just me, or is this kind of Iterative Rapid Prototyping actually being really helpful for people besides myself?


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Radiac
Radiac's picture
Offline
Last seen: 2 days 18 hours ago
kickstarter11th Anniversary Badge
Joined: 10/19/2013 - 15:12
I think the entire button,,

I think the entire button,, metal rim and all, should be clickable area for activating a power. I'm far less worried about accidentally firing the wrong power than I am "missing" the button when I click on it due to my aim being off enough that I hit the edge instead of the center of the button. When I click the wrong button, I know that's my own fault. When I click on the bezel and it doesn't fire off the power, I get mad and throw the mouse at the monitor. I would define the "target" area of the button real estate to be as generous as possible without overlapping any buttons, then if I hit the wrong one, my fault. If I hit the right one and it doesn't register, your design is bad.

R.S.O. of Phoenix Rising

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
just a side note: yep... the

just a side note: yep... the inner circle uses a white circle texture that can be tinted

ex:

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
100% : 150% :

100% :

150% :

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

Okay, THIS is what I was looking for, not the 150% version. What I'm really looking at now, with THIS set of images is how clear the Nimbus is to read visually. Is there enough differentiation in the triangle directions to be able to "read" them at a quick glance. Right now, as is, being able to see the cross comparisons side by side, I'm thinking that the equilateral triangles become less effective indicators of directionality as icon size decreases. You can easily see this in the difference between the 100% and the 150% versions, since in the 150% the triangle directions are very clear, but in the 100% version there is the opportunity to get "muddled" about which way the triangles are pointing. From a UI design standpoint, ambiguity in the triangle directions is a Bug, not a Feature.

So with that in mind, perhaps it would be best to try the isosceles versions of the triangles, giving them a broader base. For simplicity, see if you can show us a 45-90-45 triangle configuration, instead of a 60-60-60 triangle configuration ... if you would be so kind Izzy.

Also, just to be clear, I'm less worried about what the icons look like at 150% than I am about what they'll look like at 50% scaling. That's because as the iconography gets smaller, it gets harder to "read" and notice the little details for things like which direction the triangles are pointing due to ambiguity brought on by small scaling.

Hope I'm not being too ... demanding ... on you with all this, Izzy. ^^;


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
First, excellent suggestions

First, excellent suggestions Redlynne. Second, awesome mock-ups Izzy!

I wonder though, if instead of the triangles being used as the lit portion of the nimbus, the spaces between were lit instead to make the lit area clearer at smaller sizes. Of course the triangle size may need to be a bit larger anyway, but it seems to me that the dead space between them might make better realestate than the smaller triangles.


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
i wonder if it would help if

i wonder if a live working demo would help here?
ex: http://kissui.izzysoft.com/support/index.php?action=demos;sa=301DragDrop

it takes time to build it, but anyone with a newer browser can run it, any platform, without having to run an Executable. ;)

Radiac
Radiac's picture
Offline
Last seen: 2 days 18 hours ago
kickstarter11th Anniversary Badge
Joined: 10/19/2013 - 15:12
Thanks for the examples, Izzy

Thanks for the examples, Izzy.

R.S.O. of Phoenix Rising

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
like this?

like this?

edit:

Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
Almost, except don't fill the

Almost, except don't fill the tiangles, thise would remain uncolored metallic providing the gaps between each highlighted segment.


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
hmm, i guess like this.

hmm, i guess like this.

100%, 200%

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Ok, now that the Nimbus

Ok, now that the Nimbus functionality has been explained & verified we can move forward. Keep in mind that Dev wants some sort of "dots" on the button too and that will probably lend itself to being on the rim (or outside of it) like the Nimbus.

I prefer the Circle shape as opposed to the Octagon shape for the button & rim.

We might want to re-evaluate the triangle shape and the highlighted area between them on the rim. If Dev wants the area between the Nimbus to be highlighted, the location of the Nimbus needs to change, otherwise the important part (the highlighted areas that your eyes are drawn to) has no meaning. Alternately, why not just segment the entire outer region of the rim into rectangular arcs and have those arcs be the Nimbus and highlight them as appropriate? You could use all of the old conventions from CoX for single target, cone, PBAoE, etc.

Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
Yup. Then, if the nimbus

Yup. Then, if the nimbus outer circle were turned slightly, so one of the lit portions faced directly on top, bottom, left and right, so the triangles were off-set, it would be more indicative by providing 3 bars top, right, or left, or bottom. Nice work there.

Does that make it easier to see at a glance over the smaller triangles?

*edit*
Looking back, using this bar-section to be lit instead of trangles, using them as spacers, the octagonal shale might work even better.


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Tannim222 wrote:
Tannim222 wrote:

Yup. Then, if the nimbus outer circle were turned slightly, so one of the lit portions faced directly on top, bottom, left and right, so the triangles were off-set, it would be more indicative by providing 3 bars top, right, or left, or bottom. Nice work there.
Does that make it easier to see at a glance over the smaller triangles?
*edit*
Looking back, using this bar-section to be lit instead of trangles, using them as spacers, the octagonal shale might work even better.

Does it then still make sense for the shapes to be triangles if they are just spacers? Aesthetic choice? Rendering resources?
If the shapes become the spacers and the highlight/lowlight areas become the new Nimbus, would you want to use the spacers for the "dots" effect?

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
I think we need to step back

I think we need to step back from button design for a brief moment and talk about the icon that will appear on the button.

If some/most/all powers will be mutable over time, how are you going to represent the base power in icon form? We are all familiar with CoH buttons, but the icon & directional graphics will be decoupled.
It feels like keeping the icon static would make sense so the user does not get too confused. Does Dev have any new/interesting/wild ideas that would veer off of this expectation?

I am interested to find out how and when Nimbus will be communicated to the user. When I made my characters in CoH I brainstormed a concept & a bit of an arc as a guideline knowing what powers were available upfront. The added complexity of Nimbus will make my process a bit more fluid and much more of a discovery, especially since I do not know exactly how Nimbus will impact things.

Will Nimbus allow two powers to mutate enough to essentially become the same power? Take a standard punch (medium damage, medium speed) and a single target knockdown (high damage, slow speed). Boost the damage on the punch and make it a cone. Boost the recharge on the knockdown and make it a cone. Would you then essentially have two of the same power (more or less)?

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
hmm.. no arrows, and the dot?

hmm.. no arrows, and the dot?

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
Planet10 wrote:
Planet10 wrote:

I think we need to step back from button design for a brief moment and talk about the icon that will appear on the button.
If some/most/all powers will be mutable over time, how are you going to represent the base power in icon form? We are all familiar with CoH buttons, but the icon & directional graphics will be decoupled.
It feels like keeping the icon static would make sense so the user does not get too confused. Does Dev have any new/interesting/wild ideas that would veer off of this expectation?
I am interested to find out how and when Nimbus will be communicated to the user. When I made my characters in CoH I brainstormed a concept & a bit of an arc as a guideline knowing what powers were available upfront. The added complexity of Nimbus will make my process a bit more fluid and much more of a discovery, especially since I do not know exactly how Nimbus will impact things.
Will Nimbus allow two powers to mutate enough to essentially become the same power? Take a standard punch (medium damage, medium speed) and a single target knockdown (high damage, slow speed). Boost the damage on the punch and make it a cone. Boost the recharge on the knockdown and make it a cone. Would you then essentially have two of the same power (more or less)?

i'm more curious if CoT will have a way to share Powerset Themes, a name you also call it on your end. And of course Share it through an image QR Code, twitter, facebook, etc..., so others can import it, even on their mobile device. ;D

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Tannim222 wrote:
Tannim222 wrote:

First, excellent suggestions Redlynne.

I may be ... somewhat opinionated ... with my posts (*polite cough*), but you should not doubt that I'm trying to contribute to help make the best game experience possible every time I do post. So ... you're welcome, MWM.

Tannim222 wrote:

Second, awesome mock-ups Izzy!

Agreed. No further comment on this point is necessary. Simply being able to SEE the mock-ups and how the elements all interplay with each other and be INSPIRED by what we're seeing with each iteration is so valuable that I'm not even sure we can calculate just how much is being added by this kind of Open Source synergy we've got going on here.

Tannim222 wrote:

I wonder though, if instead of the triangles being used as the lit portion of the nimbus, the spaces between were lit instead to make the lit area clearer at smaller sizes. Of course the triangle size may need to be a bit larger anyway, but it seems to me that the dead space between them might make better realestate than the smaller triangles.

That's something I've been worrying about, whether the triangle directions would be visible at smaller scales. The problem is that if you just "fill" the arc sections between the triangles, you lose the IN/OUT directionality cue. A case could be made that the IN/OUT directional cues are less valuable than I've been making them out to be and can be dispensed with, in which case, filling in the "bars" between the compass points would be adequate to the task and a more easily visible solution.

Tannim222 wrote:

if the nimbus outer circle were turned slightly, so one of the lit portions faced directly on top, bottom, left and right, so the triangles were off-set, it would be more indicative by providing 3 bars top, right, or left, or bottom. Nice work there.

Looking back, using this bar-section to be lit instead of trangles, using them as spacers, the octagonal shale might work even better.

I believe what Tannim222 is trying to convey here is that rather than having the "points" of the octagon in the "eight cardinal directions" you'd instead rotate the points by 22.5º so as to put the "bars" in the orthogonal "eight cardinal directions" instead. That way, instead of having the "points" up/down/left/right of the octagon, you'd have the "flats" of the octagon edges in the up/down/left/right positions.

I'm going to try making use of the link you've provided Izzy to do a mock-up of my own ... and ... I have no idea how to run the user interface for the system at the link you've provided. I'm sure you can do amazing stuff with it, because you have been, but I'd need a lot of tutorials help to figure out how I'm supposed to work with the tool.

Hmmm ... if you do "spin" the Nimbus Ring by 22.5º to put the flats of the octagon into the up/down/left/right positions, you can then either use a circular outer edge or an octagonal one and stay within the 128x128 pixel range with no problems. However, when spun into the "stop sign" position, I'd argue against use of the octagon as the outer border shape because of the "stop sign" association of having that shape in that orientation for American Players. So if you're going to use Arcs rather than Triangles for the Nimbus Info, best to stick with a circular outer edge.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
SVG Image so far: Link

SVG Image so far: Link

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Izzy wrote:
Izzy wrote:

hmm.. no arrows, and the dot?

It looks nice, and that might be a good option for the "dots".
The orientation of the highlighted areas don't communicate anything meaningful I think. In that orientation, does the Nimbus indicate that it is a single target or cone? I don't know.
Crank the rim around a bit or maybe move the placement of the spacers? Would it look better with the octagon sitting on a flat edge or a point (or a different shape)?

How flexible will Nimbus be in terms of creating cones?
90 degree, 120 degree, 180 degree, 270 degree, 360 ???
That will also impact the spacing and orientation of the highlighted Nimbus areas. This is why I am not inclined to go with an octagon shape for the rim.
We still have to deal with point blank vs targeted and everything else, so we're back to triangles pointing inwards or outwards (or maybe gradients / patterns for the highlight).

Would we have to entertain the concept of a variable Nimbus ring based on the slotted power?
Not all powers will point blank, targeted or a summon, so the ring does not have to account for all possibilities.
Could a punch (point blank) mutate into a "ranged" target attack? For example I punch the ground, a shockwave travels through the ground and bursts up to hit a target at range. Would Nimbus allow that or would a power like that start as a baseline ranged attack instead of a point blank?

This is a tangent and more me talking to myself than anything else, but my punch example got me thinking about more variations. A punch with a point blank cone is simple to conceptualize. What about a 'ranged' punch that is a cone (i.e. no effect between you and your target, but then a cone that is centered on your target). Something like a distant touch, telekinetic attack, phantom force or super stretchy arms (probably not realistic to animate).

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
I think that Tannim222 was (

I think that Tannim222 was (*ahem*) ... angling ... for something more like this (using my woefully inadequate tools) ...

Single Target

Cone

Target Volume of Effect

Point Blank Volume of Effect

... except do it on a Circle instead of doing it in an Octagonal shaping.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Planet10 wrote:
Planet10 wrote:

How flexible will Nimbus be in terms of creating cones?
90 degree, 120 degree, 180 degree, 270 degree, 360 ???

I wouldn't want the Nimbus to be "responsible" for conveying information on how "wide" a Cone is. All of the Xº of arc width information is more properly handled by a tooltip popup on mouse hover over the icon.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Empyrean
Empyrean's picture
Offline
Last seen: 19 min 21 sec ago
11th Anniversary Badge
Joined: 03/16/2014 - 07:51
I've been following--no need

I've been following--been no need for me to comment because you are all eight steps ahead of me--BUT, I do want to mention that while the ideas here are all great and make perfect sense, I'm having a devil of a time visually making them out at scale.

FIGHT EVIL! (or go cause trouble so the Heroes have something to do.)

Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
[u

[u

Redlynne wrote:

That's something I've been worrying about, whether the triangle directions would be visible at smaller scales. The problem is that if you just "fill" the arc sections between the triangles, you lose the IN/OUT directionality cue. A case could be made that the IN/OUT directional cues are less valuable than I've been making them out to be and can be dispensed with, in which case, filling in the "bars" between the compass points would be adequate to the task and a more easily visible solution.

While using triangle points seems like a good idea to indicate directional queue, if you can't tell st a glance because of size, the information is useless.

Instead, if the nimbus where the flatter borders, color coding (and even customizable color coding) can be used may be much easier to understand at a glance at smaller scales.

An example could be: North is lit, means it is single target. Blue for self only. Green for friendly only, Cyan for both self and friendly. Red for hostile, Purple for hostile effect with self component.

All North bars lit means cone. All bars lit means AoE.
North Bar blinking Red means single target hostile intermittant effectmover time (dot).


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Harkening back to the

Harkening back to the original proposal I made for using IN/OUT Triangles ... if we dispense with the Triangles for conveying the information and instead use Arcs of the Circle, with no IN/OUT orientation info, we wind up with something more like this ...

  • Single Target = N arc
  • Cones = NW, N, NE arcs
  • Point Blank Volume of Effect = N, NE, E, SE, S, SW, W, NW arcs (i.e. all of them)
  • Target Volume of Effect = NE, SE, SW, NW arcs

  • Player Only and Miscellaneous Icons = Empty Nimbus (no arcs)

  • Summons or Drops = S arc
  • Summons or Drops, Volume of Effect = SE, S, SW arcs

Things like whether the Power is an Affect Foe or Affect Ally would not be incorporated into the Nimbus, so something like a Footstomp Click (PBVoE) and Leadership: Tactics Toggle (PBVoE) would use the exact same Nimbus configuration, even though one affects Foes only while the other affects Allies only. The Foe vs Ally distinction would then be left to the tooltip on mouse hover data readout.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
you want to see it as an

you want to see it as an approximation of the cone's Augmented / Refined degrees?

...

edit: 75%, 100%, 125%, 200% using the Slices in place of Triangles.

Empyrean
Empyrean's picture
Offline
Last seen: 19 min 21 sec ago
11th Anniversary Badge
Joined: 03/16/2014 - 07:51
I think my problem seeing it

I think my problem seeing it (and I'm not visually impaired. If anything I'm very slightly nearsighted, so seeing fine details is relatively easy for me) is the lack of contrast in the colors being used.

Izzy, if you get a chance, could you try a mock up with more contrast to see if that helps at actual (small) scale to make out the nimbus at a glance?

PS-- I know design is a larger problem than just selecting colors, but I just wonder if lack of contrast or design is what's making it hard to "read at a glance".

FIGHT EVIL! (or go cause trouble so the Heroes have something to do.)

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Empyrean wrote:
Empyrean wrote:

I've been following--been no need for me to comment because you are all eight steps ahead of me

I'll stop doing that ... eventually ...

Empyrean wrote:

I do want to mention that while the ideas here are all great and make perfect sense, I'm having a devil of a time visually making them out at scale.

Hence why I keep turning to Izzy with requests for examples and mock-ups so that we can SEE and intuitively grasp all of the visual interactions all at once. And you're quite right, things that work just fine at large scale don't work so great at small(er) scales, but you might not be able to appreciate that without being able to SEE the examples and thus be able to grasp very quickly what the problem is. Picture = 1K words (plus!) and all that.

Also, this kind of rapid prototyping is very nearly exactly what you want, where you take an inspiration, do a quick model of it, check what you've got, test it for "can this be done better?" inspiration(s), make changes that come to mind ... wash, rinse, repeat ... and repeat and repeat and repeat ... until you can hone in on What Works Best for what you're trying to convey through a very spare and simple visual language.

Tannim222 wrote:

While using triangle points seems like a good idea to indicate directional queue, if you can't tell st a glance because of size, the information is useless.

Agreed. The triangle directions seemed like it would work nicely at first, but in fact turned into an evolutionary dead end because they demanded a size scaling too large to be useful in the application we're going for. But without SEEING what it looks like in practice (as opposed to just theory) it was hard to know that. So the experiment had value. This is why rapid prototyping like this in an iterative process where you can just about WATCH the evolution happening, post by post, where ideas get tried and discarded is so incredibly valuable. It allows everyone participating right now to very nearly watch in real time as the design evolves right in front of us as we hone in on What Works Best for what we need to communicate in a very limited amount of space without resorting to Information Overload.

Tannim222 wrote:

Instead, if the nimbus where the flatter borders, color coding (and even customizable color coding) can be used may be much easier to understand at a glance at smaller scales.

Customizable color coding of the Arc Bars would seem the most prudent option. If Powers have 3 colors associated with them in the Avatar Builder, you could relatively easily choose 1 of those colors to be the Arc Tint of the Nimbus and then let the other 2 colors control the Art Tint of the central icon area. That way, all of the colors used for the Power Icons "tie in" to what the Powers look like when animated. You could even have a UI element of the Avatar Builder that's devoted to Powers which allows the assignment of which colors tint what to keep things all tied together in a neat(er) UI package.

Tannim222 wrote:

North Bar blinking Red means single target hostile intermittant effectmover time (dot).

** ABSOLUTELY NOT **

Under NO Circumstances OF ANY KIND should there be an element of the Powers Icons that blinks. The "blink tag" in HTML is one of the absolute WORST things you can ever do or include in the design of a web page, and for similar reasons should NEVER be incorporated into something like Power Trays which need to be "always on" in order to be useful.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

you want to see it as an approximation of the Cone's Augmented / Refined radius?
...

Take a look at my post 131 to get a first inkling of why including the arc width info in the Nimbus would ultimately be a Bad Idea™. This is, unfortunately, another example of something that works fine a large scales, but rapidly diminishes in usefulness at smaller scales. Arc width for Cones is really something you want to leave to the tooltip on mouse hover over the icon.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
Red,

Red,

agreed. Just had to see what it might look like. :D

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Planet10 wrote:
Planet10 wrote:

Ok, now that the Nimbus functionality has been explained & verified we can move forward.

/em chuckle

Already ahead of you ... ^_~

Planet10 wrote:

I prefer the Circle shape as opposed to the Octagon shape

Agreed. There is a visual ... cleanliness ... to the circle shape that will be particularly valuable when the icons are "tiled" together in Power Trays.

Planet10 wrote:

Alternately, why not just segment the entire outer region of the rim into rectangular arcs and have those arcs be the Nimbus and highlight them as appropriate? You could use all of the old conventions from CoX for single target, cone, PBAoE, etc.

Because arc segment highlights like that can't be used for IN/OUT directional info like Triangles can. Fortunately(?), the directions of triangles has proven to be a "bust" when scaled down and so the next best thing to reach for is the arcs, like you said, if dispensing with any sort of Foe vs Ally demarcation of which "way" the Powers are meant to be used.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

Red,
agreed. Just had to see what it might look like. :D

Understood!

Yet another example of needing to SEE it to know it isn't going to work out as planned. To quote Bryce Lynch from the Max Headroom TV series (back in 1987) ...

"There are no failed experiments. There's only more data."


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
Redlynne wrote:
Redlynne wrote:

** ABSOLUTELY NOT **

Under NO Circumstances OF ANY KIND should there be an element of the Powers Icons that blinks. The "blink tag" in HTML is one of the absolute WORST things you can ever do or include in the design of a web page, and for similar reasons should NEVER be incorporated into something like Power Trays which need to be "always on" in order to be useful.

Understood. However, one of the reasons for implementing the nimbus was to also convey what type of power effects are connected to the power. I was only trying to provide an example of that. Personally, I'' of the opinion in that matter the nimbus is trying to reach too far and a more lomited scope of immediate information is all that is necessary.

I ageee that we don't need to try and cover varying cone degrees. You should only need to know if it is a cone or not. The area effect can then be displayed visually on the screen on mouse over.


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:


Seeing these reinforces the notion that as the scale decreases, you need to devote larger sections of the arc to conveying information, lest the clarity of what you are trying to convey be lost as the size of the icon decreases.

What you've done here is divide up the arc circle into 24 sections. What I get out of looking at these icons is that devoting less than 1/12th of a contiguous arc to anything yields information that is too easy to miss, and that potentially even that amount is cutting it too fine/small. For that reason, going with 1/8th arc sections would seem to the the prudent choice, since it makes things plenty "clear" when just glancing at the icons. This is because you never want to be looking at an icon and trying to decide if the arc being covered is 3 sections or 5 sections out of 24, since those kinds of fine details start becoming more ambiguous as the scale of the icon gets reduced.

Even though I'm asking for prototyping to happen here at 128x128 scale, I fully expect a 64x64 scale to be employed for the actual 100% scale setting in the production "default" UI by many Players. Because of that, there's a limit to how finely detailed we can "afford" to get with either the art inside the icon or the Nimbus surrounding it.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Tannim222 wrote:
Tannim222 wrote:

I agree that we don't need to try and cover varying cone degrees. You should only need to know if it is a cone or not. The area effect can then be displayed visually on the screen on mouse over.

That's an excellent point. All the Nimbus needs to do is make clear the Cone? (Y/N) distinction. As for the shape of the Volume of Effect (you'll notice I prefer not to use Area of Effect since we're talking about a 3D game instead of a 2D game), Star Trek Online does something similar. On mouseover of weapons in the Space UI, a graphic around the ship appears, indicating the firing arc of that weapon. The graphic in STO is "flat" and kept in the plane of the ship's orientation, and goes everywhere from 360º down to 45º.

If you could rig something akin to this for Cones in City of Titans, that would be remarkably helpful ... since you could get the actual Xº numeric info from the tooltip, but also SEE on your screen just how wide that arc is (and how long it is?) in a visual way.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Tannim222 wrote:
Tannim222 wrote:

Personally, I'm of the opinion in that matter the nimbus is trying to reach too far and a more limited scope of immediate information is all that is necessary.

Me too. You can see even in my own posts that I've been scaling back my ambitions for what to "make obvious" in the Nimbus in an attempt to keep its visual language functionality as "spare" as possible in order to meet the mandate of what I was talking about all the way back in Post 99 of this thread ...

K eep
I t
S imple
S tupid

Oh and Tannim222, my apologies for ... uh ... hijacking ... this thread the way that I have in the past day or so.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
pie cut in 8th's

pie cut in 8th's
50%, 100%, 150%

not too long till we start making it look like that old kids game: ;)

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Redlynne wrote:
Redlynne wrote:

Planet10 wrote:
Ok, now that the Nimbus functionality has been explained & verified we can move forward.
/em chuckle
Already ahead of you ... ^_~

Rein it in a bit before you get too far ahead.

Tannim222
Tannim222's picture
Offline
Last seen: 9 hours 33 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
Quote:
Quote:

If you could rig something akin to this for Cones in City of Titans, that would be remarkably helpful ... since you could get the actual Xº numeric info from the tooltip, but also SEE on your screen just how wide that arc is (and how long it is?) in a visual way.

That's the idea of what I'd like to see happen. The nimbus around the icon indicates single target, cone, or area effect. The mouse over shows the actual area of effect (optional of course).

Quote:

Me too. You can see even in my own posts that I've been scaling back my ambitions for what to "make obvious" in the Nimbus in an attempt to keep its visual language functionality as "spare" as possible in order to meet the mandate of what I was talking about all the way back in Post 99 of this thread ...

K eep
I t
S imple
S tupid

Yup. It is one of the guiding principles of good UI design, keep it simple. The more a player has to look ar and learn about the UI the more you risk taking away from the game.

Quote:

Oh and Tannim222, my apologies for ... uh ... hijacking ... this thread the way that I have in the past day or so.

Don't apologize for thay. If anything I found the current vein of this thread useful. Although I could take the apology for giving me more squirrels to chase (but I know that's more my fault than yours ;) ).


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Redlynne wrote:
Redlynne wrote:

Planet10 wrote:
Alternately, why not just segment the entire outer region of the rim into rectangular arcs and have those arcs be the Nimbus and highlight them as appropriate? You could use all of the old conventions from CoX for single target, cone, PBAoE, etc.
Because arc segment highlights like that can't be used for IN/OUT directional info like Triangles can. Fortunately(?), the directions of triangles has proven to be a "bust" when scaled down and so the next best thing to reach for is the arcs, like you said, if dispensing with any sort of Foe vs Ally demarcation of which "way" the Powers are meant to be used.

As mentioned, the IN/OUT nature of triangles could end up being marginally useful to visually represent Nimbus. There is no conceptual need to represent a IN/OUT triangle to demarcate Foe vs Ally. You aren't going to heal the enemy, nor are you going to toss a grenade at your own team.

The 24 slice mockup looks good as a starting point (especially if the representation of a cone is binary). Swapping to 8 slice will be extremely hard to convey all of the necessary Nimbus states.
What is the hesitation with trying to represent the various patterns in the Nimbus ring based on something like what was used in CoH?
If it is a contrast issue, just make the ring itself dark and the highlight a color that really stands out (black/yellow or something).

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
this configuration seems the

this configuration seems the least distasteful at 50% for myself.

50%, 75%, 100%, 150%

30° for: N, S, E, W
20° for: others

Huckleberry
Huckleberry's picture
Offline
Last seen: 1 day 16 hours ago
Joined: 01/03/2016 - 08:39
This has been enjoyable to

This has been enjoyable to follow. Great job with the rapid prototyping, Izzy.

At this point, I feel it should be mentioned that the skeumorphic design with the reflections and shadows is now starting to obstruct clarity. Keep the nimbus 2D so we can see the information being displayed at full design contrast. That reflection off the top is just reducing the contrast below useful levels.


I like to take your ideas and supersize them. This isn't criticism, it is flattery. I come with nothing but good will and a spirit of team-building. If you take what I write any other way, that is probably just because I wasn't very clear.
Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
I'm going to have to try and

I'm going to have to try and do another set of mock-ups using my entirely inadequate tools (basically Preview for OS:X) to make things clear with simple geometry. Unfortunately, that's going to have to wait for this evening about 11-12 hours from now.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
Huckleberry wrote:
Huckleberry wrote:

This has been enjoyable to follow. Great job with the rapid prototyping, Izzy.
At this point, I feel it should be mentioned that the skeumorphic design with the reflections and shadows is now starting to obstruct clarity. Keep the nimbus 2D so we can see the information being displayed at full design contrast. That reflection off the top is just reducing the contrast below useful levels.

how about now:

50%, 75%, 100%, 150%

it feels like, eventually, it will wind up looking close to the old CoH/V design, just with a wider ring border. :<

Empyrean
Empyrean's picture
Offline
Last seen: 19 min 21 sec ago
11th Anniversary Badge
Joined: 03/16/2014 - 07:51
This is getting much easier

This is getting much easier to "read at a glance". You are all awesome and this is really fricking cool to watch unfold.

Izzy wrote:

it feels like, eventually, it will wind up looking close to the old CoH/V design, just with a wider ring border. :<

Not fixing that which is not broken is good design--and especially fitting for a spiritual successor.

FIGHT EVIL! (or go cause trouble so the Heroes have something to do.)

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Empyrean said it before I

Empyrean said it before I could.

Ain't broke = Don't "fix"


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Felix
Felix's picture
Offline
Last seen: 10 months 1 week ago
Developerkickstarter11th Anniversary Badge
Joined: 11/04/2013 - 20:45
Izzy wrote:
Izzy wrote:

Huckleberry wrote:
This has been enjoyable to follow. Great job with the rapid prototyping, Izzy.
At this point, I feel it should be mentioned that the skeumorphic design with the reflections and shadows is now starting to obstruct clarity. Keep the nimbus 2D so we can see the information being displayed at full design contrast. That reflection off the top is just reducing the contrast below useful levels.
how about now:
50%, 75%, 100%, 150%

it feels like, eventually, it will wind up looking close to the old CoH/V design, just with a wider ring border. :<

Now we are gambling! Or am I the only one that looks at these and thinks "Poker Chips"

Regards,

Felix.

Know thy users, for they are not you.
"Preliminary optimization is the root of all evil." -Knuth
Coding Lead
a.k.a. Mr Sigma, Mr. Stochastic, Balancing Act, The Oncoming Storm

Huckleberry
Huckleberry's picture
Offline
Last seen: 1 day 16 hours ago
Joined: 01/03/2016 - 08:39
It is easier to see, for sure

It is easier to see, for sure. I'm glad you retained the 3D effect on the button, because while Skeumorphism may be on its way out of favor as a UI concept, I still like it the tactile feel of it. I like knowing what is an interactible object and what is just a display. Besides, your KISSUI button depresses make good use of the 3D effect.

Having said that, however, if that button glare also gets in the way of seeing the icon underneath, we may have to do something with it, too. For now though, it looks perfectly legible.

At the smallest scale those little green dots become lost. Are they supposed to carry information?


I like to take your ideas and supersize them. This isn't criticism, it is flattery. I come with nothing but good will and a spirit of team-building. If you take what I write any other way, that is probably just because I wasn't very clear.
avelworldcreator
Offline
Last seen: 1 hour 42 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
Huckleberry wrote:
Huckleberry wrote:

It is easier to see, for sure. I'm glad you retained the 3D effect on the button, because while Skeumorphism may be on its way out of favor as a UI concept, I still like it the tactile feel of it. I like knowing what is an interactible object and what is just a display. Besides, your KISSUI button depresses make good use of the 3D effect.
Having said that, however, if that button glare also gets in the way of seeing the icon underneath, we may have to do something with it, too. For now though, it looks perfectly legible.
At the smallest scale those little green dots become lost. Are they supposed to carry information?

I can change the glare effect as needed. We are using a 30 degree counter-clockwise highlight here (Izzy has it at the 12:00 position). I build images in layer elements so I can work things independently.

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

cloganart
cloganart's picture
Offline
Last seen: 19 hours 50 min ago
Developer
Joined: 12/12/2016 - 00:10
The deal here is to keep the

The deal here is to keep the focus not on the UI but on the game. UI is a solution at this point.

. As the UI buttons stand by themselves alone, they will look cooler with 3D FX of emboss and glow but once put together in the end, when you are making a beautiful world in Unreal Engine 4 and your character is looking like Batman from Arkham Knight quality , over-detailed exagerrated 3D glowy super stroked UI designs will overcrowd and frankly distract everything from the beauty of your creation.

Charles Logan
www.cloganart.com

avelworldcreator
Offline
Last seen: 1 hour 42 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
cloganart wrote:
cloganart wrote:

The deal here is to keep the focus not on the UI but on the game. UI is a solution at this point.
. As the UI buttons stand by themselves alone, they will look cooler with 3D FX of emboss and glow but once put together in the end, when you are making a beautiful world in Unreal Engine 4 and your character is looking like Batman from Arkham Knight quality , over-detailed exagerrated 3D glowy super stroked UI designs will overcrowd and frankly distract everything from the beauty of your creation.

Well, some parts of the UI do need to stand out (like health levels!) but pushing things to the edge of the screen helps with taking it out of the central focus. But unless there is a definite reason to do so overly "shiny" can be a really bad idea.

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Felix wrote:
Felix wrote:

Now we are gambling! Or am I the only one that looks at these and thinks "Poker Chips"

That's part of the reason why I want to use more solid arcs than this kind of "staccato beat" of blocks around the rim. It also gets harder to read as smaller scales (ever a problem, it seems). I'm going to do some more craptacular modeling here in Preview on my end which hopefully Izzy can take and quickly convert into Production Ready looking Icons for us as the next round of iteration.

I definitely want to try and get this stuff as "nailed down" as we can at this stage so as to prevent ... well ... something like this from happening when the game launches ... ^^;


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
avelworldcreator
Offline
Last seen: 1 hour 42 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
Redlynne wrote:
Redlynne wrote:

Felix wrote:
Now we are gambling! Or am I the only one that looks at these and thinks "Poker Chips"
That's part of the reason why I want to use more solid arcs than this kind of "staccato beat" of blocks around the rim. It also gets harder to read as smaller scales (ever a problem, it seems). I'm going to do some more craptacular modeling here in Preview on my end which hopefully Izzy can take and quickly convert into Production Ready looking Icons for us as the next round of iteration.
I definitely want to try and get this stuff as "nailed down" as we can at this stage so as to prevent ... well ... something like this from happening when the game launches ... ^^;

Just for the record the work area of our buttons is 52x52 pixels. The slot itself is 64x64 pixels. That's a 3-pixel margin at the edge of each slot. So if you want to play around with what a button might look like limit yourself to that area and see how it looks.

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Single Target = N arc
  • Single Target = N arc
  • Cones = NW, N, NE arcs
  • Target Volume of Effect = NE, SE, SW, NW arcs
  • Point Blank Volume of Effect = N, NE, E, SE, S, SW, W, NW arcs (i.e. all of them)

  • Player Only and Miscellaneous Icons = Empty Nimbus (no arcs)

  • Summons or Drops = S arc
  • Summons or Drops, Volume of Effect = SE, S, SW arcs

Here's what this looks like with my craptacular image editing tools. Ignore the black lines of the circle and octagon, since I left those in purely for easy reference to make what I'm doing abundantly clear. Instead, pay attention to the shapes of the green lines, which are supposed to be following the arc of the circle (but because of my lousy tools don't always do so). So ... in order sequence ...

Single Target

Cone

Target Volume of Effect

Point Blank Volume of Effect

Player Only and Miscellaneous Icons (note that no arcs are used)

Summons, Single Target

Summons, Volume of Effect

Izzy, would you be so kind as to provide us with 7 Icons at 64x64 as well as 128x128 scale making use of the Nimbus Arc Shapes that I've provided you with here? I have a very strong suspicion that as soon as people paying attention to this thread can see the UI design I'm talking about here, Everything Will Fall Into Place™ and all will suddenly become Clear as to how this is going to work. We just need you to make the "pretty" Icons for us so that we can see the whole thing presented in a "unified" fashion.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Doctor Tyche
Doctor Tyche's picture
Offline
Last seen: 21 hours 40 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 11:29
Redlynne wrote:
Redlynne wrote:

Felix wrote:
Now we are gambling! Or am I the only one that looks at these and thinks "Poker Chips"
That's part of the reason why I want to use more solid arcs than this kind of "staccato beat" of blocks around the rim. It also gets harder to read as smaller scales (ever a problem, it seems). I'm going to do some more craptacular modeling here in Preview on my end which hopefully Izzy can take and quickly convert into Production Ready looking Icons for us as the next round of iteration.
I definitely want to try and get this stuff as "nailed down" as we can at this stage so as to prevent ... well ... something like this from happening when the game launches ... ^^;

This is why we went with alternating dot / triangles

Technical Director

Read enough Facebook and you have to make Sanity Checks. I guess FB is the Great Old One of the interent these days... - Beamrider

Radiac
Radiac's picture
Offline
Last seen: 2 days 18 hours ago
kickstarter11th Anniversary Badge
Joined: 10/19/2013 - 15:12
I think in Izzy's examples,

I think in Izzy's examples, the fact that the rim of the button is a bright-ish metallic color is part of the problem. Other bright things, like the green and yellow Nimbus effects don't really "pop" in contrast to the metal. I think you want darker rims to the buttons with brightly colored nimbus effects contrasting off them. If you did that, it might even be enough contrast to bring the triangles back, I think.

R.S.O. of Phoenix Rising

Interdictor
Interdictor's picture
Offline
Last seen: 1 hour 11 min ago
11th Anniversary Badge
Joined: 08/22/2013 - 05:26
Radiac wrote:
Radiac wrote:

I think in Izzy's examples, the fact that the rim of the button is a bright-ish metallic color is part of the problem. Other bright things, like the green and yellow Nimbus effects don't really "pop" in contrast to the metal. I think you want darker rims to the buttons with brightly colored nimbus effects contrasting off them. If you did that, it might even be enough contrast to bring the triangles back, I think.

I agree - the metallic look and other fx might look really nice when zoomed in, but at the scales the buttons/icons will display the fine details will likely be lost. And yes, higher contrast will make the fine details more visible.

Great job on those icons Izzy!

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
50% 75% 100%

50%

75%

100%

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Izzy wrote:
Izzy wrote:

There we go ... that's starting to look like something that is both obvious and easy to read at a glance, with enough differentiation between them all to make disambiguation very easy to do. The visual language for the Nimbus is also simple enough (a mere 7 variations) that it isn't a tremendous chore to learn and get used to. The 50% scaling for 64x64 icons is looking just about exactly right for a Power Tray. The information is "dense" but still visible and easily read, with dramatically lowered opportunities for misinterpretation due to different Nimbus arrangements being "too close" to each other to tell apart.

I know that everyone else gets a vote/voice on this, but right now, I'm feeling confident enough in this Design Aesthetic to think that this would make a decent "solution" to the Icon Shape and Nimbus visual language issues in a way that keeps things flexible enough for anything else in the game. If this Proposal is adopted for production development, the next thing to do would be to decide what iconography to use in the central "art area" of the icon. Just to reiterate, I'm thinking it would be best to keep the art in the center as being something "iconic" rather than being "picturesque" and thus leaning more towards the Simple than the Overdone.

What we're doing here is something inspired by the City of Heroes UI, rather than a copy/paste of it. All we have to do is not copy the exact same iconography that City of Heroes used for the "art area" of our icons.

So ... with all of that said ... who would want their Power Trays in City of Titans to look essentially like this (but with personalization/customization options)?


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Looks nice Izzy.

Looks nice Izzy.

I think the 3D effect on the Nimbus ring detracts from the visual. The 'single target' Nimbus highlight is too vague for my tastes, I could interpret that as a cone too. It is hard to mistake the second option (120 deg) as anything other than a cone, but the arc feels too wide to me.

My brain wants delimiters between the arcs so I know what is being emphasized. Knowing upfront that the white part is the highlight allows me to interpret it correctly. If I didn't know that, I would feel that the gray part was the 'highlight' since there is a white ring separator around the button.

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Redlynne wrote:
Redlynne wrote:

I know that everyone else gets a vote/voice on this, but right now, I'm feeling confident enough in this Design Aesthetic to think that this would make a decent "solution" to the Icon Shape and Nimbus visual language issues in a way that keeps things flexible enough for anything else in the game.

My vote is that the Nimbus language is not complete. I believe the graphical language is a little ambiguous when only 8 wedges are in play. I would prefer boosting it to 24 and be selective about which patterns are used to communicate the Nimbus language. If possible, exclude a few arcs for the "dots" to be displayed (maybe east/west regions).

Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Redlynne wrote:
Redlynne wrote:

the next thing to do would be to decide what iconography to use in the central "art area" of the icon. Just to reiterate, I'm thinking it would be best to keep the art in the center as being something "iconic" rather than being "picturesque" and thus leaning more towards the Simple than the Overdone.

I am happy with the button shape being a circle. It lends itself to implied arc language of the Nimbus. I think this thread only really wanted to cover the shape of the button, but the added complication of the Nimbus & possibly "dots" forced further conversation.

Why do we need to talk in detail about the icons in the buttons themselves at this point? Is Dev that hard up for design input or is Redlynne just over eager? Do we know for sure what powers will exist in each powerset?

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
Planet10,

Planet10,

so.. blur the gray so its like a shadow?

ex: one on left

50%, 100%, 200%


Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Izzy wrote:
Izzy wrote:

Planet10,
so.. blur the gray so its like a shadow?
ex: one on left

I think I didn't explain myself clearly. That is another approach that could possibly work, it brings more focus to the button and highlighted Nimbus. My gut says the blur/opacity is excessive and might get annoying over time, but I don't think I would discount that approach completely.

What I meant was that the gradient on the white 'highlighted' portions of the Nimbus does not make it easier to recognize & identify quickly (especially since the gradient progresses towards the de-emphasized color >> gray). The button has 3D-ish qualities (glassy lighting effects) and the ring has a uniform gradient (high to low from center to outer edge). How bad would it look if there was no gradient on the Nimbus ring?

Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
left one... 50%, 100%, 200%

the left one...

50%, 100%, 200%


Planet10
Planet10's picture
Offline
Last seen: 6 hours 25 min ago
Joined: 03/23/2016 - 17:21
Thanks Izzy, I like the

Thanks Izzy, I like the Nimbus highlight without the gradient. I still don't know if I like or hate the blur on the remainder of the ring. I might have to see what the rest of the button bar looks like (but that is probably outside of the scope of this thread).

Redlynne
Redlynne's picture
Offline
Last seen: 1 month 6 days ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Planet10 wrote:
Planet10 wrote:

I think the 3D effect on the Nimbus ring detracts from the visual.

To be honest, that's more a matter of Color Choices than anything else. If the colors selected have a low contrast, the Nimbus will be harder to read. The colors used for the Nimbus is not going to be a One Size Fits All Solution for this. That's why it's important to be able to adjust what colors are getting used for the Nimbus, up to and including whether to use a Matte or a Metallic Reflective color scheme so as to tie in with the "glass cabochon" look of the Art Area of the icon. It's kind of like how for some characters, use of the SG Color Scheme just doesn't look good on them. Some characters have color schemes that are meant to be dark (and brooding?) while others have color schemes that are meant to be brighter (and more "cheerful"?) because that suits them. Batman wears blue/black for a REASON, and just looks stupid in gold/white (or worse, cotton candy pink).

Planet10 wrote:

The 'single target' Nimbus highlight is too vague for my tastes, I could interpret that as a cone too. It is hard to mistake the second option (120 deg) as anything other than a cone, but the arc feels too wide to me.

So 45º is too small but 135º is too wide? Some people are just never satisfied.

The "visual language" I've devised for this is (effectively) "New" and so you aren't accustomed to seeing it yet. You haven't internalized (yet) that "seeing THIS means THAT" because the icons using it were (literally) only made yesterday. I think you're just going to have to trust me when I say that if you see it "often enough for long enough" that you will, in effect, "pick up on the visual lingo" and not keep having this problem.

The alternative would be to use 60º for the Single Target and the Drop/Summons, Single Target (so slightly wider) ... and then use 120º for the Cone and the Drop/Summons, Volume of Effect (so slightly narrower) ... while keeping their respective top/bottom positioning the same. That "broadens" the Singles and "narrows" the Cones (in effect), which then brings them closer together in appearance and increases the risk of ambiguous appearances. Right now, the two have a 1:3 ratio of arc distance, but a 1:2 ratio might work just as well and look cleaner and fit more in line with expectations. It'll require Izzy to make up a new set of icons for us to test the proposition.

And if you are going to do that Izzy, I'd recommend changing the Target AoE from using 8 alternating arcs of 45º to instead using 6 alternating arcs of 60º instead, so as to keep things consistent. Probably best to have the colored "ON" arcs in the upper portion of the circle so as to align with a radiation symbol.

Note that doing this would essentially amount to switching from a "static" octagon arc arrangement to a "rotating" hexagon, where sometimes the points are vertically aligned and sometimes the points are horizontally aligned, depending on which Nimbus symbol you're trying to present.

So, Izzy ... when you have the time, would you be so kind ...?

Oh and if we're still tinkering with stuff, I'm thinking that I underestimated the amount of space we'd need to be putting between the Art Area and the Nimbus Ring. Currently that's a mere 4 pixels (for a 2 pixel wide ring all the way around at 128x128). Could this be doubled in width to 8 pixels (so a 4 pixel wide ring) around the Art Area in the center and "reclaiming" that space from the Nimbus Ring, making the Nimbus "thinner" in effect? If we're using colored arcs to convey information, we don't need to "reserve" as much area around the Nimbus for IN/OUT directional info for Triangles. When scaled down to 64x64, this would then make it easier/give more room for things like an "orbiting light" to indicate that a Toggle is ON, and quite possibly also help with making clear(er) the "on/off" colored arcs of the Nimbus itself, clarifying their information purpose, by not making them so thick. This is essentially a compositional "weighting balance" change request here, Izzy.

Planet10 wrote:

My brain wants delimiters between the arcs so I know what is being emphasized. Knowing upfront that the white part is the highlight allows me to interpret it correctly. If I didn't know that, I would feel that the gray part was the 'highlight' since there is a white ring separator around the button.

That's all color palette choices which can be made later and be subject to customization by the Player. Right now, it's important to get the SHAPES nailed down right so that the visual language for the Nimbus is as clear and unambiguous as we can make it.

Planet10 wrote:

My vote is that the Nimbus language is not complete. I believe the graphical language is a little ambiguous when only 8 wedges are in play. I would prefer boosting it to 24 and be selective about which patterns are used to communicate the Nimbus language. If possible, exclude a few arcs for the "dots" to be displayed (maybe east/west regions).

To which my response is ... don't let the PERFECT be the enemy of the GOOD ENOUGH.

I think that your recommendation of switching from combos of arcs of 45º to arcs of 60º, thereby switching from octagon to hexagon, for the Nimbus has merit ... but going to 24 bits of ON/OFF is not practical for a consistent and easily read visual language, particularly when scaled down to 64x64 pixels. If Izzy has the time, he could try and prove it to you with demonstration mock ups, but I honestly think he's got better things to do than prove to you that 24 bits of ON/OFF is an evolutionary dead end. It's one of those things that certainly SOUNDS NICE when you put it in text, but would wind up being way more effort and cumbersome to use if put into practice.

You can either trust me on this one, or have it your own way.

Planet10 wrote:

I am happy with the button shape being a circle. It lends itself to implied arc language of the Nimbus. I think this thread only really wanted to cover the shape of the button, but the added complication of the Nimbus & possibly "dots" forced further conversation.

Yeah, well ... "it's all connected" ... you see. You can't handle one (properly) without including the other. When it comes to UI design, you never want to create a situation where you've got a Left Hand No Talk Right Hand kind of deal in your UI visuals. They all need to ... harmonize ... with each other such that they look like they belong together. That way you wind up with a unified thematic that can be replicated easily/endlessly by the computer with clearly delineated points of customization (colors, etc.) that can be programmed with and around.

Planet10 wrote:

Why do we need to talk in detail about the icons in the buttons themselves at this point? Is Dev that hard up for design input or is Redlynne just over eager? Do we know for sure what powers will exist in each powerset?

More like I'm saying that the Open Source part of the "What Shape Do We Want?" discussion is nearing its natural conclusion and that once this part (the shapes involved) get nailed down it's going to be time to move on to the next problem ... which is deciding what goes into the Art Area in the center. That's just me "looking ahead" and anticipating what has to happen next after getting THIS part sorted out. What art gets used inside the icons is going to be a whole DIFFERENT discussion, and one that will probably not be quite so open as this one.

It's not that I'm overly eager as much as I'm thinking that "my work here is nearly done" and then it's going to be on to the next problem to find a solution for, which I very likely WON'T get to be a part of. Yes, ever since Post 99, this has looked a lot like the Redlynne Takes Over MWM in a conquest of design sort of way, but Good Ideas™ lie wherever you can find them, and sometimes you have to go through a lot of mistakes in order to find what you were really after. That's where rapid prototyping like we've done and having a willingness to experiment comes into play, so as to refine and EVOLVE the notions of what needs to be getting done and how you go about doing it can go through that Trial By Fire where you have a repeating cycle of inspiration/communication/test/review so as to hone in on What Works Versus What Doesn't.

Remember, the whole point of this exercise was to find out WHAT WORKS for the UI that Players of this game are going to be dealing with every single time they log into the game. Finding that is going to require a winnowing process that involves iterative testing of ideas and proposals. I waited a "decent" amount of time (98 posts, actually) before tossing my hat full of copper pieces into the (Nimbus) ring and got to work on a comprehensive solution for the problem. I'm more concerned with seeing Good Ideas™ rise to the top and win out over other options than I am invested in seeing that *MY* Ideas (exclusively) are the only ones that I will accept or consider. That's because what's being done here isn't about ME ... it's about making the best game possible for ALL OF US to enjoy for many years to come.

Planet10 wrote:

Thanks Izzy, I like the Nimbus highlight without the gradient. I still don't know if I like or hate the blur on the remainder of the ring. I might have to see what the rest of the button bar looks like (but that is probably outside of the scope of this thread).

I'll agree that the blurred/smoky Nimbus is Not Helpful. But this is indeed another case where you need to see ALL of the moving parts and pieces assembled IN OVERALL CONTEXT to come to an Informed Decision about whether what you're doing is the best direction you could be going. That's why a rapid prototyping process where you can SEE the evolution happening, step by step, over many iterations where ideas are tested and discarded, is so incredibly helpful in honing in on what needs to happen in order to Get It Right™.

Fortunately, it feels like we're getting mighty close to finalizing the shapes and appearance of the icons that will be getting used and which will be such an important part of the game. You want the icons to be informative without them becoming distracting, which is a tricky balance to try to straddle. I'd like to think we've made some impressive strides towards that goal though, to the point where we're almost there ... but not quite there yet.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.
Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
sorry, the tiny orbiting

sorry, the tiny orbiting black circles might not look good at lower resolutions, still.. had to try. ;)

50%, 100%, 200%


Izzy
Izzy's picture
Offline
Last seen: 1 year 3 weeks ago
kickstarter11th Anniversary Badge
Joined: 10/09/2013 - 11:09
bigger and a bit translucent

bigger and a bit translucent

50%, 100%, 200%


avelworldcreator
Offline
Last seen: 1 hour 42 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
Redlynne wrote:
Redlynne wrote:

Izzy wrote:

There we go ... that's starting to look like something that is both obvious and easy to read at a glance, with enough differentiation between them all to make disambiguation very easy to do. The visual language for the Nimbus is also simple enough (a mere 7 variations) that it isn't a tremendous chore to learn and get used to. The 50% scaling for 64x64 icons is looking just about exactly right for a Power Tray. The information is "dense" but still visible and easily read, with dramatically lowered opportunities for misinterpretation due to different Nimbus arrangements being "too close" to each other to tell apart.

Actually the size limit is 52x52 pixels. Yes, it makes a difference.

I know that everyone else gets a vote/voice on this, but right now, I'm feeling confident enough in this Design Aesthetic to think that this would make a decent "solution" to the Icon Shape and Nimbus visual language issues in a way that keeps things flexible enough for anything else in the game. If this Proposal is adopted for production development, the next thing to do would be to decide what iconography to use in the central "art area" of the icon. Just to reiterate, I'm thinking it would be best to keep the art in the center as being something "iconic" rather than being "picturesque" and thus leaning more towards the Simple than the Overdone.
What we're doing here is something inspired by the City of Heroes UI, rather than a copy/paste of it. All we have to do is not copy the exact same iconography that City of Heroes used for the "art area" of our icons.
So ... with all of that said ... who would want their Power Trays in City of Titans to look essentially like this (but with personalization/customization options)?

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

avelworldcreator
Offline
Last seen: 1 hour 42 min ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
Izzy wrote:
Izzy wrote:

bigger and a bit translucent
50%, 100%, 200%

Try it at 52px by 52px. This is a hard limit to the size of the power icons.

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

Pages