Windows Phone Support

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Thursday, 14 January 2010

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

Posted on 07:47 by Unknown
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. :)
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in multitouch, retail, silverlight 3, tim, touch | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Silverlight Streaming in 5 minutes or less
    Microsoft as part of the whole Silverlight ‘thing’ has provided a service to allow people to upload videos and get those video streamed alon...
  • Silverlight Applications Taking All the Available Realestate
    Karim sent me this. It is a simple way make sure you Silverlight Application uses all the available realestate using just CSS: /*...
  • 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 mul...
  • Dependency Injection Made Easy
    Part of the whole fun with doing 'ard'd samples is just the fun of doing something not quit PC but the bottom line really is doing c...
  • Silverlight Preloader animation is the answer
    I got this email today: Hi! In our project we call a function which retrieves a data from a webservice. This function takes some time 1-3 se...
  • Silverlight 2 Event bindings
    So in the process of working on this presentation for dev teach and the article and the book I got in a long discussion with alot of the ubb...
  • Windows Phone 7 Development Using Visual Studio 2010
    with David Kelley and AppDev Windows Phone 7 is a new step for Microsoft for the mobile platform. This course will introduce the mobile OS a...
  • Dictionary Definition of Xaml (verb and noun)
    A friend 'Ariel' from www.facingblend.com did a short post about Xaml being a verb. I've heard this a few times and thought th...
  • More on Panels
    I was playing around and made a few more panels. Lets start with a random panel. This panel builds on what we learned about the animating ...
  • No Soap for you! - The No Silverlight Experience
    So I'm collecting hacks for my upcoming book, and I must say, here is a simple one, but one of my favorites... LOL! On my HackingSilver...

Categories

  • .net
  • 3D
  • adam
  • adcontrol
  • adobe
  • agile
  • algorithms
  • analytics
  • andrew
  • android
  • Animating Panel Base
  • animation
  • apache
  • apphub
  • apple
  • apps
  • architecture
  • ariel
  • article
  • ASP.NET
  • balder
  • bar camp
  • behavior
  • best practices
  • beta 1
  • beta 2
  • bi
  • bitmap effect
  • blend
  • blendables
  • blog
  • book
  • book review
  • bookreview
  • browser
  • brush
  • build
  • c#
  • channel9
  • cmm
  • codebrowser
  • codemagazine
  • codemash
  • codeplex
  • color
  • com
  • command
  • composite
  • controls
  • Craig
  • crossfader
  • csharp
  • CSS
  • custom event
  • Dan
  • data
  • datagrid
  • davidjkelley
  • davidkelley
  • ddj
  • Deep Zoom
  • dependencyproperty
  • design
  • design patterns
  • designers
  • devconnections
  • developer
  • developers
  • devin
  • DevTeach
  • dispatcher
  • dotnetslackers
  • dp
  • Dr WPF
  • easy
  • eclipse
  • ecma
  • education
  • einari
  • ET
  • event
  • exchange
  • expression
  • facebook
  • facing blend
  • Faisal
  • firestarter
  • flash
  • flex
  • font
  • free
  • fun
  • futures
  • gadget
  • game
  • games
  • gesture
  • google
  • Grid
  • hack
  • hacking
  • hacking phone 7
  • Hacking Silverlight
  • hard
  • hero
  • holst
  • howto
  • hta
  • HTML
  • html5
  • HTMLAppHostFramework
  • htmlapplication
  • ia
  • identitymine
  • IE
  • IE 8
  • iis
  • images
  • indexability
  • INETA
  • Infragistics
  • Integrator
  • interact
  • iphone
  • isolatedstorage
  • issues
  • itemscontrol
  • ixda
  • jared
  • jason cook
  • javascript
  • jeremiah
  • jobi
  • jobs
  • johnpapa
  • jordan
  • josh
  • jscript
  • json
  • Karim
  • kaxaml
  • kellywhite
  • keynote
  • KimSchmidt
  • law of
  • layout
  • linux
  • listbox
  • LOB
  • mac
  • mango
  • manning
  • marketing
  • marketplace
  • math
  • media element
  • media encoder
  • methodology
  • microsoft
  • MIX
  • MIXer
  • mobile
  • monitization
  • monitizationmodels
  • movie link
  • MSDN
  • msdnbytes
  • msdnradio
  • msretail
  • mstag
  • multitouch
  • MVP
  • MVVM
  • Netflix
  • nike
  • nui
  • object oriented
  • OOB
  • out of browser
  • packt
  • panels
  • parchment
  • parchment apps
  • paths
  • PDC
  • peter
  • phone7
  • phone7unleashed
  • phones
  • php
  • Pixel8
  • pixelshader
  • player
  • popfly
  • prediction
  • preemptive
  • preloader
  • presentations
  • radial panel
  • random panel
  • reference
  • requirements
  • retail
  • review
  • ria
  • robby
  • ROI
  • RPS
  • ryan
  • sajiv thomas
  • SCRUM
  • SD2IG
  • Sea Dragon
  • searchability
  • seattle
  • seattlesilverlight
  • seattleslug
  • sebastian
  • services
  • sharepoint
  • sharepoint2010
  • sic
  • side bar gadget
  • Silver Dragon
  • silverlight
  • silverlight 1
  • silverlight 2
  • silverlight 2.0
  • silverlight 3
  • silverlight 4
  • silverlight insiders
  • silverlight show
  • silverlight4
  • silverlight5
  • Silverlight5
  • silverlightconnections
  • silverlightcream
  • silverlighttv
  • simon
  • simonsaid
  • simple
  • SMART
  • snack
  • stackpanel
  • stevejobs
  • streaming
  • stuartcelarier
  • surface
  • symbian
  • tard
  • teched
  • TED
  • testing
  • textbox
  • TFS
  • threading
  • tim
  • tip
  • tiredallover
  • tool
  • touch
  • touchtag
  • training
  • twitter
  • ui
  • uml
  • usergroup
  • UX
  • uxdesign
  • vagas
  • victor
  • video
  • videos
  • vista
  • visual studio
  • volta
  • VS
  • vsm
  • WCF
  • win8
  • Windows7
  • windows8
  • windowsphone
  • windowsphone7
  • wirestone
  • workflow
  • wp7
  • wp7dev
  • WPF
  • wrappanel
  • wrox
  • xaml
  • xap
  • XML
  • xna
  • zen
  • zphone

Blog Archive

  • ►  2012 (5)
    • ►  May (1)
    • ►  April (2)
    • ►  March (1)
    • ►  February (1)
  • ►  2011 (29)
    • ►  December (2)
    • ►  November (2)
    • ►  October (3)
    • ►  September (1)
    • ►  August (5)
    • ►  June (5)
    • ►  May (2)
    • ►  March (1)
    • ►  February (5)
    • ►  January (3)
  • ▼  2010 (51)
    • ►  December (5)
    • ►  November (4)
    • ►  October (3)
    • ►  September (5)
    • ►  August (3)
    • ►  June (3)
    • ►  May (6)
    • ►  April (3)
    • ►  March (9)
    • ►  February (3)
    • ▼  January (7)
      • Lunch With Interact - MVVM Made Easy
      • Dependency Injection Made Easy
      • Silverlight TV Episode 3: Multi-Touch 101 with Sil...
      • MIX10k Wirestones - the game...
      • Silverlight Multi-Touch In the Real World (once yo...
      • Getting Developers and Designers to play nice... a...
      • Asynchronous Image Loading in Silverlight
  • ►  2009 (75)
    • ►  December (3)
    • ►  November (2)
    • ►  October (3)
    • ►  September (7)
    • ►  August (4)
    • ►  July (7)
    • ►  June (9)
    • ►  May (12)
    • ►  April (13)
    • ►  March (8)
    • ►  February (2)
    • ►  January (5)
  • ►  2008 (119)
    • ►  December (8)
    • ►  November (10)
    • ►  October (12)
    • ►  September (10)
    • ►  August (11)
    • ►  July (4)
    • ►  June (10)
    • ►  May (5)
    • ►  April (3)
    • ►  March (11)
    • ►  February (8)
    • ►  January (27)
  • ►  2007 (34)
    • ►  December (6)
    • ►  November (11)
    • ►  October (17)
Powered by Blogger.

About Me

Unknown
View my complete profile