Project Clarity: Tooltips

[RCIX]

Not to spam the forums or anything but...


I think the biggest issue I have with AI war right now is that the UI doesn't work so well in terms of clarity. Thus, I am starting a project of indeterminate size* which aims to show how the UI can be improved and clarified. The first thing I noticed was how wall-of-text the tooltips looked, like this:



Thus, i busted out my image tools (yay Photoshop!) and did this:


(added a couple of custom example negative attack mults and used immunities from laser or MLRS turrets)

In text summary:
 * Grouped related stats (resources, attack stats, immunities, defense+speed)
 * Added icons for health, speed, and build time (build time one is self-made, speed is half size bomber sprite with speed trails added behind, health is random icon i grabbed off the internet and shrunk way down as example =p)
 * Removed base speed and health (former just gone as it doesn't seem to be that useful, latter rolled into health)
 * Added separate column for bad attack mults vs good ones
 * Made tooltip less "hot-doggy" (looks like it used to be normal-ish tooltip then it extended)
 * Applied small/subtle separators between groups

I mainly want this to be a starting point for brainstorming better tooltip designs, so here's the photoshop PSD with everything in layers. It's kinda rough, but gets the idea across. I figured since an expansion was in progress now would be the time to propose a big tooltip change.

*may not be larger than this topic

[Minotaar]

I support this initiative!  Implementing it will probably get tricky, though.
What's missing from this mockup is the abilities area (30x Tractor Beam blahblah) and the description. Base speed is also necessary.

... wait, no, there's a problem. On 1024x768 this would take up more than half the screen  I'd love to have this, but it just can't be the only option.

[RCIX]

I support this initiative!  Implementing it will probably get tricky, though.
What's missing from this mockup is the abilities area (30x Tractor Beam blahblah) and the description. Base speed is also necessary.

... wait, no, there's a problem. On 1024x768 this would take up more than half the screen  I'd love to have this, but it just can't be the only option.

It's actually 580-something by 280something, more like a quarter vertically (and most of horizontal but tooltips already do that).

[Bognor]

Oh that's brilliant! 

I'll throw in an idea I've been meaning to Mantis for a while, though it doesn't quite fit RCIX's current proposed design.  Many ships have a gigantic list of immunities, most of which are common to its category of ship, such as Starship, Turret, or whatever.  Rather than make players search through the whole list to find anything noteworthy, it would be better if immunities were organised into clusters that were common to a category of ship.  For example, the immunities of the Bomber Starship are completely typical of starships.  So its immunity listing could read:

STARSHIP: Immune to Fusion Cutters  Armor Boosts  Tractor Beams  Reclamation  Paralysis Attacks  Nuclear Explosions  Being Insta-killed  EMPs


Better yet, use commas or linebreaks to aid parsing of multi-word phrases, and simplify "Being Insta-killed" to "Insta-kill":

STARSHIP: Immune to Fusion Cutters, Armor Boosts, Tractor Beams, Reclamation, Paralysis Attacks, Nuclear Explosions, Insta-kill, EMPs.


Any additional immunities not common to the category of ship could be handled like this, for the Cloaker Starship:

STARSHIP: Immune to Fusion Cutters, Armor Boosts, Tractor Beams, Reclamation, Paralysis Attacks, Nuclear Explosions, Insta-kill, EMPs.  Also immune to Sniper Shots.


The rare exception to a set could be handled like this, for the Neinzul Enclave Starship:

STARSHIP: Immune to Armor Boosts, Tractor Beams, Reclamation, Paralysis Attacks, Nuclear Explosions, Insta-kill, EMPs.  Also immune to Sniper Shots.  This starship is not immune to Fusion Cutters.


Categories of ships that could fit the capitalised word include STARSHIP, TURRET, SPIRECRAFT, GOLEM, and perhaps some convenient contrived categories such as IMMOBILE CONSTRUCTOR.

Edit: Looking at the screenshots below, I see the spacing is clear enough in-game that commas aren't needed.  It's just the wiki where parsing is difficult.

[RCIX]

I like that idea too. Something like this?



You'd need a good spot to explain immunity categories (and better naming than "Immunity Category/Immunities/Immunity Exceptions"), but I could definitely see that working so much better with a bit of shuffling around.

Oh, and I forgot about the description >.> Assume that is tacked on the bottom.

[Bognor]

I envisaged the category name ("STARSHIP" or whatever) supplementing, rather than replacing, a list of the immunities it represents.  It would help organise the immunities list and make patterns across ship types clearer.  I wouldn't want to make immunities any more opaque, as that would make this game less newby-friendly - exactly the opposite of what I'd hope to achieve.

[Minotaar]

I support this initiative!  Implementing it will probably get tricky, though.
What's missing from this mockup is the abilities area (30x Tractor Beam blahblah) and the description. Base speed is also necessary.

... wait, no, there's a problem. On 1024x768 this would take up more than half the screen  I'd love to have this, but it just can't be the only option.

It's actually 580-something by 280something, more like a quarter vertically (and most of horizontal but tooltips already do that).

I edited your tooltip into a 1024x768 screenshot. Looking at it I would definitely prefer the more compact old one, and that's even without the description.

[_K_]

Between compactness and proper structure, i'd pick compactness.

Here's whats wrong with your interface idea.

[RCIX]

Between compactness and proper structure, i'd pick compactness.

Here's whats wrong with your interface idea.

I did say it was a rough photoshop ^^ Most of that space can't be helped (it has to be there because of other sections that make a section of the tooltip be a certain width or height), but I can redesign the tooltip a bit so less of it crops up.

I support this initiative!  Implementing it will probably get tricky, though.
What's missing from this mockup is the abilities area (30x Tractor Beam blahblah) and the description. Base speed is also necessary.

... wait, no, there's a problem. On 1024x768 this would take up more than half the screen  I'd love to have this, but it just can't be the only option.

It's actually 580-something by 280something, more like a quarter vertically (and most of horizontal but tooltips already do that).

I edited your tooltip into a 1024x768 screenshot. Looking at it I would definitely prefer the more compact old one, and that's even without the description.

This is better I think:


but it still needs room for abilities and lore, as well as has a couple of empty spots (below resource bar could use something).

(I just want to make sure it's clear that those dividers need to be there in some form, if less ugly)

[TechSY730]

I know that the "denseness" of the UI combined with some iffy formatting and layout in some circumstances is something that has sort of been a stumbling block for newer players. However, I stink at UI design, so I couldn't really make any good suggestions.

Good to see someone with some actual skill start a discussion on this. These mockups look really nice.

[Draco18s]

No description or energy/resource/cap/build (I don't need this info most of the time)

Ship cap is actually listed twice.
You didn't take out the one in blue.

[NickAragua]

This is a great idea. Last time I tried to get a friend to play this game, the UI was a major stumbling block. A ship stat popup is a huge wall of text as it is currently, and pretty unreadable for a newbie.

Two minor comments:
1) Who really needs to see ship cost when mousing over an existing unit? All I really pay attention to is relative orders of magnitude.
2) If you're going to display ship cap, you may want to display current vs max.

Edit:
Also, don't bother displaying armor since it's currently useless! HA!

Another Edit:
What I'd love to see is an "I like books with pictures in them" version which will tell you with (a very limited number of) icons some basic characteristics of a ship. It would satisfy the compactness and brevity requirement certainly.

[Draco18s]

What I'd love to see is an "I like books with pictures in them" version which will tell you with (a very limited number of) icons some basic characteristics of a ship. It would satisfy the compactness and brevity requirement certainly.

This might help.

[doctorfrog]

One thing I'd say that as a moderately experienced user, I'd keep as in the original, is the layout of the metal/crystal/power requirements. Why? Because they already mirror the layout of the top resource bar anyway. It's a small detail, but it makes it easy to scan.

And what else makes that particular line easy to scan is:
- there is a tiny, but distinct icon next to each m/c/p stat
- each stat is differently colored from the others

I've actually gotten used to the tooltips as they are, but that doesn't mean that they can't be improved. If I have some time this weekend I might take a whack at a prototype myself. The pace of development moves fast, hope I can get to that before the conversation closes!

e: Nice find, Draco!

[doctorfrog]

My free icon contrib:

http://p.yusukekamiyamane.com/

These are mostly E-Commerce and web icons, but they are free with attribution (CC 3.0) and free to "remix" or edit to your needs. Best bit is that they're very well designed 16/16 icons that are very legible.