The Crazy Ones, One More Thing and Apple

I found out today that Steve Jobs has died today. I know over the years I've had a love hate relationship with Apple, some of you know me for my work as a Silverlight MVP drinking the kooliade but in 1996 or so I was sporting my Powerbook 150 and doing some ANSI C in code warrior and waiting for the next edition of Mac Addict in the mail while I would fight with the Mac Toolbox. I still keep that power book on my shelf to remind me of where I started.

Steve Jobs was a visionary, no one was perfect and like most shining stars they were not always fun to work with but Steve Jobs vision for industrial design and out of the box thinking has really changed the world. In my industry with so many smart people coming up with cool stuff all the time, Job's has been in many ways our guiding light, raising the bar and moving civilization forward. Steve knew that it wasn't about what we could do as much as how we can do it with style. His life's work is littered with revolutionary work that has fundamentally broken us out of the box. Even at the big Microsoft Conference BUILD a few weeks ago looking at all the new hardware coming out next year... really it was all inspired by Jobs. He has made us all better and his loss no matter what side of the kooliade your are drinking is lose to us all. He inspired us, he changed us and his mark will forever be felt in the human family. It truly is a sad day when one of our brightest stars passe's and to all those in the community, at Apple and his family. Our thoughts and prayers are with you and we all morn his loss.

http://www.youtube.com/watch?v=8rwsuXHA7RA&feature=player_embedded&noredirect=1

CloudPlumbing - Podcast/Interview

David Kelley (that's me), Principal User Experience Architect at Wirestone, talks about how UX should be a concern of everyone on the team and not just fluffy designer stuff. David has described his role as being the glue between designers and developers. He makes a strong case for both designers and developers to learn more about the other discipline for the sake of better communication and better products.

check it out here:
http://cloudplumbing.com/episode/david-kelley-interview

What is User Experience Design (UX Design) ?

An article I wrote for Media Magazine:

Many people including you probably have no idea who I am and frankly sometimes I don’t know who I am but sufficeth to say my name is David Kelley and I’m a UX professional. Am I a graphic designer? Well no not really. Am I programmer of some kind? Not exactly but I can write some code. My title is ‘Principal UX Architect’ and typically I don’t even find myself dictating ‘architecture’ of any kind albeit I’m passionate about that too. My job when it comes down to it is communication, to bring people together and more or less be the chief Kool-Aid drinker.

What? Now you’re more confused than when we started?

Ok let’s dial back a bit then. My job is to help my team design an experience that fills a need and tells a story. To understand what that meant you really need to understand ‘User eXperience Design’ commonly called UX Design. If you look up what UX Design...

read the rest here:
http://www.interactseattle.org/?p=919

Achieving Digital Zen in Retail

"My “thing” is more or less about embracing the digital space, integrated experience, and fluid emotional connections with a target demographic. I want to hear “wow that’s cool!” That’s when I know it’s a success. That was our goal with the on-demand software kiosk my team at Wirestone and I created for the new Bellevue Microsoft retail store.



Microsoft’s developer centric approach (“Developer, developer, developer!”) has put the experience with Microsoft tools at least a decade ahead of everyone else. Now we need to look beyond the developer centric approach and more and more focus on a user centric approach.

..."

Read the rest and watch the video here:

http://blogs.msdn.com/b/mvpawardprogram/archive/2011/01/04/achieving-digital-zen-in-retail.aspx

What I tell Designers to give me... Integrating and Digital Zen

Having composite teams with designers, integrators, dev's and the like on staff on the same time and working all in a unified set of tools like say, Expression Blend, Visual Studio, Silverlight etc etc etc for most of us is a luxary that we don't have. I have worked on teams like that and its awesome and all but not realistic all the time. Wirestone (the company I work for) is a great example what I would call the best interactive experience design firm in the world especially in the public facing/retail space (kiosks, touch walls, media marketing integration, social media marketing etc). We are truely awesome... But amazingly enough even though alot of these experience we build are based on some XAML related technology it doesn't mean that we have a zillion designers in blend for example. Like us it is not cost effective from a business standpoint to retrain all the designers out of Adobe, nor are most designers eager to switch...

Your response probably depends alot on your background. If you a ms zeolot you might think, why the heck not? if your a designer you might think 'dah' and there is a spectrum in between but as it turns out the biggest reason that its not cost effective is that there is a way... a straight and narrow path to a User Experience 'Zen' like team that works much like the above w/o using all microsoft coolaide (*gasp).

shhh... don't tell the ms ninjas...

As it turns out Microsoft did a bang up job with expression blend and probably the key thing is that blend does a wonderful job of importing adobe assets so well in fact that with a little bit of communication and learning to work together we still are able to achieve that zen state of designers, developers, IA's and the like working together at the same time on design and implmenetation. But there is a bit of a list I like to give my designers :) (don't worry there is another list for dev's;) for work on digital experiences

item 1. a pdf of everything they send me showing what they see looking at the assets (wiresframes, comps, redlines etc) native format is awesome too.

item 2. all typography with any font of any element that could maybe ever be dynamic as part of a digital experience I want a PSD typographic red line.

item 3. TTF's for all the special fonts that didn't come over in the PSD typographic red line.

item 4. all the UI elements are in AI (Adobe Illustrator). why? because it comes into blend almost as native XAML as its all vector based.

item 5. make sure all the elements are grouped in illustrator and named with something meaningful to humans... :)

