Wie wir verhindert haben, dass der Text beim Einblenden von Zeichen verrutscht
Ist Ihnen schon einmal aufgefallen, dass der gesamte Text kurz zur Seite ruckelt, nur weil Sie den Cursor auf einen Listeneintrag bewegen? Bei Editoren, die Symbole ein- und ausblenden, kommt das fast immer vor.
Wenn ich die Einfügemarke bewegte, um eine Liste zu bearbeiten, wurde der Text zur Seite geschoben. Sobald die Einfügemarke den Bereich verließ, kehrte er wieder zurück.
Zwar bewegte sich nur eine Zeile, doch es sah aus, als würde der gesamte Absatz wackeln. Dieser kleine Unterschied unterbrach immer wieder den Bearbeitungsfluss.
Die Ursache war die Breite des Markers.
Normalerweise ist auf dem Bildschirm ein rundes Aufzählungszeichen zu sehen. In der Datei sind jedoch ein Bindestrich und ein Leerzeichen gespeichert. Wenn die Einfügemarke den Marker berührt, muss der Originaltext angezeigt werden, damit er direkt bearbeitet werden kann.
Das Problem ist, dass die beiden Darstellungen unterschiedlich viel Platz einnehmen. Das Aufzählungszeichen befindet sich in einem Kasten mit festgelegter Breite, während die Breite von Bindestrich und Leerzeichen von der Schriftart abhängt. In mote betrug dieser Unterschied 4,9 px. Jedes Mal, wenn der Originaltext erschien, wurde der nachfolgende Text um genau diesen Abstand verschoben.
Wir verschieben die Zeile um die Breitendifferenz
Wir haben die beiden Breiten nicht identisch gemacht. Stattdessen gleichen wir den Unterschied aus.
In dem Moment, in dem der Marker zum Originaltext wechselt, wird die gesamte Zeile um die Breitendifferenz in die entgegengesetzte Richtung verschoben. Die Form des Symbols ändert sich, aber die Stelle, an der der Fließtext beginnt, bleibt unverändert.
Die Datei wird nicht verändert. Das Aufzählungszeichen ist eine Dekoration, die über den Bindestrich gezeichnet wird, und die Korrektur verändert lediglich die Position, an der die Zeile auf dem Bildschirm gezeichnet wird. Auch wenn die Einfügemarke den Bereich betritt und wieder verlässt, bleibt der gespeicherte Inhalt unverändert.
Auch die Grundlage für die Berechnung der Breite haben wir vereinheitlicht. Zuvor gab es an der Stelle, an der der Marker gezeichnet wurde, und an der Stelle, an der die Zeile korrigiert wurde, jeweils einen eigenen Zahlenwert. Der kleine Unterschied zwischen diesen beiden Werten entsprach genau diesen 4,9 px.
Jetzt fragen beide Stellen dieselbe Funktion nach der Breite des Markers. Da es nur noch eine gemeinsame Grundlage gibt, können die Werte auch nicht mehr voneinander abweichen.
Wenn der linke Rand jedoch nicht genügend Platz bietet, wird keine Korrektur vorgenommen. Der Text könnte sonst beim Verschieben der Zeile außerhalb des Fensters abgeschnitten werden. Denn verschwindender Text ist ein größeres Problem als ein Wackeln.
Bei Überschriften und Zitaten haben wir die Verschiebung beibehalten
Anfangs haben wir dieselbe Methode auch auf Überschriften und Zitate angewendet.
Doch das # einer Überschrift und das > eines Zitats nehmen in der normalen Ansicht eine Breite von 0 ein. Um den Fließtext zu fixieren, hätten die Symbole in den linken Rand hinausgeschoben werden müssen.
Technisch funktionierte das gut. Der Text bewegte sich nicht. Doch die Ansicht wirkte ungewohnt. Es sah unnatürlich aus, dass das Symbol separat im Rand schwebte.
Deshalb haben wir diese Änderung rückgängig gemacht. Wenn heute die Symbole von Überschriften und Zitaten erscheinen, wird der Fließtext nach rechts verschoben.
Letztlich haben wir für jeden Marker eine andere Lösung gewählt.
Bei Markern, die wie Aufzählungszeichen und Aufgaben-Kontrollkästchen auf dem Bildschirm einen Kasten besitzen, bleibt der Fließtext fixiert. Bei Markern, deren normale Breite wie bei Überschriften und Zitaten 0 beträgt, wird der Fließtext verschoben.
Eine natürlich wirkende Ansicht war wichtiger als eine einheitliche Regel.
Symbole werden nur dann angezeigt, wenn sie wirklich benötigt werden
Die beste Möglichkeit, das Wackeln zu reduzieren, besteht darin, die Momente zu verringern, in denen sich das Symbol überhaupt verändert.
Jetzt wird ein Aufzählungszeichen nur dann als Originaltext angezeigt, wenn sich die Einfügemarke direkt über dem Symbol befindet. Sobald die Einfügemarke das Leerzeichen passiert und in den Fließtext wechselt, wird sofort wieder das Aufzählungszeichen angezeigt. Während der Inhalt einer Liste bearbeitet wird, muss der Bindestrich nicht ständig sichtbar sein.
Auch wenn eine lange Zeile in die nächste umbricht, bleibt die Ausrichtung erhalten. Selbst während der Marker als Originaltext dargestellt wird, beginnt die zweite Zeile unter dem Fließtext der ersten Zeile.
Auch das Problem, dass ein Klick fälschlicherweise als Ziehen erkannt wurde, haben wir behoben. Wenn der Zeiger in dem Moment, in dem sich der Marker änderte, ein wenig wackelte, wurde häufig Text ausgewählt. Jetzt wird eine Bewegung erst dann als Ziehen gewertet, wenn sich der Zeiger um mehr als 8 px bewegt.
Wir prüfen es mit Zahlen statt mit den Augen
Solche Unterschiede lassen sich nur schwer mit bloßem Auge überprüfen. Auf den ersten Blick scheint alles in Ordnung zu sein, doch bei längerer Nutzung wirkt die Oberfläche unruhig.
Deshalb haben wir einen Test erstellt, der die tatsächliche App startet. Er bewegt die Einfügemarke in den Marker hinein und wieder heraus und vergleicht direkt die x-Koordinaten, an denen der Fließtext beginnt. Nur wenn beide Werte identisch sind, besteht der Test.
Aufzählungszeichen, Aufgaben-Kontrollkästchen und verschachtelte Listen werden alle auf dieselbe Weise geprüft.
Eine Abweichung von nur einem Pixel wird nur selten als Fehler gemeldet. Denn statt zu erklären, was genau sich bewegt hat, empfindet der Benutzer die Oberfläche einfach als „irgendwie unruhig“.
Deshalb müssen solche Bewegungen von Zahlen überwacht werden, nicht von Menschen.
Eine ruhige Ansicht ist keine Ansicht, in der überhaupt nichts geschieht. Sie ist eine Ansicht, in der notwendige Veränderungen dort stattfinden, wo sie nicht störend ins Auge fallen.