it-swarm.com.de

Abschneiden von langen Textbeschriftungen - Best Practices?

Ich habe mich gefragt, ob es Studien zu abgeschnittenen Etiketten gibt, falls sie jemals zu lang werden und Layouts dies nicht beheben können. Verwirrt es Benutzer, wenn ein Etikett mit einem Auslassungszeichen in der Mitte eines Etiketts wie folgt abgeschnitten wird:

  • LabelBeginning ... LabelEnd

    oder

  • LabelBeginning (...) LabelEnd

Wenn ich verschiedene Richtlinien für Textstile vergleiche, gibt es verschiedene Ansätze. Apple schneidet beispielsweise lange Etiketten mit einer Ellipse in der Mitte eines Etiketts ab, was meiner Meinung nach eine großartige Lösung ist, da es meiner Meinung nach widerspiegelt, wie Personen ein Etikett scannen und identifizieren (Anfang und Ende).

"Ein Ellipsenzeichen kann auch anzeigen, dass in einem Dokumenttitel oder Listenelement mehr Text als Platz zum Anzeigen vorhanden ist. Wenn beispielsweise der Name eines Elements zu lang ist, um in ein Menü oder ein Listenfeld zu passen, sollten Sie dies tun Fügen Sie ein Ellipsenzeichen in die Mitte des Namens ein, wobei der Anfang und das Ende des Namens erhalten bleiben. Dadurch wird sichergestellt, dass die Teile des Namens, die am wahrscheinlichsten eindeutig sind, weiterhin sichtbar sind. "

Microsoft schlägt vor, das Abschneiden von Beschriftungen nach Möglichkeit zu vermeiden, geht jedoch nicht auf die Implementierung einer Ellipse in langen Beschriftungen ein.

"Ellipsen bedeuten Unvollständigkeit. Verwenden Sie Ellipsen im UI-Text wie folgt:

Befehle. Geben Sie an, dass ein Befehl zusätzliche Informationen benötigt. Verwenden Sie keine Auslassungspunkte, wenn eine Aktion ein anderes Fenster anzeigt - nur wenn zusätzliche Informationen erforderlich sind. Befehle, deren implizites Verb darin besteht, ein anderes Fenster anzuzeigen, enthalten keine Auslassungspunkte wie Erweitert, Hilfe, Optionen, Eigenschaften oder Einstellungen.

Daten. Geben Sie an, dass der Text abgeschnitten ist.

Beschriftungen. Geben Sie an, dass eine Aufgabe ausgeführt wird (z. B. "Suchen ...").

Tipp : Abgeschnittener Text in einem Fenster oder einer Seite mit nicht verwendetem Speicherplatz weist auf ein schlechtes Layout oder eine zu kleine Standardfenstergröße hin. Streben Sie nach Layouts und Standardfenstergrößen, die die Menge an abgeschnittenem Text eliminieren oder reduzieren. ""

13
spunkypixels

Zusammenfassung: Es kommt darauf an, aber standardmäßig 'abcdef ...' über 'abc ... def'

Ich würde die Methode basierend darauf wählen, ob Text am Ende oder in der Mitte der Zeichenfolge das Element eher differenziert. Dies wäre abhängig von der Domäne (daher denke ich nicht, dass isolierte Studien aus bestimmten Kontexten hilfreich wären).

Auf einer Immobilienwebsite beispielsweise endet eine Adresszeichenfolge normalerweise mit "Straße" oder "Straße". Das Formular 'abc ... def' wird also nicht viel verwendet, da die endgültigen Zeichen fast immer 'oad' oder 'eet' sind, was dem Benutzer nicht hilft.

Wenn die Antwort nicht klar ist, würde ich standardmäßig das Formular 'abcdef ...' über 'abc ... def' verwenden. Dies liegt daran, dass ich stark vermute, dass Teilwörter aus den Anfangszeichen leichter zu erraten sind als aus den Endzeichen. 'Openi ...' ist zum Beispiel viel besser zu erkennen als '... ening'. Dies liegt daran, dass viele englische Wörter nicht eindeutige Suffixe und Endmuster haben.