item 6. illustrator elements must be inside the illustrator canvas or they don't work at all.

item 7. communication, communication, communication. talk about it. lets design together, walk me through the vision.

item 8. be nice to developers, not all of them understand the difference between Verdana and Helvitica nor do many of them appreciate the difference between padding=5 and padding=5.56793845. they are handicapped that way frequently.

now we can build some hot and sexy ui which is the only way I like my ui. if I don't have an emotional experience when I look at the ui the first time its not good enough.

From a business standpoint its not cost effective to re-train and re-purpose when we can do the same thing and still keep people in the tools they enjoy.

note: there is also a rumor aobut FXG files but I haven't tried yet but promises to be better the AI files.

Performance Optimization on Phone 7

A preview of an article I wrote for Code magazine. For the rest you'll need to wait for the magazine to come out. (oh and this is the unedited version so don't get to upset about things like passive voice or other what I call minutia)

For those of you that know me, you might wonder why I would be writing an article on Performance Optimization for Phone 7, I mean sure it’s Silverlight; and phone 7 has this coolness factor but I always talk about User Experience right? So what gives you ask?

Well when it comes down to it, without performance you don’t have much to experience. The dirty little secret is that performance optimization is a critical often ignored part of good user experience design more so when we are talking about a device barely bigger then a pocket calculator. Time and time again I’ve seen user studies where users see nothing changed for 2 seconds and they navigate away or otherwise assume the application is broken or the device is broken or the web page is broken. Users have no patience and the worst part is that 99% of performance optimization is… wait for it… managing user expectations or in other words ‘perceived performance’

Perceived Performance

Perceived Performance, what is that all about? Perceived performance is the difference between letting the user know that your app is doing something (by say using a loading animation) verses just a black screen. In fact much of the requirements around getting Windows Phone 7 applications into the market place are about perceived performance. Take the preloaded image that is included in your default project, if you don’t have one of those preloader images in your application then your application had better be bleeding fast or no market place for you. Applications only get a few seconds before they have to be up and loaded. For building ‘perceived performance’ and a great user experience start here with a custom preloader. Don’t just go with the default from visual studio either:

Figure 1: Default Splash Screen Image From Visual Studio

Start by building anticipation on phone 7 for your application with making this default preloader screen cooler or more ‘engaging’. You’ll note that in the default project this file is called ‘SplashScreenImage.jpg’. When you edit this file make sure it stays a ‘JPG’ too. JPG rendering on phone7 is much faster than PNG’s and certainly don’t stick other formats on your phone. The one exception to this would be using PNG’s when you need transparencies for example when making app bar icons. Here is an example of a great preloader that builds anticipation:




Figure 2: Customized Splash Screen Image

In this case the user is so caught up in the preloader that in this example the user generally wants to figure out how to get back to this preloader screen. Not only does this build anticipation but the user is generally so engaged that they don’t even notice the slow load and even might complain it loads to fast.

