it-swarm.com.de

Wie kann ein Benutzer gewarnt werden, dass er sich der Zeichenbeschränkung für ein Texteingabefeld mit einem weichen Maximum nähert?

Ich schreibe eine interne Webanwendung, um Untertiteltext für Videos zu generieren. Teil der Anforderung für dieses Projekt ist, dass jede Zeile X Zeichen nicht überschreitet, außer wenn die Umstände dies rechtfertigen.

Ich möchte nicht unbedingt verhindern, dass der Benutzer mehr als X Zeichen eingibt, aber ich möchte ihnen zeigen, dass sie sich dieser Zahl nähern (und diese möglicherweise überschreiten).

Im Idealfall überschreiten sie normalerweise nicht das Limit. Die Anwendung muss intern von Personen verwendet werden, die eine gewisse Schulung in Best Practices erhalten haben oder diese Art von Arbeit bereits ausgeführt haben. Ich habe versucht, meine eigenen Erfahrungen in das Projekt einzubringen, da ich diese Art von Arbeit vor mir selbst erledigt habe.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Methode 1 - Hochzählen

Ich implementiere einen Zeichenzähler neben dem Texteingabefeld, der von Null bis hochzählt und neu formuliert, um zu zeigen, dass sie sich dem Limit nähern, und dann wieder dramatisch Weg zu reflektieren, dass sie die Grenze überschritten haben.

Methode 2 - Countdown

Ich implementiere einen Zeichenzähler neben dem Texteingabefeld, der vom Limit nach unten zählt und dann neu formatiert, um zu zeigen, dass sie ihr Limit um n Zeichen überschreiten (sagen wir mit negativen Zahlen)?

Methode 3 - Rein grafische Hinweise

Ich implementiere einen Fortschrittsbalken unter dem Eingabefeld, der die weiche maximale Anzahl von Zeichen ausfüllt und dann neu formatiert, um anzuzeigen, dass sie das Limit überschritten haben. Bei dieser Methode kann die genaue Anzahl der Zeichen, um die sie gegangen sind, vor dem Benutzer verborgen werden.

Ich habe eine starke Vorliebe für den Fortschrittsbalken oder für das Aufzählen, hauptsächlich, weil Untertitel extrem kognitiv anstrengend sind und ich nicht möchte, dass der Benutzer übermäßig von genau abgelenkt wird wie viele Zeichen sie noch haben, bis es tatsächlich zu einem Problem wird. Darüber hinaus hat der Benutzer nach 2 oder 3 Eingaben eine gute Vorstellung davon entwickelt, wie viel er eingeben kann, wodurch die Notwendigkeit dieses Warnmechanismus verringert wird.

mockup

bmml Quelle herunterladen

Zusätzlich:

In Bezug auf Ben Brockas Kommentar: Der Kommentarzähler von Twitter und SE ist genau das, was ich eigentlich nicht emulieren möchte. In beiden Fällen geben Sie nur eine Nachricht ein, die Sie innerhalb weniger Minuten sorgfältig erstellen können. Unter diesen Umständen ist ein Zähler angemessen, da Sie ein streng erzwungenes Maximum haben und jedes einzelne Zeichen von Bedeutung ist. In meinem Szenario haben Benutzer nur wenige Sekunden Zeit, um Text einzugeben, und sollten nicht (wirklich, je) ihre Augen zu einem numerischen Zähler ziehen müssen. Mein Fall unterscheidet sich auch darin, dass er ein weiches Maximum verfolgt: Es ist uns egal, ob es manchmal um 3 Zeichen überschreitet.

Darüber hinaus ist der einzige Grund, warum die Stiländerung des SE-Kommentarfeld-Zeichenzählers offensichtlich ist, ohne ihn direkt zu betrachten, der, dass er die Wörter "verbleibende Zeichen" enthält, was ihn zu einem ziemlich großen Bereich macht, dessen Farbänderung wahrgenommen werden kann, ohne ihn direkt zu betrachten. Ich hätte ursprünglich erwähnen sollen, dass das Layout dieser Seite wahrscheinlich ziemlich eng wird.

Bearbeiten 2: Jetzt, wo ich darüber nachdenke, ist eine große Zahl neben dem Eingabefeld (die rote 16 in meinem Modell) wahrscheinlich sehr leicht zu lesen.

25
msanford

Ich habe gesehen, dass Code-Syntax-Textmarker lange Codezeilen anzeigen, indem sie die Farbe des Texts ändern, der den Grenzwert überschreitet.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Der Vorteil dieser Methode ist, dass sie keinen zusätzlichen Platz beansprucht. Es gibt jedoch keinen Hinweis darauf, wie nahe sie dem Erreichen des Limits sind, aber ich denke, Benutzer werden schnell ein Gefühl dafür bekommen, wie viel sie eingeben können, bevor sie das Limit erreichen.

20
Na7coldwater

Warum zeigen Sie das nicht einfach visuell an, da das Soft-Limit auf dem verfügbaren Speicherplatz und nicht auf der tatsächlichen Anzahl der Zeichen zu basieren scheint? Geben Sie ihnen ein Volltextfeld zum Arbeiten und eine Überlagerung, die den begrenzten Speicherplatz anzeigt.

Textbox with boundary showing overflow text

8
KOVIKO

das Textfeld sollte breit genug sein, um die empfohlene Textmenge aufzunehmen, und nicht breiter.

