👾 ゲーム、アプリ、ウェブサイト向けの優れた UI を作ろう！ デモレッスン - Jacob Nelson（UI/UX デザイナー、Jakob Nielsen に似てる笑）

成功事例とフロー

成功事例とは

認知バイアス

家で例える

家の正面にドアがある

これは法律に定められたものではない

ルールとガイドラインのちがい

頭の中は「ショートカット」を考える

スーパーのレジの前に甘いものが置いてある

人は無意識にさまざまな取捨選択をしている

これがここでいうショートカット？

ユーザーがいまどこにいる？（現在位置を知らせる）

ユーザーはどこに向かう？

ガスコンロの例え？

いまなにをするべきか？

ユーザーが情報の不足で取捨選択ができないのはフラストレーション

選択のパラドックスも生じる

ゲームのデザイン

ユーザーが画面をタッチしたときに反応がない

不安になる

音やエフェクトなどのフィードバックが必要になる

これはゲームに限った話ではない

タスクアプリのデザイン

すべてのタスクの数

完了したタスクの数

進行中のタスクの数

未完了のタスクの数

すべてのプロジェクトの数

数がすぐにわかることが大事

ユーザーの目的・目標を明確にするナビゲーションが重要

次にユーザーするべき行動が直感的にわかる

オンボーディングもそう

テキストなどの情報が多いけど、イマイチやるべきことがわからない

タップなどをしてみるけど反応がなかったり、仮説が間違っているとフラストレーションが溜まる

次にユーザーがするべき行動のみが直感的にわかるのが最も良い

他のボタンの色がグレーがかっており、タップ・クリックできないことが直感的にわかる

やるべきタスクが完了したかどうか ✅ を表示する

フィードバックを重視するためにプロセスが進行中なのか、プログレスバーを表示する

改めてユーザーの現在位置を明確・客観的に表示することが重要

これはウェブに限った話ではない

スーパーや映画館、マンガ喫茶でも「マップわかりづら」って思うわ

目的の商品がどこに置いてあるか推測しづらい

トイレがどこにあるかわかりづらい

まず、現在位置がわかりづらい

色を無駄に使いすぎ

1F or 2F?

マップが貼ってある場所がわかりづらい

ユーザーがお店に入店してからの導線をどこまで考えている？

今までいろんなお店でマップを改善するよう指摘してきた

だけど改善が見られたお店はほぼない記憶だ

イチから具体的に改善策を示さないと改善されない

改善するべきメリット（改善しないことのデメリット）がイマイチお店側に伝わっていない

ユーザーがタップ・クリックできるボタンをアクティベート（押下可能に）するかのタイミング

情報の粒度を調整する

情報量はユーザーが次にするべき行動の判断を明確化するためにできるだけ多いのがいい

だが、情報が多ければ多いほど良いという単純な話ではない

人に何かを教える・説明するときも同じ

ところどころ句点（、）を入れる

ところどころ読点（。）を入れる

話すスピードを抑える

僕は話すスピードが速くなりがちだから、より一層ゆっくり話すよう意識する

ユーザーがアカウントを削除したり支払いをするなどの（行動のやり直しが不可な）操作は、より一層慎重に情報設計する

キャンセルボタンの位置やテキストの大きさなど

削除を完了させるボタンの位置やテキストの大きさ、色など

誤ってボタンを押してアカウントを削除したりすることを防ぐために、キャンセルボタンと位置を離す

現実世界（実生活）に置き換えて考えればよい

ものに触れたりするときに感触があるよね？

リアルタイムにフィードバックがある

フィードバックだいじ

マイクロインタラクション

日本語訳は相互反応やっけ？

ユーザートリガーとシステムトリガー

ユーザーの行動を確認するモーダルとか

自然なコンテキスト（文脈）がだいじ

自分本意に考えて話を飛躍させない

話題をコロコロ変えない

相手はびっくりしちゃう

これは人と話すときも言えるよね

ユーザーはあなた（デザイナー）とはちがう景色を見ていたり、同じだとしても見え方・感じ方がちがうかもしれない

より多くのひとがイメージ・理解できる言葉を使う

専門用語はなるべく使わないとか

ナチュラルマッピングというらしい

メンタルモデル

ガスコンロを操作するつまみの例

複数のつまみが同列に位置している

見た感じはスタイリッシュかもしれない

だけど、どのつまみがどのコンロを操作するものなのか直感的にわからない

これってデザイン的に優れているとは言えないよね？

ゲームでいう自分のライフの例

横バーなのかハートなのか

果たしてどちらが直感的にわかりやすいか？

色を効果的に使う

人間が普段使っているジェスチャーを効果的に活用する

ここではノンバーバルコミュニケーションのことも含めている？

文脈的に含めているっぽい

独特なものはあまり良くない

パッと思いつくのはハッカー飯のいいねボタン

どうして ↑（上矢印）がいいねボタンなのか？

個人的に画面共有ボタンもわかりづらかった

記事を共有するときのアイコンが使われていたけど、わかりづらかったのって僕だけ？

そのアイコン・ボタンが画面共有ボタンだと推測はできたけど嫌な違和感を覚えた記憶がある

どうして？

Zoom とかの画面共有ボタンってどのアイコン使ってたっけ？

矢印が上に向いているアイコン

ユーザーとのコミュニケーションはシンプルにする

ユーザーインタビューをするときには、できるだけバイアスを避けるために仮説を立てないのがいい？

ユーザーインタビューをする一番の目的は、ユーザーを理解すること

ユーザーインタビューはなにも一回だけじゃなくていい

例えば、一番最初のインタビューでは敢えて仮設を立てないとか

第一に、ユーザーをより理解するため・仮説の精度を高めるために

2 回目以降のインタビューで仮説を立てる

バイアスを避けるためにユーザーインタビュー経験者とユーザーインタビューの経過について対話するのも良さそう

どれだけ UI が優れていてもアクセシビリティが低く、ユーザーが目的を達成しにくい・できなければよいデザインではない

モーダルを非表示にする ✕ の位置

場所がどこにあるかわかりづらい

色

形

影

reset or clear という言葉を使うのはあまりよくない

リセットボタンはそもそもいるか？

不要なもの・ユーザーを無駄に迷わせる、悩ませる情報はなるべく減らす

デザインとは引き算

バック（back）、戻る（return）、キャンセル（cancel）などの使い分け

サインアップ、サインイン、ログイン、登録する、登録、ログインする、ログインとかに似てる

ユーザー設計をするときに、併せてトンマナ設計もする

その色、形、大きさなどを選んだ根拠を明確にする

Unsplash、Shutterstock、Uxcel などに UI/UX デザインのアンチパターンについての参考資料がある