← Alle Mockups
Einstellungen · Struktur

Drei Wege, die Einstellungen zu gliedern

Die Einstellungsseite ist auf sieben gestapelte Karten gewachsen, von denen eine („Firmendaten“) allein sieben Unterabschnitte enthält. Alles liegt auf einer Seite, alles ist immer offen — auf dem Handy sind das mehrere Bildschirmhöhen bis zur Bankverbindung. Hier drei Strukturen mit Vor- und Nachteilen.

Was heute auf der Seite liegt

  1. Sieben Karten untereinander: Zugangsdaten · Firmendaten · Nummernkreise · Abonnement · App installieren · Gefahrenzone · Version.
  2. „Firmendaten“ ist selbst eine halbe Seite: Betrieb, Kontakt, Steuer (mit Zahlungsziel und Kleinunternehmerregelung), Logo-Upload, Design mit Farbwähler und Vorschau, KI-Assistent mit Gewerk-Profil, Bankverbindung mit Vorschau — 13 Eingabefelder plus Upload, Farbwähler und zwei Vorschauen.
  3. Ein einziger „Speichern“-Knopf oben in der Topbar gilt für das ganze Formular. Wer nur die IBAN korrigieren will, scrollt zweimal: einmal hin, einmal zurück zum Speichern.
  4. Selten und häufig liegen gleichberechtigt nebeneinander. Die Steuernummer stellt man einmal ein, die Bankverbindung vielleicht zweimal im Jahr — die Gefahrenzone im Idealfall nie. Trotzdem kostet jede dieser Karten denselben Scrollweg.
ZugangsdatenE-Mail · Passwort
Firmendaten7 Abschnitte · 13 Felder · Logo · Farbe · KI-Profil · Bank
Nummernkreise5 Belegtypen (eigenes Fenster)
AbonnementVerweis auf /abo
App installierenPWA-Anleitung je Browser
GefahrenzoneExport · Konto löschen
Option A · Empfehlung
Übersicht mit Unterseiten

Die Einstellungen werden zur Liste. Jeder Eintrag zeigt in einer Zeile, was dahinter eingestellt ist, und öffnet eine eigene, kurze Seite. Das Muster, das jedes Telefon-Betriebssystem für seine Einstellungen benutzt.

360 × 640 — Übersicht
Einstellungen
georg@handwerk.de
Betrieb
Fa
Firma & Kontakt
Brauer Malerbetrieb · München
St
Steuer & Bank
USt 19 % · DE89 3704 …
Belege
#
Nummernkreise
AN-2026-001 · RE-2026-017
Fb
Logo & Farbe
Logo hinterlegt · Orange
KI
KI-Assistent
Maler · 6 von 8 Fragen
Konto
Zu
Zugangsdaten
E-Mail und Passwort
Abo
Abo
Solo · verlängert am 03.09.
App
App & Daten
Installieren · Export · Löschung
Unterseite „Steuer & Bank“
‹ Steuer & Bank
Einstellungen
Steuer
143/815/49321
DE 812 345 678
14 Tage
19 %
Bankverbindung
Georg Brauer
DE89 3704 0044 0532 0130 00
COBADEFFXXX
Die Übersicht passt ohne Scrollen auf einen Handy-Bildschirm.
Jede Unterseite ist kurz genug, dass „Speichern“ oben stehen bleiben kann — kein Zurückscrollen.
Die Statuszeile beantwortet die häufigste Frage („was steht da eigentlich drin?“), ohne dass man hineingeht.
Jede Seite ist verlinkbar: /einstellungen/nummernkreise kann direkt aus einer Fehlermeldung heraus geöffnet werden.
Ein Antippen mehr, um an ein Feld zu kommen.
Das eine große Formular muss in mehrere aufgeteilt werden — jede Unterseite speichert ihren eigenen Teil.
Aufwand: mittel · neue Routen + Formular aufteilen
Option B
Register auf einer Seite

Eine Seite bleibt, oben ein Reiter je Bereich. Es wird immer nur ein Bereich angezeigt, der Rest ist ausgeblendet — kein Routenwechsel, kein neuer Seitenaufbau.

