web-dev-qa-db-ja.com

ページの特定のセクションをスワイプできることを示す方法

スワイプをサポートする多くのモバイルUIデザインパターンがあり、これらは、動作を示す対話とアニメーションに基づいてデザインされています。例としては、「スワイプ/プルダウンして更新」や、ユーザーが左または右にスワイプしたときにページをめくるなどがあります。

また、ページの特定のセクションに対してのみスワイプ操作を表示するアプリケーションがあることも知っていますが、通常、この動作が可能であることを示唆するヒントやヒントはありません。 Android applications here の場合のこれに関するディスカッションの例。これらは発見可能な相互作用であると考えられますか、それともこのタイプの動作の標準的な表記はありますか?

22
Michael Lai

私が最初にすべきことは、目に見えない相互作用に依存して何かを行うべきではないということです。

IOSのスワイプして削除のジェスチャーの virtualnobiのコメント で作成された例が良い例です。メールアイテムなどは、[編集]を選択し、削除するアイテムをオンにして、画面の下部にある[ゴミ箱]/[アーカイブ]を選択するか、アイテムにスワイプして削除することで、ずっと削除できます。 「ゴミ箱」/「アーカイブ」の状態が表示されるまで横に並べます。このように、スワイプジェスチャーは便利なプロのヒントですが、通常のユーザーの要件は決してありません。

スワイプ操作が(たとえば、誤ってアクティブになるのを防ぐために)インターフェースで必要な場合、動作は簡単に示されます。これにはアニメーションが最適です。たとえば、iOSの「スライドしてロックを解除する」テキストに対する小さな輝き効果は、必要なモーションの種類(水平スライド)の有用なヒントを提供します。

iOS 7 "slide to unlock" animation
このスタックオーバーフローの質問から取得した画像

そのような不愉快なアニメーションが実行できない場合、代替の相互作用があることを示すアイコンを画面に表示すると、便利な手掛かりが得られます。繰り返しになりますが、iOSにはロック画面にカメラボタンがある例があります。偶発的に常にアクティブになるため、一度タップしてもすぐにカメラを起動することはできませんが、アイコンをつかんで上にスワイプすることでアクティブになる方法をユーザーに知らせることを期待していますカメラは別の目に見えない相互作用です。 Appleは、1回タップしたときにそのボタンのアフォーダンスの小さな表示を追加します。すばやくロック画面を垂直方向にバウンスし、その下にカメラインターフェイスを簡単に表示します。ユーザーは、もう少し上にスワイプするとすぐにわかります1回で上にスワイプするとインターフェイスのロックが解除され、ロック画面が下に戻るのを防ぐまで、カメラインターフェイスがもう少し表示されます。

iOS 6 lock screen camera affordance
UI Animations tumblrから取得したアニメーション

これは アニメーションに関するこの関連性の高い記事であるアフォーダンス で言及されているように、Windows Phoneのロック画面アフォーダンスと非常に似ています。

Windows Phone lock screen affordance

アニメーションは、溢れるコンテンツのアフォーダンスを提供する優れた方法です。 Windows Phoneでは、遷移アニメーションにより、表示されているコンテンツがy軸を中心に傾けられるため、(1秒間に)1枚以上のコンテンツが表示されます。これは、すぐに表示されるものよりも画面の端から離れていることを示しています。これはオンラインの良い例を見つけるのは大変な苦痛です( これは私が見つけることができる最良の方法です 、それはまばたきして見逃した例です)が、それは非常に直接デバイスを使用するときに明らかです。 Windows Phoneでは、次の画面の横にコンテンツの小さな断片も表示されます(目に見えるもの以上のものがあることのヒントとして)。

この手法(特にアニメーションの例)は、エドワードC.トルマンが「潜在学習」(明示的に指示されるのではなく、受動的な観察を通じて学習する)と呼ぶ例です。 MicrosoftのWebサイト に、別の例を示す良い記事があります。

次の画像では、コントロールが開始されるとリストボックスのコンテンツがスライドインし、多くの情報をすばやく伝えます。この移行は、ユーザーがこのリストをスクロールできること、および現在の表示を超えてより多くのコンテンツが含まれていることを示唆しており、ユーザーの操作を促進するのに役立ちます。

