Showing posts with label touch. Show all posts
Showing posts with label touch. Show all posts

Wednesday, October 12, 2011

The Metro Design Aesthetic and Windows 8 and the new Gesture Language

In next months Seattle Interactive Conference check out David Kelley’s session on “Metro Design Aesthetic and Windows 8 and the new Gesture Language.”

Abstract: Building off the Metro Aesthetic designed for touch and mobile devices the new Windows 8 application model is wrapped around encouraging apps designed around the Metro Aesthetic. This session is about designing for metro, the use of touch and gesture in interaction design and implementation along with thinking around the new gesture types, and how the experience in the win8 Metro environment can be integrated into other experiences on the slate.

The Seattle Interactive Conference
When: November 2nd – 3rd
Where: The Conference Center at the Washington State Convention Center

About:
The first-annual Seattle Interactive Conference is a two-day...

read the rest at: http://www.interactseattle.org/?p=971

Wednesday, February 16, 2011

Silverlight TV 61: Chat on Deep Zoom, Touch, and Windows Phone 7

Thinking about writing a touch intensive Windows Phone 7 application? In this episode, David Kelley of Wirestone shares his experience creating rich experiences with Silverlight. David has been involved with many high profile applications and he shows off both the Jordan Deep Zoom mosaic and his Simon for Windows Phone 7 application that's in the marketplace (for free). This is a great discussion with a Silverlight user experience expert.

Watch the video here: http://channel9.msdn.com/Shows/SilverlightTV/Silverlight-TV-61-Expert-Chat-on-Deep-Zoom-Touch-and-Windows-Phone

Jordan Mosiac: http://www.jumpman23mosaic.com/

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

DeepLink for Simon on the phone: http://social.zune.net/redirect?type=phoneApp&id=65c23c5b-73e9-df11-9264-00237de2db9e

Tuesday, January 25, 2011

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...

Wednesday, January 5, 2011

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

Tuesday, September 7, 2010

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

Friday, March 26, 2010

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

Monday, March 22, 2010

Me on Windows 7 Touch (and I mention Silverlight Hack)

At the MPV Summit 2010 I was asked to talk a little bit about Windows 7 touch and so I talk abit about this touch tag Kiosk technology and our experience at Wirestone working with Windows 7 Touch, WPF and Silverlight. Anyway its pretty cool:

http://www.vimeo.com/10357419

Wednesday, January 20, 2010

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.

Thursday, January 14, 2010

Silverlight Multi-Touch In the Real World (once you go touch you never go back)

John Papa asked me to help do a 10 minute segment for the Silverlight TV show for Channel 9. This got me thinking about multi touch from a demo standpoint and made me really think about what we have learned so far.

In the general since we (as an industry or society) are really just starting to see touch become a major part of our day to do human machine interaction. On the Microsoft stack using Surface, Windows 7 and WPF/Silverlight Multi touch support it is really becoming standard stuff. At Wirestone we have really been on the fore front of doing user experience testing and real world development over the past year primarily in the retail space. Now the specific projects I can't talk about yet but let me see if I can come up with some usability rules that might help in your development. If you first just trying to figure out how to do it in Silverlight (starting in at least Silverlight3 or better) there is one main API you need to care about.

take a look at this line of code:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

this associates our one event handler that we care about. now lets take a look at using the event handler:

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
foreach (TouchPoint tp in e.GetTouchPoints(Positions))
{
if (tp.Action == TouchAction.Down)
{
// DO SOMETHING
}
else if (tp.Action == TouchAction.Up)
{
// DO SOMETHING ELSE
}
else if (tp.Action == TouchAction.Move)
{
// OR DO SOMETHING MORE ELSE
}
}
}

you'll note that basically we are looping through the touch points, we get touch id's and based on the touch action we can do whatever it is we want. I encourage you to take a look at Tim's post on this and download his sample as he goes through this in detail and built a great multi touch app for testing how touch works using this method.

check it out here and download Tims app. (it also converts to SL4 seamlessly):

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

so now that we talked out how to do basic multi touch lets get back to my experience in user experience development with multi touch.

In our work we have been doing allot of users studies with Retail systems including kiosks, touch walls, surface and the like. But my favorite lesson learned has todo with the UX professionals... One day have a long day of debugging and unit testing I went home and wanted to check email on our home computer. I forget what it was exactly but I went to touch the screen and for several minutes I couldn't, I think I almost broke it before I realized that it wasn't touch. And the next week I realized that everyone on the team was having the same problem. Worse still once you realized that was a problem I found I can't stop... really once I went touch... I can't go back. don't get my wrong 'touch' will not replace the mouse in its current form/technology but it extends our experience and allows technology to be better integrated into our lives.

So lets talk about another story we saw in users studies. There are lots of different kinds of hardware, apps and technologies. One good thing to watch out for is the 'kinds' of things that register as a 'touch'. So in Silverlight on my multitouch laptop its not a big deal but I have seen hardware that the light conditions effect touches and even worse some of the hard where is so sensitive that the brush of a sleeve can cause problems. Granted this is more a surface thing then the typical Silverlight retail kiosk but still. When building experiences you need to get they system, hardware and any other bits in place so that you can see how users interact with the system so I can identify things like this 'before' they go live.

When considering design some good things to think about include How the user will tend to interact with the system. On thing you notice is that you loose those the mouse. no mouse overs etc. We have found that user's need and expect feedback. and many times when users 'touch' elements in the UI and nothing happens the user then tends to think that they did something wrong. Help the users by providing feed back even if its just a subtle 'bonk' noise that lets the users know the touch was received. When the user does touch something that does something make sure that 'something' shows that on the screen IE drop shadow forms and element moves slightly etc.

Also remember that we have trained our users to do and respond to computer UI a certain way. Consider that frequently we see users 'double' touch where the users expects there to be something like a double click. Users also tend to click the bottom of images or things below the image before things above. I can't express enough how much better a system is that has gone through extensive user testing and user centric design can be from a User Experience standpoint.

Another big topic in now days is gestures, in Silverlight this can mean 'more' code :) but focusing on the user we found that users tend to do only a few things 90% of the time or more... Touch, move and pinch... everything else that users use once they get past the fact they can touch everything is secondary at least currently. Although subtle things like letting users resize via pinch and the use of touch in the UI that has been carefully thought out regarding interaction really cranks up the end product.

But given considerations like that... touch is where its at and once you go touch, you never go back. :)