As part of making the transition from Beta to full Release status, we wanted to make sure that the Pack Installer was fitting in well with Visual Studio 2005 and other tools published by Microsoft. We really wanted to make sure that even if we weren't the flashiest UI around, we had a bit of polish that made it seem "designed" rather than "put together." To help accomplish that goal we took the Pack Installer through a semi-formal design review with some of the UX designers here in Developer Division.

This was the first time that we'd taken a Power Toy project through a UX review and I don't think either we, or the designers really knew what to expect. Their first reaction was "it's not as bad as I thought it would be." Which considering that I'm not a UX designer was about as much as I could have hoped for. The result of that meeting was a lot of great feedback on how to improve the Pack Installer User Experience. I'm going to walk through screen by screen to point out the little details that have been changed that, together, make what I think is a dramatic improvement.

Detecting Visual Studio

When Pack Installer first starts up you get a warning if Visual Studio is running. In Beta 2 of Pack Installer here's what you saw:

Obviously this dialog has some problems. By using the standard "MessageBox" to display information, I created a completely non-actionable dialog. There's nothing on this screen that can actually help the user to shut down Visual Studio. I hate it when other applications give me these kinds of messages, so I should have been much more aware that I was doing it myself. Here's the new and improved dialog:

You can see immediately that this dialog is much better. The icon on the left gives you an indication that the information conveyed isn't dangerous, it's informational. And the buttons along the bottom give you the choice of what you want to do, and are very clear about what will happen when you select them.

The Main Window

Here's what the Beta 2 UI looked like:

From a UX standpoint there are a bunch of things wrong with this dialog, and not all of them are visible. At the very top, the Tool Selection label really isn't serving any purpose; it's just kind of there. On the left side we have the Refresh List button, which is big, and has the only icon of all the buttons. Obviously the point of the application is not to "Refresh" the "List" over and over again, so that should be much less prominent. And the whole top band in general is just too tall, with too much wasted space.

As we move down the screen we can find more problems. The main list doesn't make very effective use of the horizontal space, and the "+/-", indicator on the left is really ugly for expanding descriptions. It would be much better if we could show a portion of the description all the time, and then expand it to show the whole thing. In the tagging and filtering area, there wasn't enough feedback being given as you moved the mouse over the tags.

So after all that, here's what the screen looks like now:

We now have better use of space, and the whole thing flows a lot better. Next to the "All" tag you can see the indicator that gets drawn when a tag is selected, a similar one is drawn when you hover.

The License Terms Window

Overall we're really happy with how the License Terms window came out. There were some small things we could do to make a difference though. The top area and bottom area don't have the same border styles. The suggested look is flat, so the bottom area already looks out of date. In addition all of the text should align at the left so it looks right (correct). The grid in the middle also needs to have its columns properly aligned. Finally, what may seem the smallest, but was one of the more frustrating things to fix, the text at the bottom uses *'s for emphasis around the word "each." The * character is not a proper formatting indicator in normal publishing. So it needed to be bolded.

Here's the original screen:

And the subtly changed, but greatly improved new screen:

 Installation Progress Window

The main problem with this window was the amount of space it was taking up. The advertising to the right was huge, especially compared to the content. Even worse, the advertising was just taking up horizontal space and not vertical. Reformatting the advertising graphic makes the window much more tolerable. The installation complete message was also not especially prominent on the screen. Relocating that to its own area where the download progress bar used to be makes it much easier to see. That, along with blinking the toolbar, helps you know when things are done installing so you can tab away, and not wonder when it's done.

Original screen:

1.0 Release screen:

I (and others that I've talked to) think the changes we made were a significant improvement over what we released at Beta 2. There are lots of other little changes that I didn't call out that would be hard to visualize here, for instance making sure all windows pop up in the center of the screen by default. Working with the UX designers was great, and I'd encourage anyone who has an opportunity to work with one, to do so; they can make a big difference in the experience your users have with your application.