Listing of a schedule/itinerary

Question

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

Answer 1

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}