A few weeks ago I attended Microsoft’s BUILD conference to get ready for what’s coming in Windows 8. As I was sitting in the first day’s keynotes and big picture sessions, I couldn’t help but think back on the work HP has done with its TouchSmart software and notice areas where the TouchSmart software pioneered ideas that Microsoft is now building into Windows 8 for the new Metro style of programming and the new touch-first Start screen. I decided to dig a little deeper and give you a brief tour of the history of TouchSmart and highlight some of the ideas now in Windows 8 that we put into the TouchSmart software a long time ago. I’ll put a [+Win8] marker by the ideas as I go along. Let’s get started!

TouchSmart 1, aka SmartCenter, aka LaunchPad (January 2007)

The first version of TouchSmart was not called that. It was named SmartCenter and shipped with the very first modern all-in-one touch-enabled PC, the HP TouchSmart IQ770.

               

This machine was one of the so-called “Dream PCs” for Microsoft’s introduction of Windows Vista in January of 2007. I’ve written about this version of SmartCenter before, so I won’t repeat much of that here.

Touch-first [+Win8]

Of course, the main point of even embarking on a project such as the SmartCenter software was that Windows wasn’t even remotely ready for touch interactions. Every app on the Windows Desktop requires the precision that the mouse pointer provides. Fingers and touch can’t hit the tiny controls accurately enough. So SmartCenter was designed with that in mind, and as a result had large targets all throughout its user interface. Here are some sample screenshots:

Note that all buttons, checkboxes, radio buttons, scrollbars, etc. are large enough to be easily tapped with a finger. Note also that, for example, the on-screen keyboard that is used for entering a ZIP code in the Weather app defaults to the correct layout, i.e. the numeric one.

Live app data in shortcuts [+Win8]

This idea wasn’t really all that new, of course. Snippets of live app data displayed in a mini-view of sorts had been introduced with Windows Sidebar gadgets and other widget-like UIs on other operating systems, but SmartCenter was the first to use live data as part of the shortcut that launches an app. You could say the shortcuts were more like mini-versions of the full app. Live data is of course hard to demo with screenshots, so here is a small video clip of the SmartCenter home screen (or start screen, if you will), showing shortcuts that update their information as time passes:

This major version of the SmartCenter software was delivered with four total releases: 1.0, 1.1, 1.2, and 1.4. Towards the final delivery of version 1.0, it became clear that a standardized way of getting the live information from the apps was needed. This became a major area of investigation and investment for the next major version of the software.

TouchSmart 2 (June 2008)

The second generation of TouchSmart software, 2.x, was introduced with IQ500/IQ800 series hardware. These two hardware models marked the beginning of the monitor-like appearance of the TouchSmart PCs. The IQ770 was a “multi-volume” chassis – these new models had a “single volume” design, supported by the “easel” style feet that were used in the follow-on generation as well.

         

The 2.x series of software was released in three versions: 2.0, 2.5 and 2.8.

Fixed layouts for apps [+Win8]

With SmartCenter 2.0, we introduced the concept of fixed sized layouts for the TouchSmart apps. We initially picked three: small, medium and large. You can see two of the three illustrated by this screenshot:

The Tutorials, Canvas and Calendar apps are shown in medium size, while the remaining apps are shown in small size. By tapping on an app, you would go to the large size:

This layout is purposely not called full screen, since there is a reserved area at the top of the screen for navigation, app name/time and music playback controls.

Tiles concept [+Win8]

In order to make it clear that the app representations in SmartCenter were not just icons, we decided to call them tiles, or rather “live tiles.” This term was used in the developer documentation that was produced to help other people plug their apps into SmartCenter, and so we had “small tiles,” “medium tiles” and “large tiles.” For each tile size we gave guidance about how to use it appropriately. We introduced the term “layouts” to suggest that each tile size should use a different layout of basically the same content or information. As you notice from the screenshots above, when the Weather tile is small, it shows only basic information. In the large tile, the information is more full-featured and also provides access to settings for the Weather app. The medium tile for Weather looks like this:

As you can see, this layout for Weather includes only the current conditions and the forecast for the day.

