Since its inception, Facebook has strived to use technology to improve the human experience. What began as a way for single college students to mingle has become a global network with almost 1 billion users. To build a product this successful, it’s necessary to have a deep understanding of what it is to be human, building tools that both work with existing group behavior and meet universal human needs. Facebook has taken an empathic approach to community design and has created new ways for people to connect, share about themselves, and even document their life stories. With so many user-centered features, the new Facebook has the potential to become an indispensable part of your social life.

Like always, Facebook offers tools for both taking in information from your friends, as well as sharing information back to them. But now this can be done in three different ways, each differentiated by the scale and scope of the interaction. One way to describe the three behaviors is to glance, read, or savor.

Nearly all of us are initially resistant to new things and the unfamiliar. For this reason you might find yourself missing the old Facebook or feeling a little clumsy moving around the new interface. But beneath the buttons and icons and settings is a core platform that has been designed to work for you. It’s supposed to help you find out about all the new trends in your friend’s lives; it’s supposed to make it easier to stay in touch with the many groups of people you know; it’s supposed to help you remember all the great moments you’ve had in the past; and it’s supposed to help you see your friend’s in a new light through a glimpse of their entire life story. It’s possible that Facebook will fail to delivery all of these promises, but it’s incredibly refreshing to think that they’ve even tried.

At Barbarian Group, content strategy lives within the user experience department. (Our unofficial internal mantra: “We do the unsexy shit so you can be sexy.”) It’s a happy relationship. There’s tons of overlap within the two fields, especially as we consider what’s best for users. Because we take a ‘content first’ approach, content strategists and interaction designers here often work alongside each other to determine the right user scenarios and information architecture for a website.

But I wanted to learn more. I came into content strategy as a former journalist, a person with strong editorial planning skills but little knowledge of web design and development, let alone how a creative agency worked. While it was easy to think about editorial calendars, workflows, and voice/tone guidelines, the more technical skills were a bit harder to wrap my head around. The practice of interaction design was something that interested in me, in particular, because I realized that content strategy work at the start of the project didn’t mean my job was over. Even after the audits and analyses, it’s important for content strategists to stick around through the lifecycle of a project, making sure that the careful consideration of content upfront is reflected in design and development.

(As an aside: this beautiful diagram from Richard Ingram also led me to understand that despite where I came from – editorial – the technical and strategic approaches to content strategy would be important skills to acquire.)

While the role of a content strategist may be multidisciplinary, cross-training can benefit anyone in our field. When we work on teams, everyone brings their strengths to the table. But having an understanding of what we all do is also important. It helps us to give each other useful feedback. Most importantly, however, it helps us make sure that we are all talking about the same thing.

Ambiguity can derail a project. It can create situations where the clients and the project team have vastly different expectations. When I talk about style guides, I may refer to editorial guidelines, but when a designer uses the same term, the meaning is totally different. Take the oft-thrown around term ‘content type.’ Am I referring to the format of the content (PDF, document, JPEG), the source of the content (user-generated, in-house, freelance), or am I talking about its style (informational, humor, Q&A)?

For me, I wondered if my user personas would look the same as an interaction designer’s personas, or if there were key differences in how we’d approach it. I wanted to be able to intelligently comment on wireframes and prototypes, and I also wanted to make sure real content could be used in early designs as the UX team worked collaboratively. Luckily, Barbarian Group really encourages its employees to expand their knowledge (shout-outs to James DiStefano and Frank Marquardt!).

Recently, I attended a wireframing class at General Assembly to further my skills in interaction design. It was taught by a former YouTube UI designer, who showed us some of his early sketches and user tests for features of the site, including the creation of the playlist feature. In addition to some hands-on Omnigraffle work, I was able to learn a few IxD techniques that I think will help me with specific content strategy planning work. He showed us some ways he thought about key user tasks which map nicely to how I think about matching business objectives to user needs when I come up with strategy.

So, yes, cross-training is good. Learning how to wear multiple hats can only help the project team communicate and collaborate better.

The Barbarian Group’s user experience department is back to share some of its latest work with you. Next up: Tweetcracker, a project we worked on with Samsung and Intel to promote the Series 9 laptop.

We spoke with interaction design director Chad Vavra and quality assurance technician Rina Razumov about their work on the project.

Read on to learn more about user flows, Twitter’s crazy API, and that one guy who hacked into the site.

I recently spent the weekend with some friends whose teenage daughter has lost all but a shred of her vision. It is very likely that eventually she will be totally blind. I was amazed to see how well she adapts to a sighted world but still couldn’t help but reflect on the designs I create and wonder whether she can experience them fully.

Around the time of the last internet boom, bubble and burst the discussions I remember weren’t about web standards, but web accessibility. Flash was extremely popular but because it was a plugin that didn’t expose it’s code structure to the browser, screen readers for the blind couldn’t make any sense of it. As far as they were concerned a Flash object was no different than a single static image.

Today I am shocked to find that many of the younger designers I talk to aren’t aware that the ‘alt’ tag assigned to images in HTML was created so that screen readers could describe the image to vision impaired users. It seems to be thought of as another place to add marketing. A branded opportunity for when the mouse hovers an image.

