昨月、4年と9ヶ月に及ぶ使用を経てソフト・ハード両面において限界を超えつつあったスマートフォン (Xperia Acro) を新しい機種 (Xperia X Performance) へと買い換えてきました。 更にノートPCが仕事で必要になったため、こちらも新しいものを購入。 私はもともとガジェットの類にあまり強い関心を持たない人間であるため、買い替えとなると技術的な世代のギャップを渡ることになるのが常。 今回は Androd のバージョンは 2.3.4 から 6.0.1、Windows は 7 から 10 というロングジャンプをすることに。

ここまで足長の移行を遂げると、モノの良し悪しはさておき、まずユーザインターフェイスの様変わりに面食らうことになるわけですが、その変化の中には、何を考えてそのようにしたのか理解に苦しむものが少なからず見受けられます。 もちろん、技術の進歩によって、それまでは「使い物にならない」とみなされてきた設計が「理に適ったカタチ」として受け入れられてきた例も数多くあるわけですが、それを考慮に入れてもなお、とても及第点を与えられないようなデザインが蔓延してはいないでしょうか。

今回は、私が新規に購入したふたつのデバイスを例として、近年のトレンドとなっているUIデザインの問題について論じてみようと思います。

右の画像は私のスマートフォンのスクリーンに表示されている Android の「標準ボタン」ですが、その外観は度が過ぎるほどにシンプル。 これらのボタンには左から順に「戻る」、「ホーム」、「アプリ切替」という機能がそれぞれ割り当てられているのですが、予備知識のない人に、この見た目からそれを読み取れというのは酷な要求でしょう。

この分かりづらさは、加速度センサによる機体の傾き検出が上手く作動しない場合により顕著なものになります。 皮肉でもなんでもなく、単に「三角形、五角形、四角形が並んでいる」だけにしか見えません。

「戻る (Back)」ボタンの問題

一番左の「戻る」ボタンの絵柄の意図するところは「左方向」すなわち「過去」への移動ですが、この表現には2つの問題があります。 まず、時間的な前後と空間における左右についての

左 = 過去 / 右 = 未来

という関連付けがどれほど普遍性のあるものかということ。 確かに我々が普段目にする一般的なカレンダーなどでは左から右に向かって時間が進むようになっていますが、それは英語や (近代以降の) 日本語やの横書きの習慣に由来するものであり、必ずしもすべての文化・場面において無条件に適用できるものとは言えません。 現に、「前の (古い) 記事へ」のリンクを右側に、「次の (新しい) 記事へ」のリンクを左側に配置しているブログが少なからず見られます。 また、日本語の縦書きのような右から左へ進む文章を読むことのできる電子ブックリーダなどのアプリを使用しているときなどは、このボタンのデザインに違和感を覚えることでしょう。

問題のいまひとつは、左方向を指している (はずの) 三角形が限りなく正三角形に近いという、より深刻なデザイン上の不備です。 特に右図下段のように横倒しにされた状況では、その意味するところがまったく伝わりません。 せめて二等辺三角形であれば、ひとつだけ大きさの違う角が指し示しているのが「特別な方向」であることが明らかになったでしょう。 そもそも、こうした方向の曖昧さは、矢印の形状をデザインとして採用していれば生じなかった筈のものです。

「ホーム (Home)」ボタンの問題

中央の「ホーム」ボタンは、現在のアプリの操作を中断してホーム画面に戻るためのものであり、その図示には名前が示す通り「家」をモチーフとしたアイコンが用いられるのが一般的。 右の図中では野球のホームプレートのような五角形でこれが表されていますが、これは「戻る」ボタンのケースとは逆に、特定の「方向」を指し示すものでないにも関わらず 「矢印っぽい」ことが、ユーザがその意味するところを把握することを妨げています。 下段の「横倒し」状態ではそれがより顕著に。

