Interaction Design Posts

That One's Yours, This One's Mine! by Jonathan

In the course of working on a new mobile site for one of ZURB's clients an interesting point arose. On the original non-mobile site, areas on the site specific to the user were referred to as 'your stuff' or 'your albums' whereas on the mobile site we unconsciously changed them to 'my stuff' and 'my albums.' This brought up an odd notion: who exactly is speaking in these cases?

In cases like "your stuff" the site is speaking to you. "Here is your stuff. Here are things you can do." A lot of sites use this style including some notables like Amazon, Apple and 37Signals' tools. They refer to "your cart" or "your account", "your page" – suggesting that the site is the one speaking to you, saying what they have available for you.

In contrast a few sites go the other direction – Lighthouse, LinkedIn (partially) and Google Analytics. I was surprised to find so few examples of this style as my gut feeling was that it would be more common, not less.

There are quite a few sites that don't settle on one but switch between both. Google, as is generally the case, lacks consistency here – Gmail alone manages to refer to "my chat history" on the same page as "your AIM account." LinkedIn seems to try and stick with "my" but quixotically mentions "people you may know."

So which is it?

Should we as designers be speaking to the user, or should the user be speaking to us?

In many cases the language a site uses is unconsciously selected by the designer. If as a designer I'm creating a site based on my imagined use of it, I'm more likely to say things like "my pictures" or "my account." I picture myself using it and thus expect it to be an extension of me, of my content, rather than a tool that speaks to me as a user. If on the other hand I work on the language from a more detached perspective, not envisioning myself using it, I'm more likely to think of the users as a separate entity, one to which I don't belong. Hence the use of "your account" or "your stuff."

So is there a place for both styles? Probably. There are times when a site should feel like an extension of self and times when a site should be speaking to the user. What do you think? Let us know in the comments.

Making It Real: An Exercise in Interaction Design by Mark

I've often wondered what it would be like to have a computer-like interface for the real world. Imagine redesigning a rundown parking lot or a local park with your mouse, keyboard, and favorite design app. How would it work? What would it look like?

While we often take for granted the interaction and control computers provide, it would certainly be an awesome feat to use Photoshop to edit your real world surroundings. Sounds cool, right?

Well, it looks like a few others have thought about the same thing. Wanda Kamarga & Co. have taken our favorite image editor, Adobe Photoshop, and turned it into their own real world rendition. Pretty sweet if you ask me. Don't forget to check out the whole set, tactfully dubbed Art Snob Solutions.

Taking something from the digital—the interactive—world and turning it into something tangible and real is truly an exercise in interface design. How do you transfer the control of a computer to real world tools and actions? The team that created this real world Photoshop chose cardboard, paint, and standard graphic design tools. My only question is how do I zoom in?

The ability to create interactive experiences across any medium is a challenge all designers have attempted to master for years. Real world, digital, mental, mobile, print, Web browser, desktop, touch—all mediums that make for different interactive experiences, but all roads we can use to similar tasks.

Maybe a real world Photoshop—and others—is closer than we think. How would you turn your favorite application into a real world interface?

Social Tools As Publishing Platforms by Bryan

We recently launched 5MinuteConsult.com for Lippincott Williams & Wilkins, a business unit of Wolters Kluwer Health (say that five times quickly). The 5-Minute Clinical Consult is in it's 17th edition and is the medical professionals leading choice for trusted clinical content. It's a honor to work with a company that has a rich history- Lippincott is one of the oldest publishers in the United States and was founded in Philadelphia in 1792.

Social tools like Twitter and Delicious are typically associated with blogs and personal sites, but we decided in our project planning that they would be great for a number of business reasons:

  1. We we're able to quickly integrate a few publishing tools without having to rely on their engineering team- this reduced the costs and overhead of bringing in another person.
  2. The microsite can stay fresh with new content without much effort (5-10 minutes a day). It's a marketing site to drive clicks and centralize links in one location, so heavy content building is not necessary.
  3. Using social tools instead of a custom CMS has the added benefit of creating inbound links on social websites (an SEO win). It also makes it easy to integrate these feeds across their other health related publishing properties.

Social tools are a simple way for businesses to get up and running quickly.

Designing Better Email Messages by Mark

