Surface
Greetings! In case you’ve been living under a rock for the last few days, Microsoft launched the 9th version of Internet Explorer (IE9) on Wednesday. Tanagram was honored to participate in that event by creating a “demo” site that illustrates the capabilities the new browser brings to us. Before we go into that awesomeness, I wanted to post something about the prevalent skepticism that I encountered while speaking with the Press.
Why would anyone be skeptical about the launch of IE9 you ask? Well, let’s just say Microsoft is trying to recover from a string of disappointing browser releases.
With IE6 at the top of the most-hated browsers of all time, (at least by developers), Microsoft IE7 and IE8 were improvements, but still failed to overcome the stigma created by IE6. Despite the clamoring of the developer community Microsoft failed to hear that we wanted a browser that unconditionally supported W3C code standards and didn’t require workarounds or the use of Microsoft proprietary markup to achieve sustainable results.
I should say that I don’t speak for Microsoft, I am not (you can decide for yourself) biased by the opportunity to work with them. This post is intended to place them in a critical and honest light. A light that I believe they would appreciate. While I was wandering the event floor, I had an opportunity to talk to product managers, coders, and even senior leadership on the Internet Explorer team and the one message that I heard over and over is, “we are going to make this right, this release is for developers and users.” Having worked for 4 months with alpha and beta builds of IE9, I can tell you that this release isn’t perfect, but the overall improvement is huge. Here’s how:
Relinquished “ownership” of the web
Dear all, Microsoft got your message. They heard that you are tired of them trying to “lead” the web development space with proprietary markup and software platforms that complicate cross-browser web development and provide zero transparency with regards to the machinations running beneath the surface. For the launch of Internet Explorer 9, Microsoft funded (not bribed!) the World Wide Web Consortium (W3C) to speed the ratification of many key elements coming in the new HTML5 specifications. The key here is that Microsoft has taken steps not to steer, but to encourage development of standards that will make the web better for all of us. Not to put the W3C in a bad light, but they aren’t the fastest group when it comes to ratifying new standards (sheesh). This is probably a good thing. To me, this step means Microsoft is learning to play well with others. You can draw your own conclusions.
Really, really good hardware acceleration
One of the outcomes of Microsoft’s involvement in the standards ratification was the approval of the SVG and Canvas element. These are two of the primary elements used to create the gorgeous animations and interaction that are typically associated with Adobe Flash, and Microsoft Silverlight applications. What happened next was really really beautiful. Microsoft has the best people on the planet when it comes to software compiling (my opinion) and that’s why Visual Studio dominates the software development space. Microsoft took what I call their code-compiler-rocket-scientists and had them build a compiler into IE9. Not just any compiler, this particular compiler takes the reams of JavaScript and HTML 5 we create and smashes into a binary that runs in the super fastest parts of your computer. The nitrous-oxide injection occurs when the compiled binary hits the GPU (the computer that lives on your graphics card) and holy wow is it fast! I had an excellent video of Chrome and IE9 (shot myself) running the same application simultaneously and how Chrome was turtling away while IE was enjoying an “Arnold Palmer” (while juggling) at the finish line, but I left my phone on the plane and … well you get it. I invite you to test out the performance yourselves here. Please review the code for the test drive sites too. You’ll find no sneaky IE9 tunings, just clean HTML5. I want to make one more point here and that is to acknowledge Apple has been hardware accelerating for 5-ish years now with Safari and Quartz but do not currently have Canvas or SVG acceleration. Firefox also has acceleration but has, for some reason, disabled it in the current release of their browser. Likely what you will see is both browsers chasing Microsoft with rapid updates to provide the same acceleration. Yay! We all win. Thanks Microsoft.
Open Code
Yup, no hiding anymore. This is the new web. If you want to know how a particular HTML5 site runs, right-click and save-as my friend. IE9 will download all of the JavaScript and JSON files used by the app for your review. This is a game-changer. Think about all of the folks out there who built their businesses with proprietary code. Gone. Sure you can obfuscate the code, sure you don’t have to use HTML5 but given that HTML5 can and does solve the need for rich user experiences and is community defined, I believe it won’t take long for developers to move away from closed platforms like Flash and Silverlight. That’s where I’m spending my next dollar for sure. Part of me does question why Microsoft has seemingly doomed their own Silverlight platform but I’m sure they have a plan…
So what does this mean? Microsoft, to me, is sending a message to us. They are saying the web is not about proprietary code, it’s about service and relationships. We all want rich experiences, and it’s time they got out of the way and instead helped make them happen. IE9′s minimal chrome (no extra junk), pinning (you can pin a site to your task bar), lightning-fast, built-in debugging tools, new malvertising protection, and overall support for HTML5, CSS3 is a win for all of us.
Here is a link to the application we built for the demo: www.skybeautiful.com My next post will talk about this in detail.
Posted by Joseph Juhnke on September 17, 2010
If you invested 26 minutes into the video we posted here, then you already know where we are going with this post. Just as augmented reality (AR) is only one facet of an embedded interface, touch is only a portion of the entire vision for Natural User Interface (NUI). We are seeing a lot of touch and AR discussions today mostly because there have been advances in technology that are commercially (to we the consumer) available. Not to be a nag, but isn’t about time the problem drives the solution and not technology? Just as we learned during the age of artificial intelligence, technology (specifically improvements in processor speed in this case) will never solve the problem. Complexity must be replaced with simple and elegant solutions. Human’s with dreams must drive these solutions.
What is Natural User Interface (NUI)
So what is Natural User Interface? Natural user interface is the concept that you can touch (or yell at…) and manipulate digital objects much like you would objects in the real world. It’s a hard problem because we have been using mice and keyboards for so long we’ve forgotten what natural really feels like. On a recent cavort through the interwebs, I discovered the following concept and am thrilled to see discussions standardizing the way we talk about NUI.

