Improve design for clarity and momentum

[cmnord]

From playtesting, the biggest design challenge right now is game momentum / clarity. How can we make it clearer what action is required from you to keep the game moving fast?

Some transitions that are kind of slow right now:

• you won the buzz and need to answer
• the last buzzer was wrong and you can jump in to buzz again
• you need to choose the next clue

Given this, I think it's worth considering redesigns of the "in-clue" experience and transitions in and out of it.

[otaniyoz]

I think main reasons for lack of momentum and clarity are inconsistencies and noisy design patterns. So, I tried to add consistency and reduce noise without significant changes to current styles and elements -- mostly, played around with the structure. Attaching some rough mockups:

To summarise, I propose:

• a score card, an element that combines player name and score. In some cases, it can be used to hint game state via color-coded borders: who has control of the board, who won the buzz in, how much time left to answer, was the answer right or wrong. This way there is no need for any additional hinting and there is less distraction from the game.
• remove 'back to board' button and screen. (What is the reason behind it? I feel like I am missing something here, because right now it seems to be intentionally slowing down the game).
• rearrange existing elements to minimise layout changes between states.

[cmnord]

These are great! I've incorporated parts of (2) and (3) in b922d9de53a9d710e97ed005447a58d00d4a4bc2. Here's what it looks like so far:

[cmnord]

Addressing a couple other points:

Show board

1. Done
2. Done
3. Done
4. I want the board to be the focus of the game and as legible as possible, so I'm kinda resistant to putting padding on it. For hierarchy, shouldn't the board go on top since it's most important while playing?

Read clue

1. Have you tried playing against someone? You can buzz in once the white line at the top reaches the end of the screen. When multiple players know the answer to a clue, they'll race to buzz in first. That means it's important to know exactly when to buzz down to the millisecond. Adding this padding would make it harder to time your buzzes compared to the edge of the screen.
3. • The dashed line is the countdown timer for answering the clue -- have you tried playing and seen its use? I want to pay homage to the show and keep this visual element (with a sound effect, too).
   • I see your point on the fixed buttons, but what about the different options for wagerable or long-form clues? Should these things take up space when not being used?
   • I see your point on keeping the scorecards while in-game, but I'm not sure if it'll fit with all the other possible clue state -- e.g. wagering in, showing results between games.
   • I don't think the score card border color/animation alone can achieve all the things you mentioned at once. I don't think, as a player, I would pick up the difference between, e.g. white and yellow borders while playing. I can't reall tell what you're showing in the mocks -- are those different colors on the edge of the scorecard for timing?

• I added a 3sec timeout on the "back to board" screen -- I agree that it slowed down the game, we'll see how this goes in playtests.

[otaniyoz]

Thank you for showing the demo earlier, it was nice! You significantly improved my suggestions. Frankly, I didn't expect you to straight up implement them like that. I was just throwing around some rough ideas to see the ones you might find worth exploring further :-)

Show board

4. To clarify on hierarchy: instead of the sort of linear top-down hierarchy, I chose to create one by centering important elements, hence the padding and player cards on top of the screen. This way board is more accessible on phones as well.

Read clue

1. I haven't played nearly as much as I would like to! But from my experience, I don't think I ever directly look at anything other than the question: by the time I read the question, come up with an answer, decide whether to risk answering -- the timer is already green or red. So I just watch out for color changes really. That being said, if milliseconds are important to players, then, perhaps, a better idea would be to replace the line with a clock?

3.1. I recognised the countdown timer from player podiums on the show, I think. Your implementation of it is great. I didn't know how to call it though, so I went with the most obvious and stupid name :-) In general, I am impressed by how you reproduced everything, well done at paying homage to the show! Not being a big fan of the show myself, I also feel like I am being too careless in my suggestions, often showing complete disregard for the core idea of the game you created. I am sorry.

3.2-3. Good point, I haven't thought through all the possible states. I didn't want to fall down a rabbit hole pursuing something useless like I did in #50. This time I forced myself to stick to just two screens. It backfired.

3.4. Totally Britta'd this one! In mockups, I am showing border changes across different game states. Here's a rough demo:

https://github.com/cmnord/jep/assets/37662409/9d8fd7bb-591a-4872-b439-60e20045d8b8