Skip to content

3 oder 1: Das ist hier die Frage

Seit dem Wochenende haben wir in unserem Bestellprozess für die Eingabe der Telefon-Nummer(n) statt jeweils einem großen Feld das hier:


Eine Frage in die Runde: Findet Ihr diese Variante besser? Oder findet Ihr ein einziges, großes Feld, in das man die Nummer schon halbwegs vor-formatiert (Stichwort: +49-6851-99808-0) eingeben muss, besser?

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Ole

Ich finde die Version am besten, die die Autovervollständigung automatisch ausfüllt.

MSG

Ich sehe den Mehrwert irgendwie nicht, wenn die Vorwahl und die Rufnummer in verschiedene Felder eingetragen wird.


PS: "Wer hier aus SEO- oder anderen Werbe-Gründen auf eine kommerzielle Seite verlinkt, geht einen Vertrag über kostenpflichtige Werbung ein" geile Idee :-))))

NetzBlogR

Ich würde sogar für eine 2-Feld-Variante plädieren: Auswahl des Landes und dann ein Eingabefeld für die Telefonnummer (incl. Vorwahl).

T

Dem schließe ich mich an! Klingt nach der besten Lösung.

Paul Neuhaus

Hab's jetzt natürlich hier nicht getestet, mich stört aber an solchen Aufteilungen immer die Frage, ob die Vorwahl jetzt mit oder ohne führender Null eingegeben werden muss. Hab da schon beide Varianten mehrfach erlebt.
Daher sollte das Vorwahlfeld beides akzeptieren und dann im Hintergrund automtatisch richtig zusammenformatieren.

Insgesamt fände ich aber EIN Feld für Vorwahl + Rufnummer doch besser. Die abgetrennte Länderauswahl kann ich gut nachvollziehen, vor allem als Listenfeld, aber der Rest sollte ein Feld sein, das verschiedene (mehr oder weniger konforme) Formatierungen erlaubt. Bspw:

0140 1234567
140 1234567
0140 123 45 67
+491401234567
usw.

Man sollte halt immer von der nicht vorhandenen Fachkompetenz des Anwenders ausgehen.. ;)

Manuel Schmitt

Die derzeitige Lösung akzeptiert bei der Vorwahl mit und ohne 0.

Alle unnötigen Zeichen bei Vorwahl und Rufnummer werden wegefiltert.

Joern

Ich glaube, der Benutzer kommt mit allen Varianten zurecht und wird das 30 Sekunden später wieder vergessen haben.

Aber wenn du es richtig benutzerfreundlich machen willst, lass ein Feld für die Rufnummer und ein Drop-down (oder was ajax-mäßiges), vorausgewählt anhand der Anschrift, und mach das aufteilen in Vorwahl und Rufnummer, wenn du das brauchst, intern.

Martin

Habt ihr wirklich so viele ausländische Kunden das ich der Aufwand lohnt?

Prinzipiell ist mir bei so einen Eingabe eher wurscht wie sie aufgebaut ist. Es müssen nur 2 Sachen funktionieren:
- Autovervollständigung (Chrome, Chrome Mobile, Safari Mobile)
- Unterstützung von Mobilen Geräten (http://html5doctor.com/html5-forms-input-types tel & email)

Elegant wäre natürlich eine Lösung bei der so wie z.B. bei iOS die Vorwahl automatisch erkannt wird (also dann quasi 2 Felder ... Landesvorwahl und Telefonnummer) aber keine Ahnung ob es dafür eine vernünftige Datenbank gibt

Simon

Das Internet hat letztes Jahr eine umfangreiche UI-Studie mit innovativen Ideen dazu durchgeführt. :D https://imgur.com/gallery/r102w (Und das ist nur ein Bruchteil aller Vorschläge…)

Diese Trennung finde ich sehr nervig, der Chrome-Autofill-Mechanismus neigt dazu dann zweimal die Telefonnummer einfügen.

Imho ist ein einziger HTML5-tel-Input die beste Möglichkeit, das folgt auch dem Standard (https://html.spec.whatwg.org/dev/input.html#telephone-state-%28type=tel%29¹)
Dazu natürlich auch noch die entsprechenden autocomplete-Tags. (https://html.spec.whatwg.org/dev/form-control-infrastructure.html#autofill)

Das tel-Feld führt v.A. auf mobilen Devices dazu, dass das Telefon-Tastenfeld als Tastatur angezeigt wird.

So Sachen wir das Dropdown für die Ländervorwahl oder ggf. Formatierung wie Leerzeichen nach der Ortsvorwahl würde ich dann eher per Javascript und nur für die Anzeige lösen. Google bringt z.B. dieses ganz gut aussehende jQuery-Plugin zu Tage: https://intl-tel-input.com/
Das wählt bspw. auch den passenden Dropdown-Eintrag aus, wenn man eine Telefonnummer mit + und Ländervorwahl eintippt. und validiert das Feld auch gleich noch.

Was btw. auch noch nervig ist, ist die Unterscheidung in Handy- und Festnetz-Nummer. Der autofill-Tag unterscheidet da nämlich nicht und meine Handynummer landet deswegen gerne stattdessen im Festznetzfeld. Eine interessante Lösung fände ich da, einfach n Telefonnummern zu akzeptieren und diese einfach mittels libphonenumber (die verwendet auch das jQuery-Plugin) als Mobilfunk- oder Festnetznummer zuzuordnen.

¹ Der BB-Code-Parser scheitert an den runden Klammern im Anker, wenn man die die nicht manuell in Prozentdarstellung umwandelt…

Sebastian

Holy, bin ja schon etwas raus aus der aktiven "Programmierung" von Webseiten. Aber an was man mittlerweile alles denken muß. Früher hast du n Feld Telefon hingeklatscht und feddich :D

Aber interessant ist es allemal. An Formularen konnte man sich schon immer auslassen. Besonders, wenn man einen Hang zum perfekten Quellcode hat :)

Rince

Meine Erfahrung mit der Vorwahl: Durch das Wappen kann man nicht quasi vorausfüllen - und das richtige Land zu finden empfinde ich dann eher als Qual. Lieber als Textfeld lassen.

Christine

Ein Feld. Denn dann kann ich schneller Copy&Paste machen.

Mo

Maximal zwei Felder: Eins für die Landesvorwahl und eines für die eigentliche Telefonnummer.

Oder vielleicht doch eine von diesen Lösungen? ;)
https://qz.com/679782/programmers-imagine-the-most-ridiculous-ways-to-input-a-phone-number/

Biks

Telefonnummern kopiere ich fast immer von woanders in das Formularfeld, daher würde ich ein einziges Feld bevorzugen.

Außerdem nervt es mich immer, wenn ich die Nummer nicht lesbar strukturieren kann mit Leerzeichen, Schrägstrichen, Bindestrichen oder Klammern.

Kommentar schreiben


Wichtiger Hinweis: Wer hier aus SEO- oder anderen Werbe-Gründen auf eine kommerzielle Seite verlinkt,
geht einen Vertrag über kostenpflichtige Werbung ein. Konditionen und weitere Hinweise.
Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
BBCode-Formatierung erlaubt
Formular-Optionen