it-mure.jp.net

CMSインターフェイスロジック。 -これは最善の方法ですか?

私はcmsシステムを開発しています。現在、新しいメニュー項目をメニューに追加するためのインターフェースに取り組んでいます。 (cms Logicにより、メニューは固定され、ユーザーはメニューを追加または削除できません。すべてのメニュー項目を削除し、メニューまたはメニュー項目にメニュー項目を割り当てます)。

新しいメニュー項目を追加するには、ユーザーはメニューの上にある大きな領域をクリックする必要があります(画像2を参照)。これにより、入力フィールドが表示されます。入力を保存すると、「未割り当て」ボックスに新しいメニュー項目が表示されます。メニュー項目を配置するには、メニューの1つにドラッグして、目的の位置に移動します。

メニュー項目を削除したい場合は、ゴミ箱にドラッグするだけです。アイテムを編集する場合は、クリックするだけで、アイテムが強調表示され、選択したメニューアイテムの情報が入力フィールド(新しいアイテムを追加するフィールドなど)に表示されます。変更して[保存]をクリックするだけです。アイテムの位置を変更するには、アイテムを目的の位置にドラッグするだけです。

すべてがわかりやすいといいですね。

私の質問は:

このアイデアは使いやすく、論理的ですか?それを行う最善の方法ですか、それとももっと良いアイデアがありますか?改善のためのコメント/アイデアはありますか?

cms ui img 1 img 1

cms ui img 2 img 2

//更新。

さて、私はモックアップをしました。 ArchieVersaceのコメントはすべて理解できたので組み込んでいます。編集モーダルボックスについては、簡単なスケッチなので、実際の入力、サイズなどはありません。

Navigation TreeAdd/Edit BoxTrash Bin

// 2010年10月29日更新

だから私の現在の変更:

  • ごみ箱なし
  • 垂直ツリー構造
  • 追加ボタン(メニュー名の横にありますが、位置が変更される場合があります)
  • 3つのメニュー(プロジェクトの平均数)を隣り合わせに配置する前に位置を選択せず​​に作成した場合、メニューの上に割り当てられていないメニュー項目の幅はそれぞれ約300pxです。幅の広いメニューはほとんどないので、これで十分です。メニューを折りたたむためのボタンを追加しますが、起動時にすべての項目が折りたたまれないようにします(ただし、最後の設定をCookie経由で保存する場合があります)。

とにかく、私のcmsにはjavascriptが必要です。ワードプレスのように配布されるのではなく、プロジェクトごとに販売されるため、jsを要求できます。つまり、メニューの配置にフォールバック(保存/キャンセル)は必要ありません。

私のユーザーはほぼ毎日システムを使用しているかもしれませんが、一部のユーザーは数か月ごとにのみWebページのコンテンツを更新する場合もあります。したがって、私はそれができるだけ簡単であるべきだと思います。このため、常に表示されている別の追加ボタンを含めることが重要だと思います。このボタンを使用してメニュー項目を追加すると、メニュー項目がどのメニューにも割り当てられなくなります。この場合、メニューの上の部分が新しく作成されたアイテムを保持して表示される可能性があります。

これは良いアイデアだと思いますか?メニュー項目が作成されていない場合、表示されず、スペースを取りません。

alt text

8
Lukas Oppermann

メニューの横配置がわかりにくいと思います。まず、階層的に意味をなさない-なぜ最初のレベルだけが水平にレイアウトされ、他のレベルは垂直なのですか?別の問題は、より多くの第1レベルのアイテムがあるとどうなるかということです。ほとんどの場合、水平スクロールは優れたソリューションではありません。私はすべてを垂直にして、サブアイテムをインデントします。

私の意見では、ゴミ箱とメタメニューのセクションは不要です。各メニュー項目に入力する入力が3つしかない場合、ゴミ箱からの回復はそれほど大きな問題ではありません。また、新しいメニューを作成するときに、メタメニューセクションの機能を既存のメニューのコピーに置き換えることができます。 (サイトのすべてのページが自動的に表示される場合も、規模について考える必要があります)。両方のセクションを編集メニュー項目セクションに置き換えることができます。

