web-dev-qa-db-ja.com

コンテキストメニューオプションをタッチデバイスに変換するためのベストプラクティスは?

ユーザーが大きなデスクトップのページサムネイルを介して何千もの写真を管理できるようにする必要がある写真サイトを構築しています。また、iPadで使いやすくて楽しいタッチインターフェイスを提供したいと考えています。

デスクトップの右クリックコンテキストメニューオプションをタッチスクリーンデバイスに変換するためのベストプラクティスはありますか?

デスクトップでは、サムネイルに次のイベントがあります。

  • clickは、ライトボックスで640px画像を開きます
  • hoverは、TITLE属性を使用してキャプションを表示し、平均スコアとオーバーレイでのユーザーの評価を表示します
  • contextmenuは、サムネイルに使用できるナビゲーション/アクションを示します
17
michael

ほとんどの写真アプリでは、エクスポート、誰かへのメールなどのオプションが追加された、ある種のコンテキストメニューをトリガーするタップ+ホールドまたはロングタップイベントがあることを知っています。たとえば、モバイルサファリを見てください。リンクを長押しすると、いくつかのアクションを含むアクションシートが表示されます。これはりんごアプリで広く使われています。サファリの[+]アイコン(お気に入り)で、矢印ボタンをタップすると(返信、転送など)、メールでそれを確認できます。

6
Michael

IPhoneメールアプリを参照してください。これにより、ユーザーは多数のメールを管理できます。そのUIパターンが役立つ場合があります。

最初に「編集」ボタンをタップし、次に管理したい各写真をタップし、最後に画面の下部にあるオプションの1つをタップします。

Googled画像:

enter image description hereenter image description here

このUIは以下を解決します。

  1. 編集は隠し機能ではありません(Safariでのタップアンドホールドなど)
  2. 誤って変更することはありません。ボタンは、ユーザーが同じ場所で誤ってダブルタップした予期しないことができないように配置されています。
  3. 明確なオープン/選択の区別

2016 UPD

Apple 3D touchはこちら https://www.youtube.com/watch?v=cSTEB8cdQwo

5
ADOConnection

2つのアクションをお勧めします。

  • chromeとボタンを最小化して、サムネイル画面をきれいに保ちます。サムネイルをタップすると、写真とすべてのデスクトップコンテキストメニューオプションを含むアクションバーを含む新しい画面が開きます。これは非表示にできます数秒で(またはユーザーがタップするだけで)アクションバーを使用して写真を単独で保持できます。これにより、ユーザーがコンテキストオプションにアクセスできるようにする安全で目に見えるシステムがあります。

  • 上級ユーザー向けには、「隠し」でより高速なオプションを追加します。たとえば、サムネイルにフリックが付いた非表示のアイコンメニュー(Pocketなど)または長押ししたコンテキストメニュー(Kindleなど)などです。

enter image description here

3
PaRaP

これがあなたの行動が以下のiPadに最もよく翻訳されると私が信じる方法です。元の質問だったので、コンテキストメニューを特に強調しましたが、他のアクションについても言及するに値すると思います。

'contextmenu'は、サムネイルに利用可能なナビゲーション/アクションを表示します

