I have planned to design a quiz website. My quiz will have some major topics, and about some sub topics. I planned to display all quiz questions in single page rather than taking user to different page.

Note: There will be about 15 questions for each topic.

  • Is correct approach?
  • Whether the attached layout is correct for a quiz based site?

Website design

  • 2
    based on the mockup, not sure what do you mean by "card based", could you clarify?
    – Devin
    Commented Jul 25, 2016 at 19:45
  • @Devin On clicking every tab sub-tab will get open. I meant that as card based. May be i am wrong. Commented Jul 26, 2016 at 16:59

1 Answer 1


I think you may mean Accordion rather than Card-based.

TL;DR: Ditch the accordion, show them the topics as headings, and have the sub-sub-topics and questions on a separate page.

"Avoid hierarchies"

Alan Cooper recommends to avoid hierarchies greater than one level deep where expanding navigation is concerned:

Most humans are familiar with hierarchies in their business and family relationships, but hierarchies are not natural concepts for most people when it comes retrieving arbitrary information

Developers are comfortable with nested systems, in which an instance of an object is stored in another instance of the same object. Most other humans have a difficult time with this idea.

"Accordions increase interaction cost"

Nielsen notes that forcing users to continually click headings to access their content can be cumbersome, annoying, and adds to cognitive load:

  • Forcing people to click on headings one at a time to display full content can be cumbersome.
    • Especially if there are many topics on the list that individuals care about. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once.
  • Accordions increase interaction cost.
    • Readers treat clicks like currency: they don’t mind spending it if the click is worthwhile and has value. However, resentment ensues when a click is considered a wasted effort; it doesn’t take many wasted clicks to escalate people’s reaction to full-blown defiance.
  • Hiding content behind navigation diminishes people’s awareness of it.
    • An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to “spend” clicks on them. When content is hidden, people might ignore information.


Ditch the accordion and simply show them the topics as headings.

A simple hierarchy like this:

- Major Topic 1

  • Sub Topic 1

  • Sub Topic 2

- Major Topic 2

  • Sub Topic 1

  • Sub Topic 2

Clicking a sub-topic brings you to the page containing the sub-sub topics as headings, with the questions underneath each heading.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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