web-dev-qa-db-ja.com

画像ギャラリーをモバイル/タブレットで左右にスワイプできることを示す最良の方法

現在、レスポンシブデザインをウェブサイトに追加しています。ユーザーが操作する主な機能の1つは画像ギャラリーです(私たちは編集ベースのウェブサイトです)。通常のビューポートサイズでは、ユーザーは左右の矢印をクリックして画像ギャラリーをスクロールします。タブレットとモバイルのサイズに移動するときは、スワイプしてギャラリーを循環できるようにします。

左右の矢印を側面に配置するのは多すぎますか(画像の表示領域を増やすために縮小されます)[〜#〜] and [〜#〜]スワイプ機能もありますか?モバイル/タブレットユーザーがギャラリーがスワイプ可能であることを認識するための最も直感的な方法は何ですか?

8
kretzm

左と右のアイコンはスクロールを続行できるという情報を提供しますが、別のオプションは、画像の一部だけが表示され、ユーザーが右にスクロールして以下に示すように表示する必要があるレイアウトを使用することです。

enter image description here

私がファンではない別のアプローチは、右にコンテンツがあることをユーザーに知らせる下部の水平スクロールバーを使用することです

enter image description here

私がファンではない理由は、最近のユーザビリティテストで、Windows 8アプリで画像をナビゲートしているときにこのスクロールバーが一番下にあるため、ほとんどのユーザーがこのスクロールバーを見逃したことがわかったためです。

15
Mervin

私は...するだろう:

  • mervinjが示唆するように、サムネイルの最後の列を切り取って、さらに見るべきものがあることを示す
  • ページが読み込まれたときにサムネイルのグリッドを右から左にわずかにスライドさせ、スワイプ時に画面のどの部分が動くかをユーザーに示します。
3
user15161

どのデバイスで何ができるかをユーザーに知らせるのは間違いありません。ただし、それらが常に存在していると、煩わしい場合があります。最初にギャラリーにアクセスしたときに矢印を表示し、2秒後に暗くします。ユーザーは、コントロールを使用する場合にコントロールがあることを知っています。

ユーザーが画像をスワイプしても、ユーザーが実際に必要とするよりも多くの情報が表示されるため、矢印は再び表示されません。しかし、ユーザーが画像をタップすると、矢印が再び表示され、同じ2秒のタイムアウト調光が表示されます。ユーザーがスワイプの代わりに矢印をクリックすると、次の画像ビューに矢印が表示されます–ユーザーはスワイプの代わりに矢印を使用したいからです。

通常、同じタスクに対して複数のアクションをサポートすることは良いことです。デスクトップコンピュータにコピーアンドペーストできる方法をいくつ考えてみてください(キーボード、右マウスクリック、アプリケーションボタンなど)。

1
Benny Skogberg

前のコメントで言った「事前定義された幅のコンテナー内に1つずつ表示される画像」の制約のため、最初の画像の上にこれらの左右の矢印を表示してフェードアウトすることは、ユーザーがギャラリーを開いたときだけです。 。矢印の下に最初の画像(それのみ)を画面にスワイプして表示する(制約を削除するよりも達成する方が簡単だと思う)か、フェードアウトする前にこの矢印が左右に動く簡単なアニメーションを作成することで、このヒントを改善することもできます。

これは、ジェスチャーが必要であることをユーザーが理解するのに役立ち、矢印が常に表示されている場合は、追加の視覚的なノイズも削除します。

0