Perceived performance is about engaging the user quickly even if you app isn’t ready and this was one example. If you expect to sell your app your UX (User Experience) needs to be more than just a pretty face it needs to be highly optimized even if that just means perceived optimization. Let’s look at other ways we can make our apps scream.

9/10s of the law

Perception is 9/10s of the law figuratively but after the splash screen what is next? After your splash screen or preloader is thrown up on the screen next your app has the chance to load. Making sure you app loads quickly is critical again to over all perceived performance. In practice this means that your constructor should not execute more than it needs to quickly get something up. If you start some doing some huge work in your constructor then you are going to quickly start blocking your UI. Don’t do real work in the constructor as this will slow your UI loading. The less code between your preloader image and the app the better, but you ask what if I have a real app that needs to do real work?

Ok fine you’ve written a real app that needs to do some real work before it start working. Again part of managing user expectations is about ‘perceived performance.’ This doesn’t mean your app can’t do real work on such an under powered device (compared to my dual proc quad core 64-bit, liquid cooler desktop dev box), it just means you have to do it more intelligently. Our first real trick in learning to do this other then learning what not to put in your constructor is to use elements that are pushed onto the composition thread to keep people waiting.

What? Composition Thread? What is that about?

Threading on Phone 7

A big part of performance on the phone 7 is understanding the threading model. On the phone 7 we don’t get back ground process’s that we can run when our apps are not on the screen but we do get a few tricks that allow us to do some simple threading in the app. Basically on the phone you have 2 threads, the UI (User Interface) thread that is basically your app plus you have can some user defined threads but you also have this idea of a composition thread which you don’t have direct access to but you can take advantage of.

What is cool about the composition thread is that it is not blocked by the UI thread. If you have work that can be done on the composition thread it can continue even if your app is completed blocked via the UI thread doing some huge work. Typically you might have a waiting animation or a progress bar when something like this happens.

Say our app is loading something and we block our UI thread so we and the default progressbar control that is build into the Phone 7 Silverlight framework like this... (the rest will be in Code Magazine)

Windows Phone 7 UX with David Kelley (thats me)

Had a great time talking about phone 7 ux this morning on MSDN Radio doing a podcast. Here are some great phone 7 resources related to touch and UX:

Phone 7 Links:
http://developer.windowsphone.com/windows-phone-7/
http://www.windowsphone7.com/
http://www.mobileappmatch.com/?fbid=IzTBJbx-cNj

Josh Blake as a great book on multitouch: http://manning.com/blake/ or http://nui.joshland.org/

http://www.Silverlight.net/
http://www.SilverlightCream.com/

user groups:
http://www.interactseattle.org/
http://www.SeattleSilverlight.net/

Other UX blog links that are cool:

teasers and trasitions

early ux phone 7 concepts

Windows Phone 7 Series User Interface (UI) codenamed “Metro” Design and Interaction Guide

Metro UI The Windows Phone 7 Aesthetic

Its Ok to Think Out-Of-The-Box

It is ‘Ok’ to think out of the box, at least we keep telling ourselves that. I know we always talk about thinking out of the box but frequently this tends really be ‘think out of that box as long as it’s not too far out of this box’ so just use a different box and stay in it. Begs the question how to really think out of the box and how do we let ourselves know its really ok to do that?

Case in point was a project we did recently where we were tasked to build a touch wall for Nike Basketball and the World Basket Ball Festival in New York City. One of the key elements was this idea of helping people (ie targeted demographic being male ages 14 to 35) connect with the history of basketball. The idea of the ‘history’ of anything in most ideation processes is going to bring up a time line. How boring is a timeline though, been there done that. This story is abit about how we broke out of the mode of a stereo typical timeline but still be a timeline and not some other metaphor that is been overly used like the carousel or something like that and therefore how we really thought out of the box and allowed our selves to do it.

So how can we let ourselves think out of the box ‘more’ better [yes yes I know English, it’s just more fun this way]? With that let us talk about 3 points on how we can better enable real life out of the box thinking without limiting out selves to preconceived notions and build really sexy User eXperiences (in this case all about basketball) and be ok with it.

Emotional Connections