「この五角形が矢印に見えるなんて、随分ひねくれてるんじゃないか」と感じるかもしれませんが、現にこのタイプの五角形を「矢印」として利用している例がすぐ近くにあることを考え合わせるに、それほど穿った指摘ではなかろうと思っています。

「アプリ切替 (overview)」ボタンの問題

右側の「アプリ切替」ボタンのデザインに至ってはもはや論外。 その見た目は単なる正方形以外のナニモノでもなく、「Android の標準ボタン」という文脈に限定したとしても、その意味するところを推測することは容易ではない、というか実際問題として不可能でしょう。 このアイコンで何かを表すことが妥当な状況があるとすれば、それは対象が「図形としての正方形 (あるいは四角形)」そのものである場合を除いて他にないと思われます。

具体的な解決策

では、これらのボタンのアイコンはどのようにデザインすれば妥当なものになるでしょうか。 自分で少し考えてみた結果を右図に示します。 主なポイントは以下の通り:

• 「戻る」動作を表すには、最初にいた地点に戻ってくる矢印を描けばよい。
• 「ホーム」は玄関を表す意匠を加えることで、矢印には見えなくなる。
• 「アプリ切替」は起動中のアプリを表すウィンドウの重なりを表現する。

これは本当に数秒で考え付いた改善案ですが、もちろん私の独創というわけではありません。 ふと思い出して古いスマートフォンを引っ張り出してみましたが、案の定これに近いデザインになっています。

当時 (Android 2.3.4) では「アプリ切替」ボタンはまだなく、その位置を「メニュー」ボタンが占めていました。 以下に引くのは標準ボタンのそれぞれの正式な名称を調べていたときに出会ったページですが、これを見ると 5.0 より古いバージョンの Android では私が思い付いたのによく似たデザインが使われていたことが伺われます。

Android 1 - 4.4

Android 5.0 - ?

What is the offical name of the third on-screen button? - Android Enthusiasts Stack Exchange

それにしても、5.0以降のデザインの酷さには呆れ返るばかり。 単なる円「○」が「ホーム」ボタンを表すアイコンであるとは、誰が気付くでしょうか。 絵ヅラ的にも、正三角形, 円, 正方形の並びは積木感たっぷりです。

トポロジー的に見ればすべての多角形は円と同相なわけで、これは究極の抽象化と言えるかもしれません。 折角ですから、すべてのアイコンを「○」にすればこの上なくシンプルになって良いのではないでしょうか、などと皮肉のひとつも言いたくなるところです。

ここでノートPCの方に視線を転じて見ると、こちらにも「行き過ぎた単純化」の問題があることに気が付きます。 Windows 10 に採用されているのは、前バージョンである Windows 8 で導入された Modern UI (当時は "Metro" と呼ばれていた) と呼ばれるスタイルのユーザインターフェイス。 以前の "クラシック" あるいは "Aero" のUIデザインから移行したときにまず大きな変更として目を引くのが、メニュー配置の変化とアイコンの「フラット化」でしょう。 多くのアイコンが「単色の背景」と「白いシンボルシルエット」のみでデザインされており、人によっては、その名に相応しい「モダン」でスタイリッシュな雰囲気が漂い出ているのを感じるのかもしれません。

しかしながら、実際に使ってみればこれらのフラットなアイコンは著しく視認性の低いものであることが分かるでしょう。 どれもが単色かつ奥行きのないデザインであるため、直線あるいはグリッド状に並んだ多数のアイコンの中から目的のものを一瞥で見つけ出すことが極めて困難。 結局、一覧の内容を把握した後でさえ、ユーザは添えられたラベル (テキスト) を頼りとしてクリックすべきアイコンを選択することになります。

