アプリUIの隠された「ジェスチャー」をユーザーに伝えるには?

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

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

How To Communicate Hidden Gestures in Mobile App

ジェスチャーとはユーザーがアプリを使用するときに用いる指の小さな動作のことです。タッチインターフェースはタップやスワイプ、ピンチなどのジェスチャーで操作を行いますが、そういったインタラクションはGUIの操作部分とは違って隠れてしまっていることが多いです。したがって、ユーザーに知識があり、そこにジェスチャーが存在していることに気付いてもらえない限り、試してもらうことができません。

では、目に見えないジェスチャーをどうすればうまく取り入れることができるのでしょうか? これらを認知させるため、いくつかのビジュアルインタラクションデザインのテクニックがあるので、紹介していこうと思います。

オンボーディングの間に行うチュートリアルとウォークスルー

ジェスチャー主体のアプリでは、チュートリアルとウォークスルーは比較的よく用いられる方法です。多くの場合、チュートリアルはユーザーにインターフェースの使い方を説明するために組み込まれます。しかしUIを中心としたチュートリアルでは、アプリのもっとも大事な機能を説明するまでには至りませんなぜならこのアプローチの仕方には以下のような2つの問題点があるからです:

  • もしアプリにマニュアルを用意しないといけないとしたら、その時点でユーザーとうまくコミュニケーションが取れていないことを意味しています。ユーザーがアプリを使う前にマニュアルを読んでくれるとは限らないからです。
  • チュートリアルを用いるときのもう1つの問題点は、アプリを使い始めるたときにその新しい手順をすべて覚えておかなくてはならない点です。

たとえば、Clearアプリでは7つのチュートリアルが強制的に始まり、、ユーザーはすべてそれらを読み、記憶しておかなくてはなりません。ユーザーがアプリを実際に使い始める前に、余計な手順で負担をかけることは良くありません。

Clearアプリでのチュートリアル

アプリのチュートリアルでは、強制的でステップの多いウォークスルーは避け、動作のコンテキストの中で、ユーザーが実際必要とする場面でだけ伝えましょう。これらを繰り返し行うことで、チュートリアルはより緩やかで自然なものへと変化していくことができます。

UIにおいては、できるすべてのアクションを説明しようとするのではなく、1つ1つのインタラクションに集中しましょう。

例として、このAndroid用のYouTubeアプリ内のジェスチャーを説明する画面を見てみましょう。

Android用のYouTubeアプリ

アプリにはジェスチャー主体のインタラクションがありますが、それを説明するためのチュートリアルはありません。代わりに新規のユーザーにはヒントを1つずつ表示し、アプリの主要の部分へ導いていきます。

コンテキストの中で伝えるには

コンテキスト内で伝えようとするテクニックは、ユーザーが不慣れなUIの要素や画面を使うときに役立ちます。このテクニックにはわずかなビジュアルキューとさりげないアニメーションを含んでいることが多いです。

シンプルな文章で伝える

これはジェスチャーの結果を端的に示す文章によってユーザーにジェスチャーを促すテクニックです。

コツ:説明はなるべく短い文章にしましょう。短ければ短いほど、ユーザーはその説明に従ってくれるでしょう。

引用元:Material Design

ヒントモーションを使う

ヒントモーション(またはアニメーテッドビジュアルヒントといいます)はアクションを起こした際に、対象となる要素とどうインタラクションを起こしたら良いかを例として見せてくれます。

たとえば、Pudding Monstersというゲームはジェスチャーが主体となっていますが、ユーザーに考えさせることなく、基本的なゲーム性を伝えることができています。アニメーションによって、基本的な機能が伝わるようになっています。アニメーションとともにシナリオも提示され、ユーザーは瞬時に何をすればよいかを理解できます。

ヒントモーションは要素とどうインタラクションすればよいかを教えてくれます。

コンテンツをチラ見せする

コンテンツをチラ見せすること(コンテンツティーズ)はちょっとしたビジュアルヒントのようなもので、どんな行動が可能なのかを提示することができます。

下の例はカードにおけるコンテンツティーズです。現在表示しているカードの後ろにほかのカードがあることを示し、スワイプすることが可能だということを明確に表しています。

ナビゲーションの持つ機能をきちんと示しましょう。引用元:Barthelemy Chalvet

まとめ

モバイルやアプリ環境においてユーザーにジェスチャーを伝える方法はさまざまで、1つに絞ることは不可能です。しかしUIの使い方をユーザーに教えるという点では、コンテキストに沿ってコンテンツのチラ見せをしたり、情報を段階的に開示したり、さりげないアニメーションを用いることをおすすめします。チュートリアルとウォークスルーを用いたジェスチャーの説明は最終手段として考えておくのが良いでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて