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

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

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

# UIテスト
## ラベルの位置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/0ea75b84-1e5c-dce2-331f-ac7ebcc6ce7f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/e50cf659-64db-7e3e-3cfe-816e7c8fb6c2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/04b330a8-1794-78b8-e144-d73cf1bad025.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/d83bf04f-456a-08b9-e8d0-8bed37918532.png)

## ラベル必須と任意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/22465d19-02fe-0f74-cc27-3db58c5677c7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/beba6e70-c343-682f-1ada-70d2c3ca6ad0.png)

## 英単語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/18d9197e-ccc2-50d5-e448-ab7ff8e8fc91.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/d559cb99-baa8-2d4c-77d2-6ab15d4bb0ff.png)

## フィールド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/296e3fa5-c72a-f4f1-f31d-4ddc51289bef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/1db65b86-97e7-3c73-8347-fd933a305f6d.png)

## ラジオボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/e275ebac-cc5d-95f0-8f76-2f0e86c023d5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/d9c1e059-b3a3-e558-75f2-b8b1fdfe015d.png)

## ラジオボタンとチェックボックス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/86a5ce84-9872-031e-d4f7-6734258c17b6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/c85100ba-5d9f-f2aa-3181-5ab9d134dbb6.png)

## 数字と数値
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/1df9534d-2623-7292-f774-0f599bf49a93.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/3f779292-0e6e-caf1-007e-3f8e8f76ecbb.png)

## ボタンの位置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/e0054d1a-ffcf-6d4b-afa5-ed83642da807.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/4a003d6c-e043-3d84-af62-f13528de7eb8.png)

## 入力内容のヒントの位置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/eaeca375-a358-3c91-8c26-b4cf5a62c5fa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/da323d4b-084b-46f5-dde9-27c6ed4ef41d.png)

## エラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/aae40ca6-d9ca-bc4b-67db-9cf4bab425b5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/53571bd7-dac8-dbaf-2d33-42fa1ae6e722.png)

## エラーメッセージ１
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/fb291c74-ccbf-d421-b320-2551bd698a3f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/f8adc9b2-44d4-151e-1246-d0fbf61b7c06.png)

## エラーメッセージ２
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/498cebe3-98d5-5241-fe8e-0084b4c78989.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/0bde05ea-a074-d3f4-c376-6900ec65087b.png)

## バリデーション
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/f43d80b7-4b09-5c00-900d-ae4fa0376a13.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/2b1aa60c-a48a-54a0-2177-8dfe788b71a4.png)


## ログイン画面１
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/1b797303-d80c-4a9c-161f-d8279810f582.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/dcbc9098-97c2-9d9e-88ef-bc20276ad7a9.png)

## ログイン画面２
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/24765902-71fb-31ea-de15-39c7d9d0cbc8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/2932f044-85c9-b3dc-6b3e-d46a7dac8ade.png)

## ログイン失敗
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/c4eb7d66-8dfb-1064-fb33-5b650006b2ed.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/5f1f8605-18a0-7ece-2f8d-a067922197ab.png)

## パスワード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/4a59cac5-ff4a-2bfe-4d1e-4d215ae3c707.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/5aa1f5a1-bed9-d635-e893-f5cb87522840.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/c794bd2d-fc45-3d8c-7d2a-bf9e0bb36e63.png)

## プログレスバー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/1e06d4ff-a1a3-edf5-6778-abc33054b3b5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/74b81bc9-38af-6acf-0f48-b640121b3a4a.png)

## フィルター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/8b6df0f5-787b-b3e2-3940-4c74f6fd0457.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/6e14f0f3-6910-96b3-df66-e17583b6ba4f.png)

## 前に戻る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/55d44c96-7c84-84f5-1b0a-9b531b232f5e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/6a5c8401-282e-44e9-df4f-ed6c82a80ba4.png)

## ファイルアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/ba89a064-2791-6467-624c-140feb84b59f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/3e2cdaf4-d7ea-d12e-cc49-1660ede6f66a.png)

## クレジットカード有効期限
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/c320dbc3-54b4-15db-05aa-c6e4445a0c92.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347716/6e0a1621-c2c7-2897-3293-7bd17a9f9c65.png)


# 参考文献
内容に興味がある人はぜひ下記書籍購入してみてください。実現方法まで記載してあり、非常に参考になります。
[Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド](https://www.amazon.co.jp/Form-Design-Patterns-%E2%80%95%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B7%E3%83%96%E3%81%AA%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E5%88%B6%E4%BD%9C%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E4%BB%AE/dp/4862464513)