iPhone

The iPhone is the everyday device. It is used in the hallway, in the shop, in the car, one-handed and often in a hurry. So an iPhone screen asks one question: what is happening now? Everything else is one level deeper.

Device and measurements

All reference and website screens are drawn for 390 × 844 pt (the smaller iPhone 14, 15 and 16, stored @2x as 780 × 1688 px). Other sizes only change the width of the content. Margin, bar, circles and target sizes stay the same.

Today

Today is the first surface for adults. Sorted by urgency, not by area: what is running, what comes next, what needs to go along, what is open. Four to six blocks. No person filter, because whoever opens Today is standing in the hallway themselves.

Week as a list

On the iPhone a seven-day grid is too dense. So the week runs as a list: one day per row, expandable, with Albert’s suggestion at the top when something is missing.

Week at a glance

The glance in passing. It answers one question: who carries which day, and where is someone missing?

The day in the hour grid exists on the iPhone too, with day circles, person filter, time axis and now line (reference screen iphone-a2-tag.png). It follows the same regions as Today, with the person filter below the day circles.

Child space

Children get their own entry point, not a trimmed adult view. Target sizes 56 pt, read-aloud register (Vorleser), short sentences, big words. The child always sees who is watching.

The tab bar

<LeistePhone aktiverOrt="Woche" onWahl={setOrt} onPlus={schnellAnlegen} />

/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;

The bar stays put while scrolling and is never translucent. A toast sits above it, never on it. The counter on the inbox only counts what needs a decision.

Gestures and interaction

• Tapping a card opens it. Proposal, not established: as a sheet from the bottom, with a grabber on top, closed by pulling down.
• Tapping a day circle switches the day. Swiping between days is a proposal, not established.
• Ticking off is a tap on the circle on the left, 44 pt, 56 pt for children. Ticked items are struck through and stay until the day is over.
• Every change shows immediately and reports with a toast and “Rückgängig” (Undo).
• Plus opens the quick menu: event, task, drive, scan document, contact, note.
• Voice input for homework and events runs on the device.

No swipe to delete without a way back. Anything that cannot be undone is asked first.

Roles on the iPhone

Every surface on the iPhone

What the iPhone does not have

• The seven-day week board as a grid. On the iPhone the week is a list or a glance.
• Editing safe, vault and finances. Reading yes, deadlines yes, editing on the Mac.
• Mail rules, roles and rights, timetable editing.
• A sidebar or hamburger menu.
• A redrawn status bar in mock-ups. The frame in ui_kits/iphone/PhoneRahmen.jsx leaves it out on purpose.