AI時代だからこそ、UXデザインを深く理解する必要がある！
と思い、7月1日から、「Sociomedia ヒューマンインターフェース ガイドライン」を読み進めて、考えたことを記録して、noteマガジンにまとめている。
今日は14個目「Precomputation」。日本語の定訳がない言葉なので、英語のまま使っていきます。
まずは引用から。
14. Precomputation
先人がすでに見つけている最適値をプリセットにしたり、デザインの過程で再利用する。例えば、炊飯器のめもり、電子レンジの料理別タイマー、AT車の変速タイミング、ウォシュレットの的、プログラムの各種アルゴリズムなど。
https://www.sociomedia.co.jp/9123
この「precomputation」という言葉はUXデザインの一般的な言葉ではないみたいだが、UXデザインのルール#13「Constraints」の一例と言える。
ユーザーに何でも自由に選ばせるのではなく、経験則などでベストだとわかっている選択肢を最初から選んだ状態にする。そのことで、ユーザーは目標により早く到達できる。つまり、UXデザインのルール #7「User Control」が達成される。
この考え方をカラーピッカーに応用すべきだと思うのだけど、どういうわけか誰もやってくれない。
Photoshopのカラーピッカー
画像元: ポップインサイト
自分が知る限り、全てのカラーピッカーは、ユーザーはどの色も自由に選べる。その結果何が起こるかというと…
画像元: 伝わるデザイン
スライドのタイトルが、暗い青の背景に真っ黒な文字なので、読みにくい。箇条書き一つ目の「負担を減らすこと」が明るい白の背景に黄色の文字なので、ちかちかして読みにくい。
背景色を自動で検知して、明るさのコントラストが十分にある色しか選べないカラーピッカーを、誰も開発してくれないのは何故だろう（知っていたら教えてください）。
隣り合う色の明るさのコントラスト比は少なくとも3:1であるべき、と、国際的なアクセシビリティ基準であるWCAG2.2の「達成基準1.4.3」で定められている。（小さい文字の時は少なくとも 4.5:1。）
色の明るさのコントラストは、RGBの値から計算できるので、プログラミング的には全く難しくない。
あとは、背景色を自動検知するプログラムさえあれば良い。もしくは、ユーザーが背景色を画面から採取する eyedropper をつけて、採取した色に対して、コントラスト比が 3:1 を超える色だけ選べるようにする。
eyedropper の例
画像元: Firefox Source Docs
色の明るさのコントラストを考慮した色の組み合わせを提案してくれるツールが幾つかあるけれど、それはユーザーの自由を奪いすぎている。コントラストが十分にある色の中から自由に選べるのが、デザイナーにとっては理想だろう。
UXデザインは「Contraints」のさじ加減を調節して、ユーザーの目的達成を一番早くする営み、だと思う。
追記
以上を書き上げてから、ちょっとGoogle検索してみたら、Anton Robsarve というデザイナー兼プログラマーが作った Color.review という、背景色とのコントラスト比を確かめながら色を選べるカラーピッカーを見つけた。
Color.review のスクリーンショット
「Precomputation」というUXデザインのルールを適用した良い例だと思う。パチパチパチ。👏👏👏
（私が書いたnote記事を転載しています。）
