There was lots of excitement about enhancing web design though CSS3, HTML 5, and Web Fonts at the An Event Apart conference in Boston last week. I’m just as pumped to use CSS3 drop shadows and gradients as the next designer. However the presentation “Learning to Love Humans” by Aarron Walter really got me thinking about where this focus on technology is all going.

Walter used Abraham Maslow’s popular 1943 paper A Theory of Human Motivation, to parallel the four levels of human computer interaction. At the bottom of this pyramid we have a product that functions. Meaning it accurately behaves in the manner in which it was designed. One step up we have a reliable system that functions consistently and predictably.

Once these two basic requirements have been met, we have a usable product. Useable is the culinary equivalent of edible, and users now have developed acquired tastes. This is where most websites drop off. It is when we add a pleasurable experience on top of the usable layer that a user can ultimately develop a ”love” of a product.

You mean to say just adding gradients and drop shadows does not create “pleasurable” experience? Unfortunately the novelty has worn off, and we, as digital marketers, can no longer suffice to design user interfaces that are simply functional; rather, our designs must simultaneously facilitate a compelling emotional connection.

Walters brought up some great examples of humanizing the web experience. MailChimp uses their chimp spokesperson to shell out complements and random non-utility conversation with the user. A favorite of mine is “I kissed a chimp and liked it.” There is a whole Flickr following dedicated to these hilarious messages.

The easy+fast+fun form builder tool Wufoo uses bright colors to remind its users that form-building can be fun. Kevin Hale, of Wufoo, put it perfectly. “The inspiration for our color palette did come from our competitors. It was really depressing to see so much software designed to remind people they’re making databases in a windowless office, and so we immediately knew we wanted to go in the opposite direction.”

Humans crave emotional interaction. Over the 160,000 of years of our evolution we have survived by working together. Today we spend more time alone interacting with our LCD screens than we do with our own flesh and blood. Our computers, iphones, tablets, ect. have taken the place of face-to-face human interaction we have cultivated since we were banging sticks together.

More than ever we must design digital interfaces that have a personality that is receptive to the user. Have your website make friends with the user, complement them, and be the HAL 9000 we always wanted.

The topic of emotional design is quite timely as we are currently in the final stages of launching a redesign for large pharma company. In this redesign we licensed a popular cartoon character to help deliver a fairly serious topic and tuned the messaging to speak in an empathetic tone.

Users don’t want to have a conversation with a binary being, however we can do our best with the technology available to create the illusionthat our product wants to be your friend. So go out there and design a website that has personality, voice, and loves your users back.

 

