Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[micah]

a couple years ago for work I built a "shopping cart" of sorts that lets users renew their memberships to our organization as well as make other donations and what not.  I built it in a 3-column layout:

the left column is a menu list of "categories" and clicking links in that menu dynamically updates the specific options in the center column where the user makes selections and updates their shopping cart.  The third column on the right is a summary of what is in their shopping cart.

(see attached screenshot.)

Anyway, our website is being rebuilt by an outside vendor and I've been charged with the task of cramming this application into their new template.   The problem is, the new template has a site navigation menu already on the left.

So if I just stuck this page into the template there would be 4 columns, and two problems:

1) two menu columns on the right would look weird and be confusing.
2) more importantly, it doesn't all fit.  My original screen was meant to be viewed at a 1024 width.  With the new template site though, I only have about 750px of real estate to the right of the menu

So I could use some suggestions on how else I could lay out these elements.  thoughts?

I considered do a pagination thing where you "step" through all the options -- but as a user - I find that frustrating (think godaddy. ugh)

or maybe a "header" menu with drop downs of the options?

[micah]

another idea might be to eliminate the "shopping cart" as a column and instead just stick a summary in the top right corner with an amount (like newegg.com and other sites do)

so instead of listing all the items in the cart it would just say "3 items in cart $74.50" and there could be a link to check out or a link for a pop-up box showing you all the items in the cart. 

I still have to figure out what to do with the left menu though, as it will look weird on the left.

[Mike]

Can you add your menu items to the new template's menu?

[micah]

I suppose I could. I'll look into that.  I may just put the links in the left hand column instead    although, that flies in the face of convention I suppose.

[micah]

some good examples here: http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/  (at least to solve my shopping cart problem)

[micah]

So 5 weeks later, this app finally got rebuilt. I made a lot of tweaks.  I moved the application's navigation menu to the right, leaving room for the site navigation on the left (note the site nav is not completely built out yet) and I condensed the shopping cart summary into one line.  When you mouse over it it pops up a cart summary table breaking out the items in the cart.

[tgm]

Not a huge fan of the monster tab menu buttons. But they look alight and I guess you have to accommodate the really long link names. I also think the colors are too dark, but that's more personal preference cause I have an easier time and less strain on my eyes.

There seems to be a lot of "go" buttons in the upper corner too and I wonder if there's a way to make that more minimal.

I'd also get rid of the colored background on what appears to the be the "steps" breadcrumbs. I think you can just let the arrow things stand out on the normal background.

[micah]

>>Not a huge fan of the monster tab menu buttons.
>>I also think the colors are too dark
>>There seems to be a lot of "go" buttons in the upper corner too

Agreed 100% (well, the dark color thing I'm ok with but I could see it being an issue).  Unfortunately, I have no control over the website's new template as it was designed by some marketing firm that our organization is paying at least $250k (probably a lot more now that this project is already a year behind schedule)

>I'd also get rid of the colored background on what appears to the be the "steps" breadcrumbs.
that I do have control over!  the little arrows and background I "borrowed" from elsewhere on the site where they've added such "steps" to the site so I was matching what they've already done.  But I agree and I might drop it. good call.