Microsoft just published it's second official Expression Newsletter. It contains part 1 of my "Designer Role" article.

http://www.microsoft.com/expression/news-press/newsletter/2007-12/Article02.aspx

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.

The following are some of the common myths and the corresponding reality about WPF and UX.

UX is just a fancy word for skinning

WinAMP was one of the earliest applications to champion skinning. Soon after many people created software that skinned your application to look more "cooler", and some that even skinned your entire OS! In many circles, skinning was not considered to be a serious thing. Of course, part of it was the whole Designer vs. Developer thing.

User Experience is much more than how your application looks! UX is just as much about how your application behaves, and how your users interact with it. UX is about lessening the amount of work the end-user has to do (including thinking) to finish a task.

Kai Krause, a pioneer of UX, described UI/UX as: "An interface is about hiding complexity from the user, It's about guiding a process, without cognitive understanding of what goes on beneath. Interface design is the art of enveloping the observer in an enticing, "try this" exploration with ever-new elements and designs as the tools to triumph in new territories."

WPF is only about making your apps look better, or WPF is only about creating UI with tags like ASP.NET

This is only partially correct. While WPF does allow you to customize application interface to the deepest levels, and allows you to create UI using markup, the entire scope of WPF is much larger. For a long time, Windows Forms (and its predecessors) were built on top of the foundation laid out in the era of Windows 1.0 and 3.1. Over the last decade, many of the most basic concepts of UI (mostly the controls) became obsolete or non-productive. Some were updated and some were transitioned out, but most of the common things remain. A good chunk of that (Button, Checkbox, Textbox, List, and so on) is still here because it remains useful.

There have always been ideas for new UI and UX. But more often than not, it has been maddeningly impossible to actually create those as the UI technology had been too strict to allow deep customization and creating them from scratch required superb knowledge of C++ (which is too expensive for most common projects). To customize something as simple as a button you had very few choices. You could build a UserControl. But those weren't always an efficient solution, and often too resource hungry. You could create from scratch or customize with inheritance (or in the case of VB6 and other such old technologies, go subclassing till your nose starts bleeding). But that was too time consuming, limiting, and expensive in every way.

This is where WPF comes in. WPF provides a markup based method of creating UI. It is time saving, flexible, and easy. It takes the best of the web and the best of the desktop and rolls it into a single package. WPF allows you to easily customize just about any control using ControlTemplates (structural customization) and Styles (cosmetic customization) that let you do almost anything to the control without messing with the inherent functionality. A hWnd-less (among other things) model lessens many of the resource requirements that previous frameworks had.

If you've ever had an experience with pre-.NET 3.0 frameworks where you thought that you wanted a very small, simple customization in an existing control but there was no simple way to do it, you should know that you will not have that experience with WPF. Practically anything is doable.

(End of Part 1. Part 2 to be posted shortly.)

My new article is featured on front page of the newly relaunched angryCoder.com.

But like developers, designers also have healthy egos measured in tons. Stick a single developer in a team of designers and he or she will be chewed to death in a matter of minutes. Black shirts hide bloodstains easily - why do you think designers wear only black?

Read the entire article at angryCoder.com

