The ZURBlog is where we discuss interaction design and strategy.

This may sound nutty but here at ZURB, you'll often find us standing at whiteboards to think out design problems. In fact, we have 19 of them scattered about the office. Although sitting down to talk things through might be more comfortable, designing while standing is an awesome way to create great results.

The stand-up design method really gets the blood flowing because it actually forces your blood to circulate through your body and brain, and gets the neurons firing creative thoughts. People interact with your websites in noisy homes, at coffee shops, and over smart phones in public. They're active and fickle. Standing while designing helps you match their actions and keep your energy up while designing. More often than not that energy shows in a more inspired, dynamic, free-flowing end result.

Getting away from your desk lowers your guard

It's subtle, but desks are homebase. They're territory. People feel ownership over them and social rules apply for who and how people can approach you in that space. When you stand and work away from your desk you enter into shared space. You're more approachable and open to feedback. Below is a great example of how getting in a neutral space encourages others to give feedback on a design.

Standing is social

When you get away from your desk, it's easier for others to gather around you. ZURB has a big work table with enough room for 3-4 people to spread out and work. This gets ideas flowing between people.

Standing up while designing gives you a whole new perspective on your project. It's funny, but the scale of an idea influences how you think about it, and whiteboards give you a large space to work in instead of a small rectangular computer monitor. Below is a great time lapse video example from our 24hour ZURBwired that shows people working in clusters.

Whiteboards promote standing

It invites standing, animated/energetic work, and is fundamentally social. Most great work and great conversation happens in the hallway or around the water cooler, not in meetings. Having work on whiteboards makes it easy for others to approach what you're doing. Two, three, and four or more people can gather around and participate. New things can start to click. Getting other people invested in a design is much easier at a board.

It also keeps you from typing ideas on a keyboard, which constrains thinking. Instead, using large hand movements while standing in front of a whiteboard produces unexpected results. Skip the details, just focus on broad concepts.

Just stand up

The next time you need to jumpstart a design project, put up a whiteboard on the wall. It's a surprisingly effective way to collect and organize ideas.

ZURBvision: A 3D camera built from two iPod Nanos

ZURB Office 3D Video Nate Bolt 3D Video

It came about like this: we were walking down to get coffee and discussing the finer points of Nate Bolt's SHOTS video. Nate was coming to the office to do a Soapbox and we decided two dimensions weren't enough to fully capture him, so we set about to build our own 3D camera. It was a huge success and much easier then you would think. Here is our process in three easy steps, so that you can follow along at home.

Step 1: Acquire two identical video cameras

Everyone at ZURB got an iPod Nano at the holiday party last year and two happened to be in the office on Friday, score! Attach the cameras to a fixed surface about 6-7 inches apart. I found a piece of metal and a couple rubber bands that did the trick.

You need to have the cameras pretty level with each other (think how your eyes work) but don't sweat getting them perfectly aligned, your going to fix that in step two.

Step 2: Record video from both cameras

In case this is not obvious; you're going to record from both cameras at the same time. However you don't need to start both camera at exactly the same time since we can easily sync them when we do the editing. Which brings us to the tricky part...

The end format we need is a single video file that has both sources side by side. A little Googling found a Windows app called StereoMovie Maker that will help you combine, sync and align the two videos. It's not the most intuitive software so here is the workflow we developed:

1. Transcode your video files to MPEG-1 or MPEG-2 (StereoMovie Maker only supports these formats).
2. Click File -> Open Left / Right /Movies...
3. Select your two video files.
4. Use the arrows at the bottom of the screen to sync the timing of the two videos.
5. Click Adjust -> Easy Adjustment to open the adjustment window.
6. Focus on something distinct in the background (like the power outlet in this example) and using the horizontal and vertical sliders align the red and blue images so they completely overlap
7. Click File -> Save Stereo Movie.
8. Make sure you select the Side-by-side option.
9. Select the Microsoft Video 1 compressor. YouTube has no problem reading this format and it is significantly smaller then using no compression.

If you did this all correctly then your saved video should look like this, both videos sources side by side in a single file:

Step 3: Upload to YouTube

Upload the video to YouTube and add the tag yt3d:enable=true. This tells YouTube to combine your two side by side videos into a single 3D video.

That's it; once YouTube has finished processing the video you can go to its YouTube page and test it out with your Red / Cyan glasses. If have Amber / Blue or Green / Magenta Glasses you can use those instead by toggling the 3D options next to the pop out button in the lower right hand corner of the player.

Note that embedded YouTube videos do not support 3D, you must go to the YouTube video page for this feature.

Here are the two videos we made on Friday with this setup:

ZURB Office 3D Video Nate Bolt 3D Video

Do you want to work for a company that does awesome things like building 3D cameras from scratch? Check out our talent page and show us what you got.

Your mom has always told you "It's the thought that counts," but unfortunately you can't buy thoughtfulness at Target. You can however buy a collection of inexpensive items, a 99-cent card, some decent gift wrap and become renown for your thoughtfulness.

We like to think that our processes here at ZURB can be applied to almost anything in life. Our project management philosophy is an especially good fit for gift giving. It consists of three simple steps:

1. Tell me
2. Show me
3. Tell me what you showed me

Tell me

This is where the 99-cent card comes in. We all understand that with gifts need to come cards, and within cards needs to be scribbled some generic message. Maybe "Wishing you the best," or perhaps you skip the message all together and go straight to "Love Peter, Paul and Ringo the Dog." The card is where the most opportunity is to properly setup your gift and deliver maximum thoughtfulness.

In your card describe why you choose the gift and allude to some hurdles (fictional or real) you had to overcome to acquire it. It's OK to give hints as to what the gift is, but try to refrain from stating it explicitly.

Dear Leia,