そもそも、アイコンという「小さな図形で対象を表す」手法自体が強力な抽象化・単純化の結果であり、従来のアイコン (図左下のクイック起動領域にそれらを見ることができます) は既にギリギリまで余分な情報を削ぎ落としたものになっています。 そこから更に「色」「陰影」などの情報を取り除けば、互いに見分けの付きづらい、無個性なものになることは必至。 抽象化あるいはデフォルメといった表現は、余分な情報を削ぎ落とすことで対象の「個性」「特徴」を抽出・強調する手法ですが、ではその「個性」「特徴」とは何かと言えば、同類・近縁のものの中から対象を識別・特定するための手掛かりとなる性質に他なりません。 その個性・特徴を欠落させてしまう変形はもはや抽象化でもデフォルメでもなく、単なる「手抜き」と呼ぶべきあり、「表現」として評価するに値しないものです。

然るに、前節で紹介した Android の標準ボタンは「過去へ向かう動作」を三つの方向いずれに向いているとも解釈できる図形 (正三角形) で表し、「家」という概念を矢印だと誤認されかねない図形で表しています。 そしてまた、この Modern UI のフラットなアイコンも同様、無意味に表現の幅を狭め情報量を削減することで、隣り合うアイコン同士の区別を付けづらくしてしまいました。 こうしたユーザビリティを劇的に下げる一方で、システムの性能の向上についていかなる貢献もしないデザインを私たちが選択すべき理由は何処にあるのでしょうか。

ここまではアイコンの問題を取り上げましたが、「フラットデザイン」にはその他にもユーザビリティ上の深刻な問題が幾つも潜んでいます。 その中でも特に強く感じているのが、ボタンをはじめとしたUIコントロールから立体的な表現が失われたため、どこがクリック/タップできるのかが非常に分かりづらくなったこと。

右に示したのは Internet Explorer に代わって Windows の標準ブラウザとなったMicrosoft Edge の設定画面。 URL (http:www.google.com) が表示されている部分はテキストボックスになっているのですが、従来の周囲から一段窪んで見える枠線が (どころか、領域の境界を示すいかなる視覚効果も) ないため、このURLが編集可能な状態にあるということを瞬間的に読み取ることは容易ではありません。 ボタン (お気に入りの設定の表示) からは立体的な凸表現の視覚効果が失われているために、重要なコントロールであるにも関わらず、従来のそれと比較してユーザの注意を惹起する力の弱いものとなっています。

こうしたインタラクションの取りづらさは、8 以降の Windows において多くのユーザ (私のようなIT技術者でさえも) が目指す機能や設定パネルにたどりつけないという現象となって現れています。 読者の皆様の中にも、Modern UI や他の「フラット」なユーザインターフェイスにおいて思った通りの操作ができず、さんざん調べた挙句、

という場所に目的の機能を呼び出すボタンやリンクを発見するという経験をした方は多いのではないでしょうか。

フラットなスタイルは発見しやすさを損なう

Windows 8 のUIはかつて「Metro」スタイルと呼ばれ、今度は「Modern UI」と名付けられたスタイルの、完全にフラットなものである。 微妙に影を付けることで、(残りの部分より浮き上がって見えて) 何がクリックできるか、(ページ表面よりくぼんで見えて) どこに入力できるかを示す、擬似3Dモデルやライティングモデルはそこには存在しない。

Metro/Modern UI はタイポグラフィが過去のUIスタイルより洗練されているし、色鮮やかなタイルは新鮮だとは思う。

しかし、新しいスタイルは従来的なGUIとは異なる見た目にするためにユーザビリティを犠牲にしている。 GUIのデザイナーたちが Metro デザインでやっている以上に、オブジェクトを詳細でクリック可能なものに見せようとしていたのには訳があるのである。 例として、この設定メニューを見てみよう:

クリックできるのはどこだろうか。 どれもフラットだし、実際のところ、「Change PC settings (PCの設定を変更する)」という文字も、ただのアイコンのグループのラベルのようで、クリックできるコマンドには見えない。 結果として、テストではユーザーの多くが隠れている機能の1つにアクセスしようとするとき、このコマンドをクリックしなかった。

( 中略 )