ich gehe davon aus, dass das Limit ungefähr der Breite des Videoplayers entsprechen soll. Gestalten Sie das Eingabefeld so, dass es der Schriftgröße und Schriftart des angezeigten Textes entspricht, und machen Sie es zur Breite des Videoplayers. Wenn der Text über das Eingabefeld läuft, weiß der Benutzer, dass er zu weit gegangen ist

hinweise wie Farbe oder Fortschrittsbalken müssen gelernt werden, und ein Countdown macht es schwierig zu kommunizieren, dass es sich um ein weiches Limit handelt. Die Begrenzung der tatsächlichen Größe des Eingangs ist sofort ersichtlich.

6
notatoad

lassen Sie mich zunächst sagen, dass der Countdown aus meiner Sicht falsch ist. Das Problem, das ich hier sehe, ist, dass Sie bis 0 herunterzählen. Dies würde dem Benutzer nahe legen, dass er das absolute Limit erreicht hat. Da Sie nur eine vorgeschlagene max angeben möchten. das ist nicht was du willst.

Ich mag die beiden anderen Ideen - und finde den Fortschrittsbalken interessant, obwohl er möglicherweise ziemlich unkonventionell ist (was nicht schlecht bedeutet :) Informieren Sie den Benutzer über das vorgeschlagene Zeichen max. in Form einer statischen Beschriftung über dem Eingabefeld. Geben Sie die bereits verwendeten Zeichen an und setzen Sie sie in beide Richtungen in Beziehung, auch wenn der Benutzer das Limit überschreitet. Im Falle des Balkens sollte die Skala immer noch wachsen, wenn mehr Zeichen wie empfohlen verwendet werden.

Generell denke ich, dass die Verwendung von Farben hier durchaus Sinn macht

5
John Sample

JavaScript, um die Anzahl der verfügbaren Zeichen anzuzeigen, die während der Eingabe übrig bleiben? Folgen Sie der Twitter-Benutzeroberfläche und kennzeichnen Sie eine "weiche" Überschreitung mit einem "-".

Blah, das schreibe ich

(-6 Zeichen, zu lang!)

2
Mike Hill

Ich habe in solchen Situationen einen Fortschrittsbalken mit gemischten Ergebnissen verwendet. Die meisten Menschen scheinen den Zweck des Fortschrittsbalkens zu verstehen, sind jedoch verärgert, wenn er aufgrund technischer Einschränkungen beim Messen von Schriftarten mit variabler Breite nicht genau ist. In Fortschrittsbalken ist außerdem eine Metapher für harte Grenzen integriert.

2
sirtimbly

Warum nicht ein einfacher Text?

Vorgeschlagene maximale Anzahl verbleibender Zeichen (x) (i)

Das x steht für einen Zähler und das (i) für ein Symbol, das beim Klicken weitere Informationen und ein gut gestaltetes/formuliertes Beispiel dafür liefert, warum dieses weiche Maximum vorhanden ist. Machen Sie die Zählernummer grün, wenn OK, und orange, wenn Sie den weichen Grenzwert überschreiten. Das ist nicht so dramatisch wie Rot, zieht aber trotzdem die Aufmerksamkeit auf sich.

Ich habe das Gefühl, dass Sie/wir vielleicht versuchen, diesen zu überentwickeln. Zumal Sie bei der Berufsausbildung erwähnen. Dies sind Leute (ich stelle mir vor), die eine gewisse Affinität zu ihrer Arbeit haben (Untertitel schreiben/tippen).

1
Martijn_M

Haben Sie darüber nachgedacht, Kommentare als Benutzertyp bereitzustellen? Wenn Benutzer das weiche Limit erreichen oder sich ihm nähern, wird möglicherweise ein kleines, unauffälliges, gelbes Callout angezeigt mit:

"Seien Sie vorsichtig, diese Beschriftung ist wahrscheinlich zu lang, um auf den Bildschirm zu passen."

Wenn sie auf einer unvernünftigen Ebene von Charakteren fortfahren:

"Dieser Text wird auf dem Bildschirm nicht korrekt formatiert. Wenn möglich, ist eine Kürzung ratsam."

Idealerweise möchten Sie, dass die Beschriftungen ausgeblendet werden, wenn der Benutzer weiter tippt. Ändern Sie möglicherweise den Rand des Eingabefelds in Gelb/Rot, um das Problem anzuzeigen, und zeigen Sie die Beschriftung auf einem langen Mauszeiger des Eingabefelds an.

Dies hat den Vorteil, dass Sie den Benutzern im Voraus mitteilen, warum dies ein Problem ist, sodass selbst ein nicht geschulter Benutzer versteht, dass die Beschriftung nicht zu lange dauert, es sei denn, dies ist unbedingt erforderlich. Es wird auch deutlich, dass Sie nur den erfahrenen Benutzer beraten, anstatt dessen Verhalten zu diktieren.

0
Paul

Ich dachte an die Idee mit farbigem Text, bevor ich die Antwort von Na7coldwater las, die genau das war - eine Änderung der Textfarbe im Eingabefeld wäre wirklich schön - ** Ich mochte die Idee von Na7 wirklich **.

Ich denke, etwas, das wir im Alltag verwenden und in uns eingearbeitet haben, könnte eine gute Lösung sein.

Ampeln oder Ampeln je nachdem, woher Sie kommen.

(soft limit grapich with pop-up labels

Ich DID seine/ihre Idee NICHT abgerissen und du musst mir vertrauen, es ist mir einfach in den Kopf gekommen, bevor ich seine/ihre Antwort gesehen habe, weshalb ich mir die Mühe gemacht habe, ungefähr 45 Minuten zu verbringen Beantwortung dieser Frage!

0
deemyBoy