Unfortunately, gestures like the two-finger-tap and the two finger hold are not natural interactions. We call these types of interactions “NUI Transitional.” They are interactions that are trained/learned that allow fingers to modulate information, but they are not “Present in or produced by nature.” An exaggerated example (talking to you Apple) would be if you have to use four fingers in a swiping gesture (versus 2 or 3) to interact in a specific way, you’re really not experiencing a natural interaction. More likely the software engineers ran out of natural metaphors, right?
A more natural approach
A hold-and-act-upon gesture is a good example of a truer NUI interaction for a touch surface. Specifically imagine you have a piece of paper on your desk and you want to slide it somewhere else. You touch the paper and, while holding your finger down, drag it to another location. Simple right? If you want to draw on that paper you wouldn’t use the same gesture. You also wouldn’t look around for a state-indicating button or icon to make sure you were in draw mode and not move mode, right? Instead you would put one hand (or finger) on the paper to hold it still and the second hand (perhaps with a writing implement) would move the drawing element over the surface of the paper.

This illustration uses Ron’s iconography to illustrate a stateless natural interaction. Specifically, we have one touch point from the left hand thumb holding the page still (a state in itself), while the right hand pinches (not the gesture) three fingers together much like holding a pen and drags across the surface. The result is a hard-to-explain but intuitive feeling writing gesture. I’ll disclaim that last statement in that we have no data to prove how “intuitive” that gesture is, but when we do it ourselves (give it a try) it feels pretty good. Mileage may vary… What do you think?
Posted by Joseph Juhnke on April 26, 2010
Tanagram is proud to announce the launch of Touch.Codeplex.com. Our exploration into the state of the Natural User Interface (NUI) connected us with folks at Microsoft and together we identified an adoption issue. While the technology to build Touch applications exists, it is currently cumbersome to implement. Marc Schweigert and James Chittenden had an idea to use Expression Behaviors (literally drag-and-drop onto any object) to act as a bridge. Together we launch this humble beginning with a bold vision. We hope you join us as we expand this library in the months to come.

