ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン

従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザインパターンとテクノロジは二重の変化と進歩を遂げてきました。私たちは、ページ上のタスクが明確なユーザーグループに対応し、タスクの数が少なく、正確であるべきだと主張しています。従来のバックエンドソフトウェアシステムに戻ると、システムとプロセスのリエンジニアリングに直面しています。 Web サービスの設計アイデアをバックエンドソフトウェアシステムに移行することを考えるのは自然なことです。ほとんどの場合、これによりシステムはより軽量になり、より明確に構造化され、ソフトウェアのユーザーベースに関する洞察と最適化が提供されます。
しかし、ソフトウェアシステムでは、ユーザビリティの向上に役立つ改善を行う必要があるのでしょうか? 今日は例を挙げて説明します。

背景は次のとおりです。
1. ページには、メインタスクと複数のブランチタスク、およびメインタスクを完了するために必要なページ情報アーキテクチャが含まれます。
2. ユーザーロールが多く、情報量も膨大ですが、ページ領域が限られており、主なタスクに必要な情報しか表示できません。
私たちは次のような課題に直面しています:
1. メインタスクの意思決定を行う際、その意思決定をサポートするために、特定の条件下で分岐タスクの詳細を参照する必要があります。
2. 分岐タスクの意思決定を行う際、その意思決定をサポートするために、一定の条件下でメインタスクの情報を参照する必要があります。

最初は、タスクに必要な情報を自然に分類して整理し、ページをより構造化します。ページをスリムにし、操作をスムーズにすることを目的に、多数のプレゼンテーション層スクリプト言語が使用されています。写真からわかるように、前のページへのジャンプは、現在のページにポップアップ表示されるマスクフローティングレイヤーに変更されます。この時点で、私たちは問題を見落としていたことに気づきました。ページがフローティングレイヤーを使用した後、メインタスクと分岐タスクの関係は並列から包含に変わります。分岐タスクは他のシステム環境ではメインタスクの位置にあり、タスク間に包含関係はありません。フローティングレイヤーは、3画面に及ぶページにおいて、従来の並列関係構造における自由な情報の組み合わせ、情報の比較、自由な移動を実現できます。しかし、情報量が複雑な場合、フローティングレイヤーを移動したり、スクロールバーをドラッグしたり、フローティングレイヤーが一部の情報を覆ったりすると、環境テスト中にユーザーが困惑することになります。これまでの並行構造、自由な開閉、不規則なコントラスト、主要タスクと二次タスク間の引きずりといった習慣は、もはや継続できないからです。この時点で、システム構造自体の問題を考慮しなければ、ここでポップアップ層を使用すると、ユーザーはより自由で拘束されずに済み、ビジネスの拡大と緊張によってもたらされるシステム調整コストも削減できます。現在一般的に使用されているフローティング層は、使用プロセスを制限します。
ソフトウェアシステムの使いやすさを向上できる機能がソフトウェアシステムに適しているかどうかを測定します。ユーザビリティの観点から検討するだけでなく、システム構造、ユーザーの習慣、技術的コストなどの要素を深く理解することも必要です。 Webサービス製品の場合は、より徹底的に測定する必要があります。

<<: CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

>>: JSにおけるnewの原理と実装について詳しく話しましょう