アイコンはフラットで単色であり、大ざっぱに簡素化されている。 これが Apple の iOS における、はっきりと触れるとわかる、色鮮やかで、極めて詳細な「skeuomorphic (質感や特徴など現実世界のモチーフを模倣した)」デザインスタイルに対する反撃であることは間違いない。 今回に限っては、妥協したほうが極端に走るよりは良かったのではないかと思う。 今回、ユーザーがアイコンを使うことができなかったり、アイコンの意味が理解できなかったりする様子をよく目にしたからである。

アイコンとは、(a) ユーザーがそのシステムを解釈することを助け、(b) クリックを呼び込むものでなければならない。 Win8 のアイコンはそうではないのである。

Windows 8 - 初心者にもパワーユーザーにも期待はずれのユーザビリティ – U-Site

これは以前から観察されていた問題ですが、今回また新たな事例に遭遇したので、ここで紹介しておきたいと思います。

右に示したのはスマートフォンのカメラアプリを起動したときの画面。 あまりにも目立たないので派手な赤枠で囲んで示しましたが、この位置に3つの小さな点「·」が並んでいるのが分かるでしょうか。 これは何かというと、先の節で紹介した Android の3つの標準ボタンです。 おそらく、カメラアプリ固有のボタンと区別されるように、あるいは、映像に重なってファインダとしての機能を損なうことを防ぐために、目立たない形状に変化させているのでしょうが、私が考える限り、この工夫にはまったく有用性がありません。

標準ボタンはどのアプリを起動していても同じ位置に表示されるものなわけで、むしろその姿を見えなく (見えにくく) することの方がユーザにとっては混乱の要因となるように思われます。 ここはむしろ、カメラアプリ固有のボタンの方を標準ボタンと混同されない位置に移動させるか、混同されないデザインに変更するべき場面でしょう。 また、カメラ画像を隠さないようにとの配慮も微妙なところで、より画面中心に近い位置に馬鹿デカい (もちろん、操作の都合上そのサイズになるのは理解できるのですが) 上に不透明なシャッタボタンを配置しておきながら、その占有面積の大部分が背景として透過される極めて (過剰なほどに) 単純なボタンアイコンを「消す」意味を見出すことは困難です。

私が最初にこのような「押せば普通に動作するのにも関わらず何故かそれに関する説明をわざわざ隠す」インターフェイスの存在に気が付いたのは、OS X のウィンドウの左上に付いている3つのボタンでした。 左から順に赤, 黄, 緑と色分けされており、ポイントするとその動作 (Windows でいう「閉じる」「最小化」「最大化」に相当) を示すシンボル [×], [－], [＋] が浮かび上がってきます。

一見するとユーザフレンドリーな動作に思えるかも知れませんが、よく考えて見るとこれは不思議なデザインです。 ポイントすると浮かび上がる、ということは普段 (ポイントしていないとき) は見えない状態になっているということ。 いったいどうしてシンボルをわざわざ消すのでしょう。 これだと、どの色のボタンがどの機能なのかを知らない (あるいは覚えていない/慣れていない) ユーザは、目的のボタンに向かってまっすぐにカーソルを動かすことができません。 まず3つのうちどれかのボタンをポイントし、現れたサインを確認した上で改めて目的のボタンをクリックしに行く必要があります。 この動作にそれほど不都合を感じる人は少ないようですが、例えばこれがポイントされていない状態でボタンの色が3つともグレーになるとしたら、不便とまでは言わずとも、相当な違和感を覚えるのではないでしょうか。

同様の問題は Windows 7 のツリービューにも存在しており、これについては以下の記事でその不合理さを指摘しています。

右図は、カテゴリ表示をマウスでポイントしたときの表示の変化です。 マウスカーソルでポイントすると、各項目の左側にクリックによって開閉が可能であることを示す三角形のナビゲーションが浮かび上がってきます。 さて、このナビゲーションをポイントされていないときに非表示にすることにはどんな意味があるでしょう。 図からも明らかなように、この仕掛けによってスペースが節約されているといった利点もありません。

