「よくあるクソフォームだ!」このクレジットカード入力フォーム、どこが悪いのかわかりますか?

まとめました。
143
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj

@assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか?

2020-09-11 10:46:09
CSS設計完全ガイドの人 / Adobe XD UG札幌代表 / HubSpot CMS Ninja @assialiholic

@ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない(カード番号から判別できるため) ・カード番号入力欄が4つに分かれている(おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK) ・有効期限に独自の並び、形式を使用している(ここでめっちゃハマりました) です!

2020-09-11 10:50:52
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj

@assialiholic なるほど! それは、幾つかの知識がないと「悪い」と気付けない内容ですね。 ・カード番号からブランドが判別できる ・カード番号を1つの入力欄で処理できる(-は無視するとか) ・有効期限に独自の並びを使用しているとハマる← とても勉強になりました。 ありがとうございます!

2020-09-11 10:54:20
てつろう@エンジニア目指したい @dougatetsuro

@assialiholic 入力のしやすさとかも考えてフォーム設計ってするんですね CSSは見た目だけの話かと思ってました😂

2020-09-11 11:04:04
らくからちゃ@スゴいコシフリスト @lacucaracha

@assialiholic 名義人の名前無しで処理しちゃだめよね。きっと。 他はまあどうでも良さそうだけど。 twitter.com/assialiholic/s…

2020-09-11 11:36:12
らくからちゃ@スゴいコシフリスト @lacucaracha

@assialiholic 国際ブランドは最初の4桁辺りで判別つくってのはまあ趣味の問題かなあ。最近は、自動的に判別してロゴを点灯してくれるタイプのものが増えましたね。 番号区切るかどうかは、あったほうが目に優しい感じもするけど、AMEXだと4桁+6桁+6桁なので、そのへんの制御も入れられるのであれば・・・、かな。

2020-09-11 11:42:03
疑 といな @asagaya111

@assialiholic @yontengoP 年月は、意識して入れさすには、いいと思うんだけど。 0も/も気にせず、自然数だけの入力で。

2020-09-11 11:36:42
魔じかるどきん @Magical_dqn

クレジットカードに記載のとおりに入力させてない時点で…… 設計がなってない。 twitter.com/assialiholic/s…

2020-09-11 11:43:43
柚人🌒人事労務園児にあ @yuzu10hryk

これはひどいUI…たまにこういうUI見るとついついご意見ご要望フォームで指摘したくなる twitter.com/assialiholic/s…

2020-09-11 11:43:27
なかがみ @tarobee

こういうの世の中にいっぱいあるし、常にその片棒担いじゃう危険があるから気をつけたい twitter.com/assialiholic/s…

2020-09-11 11:43:25
よんてんごP @yontengoP

ぼくのかんがえた 更にさいきょうにムカつく 入力フォームの例 twitter.com/assialiholic/s… pic.twitter.com/Ye7nqNvfRS

2020-09-11 11:36:40
拡大
snobx @snobx

券面表示に一致するんで、カード番号は分割されていた方がいいな。 1カラムにするのは、番号を暗記してるのが暗黙の前提? セキュリティコードは別画面がええなぁ。 twitter.com/assialiholic/s…

2020-09-11 11:30:20
三神 @nyamamono24

スマホのカメラでの読み取りとかアカウントに保存してるカード番号自動入力させようとしたら上手くいかなそうなフォームだ…… twitter.com/assialiholic/s…

2020-09-11 11:28:09
薙沢 衛 @nagisawa_mamoru

カード番号は4桁区切りで書いてあると間違えにくいし、有効期限はカードに記載されてるフォーマットと同じ(カード会社によって異なる?)なんでわかりやすいと思ってたんだけど、ダメなんですかね・・・? twitter.com/assialiholic/s…

2020-09-11 11:11:36
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj

