HTMLApplicationHost Framework Posted to Codeplex

One of my projects has been building an HTML Application framework for phone 7. Basically so I can build HTML5 based applications using HTML, JavaScript and CSS for mobile devices in particular Windows Phone but then being able to use that application on other platforms. Today I uploaded version 4 onto codeplex (http://htmlappwp7.codeplex.com/) which adds HTML Host Application back stack integration with the Phone's application navigation stack. On wp7 that means that when you hit the back button it doesn't just navigate out of the app but just to the last view in HTML making really applications easy to do that will get past the marketplace and into the hands of the public but even more important setting the stage for apps on iPhone and android using similar HTML5 based application frameworks.

The first app using this framework was the JavaScript application but now that test app is in the marketplace I've been working on a new real app called 'SMART Spending Habits', its a simple budgeting application designed to priority and sort your purchases automatically. Its a great little tool and it should be in the market place next week or so.

download the HTMLApplicationHost Framework Source code here:
http://htmlappwp7.codeplex.com/

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 at MIX11

Vote for my session at mix11:

Abstract:

The road to Digital Zen in building cohesive, immersive experiences in retail from the web to touch walls in the real world can be long. This session is about the long road to designing building and implementing real world experiences that go from the web to brick and mortar using real world examples including the Nike Touch wall and the Microsoft Retail store and more using technologies like WPF/Silverlight. The session will touch on design elements including topic on and off screen from hardware, software, sensors and mobile devices like Phone 7.

Vote here: http://live.visitmix.com/OpenCall/Vote/Session/87

and don't mind the cats...

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.

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

Talking about Immersive Retail Prototype at MIX 10

Here is a quick video that Pixel8 (Craig Shoemaker) did showing the TouchTag Prototype Hardware and Arduino controller and sensor I have been working on.

http://community.infragistics.com/ux/media/p/225460.aspx

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Immersive UX Changing the Face of Retail

Changing the Face of Retail is an article I’ve been thinking about most of the past couple weeks. I think my goal with the article is to one talk about how technology built into the retail environment can be used to build better experience’s for customers and 2 to talk about how this kind of evolutionary extension of the retail environment is better for customers AND retailers.

I walked into the Microsoft Retail Store or at least one of them, (see one at Mission Vejo or Scottsdale) and its really impressive how the store is built with this wide open and inviting layout, if you didn’t pay close attention one might think it’s more about interior design then about selling computers and software. One of the most striking features is the video wall that wraps around the entire store. But once I walked around looking at everything, what strikes me the most about this store is actually in the far corner or the software section where this small ‘podium’ with a touch screen built in sits. Granted up front I have a strong emotional tie to this ‘kiosk’ but I can’t really talk about it, with that said I wanted to talk about the idea that this ‘kiosk’ represents from a retail standpoint regarding targeted customer experience and UX in general.

So I played with this ‘kiosk’ and what I found interesting besides the ‘metro’ design aesthetic was that as I browsed software titles on this ‘Software’ Kiosk I realized that each time I entered a new ‘category’ of software the video wall nearby changed with the top 5 titles in that category. And then what I really think (in the case of the MS store) what is the most impactful is that they manufacture most of the titles in this kiosk on the spot when I ask for them. Theoretically the store could have a limitless list of titles, no inventory and just manufacture anything I want on the spot. How is that for brick and mortar?

My point in this story is how technology integrated into our environment can be such a huge game changer. When me, a person interested in software, in a retail space has this elegant multi-touch podium with a grand view of all the software in the universe that can lead me easily through all the titles, finding what I need and manufacturing it on the spot is the norm then other business’s in the same line of work or even Amazon.com will really need to bring up the game or fall behind. This is the kind of technology that really changes the face of retail.

So I work for Wirestone an Interactive Design Agency (so I have a vested interest in the technology). We do work like this touch kiosk in the retail space and specialize in ‘Targeted Customer Experience’s.’ So how would I help a retail store build a ‘game’ changing user experience like this (minus the replicator in back)? How can we make a ‘Retail’ experience that much more emotionally engaging, interesting, fun etc? Can we make something cooler that what we saw in the ms store? I really wanted to have something as engaging so I went and spoke with our R and D team in Seattle and we came up with a vision of a retail space like the following user story that we thought we could implement in our UX lab in Seattle.

Let’s say we have John Doe that is interested in Camera’s. He goes into our theoretical retail space looking to buy a camera. He sees one that looks interesting? As he stands in front of it for a few seconds and the price tag visually transforms. The price is adorned and highlighted and across the bottom some text slides in that says ‘touch here to compare’. John touches the digital price tag and the wall behind the product comes alive as that camera slides in to center in front of John with some of the key features listed below. John then takes a few steps down the aisle and realizes that the product detail on the wall follows him; he then touches another tag of a similar camera and that one slides in next to the first on the wall and John can see the key differences highlighted. John quickly is enthralled with this ‘experience’ and the short is he spends lots of money…

With this in mind I started out to build a prototype. One of the Integrators on our team besides having great design and UX skills, happens to write custom serial drivers for fun… I talked with him about it and he pointed me in the right direction including sensors, controller boards and drivers and sample app etc. (See Ryan’s post here: http://www.futile.com/2010/02/wpf-sonar-application-using-arduino-and-ping-sensor/ ) That aside I wanted to be able to talk about this kind of technology at MIX around integrating technology into the retail environment so I had to get busy. What I ended up with was a custom Silverlight control built out to include custom events and interfaces so it could be consumed by a WPF windows object controlled by a custom ‘windows’ manager in WPF for having lots of these little usb powered touch screens all wired together. Plus adding some more ‘custom’ code, some serial port programming over USB, a few config issues, sensors and a simple design later I had my working app for MIX.

Now dragging this around mix was kind of shock to see how interested people were and how extremely geeky it was to have all the cables and the sensors and the like mucking about but it turned out to be a great conversation starter. The next step in developing this kind of technology was around the Business Intelligence aspect of this. In our typical retail touch kiosk work it is always interesting to see how things are used. We normally do lots of user studies with the target demographic getting everyone from IA to devs and creative involved with working with the data collected around making the UX not just work but better. In the case of our touch tag prototype a lot of things came to mind. I ended up talking to a friend at Preemptive Solutions (Gabriel Torok) that did this cool BI tool for Silverlight and we met at MIX to talk about how integrated BI analytics would enhance our work around the touch tag prototype.

Many times knowing how users interact with a system and with the environment helps a business better enhance what and how users experiences a retail space to better help the custom solve the issue that they might not even know they have. With the touch tag system we are looking at retail heat maps, working with touch and interaction data as it related to products and POS data. Questions like what products to people pick up? Vs what do the buy? Vs what do the put back vs. what area of the store is most interesting? What areas of the store are ignored? How can I make better use of my retail space?

Being able to engage customers faster with more interesting experiences that get them engaged with the product they are most interested in and in how that product is the best for them through touch, through visuals and all the senses helps the customer connect with the product emotionally faster. In user studies we have found that this kind of holistic approach to the retail environment really ups the game not only for the end users or customer and the retailer but also for everyone else that has to compete. This is how you change the face of retail.

Next on my list of to-dos is making the average retail employee a super star with augmented reality. You might even think I’m kidding but I’m not. I meet with another friend a few days ago that runs a small but high end UX shop in Canada and that is our next project. I’d love to hear what everyone else is doing to make targeted customer experiences that much better.

Oh and here are a couple of pictures of the UI and hardware for the prototype:

http://www.facebook.com/photo.php?pid=4246729&l=bfecdad661&id=721326429

http://www.facebook.com/photo.php?pid=4246858&l=8936a70219&id=721326429

I published this post initially on the Interact Seattle Site at:

http://www.interactseattle.org/?p=538


some related links include:

post from MIX w/ video showing prototype hardware:
http://community.infragistics.com/ux/media/p/225460.aspx?CommentPosted=true#commentmessage

and this one talking about touch in general and mention the touch tag prototypes:

http://hackingsilverlight.blogspot.com/2010/03/me-on-windows-7-touch-and-i-mention.html

and the Silverlight TV ep3 I did on multitouch:

http://hackingsilverlight.blogspot.com/2010/01/silverlight-tv-episode-3-multi-touch.html

the touch tag demo at MIX on Channel9:

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Silverlight TV Episode 3: Multi-Touch 101 with Silverlight

John interviews Silverlight MVP David Kelley (thats me) about developing multi-touch applications in Silverlight. I discuss the types of multi-touch hardware and my experiences in developing real world multi-touch applications. Then I jumps right into the code and shows how to create a multi-touch application with Silverlight 3 or 4! The application David demonstrates walks through the key multi-touch events, handling those events, touch IDs, tracking the location of the touch points, and much more. Being a sly devil, John even got David to commit to coming on the show again and demonstrating some advanced multi-touch samples and sharing his stories of how developers have broken their monitors using multi-touch!

David also calls out props to Tim Heuer and Davide Zordan!

http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-Episode-3-Multi-Touch-101-with-Silverlight/#Page=1

here is a quick post to the SL3 code we used from Tim Heuer

Watch the video here:
http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

this code converts easily to SL4 also here is a quick post more about the UX concepts used in multitouch

http://hackingsilverlight.blogspot.com/2010/01/silverlight-multi-touch-in-real-world.html

also the simon demo that includes multitouch (will have an SL4 version at MIX) that Davide Zordan and I worked on.

http://simon.codeplex.com/

also John's post is http://johnpapa.net/silverlight/multi-touch-101-silverlight-tv-episode-3/

watch for more on this topic in the next few months.

MIX10k Wirestones - the game...

first shameless self promotion... Please check it out and vote 5 starts... Here is the link:

http://mix10k.visitmix.com/entry/details/186

That aside this is an interesting contest where the goal is to build the coolest application in under 10k in Silverlight 4 (what other kind is there?) and the problem is that this is not the binary but the source files... and it turns out the wirestone log in Adobe Illustrator had a lot of path data or defined 'points'... that being the case it took me a while to get something that would fit.

If you interested in games like this there is a codeplex project we use for demos at http://Simon.codeplex.com/ and you can go to http://www.HackingSilverlight.net/Simon.html to play the game.

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