Skip to content

ux: usability pass — 3 fixes from Nielsen heuristics + Don't Make Me Think#91

Merged
dmccoystephenson merged 3 commits into
mainfrom
feature/web-ux-pass
Jun 13, 2026
Merged

ux: usability pass — 3 fixes from Nielsen heuristics + Don't Make Me Think#91
dmccoystephenson merged 3 commits into
mainfrom
feature/web-ux-pass

Conversation

@dmccoystephenson

Copy link
Copy Markdown
Member

Summary

A Nielsen/Krug usability pass on the web front-end (src/ui/webUserInterface.py — the served HTML/JS client). Every commit is one self-contained, heuristic-cited fix, scoped small for easy review.

Round 1 — feedback, control & convention on the web client

  1. Keyboard control — number keys select an option; Enter/Space advances dialogue and the timed fishing prompt; the text field still handles its own keys. The console and pygame front-ends already accept number keys, so the click-only web UI silently broke that convention. (Nielsen Prompt Class #7 flexibility & efficiency; Krug: conventions over invention)
  2. Destructive-option styling — options whose label mentions "delete" now render with a red danger style. Previously "Delete a Save File" and "Yes, delete it" looked identical to benign actions like "Sell Fish", inviting a mis-click on an irreversible action. (Nielsen Make data persistent w/ JSON. #5 error prevention; Nielsen Fix game crashing when attempting to deposit/withdraw $0 after entering a non-number. #4 consistency & standards)
  3. Lost-connection feedback — if the game stops/crashes, the client now shows a "Lost connection — is it still running?" banner after repeated failed polls and clears it on recovery, instead of silently freezing on the last screen. The intentional "game ended" screen is left untouched. (Nielsen Apache License #1 visibility of system status; Nielsen Data Persistence w/ JSON #9 recover from errors)

Test plan

  • Press 19 in a menu (e.g. the docks) selects that option without clicking; Enter/Space dismisses a dialogue and triggers the fishing "React!".
  • In the save-file manager, "Delete a Save File" and the "Yes, delete it" confirmation appear in red; normal options stay blue.
  • Stop the game process while a browser tab is open → the tab shows the "Lost connection" banner; choosing Quit in-game shows "The game has ended." (no banner).
  • python3 -m pytest — 198 passed; client JS passes node --check.

🤖 Generated with Claude Code

dmccoystephenson and others added 3 commits June 13, 2026 08:03
In the browser front-end the player could only act by clicking; the console and
pygame front-ends both accept number keys to choose an option. A returning
player who expects to press "1" to fish got no response, and pressing Enter to
dismiss a dialogue did nothing — the web UI silently broke a convention the rest
of the game establishes (Nielsen #7 flexibility and efficiency of use; Krug:
conventions over invention).

This binds number keys (1-9) to option selection and Enter/Space to advancing a
dialogue or the timed fishing prompt, while leaving the text-entry field to
handle its own keys. A live `currentScreen` reference drives the handler and is
cleared on submit so a stray keypress can't double-submit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Every option rendered as the same neutral-blue button, so "Delete a Save File"
and the "Yes, delete it" confirmation looked exactly like "Sell Fish" or "Load
Slot 1". Deleting a save is irreversible, and giving an irreversible action the
same affordance as benign ones invites a mis-click (Nielsen #5 error prevention;
Nielsen #4 consistency and standards / Krug conventions — destructive actions
conventionally read as red).

Options whose label mentions "delete" now render with a red danger style, so the
deletion path and its confirmation stand out from ordinary choices on the way to
an unrecoverable action.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
If the game process stopped (a crash, or the window/terminal closed) the client
kept polling /state in a swallowed try/catch and just sat on the last screen
forever. To the player the game looked frozen with no hint that anything was
wrong or that they should restart it (Nielsen #1 visibility of system status;
Nielsen #9 help users recognize and recover from errors).

After a few consecutive failed polls the client now shows a "Lost connection —
is it still running?" banner and keeps retrying, clearing it automatically if
the server comes back. The intentional "game ended" screen is left untouched so
a clean quit doesn't get an alarming banner.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@dmccoystephenson dmccoystephenson merged commit c5b90fb into main Jun 13, 2026
1 check passed
@dmccoystephenson dmccoystephenson deleted the feature/web-ux-pass branch June 13, 2026 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant