GUI

Create for presentation-mode "Horizontal" layout. Think Apple Keynote, and Norman Nielsen Group on usability and design principles. Don't make me think!

Generic: two screen types are connected by a common backend, that represents one game. The common screen auto-creates a new game when the root URL is visited.

Users in general

• The user is a commoner from the street, with no previous experience with this game.

Screens in general

• Horizontal view TV, presentation.
• player-screen is meant to be on a mobile (touch-screen)
• common-screen is meant to be on a TV/Projector/theatre-screen
• The game is a presentation, but interactive.
• Error screen (if something happens, that can get you back to start)
• No facilitator screen — the system is the host.

Player-screens

• Skills: Generic person from the street
• Affordance: Enable the user to participate in the game.

Screenflow

• Scan QR code on common screen
• Splashscreen - register (enter name)
• Waiting screen - show users that register, lobby countdown timer
• Sample question - screen (how to play)
• The rules (how to score points)
• Countdown to first question
• Repeat questions until end
• Wait for final participant's answer
• For all questions: display answer on common-screen, show your answers on player-screen.
• Late joiners: can enter during COUNTDOWN, PLAYING, or REVIEWING — cannot score on missed questions.

Enter max min values

A key portion of the game is to enter values relatively fast. Number input must be easy and efficient. How do we test that?

• Let the player-screen reflect common-screen. If you move your eyes, elements should be at the same location.

Common-screen

• Skills: Person in a public house, Conference, Internet

The common screen is the game host. Visiting the root URL (/) auto-creates a new game session.

Display per state

State	Display
AUTO_LOBBY	QR code, join URL, game code, lobby countdown timer (5 min), player list (live via SSE)
COUNTDOWN	"Question N of M", countdown animation (5, 4, 3, 2, 1)
PLAYING	Question text at top, illustration mid-right, timer + answer count mid-left
REVIEWING	Correct answer, winner delta, median delta, first-to-answer
RESULTS	Ranked leaderboard, winner highlight, response time stats
COOLDOWN	"Next game starting in..." countdown

• Question on top - so it can be read over the head of the person in front of you.
• Question-illustration/image at the mid/lower - right
• Game information at the mid/lower left
• Countdown to next question
• Number of players/answers

Error States

All screens should handle the following error conditions gracefully:

Error	Shown on	Behaviour
Connection lost	All screens	Show reconnecting indicator. Retry automatically. After timeout, offer "Return to start".
Game not found	Player-screen, Common-screen	"Game does not exist. Check the code and try again." with input to re-enter code.
Game full	Player-screen	"This game is full (40 players). Wait for the next game."
Session expired	All screens	"Your session has expired." with option to rejoin (player).