UXデザインで考慮すべき2つの距離
現在のスマートフォン市場ではiPhoneとAndroid端末が主流になっている。タッチパネルが全面にあり、ハードキーがそぎ落とされている。スマートフォンに組み込む機能の要件とUXの関係を見てみると、例えばiPhoneでは、指を横にスライドすることで画面を切り替える。普通に機能的に考えれば、指が横軸に移動したことを検知してメニューを切り替えるように作ればいい。しかし実際は、ユーザーは指を真横ではなく斜めに動かす。横だけを見ていては、ユーザーの意図通りの結果を返すことができないため、ユーザーは不快な体験をすることになる。そのため、斜めのスワイプも横と検知できるように作る必要がある。
またメールを受信した際はメール受信の通知を画面上に出し、現れた了解ボタンを押してメールを見に行く仕組みがあればいい。ただそのときはユーザーが別の操作をしていて、すぐにメールを見たくないかもしれない。着信通知の機能としては正しくても、ユーザーの状況を考慮しなければ正しいUXとは言えない。
大きな留意点として米川氏が指摘するのは「2つの距離」だ。まず指とタッチパネルの距離があり、アプリケーションが反応するまでの距離がある。両者が離れ、フィードバックが遅いほど、ユーザーの不満が大きくなる（図1）。そのため、この2つの距離をいかに縮めるかが良いUXの指標になる。
タッチパネルからアプリケーションまでの距離を縮めるためには、ネットワーク通信が入るなどの事情からすぐに結果を返すことができなくても、ハイライトなどのフィードバックを即座に行えばいい。Twitter系のアプリでは、スライドアニメーションを使っている。アニメーションは効果的で、現在見ているコンテンツから別の世界に切り替わったことを指し示すことができる。
指とタッチの距離ということでは、ボタン配置の問題がある。タッチパネルは、全面が反応する。ユーザーは移動しながら操作することが多い。そのため、スマートフォンは、従来型のハードキータイプよりも誤操作が多くなる。そのため、すぐに訂正できる仕組みが必須だ。
これまでグリーが進めてきたスマートフォン対象のアプリケーションの中心となっているのは、HTMLなどで作成されたフィーチャーフォン用アプリの移植だ。リストをタップで進むようにしたり、ボタンを目立つようにしたりするなど、スマホらしいUIを組み込んでいる。HTMLをベースにし、実現できない機能については、ネイティブアプリケーションで補っている。
HTMLを基本にしているのは、スピード重視という背景もある。HTMLベースでサーバーから配信する仕組みにより、常に最新のクオリティが高いデータを渡せるようにすることで、サービスの品質を上げていくサイクルを維持している。
スマートフォンUX固有の課題と解決策
ただ実際のスマートフォンへの移植では、いくつかの問題も発生している。まず「onClick delay」。WebKitのonClickイベントは、ダブルタップに備えるため、実際に実行されるまで300ミリ秒程度の遅延がある。そこですぐに反応するonTouchStartとonTouchEndに変えた。
ただ、すべてを完全に置き換えることには問題がある。例えばボタンクリックでハイライトし、スクロールする場合。指が外れたらハイライトを消したいのだが、スクロールが終了するまで画面が更新されないため、それまでハイライトが残ってしまう。ただ、それ以上にonClickイベントの遅れ感の方がユーザーには快適ではないため、優先使用している状態だ。
もう一つの問題はTimeline Context。例えばSNSアプリで友達の一覧があり、縦にスクロールして見つけた1人のプロフィールを見て、戻るボタンで一覧に戻ると、スクロール位置が先頭に戻ってしまう（図2）。これはHTMLで、Ajaxベースで作成していることに起因する問題なのだが、ここは普通にHTMLでキャッシュなどを効かせれば、元のスクロール位置に戻れる。
面白い例としてグリーが買収したOpenFeint社Game Channelというアプリは、ネイティブアプリの機能でスライドアニメーションをしている。ホーム画面のHTMLから次のHTMLを読み込み、前のコンテキストを維持し、別の画面へのアニメーションも出すことで、切り替わりをアピールする仕組みとなっている。ネイティブの機能を使いながらUXを上げようという取り組みの一つだ。
3つ目の問題はオフラインだ。モバイル機器なので、常にネットワーク環境が整った場所で使われるとは限らない。そのため、オフラインモードで使われたときに、ユーザー体験に非常に大きな影響を与える。そこで例えばグリーのSNSアプリでは画面が全面的に切り替わり「ページを読み込めませんでした。通信を確認して再度アクセスしてください」という表示が出てしまう。確かにSNSでは、他の人の情報取得が必須のために仕方がない面もあるが、別のゲームアプリではコンテキストは維持したまま、アラートを出す仕組みになっている。これは例えば地下鉄の駅の間で通信が途切れたときに休み、通信が回復したら続きをやればいいのでまだベターだと言える。
Pathというアプリは、フライトモードにしても写真投稿の操作ができる。実際はオンラインになったときにデータが送られるのだが、ごく自然にオフラインの状態を回避し、ユーザーが期待した操作を止めないようになっている。「スマホではネットワークが切れることがあるという前提で、ユーザーはその際に何をしたいのかを考え、アプリを設計する必要がある」（米川氏）。
グリーがUXを重視する背景には、ソーシャルゲームで主流になっているゲームスタイルがある。それは「あるアクションをしたら、ある程度時間が経過してから次のアクションが可能になる」というものだ。そこで重要になるのは、「継続してプレイしてもらうこと」になる。もちろんゲームのおもしろさが必要だが、インターフェースのデザインに不備があり、ユーザーが不満を感じてしまうと離れてしまう。コミュニケーションのインフラであるSNSも同様、操作上に障壁を作ってしまうとサービスが育たない。
米川氏が最後に挙げた課題は「クロスプラットフォームとOSの文化の壁」だ。最近ではiPhoneとAndroid端末に同じUXを提供する動きが一般的になっている。典型的な例がFacebookで、両OSの画面はほとんど変わらない。
逆の例はEvernoteになる。iPhone版はノート管理が主眼でメニュー一覧が縦に並ぶ「機能ベース」という雰囲気の画面になっている。Android版ではサービスのアイコンが並んでいる。Androidはあるアプリから別のアプリにいきなり飛んで連携させることも多い。米川氏は「クロスプラットフォームは神話」という意見に賛意を示す。すべてのアプリをまったく別々に作成するのは大変なため、クロスプラットフォームで開発する価値はもちろんあるが、あくまでユーザーの文脈を壊さないことが前提だ。
ユーザーはそれぞれのOSに最適なインターフェース、機能を持つアプリを求めている。例えばAndroidユーザーは、Androidの文脈の中でアプリケーションを使う。その中でiPhone風のインターフェースがいきなり紛れ込んでくると、戸惑ってしまう。文脈に沿わないUXを作ってしまうと、次にそのアプリケーションを立ち上げようというモチベーションを削ぐことになる。スマートフォンのUXでは、OSの文化をきちんと理解してデザインすることがポイントになる。
GREE Engineers' Blog
グリー株式会社
東京都港区六本木6-10-1 六本木ヒルズ森タワー
