片手間にはじめるUXデザイン - ノンUXデザイナーズUXデザイン - #設計

これは、UXデザイナーではない人がUXデザインを効率よく身につけるための方法論です。
私自身も本職はUXデザイナーではなく、ふだんはヤギと遊んだり新しい会社組織の実験をしたりプログラムを書いたりしています。

しかし、ヤギの飼育や経理、組織運営、マネジメント、営業、プログラミングのどれも、広い視野で見ればユーザー（＝ヤギ、組織の構成員、マネジメントの対象、取引相手、他のプログラマ）の体験を改善する仕事です。
そのためUXデザイナーではありませんが、これらの「UXハッカー」と呼ぶべき多くの分野から得られた知見を用いて、UXデザイナーではない人間が理想のUXデザインを実現するための近道をご紹介できます。
なんだか小難しい用語を並べ立てることもしません。
小難しい用語を覚えても、わかった気になれるだけで、実際にUX設計をできるようにはならないからです。
ただし、これはあくまでもUXデザインを最低限身につけるための方法なので、より詳しく学びたい方にはUXの専門書籍をオススメします。

この記事のタイトルを見て気づいている方も多いとは思いますが、このタイトルの元ネタはノンデザイナーズデザインブックです。
同じようにUXデザインの法則を見つけ出し、さらに実際に自分の手で理想のUXデザインを実現する具体的な手順についてもカバーします。

執事さんに学ぶ理想のUX

何かを議論する上で最初にすべきことはゴールの設定です。
つまり、どんなUXが理想的な最高のUXと言えるかを先に定義する必要があります。

(お急ぎの方は理想のUX 4つの基本要素まで読み飛ばしていただいても大丈夫です)

ここでは、あえてウェブサービスやネイティブアプリケーションなどではなく「執事さん」を例に出して考えます。
この世に生まれて歴史が浅く頻繁にトレンドが変わってしまうITシステムではなく、中世から世界のあちこちで活躍してきた「執事さん」というサービスを題材にすることで、本質的な要件を知ることができます。
マンガやドラマなどでも「優秀な執事さん」の姿が多く描かれているので、想像するのは難しくないと思います。

ちなみに私はさくらちゃん（ペットのヤギ）の執事さんです。

何も言わなくても最高のタイミングでほしいものがでてくる

主人が喉が渇いたと思うか思わないかのその絶妙なタイミングで、執事さんがすっと飲み物を出す姿まさに理想の執事像です。
差し出す飲み物も、主人の気持ちを察して紅茶でもコーヒーでもオレンジジュースでも煎茶でもドクターペッパーでも、そのときに必要なものを適切に差し出します。
この行動がすばらしいのは、ユーザーの要望を先読みして準備していることです。

主人の代わりに行う

どんなに察する力があっても「分かってたけどやらなかった」では口だけの意識高いだけ系人材と代わりません。
主人の面倒な仕事をすっと代わりにこなしてしまうのも大切です。

主人からの指示の結果報告

執事さんは主人から特別な司令を受けることがあります。
たとえば「あいつを始末しておいてくれ」と頼まれた場合、数日後に主人に「そういえばあの指令はどうなった？」と聞かれては執事失格です。
始末が完了した段階で「始末が完了しました」と報告するのはもちろんのこと、ターゲットの始末に予想以上に時間がかかっている場合は適切なタイミングで「現在ターゲットが海外に逃亡したため始末が難航しておりますが、渡航先は突き止めておりますのでいましばらくお待ちください」と現状の報告を欠かさずします。
一方で10秒ごとにターゲットの居場所を報告されたら邪魔で仕方ありません。

ここから分かることは、ユーザーから指示された作業の遂行結果や現在ユーザーが置かれている状況を最適なタイミング・頻度で明確に伝えることです。

主人に逐一判断をあおがない

飲み物を差し出す際には逐一「量はどのくらいがよろしいですか？温度は摂氏何度程度がよろしいですか？どちらのカップを利用されますか？」のように事細かく聞いて主人を煩わせることはしません。

このように、ユーザに無用な選択肢を提示することはしません。

重要なことの最終判断は主人にまかせる

