Options
What's hot, what's not, and why?
redcrown@mchsi.com
Registered Users Posts: 68 Big grins
In re-designing my new Smugmug I spent a lot of time looking at other people's designs. I saw all kinds of formats, of course, but it made me curious of what key aspects were most popular. So I went through the first 47 sites that are listed in the "Show Us Your New Smugmug" thread and tabulated the results in a spreadsheet. Here they are:
1. BACKGROUND - Is it light or dark, neutral or colored? 96% were neutral, either black or white or some shade of gray. Of the neutrals, 53% were dark and 43% were light.
2. LAYOUT - Are the logo, name, menu controls on the top or in a side bar? 83% were on the top header.
3. HOMEPAGE - Does the homepage have direct links to galleries or folders, or is the homepage a "splash" page with a slide show, or sample pics, or other general info, such that you have to click through to get to the galleries? 87% used a splash page, only 13% had direct links to galleries.
4. FOLDER/GALLERY STYLE - How are the thumbnails arranged? 67% used the new "Landscape Collage" format, 5% used "Portrait Collage". The other 28% used either the old Smugmug style (thumbs on the left, selected image on the right) or some other custom form (page, grid, journal).
5. SPACING - Some of the default designs place thumbnails in a "tiled" array with no space between images. I personally found that unattractive and difficult to view, so I wondered how many people use it. The answer is very few, only 6%. The other 94% use spacing between thumbnail images.
6. SQUARE THUMBS - I personally found square thumbs very problematic. While they allow neatly organized rows and columns, they crop off so much of the original image you often can't recognize it. Headless portraits are particularly annoying. I found a CSS hack to force the crop from the top, which would help I suppose. I found another user who suggested making custom "feature photo" images for each folder or gallery. So how many people use squares? Turns out about 30% of my sample.
Hardly a scientific analysis, and not worth much more than satisfying idle curiosity. But it leads to another curiosity. How did you make decisions on your site design?
Did you simply follow your personal preference? Did you study and follow any of the published research on website usability and best practices? Was your design based on feedback from your user base? How do you make your case that "X" is better than "Y".
1. BACKGROUND - Is it light or dark, neutral or colored? 96% were neutral, either black or white or some shade of gray. Of the neutrals, 53% were dark and 43% were light.
2. LAYOUT - Are the logo, name, menu controls on the top or in a side bar? 83% were on the top header.
3. HOMEPAGE - Does the homepage have direct links to galleries or folders, or is the homepage a "splash" page with a slide show, or sample pics, or other general info, such that you have to click through to get to the galleries? 87% used a splash page, only 13% had direct links to galleries.
4. FOLDER/GALLERY STYLE - How are the thumbnails arranged? 67% used the new "Landscape Collage" format, 5% used "Portrait Collage". The other 28% used either the old Smugmug style (thumbs on the left, selected image on the right) or some other custom form (page, grid, journal).
5. SPACING - Some of the default designs place thumbnails in a "tiled" array with no space between images. I personally found that unattractive and difficult to view, so I wondered how many people use it. The answer is very few, only 6%. The other 94% use spacing between thumbnail images.
6. SQUARE THUMBS - I personally found square thumbs very problematic. While they allow neatly organized rows and columns, they crop off so much of the original image you often can't recognize it. Headless portraits are particularly annoying. I found a CSS hack to force the crop from the top, which would help I suppose. I found another user who suggested making custom "feature photo" images for each folder or gallery. So how many people use squares? Turns out about 30% of my sample.
Hardly a scientific analysis, and not worth much more than satisfying idle curiosity. But it leads to another curiosity. How did you make decisions on your site design?
Did you simply follow your personal preference? Did you study and follow any of the published research on website usability and best practices? Was your design based on feedback from your user base? How do you make your case that "X" is better than "Y".
0
Comments
1. BACKGROUND - I had a dark background until I saw a homepage I really resonated with: http://www.davidweissphotos.com/ I shameless copied his use of of the Spartan theme and even chose a homepage background picture with some related attributes: a big simple landscape with the horizon in the middle. I wasn't even aware of the second borrowing until I looked at both sites yesterday. (So consider yourself doubly flattered, David.)
2. LAYOUT - I like the logo on the side. If you have a wide-screen monitor, as many do, there's more pixel real estate on the sides. Top headers reduce the more valuable vertical dimension. Top headers also make the display area seem even more squat, which seems visually "off" to me. Perhaps it's because it makes the display area aspect even farther from the golden ratio.
3. HOMEPAGE - I had direct links to galleries and folders on the homepage until I saw what David Weiss did. Keeping it fairly simple resonated with me.
4. FOLDER/GALLERY STYLE - I opted for portrait collage on folders, with captions under the thumbnails. Doing so shows the entire caption, not just the first line, which I like. It also avoids the disappear-on-hover approach that is popular but that seemed just vaguely out-of-place for pages on my site designed for navigating around. I have, however, made sure gallery thumbnails are all in landscape orientation. A list of thumbnails in collage portrait with with a mix of orientations looks rather too jumbled on a navigation page. Within galleries, I've opted for the old SmugMug approach. It displays my long captions well, which is important since my galleries tell stories in addition to showing pictures. It shows the current picture at a fairly large size. It works well with a wide-screen monitor.
5. SPACING - I too dislike thumbnails without any space. After lots of trials, I settled on 12pt spacing.
6. SQUARE THUMBS - I too have avoided squares except in a few specialized places. Even on thumbnails, I'm not thrilled with automatic cropping.
Jim Ringland
jtringl.smugmug.com (unveiled!)
LAYOUT: Stretchy. Logo (and tag line) top left (30% of horizontal space) - Nav bar next to it (70% of horizontal space). Left orientation but with a large left margin to keep it close to the logo. Separator line and some text. I made a effort to minimize the amount of vertical space consumed at the top of the page so as to allow more room below the images (Smugmug Gallery Style) for my captions (some are lengthy).
HOME PAGE: Toyed with it a lot. Decided on a slideshow (I'll change the images from time to time when the mood strikes). Added text to direct the visitor to use the Nav bar to advance to a set of collections (i.e. folders of galleries). Added an About Me and Contact Me link in the nav bar. To keep the slideshow size under control, all slideshow images are a standard size and all reside in just one folder for slideshow - 1200px x 800 px. Add a border to the slideshow images which give it a more 'finished' look.
GALLERY STYLE: Sticking for now with Smugmug Gallery Style which I've tweaked a lot with CSS code to accommodate lengthy gallery descriptions and image captions and to improve the look somewhat. Add user instructions since most site visitors have no clue how to navigate these sites. My caption width is now much wider than the default. No links for sharing, downloading, comments or anything other than photo info. I don't subscribe to any social media - period. Disabled comments since I've received a grand total of 3 comments in the seven years that I've had a Smugmug account. I detest the Lightbox which is a waste of time and resources. And it's not easy for a site visitor with limited skills (like most of my family who look at this stuff) to use. Hoping to disable Lightbox completely. Experimenting with Journal (one test gallery not published), but I don't like the fact that a visitor has no idea how many images are in that gallery in Journal style. Would be nice if there were something like what you'd see in the footer of a long Word documents like "Image #X of Y images." Not an issue with Smugmug Gallery Style which is by far the better choice for me at this time.
SPACING: Added a little space between thumbnails and rounded the corners. Looks nice. I'm re-editing a lot of my pictures to make them bigger and a more standardized size. Seems to make the Smugmug pages behave better.
SQUARE THUMBS: Ugly ... NFW
Note: Not ashamed to admit that I stole a lot of CSS code from users here. I've forced myself to learn how to do some of this. But 'plagiarizing' CSS code is easier.
Prescott, AZ
http://jamesfarrell.smugmug.com
2. LAYOUT - My Legacy SmugMug had a top bar, switched to side bar with the new migration, then eventuall switched back to top bar. I think the side bar is too prominent and takes focus from the site content.
3. HOMEPAGE - went with a slideshow to show visitors our focus on weddings before they continued.
4. FOLDER/GALLERY STYLE - Greatly prefer the collage options, seems more modern thanks to mimicking the layout of sites like Pintrest, Google+, Google image search, etc.
5. SPACING - definitely prefer spacing on the collage
6. SQUARE THUMBS - I agree with your thoughts, I like the organized look but dont like the forced crop.
Jarboe Doggart Photography - jarboedoggart.com
Jarboe Doggart Photography - jarboedoggart.com
1. Gallery style:
For the galleries I kept the smugmug style I had in the old SM. I simply like it. I have customized each and every crop for all photos I have ever uploaded, and fortunately these weren’t lost – so I don’t have the problem of the auto crop here.
For the folder pages, I used the landscape collage. It’s nice though not my 1st choice. I would rather have used the 1:1 grid, but here, the customized crops for the galleries’ feature photos was not kept. Since the auto crop is ____ (you can fill in the blank), it just doesn’t work for me so I settled with the collage. There is a problem (bug?) with a cropping on the right which was solved with CSS.
2. Layout: This is where I know I still have some work. What fits my 4:3 screen doesn’t work on wide screens. A fixed layout does. But a fixed layout doesn’t work for smaller mobile screens. Not with my banner anyway. But I like my banner (which matched my business card). So for now, I’ve given up on this issue.
At first I made an effort to keep the homepage so that it fits a screen without the need to scroll, but I gained two insights on this issue:
a. Everyone has a different screen
b. I think that the way people “browse” (or “surf the net”) today – with the touch screens and that “finger scrolling”, makes this “fit it to one screen” approach unnecessary.
3. Navbar: I have a “general” one at the top (with home, contact, about and exhibitions) and one on the side for browsing by topics. I do not have an explicit “browse” link (it’s under my search options’ in the navbar). Both navbars appear on all pages – I want direct access to everything from everywhere.
4. Theme: I created my own with a brownish-gray color. I don’t want anything to draw attention from the photos, and I since do have a banner on all pages, I kept the background simple.
5. Homepage: I really wanted a slide show, but since there’s no option of clicking on the photos to reach their galleries, I swapped it for a collage of favorite photos from various galleries, and there are thumbs\links to all 4 folders.
I also added a text box with a quote, just to personalize the site a bit.
6. Square thumbs (in smugmug style galleries): I like their clean look. When setting the original ratio of photos, with both horizontal and vertical photos, the thumbs area looked a bit messy. I only kept it for the exhibitions gallery, the invitations look better that way.
7. Hierarchy: someone whose opinion I appreciate once told me to minimize the number of clicks visitors need before reaching the photos. Hence – One level of folders, no sub folders. This results in “big” folders (Travel has 15 galleries) but the only place this is a slight problem is the expanded navbar.
8. Search options – I placed them all together, different pages for keywords, free text search, map and browse.
To summarize, I followed these guidelines:
1. Simple design (no pattern, no BG photo)
2. Access to everything from anywhere with minimum clicks.
3. No compromise with auto-cropped thumbs.
The guideline I’d like to follow but still have to work out is compatibility to different screen types.