モバイルユーザーエクスペリエンスの現状

最初のiPhoneから10年を経て、モバイルUXという分野はついに成熟期を迎えた。

最初のiPhoneが発売されたのは2007年の6月だった。2008年の終わりに、我々がモバイルのレポートの初版のための調査を開始したときには、ユーザーの持つモバイルデバイスはまだ原始的なもので、ユーザーエクスペリエンスもひどいものが大半だった。当時は、それなりにまともなエクスペリエンスというだけで、ほとんどのモバイルデバイスやモバイルサイトによる悲惨なエクスペリエンスと比べれば、好ましいものとされていたのである。

3年前、モバイルレポートの第三版を出すとき、我々はモバイルユーザビリティの状況について徹底的な評価をおこなった。そこで、モバイルユーザビリティという言葉は、もはや矛盾した表現ではないと幸いにも報告することができた。つまり、多くのサイトがようやくきちんとしたユーザビリティを備えるようになったのである。そして、モバイルUXの調査レポートの最新の第四版でも、その進化は続いていることが確認されている。

現在、モバイルのサイトやアプリのほとんどは良質なユーザーエクスペリエンスを提供している。それでも、不具合が起こったり、見た目のためにユーザビリティが犠牲にされることもあるが、前回のレポートからの2年間でこの分野が進歩したというのは自信をもって言えるだろう。ひどいエラーの大半はもう存在していない。多数のモバイルガイドラインのための事例を更新しようとしたときに発見したのは、企業がそうした問題を解決済みであり、我々が論じた課題の一部はもはや一般的ではないことだった。だが、我々は、逆に、2年前にほぼ絶滅したと思っていた問題の復活に遭遇している。ユーザビリティ業界では、間違いは(トレンドのように)繰り返されることが多い。そうした間違いはその世代では特定され、それを回避するデザインパターンも作成される。しかし、後の世代はそのUXの問題をもう見ることがないので、デザインを刷新しようとするときに同じエラーを繰り返してしまうのである。物事は常にニ進一退ということだ。

コンテンツ 対 クローム

コンテンツをUI要素(すなわち、クローム)よりも優先することが重要だ、というのが、レスポンシブデザインから得た教訓の1つだった。ハンバーガーメニューというトレンドはそうした教訓から発生したものである。デザイナーたちは画面上に表示されるUI要素の数を最小限にしようとしたのだ。こうした要素は貴重なコンテンツのための空間を奪っていたからである。それから2年経ち、デザイナーたちが、モバイルデバイスでは画面という不動産を大事にしていることに変わりはない。しかし、彼らはクロームを非表示にするという手段にもようやく目を向けるようになった。つまり、ハンバーガーメニューというトレンドに待ったがかかったのである。とはいえ、(我々が別記事で、非表示のナビゲーションは特定のサイトにしか向かないと論じたにもかかわらず)ハンバーガーメニューはいまだに非常に広い範囲で利用されている。しかし、(表示可能なナビゲーションバーのような)もっと良いデザインパターンが利用可能な場合は、ハンバーガーメニューを利用すべきではないことを多くのデザイナーが理解してきている。

他のデザインエリアでも、コンテンツをクロームより優先する動きが徐々に広がってきている。たとえば、ページの半分を占める大量のフィルターが最初にくる検索結果ページを目にすることはもうない。また、複数のページで連続して選択をしないとユーザーがコンテンツに遭遇できない、マトリョーシカ人形型のデザインパターンも以前ほどの人気はなくなった。少なくとも一部の企業はモバイルのナビゲーション構造はフラットにするほうが良いということを理解し始めている。ユーザーにさまざまなコンテンツがすぐに見えるようにして、興味のある特定のカテゴリーを絞り込んでもらおうということだ。

