web-dev-qa-db-ja.com

ポップアップウィンドウのメインメニュー

ビューが100までのソフトウェア製品に取り組んでいるので、私の主な関心事は、シンプルさとクイックアクセスナビゲーションです。

私の考えは、すべてのメニュー項目をポップアップウィンドウに配置することです。

ユーザーは2つの異なるオプションを使用してメニューにアクセスできます。1つ目はトップ画面のスティッキーボタンを使用し、もう1つはキーボードショートカットを使用します。

ポップアップウィンドウのメニューが必要な理由は、ユーザーがお気に入りのメニュー項目を再編成できるようにするためです+このオプションでは、メニュー項目を簡単に分類できます+特定のビューの検索機能。

画面上部の従来の水平メニューではなくポップアップウィンドウにメニューを配置した場合、それは良いUXですか?

2
Galilio

提案された解決策は従来のものではありませんが、あなたの創造性のためによくできています-他の新しい発明のように、驚くほどうまく機能するか、惨めに失敗するかもしれません。

私は他の人がそれに反対する意見を提供するだろうと信じています。

実際には非常に使いやすいUXパターンかもしれません

個人的には、photoshopのように、住居のツールバーにはほとんど使いやすさがありません。

A screengrab of the Adobe Photoshop toolbar

たくさんのアイコンとツールの階層があります(長いクリックで他のツールが表示されます。より便利な解決策は、いくつかのキーを押すとメガメニューが表示され、ツールを適切な階層に整理することだといつも思っていました。何かこのメガメニューのように、ショートカットの代わりにツール名を指定します。

A cheatsheet for Adobe photoshop, with tools and their shortcut

実際、CheatSheetと呼ばれる非常に人気のあるMacアプリケーションは、キーボードショートカットを使用して非常によく似た処理を行います。

A screengrab of an application called cheatsheet, showing a big window with many shortcuts

解決策はすでに慣例であり、形式は小さい

コンテキストメニュー(右クリックメニュー)は、提供するものと性質が非常に似ています。

A screengrab of a context menu in windows

100アイテムにもぴったりかも

ユーザーに100アイテムを提示することは、疑わしく、圧倒される可能性があります。それを正当化するためにいくつかの前提条件があります:

  • 用語は非常に短くする必要があります(1または2ワード)
  • 論理的なカテゴリ、場合によっては3レベルの階層に分割する必要があります。
  • ユーザーにとって用語は完全に明確である必要があります。これにより、各アイテムが実際に何を意味するのかを考える必要なく、アイテムをすばやく見つけることができます。

かなりの数のメガメニューで、50以上の項目に簡単にアクセスできます。次のEbuyerの例は、用語とカテゴリがほとんどの人にとって明確であるため、かなり良いです(このメニューには合計60のラベルがあります)。

An image of Ebuyer's mega menu

悪いメガメニューとは、ラベルが少ない(合計38)にもかかわらず、上記のEbuyerよりも使いにくい、このロイヤルメールメニューのように、ユーザーが用語に慣れていないメニューです。

An image of the Royal Mail megamenu

たとえば、ユーザーは「特別配信保証」の意味がわからないため、ここではクラス間で大きな違いがあります(名詞と多くの不可解なラベルが混在するアクション)。

2
Izhaki

私はあなたの提案された解決策を読むことにショックを受けています(そうです、私は本当にそれを意味します)。より良い情報アーキテクチャを設計するには、ユーザー調査と分析を実際に行う必要があると思います。メインメニューをポップアップに配置し、メニューを独自にアレンジできるようにしたいということは、カードの並べ替えや使いやすさの調査を行う大きな機会を示しています。共有している情報が限られているため、100個のメニュー項目すべての必要性を検討することをお勧めします。また、冗長性/重複を確認してください。さらに、垂直方向のプライマリナビゲーションを使用することもできます(すべてのプライマリナビゲーションが水平であるとは限りません)。また、ユーザーの認知負荷を軽減し、効率を向上させるために、部分的なセカンダリナビゲーションを使用すると役立つ場合があります。

0
uxer

ポップアップウィンドウ:いいえ

enter image description here

モーダルウィンドウ:はい

enter image description here

ポップアップウィンドウは常に避けた方がいいです。ポップアップウィンドウが嫌いなだけで、信頼できません。

enter image description here

UI編集用のuxスタック交換の例を次に示します(crt-m)。

今、彼らはここでたくさんのメニューを使いました、私はあなたがこのちょっとしたアプローチで行くことができると思います。

enter image description here

0
4dgaurav