Lorixen.
EN

A Display Density Setting for a Workshop Inventory Screen

Workshop staff often work from an inventory list in different conditions. One person wants many rows on screen, and another wants larger text across the bench. A density setting can help, but only if switching it does not lose the record someone was working on. This is a design proposal, so adapt it to your own screen.

What must survive a switch

The selection belongs to the record, never to the row's position on screen. Store the selected record's id, not its row index. After the density changes, find that record again and bring it into view.

Density-switch state

Keep these pieces of state separate:

  • density: for example compact, standard, roomy
  • selected_id: the record the person picked, or none
  • filter and sort: unchanged by a density switch
  • scroll anchor: the id of the record nearest the top of the visible list, or the selected id if one exists
  • unsaved edits: left untouched

On a switch:

  1. Record the selected id and the scroll anchor.
  2. Apply the new density.
  3. Redraw the rows.
  4. Restore the selection highlight on the same id.
  5. Scroll so the selected record is visible, preferably in a similar place on screen.
  6. Keep keyboard focus on that record if it had focus before.

Branches

  • No record selected: anchor on the first visible record.
  • Selected record no longer matches the filter: leave the filter alone, show that the selection is hidden, and do not silently clear it.
  • Long list loaded in pages: confirm the selected record's page is still loaded before scrolling.
  • Open edit panel: keep it open and unchanged.
  • Remembered setting: if you store the choice, store it per person or per device, and treat a missing value as standard.

Readability check

For each density, test with realistic rows:

  • Text remains legible at the size staff actually view it.
  • Part numbers and quantities are not truncated in a way that hides a difference, such as two codes that look the same when cut.
  • Row boundaries stay distinguishable, so a quantity is not read against the wrong item.
  • The selected row stands out in every density, and not by colour alone.
  • Click or tap targets are still comfortable, especially in the compact setting.
  • Long names wrap or truncate in the same predictable way.

Hypothetical worked example

Suppose an inventory list shows 200 items. A staff member selects the record for a drill bit set, with an id we will call 0457, then switches from standard to compact. Rows shrink, and the list now shows more at once. Before the redraw the app stored 0457 as selected and as the anchor. After the redraw it highlights 0457 and scrolls it into a similar place. Then the person switches to roomy. The row moves down the list, and the app brings it into view again. Had the person typed half a note in the edit panel, that note would still be there.

Stop conditions

Do not release the setting if any switch changes the selection, resets the filter, discards edits, or leaves the chosen record off screen. If a density cannot show part numbers without ambiguity, remove that density or change its layout.

Acceptance checks

  • Switch between all three densities in every order, with and without a selection, and the selected record remains selected and visible.
  • A filtered and sorted list keeps its order after each switch.
  • An edit in progress survives each switch.
  • Keyboard focus is not dropped to the top of the page.
  • Two people who prefer different densities do not overwrite each other's choice, if you store it.
  • A reviewer reads a sample of part numbers aloud from each density and finds no ambiguity.

Sources

    WhatsAppLet’s talk