UPDATE: The same functionality is now available out of the box using the Blend 3 SDK, through the FluidMoveBehavior. Just drag that behavior to your container panel, and set the Duration and AppliesTo properties! The only difference is that easing functions are not yet supported in WPF. We will need to wait until WPF 4 is released.
Last evening I finally implemented a long awaited feature (by me!) in the Scrum Sprint Monitor: animated WPF panels. As the team members in the Sprint move up and down the list (an ObservableCollection<>), get added or removed, I always wished that change could be animated. My current knowledge of the WPF layout mechanism wasn’t sufficient to finish on that endeavor within a few hours, though.
I finally found a blog post that set me on the right path, on Ed Foh’s blog. Ed in turn was inspired by Kevin Moore’s WPF Bag of Tricks, which also includes an Animating Tile Panel.
Here is a video demonstrating the enhanced behavior of my AnimatedUniformGrid:
Both of the aforementioned solutions contained hardwired positioning logic, though. I simply needed to add the animation behavior to StackPanel, WrapPanel and UniformGrid, not a completely custom panel. Ideally, the solution would be a behavior that could be added on top of those containers. That particular aspect wasn’t realized, and I ended up deriving classes for each of these panels, prefixing the new classes with “Animated”. It is still a pretty acceptable solution. UPDATE: I eventually found this was the same approach taken by at least one commercial offer.
The following is the code required to instantiate the uniform grid (note how you simple need to prefix the panel class with Wpf:Animated):
<ItemsControl ItemsSource="{Binding TeamMembersIncludingUnassigned}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Wpf:AnimatedUniformGrid Duration="00:00:01" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl>
The workflow for converting an existing Panel to an AnimatedPanel is pretty easy:
That is all you need to do!
Thanks to Ed Foh and Kevin Moore for their great work.
Download the source code here.
I’m not the kind of person to carry much money in my wallet. I usually depend on debit or credit cards for most of my transactions. But while this is much more convenient for me, it sometimes is a nuisance, like the one that happened just a couple of days ago.
I was having dinner at a local restaurant, and when we finished the meal, we proceeded to pay with the debit card. The waitress keys in the value, “Please press OK, then your code, and then OK once again. And so I did: ” OK … #### … OK”. After a couple of minutes later, the answer comes: “Please remove your card”. No receipt, no error message, nothing. Just “Please remove your card”. Figuring there was something wrong with the communication, we tried again. “OK … #### … OK”. And again, the result was the same: “Please remove your card”.
Without any other clues to what was going on, we decided that the card was the culprit, and tried another time with a different card from a different bank. This time, it was even worse, as there was no message displayed, not even asking to remove the card.
After all these unsuccessful attempts, the waitress called another waitress that was passing by and asked her if she could help. She thought of the obvious (it’s always obvious looking back): “Have you checked if the machine has paper?” Well, of course it didn’t. Just as soon as she opened the machine, we all noticed the empty cardboard roll. Now, it’s true that the waitress that used it the last time when the paper ended could have changed it, but this is clearly an User Experience problem.
The main issue here is that the portable payment terminal gives insufficient information regarding this error (and eventually even gives no information at all). This could be corrected with a simple message stating the actual problem: “Unable to print receipt. No paper.” This would be enough for someone using the machine to at least understand what’s going on.
But we could go even further. When you’re starting a transaction, the machine could preemptively warn the user that it’s not possible to proceed with it. At the very least, if the user is still allowed to carry on with the transaction, keep him informed about what will happen: “Unable to print receipt. Do you want to continue with the transaction?” This way, the user is able to make an informed decision.
Finally, how hard would it be to include a small blinking light, signaling that there is not paper?
Sometimes we don’t really think about the objects that surrounds us, and how they impact our lives every day. It takes a lot of time to get the interaction with these objects just right, and with a little effort, we can actually make them enjoyable. This is the purpose of User Experience.
Oh, and I did get charged 3 times, so I had to go to an ATM, get the last transactions in my accounts and take it back to the restaurant so they could refund me.
This morning I was setting up the default printing preferences of my HP LaserJet printer at the office. As usual, and as do most printer users, I wanted to default my printer to print in grayscale and spend the least amount of ink possible on my day-to-day print jobs – printing for reading, drafts of documents, etc.
Everything went smoothly until I had to set printing quality. When I got to this I was presented with the following options:
Allegedly I am not a common PC user, I spend more than 10 hours a day in front of a PC which makes me a proficient Windows user. Moving on…
When I get to this print quality combo box I am presented with two options: “ImageREt 3600” and “600 dpi”. Hum… this is awkward! What the heck does ImageREt3600 mean? Did the person who develop this UI even bother to think who would be using it? I imagine my wife or my mother trying to figure this out! :S
I can foresee three scenarios in which a user may think of changing printing quality:
From my experience using printers, 95% of my printing jobs (you get the picture – most of them) follow under 1 and 2, so I want them to print fast and save ink. As a user I expect to see a quick and easy association of the options I am allowed to choose from, and the real world problem I am trying to solve.
At home my printer, which is also an HP shows a much more user friendly list:
There is no doubt that this is a much more intuitive approach than having the printing specifications listed. The user will rapidly and effortlessly make his decision.
Although this is a better way of presenting printing quality to the user, there is no clear association between the options that are presented and the amount of ink one will spend while printing, thus not solving issue 2. Since we do have sufficient space on the right to add some more tips to the user we could easily rewrite the first and last options in the following way:
Fast Draft (less ink)
Fast Normal
Normal
Best (more ink)
It is conceivable that this example be applied to analogous scenarios where combo box options picture some sort of ordered set. Just to state another example where this could be applied, think of setting visual effects of a computer game.
It is hard for us developers to take a step back and undress our technical cloak stepping into our user’s shoes. Ultimately, this is the base for the kind of UI gaffe presented in this post. Small considerations that can be thought of when developing software can easily boost the overall user’s experience on the application you are developing.
Share and Enjoy:
Conchango’s Richard Griffin recently blogged about the Microsoft Expression Newsletter. This seems to be an interesting resource for UX professionals. A few articles that caught my eye:
Whitney Hess wrote a nice article about what UX is not. Have a peek at http://mashable.com/2009/01/09/user-experience-design/.
A very interesting documentary is due out in March. From the author:
“Objectified is a documentary about industrial design; it’s about the manufactured objects we surround ourselves with, and the people who make them. On an average day, each of us uses hundreds of objects. (Don’t believe it? Start counting: alarm clock, light switch, faucet, shampoo bottle, toothbrush, razor…) Who makes all these things, and why do they look and feel the way they do? All of these objects are “designed,” but how can good design make them, and our lives, better?
One reason that I’m delving into the world of objects in this film is that I, admittedly, am obsessed by them. Why do I salivate over a shiny new piece of technology, or obsess over a 50-year-old plywood chair? What does all the stuff I accumulate say about me, and do I really need any of it in the first place?”
You can watch the trailer at http://www.youtube.com/watch?v=S9E2D2PaIcI.
Recent Comments