Monday, August 27, 2007

UI Design: Pictures and Transitions

Last week, my brother-in-law sent me a link to a couple photos he posted on imageshack. After clicking on the link, I was treated to one of the worst photo sharing sites I have ever seen. There were three pictures setup as a slideshow. As each photo appeared, the slideshow application would zoom in on a random part of the picture. At the end of the zoom, there was a fade transition during which the next picture would appear and start to zoom in before it finished fading in. At no time was I able to view a full sized, stationary picture. There were no controls to pause the slideshow, navigate the pictures, make picture large size or view them in any normal fashion. ImageShack, you get an F-.

Most other photo sharing sites have a normal user interface that allows to view the pictures, instead showing off the programmer's "coolness." Some of these sites, however, have a very annoying feature. When you click on a thumbnail, the picture slowly enlarges. I find these transitions very annoying. It's a waste of time and only looks cool the first time, on the first site. The process of going from thumbnail to full picture, should have no delay, preload them in the background.

Online slideshows can have transitions, however, these must be fast. A fast fade or slide, as long as it doesn't waste time. Each picture should stay on the screen for a few seconds. Lastly, it's very important to include controls that allow the user to pause and to traverse the presentation forward and back. The internet is a big place, there's lots of things to see. Making users waste their time looking at your "cool" transitions in a fifty photo album should be a crime.

There is one place where transitions and viewing time can be slower. That place is digital photo frames. I have such a frame and leave it for Shabbat so that my family and my guests can look at pictures of my son. Everybody is sitting, eating, drinking, relaxing, nobody is in a rush. This is the most appropriate place to have one to two second transitions and around five second pauses, allowing people to view the photos. The programmer must always remember, they're not there to show off their skills, they're these to make the user's experience as pleasant as possible.