Release Notes: Sept & Oct 2019

leftquark

Release notes for Sept & October can be found here: https://news.smugmug.com/september-october-2019-product-release-notes-673cfc70d02

bnickeson

Aaron, do you guys have any plans to move the titles and captions just below the image or do you plan on leaving them covering up the bottom of the images?

leftquark

@bnickeson said:
Aaron, do you guys have any plans to move the titles and captions just below the image or do you plan on leaving them covering up the bottom of the images?

At this time there are no plans to shrink the photo so Titles and Captions can fit below the photo. For now 1 line of them will cover the photo with the additional details opening to the left. We'll continue to monitor feedback and can react as needed.

bnickeson

Well then consider this my feedback. Text and buttons should not be placed over the top of an image on a website devoted solely to featuring images. I spent the last hour looking at 38 other photographer's websites - several hosted by your competitors - and of the ones that had titles and/or captions not a single site had text or buttons overlaying the images. Not one. Nearly all of them featured the ability to scroll down if the text and image didn't fit on the screen. I just don't understand this decision. I'd love for someone to explain the reasoning to me because I'm coming up with nothing.

For panoramas it covers nearly a quarter of the image when there's gobs of space available below the photo, at least at my image size. I know no one will care but god this is frustrating.

leftquark

@bnickeson said:
Well then consider this my feedback. Text and buttons should not be placed over the top of an image on a website devoted solely to featuring images. I spent the last hour looking at 38 other photographer's websites - several hosted by your competitors - and of the ones that had titles and/or captions not a single site had text or buttons overlaying the images. Not one. Nearly all of them featured the ability to scroll down if the text and image didn't fit on the screen. I just don't understand this decision. I'd love for someone to explain the reasoning to me because I'm coming up with nothing.

For panoramas it covers nearly a quarter of the image when there's gobs of space available below the photo, at least at my image size. I know no one will care but god this is frustrating.

FWIW, we agree with you. The initial launch of the new Lightbox had just the title covering the photo, so that we minimized the amount of photo that was covered. But SmugMuggers reached out in droves to tell us that they were unhappy about that -- they wanted ... DEMANDED ... that we add part of the caption back. We asked if they would mind shrinking the photo and with overwhelming response we heard: "No! Keep the photo as large as possible. Put the text on top." So we listened and reacted.

Of course if desires morph over time, we'll be happy to continue iterating on the design to improve on this.

leftquark

Also, the Lightbox is not the place for information to be hidden off the screen. There are different ways to display photos where the information and scrolling is acceptable, but the Lightbox -- the place where you go to enjoy a photo -- shouldn't have the photo enjoyment made more difficult due to additional information. Shrinking the photo, for example, was seen as decreasing the enjoyment of the photo.

Additionally, usability tests show that when you hide information off the screen, especially with such a big photo, people don't even realize there's more information there. Our design where the Photo Details expands to the left of the photo was based on a number of factors:
1) Most monitors these days are widescreen, where there's space to the left/right of the photo, but no space underneath it. Placing the Title/Caption to the left of the photo, uses up empty space that would have otherwise been unused.
2) People read left-to-right (for most languages), so placing the Title / Caption to the left, with the photo on the right, allows your viewers to enjoy both the story and the photo at the same time. Placing the text below the photo and requiring scrolling meant that folks wouldn't be able to enjoy the photo. It would get cut-off as they scroll.
3) We tested this design with your viewers and comprehension of your stories was drastically increased, which is really what you want in the end of the day.

Allen

Now lets get really serious. Remove that lightbox delay. If you notice, Facebook has no delay and nothing but the photo shows when the mouse is moved off the photo. I think millions more people look at their site then Smugmug. So most everyone should be used to that.

bnickeson

Thanks. If true, "We asked if they would mind shrinking the photo and with overwhelming response we heard: "No! Keep the photo as large as possible. Put the text on top." So we listened and reacted" those users need to be smacked upside the head with their monitors (I kid, slightly). You can sacrifice a 5% reduction of your image size for the photo information and buy buttons on bottom. I bet if those users were running a gallery and they put the painting title and artist's statement completely hiding the bottom of the painting they'd be fired in a hurry.

