自分の画面が壁に貼られる木曜
クリティーク、木曜、三十分
デザイナー 一枚目に目的を書きました。設定を開かずに、保存した絞り込みまで行けること。案は二つです。
デザインリード その前に視覚的階層を。左の案は全部が同じ太さなので、左上から読み始めて途中でやめます。
デザイナー 行はどこを押しても開きます。そこが要点で。
デザインリード アフォーダンスはあるのに、そう言っているものが何もない。矢印か影を足してください。いまのシグニファイアは、描いた本人の記憶だけです。
エンジニア 右の案は、初めての人に新しい考えを三つ同時に出しています。認知負荷が高い。
デザイナー では詳しい設定は段階的開示の奥へ。最初の画面は二つだけ残します。
UXライター 主ボタンのマイクロコピーが「保存して次へ」ですが、この画面は保存しかしません。誰かが不具合として起票します。
デザインリード あと、なぜここがモーダルなんですか。絞り込む相手が隠れるので、確かめに閉じて、入力ごと消えます。
デザイナー ボトムシートにします。一覧は後ろに残る。
エンジニア 消去アイコンのタッチターゲットが二十四ポイントです。絵はそのままで、押せる範囲を広げてください。
UXライター 空状態も「該当なし」の四文字です。新しい人が最初に見るのがそれ。
デザインリード 最後に一つ、言葉を使います。いちばん下の初期選択済みのチェックはダークパターンです。外すか、消すか。
デザイナー 外します。ボトムシート、矢印、空状態に二行。木曜にまた持ってきます。
三十分、四人、画面は一枚。部屋のどの発言も、名前のあるものについて話しています。その名前があるかどうかが、講評と好みを分けます。
講評は、目のすることから、人に求めるものへ動く
はじめは見ることの話です。太さ、大きさ、そもそも操作できると分かるかどうか。次に移るのは重さの話。一度にどれだけ抱えさせるか、何なら待たせられるか。終わりに来るのは、使いにくいで済むか、不誠実になるかの境目です。
デザインクリティークDesign critique
好き嫌いでなく、掲げた目的に照らして意見を出す、進め方を決めた講評の場。
木曜のクリティークへ、一枚目に課題を書いて持ってきて。
その場そのもの。好みの言い合いにならずに済むのは、進め方が決めてあるからです。一枚目に目的がないと、その空きを好みが埋めます。
視覚的階層Visual hierarchy
大きさ・太さ・余白の配り方で、目にどこから読むかを教える組み立て。
視覚的階層が平ら。全部が同じ音量で叫んでいる。
名前を出さないまま、最初に反応が起きる相手。うるさい、散らかっている、どちらもこれのことを、言葉を持たない人が言っています。
アフォーダンスAffordance
そのものが可能にする行為。画面では、操作部品が人に何をさせてくれるか。
行全体にタップのアフォーダンスがある。端の矢印だけではない。
そのものが人に許していることで、気づかれているかどうかは別。部屋のもめごとの半分は、これと、これを知らせる合図との取り違えです。
シグニファイアSignifier
影・矢印・ラベルなど、どこで何ができるかを目に見える形で告げる手がかり。
シグニファイアを足そう。矢印でも影でも、動くと分かるものを。
取り違えのもう半分で、描き忘れられるのはこちら。押せるのに見えないままの部品は、いくらでもあります。
認知負荷Cognitive load
一度に必要となる思考の量。画面はそれを増やすか、肩代わりするかのどちらか。
一画面に新しい用語が三つは、認知負荷が高すぎる。
仕様として足りている画面が、それでも差し戻される理由。部屋の誰も測らないのに、全員が感じています。
段階的開示Progressive disclosure
今必要なものだけを見せ、求められた分だけ詳しい選択肢を出していくやり方。
長い一枚のフォームでなく、詳細設定は段階的開示の奥へ隠そう。
画面は正しくて、一度に多すぎるときの答え。隠すことと取り違えられますが、片方は訊かれるのを待ち、片方は見つからないことを願います。
モーダルModal
対応するまで、それ以外の操作を止めてしまうウィンドウ。
初回起動でモーダルが三連続。それはやめる人も出る。
選ばれる回数のわりに、擁護される回数が少ない。持ってきた文脈を人から取り上げるので、置き換えの話がいつも出ます。
ボトムシートBottom sheet
スマホ画面の下から迫り上がり、内容を置き換えずに上へ重なるパネル。
絞り込みはボトムシートに入れて、一覧を見えたままにしよう。
その置き換え先。スマホでは、決めた結果というより手癖になっています。
空状態Empty state
まだデータがないときに画面が見せるもの。初めての人の第一印象になりやすい。
空状態が「項目はありません」だけ。最初の一画面を捨てているに等しい。
多くの人が最初に出会って、多くのチームが最後に書く画面。新しい人との会話がまるごとそこにあるのに、たいてい一語で終わります。
マイクロコピーMicrocopy
ボタンの文言・補足・エラー文など、行動を導く画面の小さな言葉。
あのボタンのマイクロコピーは、画面がやらないことを約束している。
製品でいちばん小さい文字で、いちばん大きな約束をします。画面と食い違うと、チームより先に問い合わせ窓口が気づきます。
タッチターゲットTouch target
操作部品の押せる範囲。確実に当たる大きさが要る。
タッチターゲットが24ポイント。アイコンは変えず当たり判定だけ広げて。
意匠の言い合いが、測れる話に変わる地点。絵はそのままでいい、という結論になります。
ダークパターンDark pattern
隠れた費用や見つけにくい解約など、意図しない選択へ人を誘い込む画面設計。
解約を灰色の極小文字にするのはダークパターン。法務も同じことを言う。
部屋が黙るとき、探しているのはこの境目。狙って描かれることは少なく、たいていは一つの数字を強く求めた結果です。
画面は来週の木曜に戻ってくる
矢印がつき、窓は下から出るものに変わり、一行だったところが二行になります。言葉は同じまま。持ってくるのは、そのときのあなたです。
質問と答え
製品まわりのほかの言葉は。
トピックのページに、150語すべて。ここにあるのは十二語で、ひとつのクリティークに出たぶんです。
なぜ英語が並んでいるのですか。
画面まわりの言葉は英語で入ってきて、議論は日本語でします。落ち着いた訳語のないものも混じるので、カードは両方を並べて持っています。
説明はどこから。
「プロダクトとUX」のトピックから。アプリと同じカードです。
次のクリティークでは、別の十二語が出ます。
「プロダクトとUX」のトピックには150枚。アプリでは、1日に数枚ずつ届きます。