Email. It's the Internet. Without it, we would probably be stuck sending each other printed memos through the office mailroom. Despite its saturation in our lives, businesses still stumble over creating a successful email message.

A well designed email is one that satisfies several needs, keeps things brief, and encourages the right action after reading. To demonstrate the difference between a well and a poorly designed email, let's look at two emails from Twitter.

Exhibit A: The Password Reset Email

Before putting on my Negative Nancy hat, let's get one thing straight: Twitter can do emails right. Just look at the password reset email I received last week:

For starters, they use casual language that appeals to their audience—nerds like me. Secondly, there is a clear hierarchy of information—I know exactly what happened and what to do next. Finally, and most importantly, they put the most emphasis on the reset link, the one thing I need to click on to get my password reset. Well done.

When I look at an email, I need to be able to quickly figure out what I'm supposed to do next. That sentiment goes for every other email a product or service sends you. All emails need structure, personality, and emphasis on taking the proper action. Lets look at how an email can turnout when we don't keep that in mind.

Exhibit B: The Follower Request Email

Take a look at the email below. At first glance, it seems pretty good. The conclusion is first, they greet me by name, and they even explain why they're emailing me. Well played. It looks like all I have to do is click on the most obvious link—the one surrounded by whitespace that my eye fixates upon first. Wrong!

Look again. You'll see that the most obvious action is actually a link to the Twitter Help, not my friend requests. Since people don't typically read their entire email—much like the Web, people like to skim—and email itself is an interactive experience, the design of that experience has to help people succeed in using it. The whitespace surrounding the help link draws your eyes right to it, skipping over the link you really wanted in the paragraph right above it.

Your emails need to encourage and improve the actions of your recipients. To do so, you have to set people up for the win at all times. This means crafting an email message that encourages an outcome both you and your recipient are happy with. Lets look at how to create a more successful email.

Ingredients for a More Successful Email

Lets operate under the assumption you've already mastered proofreading, spelling, and grammar, shall we? What else is there? Well, here's our top five tips to consider:

  1. Write a meaningful subject line. Get people to read it and be sure to consider when someone comes back to re-read.
  2. Put the conclusion first. What's the goal here? Why am I reading this?
  3. Short and sweet. Short sentences, short paragraphs. You might even consider a limit on the number of sentences.
  4. Lists, whitespace, and strategic bolding. Help readers digest information quickly with lists, whitespace, and some good ol' bolding.
  5. Clear calls to action. Okay, the email has been read. Now what? Make that key call to action standout.

Email messages are an interactive tool that have to be designed to perform well. As consultants and purveyors of fine design, it's one of our primary duties to effectively use email as a communication tool. We use email day in and day out and have merged these tips into our own workflow. It's paid off.

With a little extra effort, we get better responses from clients and the task of actually writing emails has become easier. Take the time to not just write your email, but design it.


Want some more information on creating a better email? Checkout email at ZURBword.com for more.

BritneySpears.com Gets Covered on ET by Bryan

It's not often that your work gets covered on network television, so we were ecstatic when britneyspears.com popped on Entertainment Tonight. It's fun to be able to show family members something everyone gets (never mind that our work probably touches three times as many people every day on the internet!).

About the ZURBlog

The ZURBlog is where we discuss design interaction and strategy. We use design thinking to challenge businesses and designers to improve the products and services they create.

What's the ZURBword?

What's the ZURBword?

ZURBword.com is our thoughts on interaction design and strategy. What?

Photos on Flickr

  • 4972328732_899fe38771_s
  • 4925136982_f118e72b92_s
  • 4821798712_a59412e236_s
  • 4821797872_d7f1536a2a_s
  • 4774579941_9e8716910a_s
  • 4763601643_f0ce03a887_s
  • 4764235066_49f1ba7055_s
  • 4763591117_d8d093c510_s
  • 4764222474_373922c9fb_s

Videos on YouTube

Bookmarks on Delicious


Wanna talk? Call us at (408) 341-0600.

Hmm, not a big talker. Email us to .

Still here? Great, we're hiring.

We need people with chops to join our quest
for world domination. Want a job, nerd?

What's the ZURBword?

ZURBword.com is our thoughts on interaction design and strategy. What?

Subscribe to ZURBnews

Get our monthly newsletter, ZURBnews.
Check out the latest news and buzz »