EPJ Final Update

I wasn't aware of needing to do these updates. So, I'll catch you up. Audio is gathered; Photos are gathered. I'm toning and cutting now. Later this week, I'm arranging a sit-down for the video piece, which I'm excited about. I'll be cutting all of that and sticking it into my project.

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.

Humility doesn't mean you have to be small...

I reviewed a multimedia flash project run on the Chattanooga Times Free Press called "Humility in hard times". It tells stories of people whose lives have been affected by the recession as well as of those who lived through both the Great Depression and the recession. This concept is very compelling, and the content could work great for a project. Comparing the history to the present in this way can help us to gain some perspective and guidance in dealing with these issues.

This topic was well-suited to a flash project as the project has two chapters (one each for the recession and the Depression). And has four stories in each chapter. Additionally, the “about” link has an interview with two of the four creators

When navigating to the page, the first problem with this project is immediately clear. The entire project was made too small. The text is barely legible. It’s unfortunate because there is clearly much more room on the Web page, and I’m sure the text is very compelling. Furthermore, the text is white on black serif. Being this small, it becomes hardly legible. The banner is done successfully in a sans serif that should have been used throughout the whole project.

The project works design-wise. The visuals are given the most real estate while there is a space for explanation underneath. The thumbnails for the other four stories line up vertically on the left and the navigation for other parts of the project are located at the bottom left. Quotations from each section run across the top in a banner like area. The only problem is that there is too much real estate given to this area.

Additionally, there are too few visuals to warrant creating a flash slideshow. In many there are only two or three portraits. They don’t tell us much more about the story or the person. It think it would have been better to have either only one photo or at least enough so that they could change every three to five seconds.

Overall, very interesting concept but could have been executed 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.