There's a few issues that need to be addressed immediately:
You'd get a lot more usability points if this could translate to a good user interface. Make sure to use a lot of session handlers and a little AJAX.
Good starting point.
Good suggestion; I was thinking of accordion as an idea for this as well.
Have you seen the "letter to American Airlines"? I think that you would benefit a lot from the ideas included there ;) here it is:
http://dustincurtis.com/dearamericanairlines.html
in that letter you will find a lot of detailed explanations of similar category, so I don't have much to add at this stage of the project - I would just suggest that you could design it in a way that shows only the most important part of the message, clearly displayed with enough size and white space around, with printer-safe option. Links to other info should wait somewhere nearby, not taking much space. If the user wants to find them, he/she should be able to select proper link by clear and short title text. Good luck!
it lack a bit conr+trast on areas. Increase whitespaece
I like the rolled up level where you tell the user "You have a package and it costs this much." For the components of the package (flight, hotel, etc.) you may want to give the user a little more detail or display the details rather than have them be collapsed. The details for those items (so things like airplane types, etc.) could be expand/collapsed and displayed as collapsed (most people won't care at that point to see them). However, maybe give the information in a shorter, abbreviated form to the user earlier on rather than hide it.
I'm also wondering where in the flow this will appear. If it is on a review screen - I'd say show the abbreviated information most definitely. If it's in path, hide it with the user having the opportunity to view or close it.
I hope this helps......
Great feedback Mary, thank you; great point about where in the flow this appears as well - We envision this throughout the user's navigation through product options and creating their itinerary, but also on a review page - I'm thinking that the review page would show the full details by default.
I like your input on fewer expand / contracts - this is one of the things I was concerned about as well.
I'd make the arrows not stand out as much, because there seems like there's going to be a ton of them, overall looks a little bland but functional.
Thanks much for your input; do you have alternative suggestions to the arrows? For example, we could show arrows only on hover, or use links (e.g. "show details", or "expand", etc), or even different icons like +/-...
Also, these are simply wireframe concepts, and intentionally have no "skinning" applied at all. I'm primarily interested in if the concept of having expand/collapse details for this type of information is appropriate, intuitive, helpful, etc.
To that last comment, would it be more helpful for the reviewer audience to see more graphic design applied to these wireframes?
I think your designs need a helpful footer to ground the site as well as provide quick links so that I don't have to go all the back to the top. I am also little concerned about the busyness of the site. I know you are trying to provide all the information above the fold, but if it's too much information you are going to turn people off.
In effort to provide context, I think by my posting page level wireframes, I've confused what we're trying to review. I've updated to show only the page element that we're concerned with.
Nate, I agree with your busyness comment; that's the crux of the primary challenge here - that is, this is a travel packaging site (think Expedia, Priceline, Travelocity, Orbitz...), and so inherently is challenged with providing a lot of information to the user on the page. This particular concept is trying to provide something to the user that has as small a footprint as possible, while still providing an appropriate level of detail to the user as to the status of their travel shopping experience.
Do you think there is a way to better present this type of data to the user, while keeping a small-ish footprint on the page?
It is kind of hard to tell without seeing the actual design. As wire frames go, I think you have given this enough thought and it will work well for you. You'll just have to keep the amount of content and detail in balance. So move forward with this framing and see how it works for you.
Thanks for your input Nate - I'll put up some comps to see a bit more of a polished idea.
Also might look into using AJAX "accordion" or "tabs" to minimize even more use of space.