「ページレイアウト」エディターのユーザーインターフェイスの改善
以下は、Webベースのページレイアウトエディターのスクリーンショットです。
これは基本的に、インタラクティブアプリ用のドラッグアンドドロップWYSIWYGエディターであり、ユーザーはページ背景を使用して、画像ギャラリー、ビデオなどのインタラクティブ要素の「レイヤー」を追加できます。
右上にある小さな「オブジェクト」の1つをレイアウトにドラッグすると、新しいオブジェクトを作成できます。ドロップすると、新しいオブジェクトが表示され、編集できるようになります。
以下のユーザーインターフェイスは3つの部分に分かれています。
- ユーザーがインターフェース全体をナビゲートできるメニューバー/ツールバー。
- 左側のページエディタ領域。ページのプレビューが表示され、オブジェクト（青いボックス）を配置できます。
- プロパティサイドバー/パレット。
このレイアウトは基本的には機能しますが、ユーザーエクスペリエンス全体を向上させる方法は確かにあります。
質問
新しいオブジェクトの作成：右上にオブジェクトタイプの静的リストを置くよりも優れた/より直感的な方法はありますか？これを左側に、おそらく薄い柱として移動することは理にかなっていますか？
ほとんどのオブジェクトにはあまり多くのプロパティがないため、通常、多くのスペースが無駄になります。モーダルダイアログを使用せずに修正できるかどうかはわかりませんが（余分なクリックのため、回避したいのですが）。どうすればスペースの無駄を避けることができますか？
この種のユーザーインターフェイスのベストプラクティスがある場合は、経験豊富なUIデザイナーに連絡してください。私はアドビソフトウェアにかなり偏っています。
私はこのアプローチを取るでしょう：
静的リストを列として左に移動します-提案どおり。短い見出しを付けます。スリムに保ち、ドラッグアンドドロップ可能にし、アイテムタイプには明確で短い名前を選択します。アイテムを複数回使用できない場合は、左側の列でグレー表示にします。ユーザーがアイテムをどこにドロップできるかを必ず理解してください！
アイテムのプロパティは左側の列に設定しないでください。これはカラムを膨らませ、開始するだけで非常に複雑にします。メインキャンバスにドロップした直後にアイテムを「開く」または「展開」し、ユーザーがすぐに設定を行えるようにします。これには追加の利点があります。左側の列で設定/プロパティを設定すると、キャンバス自体への直接リンクなしで左側の列で設定/プロパティが設定されるため、ユーザーはこれを一般的な設定であると考える場合があります。
そのようなインターフェースのより良い例の1つは、Podioでのアプリの作成です。無料で試して、新しいアプリを作成し、同様のタイプのアプリケーションを作成できます。ただし、ページを作成するのではなく、フォームとエントリのビューアを作成します。 （私はポディオとは全く関係がありません。私はこの特定の詳細に対する彼らのアプローチが好きです。）
類似のアプリケーションのそれほど肯定的でない例は、Salesforceページレイアウトエディターにあります。アイテムの静的リストを持つフローティング水平ブロックを使用します。これは画面の上部にくっつき、使用済みのアイテムはグレー表示されます。ひどい気分です。
ユーザーがオブジェクトの編集に使用するパネルはコントロールパネルと呼ばれ（Adobe Illustratorから名前を付けました）、これは上部にある水平パネルです。
そして、ツールボックスに関しては、あなたは正しいです、薄いカラムがより良いです、そして、左側にあるべきです。
したがって、上部のコントロールパネルは動的であり、ユーザーが異なるオブジェクト間でフォーカスするとコンテンツが変化します。デフォルトのフォーカスはWebページ自体である必要があり、別名何もフォーカスされていません。その場合、サイズや配置など、Webページ全体のプロパティをユーザーが変更できるようにする必要があります。それが機能でない場合は、空にしてください。