Now in the wake of CSS3, HTML5, and closer browser alignment to standards the notion of ‘responsive web design’ seems to be the discussion of choice. I’ve even blogged about it. Responsive design is a great thing as it brings accessibility issues to the forefront. Specifically the accessibility of smaller screens, but combined with the latest coding practices the environment for visually or auditory impaired users is now at it’s greatest.

As interaction designers, coders, and creatives we need to be aware of everyone who may want to use our designs. We need to consider smaller screens, the elderly who rely on hearing devices, and a blind teenager who one day wants to be a writer and ask ourselves, is this design good enough for them? Am I being a dick?

Don’t be a dick.

Sometimes the projects we are asked to design seem so overwhelming that there is no logical place to start. In some cases they probably are so big that there isn’t any logic involved. Chalk it up to why they hired someone else to do it.

When you have to start but don’t know how, pick two things.

To steal a metaphor from E. L. Doctorow “[Interaction design] is like driving a car at night. You can only see as far as the headlights, but you can still get to your destination.”

When a design seems too big, establish a relationship between two things, let’s say a page and a button, and design their interaction. Once that is done create a new relationship with something else and design the next interaction. Don’t worry about the rest of everything that has to exist and how it’s all going to work together. Just start with two things and grow from there.

You will be surprised how well the overwhelming thing comes together. This method benefits from our brain’s natural ability to spatially model the world. It’s really hard to completely waste your time doing this.

*Interesting note. Pixar has been known to write stories this way. Start with two characters’ relationship, add another character and tell that story, add another, and so on and so forth.

This concludes the first 3 interaction design principles that I have come to use in my career.
#1. Patterns and Prediction
#2. Trick People
#3. Pick Two Things

To be continued…

Technology isn’t perfect. A lot of times it’s slow, annoyingly slow and equally annoying are impatient users. They quickly become distracted and press the back button or switch to some other task. Sometimes there are technical ways to make things faster, like reducing images on a page or reducing the number of items returned by a search. Other times it’s not enough to just reduce and that is when the principle of tricking people comes into play.

Remember that people are easily distracted and use it to your favor. Remember that first principle: Patterns and Prediction. To apply that here, predict when users expect instant results and manage them with distractions. If you know that something is going to take more than half a second to react, design a trick. This can be as simple as a unique click-state on a button, like a drop-down closing in stages or as complex as a mini-game to play while content loads in the background.

WE’RE SO EXCITED TO LAUNCH THIS SITE, WE CAN’T STOP WRITING IN CAPS!!

Wouldn’t it be cool if you could crack a combination, use lasers to blast open a safe containing a Samsung Series 9 notebook, and carry off $10,000 in solid gold? Well, we did what we always do here at The Barbarian Group when a truly off-the-wall, impossible sounding idea pops up: we made it real, with the help of our clients, Samsung and Intel.

A slew of models and a boatload of champagne are at the office today to welcome the one and only Tweetcracker. Using Twitter to tweet your guess, you get three attempts per day to crack the code that makes the lasers strike the C4 and blast open the safe located in our secret underground lair. (Scouting proved arduous. Apparently bad guys have the monopoly on these places.)

One lucky person is going to walk away with a brand new Samsung Series 9 notebook boosted with Intel technology and $10,000 in gold. As if that weren’t cool enough, over the six weeks that this contest will be live, should someone win the contents of the safe, we’re going to refill it with another laptop and two, around the world plane tickets. Caviar not included; the lawyers had a fit with the tariff laws.

We’ve done our calculations, and the odds of guessing the right number are close to 9 billion to one. To add a little more social media spice to this, we’ll be giving out clues to help crack the code to the followers of the Boosted branded Facebook and Twitter pages. On top of this, users can download a CSV file of every single recorded guess to help them further narrow down their potential guesses.

Tweetcracker is the latest iteration of the Boosted campaign inspired by the Samsung Series 9 with the 2nd Gen Intel Core i5 processor whose powerful specs would make any spy covetous. Just as Intel processors boosts Samsung products to a higher level of performance, our campaign exists to boost a person’s day. Think of it as a branded media channel of truly unexpected things that make you smile.

To say that we had fun building this site is an understatement. Visual inspiration for the experience came from exotic places such as the devious devices of evil-doers from Bond movies, KITT’s dashboard from Knight Rider, the He-Man logo, and a healthy dose of classic 80’s video games.

It’s not often we get to tell people to go out and use Twitter to defeat lasers and crack a code that could win them a new notebook and more than $10,000 in prizes. In fact, who else has ever been able to say that? We are proud to be the first, and are obviously excited to reveal to the world our newest Boosted creation. Visit Tweetcracker now, and see if you can crack the code!

The Barbarian Group’s user experience team is going behind-the-scenes to show and discuss some of our kickass work. We’ll chat about our latest projects and explain how we tackled them. Recently, we chatted about Tweet Wrap for Samsung and the Kashi.com homepage. Now, we’re looking at the work that went in to sprucing up the wildly successful GE Show.

We sat down with interaction designer Jodi Leo to talk the project. Jodi came in after the show’s fourth episode to evaluate the site’s usability and make a few recommendations for improvement. Here’s an example of the ‘All Episodes’ page after Jodi made some usability improvements:

(And here’s what it was like before.) Pretty lovely, right? Read on to learn more!