ジェスチャーを利用したモバイルUXの考え方

Gil Toledo

Gil Toledo氏は、モバイルウェブサイトのためのジェスチャーベースのエンゲージメントプラットフォームであるerrnioの共同創設者兼プロダクト部長です。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

Unleashing Mobile Gesture UX (2015-08-03)

モバイルはウェブサイトへのトラフィックを飛躍的に増大させましたが、エンゲージメントという観点ではモバイルであるが故の問題が新たに発生しています。モバイルユーザーという新しいトラフィックソースにおいて、エンゲージメントの測定基準はデスクトップのそれとは異なります。セッションごとのページ数、滞在時間、およびその他の様々なメトリクスにて、デスクトップのベンチマークに達しないようです。

我々はモバイルのコンテンツサイトでは、ジェスチャーなどを用いたモバイルファーストなインタラクションをもつ別のアプローチをとる必要があります。アプリができるのであれば、ウェブもできるはずです。ウェブページであっても、タップとスクロール、スワイプとピンチにすでに対応している場合もあります。

ジェスチャーの定義について

gesture(情報元 – Oxford Dictionaries) 
ˈjesCHər
名詞
複数形: gestures
アイデアや意味を表現するための、手や頭などの身体の部分の動き。
「Alexは謝罪の動作をした」
同義語: signal、sign、motion、indication、gesticulation; 意思表示
「降参の意思表示」
動詞
3人称: gestures
身ぶりをする。
「彼女はピストルで意味深な動作をした」

(※下記、筆者が追記した定義)
携帯電話:スクリーンジェスチャー
意図を示すための、モバイルデバイス画面上の指による動き
タップ、ズーム、スクロール、スワイプ
「左にスワイプして、私は彼女か好き!」
「おお、下にスクロールして、私はもっと見たい」

クリックからタップまで

タッチスクリーンは、私たちとモバイル機器とのインタラクションを変えました。Nokiaの廉価版モデルやPalm Pilotの時代を経て、機器を操作する手段としてマルチタッチが普遍的なものとなりました。それは、小さなデバイスと私たちをより強く結びつける新しい体験なのです。私たちは自然かつ最小の方法で、より多くのことを行っているのです。よって、幼児などがすぐにタッチスクリーンに適応することも、とくに驚くべきことではありません。

モバイル画面とブラウザで行うジェスチャーの例:

テキスト選択: タップで選択したテキストに関連したメニューをポップアップします。

ピンチ:ページや異なる要素をズームインまたはズームアウトします。

スクロール:ページをあちこちに動かして、ブラウザーで閲覧スペースを増やしながら、情報またはコンテンツの閲覧/走り読み/熟読を行います。

スワイプ:セクションからセクション、またはアイテムからアイテムへと私たちを誘導し、そしてページの前後へと移動することにも使用できます。

調査でわかったこと

およそ5,000強のサイトに対して、errnio(Webパブリッシャーに向けたジェスチャーエンゲージメントに特化したプラットフォーム)で私たちのデータセットで行った最近の分析でも、多くのジェスチャー事例が見られます。モバイルユーザーは1日につき5〜10のウェブサイトを閲覧し、私たちのデータは平均的なユーザーがページへのあらゆる訪問で10-15のジェスチャーを行うことを示します。

明らかにスクロールが最も実行されるジェスチャーですが、他のジェスチャーもそれほどおくれを取ってはいません。私たちはズームまたはテキスト選択が多く実行されていることにまず最初に非常に驚きました。以下は100セッション内での平均の実行回数です:

1.200スクロール

2.60スワイプ

3.100ズーム

4.50ロングタップ

それが各々のジェスチャーをどう測るかという問題はありますし、それらをピクセル単位で測定しているわけではありませんが、依然として私はこれをきちんとした学問と結び付けたいと思っています。信頼できる筋から、将来のこれに関するフィードバックを得られたらいいのですが。

私たちはまた、モバイルのトラフィックとインタラクションに関する、業界内の数値まわりを確認しました:

・サイトへのトラフィックのおよそ40%がモバイル

・モバイルサイト上で費やす時間は、50%デスクトップよりも少ない

・モバイル上では一回の訪問セッションで閲覧されるページ数は、30%少ない

興味深いことは、この低いモバイルサイトパフォーマンスと、ジェスチャーを通してのインタラクションへの可能性の関係です。多くはコンテンツを巡回して、発見を強化し、ユーザーを行動に従事させることに使用されます。

