Advanced peek: new add to cart interface

Baldy

BigWebGuy has been working hard on a better interface for adding to the cart. The goals are:

- To beautify. :tuesday
- To simplify buying more products per item (upsell).
- To provide product descriptions and prices up front.
- To pave the way for providing coupons, packages, and customizable products like books & calendars.

(Don't get too excited about #4 yet! They aren't part of this release. Paving the way are the watchwords.)

- Will eventually enable the cart to handle thousands of items quickly.
- Pros will be able to see their prices and base prices together.
- You can see file numbers (not shown in this screenshot).

This is step #1, and the cart itself will be step #2. The interface for buying multiple photos at once is a later step.

Why are we showing this to you now? Because we don't want to blind-side you with changes so critical as these. Our hope is to release this piece soon, but if there are gotchas we can delay.

Gotcha: we're still working on the lower left (this photo, all photos, the size of buttons, etc.)

Screen shot below. Your thoughts.

Thanks!
Baldy

onethumb

It probably goes without saying, but the wording and products are from our internal test server and don't represent what the cart will say when it's actually live.

Things like "Ben01" and "LEELEE" aren't real products, for example. (Ben and Lee are two of our employees who created bogus products to test things). "Common" and "Digital" aren't likely to remain as the headings for types of products, since that's confusing, etc.

Mostly what we're looking for is feedback on the layout and usability, not wording.

Thanks!

dogwood

It's a step in the right direction, least that's my opinion.

I'm not sure the little crop icon next to print sizes will make sense to folks who don't use photoshop on a regular basis though-- just sort of looks like a weird square with a line through it.

Otherwise, I'm all for updating and improving!

DavidTO

Looks great.


I'd love to see what it looks like when you're buying multiple photos.

jfriend

Some UI feedback
Here's my first reaction to the UI:

Pluses:

• It's a massive improvement to get to specify what you want to buy right after you hit the buy icon, rather than putting a picture in the cart and then later assigning to it an actual product.
• It's awesome to be able to see prices easier (see below, I think you need to go even further on that)
• A separation of "prints", "merchandise" and "downloads" seems logical and should be clear to most customers.

Minuses or Questions:

• I wish there was a better way to solve the size/finish combinatorials with different pricing than listing them all as separate products. It really complicates the visual aspects of picking the right size you want. In reality, users most often think about size first, then finish. Many users may have a preferred finish and just always want to order that. This UI forces them to always see all finishes and those choices really get in the way of seeing the forest through the trees for just seeing the size choices and picking the right size. I recognize that this is a hard UI problem, but I think it could be better than it is here. One possiblity would be to just list each size on it's own line with a single price display if all finishes cost the same or a price range if the finishes have different costs. You could then have a drop-down for finish that showed the different prices of the different finishes. Ideally a user could somehow specify their favorite finish (maybe the last one chosen) which would become the default for future orders.
• Why are there two prices in the "Cost ea." column? That doesn't make any sense to me. A product has only one cost each, right?
• The - and + signs in the Qty column don't make sense to me. They look like they would have something to do with adding or removing money from your total. If they are supposed to be ways to increase or decrease the qty by clicking, then why are you inventing a new UI concept for that rather than using something familiar to Windows and Mac users already (a common spinner control).
• It sounds like you aren't done with this part yet, but the "Common", "Digital" and "Specialty" arrangements of size have always been confusing to non-techy folks. They don't know what any of those mean. I'd love to see the customer offered an easy way to see the sizes that offer the "best fit" with minimal or no cropping. So, if it's a 2:3 image, you'd see 4x6, 8x12, etc... If it's a 4:3 image, then the sizes that match that best would be featured. You could still order the other sizes, but the customer would be encouraged to order one of the "best fit" sizes. This would/could also cut down on customer cropping errors and would certainly help customers get better pictures.
• I agree with an earlier poster that the crop symbol will not be known or understood by people who don't use graphics programs. My mom or sister would have no idea what that means. I know what the symbol stands for, but I don't even know what it means in this context. Does it mean cropping is required for this size? Does it mean I need to specify a crop for this order line? Does it mean I've already specified a crop? Does it mean to click here to specify a crop? I have no idea what it means. How will the user specify a crop for a particular size they order in this interface? I don't see it anywhere.
• I think you need to make a way for a customer to see prices without being forced to hit a "buy" icon. People want to know how much something costs before they decide to buy. I know that you can cancel out of buying if you don't like the price, but it's a psychological barrier that makes you a lot less likely to ever hit the buy icon if you don't know how much it costs. Wouldn't it be great to have a "prices" icon that would give you a list of all the prices (and let you buy) without the psychological challenge of thinking you have to decide to buy before seeing prices. I've even seen camera sites that claim they aren't allowed to advertise the price, but they show it in a floater when you hover over a certain area. Even that is better than not showing it at all.
• It's not clear to me what hitting the X in the upper right will do. Does that cancel my changes? Accept my changes? Does that do the same thing as the "Continue Browsing" button in the lower left?

