web-dev-qa-db-ja.com

ボタンアクションとリンクアクションが同じ範囲にある証拠

1990年代初頭にGUIを知り始めたとき、[OK] [Cancel][Yes] [No]のようにアクションが異なっていても、同じタイプのアクションを実行するために常に同じタイプのコントロールがありました。ここでは、最初はまったく意味を成さない別のパターンが進化するのを見てきました。しかし、それについて考えれば考えるほど、それが意味をなすようになります。

ここUX.SEでは、投稿を編集する可能性があります。編集を行って完了したとき、または編集を続行しないことにしたときは、2つのオプションがあります。あなたが取ることができる最初の、最も視覚的に目立つアクションは「編集を保存」ボタンです。 2番目のアクションは、「キャンセル」リンクで、頭文字が小文字で、ボタンよりも目立ちません。

enter image description here

これの背後にある理由は、取るべき最も可能性の高いアクションは編集を保存することである可能性があるため、そのアクションはキャンセルアクションよりもはるかに顕著です。さらに、ユーザーが意図せずに編集をキャンセルできないようにするために、フォローアップの確認ボックスが表示され、ユーザーに編集の中止/キャンセルを再度求めます。

enter image description here

しかし、これは推測であり、これが事実であるという確固たる証拠はありません。それは非常に有望に見え、今後のデザインで使用したいと思っていますが、この新しいパターンの背後にある理由を証明したいのです。記事、テスト結果、さらにはリサーチさえあれば、知りたいのですが。

4
Benny Skogberg

これは、プライマリアクションとセカンダリアクションを区別するための試みです。その目的は、最も利用され、最も重要なアクションを簡単に見つけてアクティブ化し、あまり利用されていない(そしておそらくより危険な)アクションを混乱させず、誤ってアクティブ化するのを難しくすることです。 。

Luke Wroblewskiは 一次アクションと二次アクションを区別するための異なるパターン についていくつかの調査を行いました。 プライマリアクションボタンとセカンダリアクションボタンの視覚的な重み もご覧ください。

4
Matt Obee

望ましい一次アクションとそれほど強調されていない二次アクションの区別に関する@MattObeeの回答には同意しますが、このパターンで注意すべき重要な点の1つは、異なるインターフェース要素。

記事 回答にリンクされているのは、visual(主なアクションを強調表示)とinteractive(のみ最初のアクションの後に2番目のアクションをフェードインします)2つのアクションの区別、プライマリのボタンセカンダリアクションのリンクの方がはるかに強力です。

saveは保存する情報を投稿または送信するアクションであり、cancelアクションは他のページにリダイレクトするだけで情報を送信しないことを考えると、 1つ目はボタン、2つ目はリンクを使用します。 「ボタンvsリンク」の意味に関するこの質問 の回答は、この議論の行をサポートするか、最も高い評価の回答を引用します。

経験則:リンクをクリックすると別の場所に移動し、ボタンで何かができます。

2
kontur