web-dev-qa-db-ja.com

セグメント化/分割「保存|名前を付けて」ボタン?

バックグラウンド:

「保存」に加えて「名前を付けて保存」オプションがいくつかあるアプリケーションがあります。

これは、メニューバーのないWebアプリケーションです(インターフェイスの上部にあるボタン領域のみ)。

質問:

「保存」機能と「名前を付けて保存」機能を組み合わせて分割ボタン/セグメント化されたコントロールにするのは良い考えですか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

私には十分論理的に思えますが、このパターンを実際に目にしたことはありません。何が欠けていますか?

3
DrFriedParts

これが一般的でない理由は十分です(私は存在しないと思います):

このことを考慮:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2を押すとどうなりますか? 2はありますか?または、12を取得しますか?

ボタンまたはメニュー項目のアフォーダンスは個別のアクショントリガーであるため、明らかな答えは2を取得することです。

次に別の例を示します。

Image of eyes

最初に何を見ますか? 2つの虹彩または2つの目?アイリスは顔に属していますか、それとも顔に属している目の一部ですか?

ボタンの境界により、SaveAsが明確に視覚的に分離されます。つまり、最初は分離を作成しています。分離した要素に参加するように人々に依頼するだけです。

あなたの提案は人々に考えさせAsSaveの間の(すぐには明らかではない)リンクを理解させる。

次の問題を検討してください。

  • 電卓をよく使用する人は、Save asを実行するには、最初にSaveをクリックし、次にasをクリックする必要があると結論するかもしれません。
  • asをクリックするとsave asと等しいのに、saveをクリックするとsaveになるのはなぜですか?
  • ツールバーにボタンを追加する場合は、ボタンをこのセグメント化されたボタンから離しておく必要があります。そうすると、メニューがSave as closeとして表示されなくなります。

重要な点は、単語SaveSave asから削除するだけですが、混乱の可能性がある点(従来とは異なる制御)を導入し、事実上すべての人が何かを取り除いていることです。慣れている:Save as...ボタン。

私のポイントは、ほとんどメリットはないが、提案にはかなりのペナルティがあるということです。

9
Izhaki

分割ボタンは、適切に実装した場合にのみ、解決策となります。私はアイデアを明確にしようとします:

分割ボタンの目的は、プライマリコマンドの下に論理的にグループ化されたセカンダリコマンドを追加することです。例はオフィスのリボンで簡単に見つかります:

enter image description here

ツールバーに十分なスペースがなく、他の多くのボタンが混雑している場合は、分割ボタンを使用します。分割ボタンを使用するもう1つの理由は、2次コマンドが頻繁に使用されないか、上級ユーザーのみが使用することです。このように、ほとんどの場合、他の人の邪魔をしません。

ボタンのラベルは、基本コマンドの名前になります。その横には、ドロップダウンメニューを開く矢印しかありません(セカンダリラベル「As」は使用しないでください)。ドロップダウンメニューに、「名前を付けて保存」などの二次コマンドや他のタイプの保存を表示します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

[保存]の横に[名前を付けて]ボタンを配置するとユーザーが混乱することになるので、私は上記の回答に同意する傾向があります。また、条約から逸脱しています。一般的に使用されるデザインパターンに固執する場合、ユーザーがそれを誤解する理由はありません。

このトピックについて Microsoftのガイドライン も参照してください。

3
Dvir Adler

[Save | as]に分割するのは良い考えではないと思います。私はそのようなパターンを見たことがなく、ユーザーにとっても同じであると思います。だから、私は間違いなくそれを[Save]と[Save as ...]に分割するつもりです。 間違いなくこれをお勧めします。

ただし、興味深いと思われるもう1つの解決策は、自動保存強力な確認付きをドキュメントの編集時にGoogleドライブと同じように提供することです: "ドライブに保存されたすべての変更「。ただし、この場合、自動保存は非常に頻繁に発生します(ユーザーが処理する内容の入力/編集を終了してから数秒後)。次に、理論的には、[保存...]と書かれたボタンを1つだけ使用して、モーダルとして保存を開くことができます。しかし、それでも、[保存]ボタンを使用すると、ユーザーが保存プロセスに対する制御をより意識するようになるため、ユーザーが混乱する可能性が少なくなります。

もう1つのアイデアは、オプションの1つでドロップダウンを提供することです。

  • [ファイル]は、保存、名前を付けて保存、名前の変更などに展開されます。
  • [保存▼]これは、[保存]をクリックすると保存され、下向き矢印をクリックすると[保存]および[名前を付けて保存]に展開されます。これは提案したパターンに似ていますが、少なくとも認識可能です。

しかし、私が言ったように、私は2つのボタンを持つことを勧めます。

2
Dominik Oslizlo

@Izhakiは短所を説明する素晴らしい仕事をします。それでも試してみたい場合(ABテストは興味深いと思いますが、目標として測定できるものを定式化するのに苦労しています)、ボタンとドロップダウンのコンボが最適です。

http://getbootstrap.com/components/#btn-dropdowns

これにより、誰かが誤って[名前を付けて]ボタンをクリックする可能性がなくなり、名前の変更やコピーなど、ファイルのような操作を追加する機会が与えられます。

1
nathanziarek