2

I've searched for the discussion about tabs and accordion and the differences between them.

I'm currently designing a layout for an application displaying the itinerary for a holiday/vacation. I'm considering using tabs for each day. Each tab would contain details like city, hotel, and all the activities for the day that are scheduled.

After reading a few views here, the general issue with tabs is that the user often has to go back and forth to locate related information.

Accordion could also work, however, it means that scrolling would be involved to view all the other (collapsed) accordion content if the earlier pane is longer.

The key question is to find out views from people here if tabs or accordion are a better option for displaying a day-by-day itinerary (involving hotel stay details, activities for each day) - or if there are any other elegant options for displaying such data.

Sample data: Each day goes in its own tab - ofcourse there could be more clickable items that expand inside the tab (accordion!) for more details?

Mon 27 May 13 DAY 1 ROME Arrival in Rome and check in hotel Marco Polo.

Tue 28 May 13 DAY 2 ROME Day tour to Naples-Capri-Anacapri

Wed 29 May 13 DAY 3 ROME Skip the Line: Vatican Museums and Sistine Chapel

mockup of the app

Improve this question
4
  • 2
    Hi Nilesh, welcome to UX.se! Can you provide a mockup of the type of data you expect on each tab/accordion. What kind of interactions will the hotel and activity selection entail, etc. – rk. May 25 '13 at 19:32
  • @rk. Can't post images here as I don't have enough reputation! However I'll add the type of data I need to display above as text. – Nilesh Kale May 26 '13 at 5:05
  • Just post a link to the image, someone will embed them for you. – rk. May 26 '13 at 5:09
  • @rk. www.blackgrapeholidays.com/download/mockup.png - link to mock up – Nilesh Kale May 26 '13 at 6:17
2

Accordions have a number of problems. The other options tend to scroll out of the viewport if one item is open. Also, the options are never in the same place. And they don't handle multiple levels very well. It's really not that great of a pattern for navigation but it solves two important problems:

  • Space. Accordions are a really compact master-detail solutions

  • You can have multiple items open at once.

Your mockup offers more of a standard navigation, except you can only view one item at a time.

You could also do both. Have the entire itinerary open on the right but allow users to collapse each section (like an accordion) and have buttons on the left that scroll to a particular day.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • Excellent solution! Now why did I not think of this one! thanks for sharing - It's a ideal solution given that the user can have the 'top-level' view open plus the details open as they see fit! Thank you very much. It'll be interesting to see if any ready-made component/plug-in for any popular frameworks like jQuery etc offer such control? If you know any do share the name – Nilesh Kale May 27 '13 at 4:32
  • ALthough I have marked the above answer, I'm very interested on hearing from anyone with a different take! – Nilesh Kale May 27 '13 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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