One of the biggest problems we have as User eXperience professionals is: understanding our users. Do we really understand them? Have we bothered? Do we think we understand them but not really? Being open to the fact that you might not, as a team, really know your target demographic is a good start to not just thinking out of the box but being able to let yourself think out of the box. In doing so how then to you really know your users and in that how do we know we know? I would argue that we must always be in a mode of trying to better understand our users as they are diverse and ever changing and as soon as you think you know them you don’t, so therefore don’t stop getting to know them.

More than anything then you need to learn to connect with them emotionally and through constantly working on that connection emotionally you can better use that connection and cater to it. Working with emotional connections with users gives us a basis for building UX that takes it to the next level and we can vet those against our users to gage how well we connect and we can see if our out of the box ideas will fly. The user then is the judge of our ideas and not our perceived notions about them.

When we are building UX it is important to keep this process of emotional connections with our users as this is how our ideas will be connecting and how our ideas fail. To really get out of the box that emotional connection is critical. Now the reason I chose to bring emotional connects up first is that this idea of emotionally connecting with users helps us in the other two points I wanted to bring up.

Communication, Communication, Communication

Remember when building awesome UX it is not just you. It helps me and my team at Wirestone to think of ourselves as a single unit. It is not the developers vs the designers, it is our team and us including designers, developers, information architects, UX architects, PMs, the customer, and even demographic representatives. Its all of us working together and as I’m sure you’ve heard if you have studied group or team dynamics at all the trick always gets down to communication. When we communicate and ideas flow freely in a positive non critical way where we can talk about them and try them out we always come out of with cooler better ideas. No idea is bad it’s the degree in which it is awesome that matters. When a group or team then understands the business goal, understands the ROI, the technology, the information and content and are passionate about what they are doing and then fully communicate openly freely and often then things always, always go better.

Let’s get back to that Nike touch wall thing I mentioned earlier. As it turns out this was a case in point where brainstorming with the entire team was really a key defining moment it this projects success. With content we clearly had a demographic that was passionate about the content but really we had 2 kinds of elements to present and the typical time line was just so over done and not unique and some one other then the designers and developers in the room suggested why don’t we just have two lines one for this and one for that… of course at first much of the team scoffed but it was the most unique idea and no one could think of a reason not to at least try it. Getting a sample of the content together and putting in to a dual timeline that would expand and grow depending on which elements were of interest was an interesting idea and when put in front of users it worked much to many of our surprises. Further with a slight bit of gratuitous movement we found that it made it easier for users to wrap their heads around the content and learn to explore making the new dual timeline metaphor easier to understand or in other words more ‘discoverable’.

Let the Users Decide

The key then to the Nike touch wall success turned out to be putting it in front of users and letting the user decide if it was cool or not. Frequently we jump to conclusions about our users that may or may not be true and truth be told nothing is better than putting the UI in front of the real users to see if a UI/UX works or not.

Part of putting your ideas for UI in front of users is for the team to understand who the user is. One of the key tools a lot of people find successful is to have personas or virtual people that personify your typical user. This method also makes it easier to help other understand the user your team is targeting and help is finding real life version of the user. Even informal UX testing helps and in fact in our case we use some informal UX testing up front and additional more formal UX testing at all phases of the project to help let the user’s guide our creativity and our thinking. When we put our ideas in front of users it helped us focus on what worked best and in fact find the out of the box ideas that really worked.

Summary

That all being the case, letting ideas flow and putting all of them or the most unique ones in front of users can help bring focus to the out of the box thinking, where the entire teams is involved and no idea is left un vetted in front of users. Why is it ok to think out of the box? The reason is you will find the next best idea waiting for you and through that idea and the emotional connect with the user that you understand your UX will more likely hit the mark, be out of the box and a home run metaphorically speaking. Thinking out of the box requires that you let yourself as a team be open to all ideas, to give them serous configuration and let the user decide for you. Go forth and think out of the box (well at least head in the right direction). Like anything it takes time for a team to get up to speed and a willingness from everyone on the team to work together with novel techniques like ‘communication’, ‘brainstorming’ and the like. Here is hoping to see your next Hot and Sexy User eXperience…

also published at: http://www.interactseattle.org/?p=704

Interact and Seattle Silverlight Videos Online