Allen

I think there are too many entries. how about combining the finishes?
I would also think most would probably prefer to just type in a quantity.

jfriend

Allen wrote:

I think there are too many entries. how about combining the finishes?
I would also think most would probably prefer to just type in a quantity.

I want to see this problem fixed too because listing each size/finish combination makes the whole UI look massively more complicated than we want, but the design challenge is that different finishes can have different prices so that has to be solved for too. I myself would prefer a drop-down for the finish that could list the price of each finish and would have a cleaner look.

DavidTO

It's definitely a trade off. Pull downs are slower, especially for lots of clicks. Radio buttons are easy peasy, but clutterier.

jfriend

DavidTO wrote:

It's definitely a trade off. Pull downs are slower, especially for lots of clicks. Radio buttons are easy peasy, but clutterier.

I get the point, but that's only an issue if you have to set it on every single image. I'd like to solve that problem first, so the one-clickness of the radio isn't as important. Also, the radio has a hard time showing the price for each finish without getting even more cluttered.

My experience has been that a given user often orders most (if not all) prints of the same type to be of the same finish. In my event photography, I see lots of orders like this: I want these 30 images in 4x6, these four in 5x7 and these two in 8x10. They always pick the same finish for the 30 4x6 images and it's a bummer if they have to manually set the finish on each image. I'm not saying that some people don't intentionally order prints in the same order with different finishes, but that it's more common to just decide which finish you like and order that way.

So ... I think that means that the best way to approach this is to allow a user to have an intelligent default (per order or per orderer) so that they don't have to constantly pick a finish on every image. Not only would it save time, make things seem simpler and improve the visual interface, but it could also cut down on mistakes where the customer forgets to specify the finish they wanted.

This is a long way of saying that I'd rather solve the problem of having to set the finish on every single image so that a drop-down isn't a burden on anyone and can make it much easier to show the price for each finish and improve the cluttered look.

renstar

jfriend wrote:

This is a long way of saying that I'd rather solve the problem of having to set the finish on every single image so that a drop-down isn't a burden on anyone and can make it much easier to show the price for each finish and improve the cluttered look.

I second the idea that something needs to be done to the interface for selecting the finish.

Moreso, I would like to see a somewhat structural change in the cart itself. I hate that I have to pick the crop more than once if I decide to get the same photo more than once, just a different size (same aspect ratio) or different finish. When I choose a crop, it should apply to all prints of the same aspect ratio, or at least give me the choice to do so.

Lastly, an issue with the image above (and the current cart actually).. If you arn't going to add some sort of radio buttons or list boxes, please make sure that the finishes are in the same order for all print sizes. I've ordered the wrong finish once (and almost done it more than once) because they vary in order. Looking at the example above, for the 4x6 it goes Matte, Lustre, Gloss. For the 5x7 it goes Gloss, Matte, Lustre. For the 8x10 it goes Luster, Gloss, Matte.

In the current cart, it goes Gloss, Matte, Lustre for 4x6 and 8x10 and it goes Lustre, Matte, Gloss for 5x7 and 8x12.

-Russ

sellis

filenames in the cart???!!!
Please tell me this feature is a definite! If there is ONE thing that I don't like about SM, it's that I can't see what the file name is in the shopping cart. It's been driving me crazy fulfilling customer orders (I offer a print credit to the bride and groom).

You say there's a possibility of offering books in the future? PLEASE consider what I call proof books of contact sheets spiral bound with a cover page. Mpix and Printroom offer them and I had just started offering them before I switched to SM. That would be great!

When will file names start appearing?

{JT}

You can see filenames now if you are a) the owner of the photo and b) have them turned on for that gallery

sellis wrote:

Please tell me this feature is a definite! If there is ONE thing that I don't like about SM, it's that I can't see what the file name is in the shopping cart. It's been driving me crazy fulfilling customer orders (I offer a print credit to the bride and groom).

You say there's a possibility of offering books in the future? PLEASE consider what I call proof books of contact sheets spiral bound with a cover page. Mpix and Printroom offer them and I had just started offering them before I switched to SM. That would be great!

