In July, I attended the Austin Flash User Group monthly meeting. About 20 people were in attendance, a mix of designers who have never used Flash to hardcore Flash enthusiasts. I met a lot of great people and enjoyed hearing about interesting projects at different companies.

Unfortunately, the Flash User Group has been lacking in leadership and low attendance. There wasn’t much substance to the meeting when it came to Adobe Flash. I’m usually really good a complaining when something isn’t right, much better than actively participating to fix it! Frankly, I’m tired of playing that card. Feeling it was time to jump in feet first, I volunteered to do my own presentation to the group and host the next meeting at Springbox. I had no idea what I got myself into.

I decided to speak about HTML5 and Flash. This topic interests me mainly because of the hype generated by Steve Jobs and his refusal to allow Flash on the iDevice. I thought this would be a good topic for the Flash community since a lot of people, like me, are concerned about how this might change the future of Flash.

Last night was the presentation. The attendance was a record-breaking 45! I say record-breaking, but really I have no idea. It was definitely more people than usual. We started out with my presentation about HTML5 and Flash. Next up was Steve Shipman, an employee at Motive, who gave a talk about a Flash code library he created for face detection. Very cool stuff! Overall, the meeting was a huge success. I met a lot of people who work in Flash as a full-time job. Everyone is hungry for a local community in which they can participate and share knowledge. Honestly, I couldn’t have asked for anything more out of the meeting. As a user group, we’re on our way to rebuilding a strong sense of community in Austin, and I’m sure in the future the meetings will get even bigger and better.

Over the last month or so, I've worked on a kiosk project, watched Apple release the iPad and ate a couple of breakfast tacos. And I can't help but wonder: What's it going to be like when our physical environments become even more digital? Will we eventually live in the Minority Report?

The digital invasion of public spaces has been in motion for years. We've got CoinStar to help us make change on the fly, RedBox to spit out DVDs and bank ATMs to grab some cash without a teller. Don’t forget the growing world of digital signage, too. As the technology becomes more cost-effective, I think we can expect to see big brands create custom, brand-centric interactive environments—ones that harvest useful data from the public and enchant all five senses. (Sample perfume fragrances via kiosk or get a whiff of an "unidentifiable asian food dish" at the mall).

So, here's a peek at a few ways the digital world is currently permeating the physical world:

Innovative Touch Surfaces
Apple's iPad: With its release in April 2010, the public can fill their growing appetite for touch technology — everywhere they go.
Jeff Han on TED: A must-see demo from the pioneer of multi-touch technology. Check out his Perceptive Pixel, too.
Microsoft Surface: One of the major players of touch technology in recent years.
CNN's Magic Wall: Provides nightly interactive infographics and content during news coverage.
Reactable: Brought interactive tabletop gaming and live electronic music to the public's attention.
Inamo: View the live chef cam, place an order or check out nearby movie theaters on your dining table.
iBar: Playful light surface to complement your beverage of choice.

Interactive Walls, Floors and Projections
Apple's Hyper Wall at WWDC 2009: A 20-screen display showed the 20,000 most popular iPhone apps and highlighted real-time downloads, at 3,000 per minute.
Multi-Toe Touch Floor: Tap, step and stomp to control the floor. It's probably fitting to also mention the Wii Balance Board here, too.
IBM's Smarter Planet Interactive Billboard: Color-sensitive cameras change the screen color based on each consumer's shirt as they stand in front of it.
CNN Hologram Interview: See Anderson Cooper interview musician Will.I.Am via a Star Wars-style hologram.
Diesel's Interactive Storefront: Cue the rock band when you pass by this fashion store façade.
3D Live Video Mapping: Playful video on buildings has been happening for a while now, and it's still pretty neat. Check out this AC/DC exhibition, too.
Dell Children's Interactive Donor Wall: A cool way to engage the kids and display donors to the public.
Interactive Rear Windows: Watch ads in the traffic in front of you, or on digital billboards.

Next-Level Self Service
Jack in the Box Ordering Kiosk: Get your burger without speaking to anybody. Or your taco combo, if you prefer Taco Bell.
Best Buy Mini-Store: Get your electronic fix wherever you can find one (usually an airport).
Hospital Check-In: Get in line for the doctor by using a kiosk.
Coke's Touch Vending: Uses a touch interface to make purchasing a soft drink more interesting.
Wonder Pizza: Prepares and cooks a pizza in 3 minutes using infrared, for better or worse.
Zugara's Webcam Social Shopper: Try on new outfits from the comfort of your home.

Going Forward
While we might not live in Minority Report just yet, out-of-home digital experiences are here to stay. Here are three trends to keep an eye on going forward: 

1. Designers and developers need to keep their thinking fresh and innovative in how to approach user interfaces and digital experiences that will be placed in public spaces.
2. The public’s appetite for sleek interfaces and interactive experiences is growing, and they’re becoming more savvy and educated with a variety of technologies and products.
3. Brands have the opportunity to be creative with their experiences and win over our hearts and minds with innovative engagements.

The mobile computing revolution has produced a multitude of products and new ideas about how we interact with these devices. I’ve explored many of these approaches from stylus to rollerball to touch-screen functionality. Of all of these approaches, multi-touch functionality is the most powerful, and I think the most likely to become the standard for mobile interaction and beyond.

