User relevant information

The other day a friend asked me what to do with a design I had done two years ago for Digital Catalog. He told me that a user uses the comments section for relevant information about the discs, including condition and specs and the user complained about the fact that the comments are somewhat hidden.Capture
As you can see the comments are on the bottom-right corner of the application. This is also the same approach Microsoft used for Windows Vista, you have the list of files as the center point of the Explorer Window and the Details Pane on the bottomDetailsPane presenting the most relevant information about the selected file. The question is, where should this information be? There are at least 2 approaches to this problem, the current approach used in Digital Catalog and Windows Vista and another one similar but with the information on the top of the window. Microsoft had done this in the alpha stages of Windows vista.longhorn_4051_126 (2) This method gives you all the information you might want right in your face but the problem with this approach is that the window is too heavy! Everytime I look at this window it feels like it is going to fall in my face at any second. It a lot of information, menus, tools and related tasks but the fact is that this is a very plausible solution to solve the information problem. If we only had this two choices the best option would be to make it configurable at the user level, if the user doesn’t have much use for that information hide the details pane or show it on the bottom and if he really feels that the information is very relevant he could show the pane on top. It is mandatory that the design of the pane on the top is somewhat similar to the bottom pane and the top pane in particular has to pay a lot of attention to the “heavyness” of the design. A good way to handle this is using colors similar to the main body of the application but a bit darker or lighter to differentiate the parts.

In the particular case of Digital Catalog we have some other pretty solutions.03 In this concept you would have the items on the center and on the right the detailed information about the item. this raises only two problems in my opinion. First you might have a very high resolution or very few information to show and that would result in an enormous white bar right there for no good reason. The other solution would be to have the item information on the item itself, this would take some real estate to show all that information, but that could be done by expanding only the selected item..03 This solution limits the possible item visualizations (lists, tiles, details, etc) but would definitely solve the information problem, the question here is to opt between information vs visual diversity.

Please share your thoughts and opinions, and post some images if you can too.



Some time ago I started creating this decorator that takes an image and splits it in five parts (default, normal, disabled, clicked, over (I’m not sure about the order)) and creates an animation between the states of the control. This control also is able to strech part of the image so that you can stretch buttons with round edges.

 I’m leaving the code here so you can explore a bit, it is not very good and not very well implemented yet, I hope I can finish it by the end of the month and repost again. I just wanted start sharing some stuff. 🙂

Here it is!


Yesterday, Vertigo released a new version of Family.Show, the reference application used to demonstrate the power of WPF. Yes, this means that you can go and grab the source code! You can find the click once installation and source code at Vertigo’s web site. This version introduces an approach to skinning, for now you’re only able to change mostly colors, I hope that a version 3.0 is released with full customization support (even if the user can’t create new skins).

Designer-Developer Workflow

Since the first meetings about Imokapa Slideshow I’ve been working with Luís Oliveira, the interactive designer at Multivector. We started working with Beta 2 of WPF, so we didn’t have great tools, we had a version of Expression Blend but not even close to what it is today.

Luís started by creating some concept images of what the UI would be like based on the features planned. He used Fireworks to create those concepts and then it was up to me to plan the best plan of action to develop that interface and plan for customization.

When we started creating the actual UI we faced lots of problems, from tools that wouldn’t export XAML correctly to performance issues caused by poor exports done by Blend at the time. Even though Luís had some great designs we were starting to worry that those would never see the daylight…

 Luís would be the best person to describe the process of working with XAML by hand, but I can say he didn’t like it a bit, he felt like he was coding and we had no real tools to help us because of the customization requirement. And it was very hard for him to keep up with all the objects and different ways to implement brushes, most of the hand written XAML was made by me, fortunately we used Blend in some small parts. Luís designed the controls in their several states and I implemented most in XAML. Fortunately now we don’t have to do that, the new versions of Blend and Graphic Design are helping us a lot and with the new customization design patterns we developed it is possible for us to work apart from each other and in the integration process I only have to check for possible performance issues check bindings and commands and it is ready to go!

 So, today the experience is quite smooth, but when we started it wasn’t quite like that, Microsoft announced that Designers wouldn’t have to wait for Developers to implement their designs and Developers wouldn’t have to worry about the look of the application. Today it is a bit like that, not all is true, but we’ll get there, but when we started it was a hell of a nightmare (Microsoft and Marketing… you know 😉 ).