図
Walgreens.comは、過去には人気だったが、今はそれほど使われなくなってきている、マトリョーシカ人形型のナビゲーションを利用している。ユーザーはカテゴリーを4回選択しないと、商品を見ることができない。しかしながら、Walgreensはカテゴリー選択ページの一部に商品画像を追加し、コンテンツがあるように見せようとしている。これは、カテゴリーベースのデザインのくどさにデザイナーたちが気づいていることを示唆している。
図
iPhone向けのGoogle Express:Grocery(:食料品)の下にサブカテゴリーの一覧を載せるのではなく、各サブカテゴリーの下に数個のアイテムを表示している。さまざまなカテゴリーの中からユーザーが1つを選んでいくというカテゴリーベースのデザインを利用する代わりに、このアプリではコンテンツベースのデザインが適切に使われている。

ジェスチャーの利用

小さすぎる画面に多すぎるクローム、という問題をジェスチャーは解決する。しかし、よく知られているように、ジェスチャーは発見するのも学習するのも難しい。そのため、(Clear Todosのようなジェスチャー専用アプリによって具現化された)最初のジェスチャーブームは収まってきている部分もある。しかし、ジェスチャーの利用は、今もなお、モバイルデザインの有望な方向性の1つといえる。

図
iPhone向けのClear Todosの最初のバージョンは、2012年頃に登場したが、さまざまなジェスチャーを使って、視覚的なインタフェース要素がないことを補っていた。しかし、こうしたジェスチャーを覚えるのは大変だった。

残念ながら、ジェスチャーというのは、卵が先か鶏が先かという類の問題を抱えている。つまり、アプリやWebサイトで共通して利用される標準的な語彙になり、すべてのアプリやWebで一貫して使われるようになるまでは、学ぶのも使うのも楽ではない。そして、デザイナー側はジェスチャーの利用を敬遠せざるをえない。自分たちのユーザーはジェスチャーにはほとんど馴染みがないからだ。

Appleは、(iPhone 6Sへの3D Touchの導入により)ジェスチャーの標準的な語彙を拡大し、表示されているクロームの一部をジェスチャーに割り当てるさまざまな試みをおこなってきた。そして、彼らの試みはiPhone Xの登場によって頂点に達した。iPhone Xでは、iPhoneにある唯一の物理ボタンが取り去られ、一連のスワイプジェスチャーがそれに取って代わったからだ。その結果、まずジェスチャーを学ぶというハードルが従来の「ホーム」ボタンを使っていたユーザーには課せられたが、それを代償として、より有効に画面を活用できるようになったのである。

3D Touchは有望な方向性の1つだ。しかし、その割にはこれを使うアプリケーションはまだ多くない。けれども、それ以外の(昔からある)ジェスチャーで、ジェスチャーの基本語彙に追加されたといっていいくらい人気が高まっているものが2つ出てきている。削除などのコンテキストメニューアクションを表示させるスワイプ削除(swipe-to-delete)と、Webページに埋め込まれている地図の位置を変えるための2本指スクロールである。スワイプ削除は、リスト上でコンテキストメニューアクションを実行する便利な方法を追加してくれる一方、2本指スクロールは、地図がWebページに埋め込まれている場合に遭遇することが多い、スワイプの曖昧さという問題を解決する。これらのジェスチャーはどんどんユーザーに知られてきている。とはいえ、こうしたデザインを利用するときには、同じアクションを実行可能な別の方法も重ねて追加するか、少なくとも、ユーザーのガイドになるような、文脈に合った適切なヒントを提供することを引き続き推奨する。

図
2本指スクロールは地図をスクロールするときの標準ジェスチャーになってきており、(ユーザーがページをスクロールしようとして、うっかり地図をスクロールしてしまう、またはその逆、といった)スワイプの曖昧さという問題を解決する。

モバイルのWebとアプリのWebのよりスムーズな統合

かつては、Webからアプリへの移動には、ユーザーの具体的なアクションが必要だった。iOSの場合は、ユーザーはアプリを開くことを明示的に選択してから、アプリ内で検索を実行しなければならなかった。しかし、iOS 9以降、モバイルのWebとアプリのWebの間はすぐに移動することが可能になった。たとえば、検索エンジンで映画を検索すると、(ユーザーがアプリケーションをインストール済みであれば)それに該当する検索結果から、対応するアプリケーションのページをシームレスに開くことができる。

