web-dev-qa-db-ja.com

アクティブなメニュー項目に対するツールバーの位置

ユーザーが所属しているグループのコンテンツを管理できるシステムに取り組んでいます。以下の画像は、メニューの構造を示しています。トップメニューはユーザーメニューです。 2番目のメニューはグループメニューです。これは、ユーザーがアクティブなグループを選択できる場所です。最後のメニューはコンテンツメニューです。ここで、ユーザーは自分のグループ用に管理するコンテンツのカテゴリ(メディア、ページ、投稿など)を選択できます。

![enter image description here

ユーザーがコンテンツメニューからメニュー項目を選択するとします。ほとんどの場合、右上に「追加」ボタンがあります。例えば;ユーザーが「メディア」をクリックすると、右上から「メディアの追加」を選択できます。

このボタンはコンテンツメニューとどこで比較しますか?

私はオプションを試しました:

  • グループに何かを追加したため、グループメニューの右側
  • コンテンツを追加するため、コンテンツ領域の右側

下の画像を参照してください。どちらのオプションにも長所と短所があります。 2番目のオプションは目的のオプションですが、コンテンツのボタンを配置する4番目のメニューを作成します。最初のオプションは、ボタンをコンテンツから遠ざけます。別のメニューからの項目の選択に基づいて変化するボタンをグループメニューに配置することは、論理的でない場合があります。

私はあなたがどうするのだろうと思っていました。ありがとう!

enter image description here

enter image description here

7
Nick Groeneveld

新しいアイテムを追加する方法(およびコンテンツメニューにアイテムを表示する方法)に基づいて、意味があるかどうかわからない別の提案があります。

これらのコンテンツメニューナビゲーション項目をクリックしたときにこれらのタイプのコンテンツが表示されている場合は、コンテンツメニューの各メニュー項目の横に[新規追加]ボタンを配置することができます。これは一般的なパターンであり、コンテンツメニューで参照している種類のアイテムの横にある[追加]をクリックしているため、明確になる傾向があります。これが不明確な場合の簡単なモックアップを次に示します(赤い「Add +」ボタンは、それらが表示される場所を示しています)。

"Add+" items in red show potential button location

1
Luke

TL; DR:通常、関連するアイテムをグループ化することは良いことです。

Whatsapp(現在Facebookが所有している人気のチャットアプリ)を例として見て、それが「アクション」の配置をどのように処理するかを調べると、すべてが右側にあることがわかります。これは間違いなく、ほとんどがモバイルアプリであるという事実に関係しています(ただし、 web バリアントは同じです)。ただし、アクションがどこにあるかを知るために遠くを見る必要がないので、これは新しいユーザーにとっても良いことです(たとえば、添付ファイルの追加とオーディオの録音は互いに隣り合っています)。

Whatsapp actions

さて、これはあなたのアプリとどのように関係していますか?同じようにして、アクションとコンテンツメニューの両方を縦に並べて配置することもできます。左側または下に示すように右側に配置できます。しかし、これはユーザーにとってより良い体験になると思います。

Group Items

1
Kitanga Nday

解決策はあると思いますメニューオプションの選択がフィルター(またはタブ)として機能するかどうかによって異なります

メニューフィルターまたはタブとして機能の場合。ユーザーがメディアのリストを表示し、「メディア」オプションが選択されている場合、それ以外の場合は、2番目のオプションを使用しますが、左揃えのアクションを使用します。重要なアクションを画面の反対側に移動しても、ユーザーには役立ちません。

オプションを選択してもコンテンツ領域が変更されない場合、コンテンツタイプごとに複数のアクションまたはコントロールがあると思われる場合は、アコーディオンコントロールを使用してコンテンツタイプ固有のアクションを収容することを検討してください。コンテンツメニューオプションと関連アクションの近接性は、ユーザーに適しています。

enter image description here

それ以外の場合、ユーザーがコンテンツを使用して新しいオブジェクトをコンテンツに追加できる場合は、コンテンツメニューオプション自体が新しいオブジェクトを追加するか、コンテキストメニューを削除して、[新規]ドロップダウンリストをグループメニューに追加します。

0
Jurijs Kovzels

ユーザーがコンテンツを追加するので、アクションが発生する場所の近くにボタンを追加するが最適です。

このため、「コンテンツを追加するため、コンテンツ領域の右側にある」という2番目のオプションが推奨されます。

考えてみると、すでに同じロジックを適用して、さまざまなメニューのサブレイヤーをどのようにネストしたかを確認しています。表示される可能性のあるコンテンツの量にもかかわらず、それは素晴らしい働きをします。

あなたのプロジェクトの良い継続。

0
Tidjane Tall

より親しみやすいレイアウトは、追加するコンテンツの画像とその横にある追加ボタンを備えたオプションセクションです。以下にコンセプトを追加しました。 Content Image

0
ColerDesign