The MossyBlog Times Archives 2007 - 2009 : UXE

Inspiration, getting to the core.

scbarnes — Wed, 28 Nov 2007 14:13:56 GMT

"...Good artists copy. Great artists steal.."
-Pablo Picasso

I get asked a lot "where do you get your ideas for UI from?" when i often show off some of my artwork. It sounds arrogant, but it's the truth and yet I never really have a response.

I often at times get it from the smallest things, I could see a movie with something that Mark Coleran and his crew conjured up, or I could simply see a piece of GUI on a mobile phone and then suddenly - it just comes to me.

I often search hard for a muse, something to inspire me to push my interactive creations further and deeper. I like most probably hang out at places like "thefwa.com" and simply comb through the many showcase examples, waiting for that "thing" to poke out and get the creative juices flowing.

I also at times let accidental evolution take place, in that I can sometimes just sit there and design, add elements here and there bits from around the web that I like and suddenly, it's done.

I think nothing of it, walk away from the design, wake up the next day look at it and think "woah.. did I do that.. " and then send it around to as many people as I can to see what reaction I get.

I mention of all of this as I think it's time for Microsoft to lead in this space, and I know - we are a developer company, design is something we are slowly growing into but keep in mind, we have some of the best talent around hired to design graphical user interfaces from operating systems to visual studio icons.

I'm working with many folks inside Microsoft UX Fanclub as I like to call it, to ensure that this bubbles to the surface as for me, I'd like to see more "muses" out there, stuff to inspire the masses and help change the way UI is produced tomorrow.

Where do you get your muse from?

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

scbarnes — Thu, 15 Nov 2007 11:18:00 GMT

I've been enjoying the overall experience of what Silverlight has to offer since I started with Microsoft back in January 07. That being said, I've often been an internal "goto" person at times for some Flash advice on behalf of Microsoft customers around the world.

In light of this, recently I also encountered a situation where a customer was looking to use both Silverlight and Flash together, something which I kind of gave a confused look at? (ie .. not because I wanted them to pick ours etc, but more to the point what was the root of the problem).

The problem was simply that they had deadline to meet, they wanted to retain the video in Windows Media format but were looking to use the GUI inside Flash as a base. Fair enough, this isn't a Zero Sum Game and we play well with others.

This isn't the first I've seen similar stories around this, but mostly its from Design shops around the world whom are keen to embrace Silverlight and Flash (fingers in both barrels) but are kind of skittish to start with (i.e. the assumption is really you have to pick a team, red vs blue).

Thus, I decided to put together this proof of concept, titled "Harmony". The project is quite extensive and I'll spend the next month dissecting it and talking about different cross-sections of how you as a designer & developer are able to produce compelling enriching experiences with Silverlight and that you can execute on your creative vision. The rest is simply semantics and bits/bolts.

In this first iteration of my Project "Harmony" I wanted to test to see how well the performance would be in the event one was to use 90% Silverlight and 10% flash. In that overlay Flash on top of Silverlight and see what happens.

The results speak for themselves, suffice to say that I really put in a lot of gratuitous animations in Silverlight to really try and break the performance overall.

You can view for yourself here:

http://www.demo.members.winisp.net/poc1/

(Note: Link Requires Silverlight 1.1 and Flash 9.x)

My Objectives for this first iteration was:

Objectives (v1.0)

Determine to see if Flash (Transparent windowless) degrades in performance in the event it sits on top of Silverlight.
Determine if PNG overlays impact the performance of the video whilst mixed with Flash.

Conclusion (v1.0)

