If you’re impatient and want to know how I got these drawings online, skip to The Solution.

The Problem

I wanted to show these off in a pannable and scaleable format, similar to Google Maps. This, I felt, did a better job of showing the body of work better than Flickr or another image sharing service. I wanted people to be able to get the large view, then dive down to see the grain of my pencil on the paper. Flaws and all.

I searched around, even tweeted my request. Being impatient, I didn’t even wait for responses to come in and forged ahead. (I probably should have waited, because apparently Microsoft SeaDragon does this.)

Here’s what I came up with. Click the image to play around.

The Solution

I knew fundamentally how Google Maps worked. It creates tiles of images, which are loaded into an interface progressively. Large images are divided into matrices of tiles at differing levels of resolution. The user interface is aware of (1) what is viewable in the viewport and (2) what scale the user is at. This allows the UI to present only those tiles that are needed for the current view at the chosen scale level.

Enter Zoomify

I remembered a tool called Zoomify, which provided an interface that did just that. Looking on their site, I noticed they had a free viewer called Zoomify Express, as well as an app that would cut those images up. Bingo. Downloaded.

Next, I made the high resolution composite of my images. This actually was the longest part, since each of my scans were at 300 dpi and I have just a simple Macbook. Nevertheless, I composited the images to the tune of RJD2 and my computer’s fan furiously spinning. The resulting collage I saved out at full resolution: 300 dpi.

With that image in hand, I dragged it into the Zoomify Converter. After a few minutes, this simple little app had sliced it all up and stored them in a set of folders. Vince Shlomi’s Salad Chopper isn’t even this fast and neat.

Next, I pointed the Zoomify Express html file at this folder. Immediately, it loaded up and was good to go.

Hosting through S3

With this, I could have easily just packaged it all up and popped it onto my Web server. But I was concerned that the traffic might spike and the data transfer would exceed my quota. Thinking back to GarnishBar, I remembered Mike Kibbel saying how easy it was for him to set up and serve assets from Amazon S3. For cents a day, I figured it was worth a shot.

Amazon S3 is essentially a bucket that you can serve files from. You pay based on data transferred, which in my case is not much. Plus, you get the benefit of Amazon’s CDN, which optimizes those transfers for geography. Sounds good. I signed up.

Getting the files there

S3 is a bit strange, in that it requires a special client to get the files transferred in. I had heard of S3Fox, which is a free Firefox plugin that helps you manage your S3 bucket. I added it to my plugin family.

From here, I simply dragged my files (including the HTML file with the Zoomify .swf) onto the transfer pane and waited. Uploads were speedy and simple. There were two errors, but re-uploading those files solved that.

After that I pointed my browser at my S3 url–to no avail. I realized you have to set read permissions on the files for the world to see. I tried this with S3 Fox, but it didn’t seem to work as expected.

Stuck, I wondered if Transmit could manage an S3 bucket. Turns out it can–and quite well. After connecting to S3, I set those permissions to let the world read them. Heading back to that URL, I found that it worked as expected.

So, in about an hour I was able to roll my own zoom-and-pan tool and get it hosted on a world class CDN. Even if the sketches are bad, this was a win.

Let’s role play.

Pretend you have a recipe Web site. Think your “users” are people who want recipes? Nope. They’re people like Mary.

Mary is an unmarried mother of two. She works double-shifts when she can and is studying for her GED. She needs to feed her kids a cheap, nutritious dinner in under one hour because she has to study from 9pm to 12am.

You can picture her right? She might sound like someone you know. You can empathize with her deeply. And since you now know her, you can make informed decisions on her behalf.

Building for Mary.

So back to the recipe site. Assuming people like Mary are your priority, you might decide to:

• Build your database around easy-to-prepare meals.
• Show ingredient substitutions, in case she doesn’t have something on hand. Help her minimize trips to the grocery store.
• Add a “Find recipes that use…” search tool, so she can find recipes that use ingredients in her pantry.
• Allow recipes to be filtered by total prep and cook time.
• Write a series of articles called “One Pan Dinners.”
• List nutritional data with comparisons to daily allowances.
• Let her scale ingredients by the number of servings.
• Create a tool that scrapes Kroger’s sale items and emails her a customized weekly menu, replete with shopping list and coupons.

Furthermore, this newfound focus helps you decide what not to invest in. Knowing Mary, you might not:

