← Zurück zu allen Artikeln

Ein Aktionen-Button statt sechs Icons — warum wir jede Tabellenzeile in micali.online neu gestaltet haben

#Aktionen-Button #Tabellendesign #Mobile Bedienung #Usability #Produkt-Update #micali.online
Ein Aktionen-Button statt sechs Icons — warum wir jede Tabellenzeile in micali.online neu gestaltet haben

Es gibt Änderungen, die Sie gleich bei der ersten Anmeldung bemerken, auch wenn der App eigentlich nichts Neues hinzugefügt wurde. Das hier ist genau so eine. Die Zeilen in den Tabellen — Veranstaltungen, Dienstleistungen, Besucher, Nachrichtenvorlagen — endeten bisher mit einer Reihe kleiner Icon-Buttons. Ab jetzt steht an ihrer Stelle ein einziger beschrifteter Button: Aktionen.

Das wirkt wie Kosmetik. Tatsächlich behebt es das, was auf dem Handy am meisten gestört hat — und es ist eine Entscheidung, die eine Erklärung verdient. Icons sind doch schneller. Warum also ein Schritt zurück ins Menü?

Was an den Icons falsch war

Ein Icon ist kein Wort. Bei einem Stift und einem Papierkorb kann man noch raten. Aber in der Veranstaltungsliste standen gleich sechs davon nebeneinander: Herunterladen, Kalender, Teilen, Kopieren, Stift, Papierkorb. Welches davon plant Termine, und welches erstellt eine Kopie der Veranstaltung? Wer es täglich benutzt, merkt es sich. Wer es einmal im Monat benutzt, rät jedes Mal neu — und bei einem dieser Icons ist ein Fehler nicht mehr rückgängig zu machen.

Eine Tooltip-Blase gibt es nur für die Maus. Die Beschriftung, die beim Verweilen mit dem Mauszeiger erscheint, wird auf einem Touchscreen nie angezeigt — ein Finger hat nichts, worauf er „verweilen“ könnte. Auf dem Handy hatten Sie also nur die Form des Piktogramms zur Verfügung, sonst nichts. Und ein Teil der Icons hatte nicht einmal diese Beschriftung: Bearbeiten und Löschen in den Nachrichtenvorlagen waren ganz ohne.

Sie waren klein, und direkt daneben lag die Gefahr. Die Buttons waren 28 Pixel groß, obwohl die empfohlene Touch-Zielgröße bei etwa 44 liegt. Der Papierkorb saß direkt neben dem Stift, in derselben Größe und im selben Grauton.

Auf dem Handy waren sie außerdem hinter der Tabellenbreite versteckt. Auf einem schmalen Bildschirm lässt sich die Tabelle seitlich verschieben, und die Spalte mit den Aktionen war die letzte. Um dorthin zu gelangen, mussten Sie zuerst die ganze Tabelle nach rechts scrollen — und bei der nächsten Zeile wieder von vorn.

Eine Tabellenzeile vorher und nachher
Eine Tabellenzeile vorher und nachher

So sieht es jetzt aus

In der Zeile gibt es einen einzigen Button Aktionen. Was nach dem Klick passiert, hängt vom Gerät ab:

  • Am Computer klappt ein Menü auf, in dem jeder Eintrag ein Icon und ein Wort hat — Veranstaltung planen, Teilen, Kopieren, Bearbeiten, Löschen.
  • Auf dem Handy öffnet sich von unten ein Panel über die gesamte Bildschirmbreite, mit fingergerecht großen Zeilen. In seinem Kopf steht der Name des Datensatzes, mit dem Sie gerade arbeiten — die E-Mail des Besuchers, der Name der Veranstaltung. Bei einer langen Liste ähnlicher Zeilen ist das wichtiger, als es klingt.
  • Löschen und andere unumkehrbare Aktionen sind durch eine Linie abgetrennt und rot. Nicht grau und direkt neben Bearbeiten.
  • Auf dem Handy steht die Spalte mit den Aktionen am Anfang der Zeile — direkt hinter dem Kontrollkästchen, falls die Tabelle eines hat. Also genau dort, wo Sie sie sehen, ohne seitlich zu scrollen. Am Computer ist sie rechts geblieben, genau dort, wo sie bisher war.
Das Menü Aktionen am Computer
Das Menü Aktionen am Computer
Auf dem Handy öffnet sich das Panel von unten, und die Spalte Aktionen steht an erster Stelle
Auf dem Handy öffnet sich das Panel von unten, und die Spalte Aktionen steht an erster Stelle

Warum ein Button und keine Icons

Icons sind eine Abkürzung für etwas, das Sie schon kennen. Sie funktionieren hervorragend, wenn es wenige davon gibt und Sie sie täglich benutzen — der Pfeil zurück, das Kreuz zum Schließen. Bei sechs Aktionen, von denen Sie die Hälfte nur gelegentlich brauchen, kehrt sich der Vorteil um: Sie sparen eine halbe Sekunde beim Klick und zahlen dafür mit Sekunden des Nachdenkens und gelegentlichen Fehlklicks.

Ein einziger Button teilt eine schwierige Entscheidung („welches der sechs Bildchen ist meins?“) in zwei einfache auf: Ich möchte etwas mit dieser Zeile tun — und dann lese ich es nach. Lesen ist langsamer als das Erkennen einer Form, irrt sich aber nie.

Dahinter stecken auch drei praktischere Gründe:

  • Die Zeile dreht sich um Daten. Name, E-Mail, Datum, Kapazität — das ist die Information, wegen der Sie sich die Liste ansehen. Sechs Icons am Ende jeder Zeile sind visuelles Rauschen, das sich so oft wiederholt, wie Sie Zeilen haben.
  • Überall gleich. Umgestellt haben wir 28 Tabellen auf 18 Bildschirmen — einschließlich aller sieben auf der Seite Besucher. Sie lernen es einmal, und es gilt in der ganzen App.
  • Es lässt sich erweitern. Eine neue Aktion ist ab jetzt eine neue Zeile im Menü, nicht ein weiteres Icon, das die Tabelle noch stärker in die Breite drückt. Zwei Aktionen, die vorher eine eigene Spalte beansprucht haben — das Verwenden einer Nachrichtenvorlage und das Bearbeiten einer Dienstleistungsbestellung — sind damit direkt ins Menü gewandert, und die Tabellen wurden um eine Spalte schmaler.

Der Preis dafür ist ein zusätzlicher Klick am Computer. Wir wussten davon, als wir uns entschieden haben, und haben ihn akzeptiert: Ein Klick kostet eine halbe Sekunde, ein versehentlich gedrückter Papierkorb kostet deutlich mehr.

Wo Sie es sehen werden

So umgebaut haben wir alle Listen in der App: Veranstaltungen und Dienstleistungen, alle Reiter der Seite Besucher (Besucher, Buchungen, Dienstleistungsbestellungen, Listen, Blacklist), Vorausbezahlte Pläne und deren Mitgliedschaftsnutzung, Nachrichtenvorlagen, Formulare und ihre Antworten, Verfügbarkeit von Dienstleistungen, Webhooks sowie Kontobenutzer.

Sie müssen nichts einschalten oder einrichten — die Änderung ist bereits jetzt in der App und in allen 31 Sprachen, in denen micali.online läuft. Falls Ihnen in einem Menü eine Aktion fehlt, die Sie dort erwarten würden, schreiben Sie uns: Die Liste der Zeilenaktionen liegt jetzt an einem Ort und lässt sich einfach ändern.

micali.online testen