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.

Free, as advetised

Last week I got a DS Lite. Because I was looking for bargains, I bought it separately from the game, Puzzle Quest: Challenge of the Warlords, that I wanted. The DS Lite arrived first, without a game. I knew this was going to happen and had in mind to ask my friend for some games. Unfortunately, by the time UPS brought the game, my friend was already leaving for work. I decided to see if I can do anything without any games. I went through the initial setup and found something curious, DS Download Play.

DS Download Play, as I read in the manual, is a service for downloading free content like demo games and movies to your DS Lite. What the manual failed to mention was the details. I clicked on DS Download Play and watched it trying to connect. Fruitlessly waited a couple of minutes. Deciding that the problem is my basement, I tried different location and event went outside. All for naught. I tried searching on Google and that's when I found out how deviously evil and ingenious Nintendo is. Turns out that though the service is free, and even though all other games require at most an internet connection, for you to use DS Download Play, you actually have to go to a store. The only way you can get free content for your DS, is if you go to a game store and download it there. This is a great marketing tool, forcing people to look at what's new and perhaps buy a game while they get their "free" stuff. Like I said, incredibly evil.

On a side note, I consider the fact that for 15 plus minutes, the DS showed a looking for software available for download message, is a major bug. The correct message would be "trying to establish connection." And the correct way of handling a lack of that connection is not to continue displaying that message, but rather to time out, perhaps, after 60 seconds and display an error message that connection could not be established. An even better solution would be to include instructions on how to use the feature, both in the error message and in the manual.

No one's faster than USPS

When people hear "Government Employee" what they see in their mind is long lines and workers barely doing anything. I've seen DOT, on a daily basis, come to work at 10AM, leave at 4PM or 4:30PM and probably take at least an hour for lunch. I've seen five MTA workers install floor displays, where two of them were doing the work and the other three were standing and looking at what their co-workers were doing.

Today, I'd like to talk about the fastest of the city employees, the USPS package delivery. Yes, I did in fact say USPS. The Postal Office has lines whenever you come there and at least a 30 minute waiting period. When I needed to pick up a package, I tried coming there at 9AM, 10AM, 12PM, 2PM, etc. with the exactly same result. No matter when I came, there was a line and I had to wait for 30 minutes or more to get my package. You may ask, "now hold on, you just said that the USPS package delivery is the fastest of the city employees." You're right, I did say that. The problem is, their speed is in how fast they run from your door after ringing the bell.

I live in the basement and my door is not at the front of the house, but rather on the side and close to the back. Whenever I get a delivery from UPS or FedEx, I have ample time to walk upstairs and open the door. The delivery person is always there waiting for me. Not so with USPS. It seems that the USPS delivery guy, as a kid, used to be one of those pranksters who would ring your bell and run away. Unlike UPS and FedEx, when the delivery is from USPS, when I open my door the driver is either getting in the truck or driving away. It takes me 30 seconds to a minute to come to the door and as I mentioned before, my door is towards the back of the house. The only way that the delivery guy would have enough time to ring the bell and be in his truck by the time I get to the door is if he waited 5 or at most 10 seconds before leaving.

Next time you hear someone say that all government employees sit around and do nothing, you can confidently say that there's one exception, the USPS delivery guy.

Lighthouse Pro and Web 0.20

One of the concepts associated with Web 2.0 is using AJAX to refresh data on a page, instead of refreshing the page. JavaScript is used to sort and filter the data and and load any changes. Today, I'd like to bring an example of how horribly wrong this can turn out when a developer has no understanding of what he's doing.

The company I work for uses Lighthouse Pro by Raymond Camden. Lighthouse Pro is an online bug tracking application written in ColdFusion. Before the move to Web 0.20, Lighthouse Pro suffered bad UI design and usability problems. One of the worst problems, and one which is still present, was that all notes got added to one very narrow textbox. The ideal way would be to use a separate table where each note would be a separate row with its own status, owner, attachment, etc. Why the notes were not implemented this way I have no idea, however, the complete lack of understanding of UI design is unacceptable. The notes textbox seems to be at default width and height making it unreadable. There are many other small annoyances. Two other problems I had with it is the 30 minute session timeout and filter settings being stored as session, instead of client, variables.

Recently, a new version of Lighthouse Pro was released. The planned move was to web 2.0, the result, web 0.20. As I mentioned earlier, filter settings were stored originally in session, now they're not being stored at all. Each time you open a bug and change status, you're brought back to the task list with all filters removed. I usually set 2 filters, one for status and one for owner. Now, I need to do that every freaking time I submit a change. Not only that, the current version of Lighthouse Pro shows bugs in reverse chronological order, so each time you loose your place and have to click through to wherever you were working. Besides the lack of persistent filters and page, the list is not actually updated live and requires a refresh to see any new bugs. The latest version not only doesn't improve the usability, but whatever usability there was is now gone completely.

If you're a developer and want to implement AJAX and web 2.0, remember, you're doing this not for bragging rights, but to improve usability of your product and to make the user's job easier. If you're adding AJAX to make your data sortable without refresh, make sure you're also using it to at least fetch data. If there's 5 filters and 10 sorts, make sure the user doesn't need to set them every time he does something. Stop designing for 800x600 resolution, either make everything scalable or at least use 1024x768. If you can't implement a scalable interface and you must have backward compatibility for 800x600, use settings and separate stylesheets for each resolution. I'm sure the user would prefer to set the resolution, even if it has to be done at each login, than having to read 2 pages of text inside a box the size of their cellphone.