With TouchSmart 2.0, a big investment was made to produce media consumption applications: Music, Video and Photo (often shortened to “MVP”) as well as a WebCam and DVD app. The screenshot above shows other apps that were published later (Netflix and Recipe Box, for example), but that just goes to show that following development guidelines has benefits: newer apps can work with older SmartCenter versions…

Other changes from the 1.0 version include the top and bottom row of “tile scrollers” and the music playback control set (aka. “media plate”) that I already mentioned. The tile scrollers had two different behaviors, depending on how full they were. If enough tiles were present, the scroller would become an infinitely looping container. If not enough tiles were present, it would have “snap-to” endpoints.

The TouchSmart 2.0 software was unveiled at a big press event in Berlin, Germany. Several of my colleagues were invited to attend to make sure everything went smoothly from a technical perspective. The most nerve-wracking part was that the TouchSmart IQ500 was to come out of a pedestal on stage after sitting inside said pedestal for an extended period of time before its unveiling. People were not sure the thermals were designed to handle as little exchange of air as this posed. Here’s a video from the introduction to give you a better idea of what I’m talking about (skip towards 1:18 or so to see the pedestal and the TouchSmart lifting out of it):

As you can see, everything worked out pretty well. This was the biggest introduction ever made for a TouchSmart PC line. No event after that had that much effort put into it.

TouchSmart 3 (October 2009)

With the third generation of SmartCenter, we piggybacked onto the 600/300 series of hardware. The enclosures still used the easel stand design with three feet for support, and the exterior was tweaked a bit along with the screen aspect ratio (now 16:9 instead of 16:10).

         

Generally, though the concept was largely the same, except for the software. A big investment was made to produce more apps for the TouchSmart software suite, and this brought us apps like Canvas, Twitter, Hulu, Live TV, Link, Movie Store, Recipe Box and a bunch of others. The TouchSmart software development guidelines were augmented with more of a proper SDK with app samples, installer samples and more guidance.

New layout

SmartCenter 3.0 introduced another layout that we called wide-interactive. You see, in SmartCenter 2.x there was no way to interact with the medium sized tiles in the upper tile scroller (except for in the browser, but that’s a small detail). In this version we wanted to provide interaction with the app in the upper scroller. In order to do that properly we needed a bigger size tile and a new layout to have enough space for interaction to make sense. Here’s a screenshot of 3.0 (running on a 16:10 screen, not the aspect ratio it was designed for – so circular elements are “squished”):

In SmartCenter 3.0 the touch scrollers no longer “looped” infinitely, but each had a “snap to” end regardless of how many tiles were present; each wide-interactive tile was given a colored title bar to add a little splash of variety and visual interest. In addition, the “media plate” and other control elements on the home screen were redesigned to appear a bit lighter than before. Also, standard button glyphs were introduced for closing and minimizing SmartCenter. Oh, and the clock was moved around and given a day of the week display. Phew – at least the Personalize button stayed almost in place…

The final big change was that tiles in the bottom scroller no longer used the small layout. They were simply icons to launch the app into large layout directly. This was done to improve performance and load less stuff at the startup of SmartCenter.

TouchSmart 4 (September 2010)

Okay, so here we are, almost at the last chapter of this brief history (which is turning out not so brief after all…) TouchSmart 4.0 was introduced with the TouchSmart 310 (and 610) series of hardware. These departed from the easel-type stand and went to a single-foot design (I know there’s a better term for it, I just can’t think of it at the moment).

         

TouchSmart 4 didn’t see much investment in new apps, but focused on new capabilities provided by the SmartCenter framework.

Infinite Canvas [+Win8, sort of, on the Metro Start screen]

A major goal of the SmartCenter framework software had been to provide an almost limitless space for apps to live in. With SmartCenter 4.0 that goal was finally realized. Not only did the framework provide for an infinitely expanding space for hosted apps to live in, it also did away with the upper tile scroller and let the apps be positioned freely on the canvas. This is what TouchSmart 4.0 looks like after initial startup:

And once again, things were moved around on screen: The clock from lower left to lower right (and it was given a function: click to show a mini-calendar), personalize from lower right to lower left (and the word personalize removed). The “media plate” music playback controls were removed and put into the music app instead. The volume control was separated out from the media plate and put in the upper left. The bottom carousel was redesigned and had the infinite looping re-introduced (to allow for a bit of visual and interactive playfulness). Tapping a tile launches the corresponding app:

