Mobile-UI

Worum geht es?

Hier geht es um die kompakte Bedienung auf kleinen Bildschirmen: Telefone, kleine Tablets und enge Browserfenster. Das Ziel ist nicht ein zweites Design, sondern dieselbe Fachlogik in einer Form, die auf engem Raum schnell lesbar bleibt.

Was auf Mobile zuerst zählt

• eine klare Hauptaktion pro Bildschirm
• kurze, gut scannbare Karten statt langer Tabellen
• Touch-Ziele mit genug Abstand und Höhe
• keine wichtigen Informationen nur über Farbe
• keine Button- oder Tabellenumbrüche, die den Lesefluss zerstören
• Overflow sichtbar machen, statt ihn zu verstecken

Woran du Mobile-Probleme erkennst

• Tabellen werden auf engem Platz unlesbar oder drücken Aktionen zusammen
• ein Button wirkt wichtiger als der Inhalt der Zeile
• die wichtigste Aktion ist zu klein oder zu weit unten
• Filter, Chips und Sekundäraktionen belegen zu viel Platz
• eine Liste sieht auf dem Handy wie eine verkleinerte Desktop-Tabelle aus

Was wir in ObjektDesk auf Mobile bevorzugen

• Tabellen werden auf kleinen Breiten in Karten oder kompaktere Zeilen umgewandelt
• Details bleiben sichtbar, aber nicht alles gleichzeitig
• eine primäre Aktion pro Screen, Rest als Sekundäraktion
• Karten zeigen zuerst Objekt, Einheit, Status und Betrag
• Ladezustände und leere Zustände bekommen einen klaren Text

Was wir vermeiden

• Tabellen mit zu vielen Spalten ohne Umbruchstrategie
• Buttons, die mitten im Wort umbrechen
• lange Filterreihen, die den eigentlichen Inhalt verdrängen
• reine Farblogik ohne Text oder Symbol
• verschachtelte Aktionswälder in Tabellenzellen

Praktische Regeln

1. Wenn eine Tabelle auf Mobile nicht lesbar bleibt, wird sie in Karten dargestellt.
2. Wenn eine Zeile mehrere Aktionen hat, bleibt nur die wichtigste direkt sichtbar.
3. Wenn ein Hinweis nur bei genauer Suche auffällt, ist er zu schwach.
4. Wenn ein Zustand leer ist, muss der Nutzer wissen, warum.
5. Wenn ein Screen schon voll ist, wird zuerst reduziert, nicht ergänzt.

Typische Prüf-Fragen

• Kann man die Zeile in drei Sekunden scannen?
• Ist klar, was die Hauptaktion ist?
• Ist die zweite Aktion wirklich nötig oder nur bequem?
• Ist der leere Zustand erklärend statt leer?
• Ist der Screen auf 360 bis 414 px noch sinnvoll bedienbar?

Gute Reihenfolge bei Änderungen

1. Inhalt und Priorität klären
2. Hauptaktion reduzieren
3. Tabelle oder Liste für Mobile umbauen
4. Touch-Ziele und Abstände prüfen
5. Overflow und leere Zustände testen

Bevor du etwas als fertig ansiehst

• Auf Mobile bleibt die Fachlage verständlich
• Die Hauptaktion ist eindeutig
• Die Karte oder Zeile ist nicht überladen
• Es gibt keine versteckten Bedienfallen
• Leere Zustände sind erklärend

Weiter im Detail

• Erste Schritte
• Banking
• Nebenkosten / BKA
• Tickets