• Spend time adding recipes that use squid ink and other Iron Chef-caliber ingredients.
• Court advertisers like Viking ranges, Le Creuset or Whole Foods.
• Build a MySommelier app for recommending wine pairings.

Here’s the point.

Real people use your product, not users. If you can’t describe them like they are your next-door neighbor, then you can’t design for them. Get to know them intimately and banish the word user from design discussions.

Need more convincing?

Sam Farber saw his arthritic wife struggling to control a carrot peeler. With this person and her situation in mind, he started prototyping kitchen utensils that were singularly focused on ergonomics. After testing and refining with real people, his work became the OXO Good Grips line. By considering real people deeply, his kitchen utensils redefined a household commodity and created a new market.

Now go read OXO’s story.

Error 51: Unable to communicate with the VPN subsystem.

This presented  a problem: I couldn’t get the updated client, since Cisco protects downloading that client software. Snow Leopard, however, comes with improved VPN capabilities that obviates the need for the client itself.

Could I migrate an old Cisco profile into Snow Leopard with borderline zero knowledge about my VPN connection? Yep–and here’s how I did it.

Disclaimer: This is perhaps the most kludgy way to accomplish this task. I’m not a network guy and I have no idea if this will work for you. It worked for my unique case. Proceed with caution.

Prerequisites

To do this, you should be comfortable using Terminal and you should know your VPN account name and password.

Find your Cisco profile.

Open Terminal and go to the cisco-vpnclient directory that holds your profile:
/etc/opt/cisco-vpnclient/Profiles

In this directory, there are one or more .pcf files, which are what Cisco uses to mange VPN connections. A PCF file is just text, so issuing the command more profilename.pcf will show you its contents. Replace “profilename.pcf” with the name of your file.

In this file, you’re looking for three specific things to give to Snow Leopard’s Network system preference manager:

Unencode the GroupPwd

The group password is stored encrypted. You’ll need to give Snow Leopard the plaintext version. Copy the entire hexidecimal string.

Open a Web browser and visit the Cisco VPN password decoder. Paste in the password and click “decode.” You should receive a plaintext version. Copy everything after “clear:” to your clipboard.

Create a VPN Network connection

Open System Preferences > Network. In the left pane, click “+” to add a new connection. Choose the following:

• Interface: VPN
• VPN Type: Cisco IPSec

You can name “Service Name” whatever you like. Go with your heart and then click “Create”.

Type the “Host” value from your .pcf file into “Server Address”. Add in your Account Name and Password and click “Authentication Settings”.

In the Machine Authentication dialog, paste the unencrypted password into the “Shared Secret” field. Type in your Group Name and click “Ok”

Click “Apply”, then “Connect”.

That’s it. If this worked right, you should logged into your VPN. If you’re like me, this now means you have no excuse not to be working on the weekend. Good luck!

Notice the “Which LogMeIn product is right for you”? That’s a band-aid, trying unsuccessfully to clot the hemorrhage of product segmentation and cutesy marketing-ese.

I’m not a gamer or game developer. My button-mashing skills are stuck in a NES time warp. So I thought, what if one of the classics was recast for today’s devices? My target is Pac Man.

The concept

This idea is rooted in the labyrinth of cities. Alleys and streets become the corridors. The players race through a neighborhood, collecting pellets and devouring their competitors. It’s a race-meets-scavenger hunt.

Gameplay

Using a map overlay of a city street, the game master draws the corridors with her finger. Doing so places pellets throughout the maze. After she’s done, she pushes an invitation to other players who also have the app and are ready to play. Each accepts the invite and goes to their assigned starting point. Once everyone has checked in, the game begins.

Each person is their own Pac Man and their competitors are seen as ghosts: Blinky, Inky, Pinky, Clyde and so on. As they race through the streets, they accumulate points by passing though pellets that are simply GPS placemarks. If they run through a power pellet, they can tag another person for bonus points.

The interface would be sparse, simply overlaying game data on the streaming camera. The user would see the pellets in their field of vision. In the periphery, cues would show the rough direction of other players. An info bar would show their current score and any additional notices. For example, the mockup shows the user’s bar in a warning state that indicates his “power up” status is about to end.

Extensions

As game maps are created, they are posted to a public Web site. Through the site or the app itself, other users can browse these maps and copy them for future play. Game masters can accumulate points for creating maps that are most played. Users accumulate points over the course of multiple play sessions. Of course, a leaderboard showcases the top players.

