【翻訳】複雑なフォームをOOUXで解決する(Francis Wu, UX Collective, 2023)

複雑なオブジェクトを認識することで、複雑なフォームを簡素化しましょう。

UXデザイナーとして、私たちはしばしばユーザーをイライラさせ、ユーザーエクスペリエンス全体の妨げとなる複雑なフォームを扱うという課題に遭遇します。この投稿では、複雑なフォームがどのようにして生まれるのかを見ていき、OOUXを活用したソリューションを探っていきます。

複雑なフォームの誕生

イベント管理者がイベントを管理するためのシンプルな披露宴会場管理アプリをデザインしているとしましょう。単純なイベントのオブジェクトは次のようになります:

イベント用オブジェクト・テーブル

このようなイベントを作成するフォームは次のようになります:

シンプルな「イベント作成」フォーム

ひとつのファミリーのように、完全に自己完結しています。ファミリーが増えるまで、物事は効率的かつ円滑に運営できます。そして、披露宴会場のビジネスも同様で、オーナーはアプリにもっと多くのことをさせたいと思うかもしれないのです。これには以下が含まれます:

  • 各テーブルに10名までのゲストを割り当てます。
  • 各ゲストに食事のオプションを割り当てる
  • メールでの招待

このような新しい機能をオリジナルのフォームに追加したくなるかもしれません:

複雑なイベント作成フォーム

デザイナーによっては、すでに蜘蛛のような感覚が疼いているかもしれません。しかし、39人のゲスト、4つのテーブル、3つのメニューオプションを追加することで、物事がすぐに手に負えなくなることを説明しましょう。

たくさんのデータを含む複雑な イベント作成フォーム

すぐにエスカレートしました!このばかげたフォームをモバイル・デバイスで使おうとすることを想像できるでしょうか?そのシングル・ファミリーは成長し、その子供たちは今やそれぞれのシングル・ファミリーを持っています。それでもまだ、みんな同じ屋根の下に詰め込まれているのです!

複雑なコンテンツの構築

複雑なのはフォームではなく、フォームが作成することを意図したコンテンツでした。その単純なイベントオブジェクトは、以前は完全に自己完結しており、依存関係から自由でした。しかし今では、このオブジェクトマップにあるように、そのイベントオブジェクトはゲスト、テーブル、メニューオプションに束縛されています:

イベント、ゲスト、テーブル、メニューオプションのオブジェクトマップ

ひとつの複雑なフォームを使って複雑なイベントを作るのではなく、複数のシンプルなフォームを使って複雑なイベントを作ることを考えてみましょう。これはオブジェクトモデルをガイドとして使うことで可能です: 親オブジェクトから始めて、それぞれの子オブジェクトにスペースを与えていきます。

ここでは、親オブジェクトがイベントです。そして、イベントは単純なフォームで部分的に作成することができます。

シンプルな「イベント作成」フォームで複雑なイベントの始まりを作る

その結果、イベントの残りの部分を構築する土台ができ、各子供に独自のスペースを与えるアフォーダンスがあり、複雑さも同様に管理できます。

イベントの残りの部分を構築するための静的ビュー

言い換えれば、それぞれのファミリーが成長する余地のある、それぞれの家庭を与えます。

「イベントの詳細」ページが、「参加者」、「テーブル」、「メニュー・オプション」エリアにどのようにつながるかを示す図解

上の画像に見覚えがあるとすれば、それはイベント、ゲスト、テーブル、メニュー・オプションのオブジェクト・マップを反映しているからです。

オブジェクトマップを反映したナビゲーション

望ましい結果

このアプローチに対する不満を聞いたことがあります。開発者からは、「構築するページが多すぎります!」と、まるで関心事の分離が良いことでないかのようなことを言われることがあります(このように)。プロダクトマネージャーからは-そしてデザイナーからも!-「クリック数が多すぎる」と、あたかもクリック数が意味のある指標であるかのように言われることがあります(それは違う)。

実際には、このOOUXに基づいたアプローチには多くの利点があります。

ユーザー中心の調整:フォームをユーザーのメンタルモデルに合わせることで、認知的負荷を軽減し、ユーザーの理解を高め、ユーザーの満足度を向上させます。

スケーラビリティと適応性: このアプローチにより、アプリケーションのスケーラビリティと長期的な柔軟性が保証されます。

フォーム設計とデータベース構造の緊密な連携:開発者と設計者の効率的なコラボレーションが促進され、開発プロセスが合理化されます。

モバイルフレンドリーなデザイン: 大きく複雑なフォームをより小さくシンプルなフォームに分割することは、モバイルフレンドリーなデザインを作成する上での基本原則です。このプロセスにより、デジタルコンテンツやUIが、モバイルデバイスを含むさまざまな画面サイズやデバイスに適応できるようになります。

フォームの先を見る

状況の変化に応じてファミリーが増えたり、分裂したり、合併したりするように、うまく設計されたフォームは複数のシンプルなフォームに増殖し、さまざまなデータニーズやユーザーインタラクションに対して効率的でユーザーフレンドリーなエクスペリエンスを保証することができます。

複雑なフォームがどのようなコンテンツを作成することが期待されていたかを調べることで、複雑さを効果的に管理するための洞察を得ることができます。これは、ユーザーフレンドリーなフォームだけでなく、モバイルフレンドリーで適応性の高いフォームを実現する鍵です。

フォームをユーザーのメンタルモデルやデータベース構造に合わせることで、認知的負荷を軽減し、拡張性を高め、開発者とデザイナーの効率的なコラボレーションを促進し、最終的に優れたユーザー体験を提供することができます。