flint blog: A Good Example of Bad Interface Design

この手のUIの挙動について私が行う提案は次の二つ。

中途半端な「気の利かせ方」はユーザの利益に資するところがないばかりか、開発･実装の手間を徒に増やすだけの悪習である、と心得るべきです。

普段私と接している人は、私がいつも何かしらの製品・サービスのユーザインターフェイスに憤慨していることをご存知かと思います。 何故そこまでUI設計に拘るのかと問われれば、まずは単純に、出来の悪いUIが生活の質を下げるから。 単に操作が上手く行かず苛立たしい思いをするだけならまだマシで、ときにはその操作性の悪さが原因で事故や怪我につながる危険を招くことさえあることを思えば、「多少出来が悪くてもいいや」などと寛大な態度を取ることはできません。

そして、何よりも大きな理由は、自身が手掛けたシステムが、ユーザインターフェイス設計担当者の能力不足のために、最終的な製品として「使えない」システムに仕立て上げられてしまった経験を一度ならずしていることでしょうか。 せっかく考慮と工夫を重ねてパフォーマンスや保守・拡張性に優れたソフトウェアを作っても、その上に特に理由もなくユーザビリティの低いUIを被せられてしまうと、利用者からの評価はダダ下がり。 そんなときは「この設計ではこうした問題が起こります」「こうした方が良いのでは?」と提案をするも、「流行 (トレンド) だから」「こういうコンセプトだから」という理由で却下されるのがお定まりのコースです。

そこへもってきて、Microsoft, Apple, Google といったOS供給企業に、こんないい加減なUIデザインをされたのでは、業界全体に「UIデザインというのはこの水準でやってOKなんだ」という認識が浸透しかねません。 そうなれば、「どうしてこの配置なのか」「何故この形なのか」といった、デザインを進めていく上で為されるひとつひとつの決定について、その理由を深く突き詰めることなく、担当者の感覚・感性のみに依存した、「なんとなくこれでいいんじゃない?」式の無根拠なアマチュア仕事が横行することになるでしょう。 (現状既にそんな感じではありますが。)

大衆は、アートを見て、「わけがわからない」とときどきぼやくけれど、もともと「わかる」ものではなく、「感じる」ものだろう。 一方、デザインは、「わけのわからない」ものであってはならない。 そこには、明確な理由があり、手法があり、目指す機能が盛り込まれている。 そうでなければ、デザインではない。

『考えなしの行動?』/ 著: ジェーン・フルトン・スーリ + IDEO, 訳: 森 博嗣

例えばシステム開発でこれと同じことをしたらどうなるでしょうか。 明確な理由も根拠もなく「使用するOS, 言語, データベース, プロトコルは主に担当者の嗜好で決めています」なんてことになったら、発注を取り消されかねません。 しかし、そうした不適切な選択の積み重ねの上に作り上げられたシステムは大抵の場合まともに動作しませんから、最終的な製品となる前にどこかの段階でプロジェクトごと潰れてしまい、世の中に出回るということはあまりありません。 ところが、UIデザインに関しては相当に出来の酷いものでも、運用でカバーという魔法のオプションと共に「仕様」として世に出てしまうケースが頻繁に観察されます。

しかしながら、UIデザインというのはシステム開発と同等以上に、専門的な知識と経験が必要とされる分野。 総務省あるいはそれに類する機関によって示されるユーザビリティのガイドラインに沿ってさえいれば、それだけでユーザにとって使いやすい・有益なインターフェイスが出来上がるわけではありません。 この業務に従事する人たちには、プロフェッショナルとしての矜持と客観的な根拠・指針をもって、質の高い仕事をして頂きたい、と切に願うばかりです。

関連エントリ

• 「デザイン」の問題
• Fake Professionals