特にiPadの場合、コンテキストメニューでのみ(iPadの写真アプリのように)画像をコピーして保存することをお勧めします(= /// =)(図1)-他にもいくつかある可能性があります一度に1つの写真に対してのみ実行できるアクションは、コンテキストメニューを乱雑にしたくありません。 iPadの写真アプリでは、グリッドビューでアイテムの選択を開始するか、表示されるまで、ほとんどのアクションが正しい(図2、図3)とわかります。完全な単一画像ビュー。私はこの慣習に準拠しようとします。

ナビゲーションについては、それをナビゲーションバーに移動し(または単に画像間をスワイプできるようにし)、アクションについてはそれらのほとんどをツールバーに移動します(図4)。ツールバーのアクションによって現在のビューが変更されることはありません。ヒントとして、ソーシャルネットワークへの共有などの「エクスポート」タイプのアクションは、概念的にはナビゲーションのようなアプリからあなた/あなたのコンテンツを技術的にエクスポートしているため、ナビゲーションに属していると言いますが、ビューはおそらく変更する必要があります。

一度に複数の写真に適用できるアクションはグリッドに留まり、ユーザーが写真を選択したときにのみアクティブになり、1つの写真のアクションは単一の写真ビューに移動できます。

「クリック」すると、ライトボックスに640pxの画像が開きます

クリックに関しては、あなたの一般的な考え方は今でも当てはまると思います。アプリケーションの下部にあるツールバーにコンテキストアクション、ナビゲーションバーの上部にナビゲーションオプションを備えたフルサイズの画像を表示するだけです。

'hover'は、TITLE属性を使用してキャプションを表示し、平均スコアとオーバーレイに対するユーザーの評価を示します

あなたのアプリケーションで私が思うこれらのオプションは、フルサイズの画像とマージされます。ユーザーにとっての情報の重要度に応じて、その画面で写真を少し縮小して常に表示することができますが、ユーザーは引き続きフルスクリーンモードで写真を表示したり、タップして関連するコンテンツを表示したりできますオーバーレイとしての写真。

図1 Figure 1

図2 Figure 2

図3 Figure 3

図4 Figure 4

ナビゲーションバーやその他のコンポーネントの使用方法の詳細を読みたい場合は、 AppleのiOSのヒューマンインターフェイスガイドライン を読むことを強くお勧めします。

注:質問には具体的にiPadのタグが付けられているため、私はそのデバイスとAppleのヒューマンインターフェイスガイドラインのコンテキスト内での回答に焦点を当てました。

1
GotDibbs

フォーラムでの検索からタッチジェスチャー/アクションの参照を確認し、特定のジェスチャーに基づいてメニューをトリガーするかどうかを確認できます。LukeWroblewskiの タッチジェスチャーリファレンス はかなり包括的です。アプリには標準があると思いますが、Webサイトの場合、特に将来的にモバイルに対応する場合は、コンテキストメニューを再設計して、不要になるようにする必要があります。

ユーザビリティの観点からは、コンテキストメニューをアクションボタンに変換できない理由はわかりません。システムインターフェースの画像または他の部分をクリックまたはホバーすると、コンテキストがかなり明確になるためです。実際、右クリックのコンテキストメニューは、ユーザーが右クリックしたときにフォーカスがどこにあるかを必ずしも知っているわけではない(特に、UIの他の部分をスクロールまたはクリックしている場合)ことに悩まされています。これは、画像に関連付けられたアクションアイコンまたは中央のメニューからメニューオプションをトリガーすることで、メニューオプションをコンテキストに関連させることができることを意味します。

1
Michael Lai

ここにはたくさんの素晴らしい答えがあります(マイケルが答えに投票するつもりなのかどうか疑問に思います)。重要なポイントを1つ強調します。
この質問は、一般的に答えることは不可能ですが

マウスからタッチへの移行は、繊細で多面的な課題です。独自の課題に答える一般的なガイドラインを誰もあなたに与えることはできません。

オプションの範囲には次のものが含まれます

  • ジェスチャーで公開するツール
  • 永続的なアイコン/ラベル
  • タップ&ホールド
  • 上記のオプションの組み合わせ

考慮すべき要素は

  • ページの複雑さ
  • デバイスのコンテキストにおける各タスクの相対的な重要性
  • 予想される使用頻度
  • 対象読者の期待と熟練度

実際の答えが得られる唯一の方法:テスト。サービスを利用して楽しんでいる人まで繰り返します。それがUXのすべてです。

1
plainclothes

Facebookアプリ(Androidで、iOSもそうだと思います)では、この動作がかなり下がっています。サムネイルをタップするとライトボックスが表示され、画像をもう一度タップするとデータオーバーレイが切り替わります(いいね、 FBに関するコメントですが、アプリのタイトル、スコア、評価です。タップして押し続けるとコンテキストメニューが表示されます。これはかなり直感的に理解でき、使用した他の写真/カメラアプリ全体で一貫しているようです。

1
Andrew Shipe

「contextmenu」とは何ですか?コンテキストメニューがウェブページではなくウェブブラウザによって管理されていることをご存知ですか?あなたのサイトで、「コンテキストメニュー」がそのアクションに到達する唯一の方法ではないことを願っています。それ以外の場合、これらのアクションは アクセス可能 ではなく、サイトが壊れています。

一見すると、iPadアプリを作成していると思いました。それが最善の方法です。

IPadでは、コンテキストメニューが存在し、ユーザーは指を押し続けることでそれを取得します。重宝です。よく使います。

1