Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@i09sakai(sakai mi)inTDCソフト株式会社

UIを考えよう～フォーム～

Last updated at Posted at 2020-03-29

はじめに

QA形式で書いています。どれがいいと思うか理由を考えてから答えを見てください！

  • 全てが正しいわけではない
  • 考え方として知っておきたいくらいの感覚で見てほしい
  • UIはユーザの利用文脈（コンテキスト）に合わせて考えるべき

UIテスト

ラベルの位置

image.png
image.png
image.png
image.png

ラベル必須と任意

image.png
image.png

英単語

image.png
image.png

フィールド

image.png
image.png

ラジオボタン

image.png
image.png

ラジオボタンとチェックボックス

image.png
image.png

数字と数値

image.png
image.png

ボタンの位置

image.png
image.png

入力内容のヒントの位置

image.png

image.png

エラー

image.png
image.png

エラーメッセージ１

image.png
image.png

エラーメッセージ２

image.png
image.png

バリデーション

image.png
image.png

ログイン画面１

image.png
image.png

ログイン画面２

image.png
image.png

ログイン失敗

image.png
image.png

パスワード

image.png
image.png

image.png

プログレスバー

image.png
image.png

フィルター

image.png
image.png

前に戻る

image.png
image.png

ファイルアップロード

image.png
image.png

クレジットカード有効期限

image.png
image.png

参考文献

内容に興味がある人はぜひ下記書籍購入してみてください。実現方法まで記載してあり、非常に参考になります。
Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?