web-dev-qa-db-ja.com

アコーディオンアンカークリックとヘッダークリック

ヘッダーをクリックすると、jQueryUIアコーディオンが開いて折りたたまれます。 http://jqueryui.com/accordion/

Twitter Bootstrapヘッダー内のアンカータグをクリックすると、アコーディオンが開いたり折りたたんだりします。 http://getbootstrap.com/javascript/#collapse

私の意見では、jQueryUIヘッダーのクリックは、ユーザーが理解しやすいです。カーソルは自動的にヘッダーのポインターになります。一方、bootstrap=アコーディオンの場合、ユーザーがテキストの上にマウスを置くまでヘッダーがクリック可能であることをユーザーは認識しません。これにより、自分を含む数人のユーザーがスローされます。

とにかく、私は違いが何であり、なぜbootstrapがアンカークリックとヘッダークリックのどちらを選んだかを知りたいと思っています。それらが何らかの理由であるに違いないと思います。

accordion
8
harsimranb

これは最も一般的な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を追加する必要があります）。

13
Izhaki

クリック可能な領域が大きいことは間違いなくBEST UXであり、bootstrapにはすでにこの機能があるため、divタグをブロック要素にすることで、リンクがaスペース全体を埋めるようにします。

#accordion .panel-title a{
    display:block;
}
2
William

使いやすさとフィットの法則の観点からは、あなたは完全に正しいです。jQueryUIボタンの方が大きいので、jQueryUIボタンの方が優れています。クリック可能な領域をテキストのみに制限する理由の1つとは思えません。つまり、Bootstrapカルーセル矢印のクリック領域が増えるため、アコーディオンはどのように違うのですか？

2
Serhiy Baryshniev