Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

jQueryUI Accordion opens and collapses when the header is clicked: http://jqueryui.com/accordion/

Twitter Bootstrap accordion opens and collapses when the anchor tag inside the header is clicked: http://getbootstrap.com/javascript/#collapse

In my opinion, the jQueryUI header click is easier for the user to understand. The cursor automatically becomes the pointer on the header. Whereas, for the bootstrap accordion, the user does not know the header is clickable until they hover their mouse over the text. I've seen this throw off a few people including myself.

Regardless, I'm interested in knowing what's the difference, and why bootstrap chose anchor click vs. header click. I'm sure their must be some reason.

share|improve this question

2 Answers 2

up vote 3 down vote accepted

This is one of the most common UX issues, you'll see it in many sites with no justification.

Perhaps interestingly, in user testing you'll see people clicking on the (non-clickable) area, then quickly targeting the text - this happens very quickly and people seem completely unfazed, nearly as if they got used to this issue.

There is no sense in how the Bootstrap example handles things - the whole div area should be clickable. But I feel this is more lack of attention from the person who wrote the docs, than anything to do with Bootstrap itself. If you modify the HTML code slightly from this:

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible Group Item #1
        </a>
    </h4>
</div>

to this:

<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
    <h4 class="panel-title">
        <a>Collapsible Group Item #1</a>
    </h4>
</div>

you will actually get the same behaviour as JQuery (though you would need to add CSS for the pointer cursor).

share|improve this answer

In terms of usability and Fitt's law you are absolutely right, jQueryUI buttons are better, because they're simply bigger. I can't think of one good reason why you should limit clickable area to the text only. I mean, Bootstrap giving the extra clicking area for the carousel arrows, so how is accordion different?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.