Helptext card redesign?

[paulirish]

There's some really exciting things that could happen if we redesign the content of the helptext popup card when selecting a unit. That said, this would take the design farther away from the in-game tree.

For example, here's a possible before and after:

I have this online here: https://paulirish.github.io/aoe2techtree/ (from a branch back in April)

---

@exterkamp and I explored a few more ideas in this doc: https://docs.google.com/document/d/1jgDrIsBGoJZfTVcapuh9E-3yZAk5OyBFfuqTA8cJ1fI/edit

eg, more use of icons:

and linking to buildings where the upgrades are available (though ideally, do #61)

I'm curious if folks are interested in exploring these kinds of ideas. If so, I figure we can debate the UX a bit before I put up a PR for review?

[HSZemi]

Thank you for immediately presenting a visual and a working POC implementation!

Since the pop-up already deviates a lot from the original content-wise, I feel like improving the layout is no big deal.

Things I immediately like:

• The big unit/building/tech names
• Using icons instead of letters for the costs
• The more compact and clearly arranged layout of the information
• Navigating to buildings somehow by clicking their names (maybe not the blue colour though)

Thing to keep in mind:

• We're supporting 16 languages now, any string magic we do must work in all of those (but if a small thing breaks because the language file from the original game is botched in that place, I am totally fine with that)

Things I am unsure about:

• The icons for HP, attack, etc. are nice, but leave a lot of empty space around those stats. It's not as neat as it could probably be.
• The use of "obscure" icons, like the idea to replace "Strong vs." and "Weak vs." with icons. I think the actual text works better in those instances.
• Maaaaybe there's space for the text next to the HP etc. icons as well, instead of having it as a tooltip? Just handwaving here :open_hands:
• I do not know if Attacks with value 0 do have any relevance in the game. The same goes for Armours with value 0. The answer might be different for the two categories. If they are relevant (like "if the value is missing, a ram does X damage, but if it is 0 then a ram does Y damage), the information should be there. Irrelevant values can go of course.
• Generally, I would prefer to show information before data, as long as that does not hide other information that could be extracted from the data. Example: Displaying "Attack Bonuses: +3 vs Spearmen" feels better than dumping the Attacks values list, but it now hides the fact that a Crossbowman deals pierce damage, whereas for example a Kamayuk or a Mameluk deal melee damage at range.

[paulirish]

Thanks very much for the thoughtful and thorough response. :D

Big +1 to your response. I'm happy that someone with such concerns for UX is the BDFL of the project

[...]

Things I am unsure about:

• The icons for HP, attack, etc. are nice, but leave a lot of empty space around those stats. It's not as neat as it could probably be.

True.

• Maaaaybe there's space for the text next to the HP etc. icons as well, instead of having it as a tooltip? Just handwaving here 👐

Yup was thinking the same thing.

• The use of "obscure" icons, like the idea to replace "Strong vs." and "Weak vs." with icons. I think the actual text works better in those instances.

Yeah.. Consistent placement in the layout may be a better way to keep those clear. Thinking out loud.. there may be a solution where the "Strong vs" text is placed near the attack bonuses or something. Where's the Siege Engineers resident designer? :p

• I do not know if Attacks with value 0 do have any relevance in the game. The same goes for Armours with value 0. The answer might be different for the two categories. If they are relevant (like "if the value is missing, a ram does X damage, but if it is 0 then a ram does Y damage), the information should be there. Irrelevant values can go of course.

Totally. I found that old thread where trirem talked about the organ gun secondary attack. So I suppose we gotta handle that, but yeah otherwise I wanted to keep the noise:signal ratio low.

• Generally, I would prefer to show information before data, as long as that does not hide other information that could be extracted from the data. Example: Displaying "Attack Bonuses: +3 vs Spearmen" feels better than dumping the Attacks values list, but it now hides the fact that a Crossbowman deals pierce damage, whereas for example a Kamayuk or a Mameluk deal melee damage at range.

That's fair. I agree it's better to specify the kind of damage.

[lalitpatel]

I'm curious if folks are interested in exploring these kinds of ideas. If so, I figure we can debate the UX a bit before I put up a PR for review?

@paulirish Love this proposal. I would love to participate in the UI exploration. I can help also create mocks for us to compare and debate on the ideal UI/UX.

[paulirish]

Two more things I'll throw out there..

1. I'm a little curious about summarizing (attack + reload time + accuracy) as DPS. Having such a top-level attack metric could simplify unit stats quite a bit.
   • It feels like the calculation is straightforward and it makes me wonder why the aoe2 community doesn't use this framing more often.
2. The nice techtree UI that @denniske put into aoe2companion. I hacked his project a tad so I could put the web client online: https://daffy-jump.surge.sh/

Here's screenshots of the civ detail / tech tree if you're too lazy to click. This style of UI definitely lets you scroll to the castle/university faster. :)

But back to unit stats & the helptext card... Dennis has done some really nice work in this app. Affected units for upgrades, the (same) attack bonus rendering, counters, and unit comparison.

[denniske]

@paulirish I'm glad you like my app and the tech tree design. I have already hosted the web version at https://app.aoe2companion.com/ (although I did not update it very often).

For formatting unit information I am parsing the description at the moment e.g. for resources: https://github.com/denniske/aoe2companion/blob/master/data/src/helper/units.ts#L2823 (getUnitUpgradeCost) This only works for english language at the moment though.

[lalitpatel]

Loved the way data is presented on aoe2companion app. It is definitely easier to consume information.

How about going for a hybrid approach where people can still browse the tech tree like they do in the game but the info popup is something inspired by aoe2companion and has a lot more information.

How do people feel about showing the stats for a unit / building on a drawer instead of an popup / overlay. I see two advantages: 1) We get more screen real estate which is independently scrollable. 2) we can have the rest of tech tree independently scrollable and have people do other actions like clicking to navigating to a certain section of tech tree eg. University or a Research etc. Or even comparing two units across civilizations.