それ以外は、見栄えがいいです。私はあなたのモックアップのシンプルさが大好きです。

0
Virtuosi Media

長い説明なしでこれらの画面を見るだけでは、何をするか、何をクリックするか、相互作用の順序はわかりません。それ自体はかなりはっきりしています:優れたユーザーインターフェイスは通常、最小限の説明を必要とします(iPhoneまたはWiiのようなものを考えてください。開始するには、テキストの段落を必要とせずに、何をする必要があるかが非常にすぐにわかります)。 。

したがって、私が最初に行うことは、これらの画面をさらに数人の人(IRL)に見せ、あなたの説明なしでそれらがどのように応答するかを確認することです。彼らはそれを得ますか?彼らは彼らが何を見ているのか、ここで彼らに何が期待されているのか知っていますか?そうでない場合-物事を説明する必要がある場合-画面の再編成を検討する必要があります。これを行うには、ユーザーからフィードバックを収集するか、アプリのプロトタイプを作成してそれを使用してもらいます(何をすべきかを提案するように注意してください-自分でつまずくようにしてください)。

その段階であなたが受け取るフィードバックは、ここにいる人々があなたに与えることができるどんな意見よりもずっと役に立つでしょう。

また、現在の画像は白黒のワイヤーフレームであるため、忠実度を少し上げて色を追加し、タイポグラフィをさまざまな程度に使用して支援する場合よりも、デザインを見ている人の視覚的な重みを把握するのが難しくなることを考慮してください。私の目が画面上をどのように動くか。

2
Rahul

特定のやり取り(以下を参照)のお手伝いをさせていただきますが、あなたが何を成し遂げようとしているのかわからないので、それは限られた用途のみとなります。あなたが本当にする必要があるのは、システムの要件を述べることです。ユーザーは何を達成しようとしていますか?どのくらいの頻度でシステムを使用しますか?彼らのスキルレベルは何ですか?等.

たとえば、システムの使用頻度の低いユーザーは、使用するたびにそれを使用する方法を忘れる可能性があるため、この場合は、インターフェースを非常に簡単に使用および取得できるようにする必要があります。ただし、ユーザーが頻繁にアクセスしている場合は、あまりにも単純化されたアプローチでは、ユーザーが初心者に長く滞在しないのでイライラすることがあります。彼らはすぐに、追加のパワーを要求する中間ユーザーになります。私はあなたが何かを使いにくくすることを言っているわけではありませんが、中級ユーザーにとっては、余分な力と複雑さを加えることを恐れるべきではありません。

あなたが提供したモックアップに関して、ここにいくつかの特定の提案があります:

  • 割り当てられていないパネル、追加パネル、ゴミ箱パネルは、占有するスペースの量に対して十分な有用な機能をユーザーに提供しないため、削除してください。
  • 追加ボタンを追加する場所のコンテキストにも追加して、ユーザーが追加ボタンを配置して配置するのではなく、必要な場所に追加できるようにします。
  • ユーザーがメニュー項目を構成する場合は、情報を収集するためのフィールドを含む灰色のボックスを表示します
  • 各メニュー項目に編集および削除ボタンを追加する
  • メニュー内の各レベルに契約ボタンと展開ボタンを追加します。デフォルトでは、すべてのレベルが契約されています。
  • 長いメニュー項目には十分なスペースを確保してください
  • 保存ボタンやキャンセルボタンなどのロールバックオプションの追加を検討する必要があります

以下はモックアップです: alt text

1
ArchieVersace

別のアップデート。 alt tree

追加ボタンをなくすかどうかはわかりません。人々は簡単にメニュー項目を追加する方法を理解するでしょうか?

また、メニューアイテムを同じレベルまたはサブレベルとして追加できるようにするにはどうすればよいですか?たった今、おそらく私はサブレベルになります(実際には、このためにボタンを少し右に移動する必要があります)。しかし、どのようにして希望の場所に同じレベルの新しいアイテムを追加しますか?

フッターメニューで、メニュー項目を別の位置にドラッグするとどのように見えるかを表示しようとしました。

0
Lukas Oppermann