web-dev-qa-db-ja.com

標準ボタンコントロールまたはリンクラベル

私は最近、標準のコマンドボタンからの適切な画像でリンクラベルを使用するようにアプリケーションを切り替え始めました。これを行う主な理由は、醜い「引き伸ばされた」ボタンに頼ることなく、UIで伝達できるテキスト情報を最大化することでした。

たとえば、「選択したアイテムの編集」というテキストを追加すると、コマンドボタンの見た目が醜くなり、使いやすさの観点から標準サイズからほぼ2倍に幅を拡大する必要があります。ユーザーがクリックしたときに何が起こるかを正確に示します。標準サイズの[OK]ボタンの横に2倍幅のボタンが配置されていると、どういうわけか間違っているように見えます。

ただし、これとは逆に、「OK」ボタンの小さな2文字のリンクラベルが不快に感じます。これは、適切なアイコンが配置されている場合でも、正しく表示されません。

OK、保存、キャンセルなどの「アクション」の両方のコマンドボタンと、「ナビゲーション」タイプのリンクラベル、たとえば「選択したアイテムの編集」が新しいダイアログを開いて維持していることを考えています。あるダイアログから別のダイアログにナビゲートするWebナビゲーションメタファーを使用します。ただし、これにより、2つのコントロールが混在するアプリ全体で一貫性が失われます。

ユーザビリティとデザインの両方の観点から、人々の考えは何ですか?

2
user3285

アプリケーション内で一貫している限り、大丈夫だと思います。

(ここにあるように)例としてStack Exchangeを例に取ると、「回答を投稿」などのアクションのボタンと他のほとんどすべてのリンクラベルが2つにうまくミックスされます(ただし、上部のナビゲーションリンクはオリジナルのボタンのように見えます)サイト)。

2
ChrisF

