ユーザーにスワイプ操作の違いを理解させる方法
IOSアプリケーションでは、ユーザーはカードを左または右にスワイプでき、それぞれに異なる意味があります。
- 左にスワイプカードをスキップし、次のカードを提示します。
- 右にスワイプ他のユーザーにコンテンツを広げます。
ユーザーがアプリケーションを使用しているのを見ましたが、ユーザーはアクションの意味を理解していません。ランダムに左または右にスワイプします。私はページに1文（4ページ長）の簡単なチュートリアルを作成しましたが、彼らがチュートリアルを読まないことに気付きました。
ユーザーにチュートリアルを読んだり、スワイプ操作の意味を理解させるにはどうすればよいですか？
なぜユーザーがこのように行動しているのかを理解することから始めましょう：
カルーセル は、モバイルデバイスで非常に一般的なインターフェイスです。それらはFacebook、Twitter、iOSなどで使用されています。このため、特にカードを使用して、このインターフェイスに慣れている 20億 スマートフォンとタブレットのユーザーはほとんどいます。カルーセルでは、左と右にスワイプすると対称的なアクションがカードを前後に移動します。
インターフェースは、ユーザーに対してこの動作パターンを破ります。したがって、ユーザーはインターフェースの仕組みを学ぶだけでなく、カルーセルをスワイプしてアプリを使用するための筋肉の記憶をunlearnする必要があります。スワイプ方向の対称性を壊しているという事実により、学習解除プロセスはさらに複雑になり、認知的に克服することがより困難になります。
このデザインを使い続けたいとすると、これはどういう意味ですか？
- チュートリアルは確かに十分ではありません。チュートリアルは役に立ちますが、習慣を克服するために、スワイプ操作の意味を画面上で明確に思い出させる必要があります。
- これが、Tinderのような慣習に違反するアプリが、スワイプの動作を画面上で明確に思い出させる理由です。 Tinderでは、スワイプの代わりに方向ボタンをクリックすることもできます。これは、「カルーセルの学習」がユーザーにとってあまりにも直感的でない場合に、カードをナビゲートするための2番目の方法をエレガントに提供します。
- インターフェースを効果的にしたいのなら、これを回避する方法はないと思います。スライドインジケーターを非表示にして
touchstartスライドを表示したときにのみ表示されるアプリ（Gmailを含む）がいくつかありますが、これは非常に豪華なデザインであり、Googleはそのインストールされた基盤のためにこれを行う余裕があります、私はあなたがあなたのアプリを人気にしたいと思うので、私はあなたのデザインに夢中になるつもりはありません。
これらの動作上の制約を組み込んだ設計の1つを次に示します。
これがうまくいくかどうかにかかわらず、うまくいけば、上記の観察がより良いソリューションの設計に役立つでしょう。
他の人のようなコンテキストヘルプのほかに、ヒントを読んだり、情報ボックスやチュートリアルを事前にチェックしたりすることに加えて、ユーザーが対話を通じて学習できるように、瞬時のフィードバックの方法を提供することを検討する必要があります。
ユーザーが初めて左右にスワイプするときのアクションの影響の簡単な説明を含むアラートボックス（@Hawk Nickの提案どおり）を表示して、両方のアクションを区別し、実行中に異なる結果を予測できるようにします仕事。
これらの結果は、「Xカードをスキップしました、もう一度確認しますか？」または「共有したカードがX回共有されました。」など、パターンを学習するユーザーの以前の行動を何らかの形で反映しているはずです。
2つのソリューション：
- 超軽量デモ（ただし、煩わしい場合があります）
- 矢印を表示する（小さなタイマーで矢印を非表示にすることもできます）
- 賢い行動を促すフレーズ。たとえば、アプリを初めて起動すると、他のカードが表示され、最初のカードまでスクロールできます。そのようにして、ユーザーは彼が画面表示以上のものを見ることができることを理解します。可能であれば、画面の端に他のカードを少し見せてはっきり見えるようにするのが最善の選択です。
![enter image description here]()
FrançoisD.はすでにそれを行う方法を提供しています。私は、左/右のアクションを区別することでそれを拡張します。 Mailbox の例を紹介します
または Tinder （スワイプを正確に示す適切なスクリーンショットが見つかりませんでした）。
これらのアプリを試してみると、各スワイプ操作は画面が異なっていても、色や通知/メッセージが異なるため、視覚的に区別されます。
さらに、左右のアクションが状況によって異なり、操作の頻度が異なる場合は、スワイプが可能なターゲット領域でプレイすることもできます。より一般的で頻繁なアクションの場合は50％の垂直方向のスペースを使用し、目立たないアクションの場合は反対側の10-15％の垂直方向の画面スペースを使用します。
それには2つの方法があります。
- ユーザーが初めてアプリを開いたときのチュートリアル。
- ユーザーが初めて右にスワイプすると、確認のポップアップが開きます。ユーザーが[ok]をタップすると、それが記憶され、ポップアップが再び開くことはありません。
これが可能な解決策の私の試みです。 （私はBalsamiqで正方形を回転させることができなかったので、スワイプしている方向に少し回転することを想像してみてください）。
ただし、カードを特定の方向にスワイプすると、アクションを説明または象徴するテキストまたはアイコンが表示されるという考え方です。スワイプまたはリリースは、そのアクションを実行します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
アプリの最初にウォークスルーやチュートリアルを必要とせずに、相互作用について説明できます。つまり、自分でこれらのウォークスルーをスキップする頻度や、それらを完全に突破する頻度はどれくらいですか？そうです、他の多くのユーザーにも同じことが言えます。
これについては、しばらく前からよく読まれている記事です
このソリューションを使用すると、ユーザーは最初に説明を読むことができますが、コントロールをすぐに覚えて、もう読む必要がないため、操作が速くなります。
この投稿の回答に示されている他の2つの解決策（メールボックスの例）は似ていますが、私の意見ではカードでは使用できません。
特定の方向にスワイプすると、Tinderが写真にスタンプを追加するというアイデアを取り入れました。また、同じアクション用に下部に2つの大きなボタンを追加しました。