0

In my game, the way my battles work is you attack and sometimes the enemy attacks in return. It's always one on one. Here's how this looks:

enter image description here

The first line is your action, the rest is the enemy's. Your action and hers are called a "round".

At the bottom is an event log of the battle's history. If you click on it, it'll open up and allow you to scroll. Here's how it would look if she attacked more than once:

enter image description here

The rounds are separated by that horizontal line.

In my opinion, it's difficult to tell your actions from hers. In the future, your actions will be multiple lines just like hers, and that will make it even more difficult. What's a good way to distinguish your actions from hers while still being able to distinguish individual rounds?

I've come up with a few ideas of my own:

  1. I can make the white text of her action a shade of red. My concern is this would make the text harder to read.
  2. I can zebra stripe rounds / actions. I'm concerned doing this could make the log more confusing. e.g., "Does a zebra stripe represent an action or a round?" If this is the right way to go, I don't know whether the actions or rounds should be zebra striped.
  3. This isn't necessarily a fleshed out idea, but maybe it would be better to come up with some solution that doesn't use a horizontal line at all?

FWIW, this game is written in HTML.

This may help with context:

This animated gif may help with context

1 Answer 1

2

The optimal strategy with most visual design problems is to use a combination of strategies, since using just one can often lead to other issues (as you suggested). In addressing the proposals you have made, the final solution will still need to be tested and validated against the end-users.

I can make the white text of her action a shade of red. My concern is this would make the text harder to read.

You will want to reserve the colour red for special purposes rather than something that is used commonly as it has the effect of drawing unnecessarily attention to it.

I can zebra stripe rounds / actions.

This may cause issues because if you have light/dark themes then the visuals will be reversed and then be confusing. There are also other potential issues as you have pointed out.

This isn't necessarily a fleshed out idea, but maybe it would be better to come up with some solution that doesn't use a horizontal line at all?

The horizontal line again is not a visual element that should be used too frequently as it will lose its effects. But based on the ideas and the fact that it is implemented in HTML, are there any reasons against using some of these strategies in combination?

  • Use of icons and symbols to differentiate, but only if you don't get a lot of line items per round otherwise it will have the same issue. An alternate will be to use a letter instead.
  • Use of colour on a solid shape in front of the text rather than applying colour to the entire text to avoid the readability issue mentioned before.
  • Use of different font size or style while still keeping the same text colour
5
  • I'm not sure I understand your 2nd/middle suggestion Mar 1, 2021 at 3:35
  • Are you saying something like a colored bullet point? otherwise, I still don't think I understand. Maybe an example image would help Mar 1, 2021 at 5:21
  • Yes, but more specifically the same way you would use an icon or symbol except it doesn't represent anything. The coloured shaped are purely just used for visual identification so it doesn't need to be very detailed if you are combining it with colours.
    – Michael Lai
    Mar 1, 2021 at 5:23
  • Should this symbol be in front of every line or just the beginning? if the latter, I'd be worried it's easy to miss. Mar 1, 2021 at 5:29
  • I think it really depends on what the most common number of lines and the length of the text that follows each line. You would use this marker/bullet point the same way that you use the icons or symbols, so you'd have the same problem. As I mentioned in my answer, you probably want to look at a combination of visual elements to address the problem and see which combinations work the best.
    – Michael Lai
    Mar 1, 2021 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.