しばらく積んでた Form Design Pattern 第１章、第２章あたりを読んだメモ
この本のテーマはWebフォームのデザインのパターン紹介なのだが、その説明の過程で書かれていることが今勉強中のデザインシステムの参考になった
気になったところを書いておく
インクルーシブデザインの原則
本書の冒頭で紹介されていたデザインの原則
デザイナー、ユーザーエクスペリエンスの専門家、開発者、プロダクトオーナー、プランナー、イノベーター、アーティスト、思想家など、ウェブサイトやアプリケーションの設計と開発に携わるあらゆる人に向けて、インクルーシブデザインに対する幅広いアプローチを提供することを目的としている
- 同等の体験を提供する
あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。 - 状況を考慮する
利用者は様々な状況であなたの作ったユーザーインターフェースを使います。状況に関係なく、あなたの作ったユーザーインターフェースが利用者に貴重な体験を提供できるようにしましょう。 - 一貫性を保つ
馴染みのある慣例を用いて、それを一貫して適用しましょう。 - 利用者に制御させる
利用者が自ら制御できるようにしましょう。利用者はそれぞれ好みの方法によって、コンテンツにアクセスして、コンテンツとやりとりできるようにすべきです。 - 選択肢を提供する
特に複雑なタスクや標準的でないタスクには、利用者がそれらのタスクを完遂できるように、様々な手段を提供することを検討しましょう。 - コンテンツの優先順位をつける
ユーザーが主たるタスク、機能、情報に集中できるように、それらをコンテンツやレイアウト内で優先順位付けしましょう。 - 価値を付加をする
機能の持つ価値や、その機能によって様々な利用者の体験をどう向上させることができるかを考えましょう。
「インクルーシブであるか」という視点をもってなかったので、この原則は今後も大事にしたい
プログレッシブエンハンスメント
可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供することを中心とした設計哲学
- うまく機能しなかった場合にどうなるかを考え、レジリエンス（回復力）を織り込んだユーザー体験を構築する
- CSSやJSが機能しなくてもユーザーが操作を続けられるようにする
- 基本的にコンテンツにJSは必要ない
コンポーネント指向のUI開発になるとJSは切り離せないものになっているので悩ましいが、確かにこの観点が疎かになってしまってないか再確認したい
バリデーション
- ユーザーがタイプ入力するとき、または、フィールドを離れるときにユーザーにフィードバックを返す（ライブのインラインバリデーション）
- ライブのインラインバリデーションは入力を中断させるタイミングが早すぎても遅すぎてもだめ
- 送信ボタンの無効化にはいくつかの問題がある
- ボタンが操作できない理由がユーザーにわからない場合がある
- 無効化されたボタンにはフォーカスできないので、Tabを使ってナビゲートしている目の不自由なユーザーはボタンが見つけにくい
- グレーアウトされているボタンは読みにくい
- ユーザーがウェブサイトを訪れるのはデザインを楽しむためではないので、デザインが良くてもエラーメッセージがいい加減では体験が損なわれる
- エラーメッセージのチェックリスト
- 簡潔に表記する
- 一貫性の保つ
- 具体的に示す
- 専門用語を避け、人間味が感じられるようにする
- 平易な言葉を使用する
- 能動態を使用する
- ユーザーを非難しない
ボタンの非活性はよくやってしまいがちだが、目の不自由なユーザーなどがどういう操作になるのかが考えられていなかった
アクセシビリティの観点にいれておきたい
１ページにつき１つのこと
これは感覚ではそう思っていたが、実際テストしたことがなかったので本で紹介されていて参考になった
残りの章は別の機会にまとめる
