01 / MINI-LEKTION · 3 MINUTEN
Responsive Navigation ist mehr als Verkleinern.
Ein fiktives Projektmanagement-Tool hat sieben Bereiche: Übersicht, Projekte, Aufgaben, Kalender, Berichte, Team und Einstellungen. Auf Desktop lassen sie sich in einer Sidebar gruppieren. Auf einem Smartphone konkurrieren dieselben Ziele mit dem eigentlichen Arbeitsinhalt.
- Hamburger-Menü: Benötigt wenig Platz, verbirgt die Ziele aber zunächst. Beschriftung, Öffnen und Schließen sowie die Orientierung nach der Auswahl müssen funktionieren.
- Bottom Navigation: Hält wenige zentrale Bereiche direkt erreichbar. Zu viele Ziele, lange Labels oder zusätzliche Zustände können die verfügbare Breite überlasten.
- Horizontale Tabs: Eignen sich zum Wechsel verwandter Inhaltsansichten. Außerhalb des sichtbaren Bereichs liegende Optionen brauchen eine erkennbare Fortsetzung.
Tabs und Seitennavigation sind nicht dasselbe. Das ARIA-Tabs-Pattern beschreibt zusammengehörige Panels, von denen jeweils eines angezeigt wird, einschließlich einer eigenen Tastaturlogik. Die Navigation der Musterlösung wechselt dagegen zwischen Beispielseiten und nutzt echte Links. W3C APG: Tabs Pattern.
Die ersten vier Einträge der Desktop-Liste automatisch nach unten zu verschieben wäre noch keine begründete Priorisierung. Welche Aufgaben sind unterwegs wichtig? Zwischen welchen Bereichen wechseln Menschen? Und welche seltene Funktion muss im kritischen Moment trotzdem leicht auffindbar sein?
02 / DEINE CHALLENGE · 8 MINUTEN
Eine Informationsarchitektur, zwei Nutzungskontexte.
Nutze die folgenden fiktiven Bereichsaufrufe als Ausgangspunkt. Es sind keine echten Nutzungsanalysen. Die Prozentwerte summieren sich je Gerät auf 100 % und beschreiben Aufrufe, nicht unterschiedliche Personen, Erfolg oder Wichtigkeit.
- Priorisieren · 2 Minuten: Wähle vier dauerhaft sichtbare mobile Einträge, gegebenenfalls einschließlich „Mehr“. Begründe jeden anhand von Häufigkeit, Aufgabenwichtigkeit und Wechseln. Die Aufrufanteile allein zeigen keine Wechselhäufigkeit.
- Entwerfen · 4 Minuten: Erstelle Frames mit 375 × 812 und 1440 × 900 px. Mobile erhält maximal vier untere Einträge mit Icon und Label. Desktop erhält eine sinnvoll gruppierte Sidebar. Zeige den aktiven Bereich zusätzlich zur Farbe durch Form, Gewicht oder eine sichtbare Markierung.
- Belasten · 2 Minuten: Prüfe 320 px Breite, 200 % Text und ein Badge „12“. Was bricht um? Welche Elemente überlagern sich? Wie erreicht man das letzte Inhaltselement?
Der Kalender hat nur 12 % der mobilen Aufrufe. Für zeitkritische Terminaufgaben könnte er dennoch wichtiger als eine Übersicht sein. Formuliere, welche zusätzliche Information diese Entscheidung verändern würde. Ein erster Wireframe mit klarer Begründung genügt; für eine fertige Navigation brauchst du weitere Prüfung.
03 / RESPONSIVE MUSTERLÖSUNG
Direkte Ziele und ein verlässliches „Mehr“.
Die erste Variante zeigt Übersicht, Projekte, Aufgaben und Mehr. Die zweite ersetzt die Übersicht durch den Kalender. Die Demo reagiert auf ihre verfügbare Breite: auf breiten Flächen als Sidebar, auf schmalen als untere Navigation. Probiere sie mit verkleinertem Browser und mit der Textoption aus.
Die Links öffnen eigenständige lokale Beispielseiten. Dort kannst du weiter navigieren und über „Zurück zu Lektion 17“ hierher zurückkehren. Browser-Zurück und das Öffnen in einem neuen Tab funktionieren als normale Linkaktionen. Es werden weder Projekte verändert noch Nutzungsdaten für diese Übung erhoben.
04 / TECHNISCHER IMPULS · 3 MINUTEN
Navigation braucht Struktur, Platz und eindeutige Zustände.
Entscheidungen und vollständigen Quellcode öffnen
Dies ist ein eigener Gestaltungsvorschlag mit fiktiven Daten. Er zeigt zwei begründbare Varianten, keinen durch einen Produkttest nachgewiesenen Sieger.
1. Drei direkte Bereiche plus ein Auffangpunkt.
Übersicht, Projekte und Aufgaben stehen im Beispiel für 80 % der mobilen Aufrufe. Das begründet eine erste Hypothese, aber keinen sicheren Aufgabenerfolg. „Mehr“ bündelt Kalender, Berichte, Team und Einstellungen. In der zweiten Variante sind Projekte, Aufgaben und Kalender direkt erreichbar; die Übersicht wandert unter Mehr.
Die Kalender-Variante wäre etwa dann plausibel, wenn unterwegs häufig zeitkritische Termine geprüft werden. Die Prozenttabelle belegt das nicht. Ich würde dafür Aufgaben und Wechsel beobachten, beide Varianten mit denselben Szenarien vergleichen und insbesondere prüfen, ob das Auffinden versteckter Bereiche gelingt.
2. Die Desktop-Gruppen bleiben nachvollziehbar.
Übersicht, Projekte, Aufgaben und Kalender gehören hier zur täglichen Arbeit. Berichte, Team und Einstellungen bilden eine zweite Gruppe „Organisation“. Beide Darstellungen führen zu denselben Bereichen mit denselben Namen. Die zwei Gruppen sind eine überprüfbare Annahme über das mentale Modell, keine universelle SaaS-Struktur.
3. Echte Links und der tatsächliche aktuelle Ort.
Die Demo verwendet Links mit realen lokalen Zieladressen. Der tatsächliche aktive Seitenlink trägt aria-current="page". Diese Information ersetzt nicht die sichtbare Markierung: Die Lösung ergänzt eine Kontur, stärkere Schrift und ein Häkchen. MDN: aria-current.
„Mehr“ ist eine normale Übersichtsseite mit Links, kein komplexes Menü-Widget. Wenn etwa Team geöffnet ist, wird Mehr als zugehörige Gruppe gestrichelt markiert und der aktuelle Bereich im Inhalt genannt. Der Mehr-Link behauptet dabei nicht fälschlich, selbst die aktuelle Seite zu sein.
4. Badge, aktiv und nicht verfügbar bedeuten Unterschiedliches.
Die 12 stehen ausgeschrieben für offene Aufgaben. Das Badge liegt im normalen Layout neben dem Icon und überdeckt kein Label. Es ist kein Dringlichkeitsbeweis. Aktivität erhält dagegen die separate Markierung. Berichte sind mit Schloss, Text und aria-disabled als nicht verfügbar gekennzeichnet; sie haben in der Navigation keinen aktivierbaren Link. Die sichtbare Begründung lautet „Beispieldienst offline“.
Der nicht verfügbare Eintrag bleibt in dieser Demo per Tastatur auffindbar, damit sein Zustand erklärbar ist. Wenn du einen Zielbereich in einem echten Produkt deaktivierst, prüfe, ob stattdessen eine erreichbare Erklärung mit sinnvoller Alternative hilfreicher wäre. Die direkt aufgerufene Berichte-Demoseite erklärt den Zustand ebenfalls.
5. Der Inhalt wird nicht von der Navigation überdeckt.
Die Musterlösung verwendet eine eigene App-Fläche mit scrollbarem Inhalt. Die untere Navigation belegt eine separate Rasterzeile. Ihre Höhe darf mit umbrochenen Labels und größerem Text wachsen. Es gibt keine darübergelegte feste Leiste und keine unzuverlässige Annahme, dass ein pauschaler Abstand von 64 px immer ausreicht.
Für eine produktive, am Viewport fixierte Leiste müsstest du ihre tatsächliche Höhe einschließlich Textvergrößerung berücksichtigen und ausreichend Inhaltsraum reservieren. Zusätzlich kann env(safe-area-inset-bottom) den vom Browser gemeldeten sicheren Abstand zum Bildschirmrand berücksichtigen. Ob und welcher Wert verfügbar ist, hängt von Gerät und Viewport-Konfiguration ab. MDN: env().
Die 200-%-Option vergrößert nur den Text der Demo, damit Probleme gezielt sichtbar werden. Sie ist kein Ersatz für Browserzoom, Screenreader und Geräteprüfung. Icons bleiben erkennbar, Labels dürfen umbrechen und der Inhalt bleibt innerhalb der App scrollbar. Ein hoher Navigationsblock nimmt dennoch mehr Inhaltsfläche ein – ein realer Zielkonflikt, den du bewerten musst.
coaching-navigation.ts
export const navigationLessonPath = "/kurse/ui-ux-coaching/navigation-platzmangel";
export const navigationAreas = [
{ slug: "uebersicht", label: "Übersicht", mobile: 28, desktop: 18, group: "Arbeit" },
{ slug: "projekte", label: "Projekte", mobile: 22, desktop: 25, group: "Arbeit" },
{ slug: "aufgaben", label: "Aufgaben", mobile: 30, desktop: 20, group: "Arbeit" },
{ slug: "kalender", label: "Kalender", mobile: 12, desktop: 15, group: "Arbeit" },
{ slug: "berichte", label: "Berichte", mobile: 3, desktop: 12, group: "Organisation" },
{ slug: "team", label: "Team", mobile: 3, desktop: 7, group: "Organisation" },
{ slug: "einstellungen", label: "Einstellungen", mobile: 2, desktop: 3, group: "Organisation" },
] as const;
export type NavigationArea = typeof navigationAreas[number]["slug"] | "mehr";
export type NavigationVariant = "standard" | "calendar";
export function isNavigationArea(value: string): value is NavigationArea {
return value === "mehr" || navigationAreas.some(area => area.slug === value);
}
export function mobileNavigation(variant: NavigationVariant): NavigationArea[] {
return variant === "calendar" ? ["projekte", "aufgaben", "kalender", "mehr"] : ["uebersicht", "projekte", "aufgaben", "mehr"];
}
export function additionalNavigation(variant: NavigationVariant) {
const direct = mobileNavigation(variant);
return navigationAreas.filter(area => !direct.includes(area.slug));
}
export function navigationDemoHref(area: NavigationArea, variant: NavigationVariant, largeText: boolean) {
const query = new URLSearchParams();
if (variant === "calendar") query.set("prioritaet", "kalender");
if (largeText) query.set("text", "200");
const suffix = query.toString();
return `${navigationLessonPath}/demo/${area}${suffix ? `?${suffix}` : ""}`;
}
coaching-navigation.tsx
"use client";
import { useId, useState, type CSSProperties } from "react";
import { BarChart3, CalendarDays, Check, CheckSquare, Folder, LayoutDashboard, LockKeyhole, MoreHorizontal, Settings, Users, type LucideIcon } from "lucide-react";
import { additionalNavigation, mobileNavigation, navigationAreas, navigationDemoHref, type NavigationArea, type NavigationVariant } from "@/lib/coaching-navigation";
import "./coaching-navigation.css";
const icons: Record<NavigationArea, LucideIcon> = { uebersicht: LayoutDashboard, projekte: Folder, aufgaben: CheckSquare, kalender: CalendarDays, berichte: BarChart3, team: Users, einstellungen: Settings, mehr: MoreHorizontal };
const descriptions: Record<Exclude<NavigationArea,"mehr">, string> = {
uebersicht: "Hier bündelt die fiktive App laufende Projekte und dringende Aufgaben. Die Übersicht ersetzt nicht den direkten Zugang zur Aufgabenliste.",
projekte: "Projekt Alpha: Entwurf prüfen. Projekt Beta: nächste Schritte abstimmen. Diese Beispieldaten sind keine echten Projekte.",
aufgaben: "12 offene Beispielaufgaben. Das Badge beschreibt offene Aufgaben, keine automatisch gemessene Dringlichkeit. Die Aufgabenliste bleibt über einen stabil benannten Bereich erreichbar.",
kalender: "Beispieltermin: Design-Review um 14 Uhr. Die Kalenderpriorität ist in der zweiten Variante eine Annahme über zeitkritische Aufgaben, kein Ergebnis einer echten Studie.",
berichte: "Berichte sind in dieser Demo als nicht verfügbar markiert. Dieser direkt aufgerufene Beispielpfad erklärt den Zustand, um eine Sackgasse zu vermeiden. Es gibt keinen echten Berichtsdienst.",
team: "Das fiktive Team besteht aus Design, Entwicklung und Produkt. Hier wäre die Teamverwaltung auffindbar, auch wenn sie seltener genutzt wird.",
einstellungen: "Hier wären unter anderem Profil und Sicherheit zu finden. Seltene Aufrufe allein wären kein Grund, einen wichtigen Sicherheitsbereich unauffindbar zu machen.",
};
export function CoachingNavigation({ area = "uebersicht", initialVariant = "standard", initialLargeText = false }: { area?: NavigationArea; initialVariant?: NavigationVariant; initialLargeText?: boolean }) {
const id = useId();
const [variant, setVariant] = useState<NavigationVariant>(initialVariant);
const [largeText, setLargeText] = useState(initialLargeText);
const direct = mobileNavigation(variant);
const hidden = additionalNavigation(variant);
const label = area === "mehr" ? "Mehr" : navigationAreas.find(item => item.slug === area)!.label;
const activeInMore = area !== "mehr" && !direct.includes(area);
function item(slug: NavigationArea) {
const info = navigationAreas.find(value => value.slug === slug);
const Icon = icons[slug];
const content = <><span className="navigation-demo-icon"><Icon size={22} aria-hidden="true" />{slug === "aufgaben" && <span className="navigation-demo-badge" aria-hidden="true">12</span>}{area === slug && <Check size={15} aria-hidden="true" />}</span><span>{info?.label ?? "Mehr"}</span>{slug === "aufgaben" && <span className="sr-only">, 12 offene Aufgaben</span>}</>;
if (slug === "berichte") return <span key={slug} className="navigation-demo-item navigation-demo-disabled" role="link" aria-disabled="true" tabIndex={0}><span className="navigation-demo-icon"><LockKeyhole size={22} aria-hidden="true" /></span><span>Berichte</span><small>Nicht verfügbar · Beispieldienst offline</small></span>;
return <a key={slug} className="navigation-demo-item" href={navigationDemoHref(slug,variant,largeText)} aria-current={area === slug ? "page" : undefined} data-group-active={slug === "mehr" && activeInMore ? "true" : undefined}>{content}{slug === "mehr" && activeInMore && <span className="sr-only">, enthält den aktuellen Bereich {label}</span>}</a>;
}
return <div className="navigation-demo">
<div className="navigation-demo-controls"><label htmlFor={`${id}-variant`}>Mobile Priorität<select id={`${id}-variant`} value={variant} onChange={event => setVariant(event.target.value as NavigationVariant)}><option value="standard">Übersicht, Projekte, Aufgaben</option><option value="calendar">Projekte, Aufgaben, Kalender</option></select></label><label className="navigation-demo-text"><input type="checkbox" checked={largeText} onChange={event => setLargeText(event.target.checked)} />200 % Text im Beispiel</label></div>
<p className="navigation-demo-note">Responsive Demo: breite Fläche mit Sidebar, schmale Fläche mit vier unteren Einträgen. Alle Links führen zu lokalen Beispielseiten. „Mehr“ ist eine eigene Übersichtsseite, kein ARIA-Menü. Die Einstellungen bleiben beim Wechsel als URL-Parameter erhalten.</p>
<div className="navigation-demo-container">
<div className="navigation-demo-app" style={{ "--nav-text-scale": largeText ? 2 : 1 } as CSSProperties}>
<nav className="navigation-demo-sidebar" aria-label="Beispiel-App: Hauptbereiche">{["Arbeit","Organisation"].map(group => <div key={group}><p>{group}</p>{navigationAreas.filter(value => value.group === group).map(value => item(value.slug))}</div>)}</nav>
<section className="navigation-demo-content" aria-labelledby={`${id}-title`} tabIndex={0}>
<p className="navigation-demo-kicker">FIKTIVE PROJEKT-APP</p><h3 id={`${id}-title`}>{label}</h3>
{activeInMore && <p className="navigation-demo-context">Auf Mobile unter „Mehr“ erreichbar · aktueller Bereich: {label}.</p>}
{area === "mehr" ? <><p>Weitere Bereiche. Alle Ziele bleiben über dieselbe Informationsarchitektur auffindbar.</p><nav className="navigation-demo-more" aria-label="Beispiel-App: Weitere Bereiche">{hidden.map(value => item(value.slug))}</nav></> : <><p>{descriptions[area]}</p><div className="navigation-demo-card"><h4>Deine nächste Aufgabe</h4><p>Wechsle zu Aufgaben, öffne über „Mehr“ die Einstellungen und finde anschließend den Kalender. Beobachte Beschriftung, aktiven Zustand und den Weg zurück.</p><p>Geprüft werden Auffindbarkeit und Orientierung. Es gibt weder eine echte Projektverwaltung noch erfundene Nutzerergebnisse.</p></div><a className="navigation-demo-last" href={navigationDemoHref("mehr",variant,largeText)}>Weitere Bereiche öffnen →</a><p className="navigation-demo-end">Ende des Beispielinhalts. Diese letzte Aktion liegt oberhalb der unteren Navigation und bleibt im eigenen Inhaltsbereich erreichbar.</p></>}
</section>
<nav className="navigation-demo-bottom" aria-label="Beispiel-App: Hauptbereiche mobil">{direct.map(value => item(value))}</nav>
</div>
</div>
<p className="navigation-demo-note">Die App-Fläche hat einen eigenen scrollbaren Inhaltsbereich. Die untere Navigation belegt eine eigene Rasterzeile, deren Höhe mit dem Text wächst. Sie liegt dadurch nicht über dem Inhalt. Das simulierte 200-%-Textmaß ersetzt keine Prüfung mit Browserzoom und echten Geräten.</p>
</div>;
}
coaching-navigation.css
.navigation-lesson .lesson-header h1 { overflow-wrap: anywhere; hyphens: auto; }
.navigation-demo { margin: 28px 0; min-width: 0; }
.navigation-demo-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 16px; }
.navigation-demo-controls label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.navigation-demo-controls select { width: 100%; min-height: 44px; padding: 10px; background: #fff; color: #172033; border: 1px solid #64748b; border-radius: 8px; font: inherit; }
.navigation-demo-controls .navigation-demo-text { display: flex; align-items: center; min-height: 44px; gap: 10px; }
.navigation-demo-text input { width: 20px; height: 20px; accent-color: #4338ca; flex-shrink: 0; }
.navigation-demo .navigation-demo-note { font-size: 13px; color: #475569; line-height: 1.8; }
.navigation-demo-container { container-type: inline-size; container-name: navigation-demo; }
.navigation-demo-app { display: grid; grid-template-columns: 210px minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 620px; background: #f5f7fb; border: 1px solid #cbd5e1; border-radius: 14px; overflow: hidden; font-size: calc(16px * var(--nav-text-scale)); color: #172033; }
.navigation-demo-sidebar { padding: 16px; border-right: 1px solid #cbd5e1; background: #fff; overflow-y: auto; min-height: 0; }
.navigation-demo-sidebar > div + div { margin-top: 24px; }
.navigation-demo-sidebar p { font-size: .75em; color: #475569; margin: 0 0 12px; }
.navigation-demo .navigation-demo-item { display: flex; align-items: center; gap: .5em; padding: .6em; min-height: 52px; border: 2px solid transparent; border-radius: 8px; color: #334155; font-size: .875em; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; hyphens: auto; text-decoration: none; }
.navigation-demo-sidebar .navigation-demo-item { flex-wrap: wrap; margin: 6px 0; }
.navigation-demo-item > span:not(.navigation-demo-icon) { min-width: 0; }
.navigation-demo-icon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
.navigation-demo-icon svg { flex-shrink: 0; }
.navigation-demo .navigation-demo-item[aria-current="page"] { background: #eef2ff; color: #3427a8; font-weight: 700; border-color: #4338ca; }
.navigation-demo .navigation-demo-item[data-group-active="true"] { border-style: dashed; border-color: #64748b; }
.navigation-demo .navigation-demo-item:hover:not([aria-disabled="true"]) { text-decoration: underline; text-underline-offset: 3px; }
.navigation-demo-badge { display: inline-grid; place-items: center; padding: 2px 5px; min-width: 1.5em; border-radius: 20px; background: #172033; color: #fff; font-size: .85em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.navigation-demo .navigation-demo-disabled { border: 1px dashed #64748b; background: #f1f5f9; color: #475569; }
.navigation-demo-disabled small { display: block; font-size: .85em; width: 100%; }
.navigation-demo-content { min-width: 0; min-height: 0; overflow-y: auto; padding: 24px; }
.navigation-demo-content .navigation-demo-kicker { font-size: .7em; letter-spacing: .07em; color: #475569; margin: 0 0 12px; }
.navigation-demo-content h3 { margin: 0 0 16px; font-size: 1.75em; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.navigation-demo-content h4 { font-size: 1.05em; line-height: 1.4; margin: 0 0 12px; }
.navigation-demo-content p { font-size: .95em; line-height: 1.8; margin: 12px 0; overflow-wrap: anywhere; }
.navigation-demo-content .navigation-demo-context { font-size: .85em; padding: 12px; border-left: 3px solid #4338ca; background: #eef2ff; }
.navigation-demo-card { margin: 22px 0; padding: 18px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; }
.navigation-demo-content .navigation-demo-last { display: inline-block; padding: 12px; font-size: .95em; border: 1px solid #64748b; border-radius: 8px; color: #3427a8; text-decoration: underline; overflow-wrap: anywhere; }
.navigation-demo-content .navigation-demo-end { color: #475569; font-size: .85em; }
.navigation-demo-more { display: grid; gap: 12px; margin-top: 20px; }
.navigation-demo-more .navigation-demo-item { background: #fff; border-color: #cbd5e1; flex-wrap: wrap; }
.navigation-demo-bottom { display: none; }
.navigation-demo :is(a,select,input,[tabindex]):focus-visible { outline: 3px solid #4338ca; outline-offset: -3px; }
@container navigation-demo (max-width: 600px) {
.navigation-demo-app { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
.navigation-demo-sidebar { display: none; }
.navigation-demo-content { padding: 18px; }
.navigation-demo-bottom { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; border-top: 1px solid #64748b; padding: 8px 4px calc(8px + env(safe-area-inset-bottom,0px)); background: #fff; }
.navigation-demo-bottom .navigation-demo-item { flex-direction: column; justify-content: start; padding: 5px 2px; gap: 4px; border-radius: 6px; text-align: center; min-height: 60px; font-size: .75em; }
.navigation-demo-bottom .navigation-demo-icon { min-height: 30px; }
}
@media(max-width:600px) { .navigation-demo-controls { grid-template-columns: minmax(0,1fr); } }
.navigation-usage { margin: 24px 0; max-width: 100%; overflow-x: auto; padding: 4px; }
.navigation-usage table { width: 100%; border-collapse: collapse; font-size: 14px; }
.navigation-usage caption { text-align: left; margin-bottom: 12px; color: #475569; }
.navigation-usage :is(th,td) { padding: 12px; border-bottom: 1px solid #cbd5e1; text-align: left; }
.navigation-usage:focus-visible { outline: 3px solid #4338ca; }
05 / REFLEXION · 2 MINUTEN
Was darf sich ändern, was sollte verlässlich bleiben?
Der Kalender wird inzwischen häufiger als die Übersicht aufgerufen.
Würdest du die sichtbaren Ziele oder ihre Reihenfolge automatisch ändern?
Mögliche Antwort zur Personalisierung
Ich würde die Aufrufe als Anlass zur Untersuchung nutzen, nicht die Navigation ungefragt umsortieren. Eine vertraute Position kann Orientierung unterstützen; wechselnde Reihenfolgen könnten sie erschweren. Zuerst kläre ich, ob die Veränderung dauerhaft ist und welche Aufgaben dahinterstehen.
Eine nachvollziehbare, freiwillige Anpassung kann sinnvoll sein. Dann sollte die Person ihre direkten Ziele bewusst wählen und zur Standardanordnung zurückkehren können. Ein häufigeres Ziel muss nicht automatisch an erster Stelle stehen; Vorhersagbarkeit und Aufgabenrisiko gehören zur Entscheidung.
Aktiver Bereich, Badge und nicht verfügbares Ziel.
Wie unterscheidest du die drei Zustände, ohne die Leiste unruhig zu machen?
Mögliche Antwort zu visuellen Zuständen
Der aktuelle Bereich erhält eine stabile Formmarkierung und stärkere Beschriftung, das Badge eine klar zugeordnete Zahl und Bedeutung. Ein nicht verfügbares Ziel erhält einen expliziten Hinweis mit Grund und keine vorgetäuschte Aktion. Eine bloße Reduktion der Deckkraft würde weder den Zustand ausreichend erklären noch automatisch lesbaren Text garantieren.
Ich prüfe diese Zustände gemeinsam: beispielsweise aktive Aufgaben mit Badge, gleichzeitig ein offline markierter Bericht unter Mehr. Farbkontrast, Labels, Fokus und Umbrüche müssen auch zusammen funktionieren.
Dein Selbstcheck
- Begründest du direkte Ziele mit Aufgaben statt nur mit Tabellenpositionen?
- Sind alle übrigen Bereiche zuverlässig über Mehr auffindbar?
- Bezeichnen beide Layouts dieselben Ziele konsistent?
- Sind aktiver Ort, Badge und Nichtverfügbarkeit auch ohne Farbe verständlich?
- Bleiben Labels und das letzte Inhaltselement bei 320 px und großer Schrift erreichbar?
DEIN MERKSATZ
Das Wichtige direkt. Das Übrige verlässlich auffindbar.
Gute Navigation macht nicht alles sichtbar. Sie macht das Wichtige unmittelbar erreichbar und das Übrige zuverlässig auffindbar. Seltene Aufrufe allein machen eine Funktion noch nicht unwichtig.