@leftquark said:
Also, the Lightbox is not the place for information to be hidden off the screen. There are different ways to display photos where the information and scrolling is acceptable, but the Lightbox -- the place where you go to enjoy a photo -- shouldn't have the photo enjoyment made more difficult due to additional information. Shrinking the photo, for example, was seen as decreasing the enjoyment of the photo.

This is an interesting statement for a couple reasons. One, is obviously many people will argue that having text and buttons over an image would reduce the enjoyment of a photo more than a 5% area reduction. But if photographers want to smother people with their images that's their prerogative. Two, you are exactly correct that the lightbox is the place to go if you want to enjoy the photo - possibly even at full size - without other distractions. The issue becomes that with Smugmug's current site structure, there is no opportunity to view the photo (and title/caption) within the context of the user's website design prior to viewing it in the lightbox. What Smugmug really needs - and I lobbied for this three or four years ago - is an image landing page.

For example, take a look at virtually any professional photographer's website. When an image is clicked starting at the gallery page, it almost always follows the structure: Gallery Page -> Image Landing Page -> Lightbox (or enlarged photo view). The image landing page contains the photographer's usual site template (i.e., header, menu, footer, etc.), the image is fairly large taking up a good portion of the screen, and it has the photo information below it as well as purchasing information. Then if the photo is clicked again you get a full size view of just the image - nothing more - against what is typically a black background. This is the lightbox. Smugmug's current site structure is to go straight from the Gallery Page to the Lightbox which deprives us of the opportunity to show off the photo along with well-organized pertinent information. I just had this photographer's page opened so I'll use it as an example:

I'm sure I'm just fruitlessly talking to myself on this one, but god it would be a nice option to have an image landing page rather than just going straight to the lightbox. It'd also keep people from trying to bastardize their Lightbox page with CSS into something resembling an Image page.

Jtring

@Allen said:
Now lets get really serious. Remove that lightbox delay. If you notice, Facebook has no delay and nothing but the photo shows when the mouse is moved off the photo. I think millions more people look at their site then Smugmug. So most everyone should be used to that.

Some of this can be done in user CSS. I'm not in a position to work out all the the options, but here's what I have on my site. The following hides the overlay title/caption hides except when the mouse is hover over it. I've chosen to set the controls (nav bar, arrows, close button) to be always on. The buy button off: Buy Button Style = Icon in the very well buried lightbox control dialog.

/* AUTO HIDE */