A good family friend and the editor of Rediff.com (India's biggest portal) wrote an article about me and Nukeation.com is now temporarily out of service due to the Slashdot Effect.

If you're interested in knowing about my boring history, you can read the article at http://shrinkster.com/jmo or http://www.rediff.com/getahead/2006/nov/01outsource.htm. The story is also on the front page at rediff.com.

Working with a designer for your application is a concept many developers find a bit new. A lot of developers we have been working with have struggled with different methods for working with us to design their app in WPF. So we wrote this little guide that explains one of the most efficient and effective methods of working with a designer or design studio to skin your WPF app.

Anyone can use this simple method. It allows the designer to work separately from the developer(s) in Microsoft Expression Interactive Designer or any other XAML editor. The developers work in Visual Studio (using "ORCAS" / "Cider") or ExprID and create forms as usual. The application would look just like any other Windows application. When the designer is finished with the styles, he or she gives the devs the file, they reference it in the project, compile, and voila!

You can read about the process, including source code, in detail in this file below:

PDF File (452K)

NOTE: This document is a draft version. Ignore any lingual or conceptual errors. The code, however, is error free.

Aero Glass
Just about everyone making (or thinking of making) an application for Windows Vista wants to try out the cool new Aero User Experience. Software such as Windows Media Player, Windows Calendar, and the Windows Sidebar really show off the Aero glass look.

While overusing the glass bit is a certain possibility (and a probability), using it judiciously can seriously help spice up your app. A few things to keep in mind when using Aero Glass:

• Avoid a full glass window. This creates performance as well as usability issues.
• Use full glass windows only for non-resizable, non-maximizing windows.
• The glass portions of the window should always allow the entire window to be dragged.
• When designing the window, keep in mind what it will look like in a pre-Vista OS – i.e., without glass. Always have a non-Glass look ready to fall back on if Aero is disabled or if the app is run on an older Windows.

This exercise will require a good GPU (128MB AGP recommended).

Thanks to Adam Nathan for the original code!

The Code

Create a new code file and add the following code:

 

In your Window.xaml file, make the DocumentRoot object's Background to NULL then just insert the following code (marked in bold) in the codebehind file:

You will get the following result:



If you replace the thickness(-1) with thickness(5,70,5,42) you get something like this:



You can download the full code below. It requires Windows Vista RC1 or later, .NET Framework 3.0 (RC1), and Microsoft Expression Interactive Designer September CTP.

AeroGlassExample.zip (14.43 KB)

My article has finally been published on MSDN. Thanks to the nice people at MS for letting me write this!

"The Human UX" or "The Human User Experience" is an article I wrote back in mid/late-2005 for MSDN. During the release of Visual Studio 2005, the article got delayed indefinetely. In retrospect, I think this was for the better. Some of my comments will hit harder now that people are using WPF and EID. Some of the references such as the Windows Vista UX Guide have been updated as well.

A couple of weeks ago, I got an email from Brad McCabe (Content Strategist for the Visual Basic website, as well Program Manager among other things) giving me the go-ahead to update the article (it was written in August 2005 - lots of things became outdated). I got an email from Brad today confirming that the article will soon be published!

For a BIG Microsoft fan (and why not, 60% of my life depends on MS!) there couldn't be a greater honor.

The Human UX serves as an interim-design-guideline - bridging the gap between designing for Windows Forms and designing for Windows Presentation Foundation. It focuses more on theory than on actual code so everything will apply to both technologies. Essentially, this article has "usability" at its heart. I hope for it to be a prelude to an article on WPF Design Do's and Don'ts.

The article was originally thought to be a VB article, then expanded to include C# as well. But my inability to cope with too much C# made it difficult to write it that nicely. And what about the guys who do C++ and J#? So at the end I made it platform-agnostic (to borrow a term from Ted Neward's site). Whether you do .NET or Java, GDI+ or WPF, VB or C#, Dogs or Cats, Batman or Superman, Doom or Half-Li... uhh, you get the idea - this will be good reading for you.

I got home a bit early yesterday and found myself with about 12 hours of extra time before I rebooted into WORK MODE. I whipped out Ressurection of Evil and finished it! Review coming later.

Am currently listening to The Wonders' THAT THING YOU DO (fantastic tracks!) and typing up the last remaining parts of The Human UI.

I've been posting so much not-so-substantial posts that I think it's time to make this blog somewhat richer again. So here is a preview (draft version) of The Human UI article.

---

The Human User Interface

Dax Pandhi

Nukeation Studios

 

We developers often see monochromatically. Well, that’s a bit harsh. We do have coloring in our code. But that’s about it. And sometimes we’re so pumped up on technology – especially new technology – and the function of the software (I bet even right now you’re saying “SHOW ME THE CODE, stop talking!”) that we forget the end-user just might have different priorities. We work hard to make the app work – they just expect it to work, so they have additional wishes too. This is truer if you’re into retail software, or something that will be used by non-techie people. While the first instinct would be to call them ungrateful, they are our customers, so let’s see how we can make the experience better for them.

The question is: if you are going to be spending a few dozen hours (or more) a week staring at a particular software, you at least want it to be easy on the eyes. You also want it – and need it – to be as easy to navigate and use as possible. With the amount of software being churned out, an estimated 4 out of 10 software have a UI that the end-user really likes and is instantly comfortable using.

A massive amount of software is created for corporations. Whether it is developed in-house, or under the care of a consultant – more often than not a bare minimum time, effort, or money is invested into creating a better UI. The ‘designer’ role is rare in the development cycle – especially in the world of Windows® applications. This is not to say your application’s UI is ugly. There’s just a whole lot more you can do.

There are some basic rules to follow to have a much nicer looking and better functioning UI for your application. It doesn’t require too much investment of time or money on your part, and adds a good return-on-investment.

Today we will discuss twenty points of UI design that you can integrate into your application design phase easily. The result will be richer applications with better functionality –a “human” UI. But before we delve into that, let’s talk a bit about the basics of proper UI design.

---

The whole thing will be published on MSDN soon.

This had to happen y'know. Too much GitS, GitS:Innocence, and GitS:SAC results in stuff like this. Especially when you add the already philosophical mode I usually am in.

Here's the first draft of something "complete" I've written in a LONG time.

Sentience.pdf (38.61 KB) Copyright © 2005 Dax Pandhi. All rights reserved.

Want more? Here's some geeky philosophy.

Developer Tools - be it Visual Studio or some lowly plugin - it is a form of perpetual motion. It winds its own spring, and keeps going, and going, and going. Now that's something to think about.

Finally, after days of cloudy, gloomy weather (which didn't result in rain either), the sun shines brightly today. As the sun sets in the west (like it would ever set in North!), and as a large database is being copied to my client's server, I sit in the twilight enjoying the last rays of the day, with a cool breeze, and Dr. Don Norman's books Emotional Design, and The Design of Everyday Things. These books serve as an inspiration for my article "The Human UI" (also inspired by The Human Factor columns from MSDN).

It has been ages since I wrote my last article. I've written some stuff now and then, but not a whole article - let alone a series. Previously, I had said that I would write a series of 101 articles on Avalon. Well, there are many changes in Avalon in Beta 1 and many more to come in subsequent releases. The biggest will be the addition of a visual designer to the IDE.

So, I have decided to create an open ended series of articles that revolve around UI design. I'll start with Windows Forms based UI, then move on to skinning, and later on to Avalon. So far, I have about 4 articles planned, with more to be added as more Avalon's fate is released. As with AVALONfiltered, I hope to have these articles published by MSDN. But if they don't want it (their loss), I'll be posting them here.

I also intend to cover the general theories of 'attractive design', the effectiveness of a good UI, and other design philosophies through out the series. I will be releasing the first article by the end of this month (unless MSDN really wants it, then it is totally up to them).

Skinning Metal

 

See also: PwopCatcher Skinning Video (new)

 

It all started when Carl Franklin, CEO of PWOP Productions Inc suddenly mailed me saying “I got a chance to change the world.” Carl was starting a software project that would change PodCasting forever (among other things). He wanted me to come up with a few concepts of what it should look like – it had to be skinned.

 

Carl had this abstract idea of something “warped”. After racking my brain for over 9 minutes, I sat down with my Tablet PC, and sketched out a quick metal skin with pencils and markers. Ripped out holes, embossed metal letters, and digital LCD screens found home on this metal object.

 

 

 

The idea got a solid ‘thumbs up’, and the work began.

 

Before I start blabbering about the whole process, I must point out that a good deal of ideas in the project were Carl’s or came from our discussions and my memory may elude me, so I may forget to mention, but that does not mean I forgot … umm, you know what I mean.

 

Metal Bashing

Now, there are some amazing tricks you can pull off in Corel PhotoPaint (or Photoshop, though PhotoPaint does have some tools that kick Photoshop’s ass) to achieve realism and create good looking metal and glass objects. But there are mixed methods that create even better effects – and that’s exactly what I opted for.

 

The first thing to do was create the base or body of the skin. It needed a solid, metallic feel – and what better to use than actual metal. I went down to a junk yard and got an old 3x3 aluminum plate. Aluminum is light, easy to manipulate and had the perfect bluish/galvanized tint. I marked out the rough outline of the body on the aluminum. Using an old rusted (purposefully) heavy pair of scissors, I took out the excess area from the sheet, leaving me with a rough shape of the body. The next step was to make careful incisions along key points of the body’s shape. The old, rusty scissors made jagged cuts. With some heavy duty gloves, I tore out the remaining excess metal with the help of the incisions. The remaining metal sheet was shaped like a ‘random’ shard of a space ship or something.

 

 

 

Now, the body needed depth. It’s a 0.5mm sheet. Very thin! So, I manually bent the edges. And made some noise with a hammer (along with some bumps and dents on the sheet). Now, the skin was looking closer to what I had in mind.

 

Point to be noted: There are limits to what you can do with a metal sheet to match the image in your head – these limits consist of mostly time, budget, and mainly your sanity. Scared of ruining this perfect shard of a spacecraft, I took pictures of it with my digital camera at 2848x2136+ - that’s very hi-res for an 800x600- skin. The brownish shine you see is my shirt. I tried to remove the coloring, but later on, it really helped me with some effects.

 

I decided to make the holes and other effects digitally. Taking samples from various regions of the body, and some hand-painted artwork on the Tablet PC, I ended up with a nice rectangular hole.

 

 

 

 

Depth was still lacking. This would need another round of photography. Taking my trusty camera, I headed off to the junkyard again and found the textures I wanted in an old hood of a car crash, a surgical lamp, and a failed metal sculpture project (I’m guessing it was that). The new photos were cleaned up and merged with some of my ‘proprietary blend effects’.

 

 

Pixel Bashing

Now came the digital part. I had to create LCD panels. Instead of going for “embedded” panels, I created solid, object-like, flat, rounded edge, glass displays. Painted them black, and placed them inside the central hole. The LCD screens would give the ‘status’ of the application. I created two warning-striped tabs, which would act as buttons, ‘behind’ the body on the top and bottom.

 

I won’t go too much into the detail of the process here, as it involves some trade secrets of mine, and the rest is just plain boring. Pixels pushed here, pixels pushed there, and so on. So, let’s skip to the future a bit.

 

And here we have, finally, a metal shard of some space voyaging vehicle with cool shines, metal anomalies, LCD displays, and wires hanging underneath it.

 

 

The PWOPCATCHER title you see in the lower right is homage to the ‘used universe’ / X-Wing paint effect from Star Wars.

 

You’re probably wondering why the makers of this space ship would make a LCD panel facing a metal wall, or why would there be buttons on OUTSIDE of the hull. Y’see this kind of technology and advanced thinking will not be seen in our race for the next 3 millennia. Remember, this is future technology. We haven’t invented it yet.

 

There were numerous changes made in the design process that weren’t in the original concept. There are some changes that will be made still. We keep improving on this, and won’t stop until it’s perfect. I’ll post updates to any major changes here.

 

Here is a screenshot of the skin in action!

http://www.nukeation.net/nukefiles/workinprogress.jpg

 

We have actual 32-bit transparency, full antialiasing, drop shadows that haven’t been seen before in this world (at least to my knowledge), and under the slick looking exterior, is a core that is made with the sole purpose of changing the world.

 

Last but not least, if you want to see an animated timeline of this skin's development, head on over to:

http://www.nukeation.net/nukefiles/NukePWOPSKINBORG.html 

 

Updates on the skins, the actual software and its availability, and much more will be posted as soon as it is available. You can find proper updates about the app at Carl’s blog http://weblogs.asp.net/cfranklin/

 

I’ll be posting another short like this one about our other skin code-named ‘SmokingGlass’. It’s just as fascinating as this one, if not more so.

 

UPDATE: See the step-by-step video of this skin.

 

EQUIPMENT USED:

Hardware - FujiFilm S7000 digital camera, rusty scissors, old hammer, 1 3x3 sheet of used aluminum, grey matter (6 oz.)

Software - Corel PhotoPaint, Pwop SkinMaker (for skin definition)