図
検索結果ページで、映画へのリンクを選択すると、SafariからiMDbアプリにコントロールが移動する。ステータスバーの左上隅に「アプリに戻る」ボタンが表示され、この前に利用していたアプリ名(Safari)のラベルが付く。

ブラウザからアプリに、また、より一般には、アプリから次のアプリにシームレスに移動できれば、コンテンツ消費というエクスペリエンスは確実に最適化される。というのも、ほとんどの場合、アプリケーションのほうがサイトよりもユーザーエクスペリエンスが優れているからだ(単にアプリはモバイルのプラットフォーム用にデザインされているので、このプラットフォームによりなじみやすいことがその理由である)。

しかし、残念ながら、こういうデザインにすると、ユーザーに新たな負担がかかることもわかった。ユーザーは自分がどこにいるかを把握していなければならないし、どうやって戻るかを知っている必要があるからだ。アプリケーションはそうしたニーズにも応えなければならない。たとえば、(上のiMDbのように)多くのアプリは、深い階層のページにロゴを入れていない。その結果、アプリとWebによる新しく拡大した世界で、ユーザーが自分の位置を確認することがより難しくなっている。

ブラウザからアプリへの切り替えが楽になったことに関係していると考えられるが、アプリのインタースティシャル広告の数が減っているのは特筆すべき進歩といえよう。新しいサイトに移動しようとすると、たどり着く前にインタースティシャル広告が出て、アプリをダウンロードするように勧める時代は(ほぼ)終わった。たいていの場合、アプリの宣伝はWebページの一番上にあるバナーの中だけになった。

端末の機能の活用

完璧にできているとはいえないまでも、端末の基本的な機能を活用するサイトやアプリが増えている。Apple PayやAndroid Payのようなシステムとの統合により、多くのECサイトでは、精算が非常に簡単になった。また、ほとんどのサイトやアプリはユーザーの現在地情報を活用している。生体認証のおかげでパスワードを覚えるという問題を避けられるようになり、さらには、デバイス間で情報を伝達しやすくなったこと(その結果、デバイスを超えて、自動ログインができるようになったこと)により、デスクトップのログインまでも楽になった。

図
新しいiPhoneの設定には、認証情報を入力する必要はない。そうした情報は近くにあるデバイスから自動的に転送されるからだ。

チュートリアルの減少:UXの停滞

どんな立派なアプリも、数年前までは、利用可能なすべての機能を列挙した非常に長いチュートリアルから始まっていた。こうしたチュートリアルの欠点はイライラさせられることで、よく言ったところで、役に立ってはいなかった。長ったらしいチュートリアルに挙げられている大量のコマンドを覚えられるユーザーはいなかったからである。また、そのうちの一部を覚えようとするユーザーもいなかった。結局のところ、使う前からどの機能が実際に便利なのかなんて、誰にもわからないからである。

現在では、そうしたチュートリアルはアプリの一般的な概要に置き換えられていることがほとんどだが、そうした概要の目的は、ユーザーを説得して、彼らにログインウォール(:実際のコンテンツを見る前に、ユーザーにログインや登録を依頼するページのこと)を乗り越えて、アカウントを作成してもらうことにある。こうしたログインウォールが完全になくなってしまい、登録をしなくてもユーザーがアプリを体験できるのが理想といえる。というのも、最初に出てくるアプリの概要は広告として機能している。そして、ほとんどのユーザーは広告を最後までは見たくないからだ。アプリのダウンロードにすでに労力を費やしている場合はなおさらそうだろう。

後退した点

