I know I have been neglecting this blog for a while, but I had to post this.
The new rounds of MVPs were announced and my friend Karl Shifflet made it! And if you don't know who he is, you shouldn't be asking that question, you should be going to his blog and reading about the awesome stuff he does and posts.
Congratulations, Karl.
Brian Noyes and I had a conversation about differentiated UX, you can read it here.
The post is on my new blog. See, I told you I won't post UX stuff here anymore. :)
It is too much of an effort to convert this blog to BlogEngine.net - at least at the moment.
So you can now find my new blog at: http://blog.nukeation.com along with a new rss feed.
This blog will become a more personal blog related to graphics, my idiotic existence, and photography. Everything about UX, WPF, and my work will go to my new blog. Now that I'm getting solidly involved with the WPF community and am writing a lot (and soon other things too) I intend to blog a LOT more this year.
So go and subscribe there (too)!!!!
Nukeation's friends over at IEWatch Software LLC (www.iewatch.com) - the creators of the multiple award winning software IEWatch - one of the best HTTP and HTML analysis and logging tools out there - have released their new software WebReplay Professional.
WebReplay is, as the official site says:
... an advanced solution for web automation and testing. WebReplay contains powerful tools for web professionals, quality assurance engineers and developers who wish to automate repetitive tasks and test operations performed in the web browser.
There is a free edition as well as a 30-day trial of the Pro version. Go check it out! www.iewatch.com
And don't forget the video demos on the WebReplay page. It's just awesome!
My good friend Liam Cassidy over at LICAS Digital has just posted about the common complaints (mostly baseless) that people put up for why they are not using Vista or why Vista sucks.
Here's an excerpt:
Vista is Just Too Damned Slow!
(Don't benchmark, just believe me! It's Slow! And my kettle boils water in five hours, if I watch it)
and
As I've surfed the web over the last twelve months, I've read review after review from supposed tech-experts blasting Windows Vista for this or that. And the point is that they're almost always wildly wrong - or, at the very least, they're craftily choosing not to tell the whole story; because, like tabloid rags, telling the whole story would neutralise their biased complaints. I thought it might be fun to briefly review the most common complaints from the tech journalists so many people turn to for information and guidance.
Read it over at his blog.
Okay, so maybe the title is not perfectly accurate, but I would like to share an experience I've had regarding RIA that goes contrary to what many Adobe fans and evangelists have told me.
I've heard all Adobe evangelists scream about their 90%+ penetration. And yes, Adobe fans, I am not denying that fact. And I've heard Microsoft evangelists state that Silverlight adoption and installation will become just as high, if not higher.
Now my story has nothing to do with predicting the outcome, but rather relaying what someone told me. I was talking to a non-technical person and as far as I could tell he was not biased about Microsoft. But when I told him I was working on WPF and Silverlight projects, he said, "oh yeah, Silverlight is going to kill Flash, right?" [direct quote]
So is it possible that he is telling what he thinks is going to happen? Maybe. Or is it also possible he was listening to propaganda by pro-Microsoft people and blogs? Could be. He was also irrelevant to the RIA world except as a consumer, so his words might not carry as much weight as one would think. But no matter what, it does goes to show Microsoft's reach to the public, and maybe even their willingness to trust Microsoft over Adobe. Maybe people like him are hoping that Microsoft may be delivering something that would help him better than Flash.
Oh well, that's all pure speculation at this point. I'll just have to ask him to know more. But it was a good example of how RIA is something even the common public is becoming aware of. And of course before some zealot(s) start flaming, let me just state for the record that I have been a long term fan and follower of Macromedia and Flash, and I use and love Flash.
Of course, I use (more) and love (more) WPF and Silverlight, but that's beside the point. :)
We have UX technologies like WPF and Silverlight (and of course, Flex/Air/Flash/etc.) that can really push beyond the existing User Interface and Experience with enough flexibility and ease of creation. So as I've said before, it is high time that we start rethinking of the most basic elements of the UI and UX.
Now only a small fraction of this can be wrapped up into a component you can buy from a vendor. No, this has to be done more or less on a case-by-case basis. 3rd party controls can go only so far. Of course, this is why you need a good designer on your team. Sure they are very few right now, especially with WPF, but there are a few good ones. :)
So what am I exactly talking about? Here are a few examples. And while I am aiming for a WPF/XAML implementation, they are more or less platform independent concepts and can be implemented on almost any platform worth its salt.
Don't forget - what I talk about here is only a single angle of looking at things - there are many and the more you explore them, the more customized and more powerful UX you can create for your users.
For this part, let's talk about...
Rethinking the Button
The essence of the button has remained the same since way before we had graphical user interfaces. In DOS it was a flat colored rectangle with text on it, in Windows 1.0 it was a rectangle with text on it, in Windows 3.1 it was a beveled rectangle with text on it, in Windows XP it was a nicely shaded rectangle with text on it, and now in Windows Vista it is an animated rectangle with text on it. And this applies to other operating systems as well. Sure, there are small variations here and there - and skinners go far in making unique buttons - but the basic paradigm remains the same.
Few people have been able to come up with new ideas for the button. Many of them failed. But one of the shining examples of such advanced User Experience has been Kai Krause. I’m going to show you a new method of creating buttons that I’ve come to call “Menu Killers”. These are based on some of his philosophies.
For our example, the basic premise is a Product menu system. The required commands are: Open Product Dialog, Add New Product, Add Note, and Configure. These are some of the most typical commands you see in daily programming. Most of the time, these are a row of buttons or a menu. Sometimes even an Outlook-style vertical command bar. But we’re going to do it a bit more graphically.
First we get a designer to come up with icons for each command.
The icon that represents the overall category of these commands, Product in this case, is kept bigger than the rest. The other three icons are about ¼ of that one, and are laid around in a semi-circle on the right hand side (or the left hand side, depending on the language/culture requirements, not to mention Tablet PC's right-handed/left-handed settings!)
The box represents the products and OnClick will bring up the main product dialog (or page, if you’re using a page navigation structure). The plus sign, the note icon, and the tools sign are common and clearly recognizable icons that represent the other three commands. Picking out the most recognizable icons is the important part.
But sometimes visuals are not enough. You can use the tried and trusted tooltip for each button. Or if you want to have something a bit more unique, you could place a label or textblock right under the main icon (the box). The label would, when idle, display the name of the section - “Products” in our case. But when you hover the cursor over any of the other icons the label text changes to show that particular command’s name. The figure below shows the Add Product command being highlighted.
Visual feedback is very important. The user should immediately know what control he or she is targeting. To provide good visual feedback the Opacity of all controls should be dialed down to 60% or 70%. On mouse hover, it should animate (or simply pop) to 100%. Coupled with the text label, it would be ample visual feedback.
This is just one example of using the Menu Killers. If you have more commands, you could form an entire circle of icons around a main icon. If you require a shallow hierarchy, you could have a secondary level of sub-commands as shown in the figure below.
Adding a third level is not recommended. You will also notice that the top level commands are dropped down to 40% opacity when a secondary level appears. This helps identify the hierarchy in a very visual, non-textual way. To add some extra coolness, you could have the secondary level crawl out of the parent icon one by one.
TIP: Always keep your animations quick. Slow animations look cool at first, but in regular usage these lengthy animations become cumbersome. Movement and fade animations should be between 0.25 and 0.5 seconds. Fade out animations can be kept up to 1 second, but no longer than that.
I leave you with a few more examples of how this design pattern can be used in other scenarios. Experiment and you will find many uses for it.
Back / Next
A very simple back next design. The back button is bigger as it is more commonly used.
Locked Network
A network has been locked. The lock icon can be used to unlock it with a password dialog, while the info icon provides more information about the situation. This design demonstrates an overlapped grouping.
WPF CODE
The code used in the "Menu Killer" buttons can be found here.
TO BE CONTINUED... (Part 2: Super Shadows and Physical Focus)
Nukeation Machine Teaser by
=nukeation on deviantART
With reuxables done, we are now gearing up to finish and launch our next product for the new world of UX. Keep watching for more info. The only hint I can give right now is "WPF, WPF, and more WPF" and "Visual Studio" and "Blend". Okay, enough. I'll shut up now. :)
"I wish I would have learned earlier in my career how important the UX is -- when you are briefing the boss, they need to see a good looking UI, or you won't get your next funding cycle."
Over the past couple of years, I've really enjoyed working on DasBlog. But it has become just too complicated and not that easy to customize. So I am moving over to BlogEngine.net next week. I think that it is an excellent ASP.net 2.0 piece of code and I hope to do some nice little custom work on it.
In the meantime, I suggest you change your RSS Subscription to this blog to my new feedburner link for uninterrupted service.
PayPal has just announced that Indian PayPal users can withdraw to your bank account now - a feature previously available only to US Customers. You can withdraw to State Bank of India , Bank of India, Canara Bank, Union Bank of India, HDFC Bank, ICICI Bank, ING VYSYA Bank, UTI Bank, Standard Chartered Bank, HSBC, Citibank currently.
IMHO, a very wise decision on PayPal's part! :)
More info at: http://pages.ebay.in/paypal_bankaccount/
It is official. As of today we have added full WPF support to NukeBall.
More information to follow in the next few days.
We are looking for beta testers (C#, VB, J#, or Managed C++ developers only, please). Please email me if interested - and don't forget to add BETA TESTER in the subject line or it might get lost.
Recently, I posted a short video showing off the cross-language power of Codename: NukeBall. This power comes from the NxC Core. The NxC started off as a Visual Basic 6 automation software, and after the introduction of the .NET Framework, became much more.
While the NxC Core is still under development, an offshoot of the code was secured for the development of Codename: NukeBall. While the internals of NxC can't be discussed publicly - yet, I would like to share some NxC related features of Codename: NukeBall.
Complete support for 3rd Party Controls in custom Control Groups
NukeBall's advanced NxC Core lets you include 3rd Party Controls or your own Custom Controls and UserControls in your custom Control Groups!100% Cross-Language Support
Thanks to NukeBall's advanced NxC Core, Custom Control Groups (even those that include 3rd Party Controls, Custom Controls, or UserControls) can be reused across any .NET/CLR and Windows Forms compatible language!! For example, if you create a Custom Control Group in C#, the same Control Group can be used in a Visual Basic, J#, or Managed C++ project! NukeBall handles the code conversion at the lowest level of the CLR.Extreme Performance
NukeBall and its NxC Core work at deepest level of the CLR and as a result provide you with consistent performance whether you are using it on a normal PC or a VPC, with 256MB RAM or 2GB RAM.
While NxC is currently an experimental product, we hope to stabilize it enough for normal reusability and release it to the .NET community. Currently, NukeBall uses an offshoot of the 3rd generation NxC Core. It utilizes only a fraction of the features. We have experimented with various Microsoft Office (2007 and previous versions) formats, PHP and ASP.net, Corel PhotoPaint and Photoshop (if anyone remembers PixelSpread, it uses an older offshoot of NxC Gen 2).
During the prototyping of PixelSpread, we created a special compression method that was able to store a 100MB CPT (Corel PhotoPaint - PSD type) file at only 9MB. The file could further be zipped still!
We already have a fully working prototype for WPF/XAML and we are adding WPF functionality to NukeBall.
Copyright © 2001-2007 Nukeation Studios. All rights reserved.
This code lets you create a simple button that uses images.
Simple ControlTemplate (put this in your Window, Page, or Application's <Resources /> section).
<
ControlTemplate
x:Key
="ImageButton"
TargetType
="{x:Type
Button}"
>
<
ControlTemplate
.Resources
>
<
Storyboard
x:Key
="MouseOver"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.2000000"
Value
="1"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="MouseOut"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.3000000"
Value
="0.7"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="PressedOn"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.0500000"
Value
="0.3"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="PressedOff"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.1000000"
Value
="0.7"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
ControlTemplate.Resources
>
<
ContentPresenter
HorizontalAlignment
="Stretch"
VerticalAlignment
="Stretch"
Width
="Auto"
Opacity
="0.7"
x:Name
="contentPresenter"
Cursor
="Hand"
>
</
ContentPresenter
>
<
ControlTemplate
.Triggers
>
<
Trigger
Property
="IsMouseOver"
SourceName
="contentPresenter"
Value
="True"
>
<
Trigger
.EnterActions
>
<
BeginStoryboard
Storyboard
="{StaticResource
MouseOver}"
/>
</
Trigger.EnterActions
>
<
Trigger
.ExitActions
>
<
BeginStoryboard
x:Name
="MouseOut_BeginStoryboard"
Storyboard
="{StaticResource
MouseOut}"
/>
</
Trigger.ExitActions
>
</
Trigger
>
<
Trigger
Property
="IsPressed"
Value
="True"
>
<
Trigger
.EnterActions
>
<
BeginStoryboard
x:Name
="PressedOn_BeginStoryboard"
Storyboard
="{StaticResource
PressedOn}"
/>
</
Trigger.EnterActions
>
<
Trigger
.ExitActions
>
<
BeginStoryboard
x:Name
="PressedOff_BeginStoryboard"
Storyboard
="{StaticResource
PressedOff}"
/>
</
Trigger.ExitActions
>
</
Trigger
>
<
Trigger
Property
="IsEnabled"
Value
="False"
>
<
Setter
Property
="Opacity"
TargetName
="contentPresenter"
Value
="0.2"
/>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
Or if you want to make it look ever cooler (though, a slightly more resource hungry), try the animated flavor!
Animated ControlTemplate
<
ControlTemplate
x:Key
="ImageButton"
TargetType
="{x:Type
Button}"
>
<
ControlTemplate
.Resources
>
<
Storyboard
x:Key
="MouseOver"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.2000000"
Value
="1"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="MouseOut"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.3000000"
Value
="0.7"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="PressedOn"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.0500000"
Value
="0.3"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
="PressedOff"
>
<
DoubleAnimationUsingKeyFrames
BeginTime
="00:00:00"
Storyboard.TargetName
="contentPresenter"
Storyboard.TargetProperty
="(UIElement.Opacity)"
>
<
SplineDoubleKeyFrame
KeyTime
="00:00:00.1000000"
Value
="0.7"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
ControlTemplate.Resources
>
<
ContentPresenter
HorizontalAlignment
="Stretch"
VerticalAlignment
="Stretch"
Width
="Auto"
Opacity
="0.7"
x:Name
="contentPresenter"
Cursor
="Hand"
>
</
ContentPresenter
>
<
ControlTemplate
.Triggers
>
<
Trigger
Property
="IsMouseOver"
SourceName
="contentPresenter"
Value
="True"
>
<
Trigger
.EnterActions
>
<
BeginStoryboard
Storyboard
="{StaticResource
MouseOver}"
/>
</
Trigger.EnterActions
>
<
Trigger
.ExitActions
>
<
BeginStoryboard
x:Name
="MouseOut_BeginStoryboard"
Storyboard
="{StaticResource
MouseOut}"
/>
</
Trigger.ExitActions
>
</
Trigger
>
<
Trigger
Property
="IsPressed"
Value
="True"
>
<
Trigger
.EnterActions
>
<
BeginStoryboard
x:Name
="PressedOn_BeginStoryboard"
Storyboard
="{StaticResource
PressedOn}"
/>
</
Trigger.EnterActions
>
<
Trigger
.ExitActions
>
<
BeginStoryboard
x:Name
="PressedOff_BeginStoryboard"
Storyboard
="{StaticResource
PressedOff}"
/>
</
Trigger.ExitActions
>
</
Trigger
>
<
Trigger
Property
="IsEnabled"
Value
="False"
>
<
Setter
Property
="Opacity"
TargetName
="contentPresenter"
Value
="0.2"
/>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
Usage
1
<
Button
Template
="{DynamicResource
ImageButton}"
Height
="48"
>
2
<
Image
Width
="Auto"
Height
="Auto"
Source
="images\ok.png"
/>
3
</
Button
>
Enjoy!
For more than a year (actually several if you include research) we have been working on Visual Studio tool Codename NukeBall - a Dynamic Rapid UI Development tool. Essentially, it creates parts (or whole) of UI in your Windows Forms projects with a single click.
Over the past year, the core (NxC) of NukeBall evovled from a simple automation tool to an actual code adapter. We added support for creating your own UI chunks - called WADS (Widely Adaptable Dynamic Scraps) - and added complete support for 3rd party controls. The main power of NukeBall lies in seamlessly converting UI code from one .NET language to another - and some other things we are not yet ready to talk about. ;)
Without further ado, I leave you with a live demo of what Codename: NukeBall can do.