Clicking on the arrow on a thumb is a very good and intuitive feature!
I strongly disagree. To sacrifice one or two thumbs on a page just for navigation, when there is a set of radio buttons underneath that do the same job discretely yet effectively, and without reducing the number of thumbs that can otherwise be displayed, just doesn't make sense to me.
I hated the pagination change too at first. But I didn't like the buttons either, or the < & > of old. So for the added intuitiveness and clean-ness, I see it as worth the loss of 2/24 thumb spots (My old 15" laptop). Screens will only grow and/or become pixel denser so the loss will decrease with time.
I've never seen more than 15 thumbs, whether on my 13" Macbook or my 30" Mac Pro Cinema screen, and 2/15 is too much overhead. But to use a complete thumb space to contain just an arrowhead doesn't make a lot of sense, whatever the ratio, and also looks plain ugly IMHO!
Something that is still missing is nav for the images. There is no clean way to go from image to image without having to move the mouse, as there is in lightbox view or in the standard gallery view as it exists now.
This may not help for everyone, but the arrow keys on the keyboard (forward / back, not up / down) can be used in the new design to move to the next or previous photo. (I know, that doesn't help on a device without a keyboard, still thought it was worth mentioning...)
Just thought I'd give my comments on the new design, on the whole its a big improvement on the existing Smugmug look, I've always found the standard pages to be very cluttered and don't show photos their best. The new look is neater and gives more room to the main photo. The one thing I don't like is the row of dots representing the thumbnail pages, this is just meaningless, perhaps it would be better just to replace the dots with numbers, at least most visitors would guess the numbers would represent pages. I agree with others that the page turning thumbnails should match the other thumbnails on the page and not crop the picture.
Paul
I strongly disagree. To sacrifice one or two thumbs on a page just for navigation, when there is a set of radio buttons underneath that do the same job discretely yet effectively, and without reducing the number of thumbs that can otherwise be displayed, just doesn't make sense to me.
I don't care about sacrificing two thumbs if the navigation becomes more clear. I'm still not sure if visitors will associate the radio bullets with the page navigation, how neat and clean they are.
Anyway, SmugMug has to do something to make page navigation more clear and obvious.
In the past (and how things currently are), people still seem not to "see" how to navigate through the pages -- how odd this may seem for us.
You and I know how to do it but occasional visitors don't. Visitors seem to have a narrow and focused view on the site...
I realized this a lot of months (years) ago when I often uploaded hundreds of pictures to my galleries and notified some customers, family members etc. of the uploads. When I checked my Statcounter stats, I noticed that some of the notified persons just viewed 12 photos (even if I uploaded hundreds of photos).
I did not know why and it took me months and months to figure out why by analyzing my Statcounter stats more closely.
I noticed that people with 1024x768 monitors usually only looked at 12 pictures and then left my web site.
When I noticed this, I contacted the persons that I knew (and of which I have their IP address) and asked why they only looked at 12 pictures even if I had uploaded hundreds of pics. They all responded that they only found 12 pictures (i.e. 1 screen/window).
They did not proceed further.
That's why SmugMug need to make it more clear that there are more pictures than visible on one screen. The arrows are perfect to make this clear.
The square thumbs are another story, entirely, and I don't care, if only it's clear that a gallery contains sometimes more photos than is visible. Just my point of view...
That sound strange, have you turned off stretchy in customization? I'm on 1440x900 and I get 24.
Malte
I'm seeing the same behavior but it seems to vary depending on the browser. In Chrome and Firefox (after clearing cookies and cache) I usually see only 16 in full-screen mode on my laptop (1920x1080). Once in a while it will show 20 (5 wide, 4 tall) but usually it only shows 16. In IE it shows 25 even when not in full-screen mode. The only customization I have currently is banner/navbar stuff so I doubt it's that. Using the old style it does show 25 for me in all browsers in full-screen mode.
This may not help for everyone, but the arrow keys on the keyboard (forward / back, not up / down) can be used in the new design to move to the next or previous photo. (I know, that doesn't help on a device without a keyboard, still thought it was worth mentioning...)
Thanks, that's nice but it needs to be self-explanatory. I'm not going to type "use the arrow keys to go from picture to picture" every time I post a gallery link.
Let me start with the fact that I am happy overall with the current Smugmug after extensive customizations on my part. Secondly I think this feedback loop you guys have created with your customers is second to none. Also I think it completely makes sense from a business standpoint to modernize things from the look and feel to way things work under the hood. I'm a software engineer. So I get that. It's time has definately come! I'm just going to focus on overall look and feel from an end user's perspective with my take things thus far. I'll include some recommendations. So here is what I have currently on a 1080p monitor:
And here is the new look and feel:
Ok, so in some ways the look is definately more refined, slicker, with more modern looking widgets. Not sure I like the dots for additional pages. But maybe numbers could be an alternative option.
The biggest thing that I noticed which I find annoying is the layout in relationship to the primary image. I think it is still overpowered and obscured by the thumbnails. Its pushed to the right and only taking up half the page at most. From an artistic standpoint this dimishes the primary subject matter with clutter - in this case too many thumbnails to the left. One's eye doesn't really know what to focus on - the small thumbnails or the image. This is like composition in photography and the rule of thirds. It needs to be applied.
Secondly the thumbnails have actually shrunken down from 150x100 to 100x67. And I thought they were too small before on more modern larger widescreen monitors.
Here are my suggestions:
1. Make the main image the primary subject always! Give it at least 70% of the real estate on screen. Never half like this regardless of the theme.
2. Provide larger thumbs for higher resolution monitors, especially in the higher level gallery views (showing all one's galleries). No need to squint there or here. Also there is too much wasted space between these smaller thumbs.
3. Consider a newer style thumbnail layout than the older school excel spreadsheet look which just gets in as many as possible using up the rest of the real estate. Here one cool example and there are other options as well. While I was with Zenfolio I really liked their refined layout. Smaller square thumbs in a box to the right or left of the image works. In this case smaller and tightly placed together looks slick. And it doesn't clutter the page or crowd the primary subject matter. There is something else cool which can be done to improve this even more which I also used with Gallery 2 = rollovers. Google uses this same technology right now for their image pages. If you have a smaller icon just roll over it and it enlarges. Yet the larger images don't hog so much real estate on the page this way.
4. Give the user the option of placing the primary image on the left. Our eyes naturally read left to right. So its nice if the main image is seen first.
Here is an example from my friend's gallery at Zenfolio. Notice the lack of clutter and how natural/easy it is on the eye to focus on the primary subject in this case:
In comparing this layout to the one above there is no question what the main subject matter is - no crowding or competition for one's visual attention.
Another very cool thumbnail layout is a collage pattern which was done by a friend of mine who is a graphic aritist, professional web designer and world class photographer - Jack Brauer. He is also one of the most sought after designers for professional photographers custom websites. BTW, He may be worth consulting for some custom new themes. Anyway this collage layout includes thumb images of various sizes not overlapping all on one pages. Though the algorithm to lay that one out is definately more complex than the standard table layout it is very high on the cool, aritstic factor.
Lastly here are some screenshots of how much nicer larger thumbnails (290x193) can look first on the high level galleries page. The goal is less clutter with more focus on the image galleries themsleves:
Finally here is an example of larger thumbs (175x138) which can look really good in individual galleries:
The key here is a subdued, stylish background which allows the images themselves (from thumbnails to larger ones) to really pop off the page. No tiny thumbs or gimmick buttons needed.
Hopefully this gives you some food for thought.
Thanks for your continued efforts in making a great photo hosting site even better.
I like where smugmug is going with the customizations and I agree, less clutter and less technology offered to customers is good. Keep it simple. One major feedback from my customers is that its difficult to purchase something. The shopping cart is very complicated and the whole experience is lost when entering the shopping cart. Perhaps I can offer to "click to buy" a set number of products that don't even appear in a shopping cart but appear as a callout or adjacent to each photo.
Perhaps the shopping cart can be "smart" and only allow for products that no cropping is needed - this is 1 less thing for the customer to worry about....
I used to be apart of a framing outfit and as I worked with framers, printers and then the customers, I was finding that customers really don't know what they want. I can talk in person, but if this is a eCommerce website, one primary purpose for me is to showcase and sell products.
For others, its to showcase a bazillion family photos, but should allow for different audiences for sure.
The arrows on the thumbnail are REALLY ugly and not intuitive at all. What was wrong with text saying "page" with arrows on either side? Text is intuitive, icons are not.
The big title takes way too much space. In the old version, it's part of the breadcrumb.
Why the "home" icon in the breadcrumb? It serves no purpose. What's with icons anyway?
I did ask for a toolbar at the top before but the "Edit" button is still below the picture. Why don't you put it in the toolbar?
...The biggest thing that I noticed which I find annoying is the layout in relationship to the primary image. I think it is still overpowered and obscured by the thumbnails. Its pushed to the right and only taking up half the page at most. From an artistic standpoint this dimishes the primary subject matter with clutter - in this case too many thumbnails to the left. One's eye doesn't really know what to fous on - the small thumbnails or the image. This is like composition in photography and the rule of thirds. It needs to be applied.
Secondly the thumbnails have actually shrunken down from 150x100 to 100x67. And I thought they were too small before on more modern larger widescreen monitors.
Here are my suggestions:
1. Make the main image the primary subject always! Give it at least 70% of the real estate on screen. Never half like this regardless of the theme.
2. Provide larger thumbs for higher resolution monitors, especially in the higher level gallery views (showing all one's galleries). No need to squint there or here. Also there is too much wasted space between these smaller thumbs....
(that quote was from Derek in post # 313)
I'm so glad you mentioned all this, Derek. I've got exactly the same beef with the new design. I haven't been able to play with buttons & navigation much yet at all, but I've seen enough of the look itself that I just absolutely know I would be extremely unhappy with the change if these two major items are not addressed. I simply hate the tiny thumbs. When they are at all smaller than they are in the old style, they're so useless that there's really no reason to even display them... honestly. I have fantastic eyesight, and even for me, they do nothing. A black space would tell me as much about what I can expect to find in that gallery.
Yes, I hear some people saying if thumbs are big, people won't look at as many large images. That may be true if thumbs are 200 x 200. But what happens with tiny little thumbs such as this new style has is that no one has any motivation to look at any of the large photos at all! I want the thumbs to at least be large enough to draw me in, like Derek's first sample (old) gallery does. But the tiny ones just make me want to go to another website entirely. That next gallery doesn't draw me at all, except for the main photo. And small thumbs are imho ugly, very very cluttery (more tiny objects to distract us on a page) and make it impossible to even tell similar photos apart, such as a gallery of poses of one individual. What's the use? If the disagreement on this is really that strong, and it is, then please just let us choose our thumbnail size. Don't make me have to deal with thumbs tinier than what I already have now-- that's just going in the wrong direction. If I have to make that sacrifice, a good part of my site will feel, to me, ruined. Yes, I'm serious.
As to the size of the main photo: absolutely, it should be larger if we want it larger. I know some people wouldn't be able to display large photos because they've limited their display size to smaller ones. But those who have X3 enabled & provide big enough originals should be able to display large main photos. And yes, the appearance is definitely dramatically improved by being closer to a 1/3 - 2/3 split rather than 50-50.
I wouldn't want the tiny bunch of square thumbs off on one side though either like in Derek's later example. First of all, I rarely use square thumbs & don't want to be forced into that. Secondly, they also are too tiny. Some space between.... yeah. But let's not get crazy, and we don't need to look like every other site in every way. Seeing the comparison between old & new makes me wonder if there needs to be more consideration for spacing of verticals in the thumbs area. Couldn't the spacing be "taught" to move according to vertical/horizontal, so that vertical thumbs wouldn't have so much more space around them than horizontal ones? Maybe that's too complex... just an idea.
I'm so glad you mentioned all this, Derek. I've got exactly the same beef with the new design. I haven't been able to play with buttons & navigation much yet at all, but I've seen enough of the look itself that I just absolutely know I would be extremely unhappy with the change if these two major items are not addressed. I simply hate the tiny thumbs. When they are at all smaller than they are in the old style, they're so useless that there's really no reason to even display them... honestly. I have fantastic eyesight, and even for me, they do nothing. A black space would tell me as much about what I can expect to find in that gallery.
...
As to the size of the main photo: absolutely, it should be larger if we want it larger. I know some people wouldn't be able to display large photos because they've limited their display size to smaller ones. But those who have X3 enabled & provide big enough originals should be able to display large main photos. And yes, the appearance is definitely dramatically improved by being closer to a 1/3 - 2/3 split rather than 50-50.
Yeah, if I could just have those two additons it would be a huge improvement for me. Most things on SM are very customizable which I really like. But thumbnails are not one of them and that significanly limits creative layout options on many of the page types. I know quite a few photographers who prefer larger thumbnails like in the example of Jack Brauer's website above. That is one of the reasons why some feel they can't go with SM right now. So to at least provide larger thumbs as an option would be a big plus in many regards. But yes, please do not force us to use even smaller ones than what we already have. Although I could live with a zenfolio type layout. I really don't like these smaller ones the way they are currently configured. I agree it just winds up being clutter on a page - more of a distraction than something visually appealing.
I've been meaning to type up some of my thoughts, but haven't made the time for it yet. However, I will say that I agree with many of Derek's comments, especially those quoted below:
...I think it completely makes sense from a business standpoint to modernize things from the look and feel to way things work under the hood.
...the look is definitely more refined, slicker, with more modern looking widgets. Not sure I like the dots for additional pages. But maybe numbers could be an alternative option.
I agree with the idea of having interface options -- dots or numbers, as set by the site owner in the gallery settings. I actually like the general style of the dots and arrow thumbnails quite a lot, but realize that others may want a more traditional look. Making this a setting should please (nearly) everyone.
I think it is still overpowered and obscured by the thumbnails. Its pushed to the right and only taking up half the page at most. From an artistic standpoint this dimishes the primary subject matter with clutter - in this case too many thumbnails to the left. One's eye doesn't really know what to fous on - the small thumbnails or the image.
Agreed -- though I think this is a problem with the existing SM design as well.
1. Make the main image the primary subject always!
Agreed.
3. Consider a newer style thumbnail layout than the older school excel spreadsheet look which just gets in as many as possible using up the rest of the real estate. Here one cool example and there are other options as well. While I was with Zenfolio I really liked their refined layout. Smaller square thumbs in a box to the right or left of the image works. In this case smaller and tightly placed together looks slick. And it doesn't clutter the page or crowd the primary subject matter. There is something else cool which can be done to improve this even more which I also used with Gallery 2 = rollovers. Google uses this same technology right now for their image pages. If you have a smaller icon just roll over it and it enlarges. Yet the larger images don't hog so much real estate on the page this way.
4. Give the user the option of placing the primary image on the left. Our eyes naturally read left to right. So its nice if the main image is seen first.
I fully agree with both of these suggestions. I've never really thought about why, but I have noticed that I tend to think Zenfolio sites look much better than SmugMug sites. This is probably a large part of it.
I will try to type up some of my own thoughts as well. Thanks for the work you are doing on this -- I look forward to seeing the direction SM is heading.
We serve 100px thumbs on small resolutions, and 150px thumbs on larger resolutions. Same as ever.
Andy,
You got me thinking when you said that because I have never seen these smaller 100px thumbnails in any browser on any screen like this until now. So I tried the same page in two different browsers, and low and behold there is quite a difference with the new layout. Here is IE 8 at normal (100%) magnification:
These smaller 100px thumbnails are what I saw originally on Firefox 5 as well on my 1080 x 1920 HD monitor. Note also the dwarfed primary image. In this case one could view the higher number of smaller thumbs as the primary subject matter of this webpage with the image on the right as a sidenote. This goes back to one of my requests/suggestions that this image should never occupy less than 70% of the screen area even if surrounded by black background. Otherwise this page says to the viewer gee, look at all my small thumbs, aren't they cool?
Then I tried increasing/decreasing the zoom factor of the browser in FF 5 and SM actually increased the size of the thumbs in one case (not sure of the magnification factor). Take a look at it here:
At this magnification the whole layout moved the primary image to the left (more prominent) and made the thumbnails larger (150px). In this case I think it looks much, much better. Gone is the 50/50 (or less) split. Gone are the miniscule thumbs. Gone is the shrunken primary image. And there is even some space between the primary image and the thumbs - some separation.
This may be just a glitch in the way the new software is determining thumbnail and primary image sizes. But in my case I would never under any circumstance want an image smaller than 150px. Larger than 150px for me would be better. So for this upcoming release maybe that could be a user option, to turn off switching to 100px images or as a minimum increase the threshold to lower resolution monitors (1080 x 768), tablets, etc... And the main image should be larger especially at this resolution. It is the primary subject, not the thumbs. As such allow it its rightful space and breathing room.
Just as a test case I switched back to the older (current) version of SM and the thumbnails did increase back to 150px in IE8 with all the same settings (See #325 below). So yes, there is in fact a difference in the newer version of SM in the way it handles image sizing. For me and the viewers of my website smaller images are not better (unless on a tablet or phone).
You got me thinking when you said that because I have never seen these smaller 100px thumbnails in any browser on any screen like this until now. So I tried the same page in two different browsers, and low and behold there is quite a difference with the new layout. Here is IE 8 at normal (100%) magnification:
You will get lots of thumbs and a smaller main image when the screen is short and wide. That's because Smugmug's algorithm figures out what the largest main image is that will fit without scrolling and then fills in the rest with thumbs. If you the screen is short, then the main image gets limited fairly quickly by the height available so it can't be very large. That leaves the rest of the room for the thumbnails. If you make your browser window not so wide and short, you won't see this. The only other option Smugmug has is to make the main image larger and potentially require scrolling to see all of it or push the toolbar or caption below the bottom of the screen. It's a fine balance here. They are trying to select the largest main image that will fit without requiring scrolling and without pushing important things below the main screen. If that results in a smaller main image, then you get more thumbs.
You will get lots of thumbs and a smaller main image when the screen is short and wide. That's because Smugmug's algorithm figures out what the largest main image is that will fit without scrolling and then fills in the rest with thumbs. If you the screen is short, then the main image gets limited fairly quickly by the height available so it can't be very large. That leaves the rest of the room for the thumbnails. If you make your browser window not so wide and short, you won't see this. The only other option Smugmug has is to make the main image larger and potentially require scrolling to see all of it or push the toolbar or caption below the bottom of the screen. It's a fine balance here. They are trying to select the largest main image that will fit without requiring scrolling and without pushing important things below the main screen. If that results in a smaller main image, then you get more thumbs.
John, I understand what you are saying regarding general changes in sizes based on available space. However I am pointing out the differences between these two releases. Just in terms of thumbnail sizes alone there is really no good reason to shrink them down further on higher resolution monitors. They are not that small in the current release under the same settings/conditions in the same browser (see example below). Secondly, my main point is that the primary image should be the main subject, not the thumbs. So more real estate should be made available for it as a design priority. Looking at the image I posted there is plenty of available room for it on the page to jump to the next larger size up, like the second screen shot demonstrates. The sizing algorithm leans more heavily toward downsizing photos in this release which for me is not a desired direction. I would prefer it to be more generous with both thumbnail sizes and the primary gallery image (ie give up some of the extra padding, border, button, text sizing, frill making the layout more lean). The breadcrumb should be on the same line as the gallery title to streamline things better for example. Also I would always prefer a scrollbar to a dwarfed primary image, as long as the image itself didn't need to be scrolled. The second screenshot above illustrates this.
John, I understand what you are saying regarding general changes in sizes based on available space. However I am pointing out the differences between these two releases. Just in terms of thumbnail sizes alone there is really no good reason to shrink them down further on higher resolution monitors. They are not that small in the current release under the same settings/conditions in the same browser. Secondly, my main point is that the primary image should be the main subject, not the thumbs. So more real estate should be made available for it as a design priority. Looking at the image I posted there is plenty of available room for it on the page to jump to the next larger size up, like the second screen shot demonstrates. The sizing algorithm leans more heavily toward downsizing photos in this release which for me is not a desired direction. I would prefer it to be more generous with both thumbnail sizes and the primary gallery image (ie give up some of the extra padding, border, button, text sizing, frill making the layout more lean). The breadcrumb should be on the same line as the gallery title to streamline things better for example. Also I would always prefer a scrollbar to a dwarfed primary image, as long as the image itself didn't need to be scrolled. The second screenshot above is an example of this.
Derek
I agree. It should show a larger main image in that view. You do have a short and wide window which stresses it though.
I agree. It should show a larger main image in that view. You do have a short and wide window which stresses it though.
John,
Most of my time (too many hours) I spent customizing SmugMug was in removing all the extra clutter/noise/junk/unwanted buttons, etc... that take away from simply viewing and enjoying images. It shouldn't be that difficult for the average user to put together a minimalist, non-cluttered site. It is in fact much simpler at certain places like Zenfolio to do just that, without hundreds of special scripts, tweaks and changes to the original code. I think a large portion of the SM customer base feel the same way - less is more. It really comes back to one simple thing for me. Providing an attractive galley in which to display my images, one which is understated but stylish. WIth that in mind other things including thumbs take the back seat to the featured photo.
So in designing my site I had to back off everything in the way of the main photo. That allows it to achieve its largest size possible given the available screen area. I think the web designer needs to start from there - the featured photo. And work around it. Since most modern screens produced and sold are now widescreen that format has to be considered in this layout. At 1920 x 1080 that still gives the web designer plenty of vertical space to work with. And so the old SM, though not perfect does a pretty decent job of this once completely stripped of all its clutter. In this case the main image is 1024 x 683 with some vertical room to spare:
I am noticing that in all my browsers I am getting odd keyword breaking. For instance in some of my hockey shots I get things such as:
devils, hockey, sharks, nhl, san jose sharks, new jersey devils, martin brodeu
r
The goalies name is Martin Brodeur. I am also noticing that keyword capitalization is being lost still, I was hoping the new version would address the issue.
Regarding the thumbnails as navigation tools, I am having some visual distractions when I use squares thumbnails that do not occur when using original thumbnails. The square thumbnails to some degree hide the navigation change in shape of the first and last thumbnail. Also on some of my images the arrow is not as pronounced just based on the image they are being placed over. Perhaps a shadowed or outlined arrow could help that issue.
You got me thinking when you said that because I have never seen these smaller 100px thumbnails in any browser on any screen like this until now. So I tried the same page in two different browsers, and low and behold there is quite a difference with the new layout.
Hm, I set my browser to 1920x1080 and got the big thumbs:
Hm, I set my browser to 1920x1080 and got the big thumbs:
Interesting, which browser did you use? I'm finding things fluctuate more now depending on the browser. This is comparing IE8 & FF5 on a 1920x1080 screen.
When things are this close I don't think any fluctuation should occur in either image size or layout. A consistant presentation is greatly preferred over hyper sensitive adjustments to number of thumbs and more importantly sizes.
We serve 100px thumbs on small resolutions, and 150px thumbs on larger resolutions. Same as ever.
You can keep saying it's the same as ever, but it's simply not. I've said a bunch of times I get tiny thumbs with the new version & not with the old. I don't even know what resolution you're talking about.... screen resolution?? If so, this is not it, because I can use the same exact screen and get the tiny 100px ones in the new view, while the old view gives me 150px. And I have a screen with decent resolution. Just please believe me that I can tell when the thumbs are tiny... it's pretty obvious if the number of pages drops from 10 to 6 or whatever, let alone the fact that the huge number of thumbs per page is overwhelming the look & is extremely ugly. When I find sites like that, I don't even look at them. It's not worth my while when I can't even see what I may want to look at. You need to start believing that this is happening to a bunch of us & that we really don't want it.... ever. Unless it's a mobile device. Don't let SmugMug force its site owners to put up with these tiny thumbs that they don't want when they have a big beautiful screen for viewing. I have excellent vision, but not all my visitors do. I don't feel like making everyone squint.
Slow but steady improvements. Thanks! It's great to see that you're taking feedback and actively working to placate all sides, or at least as much as reasonably possible.
As for the new navigation, while it did take me by surprise at first, I must admit it's quite clever. And contrary to some feedback here, the dots at the bottom are quite common now for indicating which page you're on (iOS and Android anyone?). I maintain 100px thumbs regardless of which version I use and what my browser width, so I can't comment on that part of the algorithm. Although, when I stretch my browser to about 1400px wide with both designs I do have a very large wall of thumbs and my main image doesn't grow, even after refreshing the page. Just thought I'd throw that out there for potential tweaks.
Looking forward to seeing this continue to evolve. I'm already contemplating a new design for my site to better blend in with this modern look.
John, I understand what you are saying regarding general changes in sizes based on available space. However I am pointing out the differences between these two releases. Just in terms of thumbnail sizes alone there is really no good reason to shrink them down further on higher resolution monitors. They are not that small in the current release under the same settings/conditions in the same browser (see example below). Secondly, my main point is that the primary image should be the main subject, not the thumbs. So more real estate should be made available for it as a design priority. Looking at the image I posted there is plenty of available room for it on the page to jump to the next larger size up, like the second screen shot demonstrates. The sizing algorithm leans more heavily toward downsizing photos in this release which for me is not a desired direction. I would prefer it to be more generous with both thumbnail sizes and the primary gallery image (ie give up some of the extra padding, border, button, text sizing, frill making the layout more lean). The breadcrumb should be on the same line as the gallery title to streamline things better for example. Also I would always prefer a scrollbar to a dwarfed primary image, as long as the image itself didn't need to be scrolled. The second screenshot above illustrates this.
Derek
Precisely. I'm not hearing or seeing any evidence for a good reason to shrink the thumbs under any normal conditions, except mobile or very small devices. And as far as the gallery title, we're jumping from un-boldened gallery titles that are part of the breadcrumb to a much-too-great degree (in those very newest styles we just got a year or so ago I mean), to large bold gallery titles. A happy medium would be fantastic: Gallery titles that are at least on the same line as the breadcrumb trail, yet boldened and maybe even italicized so as to stand out. If they're long, they could go to a second line. But as they are now in this new iteration, they just take up too much real estate for no good reason that I can see. I do hope we can steer clear of scrolling in all but the most severe cases of lack of vertical real estate. Also, in Andy's recent example, a bit less padding between main image and thumbs is needed.
The arrow on the thumbnail, for next page, is really awful. No reason for obscuring the thumb is clear to me. The arrow could be tucked right to the bottom of the thumb & be semi-transparent or any number of better solutions than the white thing. Ack. Lack of page numbers is a real mess too. I often give people page numbers, and 95% of the time they're correct or at least ballpark. (see pages 3 to 5 for photos of Julie, etc.)
Comments
Malte
That sound strange, have you turned off stretchy in customization? I'm on 1440x900 and I get 24.
Malte
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Paul
I don't care about sacrificing two thumbs if the navigation becomes more clear. I'm still not sure if visitors will associate the radio bullets with the page navigation, how neat and clean they are.
Anyway, SmugMug has to do something to make page navigation more clear and obvious.
In the past (and how things currently are), people still seem not to "see" how to navigate through the pages -- how odd this may seem for us.
You and I know how to do it but occasional visitors don't. Visitors seem to have a narrow and focused view on the site...
I realized this a lot of months (years) ago when I often uploaded hundreds of pictures to my galleries and notified some customers, family members etc. of the uploads. When I checked my Statcounter stats, I noticed that some of the notified persons just viewed 12 photos (even if I uploaded hundreds of photos).
I did not know why and it took me months and months to figure out why by analyzing my Statcounter stats more closely.
I noticed that people with 1024x768 monitors usually only looked at 12 pictures and then left my web site.
When I noticed this, I contacted the persons that I knew (and of which I have their IP address) and asked why they only looked at 12 pictures even if I had uploaded hundreds of pics. They all responded that they only found 12 pictures (i.e. 1 screen/window).
They did not proceed further.
That's why SmugMug need to make it more clear that there are more pictures than visible on one screen. The arrows are perfect to make this clear.
The square thumbs are another story, entirely, and I don't care, if only it's clear that a gallery contains sometimes more photos than is visible. Just my point of view...
Luc
I'm seeing the same behavior but it seems to vary depending on the browser. In Chrome and Firefox (after clearing cookies and cache) I usually see only 16 in full-screen mode on my laptop (1920x1080). Once in a while it will show 20 (5 wide, 4 tall) but usually it only shows 16. In IE it shows 25 even when not in full-screen mode. The only customization I have currently is banner/navbar stuff so I doubt it's that. Using the old style it does show 25 for me in all browsers in full-screen mode.
Thanks, that's nice but it needs to be self-explanatory. I'm not going to type "use the arrow keys to go from picture to picture" every time I post a gallery link.
Let me start with the fact that I am happy overall with the current Smugmug after extensive customizations on my part. Secondly I think this feedback loop you guys have created with your customers is second to none. Also I think it completely makes sense from a business standpoint to modernize things from the look and feel to way things work under the hood. I'm a software engineer. So I get that. It's time has definately come! I'm just going to focus on overall look and feel from an end user's perspective with my take things thus far. I'll include some recommendations. So here is what I have currently on a 1080p monitor:
And here is the new look and feel:
Ok, so in some ways the look is definately more refined, slicker, with more modern looking widgets. Not sure I like the dots for additional pages. But maybe numbers could be an alternative option.
The biggest thing that I noticed which I find annoying is the layout in relationship to the primary image. I think it is still overpowered and obscured by the thumbnails. Its pushed to the right and only taking up half the page at most. From an artistic standpoint this dimishes the primary subject matter with clutter - in this case too many thumbnails to the left. One's eye doesn't really know what to focus on - the small thumbnails or the image. This is like composition in photography and the rule of thirds. It needs to be applied.
Secondly the thumbnails have actually shrunken down from 150x100 to 100x67. And I thought they were too small before on more modern larger widescreen monitors.
Here are my suggestions:
1. Make the main image the primary subject always! Give it at least 70% of the real estate on screen. Never half like this regardless of the theme.
2. Provide larger thumbs for higher resolution monitors, especially in the higher level gallery views (showing all one's galleries). No need to squint there or here. Also there is too much wasted space between these smaller thumbs.
3. Consider a newer style thumbnail layout than the older school excel spreadsheet look which just gets in as many as possible using up the rest of the real estate. Here one cool example and there are other options as well. While I was with Zenfolio I really liked their refined layout. Smaller square thumbs in a box to the right or left of the image works. In this case smaller and tightly placed together looks slick. And it doesn't clutter the page or crowd the primary subject matter. There is something else cool which can be done to improve this even more which I also used with Gallery 2 = rollovers. Google uses this same technology right now for their image pages. If you have a smaller icon just roll over it and it enlarges. Yet the larger images don't hog so much real estate on the page this way.
4. Give the user the option of placing the primary image on the left. Our eyes naturally read left to right. So its nice if the main image is seen first.
Here is an example from my friend's gallery at Zenfolio. Notice the lack of clutter and how natural/easy it is on the eye to focus on the primary subject in this case:
In comparing this layout to the one above there is no question what the main subject matter is - no crowding or competition for one's visual attention.
Another very cool thumbnail layout is a collage pattern which was done by a friend of mine who is a graphic aritist, professional web designer and world class photographer - Jack Brauer. He is also one of the most sought after designers for professional photographers custom websites. BTW, He may be worth consulting for some custom new themes. Anyway this collage layout includes thumb images of various sizes not overlapping all on one pages. Though the algorithm to lay that one out is definately more complex than the standard table layout it is very high on the cool, aritstic factor.
Lastly here are some screenshots of how much nicer larger thumbnails (290x193) can look first on the high level galleries page. The goal is less clutter with more focus on the image galleries themsleves:
Finally here is an example of larger thumbs (175x138) which can look really good in individual galleries:
The key here is a subdued, stylish background which allows the images themselves (from thumbnails to larger ones) to really pop off the page. No tiny thumbs or gimmick buttons needed.
Hopefully this gives you some food for thought.
Thanks for your continued efforts in making a great photo hosting site even better.
Best regards,
Derek
My Smugmug Gallery
Hi
I like where smugmug is going with the customizations and I agree, less clutter and less technology offered to customers is good. Keep it simple. One major feedback from my customers is that its difficult to purchase something. The shopping cart is very complicated and the whole experience is lost when entering the shopping cart. Perhaps I can offer to "click to buy" a set number of products that don't even appear in a shopping cart but appear as a callout or adjacent to each photo.
Perhaps the shopping cart can be "smart" and only allow for products that no cropping is needed - this is 1 less thing for the customer to worry about....
I used to be apart of a framing outfit and as I worked with framers, printers and then the customers, I was finding that customers really don't know what they want. I can talk in person, but if this is a eCommerce website, one primary purpose for me is to showcase and sell products.
For others, its to showcase a bazillion family photos, but should allow for different audiences for sure.
Just feedback....
I like keep it simple for sure.
~Todd
The big title takes way too much space. In the old version, it's part of the breadcrumb.
Why the "home" icon in the breadcrumb? It serves no purpose. What's with icons anyway?
I did ask for a toolbar at the top before but the "Edit" button is still below the picture. Why don't you put it in the toolbar?
borealphoto.smugmug.com
I'm so glad you mentioned all this, Derek. I've got exactly the same beef with the new design. I haven't been able to play with buttons & navigation much yet at all, but I've seen enough of the look itself that I just absolutely know I would be extremely unhappy with the change if these two major items are not addressed. I simply hate the tiny thumbs. When they are at all smaller than they are in the old style, they're so useless that there's really no reason to even display them... honestly. I have fantastic eyesight, and even for me, they do nothing. A black space would tell me as much about what I can expect to find in that gallery.
Yes, I hear some people saying if thumbs are big, people won't look at as many large images. That may be true if thumbs are 200 x 200. But what happens with tiny little thumbs such as this new style has is that no one has any motivation to look at any of the large photos at all! I want the thumbs to at least be large enough to draw me in, like Derek's first sample (old) gallery does. But the tiny ones just make me want to go to another website entirely. That next gallery doesn't draw me at all, except for the main photo. And small thumbs are imho ugly, very very cluttery (more tiny objects to distract us on a page) and make it impossible to even tell similar photos apart, such as a gallery of poses of one individual. What's the use? If the disagreement on this is really that strong, and it is, then please just let us choose our thumbnail size. Don't make me have to deal with thumbs tinier than what I already have now-- that's just going in the wrong direction. If I have to make that sacrifice, a good part of my site will feel, to me, ruined. Yes, I'm serious.
As to the size of the main photo: absolutely, it should be larger if we want it larger. I know some people wouldn't be able to display large photos because they've limited their display size to smaller ones. But those who have X3 enabled & provide big enough originals should be able to display large main photos. And yes, the appearance is definitely dramatically improved by being closer to a 1/3 - 2/3 split rather than 50-50.
I wouldn't want the tiny bunch of square thumbs off on one side though either like in Derek's later example. First of all, I rarely use square thumbs & don't want to be forced into that. Secondly, they also are too tiny. Some space between.... yeah. But let's not get crazy, and we don't need to look like every other site in every way. Seeing the comparison between old & new makes me wonder if there needs to be more consideration for spacing of verticals in the thumbs area. Couldn't the spacing be "taught" to move according to vertical/horizontal, so that vertical thumbs wouldn't have so much more space around them than horizontal ones? Maybe that's too complex... just an idea.
DayBreak, my Folk Music Group (some free mp3s!) http://daybreakfolk.com
Yeah, if I could just have those two additons it would be a huge improvement for me. Most things on SM are very customizable which I really like. But thumbnails are not one of them and that significanly limits creative layout options on many of the page types. I know quite a few photographers who prefer larger thumbnails like in the example of Jack Brauer's website above. That is one of the reasons why some feel they can't go with SM right now. So to at least provide larger thumbs as an option would be a big plus in many regards. But yes, please do not force us to use even smaller ones than what we already have. Although I could live with a zenfolio type layout. I really don't like these smaller ones the way they are currently configured. I agree it just winds up being clutter on a page - more of a distraction than something visually appealing.
Derek
My Smugmug Gallery
* Gallery descriptions once again have unrestricted HTML
I would hope you're still considering unrestricted HTML in captions?
I agree with the idea of having interface options -- dots or numbers, as set by the site owner in the gallery settings. I actually like the general style of the dots and arrow thumbnails quite a lot, but realize that others may want a more traditional look. Making this a setting should please (nearly) everyone.
Agreed -- though I think this is a problem with the existing SM design as well.
Agreed.
I fully agree with both of these suggestions. I've never really thought about why, but I have noticed that I tend to think Zenfolio sites look much better than SmugMug sites. This is probably a large part of it.
I will try to type up some of my own thoughts as well. Thanks for the work you are doing on this -- I look forward to seeing the direction SM is heading.
We serve 100px thumbs on small resolutions, and 150px thumbs on larger resolutions. Same as ever.
Portfolio • Workshops • Facebook • Twitter
Andy,
You got me thinking when you said that because I have never seen these smaller 100px thumbnails in any browser on any screen like this until now. So I tried the same page in two different browsers, and low and behold there is quite a difference with the new layout. Here is IE 8 at normal (100%) magnification:
These smaller 100px thumbnails are what I saw originally on Firefox 5 as well on my 1080 x 1920 HD monitor. Note also the dwarfed primary image. In this case one could view the higher number of smaller thumbs as the primary subject matter of this webpage with the image on the right as a sidenote. This goes back to one of my requests/suggestions that this image should never occupy less than 70% of the screen area even if surrounded by black background. Otherwise this page says to the viewer gee, look at all my small thumbs, aren't they cool?
Then I tried increasing/decreasing the zoom factor of the browser in FF 5 and SM actually increased the size of the thumbs in one case (not sure of the magnification factor). Take a look at it here:
At this magnification the whole layout moved the primary image to the left (more prominent) and made the thumbnails larger (150px). In this case I think it looks much, much better. Gone is the 50/50 (or less) split. Gone are the miniscule thumbs. Gone is the shrunken primary image. And there is even some space between the primary image and the thumbs - some separation.
This may be just a glitch in the way the new software is determining thumbnail and primary image sizes. But in my case I would never under any circumstance want an image smaller than 150px. Larger than 150px for me would be better. So for this upcoming release maybe that could be a user option, to turn off switching to 100px images or as a minimum increase the threshold to lower resolution monitors (1080 x 768), tablets, etc... And the main image should be larger especially at this resolution. It is the primary subject, not the thumbs. As such allow it its rightful space and breathing room.
Just as a test case I switched back to the older (current) version of SM and the thumbnails did increase back to 150px in IE8 with all the same settings (See #325 below). So yes, there is in fact a difference in the newer version of SM in the way it handles image sizing. For me and the viewers of my website smaller images are not better (unless on a tablet or phone).
Derek
My Smugmug Gallery
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
John, I understand what you are saying regarding general changes in sizes based on available space. However I am pointing out the differences between these two releases. Just in terms of thumbnail sizes alone there is really no good reason to shrink them down further on higher resolution monitors. They are not that small in the current release under the same settings/conditions in the same browser (see example below). Secondly, my main point is that the primary image should be the main subject, not the thumbs. So more real estate should be made available for it as a design priority. Looking at the image I posted there is plenty of available room for it on the page to jump to the next larger size up, like the second screen shot demonstrates. The sizing algorithm leans more heavily toward downsizing photos in this release which for me is not a desired direction. I would prefer it to be more generous with both thumbnail sizes and the primary gallery image (ie give up some of the extra padding, border, button, text sizing, frill making the layout more lean). The breadcrumb should be on the same line as the gallery title to streamline things better for example. Also I would always prefer a scrollbar to a dwarfed primary image, as long as the image itself didn't need to be scrolled. The second screenshot above illustrates this.
Derek
My Smugmug Gallery
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
John,
Most of my time (too many hours) I spent customizing SmugMug was in removing all the extra clutter/noise/junk/unwanted buttons, etc... that take away from simply viewing and enjoying images. It shouldn't be that difficult for the average user to put together a minimalist, non-cluttered site. It is in fact much simpler at certain places like Zenfolio to do just that, without hundreds of special scripts, tweaks and changes to the original code. I think a large portion of the SM customer base feel the same way - less is more. It really comes back to one simple thing for me. Providing an attractive galley in which to display my images, one which is understated but stylish. WIth that in mind other things including thumbs take the back seat to the featured photo.
So in designing my site I had to back off everything in the way of the main photo. That allows it to achieve its largest size possible given the available screen area. I think the web designer needs to start from there - the featured photo. And work around it. Since most modern screens produced and sold are now widescreen that format has to be considered in this layout. At 1920 x 1080 that still gives the web designer plenty of vertical space to work with. And so the old SM, though not perfect does a pretty decent job of this once completely stripped of all its clutter. In this case the main image is 1024 x 683 with some vertical room to spare:
Derek
My Smugmug Gallery
The goalies name is Martin Brodeur. I am also noticing that keyword capitalization is being lost still, I was hoping the new version would address the issue.
The image that can illustrate the issue is located here http://photos.bradfordbenn.com/Travel/Hockey-Night-in-San-Jose-2010/15551531_4SE8u#1164910584_8AreM
Regarding the thumbnails as navigation tools, I am having some visual distractions when I use squares thumbnails that do not occur when using original thumbnails. The square thumbnails to some degree hide the navigation change in shape of the first and last thumbnail. Also on some of my images the arrow is not as pronounced just based on the image they are being placed over. Perhaps a shadowed or outlined arrow could help that issue.
Pictures | Website | Blog | Twitter | Contact
I also don't understand why the caption box is so much narrower than the image to which it refers.
Hm, I set my browser to 1920x1080 and got the big thumbs:
Portfolio • Workshops • Facebook • Twitter
Interesting, which browser did you use? I'm finding things fluctuate more now depending on the browser. This is comparing IE8 & FF5 on a 1920x1080 screen.
When things are this close I don't think any fluctuation should occur in either image size or layout. A consistant presentation is greatly preferred over hyper sensitive adjustments to number of thumbs and more importantly sizes.
Derek
My Smugmug Gallery
DayBreak, my Folk Music Group (some free mp3s!) http://daybreakfolk.com
As for the new navigation, while it did take me by surprise at first, I must admit it's quite clever. And contrary to some feedback here, the dots at the bottom are quite common now for indicating which page you're on (iOS and Android anyone?). I maintain 100px thumbs regardless of which version I use and what my browser width, so I can't comment on that part of the algorithm. Although, when I stretch my browser to about 1400px wide with both designs I do have a very large wall of thumbs and my main image doesn't grow, even after refreshing the page. Just thought I'd throw that out there for potential tweaks.
Looking forward to seeing this continue to evolve. I'm already contemplating a new design for my site to better blend in with this modern look.
Christopher Nowlan Photography - http://photos.christophernowlan.com/
Christopher Nowlan (Main/Blog) - http://christophernowlan.com/
The arrow on the thumbnail, for next page, is really awful. No reason for obscuring the thumb is clear to me. The arrow could be tucked right to the bottom of the thumb & be semi-transparent or any number of better solutions than the white thing. Ack. Lack of page numbers is a real mess too. I often give people page numbers, and 95% of the time they're correct or at least ballpark. (see pages 3 to 5 for photos of Julie, etc.)
DayBreak, my Folk Music Group (some free mp3s!) http://daybreakfolk.com