in the 5 minutes of free time I have each month I finally managed to get some videos that were takening with a flip cam at some of the local user group meetings posted on vimeo:


Summer Series Touch and Beyond: The Psychology of Future Interactions
http://www.vimeo.com/14095704

Summer Series - Windows Phone 7 Development Going Deeper (Session 2)
http://www.vimeo.com/14101547

10 Ways to Attack a Design Problem And Come Out Winning
http://www.vimeo.com/14105139

Accessibility Makes the Experience More Usable by More People - IxDA Interact
http://www.vimeo.com/14125563

Modern UX Creation from the Eyes of a Developer
http://www.vimeo.com/14370107

Video From PDC 2009

Found this video this morning with me and Victor Gaudioso talking about UX and Silverlight.

http://www.youtube.com/watch?v=hUqd3vJwRg4

Does Your Agile/UX (User eXperience) Shop have a CMM Rating?

I posted this article on Interact:

"CMM? what is that? is the typical response I get when asking about CMM. For starters CMM = Capability Maturity Model For Software Engineering project methodologies. Basically it’s a way to rate how good a software shop is with regard to its process. Now in the UX/Agile space talk of applying Software Engineering metrics such as the Capability Maturity Model For Software Engineering from Carnegie Mellon University might be a bit more than most will deal with however being exposed to both worlds I think it is worthwhile to talk about what UX/Agile can learn..."

Read more at http://www.interactseattle.org/?p=476

Hacking the Xap for Business Intelligence (BI)

I did a post a while ago on 'Hacking Xap' files primarily around dynamical loading resources. The past few months I have been playing with another even cooler way to 'hack' xap files. In this case its about business and taking a precompiled xap file and instrumenting that xap file without recompiling your application or any code changes to the application. This kind of detailed usage information can be extremely helpful in looking at how applications are used and help identify key areas to focus on. From a hack standpoint to take a precompiled xap and put 'code' into all the method calls dynamically is just cool. Granted that collected information just doesn't show up on your desktop, you have to build a web service to collect the data but just the fact that I can take a precompiled xap and get it wired up without any jumping around is just cool.

so lets get to the meat of my experience...

I meet with a guy at PDC09 at well PDC from Preemptive Solutions http://www.preemptive.com/ and he brought up a tool that they have that is part of their 'dotfuscator' product. Most .net developers have either heard of 'dotfuscator' or seen it since its part of visual studio. But part of their main 'dotfuscator' tool is around 'Business Intelligence' and a little known additional feature that in my mind should be the main focus is my main interest and the subject of this post. In any case I got excited about this xap hacking tool er 'Business Intelligence tool' and he got myself a license.

So I got my license and found that getting it working is/was very problematic, not only a license key but an activation key and a bi key etc. I had to get a hold of tech support basically twice with an ongoing thread with their tech support... to be honest I'm no longer a fan of DRM or any other security system that prevents apps from running when installed or secures files. I understand that this is needed to keep software from being pirated and intellectual property stolen but preemptive got way overly excited with their implementation.

Install experience and setup aside it all seems pretty straight forward. The hard part of using the software is building the wcf service and collecting the data. Once you get a service up and running though you basically just need to load your xap and pick where you want to collect data in your app and point it at the web service. The fact that you don't need to re-compile your xap is just awesome. And from a ux standpoint getting this data really gives you insight into your application that you just couldn't get without writing alot of code up front.

If BI around usage of your application is important to you in building better Silverlight apps then this tool is worth the hassle of getting it setup. As a Silverlight 'guy' I would list this as a critical tool in your tool Silverlight toolbox.

So to be fair to the company they provide an endpoint that users can use and I'm told there is a codeplex project for helping you build an in house solution and put the results on a sharepoint web part. My only issue with that is having another company have my usage data which or course would be crazy. Certainly I would not want anyone having my data as I have virtually no trust in other companies and their network security... but alas others might be ok with that. and using sharepoint... well just say no ;) Sharepoint provides a great solution if you don't want to customize it too much... :)

Making an Integrator