飲み物の場合は、仮に判断を誤ったとしても大した損害にならないので執事さんが自分の意思で決断して行動しました。
しかし、必ずしも執事さんの独断が許されるわけではありません。
例えばアメリカのトランプ大統領に執事さんがいたとしましょう。
トランプ大統領が「あのクソやろう。核を落としてやろうか。」と考えたときに、先読みして執事さんが核の発射スイッチを独断で押すことは許されません。
必ず「ご主人様、こちらに核の発射スイッチをご用意いたしました」と用意するところまでで止めて、実際に押す判断は主人に任せる必要があります。

ここから分かることは、重要な判断は必ずユーザーの確認を怠らないようにすることです。

理想のUX 4つの基本要素

執事さんを使った上記の思考実験によって、理想的なUXを支える4つの要素が導き出されました。

察知: ユーザーの要望を意思表示される前に読み取る
代行: ユーザーの代わりに実行する
明示: ユーザー状況を明示する/ユーザーに状況を明示しない
判断: ユーザーの代わりに判断する/ユーザーに判断させる

もちろん「察知」と「代行」は「原理的にできるが現実的でない」という制約もあります。
また、「明示」と「判断」については状況に応じて適切な線引きが必要になります。

以降では具体例を用いて、どのようにこの4つの基本要素を最適に実現するUXを設計するかについて紙幅を割いていきます。

余談: No UI

2015年ごろに "No UI" という新しい概念が提唱されはじめました。
Tech Crunchで記事にされたり、
No UIに関する本も出版されたりしました。

私の無知を露呈することを恐れずに簡単に説明すると「UIがなくてもユーザーの要望を叶えられるのが一番いいのではないか？」というアイディアです。
レコメンドエンジンなど、ユーザーの要望を読み取る技術が発展したその先には、あえてユーザーが画面を操作しなくても要望を叶えられる未来があるのではないかという問いかけです。
これはまさに理想のUXの基本要素「先回り」と「制限」に合致しています。

ただ残念なことに、この No UI を説明する上で例として示されたものがチャットを使ったサービスばかりだったため、
愚かな人類は「難しい概念」よりも「バカでも分かる具体的な実現方法」に魅せられ、「UIがないのがいい」というNo UIの思想に逆行して「チャットボット」という UI のトレンドに乗るという思考停止を選んでしまったというのが私の個人的な考察です。
その結果「チャットボットブーム」の収束とともに、「No UI」という言葉も忘れ去られつつあるように思います。

理想的なUXを実現するために

さて、ここからようやく実践編です。
世の中に存在する理想のUXの例をいくつか取り上げてもいいのですが、それでは安きに流れる人類の性によって「チャットボット」の悲劇が再来しそうです。
ここではUXを改善するための手順を、具体的な課題に対して適用し、読者のみなさまにその手法をありありとイメージしていただくことを目指します。

UX改善手順の全体像は下記のとおりです。

具体的なユースケースを妄想し、シナリオとしてまとめる
シナリオの各ステップを解析する
実現方法の検討
シナリオを書き直す
不要な「判断」「明示」の除去
ユーザーの意図しない操作による異常系のシナリオを作成して修正する
環境要因による異常系のシナリオを作成する

では、演習してみましょう！

演習: アカウント管理

あなたの会社では、GoatLover¹ というウェブサービスを使っています。
GoatLoverは月額課金契約で、サービスにログインするアカウント数に応じて料金が増えます。
このサービスは始業から就業まで常時ログインしたまま使い続ける類のものではないため、あなたの会社では実際に利用する30人分のアカウントは用意せず、10アカウントしか契約していません。

そこで現状の運用では、GoatLoverを使いたい人がアカウントのリストから1つを選び、口頭で「今、このアカウントを使っている人はいますか？」と聞いて空いているアカウントを探して利用しています。
しかし、誰かが利用中に誤って同じアカウントでログインすると、特に警告もなく先にログインしていた利用者を強制的にログアウトしてしまう仕様になっており、作業途中の場合はそのデータがすべて消えてしまいます。
また、毎度確認する作業に対して社員から不満の声が挙がっています。

この作業の運用における社員のUXを改善する方法を考えてください。

おそらくこれを技術で改善しようとした時、多くの人は「アカウント管理システム」のようなUIで空きアカウントを調べる解決策を想定するでしょう。
この演習の結果はもっとスマートな解決策に帰着します。

ステップ1. 具体的なユースケースを妄想し、シナリオとしてまとめる

まずは現在の運用をシナリオとしてまとめます。
よりありありと利用者になりきって妄想するのがポイントです。
特に形式は決まっていないですが、例えば以下のように書くことができます。

