The interface contract
An editable tier list looks simple until the user tries to answer a real question. “Rank these characters” is underspecified. A useful interface must let the user define the scenario, narrow the pool, place items, revise decisions, and export a readable result.
The public HSR editor is a useful black-box example. Its visible contract includes a title field, a prepared pool of 95 character portraits, search/filter affordances, tier rows, local-save status, undo/redo, share-link and preview controls, and PNG export choices. That is an interface observation, not a claim about the private framework or data model.
Model the states before the components
The core state is not “a list of cards.” It is a relationship between a scenario, a pool, ordered tiers, and export state:
type RankingState = {
title: string;
pool: { id: string; label: string; included: boolean }[];
tiers: { id: string; label: string; itemIds: string[] }[];
history: { past: unknown[]; future: unknown[] };
save: 'idle' | 'saved' | 'dirty';
};
The type above is a design proposal. It is not an extraction of source code. The important behavior is that moving an item updates one tier without duplicating it, reset is distinguishable from undo, and an export preview does not silently mutate the ranking.
Interaction questions worth testing
Can a keyboard or touch user identify where an item will land?
Does filtering hide items in a way that is reversible and obvious?
Does a share link preserve title, labels, colors, and positions?
Can a user recover from an accidental move without losing later work?
Does the exported image preserve hierarchy at square, landscape, and portrait sizes?
These are testable contracts even when implementation details are unavailable. They also reveal why “drag and drop” alone is not a sufficient feature specification.
A small test matrix
For a practical starting point, Rankly shows how a focused ranking surface can keep prepared content and editing controls together. The relevant page is the HSR Tier List Maker, which frames the board as a personal ranking rather than an official meta verdict.
Scope is part of quality
The page explicitly focuses on HSR character portraits. W Engines, Bangboo, builds, and equipment advice are outside the visible scope. A trustworthy product does not need to imply that every adjacent problem is solved; it needs to make the supported state machine understandable.
Top comments (0)