6

Die Verwendung von Ellipsen hat den Nachteil, dass die Ellipse selbst Platz beansprucht, der stattdessen verwendet werden könnte, um mehr der tatsächlich nützlichen Informationen anzuzeigen. Insbesondere wenn Sie die Ellipse an beiden Enden verwenden, können Sie eine Alternative zu dem Platz in Betracht ziehen, bei dem drei Punkte verschwendet werden: Ausblenden des Texts über die letzten Zeichen. Der Text bleibt lesbar, aber das Ausblenden gibt einen Hinweis darauf, dass mehr Text zu haben ist.

Zum Beispiel:

example of using a fade effect instead of Ellipsis

( Quelle des Bildes)

Natürlich ist es immer besser, dies nicht auf Etiketten tun zu müssen, also versuchen Sie es auf jeden Fall zu vermeiden, aber wenn Sie wirklich zwischen einem Felsen und einem harten Ort stecken, könnte dies eine Lösung sein.

3
André

Es gibt eine nicht geschriebene Regel, die stattdessen in Stein gemeißelt zu sein scheint, um Etiketten nicht zu brechen.
Möglicherweise würden viele Layouts schlecht brechen, wenn man versuchen würde, eine zweizeilige Beschriftung zu setzen, was eine Erklärung sein könnte.
Das heißt, ich würde ein langes Etikett nicht abschneiden, sondern es in so viele Zeilen wie nötig aufteilen und auch den (langweiligen) regelmäßigen Abstand zwischen Etikett und Feldkadenz im Formularentwurf aufheben.
Das Grundprinzip ist, dass das Formular nach den Wünschen des Benutzers gestaltet werden muss und dass es für ihn besser ist, die Benutzer nicht mit kniffligen, nicht benötigten Interaktionen (wie dem Klicken auf Auslassungspunkte) zu verwirren, als sie nicht mit abgekürztem Text zu verwirren, der sich möglicherweise dreht für einen fremdsprachigen Sprecher kryptisch zu sein.
Wenn Sie die Etiketten optimieren, um eine einheitliche Gestaltung zu erzielen, wird die Form vor den Inhalt gestellt.
Lässt den grausamen Designer über das Verlangen des Benutzers nach Klarheit herrschen.

2
Juan Lanus

Wo es wirklich notwendig ist, ein Etikett abzuschneiden, wo die Ellipsen platziert werden, hängt von den Daten ab. Die Standardeinstellung ist normalerweise am Ende. Bei einigen Daten ist es jedoch besser, einen Teil des Anfangs und des Endes zu sehen. Letzteres nimmt jedoch mehr Platz ein, da Sie sowohl am Anfang als auch am Ende genügend Zeichen anzeigen müssen. Bei anderen Daten, z. B. Zahlen, ist es besser, die Ellipsen am Anfang anzuzeigen - wenn die letzten Ziffern am wichtigsten sind. Sie sollten jedoch versuchen, dies zu vermeiden, wie in anderen Beiträgen erwähnt.

2
Paul

Das Beschneiden eines Etiketts ist in gewisser Weise selbst ein Fehler, aber ich weiß manchmal, dass wir trotz unserer besten Bemühungen in unvermeidlichen Situationen eingeklemmt werden.

Eine Möglichkeit besteht darin, am Ende des verfügbaren Speicherplatzes Elipsen zu verwenden, diese jedoch zu einer knopfartigen Sache zu machen (keine graue Standardschaltfläche, sondern etwas, das offensichtlich anklickbar ist, sich aber besser in den angehängten Text einfügt). Wenn Sie darauf klicken, wird die "Schaltfläche" in den verbleibenden Text erweitert, der auch diesen "Schaltflächen" -Stil aufweist. Wenn Sie auf den erweiterten Text "Schaltfläche" klicken, wird er wieder in die Schaltfläche mit den Ellipsen eingeblendet.

Zuerst dachte ich, ich mache eine Hover-Aktion, um den vollständigen Text anzuzeigen, aber das funktioniert auf Touch-Geräten nicht.

0
obelia