Apps can be moved around freely and the carousel shows a colored highlight for each running app:

If you look at the above shot closely, you’ll notice the Weather app in what looks like another layout. What’s happening there is not a new layout, though. It’s simply the wide-interactive layout, shrunk down to an “inactive” size. Thus we called it “shrunk layout” or “shrunk view”.

The button next to personalize in the lower left can be used if the app you’re looking for in the carousel is hard to find: QuickLaunch is sorted alphabetically:

Parallax background [+Win8, sort of, on the Metro Start screen]

Scrolling the canvas (or panning it, if you prefer) is done by grabbing empty space (with mouse or touch) and moving from side to side. To add a little visual interest to this, and to demonstrate the departure from the 3.0 tile scrollers, we added a parallax effect to the background to give you the illusion of looking into the distance on your screen. Several sets of parallax backgrounds were developed for variety’s sake, to be picked in the personalize area.

Magnets

Another major feature of SmartCenter 4.0 was the introduction of something we called “magnets”. These represent active content that originally came either from an app or from SmartCenter itself (in the case of Graffiti magnets). Magnets eliminate the need to start an app when you want to enjoy a favorite piece of content, be it a photo, video or some music you want to keep handy for quick enjoyment. Here are a few magnets placed on the canvas (they can be “pinned” so they always stay visible or “unpinned” to scroll with the canvas):

Here’s what it looks like after panning a bit (while playing the fireplace video):

You can see the pinned magnets haven’t moved and the background looks slightly different (the islands have moved at different paces to give the illusion of depth as they’re moving).

Okay, let’s see what it looks like in action:

TouchSmart 5 (September 2011)

And that brings us to the latest generation of SmartCenter (as of this date), i.e. 5.0. This version of the TouchSmart framework software was brought to market with the just recently introduced 520/420/320 series of TouchSmart PCs. The exterior of the machines has been updated once more to keep up with design trends, but otherwise the single-volume enclosure is still the chosen form.

            

Integration of Windows apps, desktop icons

The biggest change in SmartCenter 5.0 regards the blending of the two environments that were previously separated: SmartCenter and the Windows Desktop. This means you no longer need to exit the SmartCenter environment when you want to run Windows apps. Here’s a screenshot of SmartCenter 5.0:

Note that the Windows 7 taskbar is fully visible and that you can use it for launching apps and seeing what apps are running. The SmartCenter app carousel now has the icon highlight turned on permanently and only shows a short animated starburst as an app is launched. You also see all your desktop icons represented on the SmartCenter canvas. As you can see, the magnets overlap the desktop icons, which can be a bit of a clutter issue. No worries, you can turn off the desktop icons via Settings, if you don’t like them on the canvas. Or you can rearrange your magnets so they occupy different space:

In general, SmartCenter 5.0 attempts to bring the touch-first environment of past generations together with the traditional, mouse-centric desktop. That’s a value-proposition you don’t have in Windows 8, which is most likely not available until sometime in late 2012 anyway…

Automatic panning/scrolling

One additional thing SmartCenter 5.0 does is automatic panning of the canvas/desktop whenever an app is launched. This removes the need for you to have to rearrange app windows frequently when you want to switch from one app to another. The canvas pans automatically to make more room for every app you start. To return to an app, you just click on it in the taskbar or the app carousel. Another video might explain it a bit better:

This behavior can be turned off in Settings as well, in case it’s not useful to you. There are many, many areas that I haven’t touched on in this post, such as all the personalization and customization aspects that SmartCenter contains and how they changed over time. Or the fact that you can make your own parallax backgrounds (not documented anywhere, unfortunately, but pretty easy to figure out for enterprising souls). Or the easter eggs, oh yes…

