現職では業務アプリケーションばっかり扱います。みる画面みる画面ぜんぶフォームで出来てます。しかも「自分たちが使うだけだから、そんなにお金をかけられないんだ」というあるある事情もあって、随分昔の仕様で追加開発・改修されていたりします（それはそれで職人芸の粋が凝縮されてるので非常に完成度高かったりして）。SPAいれてMaterial Designを導入している案件はかなりモダンです。

下記の本を読んでいたときにちょうど社内LTの当番が回ってきたので、フォームのユーザビリティをテーマにLTをしました。以下はそのスライドのリライトになります。
いうて、あんまり本の内容と関係ないんですが。

ユーザー体験の半分はフォームUIで発生する、といっても過言でない

さっそくですが、なぜフォームUIでUXの半分が発生するのでしょうか。それはフォームUIの役割はシステムとユーザーの対話だからです。
例えば以下のようなシーンがあります。 

- 検索フィールドで任意のワードを入力して検索結果を表示させる
 - 経費精算の申請フローで領収書をUPし金額を入力し問題なければ承認申請ボタンを押下する

このようにユーザーが特定の操作を行った時システムはその操作に応じた反応を返し、そのシステムの返事に応じてユーザーは再び操作をしていきます。その繰り返しがインタラクション・対話になります。
スムーズな対話ならば良い体験になり、ぎこちない対話になれば悪い体験になります。直接的にシステムの価値を体験しやすい箇所ですから、良いUXも悪いUXも生み出されやすくなっています。

それなのに、フォームUIの種類は少ない

そんなフォームUIですが、実はパーツとしてはそんなに種類がありません。
種類としては以下の７つ程度です。

- 一行文
- 複数行文
- 択一選択
- 複数選択
- ラベル
- ヒントメッセージ
- イベント発火ボタン

バリエーション展開でドロワーメニューの中にチェックボックスがあったりと組み合わせは増えていますが、基本的には上記程度しかありません。
この少ない語彙力で、複雑な経費精算フローや航空券の予約システムなどの小難しい対話もさせるため、油断すると悪いUXに倒れがちになります。

やってしまいがちなFormUI NG事例

以下４分類でいくつか事例を上げました。内容は割愛します。
１）要素の間に隙間がないなどで視認性が悪く読みにくい場合
２）入力条件が説明不足で何を入力すればいいのかわからない場合
３）良かれと思ってつけた便利機能（パスワードマスクの表示切替）の意味が伝わってない場合
４）どんな原因でエラーが起こって次なにをすればいいのか明示されていないエラーメッセージの場合

木浦さんや広野さんの記事を参考に、フォームでやりがちなNG事例をいくつか紹介をしました。どちらも具体的な解説付きなので、いきなりUIデザインやらされることになって困っているフロントエンドエンジニアもご一読いただくと幸せになると思います。

NG事例に共通する課題「スムーズな対話が成立してない」

これらの事例では、スムーズな対話が成立してないことが共通の課題になってます。いずれも「今の状態」「操作後の状態」「理想の状態」がユーザーに伝わっていない・明示されていない・推測しにくくなっていることが原因です。

ではそれを解決するためにどうすればいいのか。それは状態変化を適切に表すことです。妥当な時間内に適切なフィードバックを通じてユーザーに何が起こっているかを常に通知していくことが大事です。

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
10 Usability Heuristics for User Interface Design - Nielsen Norman Group

Visibility of System Status - 状態変化を適切に表そう

具体的にどう状態変化を適切に表すか。
マクロ視点では、5つの状態変化があると言われています。

-  何も登録されていない状態 (Blank state)
-  ロードしている状態 (Loading state)
-  不完全な状態 (Partial state)
-  エラーが起きている (Error state)
-  理想的な状態 (Ideal state)
How to fix a bad user interface - Scott Hurff
全てのUIデザインに必要な５つの状態（実例と共に） - The five UI states

これらの５つの層を分けて考えることで、ユーザーは今何の状態なのかを理解しやすくなる、というものです。

更にパーツ単位の状態変化とではMaterial Designが11個に定義してます。

Material Designは2014年にGoogleが提唱したデザイン手法です。「現実世界の物理法則を取り入れる」など厳格なルールのもと、ユーザーが画面を直感的に操作できることを目指しています。
あらかじめ決められたガイドラインに則る※ことにより、短い時間で完成度の高いデザインを作ることが可能になります。※厳格なガイドライン遵守とにじみ出るGoogle臭さをなんとか制御する必要がある、の意味です。

正しい状態変化とは？

もっと深く詳しく知りたい方向けに書籍を紹介します。

インクルーシブ視点
自分たちにどんなバイアスがかかっているか理解し、無意識の排他デザインをやめよう、という設計概念です。SDGsの流れでトレンド化しました。
アクセシビリティ自体は昔から重要視されてたんですが…

✗ 視覚的障害・身体的障害を抱えるユーザー全員が使えるUIデザインにする○無意識的に晴眼・健常ユーザー以外を排除するデザインにしない

無意識に排除されていたマイノリティ層をカバーすることで、怪我など一時的なハンデを持っていたり、習熟度が浅かったりするマジョリティユーザーも恩恵を受けることができる、というUXにとって非常に大切な概念です。Web Content Accessibility Guidelines (WCAG)と一緒に考えると素敵です。

EFO（マーケティング）視点
エントリー導線を最適化してCVRなどの重点KPIを向上させるマーケティング施策の１つです。GoogleAnalyticsなどの分析ツールで効果検証をすることができます。
この分野は15年以上前から盛んで、エビデンス・知見ともにたまり切って円熟期にきております。今は更にMAツールやCRMツールとの連携やその先を目指すことが求められます。

まとめ

- フォームUIはUXデザインの難所
- 適切な状態変化で、ユーザーとシステムにスムーズな対話を促す
- UIの状態変化は大きく５種類、UIパーツとしては11種類に分解できる

Appendix: ビジネスにどう関わるか

①ユーザー体験の悪いUI＝おしなべて学習コストが高い
現場の導入コスト（初期学習、生産性、属人化、残業増）にはねることで、失注の原因になることもあります。
フォームUIであれば状態変化を適切に表し、ユーザーの学習コストを下げていきましょう。

②デザインはコモディティ化の傾向、品質が高止まりしている
フレームワークやコンポーネント集が溢れてるようになり、初速で高い品質を出しやすくなりました。同時にユーザーは「デザイン品質は高いのが当たり前」と期待値も上がる一方です。
フレームワークや方法論を便利に使い、かつより良い価値体験を提供していくことが求められています。

業務システムのUI/UXデザインは業務フローを忠実にプロットするものが主流でした。しかし現在では「使いやすくて当たり前、業務の役に立つものを」と要望が出てくるようになり、デザインも重要な選定基準となりはじめました。内部の人間しか使わないから、、、ではなく、しっかりユーザビリティを高めていくことが大切です。