() で囲まれた部分はユーザーの心理
[] で囲まれた部分は起こったできごと
素の文章はユーザーが行った動作

を示しています。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
Google Drive に保存している「GoatLover アカウント一覧」のSpreadSheetを開いた
(まずは一番上の「アカウント1」が利用中か聞いてみよう)
(あ、なんか仕事に集中している人がいるのに声かけるの気が引けるな...)
「GoatLoverのアカウント1を使っている人はいますか？」と大きな声で聞いた
[佐藤さんが黙って手を挙げた]
(どうやら使っているようだ。次は「アカウント2」について聞いてみよう)
「GoatLoverのアカウント2を使っている人はいますか？」と大きな声で聞いた
[斎藤さんが「つかってます！」と答えた]
「GoatLoverのアカウント3を使っている人はいますか？」と大きな声で聞いた
[誰も答えない]
「GoatLover アカウント一覧」の「アカウント3」の行に書いてある「アカウントID」と「パスワード」をそれぞれログインページにコピペした
GoatLoverのログインページで「ログイン」ボタンを押した
[GoatLoverに無事にログインできた]

ステップ2. シナリオの各ステップを解析する

ここでは、シナリオの各ステップについて詳細な解析を行います。
まず目的を考え、その目的を実現するためにUXの4つの要素の理想形を考察します。

ブラウザでGoatLoverのログインページを開いた

目的: GoatLoverのログインフォームを利用可能にする

察知: 現実的には事前に察知できない
代行: -
明示: 特に必要ない
判断: 特に必要ない

ここでは省略しますが、シナリオをより詳細に書いて分析することで、「ブックマークを使う」などのUX改善方法も見つかるはずです。

Google Drive に保存している「GoatLover アカウント一覧」のSpreadSheetを開いた

目的: GoatLoverで使えるアカウントの情報を入手する

察知: GoatLoverのログインページを開いた時
代行: アカウント一覧を取得する
明示: 特に必要ない
判断: 特に必要ない

「GoatLoverのアカウント1を使っている人はいますか？」と大きな声で聞いた
「GoatLoverのアカウント2を使っている人はいますか？」と大きな声で聞いた
「GoatLoverのアカウント3を使っている人はいますか？」と大きな声で聞いた

目的: GoatLoverで使えるアカウントの利用状況に関する情報を入手する

察知: 自動でアカウント一覧を取得した直後
代行: アカウントの利用状況を調査して、空いているアカウントのリストを取得する
明示: 見つかった空きアカウントの一覧
判断: どの空きアカウントを使うべきか

「GoatLover アカウント一覧」の「アカウント3」の行に書いてある「アカウントID」と「パスワード」をそれぞれログインページにコピペした

目的: GoatLoverに利用可能なアカウントIDとパスワードでログインできる状態にする

察知: 利用可能なアカウントが見つかったタイミング
代行: 利用可能なアカウントのIDとパスワードをセットする
明示: 以下の情報を明示する
- 通常のログインではなく、空きアカウントを使ってログインできること
- どのアカウントでログインするか
判断: 特に必要ない

GoatLoverのログインページで「ログイン」ボタンを押した

目的: GoatLoverに実際にログインする
タイミング: 実際にログインしたい時

察知: 現実的には察知できない
代行: -
明示: 特に必要ない
判断: ユーザーにログインボタンを押させる

ステップ3. 実現方法の検討

ステップ2で行った解析結果を元に、どのようにこのUXを実現するかを検討します。
実際に執事さんを雇ってやってもらうこともありえますし、ITを駆使して解決することもありえます。
身近なプログラマーに助言を求めてもいいでしょう。

今回はITで解決する方法を採用します。
ブラウザの拡張機能を開発して、GoatLoverのログインページを開いた際に自動でアカウントを検索するようにしましょう。

ステップ4. シナリオを書き直す

ステップ2, ステップ3の結果をもとにシナリオを書き直します。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
[ブラウザの拡張機能がGoatLoverのアカウントのうち、利用者がいないものを取得する]
[ブラウザの拡張機能が、どの空きアカウントを使うか選択させるポップアップを表示する]
(正直どれでもいい...)
アカウント3を選択した
[ブラウザの拡張機能がアカウント3のIDとパスワードを入力欄にセットする]
[ブラウザの拡張機能が「現在利用者がいないアカウント3を利用してログインします」とログイン画面に表示する]
「ログイン」ボタンを押した
[GoatLoverに無事ログインできた]

