「失敗から学ぶユーザインタフェース 世界は BADUI であふれている」：Adobe MAX Japan 2023 セッションレポート

使い手を惑わせるインターフェイス。使うと面倒ごとが増えるインターフェイス。世間にはそうした BADUI が溢れています。Adobe MAX Japan のセッションで BADUI について講演した明治大学 総合数理学部 先端メディアサイエンス学科教授の中村聡史氏は、BADUI は迷惑な存在であっても、愛をもって接するべき対象であると語りました。というのは、BADUI に出会うことで、そこに関わる人々を観察し、気付きを得て、人に配慮したデザインを思考する機会が生まれるからです。研究者であると同時に教育者でもある中村氏らしい考え方です。

保育園に DX 化がやってきた

中村氏は、いくつかの BADUI の例を取り上げながら、どういった種類の問題があるのか、何故そうした問題が起きるのかを話しました。その中で特に興味深かったのは、近年注目を集めている DX 化の案件です。具体的には、保育園の入退室管理に QR コードを導入したという事例です。

保育園から提示されたシナリオは、下の画像のようなものです。保育園に子供を連れて来たとき、そして連れて帰るときに、親がスマートフォンのアプリを開き、画面に表示された QR コードをリーダーにかざして、入室と退室の時刻を記録します。ここにどのような問題が潜んでいるのか、この情報だけで想像できるでしょうか？

システムの使い方をデザインする際、「利用者がどのような状況にあるのか？」を考えることの必要性を中村氏は説きました。では、保育園への送迎時、親はどのような状態にあるでしょうか？

まず、子供を抱えたりあやしたりしています。そして、登園用の荷物を抱えています。すなわち両手でも足りないような状況にあります。さらに、アプリを扱っている間、子供はおとなしくしているでしょうか？中村氏は、アプリを使用している親に、今忙しいからと怒られている子供をよく見かけるそうです。

要するに、親には、スマートフォンなどかざしている余裕がありません。結果として、「朝のピッ！帰りのピッ！忘れずに・・」という張り紙が張られることになりました。導入されたシステムに対応できない親が、少なからずいたことを示すものです。

「QR コードを印刷して持っていけばアプリを開かずに済むのでは？」と思いついた中村氏が実際に試してみたところ、コードリーダーが発光する画面を読み取るタイプだったため、アプリを使わざるをえませんでした。

さらに大きな問題は、登録に時間がかかることです。中村氏の計測によると、通常時、QR コードを読み取ってから登録完了までに 4~7 秒かかります。なのでもともとあまりレスポンスの良いシステムではないようですが、朝や夕方の登録が集中する時間帯にはこれが一段と遅くなります。セッションで紹介されたケースでは 1 分近い遅延が記録されていました。

では、待ちきれずにもう一度 QR コードをかざすとどうなるでしょうか？下のスライドを見ると 16 日の欄には、入室の 1 分後に退室したという記録があります。朝の忙しい時間に待たされてイライラした人がどう振る舞うかを想像すれば、これは起きて当然の結果と言えるでしょう。

以上を踏まえて、中村氏からの提案をまとめたものが下のスライドです。システムの使いやすさを検討するには、UI の良し悪しだけでなく、より広い視点が必要とされることが示されています。

同じものが置いてあったら観察する

BADUI を減らしたければ、ユーザーの振る舞いを注意深く観察し、そこからどうするべきなのかを考えることが必要です。保育園の事例のように、他者がつくったシステムからの学びは本当に多いと中村氏は語ります。観察から学ぶ手段の一つとして、「同じものがいろいろなところに導入されていたら、それを観察すること」を中村氏は推奨しました。

例えば、下の画像は店頭に置かれていたコーヒーメーカーのディスプレイの変化を示したものです。ディスプレイには「レジで注文」のようなガイドが表示されますが（画像左）、カップをセットするまでは、抽出を開始するためのボタンが表示されません（画像右）。そして、カップを置くよう促すガイドは、ディスプレイに表示されません。そのため、カップを置かないと操作を始められないことに気づかないユーザーは、コーヒーメーカーの前で立ちすくすことになります。