When will file names start appearing?

sellis

{JT} wrote:

You can see filenames now if you are a) the owner of the photo and b) have them turned on for that gallery

Not in the shopping cart.

Cindy

sellis wrote:

Not in the shopping cart.

I Agree... Adding the ability to see filenames IN the cart is extremly important to me also.
NOTE: You can not currently see the filenames IN the shopping cart, no matter what.

photogmomma

Everybody chant with me...

PACKAGES
PACKAGES
PACKAGES

COUPONS
COUPONS
COUPONS



I can't WAIT to see these things implemented! I understand "paving the way", but at least it's looking sooner! This will be HUGE for me!

Thanks! Can't wait to see what's next....

photogmomma

Actually, because I ONLY offer lustre for my customers, the options are fine. But for myself, I'd love to just have a single drop down that populates that finish. I am not a fan or glossy or matte so I rarely order those....

Just my 2¢

Baldy

Great feedback, as always. We have so much respect for jfriend's opinions, I printed this thread out and read it to everyone over lunch as we debated.

BigWebGuy has been re-working some of it as a result of the feedback and I don't have a new screenshot yet, but maybe in a few days.

The multiple-finish issue is a big problem. We get tens of thousands of them. And pull-down menus are tough on performance.

One thing we've considered is dropping matte as a finish... If we got lustre prices in line with gloss, maybe it'd fly? Some pros price all their stuff in matte exclusively, however.

But what BigWebGuy is doing now is adding filters as checkboxes on top to turn off the display of finishes you don't want to see. Maybe we can default to off for matte.

Thanks,
Baldy

LiquidAir

While we are throwing things out there, I'd like a way to feature the products that match the aspect ratio of the source. So, for instance, if I crop a shot to 2:1, I'd like 4x8 and 10x20 to float to the top of choices.

bwg

LiquidAir wrote:

While we are throwing things out there, I'd like a way to feature the products that match the aspect ratio of the source. So, for instance, if I crop a shot to 2:1, I'd like 4x8 and 10x20 to float to the top of choices.

The cart already indicates what products will require cropping but in addition to the filter for finishes, there will be a filter for products that require cropping.

jfriend

bigwebguy wrote:

The cart already indicates what products will require cropping but in addition to the filter for finishes, there will be a filter for products that require cropping.

How does the cart indicate what products will require cropping? And, are you talking about the current (in production) cart or the screen shot of the new cart in this thread?

bwg

jfriend wrote:

How does the cart indicate what products will require cropping? And, are you talking about the current (in production) cart or the screen shot of the new cart in this thread?

My apologies for that previous post, i wanted to edit what i had written but i was on my iPhone and it was proving to be an exercise in futility.

the new cart will indicate that certain products will need to be cropped by having a note that says "The photo will need to be cropped to buy this item"..or something to that effect. It hasn't been through final wordsmithing yet.

jfriend

Some more feedback

Baldy wrote:

Great feedback, as always. We have so much respect for jfriend's opinions, I printed this thread out and read it to everyone over lunch as we debated.

BigWebGuy has been re-working some of it as a result of the feedback and I don't have a new screenshot yet, but maybe in a few days.

The multiple-finish issue is a big problem. We get tens of thousands of them. And pull-down menus are tough on performance.

One thing we've considered is dropping matte as a finish... If we got lustre prices in line with gloss, maybe it'd fly? Some pros price all their stuff in matte exclusively, however.

But what BigWebGuy is doing now is adding filters as checkboxes on top to turn off the display of finishes you don't want to see. Maybe we can default to off for matte.

Thanks,
Baldy

Thanks for soliciting and listening to feedback. Here is some more thinking to consider.

This is clearly a complex problem which, I think, presents an incredible opportunity for you to do it significantly better than others which should both result in more print sales and be a competitive differentiator versus other services.

The complexity of the problems comes from a full 3-way matrix of images, products/sizes and finishes. Layer on potentially different pricing for each spot in the matrix and the need to specify crop and color adjustments and it's clearly a messy problem.

One of the first approaches I try take is to find a way to make simple things simple while still offering more advanced paths for doing the more advanced things. If common, simple things get polluted by all the complexity needed to do more advance things, the interface will fail for the largest part of the population. I think a mistake that is often made in interface design is to start with the most complex case and design for accomplishing that without optimizing for the more common and simpler cases. By "keeping simple things simple", I don't mean that more advanced things should be hard, but that one shouldn't lose site of keeping simple things simple while enabling more advanced things.