Conclusion

While this is just a simple idea (conceived and rendered in about two hours), hopefully it provides some insight into what’s possible today with the latest generation of handhelds.

I have a pretty stable way of tagging items in my bookmark library. This is by no means totally complete, but it serves me well.

• Use only singular tense as a rule (“artist” rather than “artists”)
• Separate phrases into their roots (“interaction” and “design” rather than “interactiondesign”). This helps me generalize searches (just “design”) while also promoting tag intersections (“interaction” + “design”).
• Use generic modifiers (“research”, “tools” and “*”) for subdividing later through intersections.
• Refactor tags every few months. I’m only human and my tags get out of kilter after a while, which reduces the findability of the links. I try to stem tags and remove niche ones.
• Use action phrases like “toread” and “towatch” to cull out those things I need to take action on.

Of course, this system is tuned just for me. I don’t expect anyone else to benefit from this, even if the system might be fairly usable by other people. For more information on this, see my earlier post “Tagging is Selfish.”

Universal Access is designed as an accessibility tool for disabled users. But I’ve co-opted it as a way to get a tan while still catching up on work. Here’s what to do:

1. Turn on Universal Access. Go to System Preferences > Universal Access. Under Seeing > Display, click the radio button “White on Black.” This inverts the screen’s chroma and keeps it from getting washed out.
2. Upsize your cursor. Under Mouse and Trackpad, crank up your cursor size so you don’t lose it. Because you will.
3. Zoom the Display. Text still kind of small and hard to read, no? Now you need to zoom the display. Hold down Control and do a two-fingered swipe up. This embiggens things. Zoom out by doing the opposite. (If the constantly panning display makes you seasick, you can change this in Universal Access > Seeing > Zoom > Options.)
4. Use Spaces: Resizing windows can be a chore. I use Spaces and put each window in a separate virtual display. Moving between them is a keystroke away: Control + arrow pad.
5. Learn Keyboard Commands: You should be doing this anyway, but if you’re not, here are a few good ones to get your started:
   • Switch between apps: Command + Tab. Use the left and right arrows to cycle between the running apps.
   • Access the Safari / Firefox address bar: Command + L
   • Access the search bar (Firefox): Command + K
   • Scroll the page down/ up: Spacebar / Shift-Spacebar, respectively.
   • Go back in Safari / Firefox: Delete
6. Did you remember to put on sunscreen? Rub the lotion on the skin.

1. Making sure designs provide enough space to accommodate the players
2. Testing CMSes to make sure they don’t blow up when someone uses the Big YouTube player

Below I’ve pasted the result. You can grab the latest code for this from GitHub: http://github.com/toddmoy/video-embed-test-sizes/tree/master

YouTube (320 x 265)

Youtube (425 x 344)

Youtube (480 x 325)

Youtube (640 x 505)

Vimeo (400 x 225 but configurable)

Wilderness – South Africa 2009 from Michael Grabner on Vimeo.

Viddler large (437 x 392)

Viddler standard (437 x 288)

Photobucket (448 x 361)

Succinctly, to elicit a certain behavior you can manipulate the environmental variables. People are who they are and it’s hard to coerce them in to behaving a certain way.

When I wrote that original post, I was thinking mostly about functionality. You can change the features you offer, such that you can channel people’s behavior. If a certain behavior is desirable, then build out tools to support it. But is that enough?

On a recent project, I was thinking about how to subtly encourage people to complete an action. The behavior we wanted was engagement: reading content on a site and completing certain activities. Drawing from patterns used on LinkedIn and online dating sites, we settled on a progress bar to encourage certain types of interaction. Surprisingly enough, knowing that you’re “incomplete” is an incentive to perform the next suggested action. This is especially true if that action substantially changes the completeness.

But the progress bar is a bit cold. It unemotionally calculates the height of a bar based on elementary math. So I started thinking. People tend to have a unique attraction to faces. You see this in eye tracking studies. What if the progress bar was humanized a bit?

Below are four comparisons of the same data. The first is the pure math, where completeness is expressed as a percentage. The second is a typical thermometer, which shows the completion differential. The third and fourth make this a bit more human. The third simply adds features, giving it more personality and expressive qualities. The fourth takes a static image and brings it out of the blur and into clarity.

With the last two, you lose a bit of the differential–i.e. your degree of completeness. But in the process, I think, you gain something a bit more humane and ludic.

What do you think?