Great photos, but the Flash needs work

I looked at Kadir van Lohuizen's “Katrina Diaspora” project at Noor, a small photo agency out of the Netherlands. This is an important topic and, so, is appropriate subject matter. Even though Katrina is thought of as over by many of us who were untouched by the hurricane, many still have to live with the consequences. The photos, black and whites, are clear and show a variety of content and angles. That said, it seems like almost everything else could use work.

First, I think that this project could have greatly benefited from audio. Hearing the voices of the subjects would help the viewer to sympathize with their plight. Also, hearing the sounds of the apartment complex and the places the characters go would add another dimension of reality to the situation.

Noor seems to have a flash template which all projects follow. This isn’t a bad thing so long as the template is well designed. Unfortunately, theirs leaves much to be desired. The photograph is displayed largely, but the caption, which appear upon rolling over the photo, manifests as a large black box that blocks most of the photo. It seems that narrow horizontal caption boxes would be far less distracting and would detract less from the photography. The play/stop button floats awkwardly on the right, unaligned with anything. If the photos are treated as a slideshow, each photo takes a second loading. While the photo roll at the top is an interesting feature for navigation, it is distracting when it moves as the photo changes.

It's nice that the user has a choice between scrolling though the photos using the arrow keys or clicking through the photo roll, the photo roll has a few issues with navigation. It’s difficult to tell which photo is currently on the screen. It appears that the designer tried darkening the unselected photos, but it would be better if the current photo were greater highlighted, perhaps by using a white outline or further lightening the picture. Also, if the user clicks on a photo to select, the roll pushes that photo past the back arrow and the next photo is only half visible on the far left. This is a major problem as it impedes the user’s navigation. Finally, the “View All” page could stand improvement. All of the photographs are lined up in four rows, but none of them take the user to that photograph enlarged.

Greater attention needs to be paid to the user’s experience in the project.While the photos are well executed, the over all project could be implemented better.

Using flash and java to optimize the photographs

While I was looking for photographer’s websites, I came across New York photographer Eric Ryan Anderson’s awesome portfolio, found at ericryananderson.com.

First of all, he gets points for putting his contact information in the page’s title with his name. Also, he keeps the design simple with a black and white all-caps sans-serif theme. The tabs are easily accessible at the top left of the page and follow a logical order by presenting the portfolios closer to the inside of the page and the moving toward the “about” and “contact” tabs. The portfolio tab has a drop-down drawer—a design element that I’m usually prefer because it keeps the page clean (though I’m not a huge fan of the black outline around this drawer). In this drawer, he has several different categories to choose from, which helps to organize the viewing experience. The photographs in these sections take up the majority of the screen, which is ideal.

The “about” pages are simple and to the point. The “contact” page gives the user several options for getting a hold of Anderson, having a form along with his phone number and email. I also like that he added a journal, (basically, a blog), but it would have been better if he had kept the navigation and the look more cohesive with the rest of the website.

One thing I absolutely love about this portfolio website is the number of options that he gives the user. Through creative implementation of flash and java script, he has enabled the user to click forward and back through the photographs or view them as a timed slideshow. The arrows appear when the user hovers over the photograph. In addition, he has a drawer to the right of the photograph that displays a vertical row of thumbnails when the user hovers over a dot. The user can scroll up and down by mousing in the preferred direction. Also, he has another box for caption information that pops up when the user hovers the words “Image info.”

The best thing about this interface besides easy navigation is that the photo is never permanently blocked. My only critique is that it may be beneficial to be able to click once and have the drawer stay open and again to close it. This would be better for the user, but it could distract from the photograph. All in all, I love this interface and would like to implement some of the concepts in my design (once I know how to do it).

Distracting colors, but great navigation

The news website that I’ve reviewed is The Guardian web site. The first thing I noticed when I opened the home page is the amount of color they used. Like many newspaper sites they’ve kept a white background; they chose a cadet blue for their headers and black for their body text, which keep it simple. However, each of the section links on the top navigation bar has a different color, which was distracting, especially since some of the words don’t necessarily sync with their color associations. Even more distracting were the color bars across the top of photo links. While the gray bars on the secondary photos were acceptable, the bright red on the main one was jarring. The home page is full of images, but none are extremely large; however, I think that this is acceptable on a splash page. The treatment of photos within an article is fairly standard for a newspaper; the photograph is featured at the top of the page and is approximately 450 pixels wide.

The guardian website is rather successful as far as navigation. The user can pick a larger section and subsections of those. All navigation is available at the top of each page. The most helpful element of their navigation is that they display links that show each step the user has made so they never have to use the back button to get to the previous page.

One aspect that disappointed me was their “interactive guides” section under Multimedia. I specifically thinking of the “How I paint” guides, which is made up of slideshows that have a start and stop button and little written explanation. I would have preferred to have audio or roll-over elements. Otherwise, the name is slightly misleading in that it doesn’t show the process.

Ultimately, the guardian website is a very successful news website. Their treatment of navigation is very intuitive for the user, and may be useful to incorporate into my website.