ステップ5. 不要な「判断」「明示」の除去

シナリオに書き出すことで、不要な「判断」と「明示」が見つかります。
シナリオを書き直してみましょう。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
[ブラウザの拡張機能がGoatLoverのアカウントのうち、利用者がいないものを取得する]
[ブラウザの拡張機能が、空きアカウントの中からアカウント3を選択する]
[ブラウザの拡張機能がアカウント3のIDとパスワードを入力欄にセットする]
[ブラウザの拡張機能がログインボタンに表示されている文字を「空きアカウントでログイン」に変更する]
「空きアカウントでログイン」ボタンを押した
[GoatLoverに無事ログインできた]

かなりすっきりしました。

必要であればステップ2からステップ5までを何度も繰り返してより良いUXに改善していきます。

ステップ6. ユーザーの意図しない操作による異常系のシナリオを作成して修正する

異常系のシナリオには

a. ユーザーが意図しない操作をしてしまった場合
b. 環境要因によって想定する結果が得られなかった場合

の2種類があります。

まずは a. ユーザーが意図しない操作をしてしまった場合のシナリオを作成します。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
[ブラウザの拡張機能がGoatLoverのアカウントのうち、利用者がいないものを取得する]
[ブラウザの拡張機能が、空きアカウントの中からアカウント3を選択する]
[ブラウザの拡張機能がアカウント3のIDとパスワードを入力欄にセットする]
[ブラウザの拡張機能がログインボタンに表示されている文字を「空きアカウントでログイン」に変更する]
アカウントの入力欄に入っている内容を書き換えた
「空きアカウントでログイン」ボタンを押した
[「ログインできません」とGoatLoverが表示する]

アカウントの入力欄を編集できる状態にしてあると、不要な「判断」の余地が生まれてしまいます。
以下のように改良することで、意図しない操作を防げました。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
[ブラウザの拡張機能がGoatLoverのアカウントのうち、利用者がいないものを取得する]
[ブラウザの拡張機能が、空きアカウントの中からアカウント3を選択する]
[ブラウザの拡張機能がアカウント3のIDとパスワードを入力欄にセットする]
[ブラウザの拡張機能がIDとパスワードの入力欄を編集できないようにする]
[ブラウザの拡張機能がログインボタンに表示されている文字を「空きアカウントでログイン」に変更する]
「空きアカウントでログイン」ボタンを押した
[GoatLoverに無事ログインできた]

ステップ7. 環境要因による異常系のシナリオを作成する

b. 環境要因によって想定する結果が得られなかった場合

のシナリオです。

(GoatLoverを使いたい...)
GoatLoverのログインページを開いた
[ブラウザの拡張機能がGoatLoverのアカウントのうち、利用者がいないものを取得する]
[空きアカウントが存在しない]
[ブラウザの拡張機能が「空きアカウントが存在しません。ユーザー[加藤]がアカウント3でログインしたまま22分間操作していませんが、強制的にログインしますか？」とポップアップを表示する]
加藤さんにログインしていいか聞いてみた
[加藤さんが「OK」と答えた]
「はい」を選択した
[ブラウザの拡張機能がアカウント3のIDとパスワードを入力欄にセットする]
[ブラウザの拡張機能がIDとパスワードの入力欄を編集できないようにする]
[ブラウザの拡張機能がログインボタンに表示されている文字を「空きアカウントでログイン」に変更する]
「空きアカウントでログイン」ボタンを押した
[GoatLoverに無事ログインできた]

同様に他の異常系についてもシナリオを作成します。

さらによくするために

今回は演習として簡単な例を出しましたが、現実の問題はもっと複雑です。
例えばアカウントに権限の種類があってできることが変わってくるかもしれません。
そのような場合に対応するためには、ユーザーの気持ちになりきったり、未来に起こることをありありと想像したりしてシナリオを書く必要があります。
もしよろしければ

などもご覧ください。

また、この1から7までのステップを繰り返しいろんな課題に対して実践してみることで、思考のフローが身につき、自然に理想的なUXが思い浮かぶようになってきます。

今回ご紹介した手法はWebサービスのUX設計でも、イベントの企画でも、様々な分野に応用することができます。
この内容が少しでも多くの方のお役に立てれば幸いです。

さくらちゃんにご飯をあげる

おもしろいお仕事があればお受けするのでぜひお声がけくださいm(_ _)m

架空のサービスです ↩