Writeboard Panorama of calculation debugging.
Project Overview
The APIs in WPF4 plus the Surface Toolkit for Windows Touch make building common touch scenarios easy. However, implementing many of the same touch scenarios using WPF3.5SP1 or Silverlight 3/4 involves writing a fair bit more code. Furthermore, the touch APIs across WPF4, WPF3.5SP1, and Silverlight are different.
Project Goals
The goal of this project is to simplify building common touch scenarios when using WPF 3.5 SP1 or Silverlight 3/4 by using Expression Blend Behaviors to provide a consistent way to implement these scenarios across WPF & Silverlight. Expression Blend Behaviors can be used within Visual Studio without a dependency on Expression Blend by downloading the Expression Blend 3 SDK. You can also find more Expression Blend Behaviors at http://expressionblend.codeplex.com/ and http://tinyurl.com/ExpressionGalleryBehaviors.
Project Roadmap
- Beta Release of core Scroll and TranslateRotateScale behaviors to developer community. <– You are here
- Revised Scroll and TranslateRotateScale behaviors
- Gesture Behavior (repurpose awesome code from here)
- Erase (Back and Forth Gesture)
- Create (Single Finger Draw ‘+’)
- Delete (Single Finger ‘X’ Drawn Over Target)
- Select Lasso (Single Finger Draw Lasso)
- Split (Single Finger Diagonal Line)
- Hold Menu (Single Finger Touch & Hold Context Menu)
- Draw (Three Finger Pen Grasp)
- Clone (Two Finger Double Tap)
- Open / Edit (Single Finger Double Tap)
- Select (Single Finger Tap)
- Global Rotate (Five Finger Grab and Rotate of Application)
- Global Perspective Rotate (Five Finger Pressure to Rotate Application Perspective)
See the whole deal here.
Posted by Joseph Juhnke on February 15, 2010