Two designers from Google (@leggett and @darrend) made a fascinating presentation this morning at SXSWi around prototyping web apps (#prototypingwebapps).  Starting with the premise that your end goal is to “ship experiences people love” they laid out some guidelines and recommendations for quick, effective prototyping of web apps that:

• Help make your ideas awesome
• Get other people excited about your ideas

The opinion was shared that wireframes don’t really let you see what things look like, a mock up is better, but a prototype is ideal as it lets you see how interaction will work – this elevates the level of discourse and engagement from those who are providing feedback. Prototypes also help you see more flaws in the design.

PROTOTYPE TYPE 1 – Slideshow
A great place to start is with a straight-up slide show whereby clicking on any area on the screen brings you to the next screen.  How much code does it take to show an interaction? None!  Dump in a folder of comps and out comes a slide show.  One step further is to put it in a browser to make it reflect what your app will look like that much more.

PROTOTYPE 1A – Slideshow with Video
The straight-up slideshow  is hard to pass around so, a second approach is to make a video: A simple little 3 minute screencast of someone using the slideshow prototype with narration,  etc.  These get passed around really easily… hopefully, it leads to getting your app greenlit.   (Remember, of course, that it’s all got to be predicated on good feature design.) Adding a story, joke or some kind of surprise can make the thing that much more compelling. 

PROTOTYPE TYPE 2 – Hotspot
If you want others to actually be able to use it, construct a HotSpot Prototype.  This type of prototype lets you represent actual action and an advantage of this over a slideshow is that you can branch.

There are a couple of cheap ways to do it… Fireworks will let you export slices/click targets or you can throw it into Powerpoint, but these don’t really feel real.  (At Google, they have a script for doing some of this stuff in a prototype.)   You can add more than just click targets (like text or input fields) to ramp it up,  but at some point you eventually hit the end and it gets arduous to iterate, so be judicious with the paths/opportunities you enable.   A good rule of thumb is to think of the effect you need, think of the change of state you need and think of “how do i make it look like the effect that I need?”  The presenters like to “be as scrappy as we can be so we move on and iterate on our design.”

PROTOTYPE TYPE 3: HTML PROTOTYPE
When heading down this path, continue to keep it simple. Replace whole chunks of your app with an image whenever you can.   Determine “what do I really, really, really need to work?” Just code the pieces that you need to work.    If you’re testing a tool bar, code that, but you don’t need to make all of the menu options go anywhere.  A related trick suggested was to add things like a 2 second pause so it seems like there’s a server behind you.   This helps the ‘mental model’ for testers.  

SUMMARY NOTES
• Make a Linear Experience:  Show one awesome use case.  Just concentrate on the good stuff.
• Go high fidelity, every step of the way
• “Be Scrappy.  Iterate a lot”: Throw it into a slideshow and click, click, click.  Let you see how it feels before you send it out. 
• Make a commercial, not a spec when you’re trying to sell your ideas.
• Learn to code and be creative (you’re your own special effects dept).  Also, the best way to lose an engineer’s trust if you propose things that don’t work.  Learn/know what’s feasible in the browser.
• Let your prototype coupled with discussion be  your spec.

By following these rules, “you can do everything quickly and make everyone jealous about how fast you can make quick stuff.”  A couple of good, random final points that came up during the question and answer part of the talk:

• Avoid churn/client review cycles by showing small chunks (start with 10%)
• The speakers recommended guerilla usability testing a la the book Don’t Make Me Think, basically advocating getting anyone other than the designer to use it.  – But real testing in a lab is valuable too.
• The speakers don’t believe in rigid line between Interactive/Interaction design (aka Information Architecture), Visual Design and Usability.  All three off these things must be connected and interconnected with one another.
• The only real “wireframes” you need/want to do are sketches .  Knock these out really fast on paper.  There’s no value in high fidelity wireframes.
• Google designers use Jquery and/or write really sloppy, messy code that gets the job the done.
• Show things that have real meaning in your prototypes/comps. Don’t use Lorum Ispum in place of real text and don’t put in things like “description goes here.”  Think out the language at this stage of the game.

The speakers promised to put some resources up at SLIDEFOLDER.COM within a couple of days.  I’ll do my best to update this post at that time.

 

It looks so easy: you pull out a camera, live your life, and stick it up on YouTube for everyone to see. But if only it was that easy. In actuality, creating good online video that will reach an audience and interest people is much more complicated than simply uploading it. As a video creator you need to know how to best capture your subject, the best route of channel, and how to get the absolute most out of your energy. Here are five simple but effective rules to remember as you start on your journey to video bliss.

1. Your equipment is important. Lots of books will tell you that it doesn’t matter what kind of camera you use, or how clean your edit is- and they're lying to you. Of course you can grab the video setting on your digicam and try the whole thing in just one take. Maybe if you’re Gary Vee you can actually get a great piece of footage from that, too. But, if you’re a company trying to produce quality content the first time around, and clocks and wallets are ticking, you should probably put in a little more work. Flip Cam’s are absolutely fantastic for raw, on the go footage. For everything and anything else, reach out to a trusted production co.  Not only will your video look less grainy but the sound quality will be out of this world compared to anything you would have achieved on a pocket cam.

2. There’s more than just YouTube… but use YouTube. Blip.tv, UStream, Vimeo… there are plenty of websites to choose from when it’s time to upload your videos to the Internet; and they all have benefits. Some can be viewed in countries where others cannot. Some have better picture quality. However, in Social Media, when the aim of the game is to go where the people go, you cannot (at least right now) beat YouTube. And remember, with YouTube’s embed codes, you can feel free to plaster that video in lots of other spaces-  try a myriad of websites, bloggers, communities, emails- and still get all your analytics in one place.

3. Remember your  ABC’s of tags and titles. Be as simple yet descriptive as possible when you fill in that “title” field during the YouTube upload. A video about Washington DC travel in March, for example, could be titled “March DC Trip” but how much better would a title like “Washington DC Cherry Blossom Festival Getaway” be? Plenty helpful, since many people would be searching for “Cherry blossom” or “festival” and not specifically the month. This also applies for the tags you include during your upload. And don’t forget to include tags that hit on your research and are selected based on volume and competition.

4. Call on all of your promotional super powers. Video does not work alone. The biggest mistake some creators make is to spend time and money working on this fantastic movie, uploading it, and then sitting back and watching. What a waste of the resources at your fingertips! Chances are you’ve got a Facebook fan page and a Twitter account. You might even have a community or website, or even an email list. Go ahead and stick a call-to-action all over these properties. Link to the video in your emails and on Twitter. Embed the video in your website and Facebook page or community. Just because your video “lives” on one website doesn’t mean it can’t travel to others, and sometimes reaching out to the people is more cost effective than waiting for them to reach you. During editing of your video, you can also put in some URL’s you want people to go back and visit, giving the link backs a circle effect.

5. If at first you don’t success… then dig into your wallet.  If view numbers right off the bat are important to you, or you have zero time or resources to put into growing a following, remember that videos can pay to become a “YouTube Promoted Video.” Promoted Videos appear higher on search results, show up in the sidebar of YouTube homepages and channel pages, and appear higher on Google Search. This pay-per-click system encourages you to pay whenever you receive a new view, making it imperative that you also exhaust every other resource you can as well. Paid partnerships are also available. Finally, by keeping an eye on the YouTube blog, you can submit applicable videos for the Spotlight of the Month, cherry picked videos that include a theme YouTube is promoting for the month.  Of course, price should be analyzed on whether or not this is an effective means, based on results of other methods.

 

 

Using text messages to make donations isn’t a new concept, but few could have predicted the way this simple, innovative use of technology would explode in response to the earthquake in Haiti.

An historic $27 million had already been raised for disaster relief via text as of Monday (1/18), six days after the earthquake. Compare that to less than $500,000 total in the wake of Hurricane Katrina in 2005, or $190,000 raised by the American Red Cross Text 2HELP campaign from September to December, 2008.

The contrast with Katrina is even more startling when considering that total Katrina donations were more than double total Haiti donations over the first six days for each. Texting has accounted for more than 10% of Haiti donations. The American Red Cross has been the biggest recipient; of $112 million total raised through Monday, a staggering 15-20% came via text, with two-thirds donated online.

The effectiveness of the text campaign when combined with major media outreach was proven on a stunning level last weekend during the NFL playoffs. Frequent PSAs aired throughout all four games. The result: text donations poured in at a rate of $500,000 an hour during that time.

While the sheer amount of money raised may be a surprise, text donations reaching its tipping point is not. Consider the factors:

• A disaster of tremendous proportions commanding the world’s attention
• The ever-increasing use of texts not only for communication, but for companies to offer services
• Ease of use: Anytime, anywhere, text a short code to add the donation to your bill, no sign-in, forms or credit cards required
• Social media like Twitter and Facebook spreading the word to the same demographic most likely to adopt this technology in the first place

As with any new technology, expanding so quickly has not been without growing pains. News broke that donations could experience delays of 60-90 days in reaching its destination, as mobile carriers waited for donors to pay their bills. Almost immediately, providers announced they would fast-track the money, pledging to advance 80-100% right away.

As Haiti earthquake relief brings text donations to the mainstream, it will be exciting to see how organizations and grassroots campaigns harness this new power in the very immediate future. Also fascinating to track: How this may empower the demographic most likely to use it – the young generation who knows texting as a way of life, but may never have participated in a campaign like this before.

There’s a large, new generation ready to step up, and a whole new way for them to do so in the most simple, effective way possible.

 

 

It seems like every few months Facebook rolls out a new design, or changes on existing designs. For users, these changes are often frustrating, but for developers and designers, it can be downright crippling to turn the blind corner. There's no miracle tutorial, but there are a few very simple thing you can do to ensure that your next project doesn't go up in flame (or completely disappear) when Facebook incorporates its next round of updates.

1. Keep Up With the Timeline. No Facebook project ever keeps an exact date of completion, but the Facebook Developer's Wiki has some pretty good estimates that you can follow along with. Bookmark the site and check back regularly for updates. Even if a change goes live prior to expected date, you'll already know what was in store and know how to deal with it. Also, add Mashable, Facebook Insider, and All Facebook to your daily blog reader for other news and tips. 

2. Design With Changes in Mind. You can't always predict what the next big update will be, but remember that as far as Facebook goes, nothing is set in stone. Many companies spent thousands of dollars on promotions that use capabilities that are either no longer available, or not allowed any longer; that's wasted money and time. Of course you want to put your all into everything you develop, but keep the Developer's Wiki in mind. Maybe you want to roll out a game that has unique Application Dashboard settings now, so when that change comes, you're ready. Maybe it's time to begin designing in 520px and preparing your Boxes tab for removal. Any decision that prepares you will be well worth it.

3. Bounce Ideas Off the Like-Minded. If you aren't surrounded with Facebook-on-the-brain friends, try the F8 Conference. This Facebook conference, scheduled for April 21-22 in San Francisco, is a great way to catch up with other Facebook Developers. There's no shame in not being versed in every single detail of upcoming updates, particularly for a platform that changes so sudden and rapidly, which is why keeping a roster of friends around is handy. Who can tell what tiny detail you've missed that a friend can remind you of -- and vice-versa.

4. Expect Change. Certainly you expect change; you work on social platforms, after all. But your client doesn't. Gently remind anyone you create Facebook promotions for that this is a fast-moving system. Today’s great idea might be tomorrow’s ancient history. Online is not traditional marketing and everyone needs a little patience, and to go in and out with the tide. With this in mind, you’ll never have all your eggs in one basket with the chance of total failure should your well-developed pixels or sidebars change around. Plus, once this process is understood -- and once you've built-up trust -- you'll be working with a client who is open to so much more of what's offered out there, and you'll have more fun. 

 

Google announced last week that it is ready to begin its DoubleClick AdExchange.  AdAge reports:

The AdExchange works similarly [to how the search market matches ad buyers and ad impressions in real time], but for display advertising. It also includes integration with Google's search ad-sales system, with the idea that it will let search advertisers move money more easily to display and vice versa. In addition, all of Google's network inventory will be available as part of the exchange . . .

The exchange draws criticism from advertising leaders for failing to offer quality inventory based in genuine relevance because of a focus on moving ads as part of exchanges with other exchange centers that are already part of the display-advertising marketplace, but where Google's offer differs in the combination of its transparency and scalability. 

This combination of offers has always been the advantage of Google's advertising programs--any advertiser who has tested click-based against impression-based programs knows that quality scores and targets require a fine balance and that tinkering with that balance within each program is vital to return on investment. 

 

 

The criticism, then, that the DoubleClick exchange's weakness is its inability guarantee quality is no different than any criticism that one could make against any Google advertising program.  Advertisements ranked by quality scores--indeed, advertisements in any channel--have only ever been as good as the creative and marketing teams behind them.  Consumers do not respond to poor-quality ads in any channel.  The fact that Google traditionally rewards advertisements that will generate responses because they are constructed well--and that it continues to do so in new mediums--doesn't change that much from the perspective of a consumer market that benefits from additional creative display and more focused and scalable targeting.  

In that context, the criticism of "But will it be any good?" seems a bit like it's based in the straw-man and red-herring fallacies, whereby those that have an interest in maintaining premium, static pricing on digital-advertising real estate find it a protective necessity to play only with the major players within a narrow range of price points.  

This is where we find the true genius in the new exchange.  Before advertisers even begin to consider the elements of paid-search marketing, the core offers on their websites must be relevant, high-quality offers, and organic search concepts, arguably the foundation of search marketing, allow even the minor players to optimize and sustain competitiveness through the idea of the long tail, a frequency-distribution concept that means businesses sell less quantity of more unique unit types.  When sites communicate relevance for a specific product, that product gains visibility in search-engine results because it is focused to a specific target's need or needs.  

Google's DoubleClick AdExchange allows a similar focused targeting and scalability, only, now, advertisers can marry these benefits with high-impact creative, which has previously been limited to a mostly static, contract marketplace.  What this means for advertisers is that the best of all worlds are now coming together, so that the real opportunity of the DoubleClick AdExchange network is exactly that for which some are criticizing it--everyone now has the ability to compete based on merit, as measured by consumer response, across all playing fields, regardless of scale.     

 

Aside from a few exceptions, the currency of the web (or at least, social media) is social capital. You know, the number of friends you have on Facebook, your 2 million views on YouTube, your “SuperUser” badge on Foursquare, your hundreds (or thousands) of followers on Twitter and Tumblr. None of those things have any direct monetary value, although some people are trying to cash in on them through things like the Twittad network, or a good old fashioned TV deal-a-Tequila. As things currently stand, money can’t buy you love or Elite status on Yelp; the only way to get that is by earning it through creation of “compelling content” and/or being an “influencer”.  But something is in the works that’s going to change that, and potentially the way we view social currency in the online world.  

Picture this: you’re playing an online game. You run around and interact with other players of the game, and get points for everything you do. You can buy things with these points, and give these points to other people. You can spend real money to get these points, or you can just earn them (although to get the really good stuff, it’s going to take a while). Sounds familiar, right? It’s Second Life, or World of Warcraft, right? Wrong. It’s Facebook. Or it will be, in about 6-12 months.

Last week, a sales rep from Facebook came to Flightpath to have a discussion with us concerning the most recent changes to the site. During the course of the meeting, he revealed that Facebook will soon be allowing users to earn Facebook Credits by simply engaging with their friends, whether it’s by “liking” a status, adding a friend, or posting a video. People will also be able to gift Facebook Credits to others, along with using credits to purchase gifts. In short, Facebook is going to have a currency. Holy Terms Of Service.

According to the calculations of Lightspeed Venture Partners, Facebook made $35 million on Facebook Gifts in 2008 alone. That’s right. Those tiny little icons for $1 (or 100 credits) netted Facebook tens of millions of dollars last year (which is paltry compared to Zynga's $50 million). Ok, you’re saying to yourself, so what? I don’t care about little icons on my profile. Facebook isn’t going to make any money off of me. Well, you’re right—for now. You’re also probably over 25. And while you may not care about a teddy bear icon or some other form of digital embellishment, there are at least 27 million other people who do. They’re kids under 12, and they’re the people Facebook is ultimately planning for.

Maybe not all of you have kids. But those of you who do, or who have ever been around a kid who’s 12 or under, know about Webkinz and Club Penguin. For the uninitiated, Webkinz and Club Penguin are sites that are essentially Facebook for the under 12 set, only instead of a picture of yourself and your dog, the kids are COPPA-compliantly represented by animated animals. A social network combined with a game, they can play for free, but the really good stuff (digital furniture, digital pets, special invites, etc) goes to those who fork over the dough.  And fork over they do: with only 12 million registered members, Club Penguin made $35 million in profit ($65m in revenue) last year.

So what does this all mean? Well, it basically means that Facebook has the potential to make a lot of money. Kids who grew up having online access from an early age don’t have as many mental barriers between the online world and the real world. They don’t have problems spending a lot of (your) money to make their online room just as cool as their physical, brick-and-mortar room. Talking online for them is just another extension of talking in real life. So by attaching an actual value (10 credits, 15 credits) to the various actions one takes in the course of a 20 minute (or 4 hour) session on Facebook, Zuckerberg and Co. are actually monetizing social capital, which is pretty revolutionary. If you can get a special invite to a new Facebook feature by possessing a certain number of credits, you’ll essentially be able to buy your cool—which, ultimately, isn’t that different from the real world. But it’s certainly going to be a profitable revenue stream.

 

I start this piece by making one assumption--everyone is a Facebook  user. 

 

Isn’t that what makes social communities great? When they have hit a critical mass of users? Your entire community of close friends, family, coworkers, old college buddies, business acquaintances, and that girl you met at the Digital Wednesday’s networking event are all hanging out together in your Facebook friends list.

 

Now let me ask a rather blunt rhetorical question, “Would you invite all of these people over for Thanksgiving dinner?” Let me put things into my perspective.

 

My father just recently sent me a friend request, which unfortunately is still sitting in my inbox, after seeing me over Thanksgiving. My girlfriend’s sister rolled her eyes for denying her friend request after I tried to explain, “My Facebook page is really just for work purposes.”

 

My friends list is quite small, only consisting of coworkers and a handful of close clients. I have deliberately kept my personal   life separate from my Facebook one. This is not out of fear of possibly inappropriate content, but of the calamity that would occur if all the pieces of my social life melded into one unified bucket.

 

There is a huge opportunity for Facebook to expand its breadth from simple social networking into a true relationship management tool. No one   has just “friends” in his or her life. We dissect our social life mainly into family, work, and play. How are these very distinct aspects of our real social life going to interact in this digital social stew? I understand the argument—interpersonal transparency can be the catalyst for social discovery; however, we manage the relationships in our lives differently than how Facebook currently presents it to us. 

 

About a year ago, Facebook added a new feature that allowed those of us who have 5,000 friends to manage that immense data slurry into user-created categories. However these user-created categories are little more than a light contact list-building tool. This is the first step in the direction that I propose below. 

 

Facebook should allow you to designate your own categories for people in your friends list. Each of these created “friend categories” could have a separate sub-profile page where a user could design a page around that unique social interaction. This could simply all boil down to a privacy setting. You allow one category of friends to see a certain module on your profile. If a friend on your other list views your profile page, they would simply not see the module.

 

If you created a category of friends called “business networking” Facebook could finally be used as a quasi-Linkedin without the fear of your business prospect seeing pictures of you at the MTV beach party in Cabo last summer.

 

This would open a huge opportunity for Facebook to capitalize on the business side of our social communities. Lord knows as much as we all love Linkedin, there is little "social interaction" beyond the prospect of upward career mobility, which does not usually make for great conversation. 

 

I wish I could create a friend category called “work” and use Facebook as an internal communication and content management system. Most companies  already use Instant Messenger as a more efficient way to communicate internally than email. IM poses its own set of similar issues. If you use the same IM username for work and at home, while you’re at work your friends outside of the company are just one tempting click away to distract you. To circumvent this whole issue I have created a IM  account specifically for work—but, if my idea happened, I wouldn’t have to.  

 

Facebook would do the filtering for me, and I could finally become digital friends with my girlfriend’s sister, my coworkers, my clients—and my dad.  

 

 

Last week a few of us at Flightpath attended the Web 2.0 Expo at the Javits Center here in New York. I mostly attended sessions from the developer track and there is one theme in particular that I want to comment on: the future of JavaScript is bright.

JavaScript, the scripting language used in web browsers, is getting a boost. Firefox, Safari and, most recently, Google's Chrome browser have recently claimed improvements to the speed of their JavaScript engines. And we are not talking small improvements. When Google introduced Chrome, they stated that it was many times faster than that of other browsers and indeed benchmarks showed that. In introducing Squirrelfish Extreme (the new JavaScript engine for Safari), the WebKit team presented benchmarks that showed the new engine is over 10 times faster than Safari 3.0. Mozilla is also continuing to make JavaScript improvements for Firefox. Although trailing the speed race, Internet Explorer 8 is 2.5 times faster than IE 7 in some benchmarks. I believe the more dramatic improvements of the other browsers will pressure Microsoft into further improving the speed of JavaScript on Internet Explorer.

In addition to speed improvements, there are other browser related improvements that will empower web developers to build even more powerful applications. HTML 5 contains support for offline, locally stored data. Some browsers are starting to implment this features and Google Gears, a browser plugin, lets web applications store data locally in a fully-searchable database and run JavaScript in the background to improve performance.

What does this mean for web development? It means Web applications can be more robust and do more. It means that Ajax is a serious contender to flash for creating rich internet applications (RIAs). Other new features to browsers, including offline support, mean that browser apps are continuing to become more like desktop applications. Many of us were wowed by the improved user experience when Ajax first gained traction, and I believe we are entering a new era in which web applications are going to be able to integrate with the desktop to provide an even richer user experience. This is great for those of us who have extensive web development experience as it means we can leverage our HTML, CSS and JavaScript skills to create ever more powerful applications. After the last few years in which we've seen that the greatest improvement to web browsers has been the addition of tabs (well, maybe improved CSS support beats that, but you get the point), it is nice to see the competition and innovation heat up.