Skip to content
MyDSHMy DSH Field Notes
中文
Independently maintained; not affiliated with DeepSeek. No association with mydsh.dev or other MyDSH sites.

All categories/Product and design

Interaction and UX · Level Advanced · Design Mobile Layout

Mobile: fingers are not cursors

A desktop layout that fails on phones.

Prompt

Ask what the user is doing and what they fear, then decide what goes on screen. Visual tricks do not fix structural problems.

Task: A desktop layout that fails on phones.

[Before you start, do three things]
1. Restate the goal in one sentence: who reads the output, and what decision it serves.
2. If I have not given you the following, ask me. Do not assume:
   - main context: one hand, walking, lying down
   - key actions
   - current layout
   - device mix
3. Say how you plan to do it (at most 5 steps) and wait for my go-ahead.

[Go through each of these]
- tap targets at least 44 pixels with spacing
- primary action within thumb reach
- tables become cards; avoid horizontal scroll
- what must reflow, not scale

[Process]
1. State the single job of this screen
2. Answer the user's current worry first
3. Order by information priority and delete
4. Design empty, loading and error states
5. Give a minimal usability test

[Output]
One job, priority, three states, test plan.

[Do not]
- Never two primary actions on one screen
- Do not test with lorem ipsum
- Never ignore the empty state
- Never use colour as the only signal

What to state before it starts

Leave these unsaid and the model fills them with an assumption. Most 'wrong answers' start here.

  • main context: one hand, walking, lying down
  • key actions
  • current layout
  • device mix

Go through each of these

Where this kind of work most often goes wrong. Already in the prompt, so you do not have to remember it.

  • tap targets at least 44 pixels with spacing
  • primary action within thumb reach
  • tables become cards; avoid horizontal scroll
  • what must reflow, not scale