360 × 640 — Reiter „Steuer“
Einstellungen
georg@handwerk.de
Betrieb
Steuer
Belege
KI
Konto
Steuer
143/815/49321
DE 812 345 678
14 Tage
19 %
Bankverbindung
Georg Brauer
DE89 3704 0044 0532 0130 00
COBADEFFXXX
Kein zusätzlicher Antipper zum Feld, der Wechsel ist sofort.
Der eine „Speichern“-Knopf oben kann bleiben — das Formular bleibt eines.
Die kleinste Änderung am bestehenden Code.
Fünf Reiter passen bei 360px nicht nebeneinander — die Leiste scrollt seitwärts, und was rechts liegt, wird übersehen. Genau der Fehler, der gerade beim „Erweitert“ im Nummernkreis-Fenster aufgetreten ist.
Kein Überblick: man sieht nie, was in den anderen vier Reitern eingestellt ist.
Ungespeicherte Änderungen über Reiter hinweg sind unsichtbar — man speichert Dinge mit, die man gar nicht mehr im Blick hat.
Aufwand: klein · nur Anzeige-Logik
Option C
Aufklappbare Abschnitte

Alles bleibt auf einer Seite, aber zugeklappt. Jeder Abschnitt zeigt eine Zeile mit dem, was drinsteht, und klappt beim Antippen auf. Zwischenschritt, der ohne neue Routen auskommt.

360 × 640 — „Steuer“ offen
Einstellungen
georg@handwerk.de
Fa
Firma & Kontakt
Brauer Malerbetrieb · München
St
Steuer & Bank
USt 19 % · DE89 3704 …
143/815/49321
DE 812 345 678
14 Tage
19 %
DE89 3704 0044 0532 0130 00
#
Nummernkreise
AN-2026-001 · RE-2026-017
Fb
Logo & Farbe
Logo hinterlegt · Orange
KI
KI-Assistent
Maler · 6 von 8 Fragen
Zu
Zugangsdaten
E-Mail und Passwort
Überblick und Bearbeiten auf einer Seite — kein Routenwechsel nötig.
Kleinster Eingriff: die Abschnitte existieren schon, sie bekommen nur einen Kopf und einen Zustand.
Der eine „Speichern“-Knopf bleibt gültig.
Sobald zwei Abschnitte offen sind, ist die Seite wieder lang — das Problem kehrt zurück, nur später.
Aufgeklappter Inhalt schiebt alles darunter nach unten; nach dem Zuklappen ist die Scrollposition eine andere als vorher.
Nicht verlinkbar: es gibt keine Adresse für „Nummernkreise“.
Aufwand: klein · Kopfzeile + Zustand je Abschnitt

Empfehlung: Option A, in zwei Schritten

Option A ist die einzige der drei, die das eigentliche Problem löst statt es zu verschieben: Der Überblick wird kurz und bleibt kurz, egal wie viele Einstellungen noch dazukommen — und darauf läuft es hinaus, denn jede neue Funktion bringt ihre Einstellung mit. Die Statuszeile je Eintrag beantwortet dabei die Frage, für die man heute hineinscrollen muss.

Option B fällt aus einem konkreten Grund weg: fünf Reiter passen bei 360px nicht nebeneinander, die Leiste scrollt seitwärts, und was rechts außerhalb liegt, wird nicht gefunden. Genau dieser Fehler ist gerade erst beim „Erweitert“ im Nummernkreis-Fenster aufgetreten — ihn an prominenterer Stelle zu wiederholen wäre absehbar.

Vorgeschlagene Reihenfolge:

  1. Gruppieren, ohne die Struktur zu ändern. „Firmendaten“ in „Firma & Kontakt“, „Steuer & Bank“, „Logo & Farbe“ und „KI-Assistent“ zerlegen — vier eigenständige Karten statt einer mit sieben Unterabschnitten. Das allein macht die Seite lesbar und ist Voraussetzung für alles Weitere.
  2. Karten zu Unterseiten machen. Jede Karte bekommt eine Route unter /einstellungen/… und ihren eigenen Speichern-Knopf; die Hauptseite wird zur Liste mit Statuszeilen. Nummernkreise werden dabei vom Fenster zur Unterseite — dann erübrigt sich auch die Frage, wie hoch das Fenster sein darf.