レスポンシブデザインのオフキャンバスレイアウトにボタンやスワイプコマンドを含めるのが適切な場合。
レスポンシブデザインのオフキャンバスレイアウトにボタンやスワイプコマンドを含めるのはいつが適切ですか？
キャンバス外ナビゲーションテクニックを使用してサイトのレスポンシブWebデザインの調査を行っている間に、これらのメニューを閉じる際に一定のレベルのばらつきがあることに気付きました。
例：Facebookのキャンバス外メニューは、メニューボタンをクリックまたはタッチすることでアクセスできますが、閉じるボタンやスワイプで閉じるジェスチャーは提供されません。ユーザーは、メニューを閉じるためにメインフィードにタッチする必要があることを知っていることが期待されます。
例：一方、Googleの場合は、メニューボタンをクリックしてタッチして開く必要がありますが、閉じるには、ユーザーがスワイプして閉じるか、メインコンテンツセクションをクリックまたはタップして閉じる必要があります。
どちらの場合も、ユーザーが戻る明確な方法がないため、ユーザーエクスペリエンスが低下するようです。これらのメニューを閉じるための静的ボタンを含めるこのアフォーダンスは、単に十分高くない/重要ではないのですか？
大きなコンテンツナビゲーションを備えた小さなデバイスでは、重要です。デザイナーは、できるだけ多くのユーザーがこれを機能させるために、あらゆる種類のナビゲーション手法をサポートする必要があります。小さなモバイルデバイスは、そもそも非常に制約があります。
ボタンクリックと右にスワイプしてメニューにアクセスするアプリケーションの1つはSpotifyです。その新しいルックアンドフィールは、私の家族の最年少ユーザーの間でいくつかの批判をもたらしましたが、これは近い将来の慣習になると思います。
これ以上のことをしたい場合は、従うべきガイドラインがあります。
特にタッチスクリーンデバイスでは、何を選択、タップ、またはスワイプできるか（これはアフォーダンスと呼ばれます）をユーザーに明確にします。 Nielsen Norman GroupによるiPadのユーザビリティ調査 の大きな発見の1つは、ユーザーがタッチ可能またはタップ可能なものを知らなかったことでした。別の問題は、スワイプのあいまいさでした。同じスワイプジェスチャーが画面の異なる領域で異なることを意味する場合です。タッチ可能性が明確であり、リンク、アイコン、ボタンなどのアイテムが目に見えるようにタップ可能であることを確認します。
しかし、これまでのところ（これは2013年3月です）、スワイプのキューを実装するWindows Phone以外はまだ見つかりません。唯一の問題は、ユーザーが左にスワイプできることをユーザーが知っている可能性があることです。ただし、反対方向にスワイプするものがある場合はそうではありません。
レスポンシブデザインのオフキャンバスレイアウトにボタンやスワイプコマンドを含めるのはどのような場合に適していますか？
できるだけ頻繁に、ボタン操作とスワイプ操作の両方を実装する必要があります。これは、テキストをカットアンドペーストするための100を超える組み合わせオプションがあるカットアンドペーストと同じ理論です。サポートするナビゲーションアクションが多いほど、優れています。
これが私の見方です。戻るためにはスワイプジェスチャーとボタンを常に持っている必要があります。 Facebookの方法は非常に直感的ではありません。確かに難しいことではありませんが、もっと簡単かもしれません。グーグルはこれで良い仕事をします。
ユーザーが最近ではありふれたメニューにアクセスしたいとき、ユーザーは何かを探したいのですが、探しているのは「3本の横線」です。彼らがそれを押すとき、それは利用可能なままであるべきです。この時点で、メニューをエスケープする方法を100％確信できます。ボタンが消えたり、Facebookのようなことをしたりすると、しばらくの間イライラすることがあります。ボタンはそのままにして、スワイプも追加する必要があります。
しかし、いつスワイプのみを使用できますか？
ほとんどの場合、そうしないでください。ただし、役立つ場合もあります。ジェスチャー指向に設定していて、メニューを開くにはスワイプが必要であることを明確にしている場合は、スワイプで閉じることが最も理にかなっています。このアイデアは、UXを愛するAppleから見ることができます。
まず、彼らはあなたに教え、ほとんどのユーザーが通知センターにスワイプを使用することを期待しています。
さて、このアプローチのみを使用することもできますが、はるかに優れたUXは、Appleが行うことも行うことです。
ここで、Appleはボタンも追加します。これは最初のポイントで話していたものです。両方が必要です。デスクトップで使用する場合、この「アクティブボタン」を移動する必要はありません。 「しかし、モバイルデバイスでは、このボタンを代わりに配置できるケースは実際には多くありません。
結論：ほとんどの場合、ボタンを使用し、さらにスワイプを追加してもかまいません。また、ユーザーがFacebookのように「非稼働」であることが暗示されている画面の一部をタッチすることで、ユーザーが戻ることはできません。特にタップは現実的ではなく、意味がありません。
この情報がお役に立てば幸いです。他にご不明な点がありましたら、お知らせください。