web-dev-qa-db-ja.com

モーダル、スライドイン、または新しいページ?

現在、オファーのグリッド(たとえば24)で構成されるページを作成しています。

写真とともに表示したいデータは、各オファーが約200〜300ピクセルの正方形を占めることを意味します。Fiverrがギグを表示する方法とは異なりません。大きな画面では3つ並べて、モバイルでは1つ並べて表示します。

各グリッドアイテムには2つのリンク先があり、1つはオファーの詳細ページに移動し、もう1つはオファーが存在するサードパーティのWebサイトに直接移動します。

理想的には、Facebook、Twitter、アプリのダウンロード、サインアップなど、サイトに到達する前に何をする必要があるかを顧客に説明する必要がある元のグリッドアイテムに情報を入力して、情報なしでリンクアウトするだけです。

私は利用可能な指示を持っています-しかし、私は上記のルートのどちらも使いたくないので、私は他のオプションを探していました:

  • レスポンシブモーダル。
  • グリッドセルを下に拡張します。
  • オーバーレイを左/右からスライドインします。
  • ユーザーがグリッドからリンクアウトできないようにします。

どちらのアプローチをとるかは本当にわかりません。私はUXのエキスパートではないので、アドバイスや代替ソリューションはありがたいです。

8
John

まず第一に、グリッドカードにその情報(つまり、ターゲットページで実行する必要があること)を配置する必要はありません。粒子が粗すぎるようです。新しいオファーの発見についてグリッドを作成し、それらが正確にどのように機能するかではないようにします。ユーザーがオファーの1つを選択すると、それは彼/彼女がそれに興味を持っていることを意味するので、追加の詳細を表示しても安全です。

この場合、「スライドイン」は適切に聞こえません。別のページまたはモーダルをお勧めします。ユーザーがターゲットページで何をすることが期待されるかを説明し、下部に行動を促すフレーズを配置します。ただし、グリッドに戻って(右上ボタンの[戻る]ボタンやXなど)簡単にして、ユーザーが以前行ったところから続行することもできます。

1
krychu

多くの場合、複雑な問題の解決は、何か新しいものを追加する方法ではなく、何を失うかについてです。これらの必要なステップを表示するためのユースケースは何ですか?それらは、概要の中でのユーザーの意思決定にとって重要ですか?もしそうなら、あなたは他の情報をドロップできますか?ユーザーが誰で、その目的がわからない場合、正確なヒントを提供することは困難です。

カードをよりシンプルにするために、カードごとのアクションを1つに制限することを試みます。両方のオプションを前もって与えることは、非常に複雑に見えます。注文ボタンを詳細ページの上部に移動することにより、移動はより直線的になり、ユーザーは一度に1つの決定しかできません。 discoveringオファー-> 1つ選択詳細を確認するには-> orderingそれ。

ただし、ユーザーがアプリの動作を知っている(たとえば、2つのボタンの違いがわかる)頻度の高いシナリオでは、詳細ページが必要になることはほとんどありません。統計を取得できる場合は、2つのボタンを比較して、使用状況がボタン間でどのように配分されているかを確認してください。

1
Tim Schoch

小さなレスポンシブな楽しいデザインのモデルが最適です。しばらくの間、モーダルは時代遅れでしたが、今ではウェブ全体に戻ってきました。

0
Nussi Einhorn

検討しているデザインオプションの一部またはすべてに対して、ゲリラユーザビリティテストを実行できます。 http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/

このタイプのテストは非常に技術が低く、迅速かつ安価です。

単純なモックアップをいくつか作成するだけです。ピクセルパーフェクトなフルカラー画像やhtmlプロトタイプを作成する必要はありません。単純な紙のプロトタイプを作成したり、ホワイトボードに描画したりできます。

これで、実際のユーザー(またはソリューションに関係のない同僚、つまり受付係)でそれらをテストできます。受信するフィードバックは非常に貴重です。

0
SteveD

私が使用するアプリケーションには、非常によく似た要素があります。私が問題に取り組んだ方法は、ドロップダウンメニュー(右下隅にアイコンを追加)**を追加してオファーの詳細を表示し、ユーザーを状況に応じた状態に保つことでした。表示しているコンテンツの量に応じて、第三者へのリンクを適宜調整します。

注:コンテンツの配置は、優先順位や強調したい情報によって異なります。

enter image description here

0
UX Research