2つのコントロールを組み合わせるというあなたの基本的な考え方は正しいアプローチだと思います。 2つの異なるコントロール(ナビゲーション用のリンクと「アクション」用のボタン(私が「コマンド」と呼ぶ)を実行しているため、2つの異なるコントロールがあるため、一貫性はあります。これは、これらのコントロールに対するユーザーの期待と一致しており、 HTMLボタンvsハイパーリンク への私の回答で説明したように、ユーザーがコマンドを実行しようとしているのか、ナビゲートしようとしているのかを区別することが重要だと思います。

ただし、「選択したアイテムの編集」の例では、それが設計中のアプリの実際のケースであると想定して、いくつか考慮すべき点があります。

それはコマンドまたはナビゲーションですか?

「選択したアイテムの編集」のコントロールは、実際にはナビゲーションとコマンドの間の灰色の領域にあります。はい、ユーザーを対話に導くという意味でナビゲートしますが、それはコマンド、つまり編集を実行するための厳密な対話です。動詞でラベル付けしているという事実は、それがナビゲーションではなく、主にコマンドであることを意味します。

このように見てください。ユーザーがアイテムを編集したいとします。彼らはこれがコマンドであることを知っていますが、コマンドを完了するためにナビゲートする必要があることを必ずしも知っているとは限りません。したがって、彼らはあなたのページをスキャンして、ボタンのように見えるものを探し、リンクのように見えるものにさえ気付かないかもしれません。一方、コマンドを完了するには追加の入力を提供する必要があることをユーザーに通知することも役立ちます–その編集はコントロールをクリックしてもすぐには行われません

幸い、この問題に対処するための確立された規則があります。それはコマンドボタンを使用することですが、ラベルの最後に省略記号( "…")を追加します。

Links and Other Wrong Controls で灰色の領域について詳しく説明します。

(別の可能性としては、「選択したアイテムの編集」が編集だけではありません。むしろ、それは本当にドリルダウンです。アイテムをより詳細に表示し、ユーザーが個々のフィールドまたは属性を変更できるようにしますが、アイテム全体を削除したり、友達に転送したり、親ページに表示されていないフィールドを単に表示したりするなど、他のこともできます。その場合は、「詳細」または「プロパティ」の方が適切なラベルである可能性があります、それはリンクであり、単一のコマンドではなく、一般的なナビゲーションを実行します。)

本当に長いラベルが必要ですか?

コントロールに「編集」というラベルを付けるだけで十分だと思います。「選択されたアイテム」というテキストは、ユーザーにほとんどの情報を伝えません。特に「アイテム」は具体的ではありませんが、おそらくあなたができる最善の方法です(たとえば、ショッピングカート内のアイテム)。ただし、通常、編集などのコマンドは選択範囲を編集することを意味します。 「選択したアイテムを切り取る」、「選択したアイテムをコピーする」、「選択したアイテムを削除する」などのラベルが付いたGUIアプリは表示されません。これらのコマンドが何に作用するかは、それらの位置と機能によって示されます(たとえば、編集メニューにあるなど)。おそらく同じことを行うことができます。これにより、醜い長いボタンの問題が解消されます。長いキャプションは、醜いボタンを作成するだけでなく、より重要なコントロールを覆い隠したり降格したりする混乱を追加します。ユーザーが混乱していることを示すユーザビリティテストの結果がない限り、「選択したアイテムの編集」のようなラベルは使用しません。それでも、最初に次のような代替案を試します…

インラインドキュメントを使用できますか?

場合によっては、ボタンのテキストを明確にする必要はありません。ただし、下の[追加]ボタンのように、テキストの一部をボタンの外側にインラインドキュメントとして配置することで、長いラベルを回避できる場合があります。

img

あなたの場合、ボタンのラベルとして「編集...」を、ボタンの右または下に静的テキストとして「選択されたアイテム」を置くことができます。または、選択したアイテムに作用する複数のコマンドがある場合(そして、選択をサポートしている理由がわからない場合)、これらのすべてのボタンを短いラベル(「編集」、「削除」とともにグループ化できます。 」、「転送...」、「アクティブ化」)、上部の「選択したアイテム」というラベルの付いたフレームに配置します。

とにかく編集コマンドが必要ですか?

理想的には、アプリはインプレース編集をサポートする必要があります。ユーザーにアイテムを選択してナビゲートして編集させないでください。むしろ、選択のために表示されている場所でアイテムを編集するためのコントロールを提供します。たとえば、アイテムを静的テキストとして表示する代わりに、テキストボックス、ドロップダウンリスト、その他のコントロールのすべてのフィールドを表示し、ユーザーが直接変更できるようにします。これにより、「選択したアイテムの編集」を表示する方法の問題が解消されるだけでなく、アプリが簡素化され、編集がより速く簡単になります。

1

使いやすさ:「リンクラベル」は色が変化せず、適切な位置にあるため、どのユーザーにも表示されるように注意する必要があります。

デザイン:Webナビゲーションのメタファーに同意します。個人的には、ページベースのアプリケーションが好きです。デザインには、ボタンのクラシックな外観を変更するテクノロジーがあると思います。リンクラベルを使用せずに、ボタンの外観を変更できます。リンクラベルを使用するのが最善の選択肢ではないと思います。WPFでXAMLマークアップ言語を使用してボタンの外観を変更します。この技術が使えないなら、きっとラベルを使います。

0
Diego Pacheco

これに関係があるかもしれない他のものはアプリケーションのコンテキストです。そのMDIアプリケーションは、ユーザーが自分のウィンドウで一度に1つ以上のレコードの「詳細」ビューを開いて、データを並べて比較できるようにする必要があるためです。

そのため、実際にはユーザーが単一のページから単一のページに「移動」していないため、リンクラベルのナビゲーションタイプコンテキストはわずかに機能しません。ナビゲートの概念は、戻るおよび進むボタンまたはブレッドクラムバーを使用することを意味しますが、MDIアプリケーションにはユーザーが自由に各ウィンドウを表示してアプリを自由に移動できるため、これは適切ではありません。フォーカス。

これで状況は変わりますか?

0
user3285