ヘッダーをクリックすると、jQueryUIアコーディオンが開いて折りたたまれます。 http://jqueryui.com/accordion/
Twitter Bootstrapヘッダー内のアンカータグをクリックすると、アコーディオンが開いたり折りたたんだりします。 http://getbootstrap.com/javascript/#collapse
私の意見では、jQueryUIヘッダーのクリックは、ユーザーが理解しやすいです。カーソルは自動的にヘッダーのポインターになります。一方、bootstrap=アコーディオンの場合、ユーザーがテキストの上にマウスを置くまでヘッダーがクリック可能であることをユーザーは認識しません。これにより、自分を含む数人のユーザーがスローされます。
とにかく、私は違いが何であり、なぜbootstrapがアンカークリックとヘッダークリックのどちらを選んだかを知りたいと思っています。それらが何らかの理由であるに違いないと思います。
これは最も一般的なUXの問題の1つであり、正当な理由がない多くのサイトで見られます。
おそらく興味深いことに、ユーザーテストでは、ユーザーが(クリックできない)領域をクリックしてからテキストをすばやくターゲットに設定します。これは非常に迅速に発生し、この問題に慣れているかのように、完全に動揺しているように見えます。
Bootstrapの例がどのように処理するかについては意味がありません-div領域全体がクリック可能でなければなりません。しかし、これは何をするよりも、ドキュメントを書いた人からの注意の欠如であると感じますBootstrap自体。これからHTMLコードを少し変更した場合:
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
これに:
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">
<a>Collapsible Group Item #1</a>
</h4>
</div>
実際にはJQueryと同じ動作になります(ポインターカーソルにCSSを追加する必要があります)。
クリック可能な領域が大きいことは間違いなくBEST UXであり、bootstrapにはすでにこの機能があるため、div
タグをブロック要素にすることで、リンクがa
スペース全体を埋めるようにします。
#accordion .panel-title a{
display:block;
}
使いやすさとフィットの法則の観点からは、あなたは完全に正しいです。jQueryUIボタンの方が大きいので、jQueryUIボタンの方が優れています。クリック可能な領域をテキストのみに制限する理由の1つとは思えません。つまり、Bootstrapカルーセル矢印のクリック領域が増えるため、アコーディオンはどのように違うのですか?