「ライトボックスUI」の使いやすさ
ライトボックスUIは、主流のWebデザインでますます普及しています。あなたはドリルを知っています-リンクをクリックすると、背景が暗くなり、オブジェクトを操作したり、変更を加えたり、画像ギャラリーを表示したりするためのUIがポップアップ表示されます。
彼らは何が起こっているのか、そしてエクスペリエンスのどの時点でもユーザーの焦点がどこにあるのかを非常に明確にします。ただし、多くの場合、ユーザーが画像を開いたり、新しいブラウザタブでそのタスクを実行したりできないことがよくあります。
一部の有名なWebソフトウェア開発者には、少し抵抗があるようです。
最近ライトボックス化されましたか？（特に興味深いディスカッション）。
では、誰かがライトボックスUIを使用してユーザーテスト/ユーザビリティテストを行ったことがありますか。落とし穴は何ですか？彼らはどこでうまくやっていますか？彼らはどこでうまくいかないのですか？
編集：先日、自動車保険の買い物で、ライトボックスの興味深い使い方を見ました。私はそれがかなりうまくいったと思いました-ページで追加オプションを選択して、基本ポリシーに内訳カバーなどを追加し、[更新]をクリックすると、ライトボックスがフェードインし、更新の進行状況を示しました。きちんとした、直接的、明白なことが起こっていました。
私はいくつかの個人的な観察以外にデータはありませんが、分析的にモーダルなライトボックスには、それらが何に適しているのか想像できない代替案と比較して、大きな使いやすさの問題があります。
人々はライトボックスをモーダルダイアログボックスと比較しました。これにより、ユーザーは参照するために以前のコンテンツを表示しながら、続行する前に行為を完了またはキャンセルする必要があります。ユーザーに何かを強制することは実際には良い考えだとすると（通常はそうではありません）、これはダイアログボックスがライトボックスに比べて大きな利点があることを忘れます：それらは完全に移動可能です。私が見たライトボックスは移動できないため、ユーザーは参照用に背後にあるものすべてを見ることができません。ライトボックスが移動可能であっても、それをウィンドウフレームの外に移動することはできないため、ライトボックスは常に何かを覆っています。
Webサイトでモーダルなものが必要な場合は、新しいページに移動します。モーダルダイアログボックスのように、ユーザーが新しいページに移動すると、ユーザーは必要なものを完了するか、または（[戻る]を使用して）キャンセルする必要があります。ニールセンは、ライトボックスがユーザーの注意をどれほどうまく捉えているかについて話すかもしれませんが、ユーザーにまったく新しいページを提示することと競合することはできません。前のページのコンテキストが必要な場合は、適切なコンテンツを新しいページにコピーします。
新しいページと比較して、ライトボックスはメンタルワークロードを追加し、ユーザーにナビゲートのさらに別の方法を覚えて覚えさせる。前のコンテンツに戻るために一部のコンテンツを却下する3つの一貫性のない方法があることは十分に悪いことです。ユーザーは、「戻る」ボタンを使用するか、現在のウィンドウを閉じるか、現在のタブを閉じる必要がある場合があります。次に、独自の固有のコントロールを使用して、ライトボックスを閉じることを追加します。ユーザーはこの複雑さを必要としません。
さらに悪いことに、それは戻るボタンを壊します。 [戻る]ボタンを有効のままにした場合、ユーザーはボタンをクリックして、ライトボックスを元に戻し、元のページに戻る（またはスライドショーを表示するときなど、ライトボックス内のページに戻る）ことができます。しかし、代わりに、[戻る]をクリックすると、基になるページが戻り、ユーザーは先に進んですべてを再設定する必要があります。 [戻る]ボタンを無効にすると、ライトボックスのコンテンツが新しいタブまたはウィンドウで開かれることになるため、ウィンドウまたはタブの[閉じる]ボタンをクリックして、元のページ、その履歴、そしておそらくブラウザセッション全体。
ライトボックスはポップアップウィンドウのように見えないため、以前は広告として新しいウィンドウを閉じているユーザーを回避する方法でしたが、現在広告主はライトボックスのような要素を使用しているため、利点はすでに失われていない場合でも消えてしまいます。また、新しいウィンドウはモードレスであるため、ここで説明しているモーダルライトボックスとは異なる状況に対応しています。
要約すると、ライトボックスは、利点のない新しい改善された欠点を備えたダイアログボックスの再発明には不十分です。
私たちはごく最近、いくつかのユーザーテストを実施しました。その結果、主にターゲット市場内のブラウザーコントロールに依存しているため、ライトボックススタイルのアプローチを再考しました。初期の設計段階では要件に非常によく適合しているように見えましたが、ユーザーは完全に混乱していました。
グラフィックデザインの欠如が要因であるかどうか（私たちはワイヤーフレームでテストしていました）と思いましたが、背景を暗くしたり、ボックスを大きくしたりするためにページを微調整しても、特定の参加者グループでの使用方法を明確にするのに役立ちませんでした。
異なる聴衆が非常に異なる方法で振る舞うというさらに別の教訓。
私を驚かせた1つのことは、ライトボックスがそれほど使用できないのに、なぜそれほど人気があるのですか？ 1990年代後半のフレームの大失敗のように、それはファッションのことですか？それとも、開発者がコーディングしやすいからでしょうか？それとも、ユーザーが気に入ったからでしょうか。
時間がたてば分かる。もし彼らが本当に使えなくなったら、彼らが現在採用しているレベルの養子縁組にはならないと思う。
これは単なる個人的な観察ですが、ライトボックススタイルのモーダルダイアログにはいくつかの便利な属性があります。
彼らはそれらが表示されるページとのコンテキストの関係を強調します（ライトボックスのコンテンツを新しいページに表示すると、その概念的なリンクが壊れます）
ライトボックスダイアログの表示は、新しいページに移動するよりもはるかに高速です（サーバーの往復の待ち時間を発生させる必要はありません）。
現在のページに留まることにより、ページの状態を保存する問題はありません（ユーザーが進行中の編集を、ポップアップを表示する代わりに新しいページに移動する場合、どこかに保存する必要があります）。
ライトボックスは、特に小さく簡潔な場合は、間違いなく使いやすさが向上します。
これらの実装の人気はかなり戸惑うものであり、ユーザーがコントロールできるようにしようとする試みから一歩戻っています。多くの場合、ワークフローの邪魔になる長いアニメーションが含まれています。ライトボックススタイルのブローアップのある画像ギャラリーは、ユーザーが大きな画像が読み込まれるのを待っている間、ユーザーを待ち続ける傾向があります。ユーザーは、ギャラリーのスキャンを続行したり、ページの残りの部分で何かを行うことができません。
私は通常、デスクトップウィンドウ形式で明確にスタイル設定されたドラッグ可能なWebアプリケーションで非モーダルダイアログを使用します。通常、詳細や編集可能なアイテムのリストからそれらの複数を開くことができます。
この方法で画像ギャラリー用のHighslide JSと呼ばれるきちんとした小さなライブラリもあります。 JQuery UIにはシンプルなポップアップダイアログスタイルがあり、モーダルと同様に見える、より重要な非モーダルポップアップウィンドウの両方に使用できます。
これが最善の方法かどうかはまだわかりません。 Sharepoint 2010のポップアップは、ページ全体を新しいページのようにカバーします（技術的にはそうではありませんが）。これにより、実際にページのリロードサイクルを経由せずに表示されるフォームまたは設定ダイアログに興味深いフォーカスが与えられます。ただし、ユーザーがそのタスクのみに完全に集中でき、ロード時間に耐えられる場合にのみ意味があります。ライトボックスが発生します。画像ギャラリーの閲覧は、まったく異なる世界のようです...
興味深いアイデアMichael-ライトボックスの良し悪しに関してはまだコンセンサスがないようです。しかし、私は以下に同意しません。
前のページのコンテキストが必要な場合は、適切なコンテンツを新しいページにコピーします。
ページのすべてのコンテンツに関連がある場合はどうなりますか？すべて複製する必要があるため、複製されたページが多数ある扱いにくいWebサイトになります。
Webサイトでモーダルなものが必要な場合は、新しいページに移動します。モーダルダイアログボックスのように、ユーザーが新しいページに移動すると、ユーザーは必要なものを完了するか、または（[戻る]を使用して）キャンセルする必要があります。
ページに状況依存の情報（データ入力フォームなど）が含まれている場合、新しいページに移動すると、データが保存されているかどうかに関してユーザーに不確実性が生じる可能性があります。ライトボックスを使用すると、ユーザーは自分のデータがまだ安全であり、モーダルを処理したときにそこにあることがわかります。
ちょうど私の2ペンネットがあります。
私はそれほどベストプラクティスではないと思いますが、考慮すべきことです。
マーケティング用のライトボックスベースのポップアップは、コンバージョン率を非常にかなりの割合で増加させます（個人的に60-153％の増加を目にした実装によって異なります）。
質問はエンドユーザーにとっては有効ですが、他の質問はサイトの所有者にとっても良いことです。そして、これらの状況では、かなりのイエスです。
使用例-
- 人が初めてあなたのサイトにアクセスしてブログ投稿を読む
- それらがまだページ上にある場合、180秒待ちます-ポップアップ
- あなたがこれを好きなら-無料で電子メールでブログを受け取るために購読する
これはユーザーにとっても良いことだと私は主張します。もし彼らがブログ投稿を読んでサイトに3分間滞在したとしたら、それは価値のあるものだったからです。誰もがRSSを理解しているわけではなく、多くの人々は広告などを無視しています。
この質問が最後に尋ねられたときに私の答えを参照してください-私は今でも同じように感じています： モーダルダイアログボックスをいつ使用する必要がありますか？
私はあなたの質問の一部にもコメントしたいと思いました：
ただし、多くの場合、ユーザーが画像を開いたり、新しいブラウザタブでそのタスクを実行したりできないことがよくあります。
ライトボックスのポイントは、これらのアクションは実際には必要ないということです。最初にページを離れない場合は、新しいタブを開く必要はありません。
柔軟なWebアプリのように感じる必要があるWebページの実装に取り組んでいます。ユーザーが入力できるフォームは複数あります。
私の目的とユーザーのために、ここにいくつかの仮定（利害関係者とSMEに同意されていますが、ユーザーテストで覆される可能性があります）：
- このWebアプリにアクセスするユーザーは、自分が何をしたいのかを知っています。彼らは事前にわかっている特定のタスクを完了するために来ています。それがこのページの目的です。ユーザーは見に来ません。
- 彼らは何をしているのか知っているので彼らは必要なフォームに記入するために必要な情報を知っています。
ライトボックスフォームの使用を提案してきました。私は通常、モーダルウィンドウの使用に反対しますが、単純な更新または追加を試みるたびにユーザーを新しいページに送信するだけではまったく反対です。そして、私はアコーディオンがここでの正しい解決策であるとは思いません（ただし、それらは代替オプションかもしれません）。
私たちのコンテキストでは、ライトボックスフォームはユーザーの要求に応じてのみ表示されます。 クイック、簡単なエスケープ/クローズを許可します。それらは、ユーザーをアクションだけに要求しますので、ページの変更に驚きはありません。ユーザーは作業中のページ/アプリから削除されません。
フォームの1つには、3つの慎重なステップがあります。したがって、ライトボックスで進行状況の追跡を行うウィザードを使用しています。これは実際に、マルチパネルモーダルに断固として反対する（当然そうである）私たちのグループの1人にとって重要な挑戦ポイントでした。通常、私は全体的に同意しました。
この場合、ウィザードはこのタイプの対話に受け入れられるパターンです。ユーザーは、何をしようとしているか、それを行うために必要な手順を知っています。ライトボックスは、概要ページ（選択と以前のアクション入力に関する情報を提供する）を離れることなく、要求されたアクションにユーザーを集中させますが、すばやく閉じることができます。
モーダル/オーバーレイ/ライトボックスなどは控えめに使用する必要があることに私は同意しますが、それらは本質的に邪悪または貧弱なUXではありません。フォーカスされたタスクに対してユーザーが要求したバージョンは有効なユースケースであり、多くの状況で、慎重に実装された場合、他のバージョンよりも優れている場合があります。