web-dev-qa-db-ja.com

複数のスクロール、モーダル/ポップアップウィンドウでのドラッグ。良いUX?

関係者と必要なことについて話し合い、製品のモーダルウィンドウを [〜#〜] wrap [〜#〜] が実行しているのと同じ形式で変換することを提案しました(画像を開くだけです) 1つのビューポートの後)

enter image description here

そこで、ヒューリスティックチェックを行い、違反している法律の一部を見つけました。また、小規模なピアユーザビリティテストを実施したところ、簡単には使用できないが、この新しいタイプのUIは非常に魅力的であることがわかりました。 。

ラップと同じように、ポインターベースのデバイスで指に依存するジェスチャーを提供しても問題ありませんか?スクロールではなくスワイプのように、単一のビューで複数の矢印のナビゲーション?

ドリブルと同じように、1つのオプションは矢印キーの使用です。

それが問題ない場合は、モーダルビューを続行する前に、Webアプリのエクスペリエンスを損なうことなく見栄えをよくするために、どのような点に注意する必要がありますか?

2
Sanshizm

これのいくつかは意見です。

ラップエクスペリエンスは、デスクトップにうまく翻訳されなかったモバイルファーストエクスペリエンスのようです。これは、問題を説明して質問するのではなく、解決策を説明する例でもあります。

スワイプは特定の目的地を持つスクロールです。 Wrapの垂直体験が貧弱な実行になるのは、スクロールでは機能しないことです。クリックしてドラッグする必要があります。それにより、notは「スワイプ」ではありません。

別の方法として、 Mac Proサイト を検討してください。各垂直スクロールは、特定の宛先にアニメーション化されます。それにより、「スワイプ」になります。 Wrapも使用するページビュードットインジケーターを使用しますが、Appleをクリックすると特定のポイントにジャンプできます。つまり、位置の視覚的なインジケーターではなく、実際のナビゲーションです。 (そしてモバイル体験は異なりますが、同様に機能します。)

Mac Pro vertical scroll

水平の場合、同じ「ルール」が適用されます。スワイプとは、ターゲットをスクロールすることです。ジェスチャーベースのナビゲーションへの移行が進む矢印と戻る矢印をクリックする必要があることを考えると、ある程度の意味があります...ブラウザーで誤って前後に戻ることを望まないでください(ただし、モーダルはそのジェスチャーを無効にしているようです)。 macOSのFinderでCover Flowを検討してください。各「スワイプ」ジェスチャーは、1つのファイルを左または右に移動します。 Wrapの場合、モバイルエクスペリエンスはすべてジェスチャーベースですが、デスクトップからモバイルに同じルールは適用されません。

enter image description here

このような移動のアクセシビリティの考慮事項もあります。すべてのコンテンツがブラウザにあり、ユーザーに読み込まれています。または、オンデマンドで読み込まれます。つまり、インターフェイスが変更されたことをユーザーに通知する必要があります。別のページを使用すると、無料で何かが得られます。 (時々、モーダルは新しいtarget="_blank"インターネットの。 「ユーザーが戻ってこない可能性があるため、ユーザーがページを離れないようにしてください!」)

ヒューリスティックスに関するポイントについては、そこで使用している参照がわかりません。

直接質問に。

  1. 非ジェスチャーデバイスでジェスチャーのようなエクスペリエンスを提供することは問題ないと思いますが、エクスペリエンスは比較的同じでなければなりません。モバイルでユーザーにスクロールするように感じる場合は、デスクトップでスクロールするように感じられるはずです。

  2. 技術的にスワイプはスクロールで、1つは特定の停止ポイントを持ち、もう1つは持っていません。ただし、言語の観点から見ると(少なくともAppleは)モバイルエクスペリエンスとデスクトップエクスペリエンスを区別する傾向がありますが、開発者にとってはそれがより重要になる可能性があります(クリックとタップ、スクロールとスワイプなど)。デスクトップには「スワイプ」はありません。スクロールがあります。したがって、私がスワイプ付きのデバイスを使用していない場合(またはデスクトップエクスペリエンスでその感覚が許可されない場合allow)、あなたは私に嘘をついていますそして、ユーザーとして、私は興奮していません。したがって、いいえ、デスクトップエクスペリエンスに「スワイプ」という用語を使用することは、a)必要ではなく、b)正確ではありません。

  3. 開発しようとしているWebアプリがわからないため、話しかけることができません...モーダルを一般的に持っていると、アプリの残りの部分によっては「Webアプリのエクスペリエンスが壊れる」可能性があります。そうは言っても、考慮すべきいくつかのこと:

    • シンプルに保つ:奇妙なことを何も行わないため、ドリブルは機能します。上下にスクロール-誰もがそれを行う方法を知っています。左と右をクリック-誰もがそれを行う方法を知っています。一方、ラップすると、モバイルでは「なめらか」に感じるが、デスクトップでは煩わしいと感じるウィジェット(自社開発ではないと思います)を使おうとします。 (ドリブルはモバイルでモーダル/ライトボックスを使用しません。)
    • 優れたUIは冗談のようなものです。説明しなければならない場合、それはそれほど良くない可能性があります。 Mac Proサイトには、ユーザーに「スクロール」(最初のダウンキャレット以外)するよう指示する手順はありません。ユーザーの期待は、スクロールできることです。サイトはその期待に応えます。 (次に、必要に応じて、垂直のページビューインジケーターについて理解することができます。)
    • エクスペリエンスに合わせてユーザーに変更を強制するのではなく、ユーザーの期待に基づいてエクスペリエンスを構築します。
    • ユーザーのニーズに応えます。あなたやあなたの上司が誰であるか考えるユーザーであるかもしれないが、 actualユーザー...オフィスを離れます。ユーザーの99.9%がモバイルでサイトを見ているだけなので、ラップは問題ないかもしれません。そのため、一貫性のないデスクトップエクスペリエンスを持つことは重要ではありません。おそらく、ほとんどのユーザーは健常でフルビジョンスペクトルの天才なので、ボタンのヒット領域、色のコントラスト、画面上の項目数を気にする必要はありません。
    • おそらく、そのUXを構築する必要はありません-すでに構築されています。どのような問題を解決しようとしていますか?この質問の提案に基づいて、コレクション->詳細問題を解決しようとしています。ユーザーが見ているもののコレクションがあります。彼らは1つを選びます。彼らは詳細を見ます。これは、ほとんどすべてのコンピュータでの経験です...私が面白いと言っているのではなく、文字通りです。 AppleはiOS開発者に ビューコントローラー を提供するので、ハンドヘルド、タブレット、デスクトップ向けの開発を非常にシンプルにします(デザインはセクシーではありませんが、非常にシンプルです)。 )モーダルなのはなぜですか?メールアプリのように見せないのはなぜですか?iTunesのように見せないのはなぜですか?カバーフローをちょっと使わないのはなぜですか?FinderやWindowsエクスプローラのように見せないのはなぜですか?...どのような問題がありますか?あなたは解決しようとしていますか?どのニュアンスを適用すべきですか?
1
Josh Bruce