/* Special handling of auto-hide.  Auto-hide is set to be on, but without 
special code, that would apply to the nav bar, controls and photo buttons bar
in both "default" and "slideshow" lightbox modes ... with a delay.
This produces a somewhat different behavior. 2019-10-04.

In regular lightbox mode (not the slideshow) always keep the vertical nav bars and the controls -- 
but not the photo buttons bar with the overlay caption/title -- visible.
Note most things can be be set to have full opacity, but disabled buttons need a special half 
opacity setting. This doesn't apply to slideshows.  There the nav bar and controls still auto hide. */
.sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="default"] .sm-lightbox-v2-hideable:not(.sm-lightbox-v2-photo-buttons){
  opacity:1;
}
.sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="default"] button.sm-lightbox-v2-hideable[disabled] {
    opacity:0.5;
}
/* In both regular and slideshow modes, hide overlay caption/title bar except when hovering.  
There's no delay but the transition is smoothed out a bit*/
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons {
  opacity:0;
}
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons:hover {
  opacity:1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

Allen

@Jtring said:

@Allen said:
Now lets get really serious. Remove that lightbox delay. If you notice, Facebook has no delay and nothing but the photo shows when the mouse is moved off the photo. I think millions more people look at their site then Smugmug. So most everyone should be used to that.

Some of this can be done in user CSS. I'm not in a position to work out all the the options, but here's what I have on my site. The following hides the overlay title/caption hides except when the mouse is hover over it. I've chosen to set the controls (nav bar, arrows, close button) to be always on. The buy button off: Buy Button Style = Icon in the very well buried lightbox control dialog.

/* AUTO HIDE */

/* Special handling of auto-hide.  Auto-hide is set to be on, but without 
special code, that would apply to the nav bar, controls and photo buttons bar
in both "default" and "slideshow" lightbox modes ... with a delay.
This produces a somewhat different behavior. 2019-10-04.
 
In regular lightbox mode (not the slideshow) always keep the vertical nav bars and the controls -- 
but not the photo buttons bar with the overlay caption/title -- visible.
Note most things can be be set to have full opacity, but disabled buttons need a special half 
opacity setting. This doesn't apply to slideshows.  There the nav bar and controls still auto hide. */
.sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="default"] .sm-lightbox-v2-hideable:not(.sm-lightbox-v2-photo-buttons){
  opacity:1;
}
.sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="default"] button.sm-lightbox-v2-hideable[disabled] {
  opacity:0.5;
}
/* In both regular and slideshow modes, hide overlay caption/title bar except when hovering.  
There's no delay but the transition is smoothed out a bit*/
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons {
  opacity:0;
}
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons:hover {
  opacity:1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

Thanks, Jim.
Think I'll pass, good but not quite what I need.

1. Wold like to at least see things that will hide quickly, maybe 1 sec., so they know they are there.
2. Not easy to scroll mouse around to find spot of what disappeared.
3. Lost buy button hover

BigRed

@leftquark said:
... The initial launch of the new Lightbox had just the title covering the photo, so that we minimized the amount of photo that was covered. But SmugMuggers reached out in droves to tell us that they were unhappy about that -- they wanted ... DEMANDED ... that we add part of the caption back. We asked if they would mind shrinking the photo and with overwhelming response we heard: "No! Keep the photo as large as possible. Put the text on top." So we listened and reacted.

I think this statement mis-characterizes that conversation a bit. As I followed it, I got the impression that the design was driven by the folks who have narrative-driven sites, and discounted the very different needs of the more image-centric sites (especially the Pros). Another valiant attempt to design a single solution for conflicting requirements. I daresay that a proactive customer survey would have highlighted the need for some sort of caption presentation option in Lightbox settings.

BigRed

@bnickeson said:

This is an interesting statement for a couple reasons. One, is obviously many people will argue that having text and buttons over an image would reduce the enjoyment of a photo more than a 5% area reduction. But if photographers want to smother people with their images that's their prerogative. Two, you are exactly correct that the lightbox is the place to go if you want to enjoy the photo - possibly even at full size - without other distractions. The issue becomes that with Smugmug's current site structure, there is no opportunity to view the photo (and title/caption) within the context of the user's website design prior to viewing it in the lightbox. What Smugmug really needs - and I lobbied for this three or four years ago - is an image landing page.

For example, take a look at virtually any professional photographer's website. When an image is clicked starting at the gallery page, it almost always follows the structure: Gallery Page -> Image Landing Page -> Lightbox (or enlarged photo view). The image landing page contains the photographer's usual site template (i.e., header, menu, footer, etc.), the image is fairly large taking up a good portion of the screen, and it has the photo information below it as well as purchasing information. Then if the photo is clicked again you get a full size view of just the image - nothing more - against what is typically a black background. This is the lightbox. Smugmug's current site structure is to go straight from the Gallery Page to the Lightbox which deprives us of the opportunity to show off the photo along with well-organized pertinent information. I just had this photographer's page opened so I'll use it as an example:

I'm sure I'm just fruitlessly talking to myself on this one, but god it would be a nice option to have an image landing page rather than just going straight to the lightbox. It'd also keep people from trying to bastardize their Lightbox page with CSS into something resembling an Image page.

Interesting proposal. Some of SM's older, non-collage gallery styles come closer to delivering this user experience than the newer (more popular?) collage styles do. For example, the Smugmug style displays a grid of thumbnails AND one enlarged image with its title/caption & info popup, in a single view, which clicks through to the Lightbox. I think the current challenge grew out of the design of collage gallery styles which reduced the amount of image text info that could be presented within the gallery -- and stripped out HTML text formatting that could enrich that content. So the Lightbox was forced to take up the slack in presenting narrative info, and thus diluted its purpose as an optimized image view. A good solution might be to implement an "image landing page" experience as you describe, for the gallery styles that constrain narrative-centric sites. Given the existing options, my own personal choice is to stick with Smugmug and Journal gallery styles, displaying formatted captions, and to hide everything but the image in the Lightbox (one less visitor click per image than a "landing page" flow).

Edited for clarity.

Jtring

Would having the lightbox open with the photo details showing serve as an image landing page? A click on the image then closes the sidebar. A little user CSS then could hide the overlay title and caption to produce a clean image display. I hadn't though about the issue the way you presented it, but there certainly are three different functions here: seeing the flow of all the pictures, seeing a single picture with its full story, and seeing just that image for maximum visual impact. The only issue with the current design may well be that the order a viewer goes through is non-optimal: gallery --> lightbox --> image landing page (lightbox with photo details). I'm thinking that with the option to change of default lightbox display, the flow could become gallery --> image landing page (lightbox with photo details) --> clean lightbox, with options for flow patterns like gallery --> landing page --> buy or gallery --> landing page --> share by selecting other sidebar buttons.

Later note: Please pardon all the typos. I think I've got 'em now.

leftquark

@bnickeson said:
This is an interesting statement for a couple reasons. One, is obviously many people will argue that having text and buttons over an image would reduce the enjoyment of a photo more than a 5% area reduction. But if photographers want to smother people with their images that's their prerogative. Two, you are exactly correct that the lightbox is the place to go if you want to enjoy the photo - possibly even at full size - without other distractions.

I agree with ya here -- but we try to listen to all of you and the SM communities voice rules. When we launched LB we kept anything on top of the photo minimal but the outcry of "bring back captions on top of the photo!" was overwhelming. I still believe that it's just a case of people not giving new things a chance, and they would have realized it was an improvement, but SHRUG, we want to react to the thing y'all are saying.

@bnickeson said:
For example, take a look at virtually any professional photographer's website. When an image is clicked starting at the gallery page, it almost always follows the structure: Gallery Page -> Image Landing Page -> Lightbox (or enlarged photo view). The image landing page contains the photographer's usual site template (i.e., header, menu, footer, etc.), the image is fairly large taking up a good portion of the screen, and it has the photo information below it as well as purchasing information.

I can find a number of examples that don't go to an Image Landing page (Zenfolio, Shootproof, Pixieset, to name a few) -- the only ones that actually do tend to be social sharing sites like Flickr and 500px. But we don't want to do things just because other photo sites do that way. Their customers may be different, they may have different needs, and I have no clue the competency of their design and user experience teams. We spent a great deal of energy with our research and design teams making sure we first brokedown and understood what outcomes folks are trying to achieve, and then developed the experience based on trying to optimize to those outcomes.

SmugMugers and their visitors overwhelmingly told us that they prefer first to enjoy the photo, and then if they want, to read the story. Many photos even lack a story written by the photographer, and your visitors typically don't care about what aperture, ISO and shutter speed the photo was taken with (note I say typically, since you may have an audience of photogs who do, but most SM visitors aren't other photographers).