Let me make some general remarks about the last four generations of SmartCenter: Any apps written to observe the guidelines of SmartCenter 2.0 are able to run on SmartCenter 2.0 through 5.0. A nice compatibility feature. Of course, older versions of apps needed updates as new SmartCenter functionality was introduced (or removed, as with the media plate removal in 4.0), but as you’ve seen, the Netflix app (which was published with SmartCenter 3.0) runs just fine in SmartCenter 2.0 and 5.0 as well. What’s more, if you know what you’re doing, you can have all the versions of SmartCenter 2.0 – 5.0 running on the same system. That’s how I was able to collect screenshots and videos for this post. Oh, and the technology underlying all these versions of SmartCenter is Microsoft’s Windows Presentation Foundation (WPF), 3.0, 3.5, and 4.0. The various apps were written in anything from compiled-to-native-code-Python to WPF to Adobe Flash. The software development process used since about SmartCenter 2.5 is anchored in Scrum, an Agile software development framework.

This concludes my brief history of the TouchSmart software. As you have seen, Windows 8 definitely picked up a lot of the features that the SmartCenter framework pioneered: Live tiles, fixed layout sizes for apps, parallax scrolling with an expandable space and touch-first design. Until Windows 8 is available, the TouchSmart 5.0 software suite is most likely the best alternative for touch – combined with new thinking on how to add something more to the the desktop environment – that you’ll find on an all-in-one PC anywhere.

Categories: Agile, HP TouchSmart, Microsoft, Opinion, Software, Software development, Windows 7, Windows 8, WPF
30 Comments »

I’ve just finished my second reading of Seth Godin’s forthcoming book, Linchpin. Seth gave a group of people the opportunity to make a donation to the Acumen fund and in return we received a copy of the book before its public “ship date” on the 26th of this month.

Linchpin is at its core a self-help book. It’s meant to help you realize that if you want a shot at being indispensable, in whatever human realm (but mostly at work), you have to make some hard choices in your life. The reasoning for this takes you on a brief tour of economic systems, psychology, neuroscience and societal systems, including the education system.

You’ll read about Karl Marx, Friedrich Engels and Adam Smith and how a system is emerging that leaves an opening for a new role in economic systems: so-called “linchpins,” people who don’t need access to capital in the traditional sense, whose contributions are difficult to make interchangeable/replaceable and who make these contributions for the sake of contributing, not for the sake of making money. Making money, argues Godin, comes as a byproduct of the contribution that a linchpin makes. In a way, part of this book is about how the emerging global economic situation is made up of Communism and Capitalism remixed. And the best (perhaps the only) way to get by in this emerging system is to become a linchpin - an artist who gives of his or her creativity, ingenuity and humanness freely without desire for reciprocation. Linchpins are intrinsically motivated.

The self-help aspect of the book is that Seth is trying to convince you that this is the kind of role YOU want to play, because doing otherwise is a dead-end in the system that’s now emerging worldwide. Seth’s reasons for wanting you to become a linchpin are well-meaning and honest. He’s attempting to give you the best advice he can, based on the way he sees things unfolding right now. It’s hard to accurately summarize what the book says constitutes the behaviors and attitudes of a linchpin, and it would probably diminish the experience of reading the book. There are plenty of examples and inspiring stories in the book, and they make for really interesting reading.

At times it feels like the book is a collection of somewhat distantly related blog post blurbs, woven together loosely by a few underlying threads. It’s a little hard to follow at times, keeping up with the jumps and turns, and maybe this is just a logical consequence of Seth frequently sharing a lot of his thoughts in blog post format. It’s become his style. That doesn’t make the underlying threads any less important, though.

In a way, the case for the linchpin idea is made with a hermetically sealed argument. If you want to argue that the idea won’t work for you, the book has the counter-argument ready that this is your “lizard brain” speaking. It is the most ancient part of the brain (speaking in terms of evolutionary age), the part that is most concerned with survival and basic biological functions. Given the chance, your lizard brain will win over the more developed, more “recent” parts of your consciousness. It takes hard work and tricks to overcome the resistance that the lizard brain represents. The book takes a long, hard look at all that. In fact the book says that your lizard brain hates it when you read books like Linchpin.

I have no doubt that the book is spot on in saying that we don’t need more things cheaper, faster and more average. We’ve lived in a system focused on that for only a short time (a couple of generations), but it seems like forever (we have bad memory). We’re ready for getting back to outstanding things. Art that moves us, makes us feel connected, builds us up, helps us form new tribes. We’re hungry for real, human interactions, ready for forming new bonds with people in whatever way that might happen. We’re tired of the simple exchange, the transaction that leaves us distanced from each other. We look for ways to get more involved, to matter to each other. Linchpin shows us how, by encouraging us to bring all of ourselves into each part of our lives, at work and at home (but it’s mostly about work).