I was recently tasked with creating iPad desktop icons for some of our clients’ websites and began to wonder how this type of device — and multi-touch in general — would impact web design in the future.

Up until now, website navigation has been done exclusively with a mouse. As users explore a site with a mouse, we look for clues to determine their intention and then provide content or interactive events to help them to navigate. Designing for such interactions has produced a library of elements such as rollovers, dropdown menus, underline text links, tool tips, etc.

How will these behaviors transfer to multi-touch? And how will user experience diagramming (wireframes) adjust to handle it?

Some interactions such as two-finger scrolling or two-finger pinch-zoom are fairly intuitive and have been widely adopted on mobile devices; however, without the mouse, we more or less lose the concept of intent as a “trigger” for interaction events. We can still utilize richer and more elaborate interactions, but must create a type of standardized iconography, which details the type of interaction necessary.

Take for example a tool tip or a hover-state event. You could approach this by forcing someone to call the tool tip with a touch (but not revealing a call to action until the additional content is presented). Repeat visitors may find this inefficient or annoying. You could also approach it with a secondary button for more information. Or you could utilize multi-touch by allowing the user to see additional content with a two finger reverse pinch to “open” the content. You could identify this action with some iconography in the corner of the element.

I’ve also considered global navigation, which previously has been the dominant element at the top of every website. A nav being a utility to access content, I always strive for ways to minimize its presence and give content the spotlight. For multi-touch, I considered the option of accessing a nav from anywhere on the site through a single global gesture such as a three-finger reverse pinch. Make the gesture and your options are available to you at the location of the gesture.

From a UX perspective, I’ve thought of iconography that could be used in wireframing to create a shorthand for these multi-touch gestures: simply a number representing the number of digits with directional information about the motion involved for the gesture (see image above). I feel this could be used to outline functionality and could be included in final design elements as well.

These points are by no means meant to be final solutions for multi-touch interaction, but are food for thought and discussion. I personally find this to be a very exciting change in interaction design and look forward to the challenge of taking it on.

Working on web-based projects over the years, there have been many times that I wanted the capability of using a single linked file throughout multiple PSD documents, much in the same way Adobe's InDesign has this function for large multiple page documents. This would have saved untold hours of mundane and repetitive work, as a simple copy change such as "Main" to "Home" in a large site's navigation would require only one file to be changed, instead of every single page. Unfortunately though, this was merely a dream until a discovery I had a few weeks back.

Recently, a large non-profit came to Springbox to redesign their site, a digital treasure chest of information and opportunities on a specific topic affecting millions. As you might imagine, the breadth of the content on the site was huge, with a rough estimate of more than 300+ pages.

Having worked on a large redesign recently, I had a strong desire to find a new system to allow quick updates to commonly used elements throughout the site, such as the header, the footer, a general tout layout and the styling of a call-to-action arrow. As these elements are used virtually on every page — particularly with the arrow being used 10+ times on multiple pages, changing these individual items can literally take up hours of time — even on only a handful of pages.

At this point, I must admit my great love for a half-solve to this issue — the introduction of smart objects in Photoshop. If you have not worked with smart objects, or just want a great refresher on the subject, go check out Viget Lab's great article.

Moving along, I say that smart objects are half-solve because these embedded linked files are only applicable to one page. For example, make a custom arrow, turn it into a smart object, then make copies of this smart object and distribute them to the rest of the page. A few days later the client wants to change it, just go in, change the smart object once and it will automatically change this for all instances of the smart object on the rest of the page. Magic! I love smart objects. I really do. So now we just needed to expand this functionality to reach 300 or 5,100 pages.

At this point, I did the obvious: I fired up Google to see what the internets had to offer on the subject. I found others were searching for a solution as well. All of this searching led me to the work of Mike Hale and Jeff Transberry who wrote a script to do just what I was looking for.

So here's the new workflow for a sample project, Goodness Inc., after downloading the script and installing it via the Adobe Extension Manager:

Example Site Layout and Content

Step 1  

Design the homepage with folder groupings for Header, Hero Area, Footer, etc.

Step 2

Select the Header folder in the Photoshop layers palette and choose "Convert to Smart Object."

Step 3

Double click the icon for the Smart Object in the Layer Palette, thus opening up the Smart Object as a separate document.

Dialog Box for editing a Smart Object as a separate document:

Content of Header Smart Object:

Folder Panel content of Header Smart Object:

Step 4

Save the Smart Object in a new folder within the project file, which I label "Universal Elements" or whatever is easiest for you to distinguish.

Step 5

When I am ready to bring in the header for a new page on the site, I go to File --> Place --> then browse to the "Universal Elements" folder and select the file.

Step 6

I now open up the Window pallete options, and pull up the "Links" window. I see that this Smart Object is actually a linked object. From this "Links" window, I have a few options: I can refresh the panel to get the latest link info, re-link the object, or I can edit the original.

The Window > Links panel, as relative to the selected layer, in this case being the "Header" smart object.

I then repeat the process of placing the element in all pages that need it.

Follow-Up Steps