There are certainly different kinds of Smugmug sites and their corresponding customers. For the non-pro users (not trying to make a living off their galleries), I see the following things that should be as simple as possible.

• Order a recommended small size print of every image in the gallery or of selected images in the gallery. In this use case, the customer should not have to find which sizes will match the aspect ratio well, should not have to know about color correction, should easily be able to see prices and should easily be able to select multiple photos for the same product.
• Order a recommended size enlargement of a particular image or of a few selected images in the gallery. In this use case, the customer should be able to easily see how much different sized enlargements cost and should be able to easily see which ones will "fit" better with the subject matter. They probably also need to be able to see how the impact of print bleed area and framing allowances might affect their enlargement or can be planned for in the order/crop since most enlargements are destined for some sort of frame.

If you try to make these two scenarios simpler, you will find that you quickly want to take the current design and make it easier and simpler to do these things:

• Find a well matched size print (largely based on whether it's a 3:2, 4:3 or custom crop image)
• See prices before you hit any button labeled "buy". I still think it would be awesome to have some sort of prices pop-up in the main gallery that encourages people to explore prices without having to feel like they are making a commitment to buying something before they know the prices.
• Not have to see the entire giant matrix of products/sizes/finishes just to select a print size and see approx prices.
• Not have to see or understand true color vs. auto color. This is just extra confusion waiting for the customer to make a wrong choice and significantly complicates the interface. I'm not saying it shouldn't be offered, but it shouldn't be at the top level. Other print services put it in an "options" sub dialog where you go only for more advanced settings.

Some other things to consider.

• Having the crop option present all this "crop", "crop" and "adjust" in a major spot in the primary interface just to change cropping seems like a lot of clutter. It seems like you need one button for "adjust crop" which is going to take you to a sub-dialog where more detailed choices can be offered. Reducing clutter will improve perceived simplicity. It looks like maybe you are moving in this direction in the new cart, but I don't think the crop symbol will work for the whole audience.
• Duplicate is a funny option to have in the cart. "Duplicate" is not the action the customer wants. It's a means to an end where they want to buy something different of the same image. The function should be labeled something more like the task the user is really trying to accomplish, not the means to an end. "Buy other products/sizes of this image" is the actual verb which may need to be shortened to fit in the UI well. I don't see this option at all in the new cart.
• It should be hard to accidentally leave the cart. I think it's highly desirable in ecommerce that once you get a user to the cart, you make it as easy as possible for them to complete their order and as unlikely as possible that they are taken away from the cart when they didn't intend to. For example, now when you click on a thumb in the cart, you are just taken to that gallery. That's not a bad thing in itself (so perhaps you can order more prints), but there are lots of others intentions that might lead you to click there (like trying to change the crop which is indicated in that thumb) and it seems like it shouldn't be that easy to lose sight of your cart. I can't tell what you're proposing for this in the new cart.
• In my opinion, the "quick copy" stuff at the top of the cart is generic and powerful, yet beyond the comprehension of many buyers. Buyers are task oriented, not tool oriented and you make them have to learn some tools in order to figure out how to complete their tasks. In this case, a task might be "set all or selected finishes to lustre" or "change all sizes to 5x7" or "change all color settings to auto color". If you look at what's required to "change all color settings to true color", it's a really odd design and never what you would design for that particular task. In this particular example, you have to first understand how the tool works so you know what precedent actions to take, then set one image the way you want it, then select quick copy/color from a dropdown, then select the image # you previously set, then select "all", then hit apply. Since this option is so brain-dead simple in the first place, wouldn't it be massively simpler to just offer a drop-down menu option to "set all selected items to true color" or "set all selected items to auto color". Nobody would have to learn how any tools work at all. They'd just find the task they want in the actions drop-down and pick it. Changing finish would be another simple task in this way. Mass changing sizes is a little more complicated, but could be done this way. Mass changing crops is a bit problematic without using a reference item as the source, but I'm at a loss to understand when you'd ever mass set crops anyway. I find that bulk crop settings always gets screwed up in ACR. When I want to set a whole bunch of images all the same way in ACR, I always have to remember to uncheck the crop because I never want to apply the same crop to a whole bunch of images. I've got to assume that is usually the case in the Smugmug cart too.

In my experience both with Smugmug and with other print order sites and according to the statistics that Andy cites about how low auto color returns are, it seems like the auto/true color option should be pushed out of the top level interface. It should default to auto unless the site owner has specified that it should default to true and it should only be available at a second level in the UI. As it is now, it only serves to confuse most buyers and more often than not, they probably select the wrong option because of that confusion. This would also allow pros to lock in true color if that's what they want.

Also, for pros, if you combined some real user interface simplicity innovation with packages, coupons and specials, you'd have a pro package that would be hard for any of the competitors to measure up to and would likely drive even more pro sales.

Thanks for listening.

jfriend

bigwebguy wrote:

My apologies for that previous post, i wanted to edit what i had written but i was on my iPhone and it was proving to be an exercise in futility.

the new cart will indicate that certain products will need to be cropped by having a note that says "The photo will need to be cropped to buy this item"..or something to that effect. It hasn't been through final wordsmithing yet.

That'll teach you. I've long given up on trying to deal with dgrin on a mobile device. Heaven knows I've tried many times since I work in the mobile device space and carry internet capable, keyboard equipped devices nearly all the time. The vbulletin layout is just not very friendly for small screens.

LiquidAir

bigwebguy wrote:

The cart already indicates what products will require cropping but in addition to the filter for finishes, there will be a filter for products that require cropping.

Sweet. Is there a way for us to default that filter on in the gallery settings like we can for the auto/true? That would be great, especially when selling art prints where you don't really want to present cropping as an option to the customer.

Andy

jfriend wrote:

The vbulletin layout is just not very friendly for small screens.

yeah but the iPhone is sexy-cool, and you just use your fingers to make the page biggerer - works! I have made a few posts now, including this one

jfriend

Smugmug iPhone view?

Andy wrote:

yeah but the iPhone is sexy-cool, and you just use your fingers to make the page biggerer - works! I have made a few posts now, including this one

OK, I've got to ask the question. We now have iPhone sightings in Smugmug Virginia (bigwebguy) and Smugmug New York (Andy) and you just know there has to be at least one (probably several) at Smugmug HQ.

So ... at the risk of contributing to the hijaacking of this thread, is there going to be an iPhone-optimized display style for Smugmug that is optimized for the screen size on the iPhone, is automatically served on that user agent and is fully tested and certified with iPhone's Safari?

bwg

LiquidAir wrote:

Sweet. Is there a way for us to default that filter on in the gallery settings like we can for the auto/true? That would be great, especially when selling art prints where you don't really want to present cropping as an option to the customer.

Liquid, the setting will be cookied for the user, but we dont have plans to offer it as a gallery setting at this time. However you can prevent customers from buying cropped print now by not offering those sizes for sale.

bwg

jfriend wrote:

OK, I've got to ask the question. We now have iPhone sightings in Smugmug Virginia (bigwebguy) and Smugmug New York (Andy) and you just know there has to be at least one (probably several) at Smugmug HQ.

So ... at the risk of contributing to the hijaacking of this thread, is there going to be an iPhone-optimized display style for Smugmug that is optimized for the screen size on the iPhone, is automatically served on that user agent and is fully tested and certified with iPhone's Safari?

I know {JT} is playing around with something in his spare time, but Safari on the iPhone has a non-standard event model so it makes some of the advanced UI features that we would like to implement a bit difficult (how do you drag and drop on the iPhone for example?) and we're not interested in designing multiple UI's for different devices. It's hard enough now with the "standard" browsers.

LiquidAir

bigwebguy wrote:

Liquid, the setting will be cookied for the user, but we dont have plans to offer it as a gallery setting at this time. However you can prevent customers from buying cropped print now by not offering those sizes for sale.

At least with the current system, setting that up is a hassle. What I have done is create some dummy galleries so I can store the price settings for each aspect ratio so I don't have to type them in for each individual photo. However with the current cart interface I finally gave up on that because the cart interface is really akward when only a few products are enabled. The wierdest one is that 8x10 and 16x20 are considered common prints, but 4x5 is in the the other prints category. The cart then defaults to 8x10 and my customers have no idea how to find the 4x5 print size. Hopefully the new interface will make that work better.

BeachBill

Baldy wrote:

But what BigWebGuy is doing now is adding filters as checkboxes on top to turn off the display of finishes you don't want to see. Maybe we can default to off for matte.

Also keep in mind those of us who only offer one finish. Any options to select a finish should be hidden in this case otherwise you might confuse the customer.

iklimon

Finishes

Allen wrote:

I think there are too many entries. how about combining the finishes?
I would also think most would probably prefer to just type in a quantity.

I'd rather be able to dump a finish completely. For example, I do not even make glossy or matte available for sale.

Packages packages packages.