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

149
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj

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

2020-09-11 10:46:09
歩くCSS設計完全ガイド / HubSpot Tech 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
らくからちゃ@3♂&2♀年子育児中 @lacucaracha

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

2020-09-11 11:36:12
らくからちゃ@3♂&2♀年子育児中 @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 @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
三神@6th全通 @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