I know how much you love plants and I went to dozens of boutique garden stores before finding the absolutely perfect one for you. It reminds me of that lovely time we had at the french bistro last summer.

I sincerely hope you enjoy it, Han Solo

Show me

Picking the perfect gift is straight forward if you stay focused on the message you will write in the card. If you're out shopping at Walmart and have doubts about your mother enjoying the bucket of laundry soap you're holding, think through what the card would say.

Mom, I was frantically looking for a gift two hours before your birthday party and remembered how much you like doing the laundry for me and the rest of the family. I hope it does not give us all a rash like the last bucket of discount detergent we tried. Doug

Venturing out to your local mall without a plan is like being dropped into the middle of the jungle with a Nerf gun and a pair of safety scissors. MacGyver would make it out alive, but you won't. Use your card as your guide to keep you on task and on message.

Tell me what you showed me

After your gift has been opened make sure to follow up with the recipient. You are going to reiterate all the points you laid out in card to ensure the full extent of your thoughtfulness has been expressed. A typical conversation may go something like this:

Hey Meredith, did you like the Firefly box set that I bought you? I know how much you love Dollhouse and wanted to see some of Joss Whedon's other shows. It was a bit of a pain to find it during the holiday season but I knew you would really enjoy it.

Applied to Project Management

So how does this work for project management? Substitute the card for an email, the gift for the deliverable, and the follow up for a ... well that part is the same.

You may need to rinse and repeat a few times for larger projects but the core principle stays the same. For everything you deliver you need to be able to tell me, show me, and tell me what you showed me. Happy holidays.

Apple is notorious for creating great products with whimsically awesome interface design—ones that have certainly turned this old PC fanatic into an Apple fanboy. More than the finesse of the physical products or the sparkling chrome, it's refined and iterated design decisions that create great experiences for consumers.

As I was taking another mouthwatering look at the new unibody laptops, I was reminded of just how important those design decisions can be for how things work. The new unibody MacBook Pros come with fresh hotness all around, and the one design decision we all have been applauding at the ZURB office is the new laptop lids.

Push to Open is So Last Year

One of the biggest gripes we all have about the previous generation of MacBook Pros—the ones we use here—has been the lid latch. Here's a look at the culprit:

We all know it, but let's get this off all our chests—almost all laptop lid latches suck. There are those obnoxious sliders, tiny buttons, and clasping plastic contraptions that almost always break. Design decisions like these just make for bad experiences. You have to position your finger nail just right or you risk broken nails, pinched fingers, and frustrations abound. And when people are frustrated with their computers, bad things happen.

Aesthetics Don't Always Mean Great Interactions

The old MacBook Pro (MBP) lid latch was designed to compliment the general aesthetic of a great looking product. The short and wide design amplifies the perceived slimness of the machine, which is really cool, but not that functional. After continued use, the latch looses its "oomph," meaning you have to push harder, often with only a finger nail because your finger tip is too big.

When to comes down to it, the lid latch is just a bad experience for most users—even worse on some laptops, too! So where is the great interaction design? It's on the new unibody MBPs where Apple has rolled out an entirely new laptop latch.

Laptops Are Meant to be Opened

Apple has taken all the other great design decisions about the last generation of MBPs and made them that much better with this new unibody design. By far the one that stands out the most is the new lid latch.

And you know why it's so great? I'll tell you:

1. First, there's no tiny button that requires a finger nail to open.
2. Second, it maintains the magnetic clamp style from the last generation—and with just the right amount of magnetism.
3. Third, the design affordance (the interaction we expect from just looking at the latch) is much greater—just lift.
4. Fourth, it's just one motion. No push, then lift to open. Just open it.
5. And finally, it's still effortless to open. You can lift the lid with one finger and not worry about the rest of the laptop lifting with it.

Design is How It Works

While maintaining the ease of use of the previous generation of laptops, Apple has managed to increase the design affordance and the durability of a single element to make a better experience for their consumers.

Remember: design isn't just how stuff looks. Design is how it works. Consumers rely on great design decisions to make products worth buying and using. Acknowledging that in your work (hardware, software, online, etc) will almost always take it from good to great for everyone involved.

We use OmniGraffle to bust out fast, high quality wireframes here at ZURB. To help us crank those bad boys out, we rely on a few core features of OmniGraffle that allow us to stay focused on what really matters—the wireframing.

As is the case with all our deliverables, we do our best to maintain presentation and context with every deliverable (sketches, wireframes, mockups, etc) as they'll typically be emailed around without the original message. To keep as much context as possible, we put our logo, project name, document name, and task in the headers of our files like so:

Here's the Problem...

We're all human here. After a good jam session creating those wireframes, we sometimes forget to update that header information. We solved a big problem here by using shared layers in our documents, but needed to take it one extra step to help us out here.

In OmniGraffle, we typically have several canvases per document, meaning we have a lot of repeated information. To keep us sane and that information the same across canvases, we've used these sweet variables across shared layers. Here's how we wireframe faster by using OmniGraffle variables.

Inserting Variables

Inserting variables is easy. First, add some text to your wireframe. Next, while editing your text, open the Edit menu and select Insert Variable. You'll see a list of variables that come built into OmniGraffle including canvas name, layer name, dates, and more. Choose Canvas Name and you'll see your text field updated with the new variable.

Now, to make this work, you'll have to name your canvas as we have with our own wireframes. Be sure to keep the canvas names accurate while working to ensure your headers are always presentable and correctly identifiable. By having those descriptive canvas names, you also force yourself to consider the presentation more and keep your documents laid out well.

Ta-da!

And that's it! Coupled with shared layers, you can quickly and easily create a worry-free working template for all your wireframes. It'll save you time, keep you focused on the wireframing at hand, and does away with the worry of outdated document names.