Shinka Design

A UI critique of PurePhoto 6/14/11

A new photo-sharing website has come onto the scene recently. PurePhoto exists in response to the growing perception of existing photo-sharing website Flickr is being filled with snapshots and family vacation photos. PurePhoto wants to focus more on professional photography and on networking photographers directly with collectors. Given my continuing interest in good photography, I decided to sign up and see what PurePhoto is all about.

After signing up, the first things I noticed were some UI problems that were getting in the way of me enjoying the site to the fullest. Right now, there are some fantastic photographers on the site, and I wanted to explore their content as well as share my own, but these little annoyances were detracting from my enjoyment.

PurePhoto certainly doesn’t have the large development team or years of experience that Flickr has, especially now that Flickr is operated by Yahoo!, but some of these UI problems are pretty basic and I wanted to address them here. Just to clarify, I think the PurePhoto team has done great job so far, the following are just suggestions on how to improve the experience of vistors and users of the site.

Profile page

When you go to the main page of a PurePhoto user, in my case http://kylebatson.purephoto.com what you get is an activity feed, which is not what I was expecting. As a user, if I’m clicking on the name of a photographer, what I’m primarily interested in is their photography. Instead, what I get is a list of images that they have ‘Liked’, who they are following and what photos they have just uploaded. So, in this case, if it’s been a few days since I’ve uploaded anything and I’ve been navigating the site, it’s quite possible that the only images you’ll see on my home page are the photos of other photographers and other things you’re probably not terribly interested in. I would suggest at least allowing the option for photographers to place a few thumbnails at the top of their profile page above the activity feed.

PurePhoto activity feed

PurePhoto activity feed

This activity page also uses thumbnails which are 150px tall, making the row of images I have ‘Liked’ rather large and taking up a considerable amount of space. These thumbnails are also the same height as the thumbnails used for images I have uploaded. Since they are all mixed into the same activity feed, there is no obvious visual indicator of which images are mine and which are images of other photographers that I ‘Liked’. A simple highlight color or even a darker background shade of gray would help differentiate those images that are by the photographer versus those they like.

Which is my photo?

Which of these is my photo?

Seeing a photographer’s images

Now, in order to get to see one of my images, if you don’t see or can’t find any of my images in the activity stream, it actually takes three more clicks to view one. In the left column, there is a grouping of expandable links, all of which have the same hierarchy. By default ‘Following’ and ‘Followers’ are expanded (you can’t collapse them), and the link we’re looking for, ‘Collections’, is not given any special indication that this is where you will find a photographer’s images.

Non-collapsible navigation to view images

Non-collapsible navigation to view images

Now, I imagine that this has to do with the fact that you can sign up to the site as a Photographer, Colector, Artist, Gallery Owner, Broker, Artist Representative, Curator, Interior Designer, or Art Critic. So there are plenty of people who might be using the site and might not have any images to show. However, I think on a site driven by photography, it would be prudent to make the page of a photographer unique to facilitate the easy viewing and collecting of photographs.

So, after we click on ‘Collections’ we then have to click on the Collection we are interested in, and then, finally, we can click on a photograph. Three clicks to get to content is far too many for my taste.

One more thing to mention while we’re here: even though the the sidebar navigation appears to be expandable and collapsible with its arrows, these items don’t expand or collapse. Clicking the arrows doesn’t do anything different than clicking the text. Nothing expands or collapses, it just navigates to that section.

Breadcrumb navigation

If I wanted to get back to the photographer’s page from this point, I think a user’s first instinct would be to go click their name. It has the highest hierarchy on the page and just makes sense. However, their name isn’t clickable. Instead, you have to look at the bread crumb for the image you are on which is in a small, light typeface (the same color as text content on the site), and click the photographer’s name there. As this breadcrumb menu seems to be the primary navigation of a photographer’s work, you would expect that it would be a bit more prominent or even fun to encourage use, but right now it’s small and easily unnoticeable.

Large name is not clickable

Large name is not clickable, breadcrumb is small and easily passed over

Photo page

On a page with a photograph, the site design encourages photos taken in a portrait orientation. The width of the photos is fixed at 700 pixels, but their height can expand vertically. So you could potentially have a 700x1200 pixel image in portrait orientation, but only a 700x408 pixel image in landscape orientation. This can be kind of jarring when navigating from one image type to another on the site, especially because it requires scrolling to see the full image. It also means that the previous/next navigation tool, which is located underneath the image, is not fixed in one spot, but is constantly moving during navigation. If, instead, the navigation was situated above the image, your mouse could be left in the same location, making for a relaxed navigation experience (rather than one requiring you to move your mouse around and even scrolling to find the ‘next’ arrow again). My recommendation would be to use a square 700x700 pixel area resized to the longest dimension of the image. That way, navigation could remain stationary and the images would be the same relative size no matter what their orientation.

Must scroll to see the whole image or find next/prev navigation

Portrait oriented image is cut off, must scroll to see the whole images or find the prev/next navigation

Uploading photos

Now, if you’re a user and you’d like to upload photos, there’s no ‘Upload’ or ‘Add photos’ button anywhere in the navigation. You need to click on the link to your Collections (either by clicking your name at the top of the site and clicking Collections from the drop-down menu, or navigating to your page and clicking Collections from the side menu) and either click an existing collection or clicking the ‘Create A New Collection’ button.

Camouflaged 'Create New Collection' button
Pagination area looks the same as the clickable 'Create New Collection' button

Camouflaged ‘Create New Collection’ button has low visual interest, same hierarchy as non-clickable pagination

Unfortunately, the ‘Create A New Collection’ button is light gray and how no dimension to it, making it blend in with the rest of the page. It has the same look to it as the pagination area at the bottom of most pages. I’ve not yet come across a pagination area that is clickable. Clickable areas should be visibly different from non-clickable areas. I’m all for designing custom buttons, but if you want someone to click on a button, make sure it’s easily noticeable as a button. For example, the ‘Change picture’ button for the profile picture is a nice blue which stands out nicely. Using that same blue for the ‘Create A New Collection’ button would be a big help.

Back to uploading. I’m going to go into an existing collection and add some images to it. Clicking the ‘Add Image(s) to This Collection’ link brings up the image uploader. There is a gray ‘Select File(s)’ button, but I must be honest, the blue ‘Submit’ button in the ‘Image Queue’ column took my attention and it took me few seconds to recognize the correct button I needed to click to being the upload process.

File uploading interface

File uploading interface

After selecting a few image files, they show up in the Image Queue. At first, since they have a progress bar underneath them, I expected them to begin uploading automatically. Instead you need to first click the blue Submit button. However, you’ll first want to assign an option Title or Description to your images. However, you cannot assign a title to an individual image. Any Title or Description you enter here will be applied to every image in your Image Queue.

Also, make sure to select a genre, because even though it doesn’t have an ‘(optional)’ label next to it, I didn’t realize that the Genre field was required until after hitting the Submit button.

My last bit of critique is the use of dynamic AJAX-type scripting along with anchors for site navigation. It’s basically identical to using hashbang URLs of which there is a nice critique at this article, It’s All About the Hashbangs

I’m hoping some improvements can be made to this interface as the site grows. I think there is a lot of potential for this site and I plan on using it and exploring it further. I do wish there was a way to ‘Like’ images without it showing up in your Facebook feed. And their search function seems to be completely broken for the moment, but I expect these problems will be fixed soon.

My best wishes to the PurePhoto team.

Update

PurePhoto responded on their Twitter account.

Thanks for the feedback; we couldn’t agree more. A lot of what you suggested has been on our clean-up list. Keep the ideas coming!

I look forward to what they come up with!