@bnickeson said:
I'm sure I'm just fruitlessly talking to myself on this one, but god it would be a nice option to have an image landing page rather than just going straight to the lightbox. It'd also keep people from trying to bastardize their Lightbox page with CSS into something resembling an Image page.

@Jtring said:
Would having the lightbox open with the photo details showing serve as an image landing page?

I'm always here listening (that's my job!)

One day in the future (not the near future if I'm being honest) I'd like to have a setting that lets you choose which "mode" the Lightbox opens into. Then you could launch straight into "Image Landing Page" (aka Photo Details) mode.

leftquark

@BigRed said:
I think this statement mis-characterizes that conversation a bit. As I followed it, I got the impression that the design was driven by the folks who have narrative-driven sites, and discounted the very different needs of the more image-centric sites (especially the Pros). Another valiant attempt to design a single solution for conflicting requirements. I daresay that a proactive customer survey would have highlighted the need for some sort of caption presentation option in Lightbox settings.

We developed this with all of our customers in mind and included them in both the research and beta testing. The research actually skewed a little bit more towards the Pro side of customers since they respond to our outreach more frequently. Story tellers loved it because it improved the experience for telling that story; and Pro's loved it because it kept things cleaner and more obvious for buying. They also told us that while they didn't always tell a story, the new design would make them more likely to write one. Pair that with visitors who told us they're more likely to purchase a photo when there's a story, it was a win-win. We're seeing both: more photographers are adding titles/captions to their photos, and more visitors are purchasing photos.