Monday, April 20, 2009
My Silverlight and WPF Examples from DevConnections
At this spring's DevConnections conference in Orlando, I did 3 different sessions that were all UI related:
- General UI design
- Silverlight Business Applications
- Expression Blend for developers
You can now download the sample code for these. WPF is here. Silverlight is here. (The UI design session didn't have any code).
I also recorded a short video showing the Silverlight demo app, which was kinda cool. Here it is (view in HD for the best experience):
The external download link for the video is this:
Posted @ 10:56 PM by Egger, Markus (firstname.lastname@example.org) -
Sunday, April 19, 2009
Thinking about Advertising
I am thinking a lot about advertising. This is due to a number of factors. For one, I own a magazine (and the associated online components), but for the other, I also run a software company (EPS) and a few related properties such as Tower 48 and Xiine. Oh, and I have a substantial family history around marketing and ad agencies, and I have a little bit of a personal history in that department. So I am in a position to be both, a seller and a buyer of advertisement. And as such, I am thinking about a lot of things such as print vs. online ads, or direct mailing vs. viral marketing. (And it also makes me a party that is partial to all this. I am trying to present an accurate "brain dump" of my thoughts here, but I thought I might point that out ;-))
So the question is what advertising works best?
Now that literally is the million $ question, and there is no clear answer to this. Generally, about 50% of all ad and marketing budgets are wasted. It's just that nobody really knows ahead of time, which 50% that is. However, there are a few things that are known to work better than others across the board.
In general, people absorb ads better when they are bored. If you are standing in a mall, waiting for your friend (or wife? ;-)) to come out of a store and meet up with you, your mind and eyes are likely to wander around, absorbing just about anything there is to absorb. Store signs, ads, people. That's what the bored mind does. It looks for something to entertain itself, or keep itself busy. On the other hand, it is difficult to get the attention of someone who is focusing on something else. Race car drivers probably don't spend a lot of time thinking about billboards they speed past for instance.
In terms of software or service sales, this roughly translates to the following: When I lay in my hammock in my back yard on a Sunday afternoon reading a magazine for fun (as I just did a few minutes ago) or when I sit in a plane reading a magazine before take-off to kill some time, I am in a mode where I *want* to absorb everything the magazine has to offer me. I read mostly the articles, but if an ad catches my interest, I read it all the same. That's because I am explicitly in a mode where I try to give myself (or my brain) something to do and absorb. A very similar thing happens when one stands at a bus-stop or a subway station waiting for the bus, with little ability to do anything else. Receptiveness to marketing messages (and all other kinds of messages) is very high at that point. (Not quite that much in an airport, btw, as the interested target audience for the software field tends to bring out a laptop... this would be much harder to do at a bus-stop, but then the % of developers using public transportation is somewhat lower than say students). So poster ads at these "waiting points" are usually pretty good value as well.
Then there is online advertising on the other hand. Imagine this scenario: You sit down in front of Visual Studio and try to get a new program to work that uses this new technology you just started discovering. However, something doesn't seem to be working, so you set out with a web search to find an answer to your problem, so you can wrap things up and go home. You find a few articles about the subject matter and click to the site, use the browser's find feature to find a few specific points, and there is your solution! Oh, and btw, there also is a banner ad in the right hand column. How likely do you think you are clicking on it, or even noticing it? Yeah, probably not much. I'd think you are more likely to click it by accident than deliberately. Usually, especially for technical things, people tend to be in a mode where they are highly focussed on a specific task, and getting them sidetracked with a product or service offering is a pretty long shot (unless your product fixes the very problem at hand... but even then, chances the user will see it are slim). Now admittedly, the online problem doesn't apply to all sites equally. If you are routinely reading a few blogs for instance, you are probably in a different frame of mind than when you are looking for a solution to a problem that plagued you. Or when you browse your favorite news site every morning, you are probably also more in a receptive mood.
Another option is email marketing. This one is a mixed bag. If you can deliver something of interest (such as an actual article), people may end up keeping the email and read it when they have more time (at that point they are in a more receptive state of mind, which is good). A very large percentage of email messages however goes unread, because the typical state of mind people are in when they go through their inbox these days is "I got to get rid of as many of these messages as possible, because I already can't handle them all anymore...". And that's if you get through the spam filter. (And if people perceive your email as spam, you are fighting a losing battle anyway... you need to offer value!). Maybe you can piggyback with a provider of email articles (such as CODE Magazine <cough>... :-)).
There are a lot of things one can do to advertise, and the online approach has seemed pretty appealing over the last few years. (And many of the potential advertisers for our magazines tend to go with a lot of online advertising). However, I have to admit that the click-through rates are pretty pathetic. We are advertising some of our own stuff on various sites (including Facebook and Google), and it takes an ungodly amount of "impressions" (displays of a banner) to get just a few clicks. And I guess that isn't a surprise. On the other hand, many online models charge only when clicks happen, so at least there is a protection mechanism built in for the ad buyer.
Then there is viral advertising. Microsoft's "I Love Bees" campaign comes to mind, which they used to advertise Halo. However, while those campaigns work great, it takes considerable clout to get them off the ground, and they only work well because they are so unusual. In other words: Extremely difficult to pull off, and only a few of those really ever work well.
Let's take one example scenario I am currently thinking about a lot: We are about to launch a new company called Tower 48. Tower 48 is a software escrow company which we will launch within the next few months. Do you have a software company or offer software services? Has your customer ever said "that's all great, but what do I do if you get run over by a truck?". Well, that is exactly what software escrow solves for you. You can put your code into escrow and if something happens (such as you close down your shop, or you get run over by a truck), the software is released to your customers. This way, they are protected without you having to give up the crown jewels. Tower 48 makes all this affordable and high tech. You can automatically escrow your software as part of the Visual Studio build process for instance.
Anyway: Question is how to get the word out about Tower 48? We certainly want to do some online banners and such. However, we are very seriously considering magazine ads, since they will reach a lot of people and people will consider us a much more serious undertaking. ("Everyone can run an online banner, but only serious companies run print ads..." people think). The web is a great place for a small guy to look large, but what happens mostly is that it makes the large or serious guys looks small. Looking for a real good way to look professional? Run a print ad! (It's not nearly as expensive as you think, and with the current economy, you can probably get some good deals!). Print ads also tend to give you longer exposures. Especially technical publications tend to not be thrown away. A lot of people keep them or at least come back the PDF versions (or Xiine versions in our case). With CODE Magazine for instance, people automatically get 2 months of exposure at the very least, but I would argue that the average is much longer as we know that a lot of readers collect all the articles. We also take multiple issues of the magazine to trade shows. And CODE Focus magazines often are given or mailed out for more than a year. And how many print magazines do you think there are compared to web sites? Especially with the recent "thinning out" of the market for developer publications, you can advertise in one or all of the remaining ones and have a large part of the market (or the whole market) covered. That is a pretty good deal! Not many outlets provide such wide coverage at this point.
The one downside of print ads is that it is harder to measure results though, so make sure you provide a unique offer in your ad that is linked to a specific URL, so you can run statistics as to how much the ad produced!
So we will def. do that, but we are even thinking about direct mail again. This was something we didn't do at all in the past few years, but with email being just about useless for marketing these days, snail mail is starting to look a whole lot better again. It is expensive (especially with recent rate hikes), but hey, I would rather have something that is a little more expensive if it produces results, than having something cheap that doesn't work!
One of the other things we are thinking about is something new we are starting with CODE Magazine: We have in the past published CODE Focus magazines, which had a ton of great content about specific Microsoft technologies. They are free, and people love them. It is some of the highest rated content we produce. So why not do the same for other people's products? In this specific case, we could do a special issue around Escrow. It would be clearly sponsored (paid for) by Tower 48, but it would have content produced by regular editorial staff, with CODE Magazine having full editorial control. It would talk about escrow in general, but it would also talk about the Tower 48 offerings, such as how to use the Tower 48 web services to integrate with the escrow solution. It would be of great value for the interested reader, and it would be a great way for Tower 48 to get the word out. It would certainly be something people wouldn't just throw away if they had at least a remote interest in the topic. I think it is a great deal for anyone involved! So that will be a big part of the Tower 48 campaign and from a CODE Magazine point of view, we will make the same thing available to other vendors and products.
What else? I have heard some people considering fax campaigns a good idea again. I am not so sure about that. Fax campaigns produce cost and considerable hassle (more so than snail mail and email) on the receiver end, and thus produce a large amount of ill-will. Personally, I hate it when I need to change the paper in the fax just because some company I do not care about sends me a lengthy fax ad. Plus, legal hassles around fax campaigns tend to make it more trouble than it's worth.
Another option is tele marketing. I am no fan of tele marketing. It never produced great results for us, and it is a massive annoyance for the recipients. And after all, you do not intend to annoy anyone. You want to get the word out, but if someone has no interest, you can safely remove them from your list. All these people do is add to your expense and they will never buy anything from you. And from their point of view, you are just one of those annoying sales jerks. Better for both sides to not touch base again.
So there you have it! It is my personal view of the ad world today (April 2009) and I am sure it is somewhat biased to what we do. (Personally I like to think it is the other way around: We do things, like producing a print publication, because we think it works well). I hope it provides some valuable ideas.
Posted @ 6:02 PM by Egger, Markus (email@example.com) -
Thursday, April 16, 2009
MS Publishes Case Study on EPS
Microsoft has published the case study they did on EPS and our efforts around WPF, Silverlight, Surface, and Azure. Check it out here:
Posted @ 8:45 AM by Egger, Markus (firstname.lastname@example.org) -
Wednesday, April 15, 2009
Houston Channel 39 Video on EPS and Surface
A little while back, Channel 39 here in Houston did a news clip on EPS and our use of Surface. Check it out:
Posted @ 10:02 PM by Egger, Markus (email@example.com) -
Sunday, April 12, 2009
WPF and Silverlight Designs Must Also “Work”
Over the last few years (and especially the recent past), I have spent a huge amount of time creating “skins”, “styles”, and “themes” for WPF and Silverlight applications (especially business applications). This task requires a combination of development and graphical design skills. Personally, I am not a designer, but I consider myself a “design savvy developer”, and due to my work in the publishing and marketing spaces, not to mention web development, I have had a great deal of exposure to the “visual arts”.
Armed with that information (and hopefully a good dose of common sense), it was somewhat clear to me that there would be challenges in getting the two camps to work together. There are technical challenges (most of which turn out to be addressed very well by WPF and (to a lesser extent) Silverlight. There are also cultural challenges as developer and designer minds tend to think in completely incompatible ways. I expected all those. However, there is one very specific challenge I didn’t initially expect: The need to create visual designs that work in a technical, almost mechanical sense.
What does that mean exactly? It is probably best to explain this by comparing WPF and Silverlight applications (especially business applications) with other applications we did in the past that required developer and designer cooperation. The simplest example for that are web pages.
In web pages, designers create elements such as header bars or navigation menus among other things. So for the sake of argument, let’s say we have a web page with a header going across the top containing a logo and a navigation bar. Similar examples can be seen on many pages such as www.mcirosoft.com or www.google.com, and chances are, if you type a random URL into your address bar and see a similar setup. So how would a developer and designer work together on this? Well, at first, one would agree on certain features the element needs to support, and then the designer sits down and creates a mockup, either in HTML or in a graphics program such as PhotoShop. Then, after a few iterations and everyone is happy with the design, the developer may end up taking the imagery and break it apart into actual image files (probably a background image and a few smaller images, and so forth) and create a master page or a control that can then be reused across the site.
One of the characteristics of almost all such setups is that the technical requirements for such a title bar are simple. Generally, such title bars have very limited resize logic, if any. They generally have a certain width and are either left-aligned as a whole, or centered as a whole. At most, the navigation bar buttons (the individual items in the “menu”) may resize proportionally, which is a behavior that in HTML is achieved almost by accident. The complexity of such activities are relatively low and designers can easily account for needed “functional” elements such as mouse-over effects on navigation buttons.
Flash web sites are somewhat similar, although more complex in their graphical capabilities. Therefore, designers probably have to do a bit more work than they would on a similar HTML based app. They have to worry about animations and media, and generally, the bar is higher than for HTML. However, in terms of developer/designer interaction, I find that things are often similar to the HTML scenario. Once the designer comes up with the navigation elements of the Flash app for instance, they tend to exhibit similar behaviors to the previous HTML application. By and large, Flash sites exhibit similar resize behavior to the site above. Granted, things might be a little more complex than in the HTML example, but not by orders of magnitude.
Enter: The WPF/Silverlight Business Application
The WPF and/or Silverlight Business Application is an entirely different beast altogether. For one these applications tend to be vastly larger in scope. A typical example of a Flash driven web site might be the booking page for a large hotel for instance. Go online and book a room in Vegas directly with a hotel, and you are likely to be lead through a Flash experience. Now I don’t want to take anything away from the developers and designers building these sites. They are often very elaborate, but at the same time, they are tiny in size compared to the entire back end system the same hotel uses to run its operations. And in WPF (and potentially in Silverlight as well), we are talking about building these types of enterprise systems.
In short: For the first time in history of software development, we have brought professional design and polish to large systems.
And this changes everything. All of a sudden, the things the designer created have huge hurdles to jump through. It is not enough to design a beautiful navigation bar with a menu anymore, but that design must work throughout the entire application! Let me give you an example: In one of my recent projects, we designed a header bar with a windows-style menu as well as a “circular menu button” similar to the “Office Menu” button in Office 2007 and the Ribbon. We also designed collapsible sidebars on the left and right side of the windows. This allowed developers to add navigation trees and research panes in the sidebars, while a familiar menu runs across the top, and “other items” can be added to the “circular menu button”.
The design we came up with for this is something I grew very attached to. Copyright and confidentiality reasons keep me from presenting it here, but all 3 elements were curved and very pleasing to the eye and “next-gen” looking while remaining a very professional appearance. The circular menu overlapped the header bar a little bit, with the bottom few pixels of the curve overlapping the left sidebar slightly with a very subtle drop-shadow effect. The curved sidebar areas meant that when those panels were collapsed, they used up very little screen real estate and still kept the expand/collapse controls visible. In short: A thing of functional and professional beauty well suited for a business application.
But there were issues that were not apparent during the design phase. Let me give you a few examples: For one, things worked very well when we had sidebars on both sides, but not all forms throughout the application needed sidebars. Some only needed them on the left side, others didn’t need them at all. So while our design was beautiful, it had to be adjusted to work with all those variations throughout the several hundred forms the application has.
Furthermore, collapsing the left sidebar caused the circular menu to “hang into the main content area” since we designed it to create that overlap, which was what really allowed the visuals to break out from the old-fashioned angular look. This was not a problem in windows that sported a left sidebar (in either expanded or collapsed state), but when there was no sidebar at all, the control often overlapped the label or control positioned in the top/left corner of the window’s content area. Not exactly what we had in mind!
Another problem area was the menu. What looked pretty good in our draft designs for a handful of windows looked horrible in windows that had a large number of menu items. It also looked bad when we only had a few menu items. What made the problem worse is that we designed a quick-search feature we envisioned every form to have. This was a search textbox and drop down in the top/right corner similar to the search boxes in many browsers. Once we started using that in hundreds of forms, it became apparent that we needed a much more flexible approach. Sometimes we wanted a more sophisticated query approach, while in other scenarios, a search feature made no sense. Either way, the look became very lopsided and looked really bad. Not the professional appearance we had originally designed.
And at this point, we haven’t even discussed resizing the windows, or putting the same design into very small data entry forms or very large list windows. In web pages, designers never had to think much about what was going to happen when the user resized the web browser to be only 200 pixels wide. In a business application, you have to worry about such things. What if the sidebars start overlapping, because the windows is too narrow? What if the search or the menu items don’t fit anymore? Oh, and that fancy class effect highlight that went across the background that was barely noticeable before and just looked good, all of a sudden ended up twice the intended width, which means that the drawing brushed used for it now stretched the perfectly circular arcs into oddly distorted white smears that stick out like a soar thumb, not just because they just don’t look like a glass effect anymore, but also because they are now overlapping elements that it was never designed for. Things can go south very quickly in these scenarios. Graphics effects often work when they are just right and are noticed only subconsciously, but once they start standing out in odd ways, they look awful!
And those are just a few examples from the navigation area! Another example would concern the data grids used in the application. As many business application, this app was very data heavy, and we really wanted to distinguish the app by visualizing the data as efficient as possible. Of course we also wanted to do so in a consistent way across the application. We ended up designing a grid that had the ability to expand a detail area so people could easily get at more information concerning the record. It all was beautiful. However, business applications have hundreds of grids and every single one is different. Designing a fundamental grid style for a WPF or Silverlight business application that works in all these cases is very difficult and enormously time consuming. Compare that with the lists of data shown by a Flash application, where the number of lists is generally limited to a few throughout the app, each of which you can probably design individually, while in a WPF app, one needs to create a style that can then be flexibly applied by a small army of developers who are not likely to have any graphics skills whatsoever.
Oh, and then there is performance to worry about. That drop shadow I mentioned above? That is implemented through a WPF effect that supports hardware accelerated rendering. (Stay away from Bitmap Effects, which are the older version of WPF Effects and perform very poorly!). We ended up using various effects throughout this application, and in many cases, what was simple to create for designers in PhotoShop or Expression Design (where performance really doesn’t matter), it was rather difficult to create the same thing in a running app without having drastic performance impact. At one point, we used an outer glow effect on selected controls that completely broke other elements of the application, such as expanding and collapsing detail areas in grids or sidebars. How many designers do you know that have an understanding of such cross-dependencies and consequences? … Yeah, I don’t know many either ;-). So we ended up writing some pixel shaders on our own to enhance the performance of some effects. How many .NET business application developers do you know who can write pixel shaders? … Yeah, me neither. I personally have done DirectX development before and therefore, have somewhat of an understanding of shader development, but that was mostly a lucky coincidence due to my enthusiasm for all things graphical.
So that’s my story. Thought I’d share. It really is just a small glimpse into the subject at hand, because this is a problem that arises out of the complexity of the issue, and thus it is really difficult to explain in a few paragraphs. There are hundreds of examples like the header bar or the data grids, where something that used to be fairly similar in previous graphics design for user interface scenarios that have now grown several orders of magnitude in complexity.
Personally, I enjoy this type of thing tremendously. Doing Silverlight and WPF visual development represents the most fun I have had in development in years. Unfortunately, it has been extremely difficult to find people with this combination of skills, which is why we have put such effort into teaching our staff at EPS (the parent company of CODE Magazine) these skills. And of course, we are always looking for people with an interest in these areas.
Let me know what your experiences are with this type of work.
Posted @ 11:02 PM by Egger, Markus (firstname.lastname@example.org) -
Wednesday, April 08, 2009
CODE Magazine Redesign
As readers of CODE Magazine know, we recently applied a facelift to our logo, layout, and overall graphical direction. This includes various things such as the new logo itself, the cover design, Surface tags on the cover, and a new text layout that allows for more content on each page, and at the same time provide better readability.
I have recorded an internal video about some of the changes. I have now made this video available on YouTube:
Here is an external link to get to the video:
I am looking forward to your comments. Enjoy!
Posted @ 11:43 AM by Egger, Markus (email@example.com) -