AI時代だからこそ、UXデザインを深く理解する必要がある！
と思い、7月1日から、「Sociomedia ヒューマンインターフェース ガイドライン」を読み進めて、考えたことを記録して、noteマガジンにまとめている。
今日は12個目「ユーザーの記憶に頼らない」。
まずは引用から。
12. ユーザーの記憶に頼らない
システムが表示するメッセージの内容やプロパティの値などについてユーザーが覚えていることを前提にしてはいけない。参照すべき情報はそれが必要となるその場で参照できなければいけない。
https://www.sociomedia.co.jp/9111
これまでに扱った11個のUXデザインのルールとの関係を考えると、#7 User Control というルールを実現するための手段の一つと考えられる。
User Control のキモは「システムの都合で一方的にユーザーの行動を制限しない」こと。ユーザーが何かを覚えていることを前提とするUXデザインは、それを忘れたユーザーの行動が制限される。
さて、引用先のソシオメディアのページでは、Webフォームのエラー表示が例として挙げられている。
画像元: ソシオメディア
右側の例では、OKをクリックした途端、何がエラーなのかわからなくなる。
左側の例であれば、エラー表示を見ながらエラーを修正できる。何がエラーなのかを覚える必要はない。
この左側の例のように、エラーの起こったフィールドのすぐ下にエラーメッセージを表示するのが良いUXデザイン。
でも、驚くほど、そうはなっていないWebフォームは多い。
WebflowというWebサイト作成ツールがある。このツールにデフォルトで用意されているWebフォームは、送信ボタンの下にエラーメッセージが表示される、どうしようもないUXデザインだった（2024年時点。今は変わったかもしれない）。
送信ボタンの下だと、入力修正するために上にスクロールしたら、エラーメッセージが読めなくなる。つまり、「ユーザーの記憶に頼らない」というルールを堂々と破っている。
こういうWebサイト作成ツールのデフォルトで備わっているコンポーネントは、UXデザインのルールを破っていることが非常に多い。
話が「ユーザーの記憶に頼らない」から外れるが、まだ何も入力していないのに「エラーメッセージ」が出たという経験ありませんか？送信ボタンも押してないのに入力必須項目が未入力だとシステムに認識されてエラーが出るという。。。
Webフォームのエラー表示を出すタイミングは、入力を終えて別のところをクリックした時で、表示を消すタイミングは、入力を修正してエラーが治った瞬間であるべき、ということがユーザーテストの積み重ねでわかっている（けれど、あまり知られていない）。
これについて、英語でブログ記事を書いたことがある。実際にどうやってコーディングして実装するかも含めて。2021年3月の公開以来、約6900回、30秒以上読んでもらえている。
で、この記事に書いたことを実践したのが、私が2021年に作ったWebツール Triangulum Color Picker。色コードを入力すると、灰色が混ざっていない度合いと明るさが表示され、同じ色相の色で、灰色の混ざり具合や明るさを変えたものを選ぶことができる。色を組み合わせる時に便利。
で、RGB値を入力する時に、文字を入力して他のところをクリックすると、以下のような画面になる。
Triangulum Color Picker のスクリーンショット
0から255までの数字でなければならない、というこのメッセージは、ユーザーが0から255までの数字を入力した瞬間に消える。
この消えるタイミングが重要。消えないと、ユーザーは「あれ、直したはずなのに間違っていたのかな？」と心配になってしまい、別の値を入力するなど余計な作業をしてしまう。これはUXデザインのルール#2「簡単にする」に反する。
（私が書いたnote記事の抜粋です。）