There are still a lot of names for it but I’m going with ‘Integrator.’ I’m not sure exactly who coined this but I tend to like it. But what is an Integrator? At least in the context of the WPF/Silverlight world an Integrator tends to be some one that sits between a design team and the developer team at least initially when a company first gets someone to fill the integrator role. In the long term the Integrator becomes more the designer as part of an integrated team where there is not a design team or a developer team and we get into this Agile sort of cross discipline team that is building better UX faster in order of magnitude then anything before. There are lots of things that have come together of the past few decades to make this kind of team possible. We are going to focus on the Integrator but let take a quick look at the cross discipline team that the integrator role tends to move teams towards.

The New UX team tends to be on one spectrum a developer that can do dev work in the data base, in the web services space and then into the .NET and WPF. This developer might be a software architect with expanded data modeling an application modeling etc but tends to also be able to do some light reasonable UI and knows what good design looks like. The next team member might be an IA or Information Architect. Granted the Software Architect might have some IA skills and if so might even be a UX Architect. So the IA helps make sure the data and the flow of the IA in the IA are solid on the up take for the team but on the end the IA is making sure the user experience is good and doing user testing and other interfacing with users to make sure what they see makes since and works well.

From IA we start to get into the Integrator role, the Integrator will have a sound understanding of IA, UX and be able to write code but most importantly they are able to visually decompose what they see into Xaml and do design and design integration. Going Past the Integrator is the pure designer then might live in more disconnected tools. But as a team evolves into this sort of zen state each role including the dev’s, the IA, the architects, the designers and integrators tend to take on some of the skills of all the others. When everyone can do a little bit of everything the team is able to functional more tightly than ever before using some version of Agile and WPF/Silverlight todo more better and faster than before. It is even possible to take this even further and bring in the PM (Project Manager) to be able to work with customers and take on much of the skills of the IA.

In a way the Integrator can become kind of a seed that when planted in the fertile soil of a dev team that loves design and a design team that loves to see their hot designs alive over time turns the team into a UX monster (in a good way). Here is where we see the best innovation and the hottest UX (User eXperiences) at least in my experience.

Integrators are not born though they have to be grown (again in my experience). Now we get to the point of the article… how do you grow, build or otherwise make and Integrator?
So there seems to be two kinds of coal for building the integrator: The Designer and The Developer. In either case there are good points and bad points about each kind of ‘coal’…
For the Developer (especially/mainly the WPF/Silverlight developer) the good points are if they are already comfortable with Xaml and building WPF/Silverlight applications jumping into blend and becoming technically proficient is relatively straight forward but on the downside… if a developer doesn’t have any design sense at all… really give up now before you hurt someone. The hardest part of making a rock star integrator is getting a design sense, point 8 Helvetica is NOT the same as point 9 Ariel and if there is a question over it then you need to start again. Ok so we then make a huge assumption that you have some design sense. How do you cultivate it? Well ideally working in blend with some hot designers (and no this does not mean ‘hot’ looking although that is good too). But here is a good reading list for the dev aspiring ‘Design Integrator’

• Presentation Zen (really you must stop making crappy slides) http://www.amazon.com/Presentation-Zen-Simple-Design-Delivery/dp/0321525655/ref=sr_1_1?ie=UTF8&s=books&qid=1259022426&sr=8-1

• A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

• Neuro Web Design – What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

• Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

