it-swarm.com.de

Aufteilen der Felder für Kreditkartennummern in vier verschiedene Eingaben

Ich habe zuvor 4 Felder für die Kreditkartennummer verwendet und jeden Satz von 4 Nummern aufgeteilt, um die Eingabe zu erleichtern.

Ich denke jetzt darüber nach, ein Feld zu haben, das stattdessen nach jedem Satz von Zahlen Leerzeichen einfügt:

(single field with spaces between groups of four digits, and old field with four separate boxes

Bei einem Feld mit 4 Feldern springt der Cursor automatisch zum nächsten Feld.

Welches Format wird bevorzugt? Oder gibt es andere bessere Alternativen?

Ich akzeptiere nur Visa, Mastercard und Discovery mit 16 und 17 Ziffern.

114
Source

Ich würde mich im Allgemeinen immer für die einfachste Lösung entscheiden. In diesem Fall ein einzelnes Feld, in das der Benutzer eingeben kann.

Mit geteilten Feldern, wie dem von Ihnen vorgeschlagenen 4-Box-Feld, wird dem Benutzer eine zusätzliche kognitive Belastung hinzugefügt.

  • "Muss ich manuell zu jedem Feld springen?"
  • "Wird das System das für mich tun?"
  • "Was ist, wenn ich tab selbst drücke, aber das Formular automatisch springt - wird es stattdessen in das 3. Feld gesprungen sein ...?"

All diese zusätzlichen Fragen - vielleicht unbewusst, vielleicht in ihren Köpfen an vorderster Front - sind keine Fragen, die sogar in einer einzigen Feldform betrachtet würden.

Sicher, 4-Feld-Optionen verbessern die Lesbarkeit. Wenn der Benutzer also seine Nummer falsch eingegeben hat, kann er seine Eingabe leichter erneut lesen, um festzustellen, in welchem ​​Bereich er etwas falsch gemacht hat. Dies kann jedoch in einem einzigen Bereich noch gemildert werden. Wie oben gezeigt, können Sie die Benutzereingaben mit Leerzeichen in einem einzelnen Feld rendern.

Eine weitere Überlegung betrifft mobile Benutzer . Während es auf einem Desktop durchaus einfach sein kann, verfügt ein Mobiltelefon über eine Tastatur, die beim Betreten des Feldes geöffnet und geschlossen werden muss. Verschiedene Geräte und Betriebssysteme verhalten sich unterschiedlich, aber es ist sehr wahrscheinlich, dass sich die Tastatur beim Sprung von Feld 1 zu Feld 2 automatisch schließt und automatisch öffnet, was zu einem störenden Blitz auf dem Bildschirm führt, wobei der Benutzer möglicherweise versucht, auf die 5. Ziffer zu klicken, sobald die Tastatur geschlossen wird Dadurch wird der Cursor ganz in einen anderen Bereich des Bildschirms bewegt oder diese Ziffer fehlt ganz in der Eingabe.

Dieses mobile Problem wird auf Baymard-Blog gut dargestellt, wo sie auch darauf hinweisen, dass mobile Benutzer dazu neigen, manuell in jedes Feld zu drücken - etwas, das Desktop-Benutzer nicht so oft tun.

Ihr Vorschlag ist eine nette Idee, aber ich denke, er fällt in die Kategorie "Überentwicklung". Sofern Sie keine signifikanten Benutzereingabefehler in einem einzelnen Feld bemerken, müssen Sie meiner Meinung nach keine Alternative einführen. Sie könnten riskieren, die Benutzerfreundlichkeit zu verringern, anstatt sie zu verbessern.

246
JonW

Diese Antwort und diese Antwort decken einige der Punkte gut ab, aber aus irgendeinem Grund spricht niemand über die Unterstützung des automatischen Füllens.

Verwenden Sie keine 4 separaten Felder.

  • Erstens ist es ärgerlich, dass viele dieser Gründe in den anderen Antworten behandelt werden.
  • Auch eine CC-Nummer ist nicht vier vierstellige Zahlen, es ist eine einzelne lange Zahl. Einige Kreditkarten haben nicht einmal Vierergruppen. In diesem Fall ist Ihre Eingabe mit vier Feldern nicht einmal sinnvoll, zum Beispiel:

    (enter image description here

  • Die eigentliche, die ich hinzufügen möchte, ist, dass einige Browser die Möglichkeit bieten, Kreditkarteninformationen für Sie auszufüllen. Chrome zum Beispiel verfügt über diese Funktionalität, und Safari unter iOS 8 wird diesen Feldern automatisch eine kamerafähige Schaltfläche "Kreditkarte scannen" hinzufügen wenn Sie sie richtig erstellen (siehe dieser Artikel). Das real "perfekte" CC-Feld aus UX-Sicht ist also ein einzelnes Feld mit dem entsprechenden Feldnamen (wie "Kreditkartennummer") und den entsprechenden browserspezifischen Triggerattributen (wie _autocomplete="cc-number"_ und _id="cc_number"_).

Versuchen Sie nicht, Ihre eigene "bequeme" Eingabemethode dafür zu erfinden. Halten Sie sich an dieselben Standardmethoden zur Eingabe von Kreditkartennummern, die bereits häufig verwendet werden (einzelnes Feld, entsprechender Name und Attribute), da Browserentwickler bereits sind Bemühen Sie sich, die Benutzeroberfläche dieser Art von Feldern zu verbessern, damit Sie sie auf der Browserseite handhaben lassen und den Benutzern etwas geben, mit dem sie vertraut sind, anstatt etwas Unpraktisches, das auch das Feld ausführt Risiko, alle Funktionen von Nice zu beschädigen, die ihnen ihr Lieblingsbrowser normalerweise bietet.

143
Jason C

Als jemand, der zufällig virtuelle Kreditkarten verwendet, bin ich stark für ein einzelnes Feld. Jedes Mal, wenn ich bezahlen möchte, wird von der Banking-App eine neue Kartennummer für mich generiert, und es ist sehr mühsam, vier statt einer einmal kopieren und einfügen zu müssen. Ich gehe hier davon aus, dass Ihr Formular die 4 Felder nicht ausfüllt, wenn ich 16 Ziffern in das erste einfüge. Wird es?

Außerdem habe ich mehrere 4-Feld-Designs gesehen, die unglaublich schwer zu bedienen waren. Manchmal drücken Backspace musste in anderen Fällen mit einem Tippfehler zu einem Feld zurückkehren Shift+Tab wurde benötigt. Manchmal wurde für das Feld, zu dem Sie gesprungen sind, der Text vorgewählt oder gelöscht, sodass es im Grunde unmöglich war, das Verhalten des Formulars vorherzusagen, ohne es nach jedem Tastendruck zu beobachten.

Geben Sie mir einfach ein Feld, in das ich eine Kartennummer einfügen kann, und lassen Sie mich verwenden Backspace Tippfehler zu beheben, wenn ich die Nummer manuell eingebe. hier ist etwas, das akzeptabel aussieht:

$('#test_form').on('keyup', function(e){
    var val = $(this).val();
    var newval = '';
    val = val.replace(/\s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%4 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})  
66

Die einfachste, wenn nicht unbedingt die absolut beste Lösung ist ein einzelnes Kreditkartenfeld, in das ein Benutzer eine beliebige Ziffernfolge eingeben kann nd Leerzeichen. Es sollte für die serverseitige Logik trivial sein, die Leerzeichen aus der übermittelten Zeichenfolge zu entfernen, bevor überprüft wird, ob die resultierende Ziffernfolge eine gültige Kreditkartennummer ist oder nicht. Wenn der Benutzer führende oder nachfolgende Leerzeichen eingeben oder die Ziffern an verschiedenen Stellen in die auf der Karte angegebenen Ziffern aufteilen möchte, was dann?

Das automatische Einfügen der Leerzeichen für den Benutzer ist möglicherweise etwas benutzerfreundlicher, erfordert jedoch viel mehr Arbeit.

Mehrere Felder mit automatischer Registerkarte von einem zum nächsten sind in Ordnung. Wenn Sie jedoch andere Karten als Mastercard/Visa verwenden, ist es eine Menge Arbeit, die Feldlängen für den Kartentyp anzupassen (z. B. 4,6,5,0 für Amex) on the fly (dh in einem browser-seitigen Skript). Auf einer Website eines Kartenunternehmens, die per Definition immer nur eine Art von Karte verwendet, ist dies klar und einfach. [Bearbeiten: OK-ish. Andere Antworten zeigen an, warum dies für einige Benutzer ein Nachteil ist.]

Die Weigerung, den Benutzer Leerzeichen betreten zu lassen, ist benutzerfeindlich. Es ist wirklich abscheulich, dem Benutzer zu erlauben, Leerzeichen einzugeben und die (korrekte!) Kartennummer nach der Übermittlung als ungültig abzulehnen, insofern, als ich diesem Einzelhändler zu diesem Zeitpunkt meine Gewohnheit verweigern und stattdessen bei dem kaufen könnte, der früher meine zweite Wahl war.

22
nigel222

Luke Wroblewski, ein UX-Experte mit hervorragenden Einsichten in das Erstellen effizienter Formulare, beantwortete diese Frage: verwenden Sie ein einzelnes numerisches Eingabefeld (hier ist ein Video, wie dies funktioniert ).

Wie Sie im obigen Video von Zacharys Demo sehen können, wird ein einziges Eingabefeld verwendet, um zuerst die Kreditkartennummer zu erfassen. Wenn die Kreditkartennummer ungültig ist, wird ein Fehler angezeigt, der den Benutzer daran hindert, sich vorwärts zu bewegen. Wenn die Kreditkartennummer gültig ist, ändert sich das allgemeine Kreditkartensymbol entsprechend dem eingegebenen Kartentyp. Dadurch entfällt die Notwendigkeit einer separaten Dropdown-Liste oder eines separaten Selektors für den Kreditkartentyp, und es wird jemandem versichert, dass sein Eintrag verstanden wurde.

Sobald die Kreditkartennummer validiert ist, wird sie nach links verschoben, wobei nur die letzten vier nachgestellten Ziffern als Referenz übrig bleiben. Die nächsten Eingaben werden in der Maske angezeigt: Ablaufdatum, CVV-Code (Sicherheitscode) und Postleitzahl. Da dies alles numerische Eingaben sind, ist nur ein 0-9-Satz von Softkeys erforderlich, um die Personen auf der Tastatur in Bewegung zu halten.

Da das Ablaufdatum einer Kreditkarte nicht in der Vergangenheit oder in ferner Zukunft liegen kann, hilft die Eingabemaske erneut dabei, Personen vor Fehlern zu schützen. Ungültige Monate oder Jahre werden einfach nicht akzeptiert. Nachdem ein gültiges Ablaufdatum hinzugefügt wurde, bietet das Design von Square eine weitere hervorragende Verbesserung. Das Kreditkartensymbol ändert sich und zeigt an, wo sich der CVV-Code auf der jeweiligen Karte befindet, mit der bezahlt wird. Dieses kleine Detail hilft dabei, die Leute darauf aufmerksam zu machen, welche Informationen als nächstes benötigt werden.

Da CVV und Zip ebenfalls numerische Einträge sind, gibt es keinen Grund, das Wähltastenfeld während des gesamten Zahlungseingabeprozesses zu verlassen: Es ist kein Wechseln zwischen mehreren Formularfeldern erforderlich. Zachary hat auch dafür gesorgt, dass die Benutzer mit ihrer Tastatur (Tabulator und Umschalttaste) und ihrer Maus zwischen den verschiedenen Teilen dieser Zahlungseingabemaske wechseln können.

8
David Regev

Bitte folgen Sie den Ratschlägen anderer und versuchen Sie nicht, das Rad neu zu erfinden. Nur wenn Sie die ISO-Norm ISO/IEC 7812 gelesen und verstanden haben, die Zahlungskartennummern regelt, die übrigens zwischen 13 und 19 Stellen liegen und normalerweise (aber nicht immer - die Spezifikation lesen) Fügen Sie eine Prüfziffer hinzu, mit der Sie die Eingabe validieren können.
Das Einfügen von Leerzeichen, in denen es keine gibt, ist fast immer eine schlechte Idee. Denken Sie an alle möglichen Kombinationen, mit denen Sie sich befassen müssen. automatisch gefüllt, wird zum Auffüllen der automatischen Füllung verwendet. Ohne Leerzeichen eingefügt, mit Leerzeichen eingefügt, zur Verwendung an anderer Stelle ausgeschnitten (sollte der Schnitt die Leerzeichen enthalten?), Eingegeben, bearbeitet und am Ende des Tages, welches Problem möchten Sie lösen?

5
Paul Smith

Ich denke Card.js ist meine Lieblingsbenutzererfahrung beim Hinzufügen von Karten. Sie können damit nicht nur sehr schnell (einzelne Felder usw.) eingeben, sondern auch anzeigen, wo sich diese Felder auf Ihren Karten befinden, sodass Sie sich nicht fragen müssen, wo das Ablaufdatum oder der CVV liegt. Ich empfehle Ihnen, es auszuprobieren.

4
Mariusz Ciesla

Ein kleiner zusätzlicher Punkt, von dem ich nicht glaube, dass er an anderer Stelle angesprochen wird: Eine einzelne Box ist leichter zugänglich, insbesondere auf Systemen ohne eine vollständige Suite von Eingabehilfen-Tools:

  • Es wird skaliert, wenn das Fenster gezoomt wird (nur das Zoomen eines Browserfensters hinterlässt beim Cursor immer noch eine dünne Linie, die schwer zu finden sein kann - ein Pixel, wenn ich auf dieser Seite in Firefox/Windows teste)
  • Das Tabulieren zwischen Feldern verhält sich vernünftig (Shift-Tab nicht vergessen).

  • Dies mag nicht mehr zutreffen, aber einige Bildschirmleser hatten Probleme mit unbeschrifteten Eingabefeldern - dies mag bei Spracheingabetechnologien immer noch der Fall sein, aber ich habe sie nicht verwendet.

Ich sage nicht, dass Sie nicht eine zugängliche (und standardkonforme) Eingabe mit separaten Feldern erstellen können, aber ein einzelnes Feld ist für Sie und Benutzer, die atypische Schnittstellen benötigen (oder wollen), einfacher.

0
Chris H

Bitte tun Sie aus Liebe zu Gott nicht die zweite Option.

ein RIESIGER UX-Fehler ist (was die meisten Websites bei der Implementierung dieses Shutter tun), dass Sie nicht zurückkehren können, um die Zahlen zuvor zu bearbeiten, da Sie automatisch gezwungen werden, zum nächsten Feld zu wechseln, seit Sie es ausgefüllt haben aus den Daten.

Vergessen wir nicht, dass beim Erstellen mehrerer Felder der Eindruck entsteht, als würden Sie verschiedene Informationen füllen. In Ihrem Design sieht es so aus, als wäre möglicherweise das letzte Feld für den "Sicherheitscode".

Wenn Sie es zu einem Feld machen, bedeutet dies einen Teil der Zahlen (aber machen Sie bitte das, was Sie in Option 1 getan haben: Einrücken, da dies genau das gleiche Format wie Ihre Karte anzeigt).

Wenn Sie Kreditkartendaten ausfüllen, möchten Sie dem Design der tatsächlichen physischen Karte nahe kommen, da Benutzer dann die Karte scannen und nachschlagen können, um die gerade gescannten Informationen hinzuzufügen. Das Durcheinander bringen zu Verwirrung und Frustration (aufgrund meiner jahrelangen Erfahrung in der E-Commerce-Welt).

0
Majo0od