Visuals - Content transition example

リストボックスが一瞬空になり、そのコンテンツがスライドインする場合、ユーザーはこの動きを見て、現在表示されているものよりも多くのオプションがリストボックスに含まれていると推測できます。同様に、スライドする動きは、ユーザーが表示されるコンテンツを操作できる手掛かりとして機能します。

15
Kit Grose

私は最近スワイプジェスチャーのデザインを扱っていますが、ほとんどのモバイルジェスチャーの主な問題は発見可能性であるため、非常に重要な質問が出されます。

Tinderの台頭に伴い、スワイプは標準的なよく知られたジェスチャーになりつつあります。ただし、モバイルユーザーはまだボタンをタップすることに非常に慣れています。タップは、(スマートな)モバイルの世界で最も普及しているジェスチャーです。

これを念頭に置いて、私が思いついた解決策はユーザーがスワイプ要素をタップすると、小さなティーザーアニメーションが表示され、要素との対話方法の微妙でありながら効果的なヒントを提供します

このGIFがソリューションをよく示していることを願っています。

enter image description here

私は複数のユーザーでそれをテストしました、そしてティーザーはユーザーを正しい相互作用に導くのに失敗しません。

ソリューションはまた、ジェスチャーについての彼の講演でルークWが語っている 内容とうまく調和しています。

7
RobbyReindeer

カットオフコンテンツを使用します。

Sketch of a mobile phone with two rectangles representing content displayed on screen. One of them is cut-off, suggesting that rest of it is beyond the viewport of the screen.

本当にシンプルな視覚的イディオム。円の角を上部に表示することで、ドラッグアンドリフレッシュのわかりにくいものを表すのにも使用できると思います。

4
transistor09

現在、ジェスチャー言語はあまり明確に定義されていないため、ページ全体のスワイプアクションとページのセクションのスワイプアクションとの間に特定の違いはありません。つまり、ジェスチャー言語を拡張するか、ページのその部分に特定の視覚的手がかりを提供して、異なる動作を示す必要があります。ただし、ページスワイプの動作と混同しないように、別のジェスチャー動作を定義する必要があります。

1つまたは2つの指によるスワイプは、これらの異なる相互作用を区別するための可能な方法であることをお勧めします。他の可能性を提供する多くのジェスチャー言語アイコンがあります。ハンドスワイプ全体がテーブルやタッチスクリーンPCS以外に使用されているとは思いません。

enter image description here

2
Michael Lai

左または右にスワイプするための標準的なアイコンがそこにあるとは思いませんが、多くの場合、マウスで何かを左または右にスライドしてサイズ変更ハンドルをつかむことは知っています。このように:

ウィンドウズ:

enter image description here

マック:

enter image description here

これをスライド可能なUI要素の最後に使用すると、ユーザーがスライドする必要があることが明確になると思います。

2
Jon Gallup

セクションのスライドインをアニメーション化することと、側面の小さな矢印を組み合わせることが、コンテンツがスライド可能であることを示す最も明確な方法だと思います。箇条書きは、利用可能なコンテンツの量とユーザーの現在の位置を示すことができます。

http://sliders.webflow.com/
Sliders.webflow.comから取得した画像

2
Jonathan

これは古いスレッドですが、まだ現在の問題です。何かがスワイプ可能であることを示すために私が見た中で最も良い例は、Amazonアプリ(iPhoneではなくiPadバージョン)の検索結果です。検索結果が読み込まれた後、結果の1つはスワイプ効果を簡単にアニメーション化して、セルの背後に何かが隠れていることを示します。

1
user91930

あなたがそうするように教えられない限り、ジェスチャーは簡単に発見できないと思います:

  1. iosとAndroidには独自のジェスチャーがあります(IOSで削除するには左にスワイプし、Android=)で編集するにはロングタップします)これらのジェスチャーは簡単ですが、直感的ではありません。

  2. 特別なジェスチャー操作を使用しようとするアプリを設計する場合。チュートリアルを設計する必要があります。 Facebookの紙のように、明確です。

0
user48693