レスポンシブデザインのトレンドは全体的には肯定的な影響をもたらしているが、複数のインタラクション様式をつなごうとして、メニューやアコーディオンに分割ボタンを利用するといった変なソリューションに進んでしまっている場合もあった。分割ボタンメニューの背後にある意図とは、デスクトップのメインナビゲーションのカテゴリーにマウスオーバーしてクリックするというインタラクションを再現すること、すなわち、カテゴリーランディングページとサブメニューの両方にアクセスできるようにすることにある。けれども、分割ボタンというのはまったくユーザブルではないソリューションといえる。2つのターゲットを小さな空間に押し込むことで、人の指でその各々を捕捉する作業が難しくなっているから、だけではない。このソリューションは、ユーザーの期待や彼らが今まで学んできたモバイルのデザインパターンにも反しているからである。

ゲスト決済ができなくなってしまったことも少々驚かされた展開である。過去にこの機能を提供していたサイトやアプリがその機能を削除しているのだ。「Apple Payで支払いする」「PayPalで支払いする」を利用して、ゲスト決済がなくなったことを補っているサイトもある。しかし、多くのサイトでは、今もなお、一度限りの購入者であっても、ユーザーにアカウントの作成を強制している。プラス面は、登録自体は簡素化されているデザインが多くなっていることだ。最近では、アカウントを作成するために求められるのは、Emailアドレスとパスワードのみというのがかなり一般的である。

オーバーレイの人気が高まり、メニューをオーバーレイとして実装するサイトが増えている。2年前、モバイルのオーバーレイはバグだらけで、(オーバーレイの背後にあるコンテンツが突然、オーバーレイの上に出てくるといった)おもしろい効果が生じてしまうことが少なくなかった。現在のオーバーレイはずっと良くなっている。しかし、オーバーレイはフルページのように見えることも多く、そうなると、ユーザーもフルページのつもりで処理してしまう。つまり、「戻る」ボタンで閉じれば、前のビューに戻れると思ってしまうのである。そのため、前のビューに戻れず、代わりにそのサイトから出されてしまって、ユーザーが自分がどこにいるかわからなくなることがよくある。また、(ますます人気を集めているシーケンシャルメニューと同じように)、フロー全体がオーバーレイの中に入ってしまうと、エラーが起こる可能性はますます高くなる。ユーザーがオーバーレイ内の的確な移動を可能にする、メニューにある「戻る」ボタンを使うのを忘れてしまい、代わりにブラウザや端末の「戻る」ボタンを使ってしまうからである。

図
LATimes.com:新しいページのように見えるオーバーレイの中に、メニューが表示されている(左)。左上隅に「閉じる」ボタンがあるにもかかわらず、ユーザーはこのオーバーレイを閉じるために、ブラウザの「戻る」ボタンをついタップしたくなってしまう。しかし、もしそうしてしまうと、LA Timesのトップページではなく、この前に訪問したページ(右に出ている、検索エンジン結果ページ)に連れて行かれる。

結論

初代iPhoneから10年を経て、モバイルユーザーエクスエペリエンスという分野は、妥当といえる水準にまでついに成熟した。comScoreの最近のレポートによると、世界の多くの地域では、オンラインで使われる時間の半分以上が、そろそろ、モバイルによるものになろうとしている。したがって、モバイルのユーザビリティがデスクトップのユーザビリティに追いつくのは当然ではある。ただし、モバイルのサイトやアプリのユーザビリティが完璧な状態に到達したというわけではない。完璧なデザインなどというものはないからだ。そうではなく、単に、サイトやアプリの多くがきちんとしたユーザーエクスペリエンスを提供しているということであり、そして、過去にあった多数のひどいエラーが修正されたということだといえよう。

調査の最新レポート

モバイルユーザビリティについての調査結果とガイドラインは、我々のレポート、「モバイルユーザーエクスエペリエンス」の最新版に収められている。多数あるガイドラインはモバイルの現在のデザインパターンとインタラクションを反映したものだが、従来からのガイドラインで今も存続しているものについては、事例を新しくする見直しをおこなっている。

参考文献

comScore. 2017. The Global Mobile Report.

公開: 2018年8月6日 (原文:2018年1月14日)
著者: Raluca Budiu
原文:The State of Mobile User Experience