これが普通のフォームに見えてしまって、何故「悪いフォーム」なのか判らない。 いつも使ってるフォームとの違いで気付くのはこの辺り。 ・氏名入力欄がない ・カード番号は単一の入力エリアじゃない ・有効期限・年を4桁で入れさせる(選択式が多い印象) ・有効期限・月のサンプルは01~09の方が? twitter.com/assialiholic/s…

2020-09-11 10:50:18

コメント

Σさん(RC) @SigmaSan4536 2020年9月11日
AMEXなんか4桁区切りですらないし、4桁区切り自動遷移フォームはほんとクソ。あとはスマホの場合カードをカメラで読み取って自動入力する機能があるものも多いのでそこもフォーム側でしっかり押さえて欲しい。
84
Σさん(RC) @SigmaSan4536 2020年9月11日
HTML5のオートコンプリート属性に準拠したフォームを作ればそもそもクソフォームになりにくいです
47
ろんどん @lawtomol 2020年9月11日
「4桁区切り自動遷移フォーム」で、移動する度に「かな入力モード」になるやつに遭遇したことが…
188
Yeme @yer_meme 2020年9月11日
一番のクソポイントは有効期限っスかねー。これだけでやたら問い合わせ来る奴っスよ。
154
SAKURA87@多摩丁督 @Sakura87_net 2020年9月11日
カード会社を選ばせる←まぁわかる 4桁区切りの自動推移←場合によっては便利 有効期限が独特←○死ね
197
とも @tomtotoro 2020年9月11日
4桁ずつではなく一度に全桁入力は逆だわ。 処理する側、一度にコピペなどで間違いなく入力できる人はいいけど、確認や間違えた時はわかりづらい。16桁もの数字の羅列を自分は間違わないからという前提すぎる
67
デルタ @delta393939 2020年9月11日
有効期限の年月がまぎらわしい。なぜわざわざ日本式で入力させようとする。逆表示の例まで表示して混乱の元にしかならない。
48
[30]Kirara@ありがサンキューツアーズ @Kirara1314 2020年9月11日
有効期限をカード表記どおりに入れさせないフォームとヤード・ポンド法は滅ぼさなければならない(定期
43
Σさん(RC) @SigmaSan4536 2020年9月11日
tomtotoro それはフォームやデータ構造を保ったまま表示の仕方を工夫する(ハイフンを見せるなど)でどうとでもなるんです。見た目のためだけにデータ構造やオートフィルを犠牲にしているという点でクソフォームになるんです。
75
footpeas2 @footpeas2 2020年9月11日
スマホで入力することが多くなったから、数字は自動的に直接入力モードにしてほしいんですよね。
23
foxhanger @foxhanger 2020年9月11日
「めいる」と打って変換するとメアドが出るようにIMEに登録してあるので、IME無効のメアド入力欄にはむかつきます。
79
K.Yanagisawa @K_Yana47 2020年9月11日
入力規制かかっている部分は実際入力してみないとわからないところだけど、ぱっと見「有効期限」だけはレイアウト自体がアウトだろ。
18
不具合さん @tunagaranaisup 2020年9月11日
入力欄は1つでOK これは郵便番号用の入力フォームにも言えるなぁ 何故あんなに区切りたがるのか
54
ぽんぽん @apocalypse1706 2020年9月11日
番号は4桁区切りの方がいいよ、確認しやすいから。
18
ざっぷ @zap3 2020年9月11日
オートコンプリート機能も効かないんよね分割フォーム(クレカのナンバーをオートで入れることの是非はまた別として)。それと例には無いけど英数字を全角で入れろってフォームだと、iOSユーザーはかなり苦労することになるのはどっちが悪いんだ(編集したいのにカーソル位置を自由にさせてくれないiOS滅びよ
35
Σさん(RC) @SigmaSan4536 2020年9月11日
zap3 スペースボタンを長押しすると幸せになれますよ
11
節穴 @fsansn 2020年9月11日
無配慮なタブインデックスが入ってないやん!
0
みさ @misa_exchange_ 2020年9月11日
カード会社の選択は入力するお客さんがどのカードが間違えないように…って言われたことあるなぁ。ボックスの区切りも目視で確認しやすいようにするためだっけ。この辺は意見が分かれると思う。有効期限は満場一致でダメじゃね?
54
みさご @misagoya 2020年9月11日
Webmoney決済するときの分割フォームは確認も入力もしやすくて助かってますが
3
sastgremd @sastgremd 2020年9月11日
zap3 カーソル位置はiOSでも変えられますよ。3D Touch搭載機種ならキーボード上を強く押したあとスライド、 Haptic Touchの機種なら既に言及されてますがスペースボタン長押ししてスライドです。全角英数の出し方は、普通に半角英数をつらつら入力すると変換候補に全角英数版の同じ文字列が出てきます。なのであくまで自分としてはそこまで大変かなぁという印象…。
6
すっとん @stton 2020年9月11日
クレジットカードは4-4-4-4の16桁だけじゃなく、4-6-5のアメックスとか、4-6-4のダイナースとかあるから・・・
33
仰凝亭源蔵@Genzouおじさん a.k.a. クソ署長 @gogot_man 2020年9月11日
この有効期限のヤツ、つい最近ハマったわ… 挙句に表示されるエラーが「このカードは不正です」の一言の上、入力した項目が全部消えるヤツだったから、「まさか何かで不正使用されたんじゃないだろうな…」と不安になって、カード会社に連絡する羽目になったから怒り心頭ですよ。
47
優希(ゆき) @ulbvbdkp23409 2020年9月11日
オートフィルでクレカの番号入力できるのもあるのにこうやって分けられてるのクソ あと上でも言ってるけど数字入力欄なのに遷移するとひらがな入力項目になってるアホシステムはさっさと滅びろ <input type="number">じゃだめな理由とかあるんか?
6
かんだき♪PHS停波までがんばるぞぃ @kandakiRX 2020年9月11日
sastgremd よく「iOSは見た目で操作できてわかりやすい」って聞くけど、その説明を見る限り例外もあるってことですね
19
達入玉 @tatsuiritama 2020年9月11日
メールアドレス入力欄が「」@「」って感じでアットマークを区切りにして分けて入力させるやつあるよね…
57
た ←2m→ け @takebor 2020年9月11日
カード番号は画像読み取りもできるやつにして欲しいやね
0
†△銀猫⛩ @Silnyan_A 2020年9月11日
カードのブランドは選択させる必要なくても、セキュリティ的には選ばせた方がいい気がする。いうて調べたら分かるのかもしれないから本人しか知らないってことはないけど… 番号の入力フォームが4つに分かれてるのはイヤ
2
杏☆ジャム @anzucandy 2020年9月11日
4桁区切りは自動で隣に移動するやつなら好き。確認しやすいから。しかし、いちいち選択しなおさないといけないやつは滅べばいい。入力するときはひと息にやらせてくれ。
16
殿岡@キャプテンはお知らせが読めない @bathtime39c 2020年9月11日
4桁区切りは数字が1234 4456とか連続してる時だと見落としが無くて助かるんだけどなぁ…。
21
phantive @phantive 2020年9月11日
カード会社はサポートしてカードが限定されることもあるので、要件次第。 あとは同意だが、コメント等を見てると、一つ一つ手入力をしてる人が案外多いのがちょっとしたカルチャーショック。
1
Laffy(ΦωΦ)🌸 @Lafiell 2020年9月11日
foxhanger ついでに@の前後で分けてあげる!もちろんコピペ不可!これで間違えないね♪
24
カズマサみんC @mskazumin 2020年9月11日
顧客のクソ上司がOKしたクソレイアウトがクソ正しいです(クソエンジニア)
5
パパ @papa_0226 2020年9月11日
カード番号が15桁しかないAMEXユーザーとしては番号入力欄は1つのほうが良い。
0
うにぼおず @uni_boozu 2020年9月11日
カード会社を選ばせるのは、選択肢がない=使えないなのであってもいいかと。 JCB使えないところ結構あるから。
54
ざっぷ @zap3 2020年9月11日
SigmaSan4536 ありがとうございます!(間違いなく前に聞いたことあるのにすっかり忘れてた……)
2
ざっぷ @zap3 2020年9月11日
sastgremd カーソルはその通りですね、ありがとうございます。全角については、数字だけから変換するならいいんですが、例えば11-22-33とかだと全てが全角の候補って出てこないんですよね…理解はしてるけど、なかなかスッと操作させてくれない……(Androidなら候補には出してくれないが最初から半角指定はできるものが多い)
0
ざっぷ @zap3 2020年9月11日
zap3 あれ?11-22-33ができた。見落としてただけか。申し訳ない
1
さっぴー川原🍶 @sapi_kawahara 2020年9月11日
有効期限にtype="date"があってiPhoneが和暦設定だと罰ゲーム
0
83MHz @83MHz_clock 2020年9月11日
入力頻度的にはクレジットカードの番号入力よりも電話番号が分かれてる方がオートコンプリート的にイラっとする
21
saku @sakuuuuuuune 2020年9月11日
misa_exchange_ いやあ、ボックス分けは桁数が違うブランドがある、自動補完できないので全くもってNG ブランド選択も自動補完できないし、入力始めた時点でブランド名を自動点灯させれば済むから擁護する余地ないよ
10
丁 了 @hinoto_ryo 2020年9月11日
ところでプロダクトキー入力についても似たような経験をしたことがあるのですが(混ぜっ返し)
0
kumonopanya @kumonopanya 2020年9月11日
派遣が作っているから、そんな高い技術力が必要なやつは作れないっすよ。見た目通りに作ればいいだけと言いますが、それが結構苦労するんです。
0
kumonopanya @kumonopanya 2020年9月11日
カードの仕様に沿ってHTML&CSSは設計されて無くて、HTML&CSSの設計に合わせてカード入力などの設計をしなくてはならんす。
1
僕は白菊ほたるちゃん @laressi 2020年9月11日
分割してないのはしてないで は?ハイフンいらねえのかよ死ね っていつもやってる
1
SAKURA87@多摩丁督 @Sakura87_net 2020年9月11日
カード会社を選ばせるのは複数持っている人が間違ったカードを入れるようなポカヨケだとおもう。自動で表示されるのもいいだろうけど、自動だと見ない人や気づかない人も中には居るし、選ばせておけば番号のカード会社と選択した会社が違ったらエラーを出せるので個人的には悪いUIだとは思わない。特に決済に関しては入力欄は多いほどよく、何重にもチェックできるのは悪ではない。その観点から言えば本来の形とスタイルが違う有効期限は完全にクソUI
26
炭酸煎餅 @Tansan_senbei 2020年9月11日
4.5P氏の画像の右下の、場合によってはマジでこれで登録や購入を止めたりするレベルのやつだ
3
さとみん @stm3103_ 2020年9月11日
電話番号の入力欄が3つに分かれてるのとかもイラッとする笑
1
きさらぎ♒ @bubassmc 2020年9月11日
Lafiell 最悪メモ帳に貼り付けてコピペしたりで対応するけどコピペ不可だけは絶許
12
RGB000 @19666_61 2020年9月11日
遷移前にエラーを教えてくれないやつ絶許
2
かるい @karuiurak 2020年9月11日
iPhoneのWalletに登録してあるカード情報から入力出来るならなんでもいいです
0
マカ @pandon2 2020年9月11日
tabキーは飾りなのかしら
2
えびやん @sionchr 2020年9月11日
見ればわかるんだからクソフォームではない。クソフォームというのはカタカナ入力させておいて、(どこにも書いてないのに)入力確定送信後に「半角カタカナで入力しろ」とか言ってくるやつ。全角英語や全角数字のパターンもある。
14
七枝七夏 @7eda7ca 2020年9月11日
住所とかで全角指定もイラッとする
26
猫とアスパラガス @nekoparagus 2020年9月11日
メアド入力コピペのほうが間違えないと思うんだけど作ってる側の統計的には違うのかな?
1
lonngfa @lonngfa 2020年9月11日
クレジットカードの番号や電話番号は、入力時は全桁いっぺんに入力するけど入力フィールドを抜けるとハイフンで区切って表示される、ってのがわかり易かったです
27
ぷりん @printai100 2020年9月11日
セキュリティコードが同一画面なのが一番クソ仕様やろ。
10
アリア @ariatogetter 2020年9月11日
秘密の質問「好きな食べ物はなんですか?」→秘密の答え「そういえば今日エイリアンみたわ(笑)」
7
狐謡 @Towa_towa_to 2020年9月11日
良くあるフォームなんでぶっちゃけ慣れた。
5
TOPNEP @nepnofan 2020年9月11日
apocalypse1706 だからフォームの出来が悪いといってるのでは? 表示方法
7
ma08s@フォロー外からごめんなさい @bygzam_ma08s 2020年9月11日
不正入力/利用防止の観点もあるんかな? と勝手に思って、この程度の手間は気にもしない奴隷根性なオレ。それよか、名義人の入力欄がないのはええのか?
7
ハイホー @Ho__Hi 2020年9月11日
電話番号を入力しようとするとブラウザの親切で市外局番のところに全桁が
6
くまラブ @yuki_korotyan 2020年9月11日
カード番号で会社が識別できるからそれ使えとか、仕様作った時に依頼側が言えー!こっちはエスパーじゃないんだから、入力データや要件はキッチリ書き出して伝える、こっちが出した仕様書読んで認識違いがないか確認するくらいしろ。
5
マガミ@「南洋通商」 @ryuya_magami 2020年9月11日
入力して確認画面で警告出て、戻ったらフォームがクリアだったら優勝
20
しゃけ @shakeflake1223 2020年9月11日
分割だけは場合によっては便利かな
5
tama @tamama666 2020年9月11日
apocalypse1706 VISA、MasterCard、JCBは4桁×4の16桁ですけどAMEXは4桁・6桁・5桁の15桁、Dinersは4桁・6桁・4桁の14桁なので使い物になりません
11
ChanceMaker @Singulith 2020年9月11日
「カード会社は番号でわかる」というのは知らなかった。( ・∀・)ノシ∩へぇ〜😃
1
Kongo @kongo_kirishima 2020年9月11日
tamama666 カードブランドを選択したら対応する桁区切りに遷移するならいいのでは? そんな親切設計フォームがあるか、記憶は定かではないが…。
13
ラナ・クアール @rana_kualu 2020年9月11日
そもそもクレカ入力欄を自サイトで作ってる時点でだめ。 よっぽど技術力に自信があるところ以外は決裁代行サービスを使うべき。
12
優希(ゆき) @ulbvbdkp23409 2020年9月12日
kongo_kirishima そんなめんどくさいの作ってなんのために?
2
たかなお @uniunix 2020年9月12日
自分が入力してみて、めんどくさいのは大体クソなんやで。わからんって言っている人は、エアプか適応力高すぎなんじゃないか。
1
逢瀬貢 @MitsuguOuseWB 2020年9月12日
「自動判別」でカード会社誤判定がある場合がありましてね、
2
なちゃ @nachakey 2020年9月12日
今時一桁ずつ手で入力することがまずない。 余計なことせずに普通にブラウザの機能なりコンプリートなり使わせろってなるわな…
0
個人の感想です @Charlie3_y 2020年9月12日
マジレスすると、4-4-4-4のフォームを用意しているサイトはAMEXもDinersも取り扱っていないと思うんですけどね。
10
水瀬茉莉🐰🍓 @minasemarin 2020年9月12日
4桁はまだ許せるとしても有効期限許せなさすぎるし意味わからないね。 なんで20を頭につけさせるの?この入力方式で誰か得するのかなあ
4
下僕@らんこP @mrokw 2020年9月12日
わざわざダイナース・アメックスを使う人はその辺は心得てるから大丈夫だよ
1
てす子 @momimomitest 2020年9月12日
つい最近入力したクレジットカードの入力フォーマットが月/年で普通だと思って表記通りの入力後に「古い有効期限は入力できません」とか言われては?と思いつついやまさかなと思いながらも試しに年の頭に20を追加したら普通に通ってびっくりした。 Apple Storeっていうんですけどね
7
ぱすた @pppasuta 2020年9月12日
この有効期限の並びを変えてあるのは、ちゃんと読んで入力しなさいよ、という親心的な注意喚起かと思ってました
0
ざっぷ @zap3 2020年9月12日
電話番号については国際式か国内式かは分かりやすくしてほしいよね…(+81とかそういうの)。で、国内式で分割されてるやつは滅びよ。オートコンプリートは効かないし、土地ごとに桁数が異なるから内部処理も面倒というか別れてる意味ほぼない。バーの有無?カッコの有無?そんなの入っていようがいまいが内部で削除すりゃいいだろ!?
6
monchat @monchat 2020年9月12日
フォームじゃないけど某payアプリでスマホから金額を入力する時、数字だけのテンキーになってないのとかもイラッとする
7
あるてみす(アイコン変更) @artemitan 2020年9月12日
そもそも、一般的システムにおいて姓と名を分けて助かった記憶が無い。いざ分ける必要があると面倒だけどまず使わない。年賀状ソフトが要求するくらい?
0
ぷりん @printai100 2020年9月12日
豪快に見逃していたけど、レスを付けていた自称エンジニアカウンセラーが何が悪いのかわかっていなかったのが怖かった。
6
Chariot @BLACK_RX_24 2020年9月12日
クッソデカい主語だが、人間12桁や16桁の数字を一度でぱっと見で判別しきるほどの性能の目は持ってないので、カード番号は区切りが入った方が見やすいのは間違いない
1
大海烏 @grandseacrow 2020年9月12日
nachakey そのブラウザを100%確実にあなたしか使わないなら、それでも良いんでしょうけど
1
未完缶 @citrus_hanayu 2020年9月12日
最近の大企業の入力フォームではまず見ないな。たまに見かけるが、不便だと思う以前にその会社のセキュリティを疑ってしまう。まともなWebデザインをしていない会社が、まともな暗号化を行なっているとは思えない。
1
kaz@(≧∇≦) @kaz300882 2020年9月12日
#amazon のデータ利用でカードの #セキリュティコード 入力のみで入力から決済まで済んじゃうのが簡単でいいな
0
Kitty_Guy_Records @cherry_ITO 2020年9月12日
他はどうでもいいけど、有効期限とこカード記載のままのフォームじゃねえのな なぜ変える
3
田中一郎 @eggmanpat 2020年9月12日
・カードのブランドは選択させる必要がない(カード番号から判別できるため)→ブランド入力欄がないとかえって不安 ・カード番号入力欄が4つに分かれている→自動遷移するので入力しやすい ・有効期限に独自の並び、形式を使用している→別に気にならない
1
焔纏いしモノ☆アオサギ @aosagin 2020年9月12日
4桁区切りは最近スマホで自動入力できるようになってから面倒に感じるようになったな。ドドールとかカード番号がログインにいるんですよね…自動入力ログインできない苛立ち
1
ewsfyiel @ewsfyiel 2020年9月12日
入力少ないのが良いフォームなのか?
0
ねや @AriaSub 2020年9月12日
券面と違う形での入力をさせるのは強混乱の元 だから4つに分かれてるのは実はまだ擁護できる 年月日だけは擁護できない
2
m.t @Ellfas3 2020年9月12日
他は許せなくもない範囲内だけど、流石にカード通りに入力するとエラーになる有効期限は引くわぁ…
1
undo(時は来た。それだけだ) @tolucky774 2020年9月12日
スマホからの入力で英数字項目で全角許してないのに、デフォルトが日本語入力になってるクソフォームを作ったところは全て滅びて欲しい
15
優希(ゆき) @ulbvbdkp23409 2020年9月12日
grandseacrow ちなみにオートフィルはchrome Opera Firefox Edgeにも搭載されてる機能 Internet Explorer? 知らんw
1
優希(ゆき) @ulbvbdkp23409 2020年9月12日
printai100 まとめに入ってないけど別の人も悲惨だった…
1
みさ @misa_exchange_ 2020年9月12日
sakuuuuuuune 説明足らずですみません。対応・非対応をカスタマーに強くに認識させるために最初にカード会社の選択があるそうです(ふるい落とし的な。もちろんロゴ画像で一覧もつけますがあれが案外読み跳ばされる)。あと自動認識はすごい便利でよく使うんですが、やはりまだまだユーザーによる目視確認の安堵が優先される傾向にあります。自分は小さい会社向けのUIがメインでしたので大企業やフロントエンジニアの方なんかだとまた違う意見が出るかもしれません…。勉強になります。
0
Chariot @BLACK_RX_24 2020年9月12日
ただ、ここで「不便だから」と挙げられてるものをどんどん省略していったら第二第三のセブンペイ、ドコモ口座が生まれるよなって
8
結城あすか @pixytale 2020年9月12日
暗号化してるから良いのかもしれんけど、セキュリティ番号も含めて一括送信ってのはちょっと不安が残る。
2
御子神アイリス(MI-22) @ShionAmasato 2020年9月12日
4桁区切りは許してやれよと思ったけど、カードによっては4桁×4つ以外の区切りで書いてある場合もあるのか。その場合はフォームが4桁で区切られると混乱を招くというのは気持ちは分かる(というかなんで統一しないんだよ)
4
御子神アイリス(MI-22) @ShionAmasato 2020年9月12日
既に出てるのもあるけど個人的に3大滅ぶべきは「1個でもエラーがあると全部抹消される」「ペーストを受け付けない」「入力した後に後に形式にケチを付けられる」だよな。例の有効期限枠は面倒で不快感はあるけど一応ブチ切れる手前で収まる。
1
御子神アイリス(MI-22) @ShionAmasato 2020年9月12日
そういえば、英数字を全角・半角のどちらかでしか受け付けないフォームってよくあるけど「文字コードの加減算で変換できる」とことを知らない奴が作ってるんだろうかね。「0xFEE0」という呪文は覚えておいて損はないよ。
0
ユーコン @yukon_px200 2020年9月12日
みんながイライラするってことはセキュリティ的に安心なのかもしれんなw
0
RENOWAN @renowan 2020年9月12日
レガシーな開発手法だとUXが悪くなりがちだよな。一度作ったら直すのが大変でPDCAを回せない。
0
aitsuki @aitsuki2 2020年9月12日
BLACK_RX_24 ここで挙げられてるものは省略しても問題ないし、むしろオートフィルに対応していた方が誤入力が減るのでむしろ良い
1
anineko @ANINEKObySYSTER 2020年9月12日
こういう入力画面や操作画面、操作パネルの設計は専門家にやらせるべき。こういうのの設計は心理学や生物学系の知識も必要なんだよ。コンピュータ専門学校だとその辺の授業もやってて、心理学/生物学系の単位取れないと卒業させない。コンピュータバカとかは卒業できないので、私の同期生は入学したうちの半数ぐらいしか卒業できていない。
1
anineko @ANINEKObySYSTER 2020年9月13日
「人間相手のマンマシンインターフェイスを設計開発するのに、人間を理解してないなんてありえないだろ?」というのが学校の考え。生き物としての人間を理解せずして、知識も無い奴が使えるかと。無理に卒業させる気も無いからスパルタw
1
anineko @ANINEKObySYSTER 2020年9月13日
機械だと「手の届かないところに押しボタンを配置」なんてミスがあるが、防ぐためには手の構造を理解し、「手が届く・指で押せる」とは例えば図面に書けばどう表せるのかぐらいはクリアできないといけない。人体構造の知識がなかったら書けないわな。
0
あごにー @Agony_01 2020年9月13日
まあ反論が出てくるような理由を根拠にこれはクソレイアウト!って言いきってしまうような人間にはならないようにしたいですね。
3
あごにー @Agony_01 2020年9月13日
個人的に4桁区切りはハイフンの有無への意識を消せるのでありですね。4枠じゃないところは上のcard選択でフォーム切り替えちゃえば済みますし。これはどうかなーって強く思えるのは有効期限の型とセキュリティコード同時送信ですね。
4
らくしぃ @x891rksy 2020年9月13日
今回の話にはあんま関係ないけど フォームでよくある住所の全角強要はやめてほしい
7
すいか @pear00234 2020年9月13日
「カード会社選択は『対応しているカード』をユーザーに意識させることが可能」なのでむしろやるべき、桁区切りは「実物のカードの刻印様相と、画面上の入力を比較してミスや混乱を防ぐことができる」ので、カード会社選択でフォームの書式が変わる、という前提でならアリ、有効期限はナシ、ってところかなあ。有効期限以外はそこまでクソではないよ。条件付きとはいえ。
6
F414-GE-400 @F414_GE_400 2020年9月13日
利用者側だがカード番号の入力欄がこんなふうに分割されてるやつは確かに面倒。クレカだけじゃなくてプリペイドカードとかでもちょいちょいイライラさせられる。
1
みさ @misa_exchange_ 2020年9月14日
ここの流れを見ていて思ったけど、単純なユーザー、HP作成依頼しているクライアント、UIデザイナー、コーダー、フロントエンジニア、フロントデザイナーとか…客とデザイナーとエンジニアで視点が違うのかもしれない。ユーザビリティに関してUIデザイナーは基本的に閲覧者最優先だけど、フロントはHP発注したクライアントの使い心地も優先度高いだろうし、エンジニアさんは効率化や軽量化重視の人も多いと思う。勉強になるなぁ
0
hapo31 @hapo31_t 2020年9月16日
ゆうちょダイレクトもお客様番号とかいうログインに必要なIDが3つのフォームに区切られてる上にパスワード入力画面が別画面なのでオートコンプリートが効かないので二度と見なくなった。しかも肝心のページも1分ぐらい無操作でいると再ログインさせられるゴミ仕様。
1
老人と子供のPolkadot @Polkadot_GP_Kid 2020年9月17日
hapo31_t ゆうちょは擁護の余地がない位最悪なUIだと思う(憤怒)
0
densuke_open @DensukeO 2020年9月17日
4桁毎の移動をユーザーにやらせるうえ、英字入力に戻される(数字入力用にIMが切り替わらない)とかも加えておいて欲しい。
0
高見知英 @TakamiChie 2020年9月19日
似たものに「郵便番号の上下を別フォームにする」とか、「電話番号を3-4-4で入力させる」もあるな(どちらもブラウザの自動入力で入れられるから変に分けられるとかえってストレスになる)。クレカはたしかに「そもそも自社で決済フォーム持つのがそもそもギルティ」というのはわかるけどこっちの標準ってあまり見かけない。 その関連で海外から来てて日本の電話番号持ってない人どうするんだろう?やっぱ国番号から入力しようとして文字数オーバーって怒られてキレるのかな。
0