That being said, I don’t think everyone can be a linchpin. All large systems (ecosystems, societies, companies) have hierarchies and layers. Ecosystems, for example, have tons of species that are needed “below” to feed the outstanding species at the top. I think it’s similar in the workplace. And in a way, the book has an answer for that. Nobody is a linchpin all the time. Even the most successful people spend most of their time doing ordinary things. It’s the moments of extraordinary acts that make them linchpins.

I also think that the road to becoming a linchpin is long and hard. The “resistance” can’t be overcome “suddenly.” It’s a slow learning process. In fact, the book argues that the best way to beat the resistance is to slowly try to build a platform that looks “harmless” to the resistance, so that when you’re finally ready to take the leap, you have a network of “friendlies” that are ready to see what you have to give. A lot of the arguments the book makes depend on an assumed network that supports linchpins. For example, you shouldn’t be afraid of getting fired for breaking rules, because it will be obvious to others that you have linchpin characteristics, and they will hire you in a heartbeat. This requires that you’re well-kown. The hard part is getting noticed. The Internet accelerates the “race to the bottom” (outsourcing, standardization, commoditization) and at the same time makes it harder to be remarkable because you have to stand out among a vastly bigger crowd. Seth says you don’t have to be an outlier (probably in the Malcolm Gladwell sense) to become a linchpin, but it seems to me that somehow you do, at least a little bit. Maybe not an outlier in a “global” sense, like a world-famous movie star or musician, but certainly in your local environment.

Linchpin encourages everyone to contribute “art,” saying that it’s the only thing that is hard to commoditize. I wonder if a flooding of the marketplace with “art” won’t commoditize it somehow anyway. Another question in my mind is how today’s megacorporations can become more human, more remarkable? It certainly isn’t going to happen overnight. There’s a lot of inertia in big systems. I suppose the only thing to do is to focus on “art” that’s within your grasp, and slowly build from there.

My own attempt at this (giving things away through this blog) have so far been – how do I put it - interesting. Interesting in the sense that I have given things to people without expecting anything in return, and in specific instances where personal contact was involved, haven’t even gotten back a “thank you.” Maybe what I’m capable of giving away online is not “art” enough. Maybe I have made it too hard to receive.

To me, Linchpin is a perfect specimen of a self-help book, because you really have to do it all yourself. Nobody can help you. Want to make artful gifts, as the book argues linchpins do? You have to figure out what your art is. Want some help figuring it out? Sorry, there is no map (not entirely true; there are seven characteristics a linchpin exhibits, but you still have to figure out how to apply them to yourself or how to develop them). Hesitant to start? That’s your lizard brain holding you back.

Categories: Opinion
No Comments »

Sorry about the bad scan quality (it’s from today’s newspaper – yes, dead trees, and yes, I still read newspapers). It says:

80% of Toyotas sold in the last 20 years are still on the road today.

Is it any wonder that it’s hard to make any kind of change on environmental impact? Not just for cars. Think, for example, about the inefficient lighting systems installed in millions of old houses (that aren’t well insulated, have old, inefficient furnaces/air conditioners, etc.). Things like these have a habit of lasting long and they weren’t designed with environmental impact in mind.

With information like this, it’s harder and harder to stay optimistic, wouldn’t you say?

Categories: Environment, Opinion, Personal, Sustainability
2 Comments »

This is more of a tweet than anything, but since Seth Godin only seems to allow trackbacks, I need to comment on my own blog in regards to his post Is marketing evil? It’s not about marketing. It’s about advertising. Advertisers use psychological tricks to market stuff. Watch the PBS program The Presuaders if you have any doubts about this. Advertisers have an unfair advantage over the masses. Average people don’t realize they’re being manipulated by ads, especially TV ads. That’s why it should be imperative to teach media literacy in schools. People need to be equipped to see through the tricks so that they can judge any “marketing” message that may be obscured by the manipulation in the ad.

Categories: Opinion
2 Comments »