• MVVM for tards (http://tard.codeplex.com/ )

• Foundation Silverlight 3 Animation by Jeff Paries http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

Once you get this or in the process of getting this along with working with a designer is learning how to talk to designers. More than any other thing is team dynamics and team dynamics is primarily about good communication. Outside of the basics of good communication is when coming from the dev world to the design world you need to get in touch with the vernacular as much as possible. Working with designers you can get it from osmosis to some degree assuming you don’t piss them off, part of this means that when you talk to designers about changing their process understand that you probably don’t understand their world and that you can’t be condescending with really you probably don’t know what you are talking about when it comes to design. As an example designer typically don’t’ name and group elements in the same way that a dev is going to need them. When you talk to designers about naming conventions you need to be nice and explain why you need their help to have things grouped and named in the assets even from Photoshop and Illustrator.

What about making a designer into an integrator?

In this case the biggest problem tends to be getting past the normal design tools to looking at Xaml at times, wiring up a basic event and some basic code. Understanding the basics of how to work with dev’s is secondary to getting the new design integrator up to speed. While the designer brings the most critical skill to the Integrator role (being a design sense) they have a huge learning curve to wrap their mind around Xaml and Code. While a designer doesn’t need to code an Integrator needs too at least a bit. Much like the dev needing to understand design at a certain level the same goes for the designer to understand some coding in the context of Xaml and Visual Studio.

So how do you get a Designer to be able to write a method in Visual Studio? I would say to start with the most obvious and that is blend. The designer has to be interested in being an Integrator. If the designer is not passionate about learning to make their designs real then they are going to have a hard time. Starting with Blend the tool is designed to at least on some level be straight forward for designers and for starters they can focus on the WYSIWYG. For example all the short cut key codes are the same or mostly the same as Photoshop and the tool is great for doing WYSIWYG sort of ‘design’ but the native format is Xaml. Once the designer gets to the point of being limited then introducing Xaml to the designer is a great next step. So building on this to being able to wire up and event in code and launching in VSTS is about the limit. Here is where the sweet spot kind of happens and this like the dev being an integrator works best when it is a composite designer developer team.

From a learning standpoint the reading list might be:

• Foundation Silverlight 3 Animation by Jeff Peries http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

• MVVM for tards (http://tard.codeplex.com/ )
• A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

• Neuro Web Design – What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

• Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

So let us go back to what is an Integrator?

The Integrator needs to appreciate design and to do good design and recognize good design. An Integrator needs to be able to be able to visually decompose a design and build it in Blend as Xaml. An Integrator needs to learn how to talk to designers and developers and be able understand the needs of both. Dev’s need names, designers need design time data and that sort of thing. Most of all the Integrator needs to help facilitate the communication dynamic between design and development and that is what makes the magic juice you see in some of the high end UX companies building on the Microsoft Stack.

Lastly one of the key aspects of getting companies to buy off on supporting the transition from traditional approaches to composite teams (of designers, developers and integrators and IA’s and anyone else we can get our hands) is ROI for better UX. Companies need to see how better UX can increase productivity, increase sales and user satisfaction and more. And they need to see how the composite team using designers, developers and integrators using the Microsoft WPF/Silverlight stack (Xaml, .NET 4, Visual Studio, Expression Suite) saves development costs, time to market and enable the better UX in general. That is the job of the integrator…

Developers on Better Design, User Experience and Why It Matters

The PDC BOF team is pleased to announce another Birds-of-a-Feather session.

Developers on Better Design, User Experience and Why It Matters

What is the return-on-investment of building better User Experiences (UX)?
How does User Interface (UI) design affect your business?

Come join the discussion on why User Experience matters and how it applies to the real world.

In the current world of web 2.0 and with talk of design being important, help us understand why it matters to you and what we get out of good User Interface design. Let’s talk about the technologies on the web and on the desktop that do and don’t support the development of well designed applications, and how we can apply better practices to our own projects. Equally important, let’s discuss how we can bridge the typical gap in cross discipline team dynamics.

Tell us about your secret sauce or just listen to what others have to say. From great enabling technologies like Silverlight or WPF to tried and true web development in ASP.NET using MVC, everyone has a story to tell about UI and design in the Microsoft world.

http://www.pdcbof.com/post/220173613/bof-session-developers-on-better-design-user

Designer Developer Communication and Interaction

I'm working on a joint research project with Interact (Seattles Designer Developer Interaction Group) to better understand the dynamics of designer and developer communication and Interaction. We will publish the information for everyone free but for now we need to collect the information. if you get a chance to fill out the survey please help us know :) The survey is in 2 parts and ideally we need both filled out.


Designer Developer Communication Survey Part 1


Designer Developer Communication Survey Part 2

Simon a case study part 1 - designer developer work flow

So I while back a friend of mine and whom is another person that shows up to the local designer developer Interaction group and myself were talking about a simple demo app we could do that would show case a number of things, our goal was a good sample she could use on her resume and be a good sample application that could show case designer developer work flow and composite application development. Her idea was todo a simple Simon says game that we would have in Silverlight. As a team (such that two people being a designer and UX dev can be) we had our 'business requirement' but we needed to build on that with a comp or visual vision of what we wanted and a story (use case brief, scenario or other excuse for the same). Our user story went something like this:

John doe wants to play a game like Simon says. John sees link on a web page that says 'Simon says.' John clicks link and he doesn't have Silverlight installed so he gets a 'install me' link with a faded image of Simon. John can see from the faded image that Simon is what he is looking for and decided to install Silverlight. John then go to the Simon link and Simon comes up. John can click the new button to start a game and play a traditional game of Simon says buy following the sound and light patterns and clicking the appropriate game pads. John is able to use the high score button to see his high score. John has fun with and easy to use game and spends to much time playing the game.

with this as our user story, Ariel (the designer, names changed to protect the innocent or not) put together a wonderful bit of Xaml. Ariel being familiar with working with dev's took into account that things needed to be groups, and names reasonable or I would have a hard time working with the asset. For me the first thing I did was load the project and start to wire it up. One would think that Simon shouldn't be too complicated and at first it wasn't. A few events, and a game timer using a story board and we are good. Being the retentive dev that I am, I've had to learn to let go of that when it comes to Xaml as this tends to hamper or slow down the design to the point of just not being worth the time invested.

That all being the case we soon had a working game. Part of learning to work together and further learning to work on the same code at the same time that Silverlight and by extension WPF (actually that might be the other way around) is having the designer and dev work from source control. I know allot of dev's will have a cow about letting designer touch source control but its really not that hard. check out file, check in file... really even a designer can get the hang of it when their tool (Blend 3) supports it now. So we put this in source control (http://Simon.codeplex.com/). the one little detail we had to over come though was Silverlight 2 vs Silverlight 3 and we both were on opposite sides of the fence. This probably was our biggest issue we had to work out where we disagreed. And any time there is a designer and developer on the same project you tend to have at least one disagreement. We ended up eventually on Silverlight 3 as it supports more, the tools are better and it is being released next week. But generally deciding on any issue should be done based on the requirements and when the requirements don't provide enough bases then other reasons should come into play. The key then is to communicate. granted we hear that in everything from time immemorial but really how much do we have to tell people before the get it. 'TALK' things through and normally logic will dictate the best solution.

moving on...

Once in source and having the app running we would start building the application out. Ariel can muck with the design in more detail and focus on the finer points of the design to it was pixel perfect and I could play with game logic and function and we both could do it at the same time. Truly a zen moment for designer developer relations.

Silverlight at an End... RIP

I was aghast when I saw this article...

http://www.computerworld.com.au/article/307687/html_5_could_it_kill_flash_silverlight?fp=16&fpid=1

don't get me wrong I think html 5 is great but there are so many wholes and are we really expecting all the browser's to get together and get it straight as to rendering behavior? not to mention all the nonsense about 'assumed' markup that browsers try to fix poorly formed markup. I mean really why not just use the SGML spec and call it good...

Any case with the coming trends towards UX and high touch I think the html 5 spec is too little to late for killing Silverlight and flash.

Expression Blend

With the coming trend towards UX in general and my interest in Silverlight I have taken to following a number of up and coming designers. One 'Ariel' that I know has had her blog going for a while but hasn't posted a front end on her site finally got around to it. very cool :)

http://www.facingblend.com/index.html

Surface Everywhere

check out this TED conference demo doing multitouch sort of on any where. I can totally see this when I walk up to some one and then their shirt will suddending say this guy is an idiot so I know up front whom I am dealing with...

http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html

I totally want a 'six' sense...

Multi-Touch Gesture Engine

One of the cool things about Silverlight 3 is the new multi-touch support. From a UX stand point this is just awesome to provide this kind of functionality. I know this guy Andrew that works at Identitymine that wrote a gesture engine for Surface that is just awesome. He was showing me this on his tablet at MIX at one of the many dinners. Its just amazing in part as he is just a supper genious :) really but also the kind of UX this provides for Windows 7 apps and more is just amazing. anyway check out the press release :

http://cs.identitymine.com/blogs/im_news/archive/2009/03/19/identitymine-introduces-the-identitymine-gesture-engine-to-support-advanced-multi-touch-development.aspx

its pretty slick and hoping he will port this to Silverlight 3 :)