AI時代だからこそ、UXデザインを深く理解する必要がある！
と思い、日本でおそらく最も網羅的にUXデザインのルールをまとめている「Sociomedia ヒューマンインターフェース ガイドライン」を読み進めて、考えたことを記録して、noteマガジンにまとめている。
今日は25個目のルール。まずは引用から。
25. オブジェクトは自身の状態を体現する
GUI において、アイコン、選択可能項目、各種コントロール、ペインやウィンドウなど、画面上のすべてのオブジェクトは、自身の状態を視覚的かつリアルタイムに体現し続けなければいけない。ユーザーはそれを、インタラクティブな操作を通じて変化させながら、作業内容を目標状態に近づけていく。
https://www.sociomedia.co.jp/9267
UXデザインのルール #23 と #24 に続き、これも「オブジェクト指向ユーザーインターフェース（OOUI）」の話。
引用先では、PDFファイルアイコンを例にとって、選択された時、ドラッグされている時、ロックされている時、ダウンロード中の時、といった「状態」を表すために、アイコンの見た目が変化していることが示されている。
画像元: ソシオメディア
この原則は、Webサイトでは、ボタンやリンクに応用される。
ボタンには少なくとも５つの状態がある。
- Enabled: デフォルト。いつでも押せる状態。
- Disabled: 押せない状態。送信ボタンを押した後に連続して押されてしまうのを防ぐため、または、ログインボタンをパスワード入力前に押してしまうという「エラーを回避する」ため（UXデザインのルール #15 を参照）
- Hovered: マウスカーソルが上に来た時
- Focused: Tabキーで選択された時。Enterキーを押したらクリックされるボタンがどれかを示すため。アクセシビリティのために重要
- Pressed: ボタンを押した時。これがないと、ユーザーはボタンをクリックできたのかできなかったのかがわからず、不安になる
例えば、Google のデザインシステム Material Design 3 では、この5つの状態のデザインが事細かに決まっている。
画像元: Material Design 3
Pressed (押した時の状態) は、Material Design 3 の場合、水面を指で押した時に広がる波紋のようなアニメーションになっている。
画像元: Material Design 3
このアニメーション、2020年前後にとても流行った。でも、実装するのが結構大変（私の英語ブログ記事参照）。
この5つのボタンの状態のうち、デザインするのを忘れがちなのが、Focused と Pressed。他方、ユーザーの半数以上がスマホを使う時代に忘れてもいいのに、Webデザイナーさんたちがなぜか絶対に忘れないのが Hovered。
"Designing Button States" と題したブログ記事の中で、Tyler Sticka というUIデザイナーが、
Hold off until you have designed all the other states (focus, expanded, disabled).
と述べている。ボタンの他の状態を全てデザインしてから、最後に hovered をデザインしろ、と。
個人的には、Hovered と Focused は同じデザインでいいと思う。Tabキーとマウスを両方同時に使う人はほとんどいないと思うので、この二つを区別する必要はない。
ただし、Focused のデザインは、アクセシビリティ基準（WCAG 2.2 達成基準 2.4.13）を満たす必要がある。
（私が書いたnote記事を転載しています。）