そこで、ある店舗では、コーヒーの淹れ方を説明する紙が貼られたそうです。問題が認識されて、それに店舗が対応した一例です。

次の例は、コーヒーとカフェラテを淹れられる高機能なコーヒーメーカーです。このケースで問題だったのは、押すボタン次第でコーヒーでもカフェラテでも淹れられる点です。コーヒーの代金しか支払っていないのにカフェラテのボタンを押されると、店側としては約 70 円の損失になります。そのため、下の画像の店舗では、「こちら側はカフェラテ専用です」という張り紙がされるようになりました。

さらに一歩進んで、コーヒーを淹れるためのボタンを隠してしまっている店舗もあります。

本当はコーヒーを淹れられる機械が 2 台あるのに、2 人がコーヒーを淹れたいときは、どちらかが待たなければならなくなりますが、その点は割り切っているようです。

この 2 種類のコーヒーメーカーの例のように、同一の UI が様々な場所にあると、それぞれ違った対応がなされる様子を観察できます。そこから「人」が見えてくることがとても興味深く、学びにつながると中村氏は語りました。

ChatGPT は使えるか

ChatGPT に画像をアップロードして質問をすると、画像を解釈して答えを返してくれます。では、BADUI の画像を読み込んだ ChatGPT は、そこにある問題に気づくでしょうか？中村氏は、実際に BADUI の画像を使って実験した結果を紹介してくれました。

まず、とあるビルの案内板の画像です。化粧室の位置がわかりにくいと話題になったことがあるものです。本当は、化粧室は左側にあるのですが、ChatGPT は「右にある」と答えたそうです。どうやら、化粧室の画像の上にある右向きの矢印と関連付けたようです。

次の画像は、中村氏が案内板に使われているタイルの配置を変更したものです。これを再び ChatGPT に読み込んで同じ質問をしたところ、「左にある」と正しい答えが返ってきたそうです。

次の画像は、中村氏の家で使われているコンロの配置を簡略化して表した画像です。A に着火するには 1~4 のどのつまみをを操作すればよいかを聞いたところ、ChatGPT は 1 と答えました。正解は 2 なのですが、中村氏自身が、何年も使用しているのにいまだに間違えて 1 を操作してしまうといういわくつきのグリルです。（さて、1 を操作すると何が起こるでしょうか？）

次は入力フォームの例です。中村氏は入力欄の真下に「入力内容をリセット」と書かれたボタンがあることを気にしていたそうです。間違えて押すと、全ての入力を最初からやり直すことになる可能性があるからです。

このフォームの問題点を ChatGPT に聞いたところ、下の画像のように 8 番目に中村氏が懸念していた点の指摘と改善案が記述されていました。

紹介されたものは上手くいった事例であって、上手くいかなかった事例もたくさんあるとのことでした。従って、信頼できるパートナーとしてはまだまだかもしれませんが、人間っぽさを感じさせる反応を返している風でもありますし、いろいろと試していれば、自分一人では見つけられない気付きを得られることがあるかもしれません。

BADUI を観察しよう

中村氏は、「この UI を使ったら何が起こるか？を予想できると、UI の潜在的な問題点を指摘できるようになります。そして、人の行動をあれこれ想像する力を育むには、人を観察して知見を蓄えることが重要です」と語りました。BADUI は、その観察を容易にする機会を与えてくれます。中村氏は「面白い BADUI を見つけたら、ぜひ愛を持って SNS などに#BADUI タグと共に投稿いただけますと幸いです。いつも楽しんで見させていただいています」とセッションを締めくくりました。

BADUI についてさらに詳しく知りたい方は、中村氏の著書「失敗から学ぶユーザインターフェース」をご覧ください。