I did see some performance degrading on both technologies, but that is mostly due to both making use of alpha transparency (I'm yet to meet a runtime of any brand that can withstand alpha transparency)
Working inside Flash & then crossing over to Visual Studio / Expression Blend is not for the feint hearted (I kept tripping up in C# vs AS3.0 scripting syntax hooks hehe - nothing against both technologies but its more of a mind map thing).

Highlights (v1.0)

Using PNG's a designer is capable of doing some interesting things to a graphical interface. In this case used a bullet that appears to not only be embedded into the TV Screen but also shatters it.

I also added the "bullets" in the top right corner as PNG overlay to also test how 2xOverlays inside the Video would perform.
Using Video Reflection within Silverlight, one is able to really bring home a gloss finish by giving it a "glass" effect (as we all know there isn't enough glass effects online
Using an infinite loop within Silverlight, I was able to create a "ambiance" feel to the UI by making two sets of images fade in/out underneath the Flash area and the Silverlight Video. This again, was to really see how the performance would go with a Silverlight animation underneath Flash.

Using Adobe Photoshop for the bitmap artwork, I stumbled upon a technique whereby if you take a photo, duplicate its layer and then apply "gussian blur" with 50% transparency it kind of gives this glow/ambiance effect commonly seen in most games today.

Silverlight (Video aside of course) handles its progressive loading of assets in a unique way, I'm yet to put my finger on it but I must look into this more as I expected the GUI to take much longer to load (as there aren't any preloaders in this design).
The Flash Slider (ie works like iTunes) was done reasonably quickly, and the code has already been ported to Silverlight suffice to say, it looks seamlessly integrated within the GUI and unless you don't have Silverlight or Flash installed, it would argueably be forgiven as being part of one technology not 2.

It's a small experiment at first, mainly to test the waters and see what holds together initially.

The walk away message here is simple, this isn't a Zero Sum Game firstly and I want to stress that the most. The other impact is that if you're keen to try Silverlight but aren't quite ready for that big leap, it's ok you can use both without penalties implied.

The last but most important of all, is prove your concepts initially. In that if you're looking to switch from using Flash (for whatever reason) and aren't bold enough to do the lock stock and barrel or aren't allowed to, that's ok. Establish some objectives initially, build a Proof of Concept (POC) and chip away at the idea, as you will no doubt learn both technologies limitations faster than any book can really teach you.

The secret of a truly successful RIA in my opinion is knowing the technologies limitations.

The next POC (pt2) I'll talk more about the JavaScript Bridge and how I was able to make the Thumbnail Slide load up the Video Playlist etc. I'm also putting together some Video Casts on not only how I made this but also will upload the code once I get it locked into Codeplex.com (open source). All code & design is hand-made by myself only.

(NOTE: This is a crude, raw POC and progress bars etc for both technologies aren't important for this initial purpose. They are coming, and I'll talk more about that later. Again, this is a POC so don't lock this down as some end to end final production grade solution).

(NOTE: I used Teamfortress 2 Artwork, because it's my favorite game at the moment, I have personal history with it and well, the Soldier video is by far the funniest game trailer I've seen in quite some time. Valve Software are legends in my book - My Steam ID is "[te] Skittlez")

Next: The "HOW" (Code Dump / VideoCast).

Related Post: Writing Proof of Concept RIA's

RIA Hopeful: Chore Wars.

scbarnes — Sat, 27 Oct 2007 10:54:28 GMT

I was browsing the web and I stumbled upon "ChoreWars". A brilliant concept, whereby parents can set chores for their kids and they in return earn experience points (XP).

I look at this solution and not only do I applaud it's approach, but it leaves me wondering how far you could take this concept further. In that, I'd love to see this in some kind of hand-held device, that uses a more "Rich User Experience" approach.

The reason why is, i'd like it to unlock the XBOX 360, PC or maybe even a digital padlock to a bike or something. As this will give the kids an incentive to do the chores and also take on other "Quest Logs" whilst at the same time empowering parents a bit more control over the situation (use the gaming concept for good instead of mindless evil).

I look at my 4yr old son Corey, and already he dominates my XBOX 360 more than I do (Surfs Up is the best Kids game at the moment) and I'd like him to tidy up his toys. The way I get him to do this is essentially hold the XBOX 360 to ransom. If he fails to do tidy up, simply put no XBOX 360.

Yet looking ahead, I'd like this Chores concept + Device and I can see some potential in terms of using a RIA to bring the same experience across the board - Rich Web, Rich Device and Rich PC. As I'd like him to sync up his device to the Internet via XBOX 360, PC Client Software or Website.

It would also be a great starting point to learning his Math(s) and so on.

We need to take concepts like this and apply them to situations in day to day life, as this will be an exciting use of the technology and emphasis that User Experience can start at the Chores level.

I am hopeful this concept one day will become part of the RIA ecosystem and not be simply housed within a website (boring, we can do better).

Microsoft UX.Artu.Tv

scbarnes — Mon, 13 Aug 2007 08:08:15 GMT

Arturo Toledo, Product Manager for UX Platform & Tools (Silverlight, WPF, Expression...) has spun up his own blog found over at http://www.ux.artu.tv/. Arturo is a classic artistic soul and he has some interesting insights once you get to know him - hint: subscribe to his blog as you will see one of the inner working UX minds behind the scenes in Microsoft.

He also has a list of updated features in Expression Blend 2 - August Preview. He should know as chances are he's the one of the few overlooking them.

One standout feature for me is:

Make User Control
Expression Blend 2 August Preview contains an early look at new functionality that lets you re-factor existing content into a control that can be reused (instantiated). Currently, only selected elements—and their referenced resources—can be re-factored into the new control. Any referenced animations are currently lost, but the current plans for next release are to preserve these as well. You also need to build the project to be able to see and instantiate the new control.

Other UX related bloggers are:

RIA and Search Engines.

scbarnes — Sat, 04 Aug 2007 08:46:52 GMT

The latest annoyance with RIA (Rich Interactive Applications) these days (not wide-spread thankfully) is how they aren't really suitable for search engine's such as Google.

There's a reason for this and it's simply put, they aren't web pages. They aren't documents, and furthermore they aren't worth indexing. That being said the data that they connect to, is all of this and above.

You see, the confusion kind of sits around how they are deployed, in that we typically gain access to a RIA via a browser right? In this context, then by rule of thumb they should be indexable and search able by our favorite search engines - after all, it's the browser paradigm right?

Actually no, the browser is simply the payload first and foremost, it's your footprint to gaining access to the RIA in question. In some cases (AJAX/Silverlight) the RIA makes use of HTML or XAML, so surely that means it's crossed the boundaries of being part of a graphical element and into indexable data? Wrong - this is just us using the subset language we've been dealt to produce layout, or positioned elements on screen and although the code is somewhat transparent, assume it was just a ball of .DLL.

How does one strike a balance then? Take a look at the New York Times Reader built in WPF, this by far is a perfect example of a RIA. It basically connects to a remote location, downloads the latest news articles, saves them as XML packets on a person's hard drive and then is indexed by Windows Vista. If you were to go to your Start -> Start Search, type in say "IRAQ" you'd get all news articles relating to IRAQ. If you then click on the article in question, up comes the story inside the WPF Reader in full view and within context.

This is what the next evolution in RIA Designers/Developers will have to think about, how does one produce a high-end user experience to end users whilst allowing them to hunt for information of interest via search engines. I think the WPF Reader methodology is one of many correct ones to use, and this is realistically where deep linking plays a role.

This all being said, we now need more RIA Architects, as the developer & designer base can do the between bits, but it's important to have an architect whom can see the overall vision end to end.

Here's some good reading on this, and interesting thought process around these:

I'm an icon junkie.

scbarnes — Fri, 08 Jun 2007 06:17:27 GMT

I'm mid-way through a Silverlight application I'm writing called "MossyVideo Player". In the design of my application, I am making use of Icons to represent navigational elements that whilst aren't 100% relevant to the task, they are however close.

I could of designed the icons from scratch, but in truth I don't have the time or patience to do this, so in light of this I began an online hunt to find out what Icons are available today that are worth buying.

I've begun to compile a list of Icon providers I've found, but would love others to ping me with their favorite source for these little nuggets of brain candy (which I'll then post online somewhere with summary of each provider).

Icons can make the difference in my opinion on whether a user interface is visually appealing or absolute rubbish. I'm sure their is a detailed brain dump on why they exist and how important they are from a user experience perspective (I'll also dig up some more detailed wording on why, where and how they should be used from some of our UXE folks when i'm next in the room with one of them).

I also think that if you have the design ability and know how, you could make some nice $change in selling them (royalty free) to the next generation of RIA designers.