悪いフォームの例です。ご査収ください。 pic.twitter.com/uXNNPtC9XK
2020-09-11 10:40:04@assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか?
2020-09-11 10:46:09@ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない(カード番号から判別できるため) ・カード番号入力欄が4つに分かれている(おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK) ・有効期限に独自の並び、形式を使用している(ここでめっちゃハマりました) です!
2020-09-11 10:50:52@assialiholic なるほど! それは、幾つかの知識がないと「悪い」と気付けない内容ですね。 ・カード番号からブランドが判別できる ・カード番号を1つの入力欄で処理できる(-は無視するとか) ・有効期限に独自の並びを使用しているとハマる← とても勉強になりました。 ありがとうございます!
2020-09-11 10:54:20@assialiholic 入力のしやすさとかも考えてフォーム設計ってするんですね CSSは見た目だけの話かと思ってました😂
2020-09-11 11:04:04@assialiholic 名義人の名前無しで処理しちゃだめよね。きっと。 他はまあどうでも良さそうだけど。 twitter.com/assialiholic/s…
2020-09-11 11:36:12@assialiholic 国際ブランドは最初の4桁辺りで判別つくってのはまあ趣味の問題かなあ。最近は、自動的に判別してロゴを点灯してくれるタイプのものが増えましたね。 番号区切るかどうかは、あったほうが目に優しい感じもするけど、AMEXだと4桁+6桁+6桁なので、そのへんの制御も入れられるのであれば・・・、かな。
2020-09-11 11:42:03@assialiholic @yontengoP 年月は、意識して入れさすには、いいと思うんだけど。 0も/も気にせず、自然数だけの入力で。
2020-09-11 11:36:42クレジットカードに記載のとおりに入力させてない時点で…… 設計がなってない。 twitter.com/assialiholic/s…
2020-09-11 11:43:43これはひどいUI…たまにこういうUI見るとついついご意見ご要望フォームで指摘したくなる twitter.com/assialiholic/s…
2020-09-11 11:43:27こういうの世の中にいっぱいあるし、常にその片棒担いじゃう危険があるから気をつけたい twitter.com/assialiholic/s…
2020-09-11 11:43:25ぼくのかんがえた 更にさいきょうにムカつく 入力フォームの例 twitter.com/assialiholic/s… pic.twitter.com/Ye7nqNvfRS
2020-09-11 11:36:40券面表示に一致するんで、カード番号は分割されていた方がいいな。 1カラムにするのは、番号を暗記してるのが暗黙の前提? セキュリティコードは別画面がええなぁ。 twitter.com/assialiholic/s…
2020-09-11 11:30:20スマホのカメラでの読み取りとかアカウントに保存してるカード番号自動入力させようとしたら上手くいかなそうなフォームだ…… twitter.com/assialiholic/s…
2020-09-11 11:28:09カード番号は4桁区切りで書いてあると間違えにくいし、有効期限はカードに記載されてるフォーマットと同じ(カード会社によって異なる?)なんでわかりやすいと思ってたんだけど、ダメなんですかね・・・? twitter.com/assialiholic/s…
2020-09-11 11:11:36これが普通のフォームに見えてしまって、何故「悪いフォーム」なのか判らない。 いつも使ってるフォームとの違いで気付くのはこの辺り。 ・氏名入力欄がない ・カード番号は単一の入力エリアじゃない ・有効期限・年を4桁で入れさせる(選択式が多い印象) ・有効期限・月のサンプルは01~09の方が? twitter.com/assialiholic/s…
2020-09-11 10:50:18