iOSとAndroidの行動 

主要なブラウザの2つが私たちの身体的な行動で行うこと、そして、それらがどのように順番に反応するかに関するいくつかの例を挙げます。

Safariブラウザを利用するiOS

iOSの既定ブラウザが全ての始まりでした。もはやこれらは当たり前で、ありきたりと感じるかもしれませんが、あなたの認識していないものもあるかもしれません。

・スワイプ:前のページ/次のページ

・ズーム:ページ全体をズームします。

・選択:コピーや意味を調べるなどのシンプルなボタンが表示され、iOS9ではシェア機能も付きました。

・スクロールダウン:トップおよびボトムバーを最小化し、フルスクリーンに限りなく近い状態にします。

・スクロールアップ:ブラウザの上下にある、よく使用される検索およびツールアイテムを戻します。

mobile-gesture-ux-ios-safari

Google Chromeを使用するAndroid

・選択:ここで大きく異なることは、視覚要素にあります。iOSのボタンとは対照的に、Chrome上での選択は、上部にクリップオプションを伴うツールバーを表示します。

・スクロールダウン:トップバーを最小化し、フルスクリーンに限りなく近い状態にします。

・スクロールアップ:ブラウザの上下にある、よく使用される検索およびつツールアイテムを戻します。

mobile-gesture-ux-android-chrome

より多くのことを実践する

パブリッシャーやウェブサイトにもこれらのジェスチャーと一連の行動を活用させることができます。AndroidとiOSは、UXを改善するためにこれらを活かしているわけですから、便乗するべきです。

たとえば: 幅広く知られているジェスチャーは、テキストをコピーするためにロングタップすることです。AndroidのGoogle Chrome上でのテキスト選択では、コピーの動作だけでなく、検索やシェアなどのより多くの行動(多すぎるという人もいるかもしれません)を提案します。パブリッシャー/デザイナー/プロダクトマネージャーは、これらをもっと活用することができるはずです。ウェブサイト上で必要な動作または意図に合わせるために、これらのジェスチャーをカスタマイズするのです。私たちは、ユーザーが選択されたテキストを検索する、またはコピーをすることを想定しており、大部分は情報を検索および使用する目的でなされています。それをコピーしたら、彼らは通常サイトの外でこれを行います。ユーザーに情報と動作を持ってくる方法は、ここにあります。

tappy

私たちは選択されたテキストを、この場合ウィキペディアから情報を持ってくることに使うことができ、また検索に対するフォローをすることができます。ユーザーがテキストに集中すると仮定して、私たちはこの情報のためにスクリーンの周辺のスペースを利用することができます。上記の場合には、定義はウィキペディアから持ち込まれ、それはテキストの意味を理解するために使うことができます。それは必ずしも完全に合うものでありませんが、どうにかする方法はあるでしょう。それよりもここで大事なのは、これを読むとき、ユーザーがサイトを去る必要がないということです。そのうえ、その選択部分の下に関連した情報を提供することは、おすすめのコンテンツまたはオファーの回遊を促し、このスペースの有効利用につながります。

各々のジェスチャーをそれぞれの意図と関連する動作によって使い分け、ユーザーを引き込ませることを想像してください。携帯電話は、ただの文鎮のようなデバイスから私たちの手のひらにのるスーパーコンピュータにまで進化しました。モバイルアプリは、フラットな操作上のUXから、各々のアプリがそれぞれの使用のためにジェスチャーをカスタマイズすることができるマルチジェスチャープラットホームまで進化しました。

モバイルウェブが進化することでよりジェスチャーの重要性が高まり、ウェブサイトなどのコンテンツはユーザーの指の動きによってユーザーが求める文脈を理解します。ジェスチャーはより邪魔のない、全く新しいエンゲージメントを生み出し、そしてモバイルウェブパブリッシャーにより寄り添ったものとなるでしょう。

これらのデザインの目的、およびコーディングを達成する際に役に立つフレームワークがあります。デバイス、OS、プラットフォームまたはブラウザそれぞれにつき、正しいデザイン言語でデザインしなければならないという課題もあります。ジェスチャーのようなものをデザインするときに、気にしなければいけない領域というのはこれらすべてで、ものによっては非常に微妙なニュアンスでデザインしなければいけない時もあります。結論として私たちが言いたいのは、モバイル自体が持つ本来のネイティブな行動を促すインタラクションをより多くデザインすることで、より良い成果とフレンドリーなUXが実現するのではないか、ということです。