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.

Comments [1]  |  Trackback

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. :)

Comments [1]  |  Trackback

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)!!!!

Comments [1]  |  Trackback

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!

Comments [0]  |  Trackback

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.

Comments [0]  |  Trackback

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. :)

Comments [0]  |  Trackback

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.

• Rethinking the Button
• Super Shadow and Physical Focus
• Non-Modal, Connected Status Display
• Real World Simulation

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)

Comments [0]  |  Trackback

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. :)

.NET | Aesthetics | Blend | Geek Stuff | reuxables | WPF

Comments [0]  |  Trackback

"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."

Geek Stuff | reuxables | WPF

Comments [0]  |  Trackback

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.

Direct RSS or FeedBurner Page

Comments [2]  |  Trackback

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/

Comments [0]  |  Trackback

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.

Comments [1]  |  Trackback

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!

Code | Downloads | WPF

Comments [1]  |  Trackback

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.

Please note that this video shows an internal build. The actual product UI and features will be much more enhanced.

Email me at dax [at] nukeation [dot] com if you're interested in beta testing NukeBall.

More information about will be published soon on this blog.

.NET | Downloads | Geek Stuff | NukeBall | reuxables | WPF

Comments [2]  |  Trackback

I was over at Ryan Stewart's AIR blog on ZDNet, reading his post Vista sells! More WPF apps coming?. I was reading a comment that Jason Etheridge (a Unix developer) wrote.

It's entirely possible that Microsoft's Silverlight will overtake Flash more quickly than most would think possible. Flash may have over 90% deployment of its player into browsers, but all Microsoft has to do is deliver Silverlight as part of a regular IE update... and suddenly it's almost everywhere. The more compelling argument for Silverlight is the ability to write browser-side apps in languages familiar to developers (C#, Ruby, Python), using Visual Studio's IDE. That's a much, much better story than using an effectively proprietary language like Actionscript (even if it's a variant of Javascript). How long before Microsoft release a platform like AIR that can run CLR apps on the Mac? Mono already allows .NET apps to run under Linux.

He goes on to write:

A platform can only survive if developers are willing to write code for it; with Flash now, there's not really a viable alternative.

Read the entire post and Ryan's response.

Jason's comments do ring true to my ears. A simple Windows Update can make Flash's market penetration seem not that grand. Microsoft already has an existing developer base that Adobe can't match (at least at the moment).

Here's the trump card (or rather, ONE of the trump cards) as I see it. We all know enterprises hate changing technologies. Mostly because a lot of code needs to be overhauled or rewritten from scratch. With Silverlight 1.1 (and going forward) you can virtually pull out your business objects from your existing SQL + ASP.net setup (or even a MySQL + Python whatever) and hook it up with a new simple middle layer to Silverlight. You get to reuse existing code - which saves a LOT of money and time, AND you get to leverage the full potential of RIA. While Flex does tote some nice compatibility features, but somehow I don't think it would match this.

Flex, etc. has become a much more respectable programming language than what ActionScript used to be. But it would have trouble competing with something like C# or VB. Many Flash/Flex/AIR people have been talking about the merging of the desktop and the web, but IMHO I think that some things are better left on the desktop or the web where they belong. The net is not really all that stable as it needs to be for such heavy things. In the future, sure, it could happen, but not yet. Moving things to the web for the sake of moving things to the web is just wrong. In fact, while it was an excellent technology showcase, I didn't particularly approve of the web-based media editor shown at MIX'07. I refer you to my previous rant.

Right now things may look unclear as to where the tide goes or turns, but I have a feeling in the next year or so, we will see some major changes in the RIA space.

In closing, I'd like to provide some insight into the whole WPF adoption thing that Ryan was asking about.

So now that we know people are actually buying Vista, what’s going to be the story for Windows Presentation Foundation? I’ve seen a lot of internet chatter about there being a lack of good WPF apps out there because of a lack of an installed user base. That actually runs contrary to what I’ve heard from shops like IdentityMine and Cynergy who have seen strong demand for WPF applications. I get the sense that most of these are on the business side and less on the consumer side however.

WPF presents a major change from the familiar Windows Forms that developers are so used to. See my Myths post about some of the (percieved or otherwise) obstacles in adoption. But if you look at the amount of excellent 3rd party stuff coming out from Developer Express, Infragistics, Telerik, and even Nukeation, there is a massive demand for WPF. In fact, about 80% of the work at Nukeation for the past year or so has been WPF rather than web-based stuff. Of course, it takes TIME to develop good applications. Expect to see many good applications that use WPF very soon. Some, like RIPT, are already out in beta. I myself have worked on a medical application, a large store chain management app, extremely large enterprise data management and visualization app, and various other applications. Most of these are to be released internally in corporations or select circles - but they shouldn't be discounted from the WPF adoption block.

Before I go, I'd like to ask why we're not seeing AIR and Flex and all that showing up everywhere - especially since they have 90%+ market penetration. ;)

Comments [11]  |  Trackback

Wow. It's been 3 months since I blogged!! Needless to say I was busy.

But before I get into that, just hop on over to www.nAesthetic.com - I just updated the blog design. Let me know what you think! The new blog shows (in the browser only) new art/photos posted to my deviantArt account as well.

At Nukeation we have been working hard on two products that will see a public release before the end of the year. One is for Windows Forms (long term followers of this blog may know what it is) and one is for WPF. Expect news soon.

I have also entered into an unholy alliance with my fellow Microsoft MVP Andrew Eick (of revolUXions fame) and Liam Cassidy (of BBC infamy) on a project that will change or ruin the world. We're hoping for the latter, but most probably end up with the former. Obviously, it involves drinking a lot and writing a ton of .NET 3.5 code.

I've also been writing some stuff regarding WPF which I shall soon publish. I have to wait until some of the software it talks of is released. On a recent trip to Microsoft Bangalore, I met with Pandurang Nayak and India's new UX Evangelist Supreet Singh. These guys planning great stuff for the local UX community - do keep a lookout for some great events like the recent Expression Around the Clock (which I missed at the last minute due to an emergency!). On that same trip I was familiarized with some of the new stuff Microsoft has on the horizon. It just blew me away.

I can't wait for the next-gen stuff to come out!!!

Comments [2]  |  Trackback

Even after reaching many mainstream projects, Windows Presentation Foundation (or WPF), is still a long way from completely succeeding Windows Forms as the main form of user interface.

Switching to a completely different method of creating applications is difficult for almost everyone. Even after these years of being available to the public, proper documentation on WPF is still hard to find. Another factor in the adoption delay (or in some cases, refusal) is that the word "UX" (User Experience) is often distorted. The real power of WPF is often buried under the false image of UX.