I may have had a drink or two or perhaps the interviewer was particularly charming. Either way I opened up for the folks at Level 3 and shared our dreams and visions for where Digital is going to take us in the coming years. I wish you could have seen the interviewer’s face. These were not answers he was prepared to address. Tell me the truth… Do I sound like a nut? Check out the other interviewees here. Great thinking and commentary from all.
Posted by Joseph Juhnke on December 9, 2008
I was listening to NPR and they had another story about crowd sourcing and a gym shoe company in Seattle that was using these communities to develop surface design on standardized gym shoes. This got me thinking about the role of people in designing products and services directly vs. trained designers facilitating observations and discussions with users to gain insights in both articulated and unarticulated needs.
Crowd sourcing was recently discussed by Jeff Howe of Wired Magazine in June 2006 with his article “The Rise of Crowdsourcing“. This concept is not necessarily new. I read a few years ago “Murder, Insanity, and the Writing of the Oxford English Dictionary” and there was a global call to contribute to the first modern dictionary.
However, the deep spread of the internet has allowed people to directly interact with companies to provide feedback and help design existing products and services. Focusing communities of interest around their knowledge and expertise and iterating variations with standardized components (like surface design on t-shirts and gym shoes) and having online voting or based on purchasing behaviors, have the “better” strains rise to the top is an intriguing trend:
Threadless, a Chicago-based T-shirt maker whose design process consists entirely of an online contest is a good example of this trend.
DaWanda‘s Style Lab section, consumers can create products with their own individual style and have them made to order. (from www.springwise.com)
Crowd sourcing does need to be managed, and is not as ad-hoc as it may sound. Companies manage these communities for maximum impact of user-centered innovation. There are more sophisticated strains of focused crowd sourcing around more complex opportunities:
RedesignMe is a great Dutch website that is now engaging with product manufacturers to establish “RDM Challenges,” through which a new product concept is presented and the site’s 1,000 or so active members are asked to react to it. In exchange, they are rewarded with RDMs—RedesignMe’s online currency, which is convertible into products in the online RDM Shop such as mp3-players, game consoles and gift cards. (from www.springwise.com)
Elements, an eatery being planned to open next year in Washington. Crafted by a “beta community” of some 400 participants, Elements will serve raw and organic locally grown vegetarian food in an environmentally sustainable way. (from www.springwise.com)
What does this mean for designers? Precedent had positioned the designer as the arbiter of function and form. Rehabilitated or new products were completed by designers and brought to market. Crowd sourcing is in certain ways disintermediating the role of designer by going direct to customers to have them create new or revised design strains.
An interesting company that is taking crowd sourcing to another level is Kluster. They have created Private Klusters designed to enable collaborative brainstorming on myriad different questions by allowing invited participants to share their opinions on a relevant, customized set of criteria. (from www.springwise.com)
Spot.us a nonprofit that lets any individual or journalist post an idea for an untold story in the local community. Professional journalists then write pitches based on those ideas and place them in the site’s wiki, where members of the community can view them and vote—via micro-pledge—on the stories that are most important to them. (from www.springwise.com).
Cambrian House began as a crowdsourcing community using the wisdom of crowds based approach to discover new business and technology ideas.
Designers have embraced ethnographic and observational research to create new objective skills to experience what is and look for pattern and opportunity. With crowd sourcing, the role of the designer will need to be delineated as a type of reasoned broker to sort and prioritize a community’s ideas.
Are the aggregated power of crowds a wise resource for companies? For simple solutions, creating different variations can provide needed diversity for products where customers want many alternatives. For more complex problems and ideas where there are many variables, I believe that this model can easily fall apart. There are too many levels and ways to interpret and approach something to bring desired value.
I have not really heard the design community address the effect and challenges of crowd sourcing. When Larry Keeley edited a Society of Typographic journal named “People, Not Markets”, he emphasized that designers need to address the real needs of people not the marketing needs of companies.
Twenty years later, we are moving in the right direction. The question is in what direction?
Posted by akallish on August 28, 2008
The folks at Microsoft Surface have begun to play further with their advanced multi-touch display. We are THIS CLOSE to getting one of these coolies to play with but now our desire has been captured by this new globe version. I think we were all amused by some of the “creative” demonstration apps they built for it, but the virtual tour demo left us wanting it purely because it looks like a crystal ball and who doesn’t want one of those???
Posted by Joseph Juhnke on August 5, 2008
DUX 2007 is a wrap. We came, we saw, we laughed, we loved, and we even learned. I thought I would spend a few characters writing up some observations. I think first, it’s always important to understand the massive amount of work that goes into putting together one of these events and I know the team that gave us DUX ’07 was spared no amount of grief. They did a truly admirable job and I would like to thank them.
Thank you!
DUX is not TED, nor is it HCI International, but instead fits nicely in-between them where Living Surfaces used to flourish. A day doesn’t pass when I don’t reminisce about the buzzing energy and enthusiasm for all things interactive that used to eek out of every corner of the Living Surfaces conferences but that’s a story for another time. DUX ’07 had a nice mixture of creative sensitivity (design) and scientific reason. There were discussions about robots designed to dance with humans, the definition of simplicity, and a ton of thinking done on social networking; fun stuff. Presentations were an interesting mix (about half and half) of representatives of corporate giants and student masters theses. There was a smattering of cool independents, but I couldn’t help cringing when yet another Google or Yahoo! employee got up and started speaking. To further emphasize the vortexes they represent Google even put job postings on the give-away jump drives presented to each attendee. Yikes!
I’d have to say my only complaint about the proceedings was the same one I have at all of the UX / HCI / Ergonomics / etc. conferences; a lack of attention to a few key details. We are experience designers, we care about all of the aspects of interaction and communication and yet repeatedly show a lack of concern for the experience of our conference attendees. For some reason, they decided to pass out printed cards after each speaker’s presentation that were gathered for the purposes of a Q & A session afterwards. This didn’t work out once, questions were poorly worded, lacked relevance, and were often too lengthy to merit responses. The fall-back became, “We’ll post your questions and the answers on the blog.” Why didn’t someone use a live blog to capture questions from cell phones? They could’ve even designed a cool concept to facilitate live conversations the moment the topic was hot in our minds. Real conversations are good things, right?
The other thing that kills me is when the logistics folks provide a really cool looking slide advance gizmo that none of the presenters could use. Yes, I’ve seen this before. The best part is that no one noticed (except for the audience who had to wait for each presenter to regain their momentum after a pooched slide) that there was an issue with the control and made an attempt to correct it. Some presenters in later sessions were even refusing to use the little UFO shaped thing-a-ma-jig.
I realize this is really silly, petty stuff but for me user experience is all about the little stuff. It’s the little stuff that dents brands. Catching the little stuff means you are passionate and engaged and excited about your craft and the industry. This was never a problem at Living Surfaces.
Posted by Joseph Juhnke on November 7, 2007
Recent Comments