There’s this site I go to all the time. You know the kind. You probably have one of them too.

You come back every day, sometimes more than once, to get your fill of whatever that site is all about. For me, it’s a hilarious satire site that always guarantees a few chortles. Oh, but did I mention it’s hideous? Ten years ago the site would have been considered a design abomination, and yet I keep going back. Why? The content.

A Content Delivery System

The purpose of a website when it’s boiled down to its essence is that it’s a content delivery system. As such, its design should be tailored to its purpose: serving up video, blog posts, and photos or perhaps simply communicating a brand’s message or describing what a company is all about.

The better grasp a UX designer and ultimately a web designer has on the content, the better suited he or she is to the task of making a streamlined, more efficient content delivery system. One that makes its users happy (they easily get what they came for), and makes your clients happy (their users are more engaged).

Telling A Story

Trying to decide what this content should be can be a challenge. At Terralever the word “story” is used a lot when it comes to defining a site’s content. What story is a client trying to tell? Is it a story that the client can best describe or is it something that we need to help them come up with? Zeroing in on this simple idea will help put a focusing lens on the content creation process and help prevent tangential ideas that stray from the site’s main purpose.

The Four W’s

To help define a site’s story Alex Morris talks about something he calls the Four W’s in his article on 24ways.org. He uses these to define what a project’s main purpose is to begin with. Here is a brief synopsis of his Four W’s.

1. Who: As in “who” is the intended audience? Find out the basics about your site’s intended users. How informed are they? What’s their level of comprehension? What is the context of their visit? Keep the intended audience in mind when defining the site’s story.
2. What: Now that the user is defined, think in their terms. Keep jargon out. Clients often find it difficult to describe their companies or products in a simple way. They are simply too close to it and the vernacular is too ingrained into their minds. Unfortunately this tends to drive away the users they’re trying to attract. Use this quote from Scott Berkun as a good gut-check, “…never use a fancy word when a simpler one will do.”
3. Why: Define value propositions. These are the “why you should use us” of a company or service. Telling a convincing story about that company or service is immensely easier when there are differentiating factors that set it apart from the competition or if it’s something completely new value props explain how someone’s life can be improved with this product.
4. Where: In relation to other sites out there in similar markets, where should this one sit? Which sites are similar to where you want ours to be? What ways do they communicate to their customers? What ways do they come up short? Use this competitive analysis to your advantage when defining the story you’re trying to tell.

Design Without Content Is Hollow

Better understanding the importance of your site’s content is the first step to creating websites that are more engaging and result in better experiences for your users. Defining the story and knowing the content before the UX and design phases begin will help you create that lean content delivery system your users want (even if they don’t really know it).

If you’ve spent time doing digital marketing or web design you have had your client or boss tell you how your call-to-action (CTA) must NOT be below the fold because users just don’t scroll.

This is usually when I think back to that unicorn magically sprinkling dust on your landing pages making them a conversion wonderland.  I’m sorry but it’s just not true anymore.  Users do scroll.  You just have to give them a reason.

I blame Jakob Nielsen for making me have this conversation on every project I touch. 

Jakob Nielsen is a website usability forefather and often presents some compelling studies, but for some reason his website usability study from the 1990’s has become the Holy Grail on the subject.  Ok, he is not solely to blame but he did plant the seed for many poorly planned A/B tests that report record success.

Since then he has taken a new stance on the subject and I encourage anyone concerned about this issue to read Scrolling and Attention.  The gist of the article is that “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”

Ok, I’ll buy that.

So now you’re probably thinking to yourself, that proves it.  In order to have the best chance to convert your traffic your primary CTA should be above the fold.

Wrong.

What he’s really saying is you must have your most engaging content above the fold.  Once you have engaged your users, they’ll scroll to read more. I promise.

As for the CTA, sure. It can be above the fold but you don’t need a massive form.  Try motivating your prospects by giving them information they need to keep reading.

How do we motivate our prospects and increase conversion?

It all comes down to asking. How much copy do you need in order to motivate them into taking action?  Here are three simple rules of thumb:

1. Prospects who know what they want before they arrive. These prospects most likely have done their research and have made up their minds about your offering.  Your goal is to keep the momentum going.
2. Prospects who are uncertain but just need a nudge.  These users are sometime the hardest to write for, but you need to grab them right away!  They’re looking for small amounts of clear copy that convince them to click a CTA.
3. Prospects who are uncertain and need details.  These prospects need a little more handholding.  They might be in their research phase and are on the fence about committing.  When trying to understand their content needs consider where they learned about your offering and help them understand the complexity of what you have to offer.  This would be a clear example of when a primary CTA would fall far below the fold, and you know what? It’s okay! Don’t believe me? Try testing your CTA placement.

Thank you for scrolling.

Evidence of great content, CTA placement and pages that require scrolling:

Google Fiber
Apple iPad Mini
USA Today

Additional Resources

UX Myths #3: People do not scroll
Utilizing the Cut-off Look to Encourage Users To Scroll

Can you believe that 40% of the top 100 brands (Interbrand, 2011) still have not made the switch to Twitter’s brand-friendly layout? Granted it’s still fairly new, having been released only at 2 ½ months ago, but given the benefits of the revised structure I can’t help but to think, “Why”?

Sure, there are the stodgy late adopter brands that won’t necessarily benefit from the new layout; however, I was quite surprised at brands such as Audi, Corona, Sony, Microsoft, Heineken and Hyundai.  I thought brands like these would have surely jumped on the bandwagon by now.

Adopting for the sake of adopting, or is there a real benefit?

It all depends on what you’re using Twitter for, I suppose.  If it’s primarily for customer service (L.L. Bean, Overtock.com, Zappos), maybe making the switch isn’t a necessity for now.  However if you’re utilizing Twitter as a component of your social media marketing strategy, and as a promotional and marketing tool, you may be missing out.

Most notable benefits of the new design revolve around a greater emphasis on imagery and branding.  The new layout allows users to add a header image (like Facebook and Google+), as well as transplanting the old profile image to the front and center and has increased the size of the user’s photo stream.  This visual shift is on the heels of Instagram and Pinterest , both of whom are changing the way we consume information online.

These changes aren’t just limited to the desktop.  Twitter’s mobile layout also utilizes the header image, allowing for an enhanced brand experience on a smartphone or tablet. It’s nice to know since 60% of all Twitter users consume their information on a mobile device*.  The caveat here is that your twitter page must be updated to the new design, if not, your page is left with a rather large black box where your header image should be.So in conclusion, is it really worth the time and effort to update your companies twitter page?  The facts point to yes.  In today’s hyper-competitive online advertising landscape it pays to spend a little extra time polishing your brand’s image and taking advantage of the latest social tools available.

*Twitter Advertising (@twitterads), 2012

My wife and I are not creative cooks. It’s not that the food we make tastes bad, we just haven’t spent enough time in the kitchen to know what ingredient combinations play well together. So we stick close to the recipes and measure out exact ingredient quantities according to the directions. It’s not super creative, but it works.

As an interactive designer, however, there is no box of recipe cards that gives step-by-step instructions on creating meaningful experiences for your clients and your client’s clients. Coupled with the occasional overly ambitious timeline and we can end up with what’s best described as writer’s block for designers. I call it designer anxiety–an amalgamation of creative block, high expectations and, of course, looming deadlines. Let’s go through some ways to clear away the anxiousness and get back to making cool stuff.

It’s natural for designers to have lots of ideas jockeying for position inside their heads. Good even. But it becomes a problem when those ideas are competing with outside distractions. Now I’m not advocating working in a bubble—having a team you can rely on to collaborate with is a wonderful thing but depending on your work environs, you may have a lot of things vying for your valuable attention. So push those Kidrobots out of view, turn off the Twitter notifications and (dare I say it) don’t check your emails for a while. Take a deep breath; make sure that hideous deadline is in the back of your mind rather than front-n-center, aaaaaand focus.

Take a gander at my workspace when I’m knee deep in a project and you’ll probably find two items: a giant bank of design reference bookmarks in Chrome and a few CommArts lying around with dog-eared pages. I’m not going to use one of the many corny adages about designers stealing ideas because that’s not what I’m suggesting. Rather, use what’s been done and what’s out there as a sort of secondary brainstorm. Cobble design cues together from all over to either spark an initial idea or to augment one you’re already stewing on. Once you’ve got that initial idea you’re one major step closer to breaking free of designer anxiety.

Good prep time in the kitchen is an important part of taking the anxiety out of cooking a great meal. Investing the time to sketch out your budding creative early in your project can help relieve a lot of uncertainties and prevent all out catastrophes later on. Much like Festivus in the Seinfeld episode “The Strike” is a time for “Airing of Grievances,” breaking out the sketchpad (or Wacom or white board or iPad sketching app or…) is a chance for the “Airing of Ideas.” Try them out now and you’ll quickly discover what works and what doesn’t in a low commitment way rather than later on when you’ve been banging your head against Photoshop for half a day.

Those of us lucky enough to work at Terralever have a lot of the “why” questions answered before it’s time to start designing. Learning to trust the strategy and UX experts on the team and the loads of thought and research they’ve put into answering those “why” questions was a critical part of my designer anxiety breakthrough. That’s not to say I never run into issues or don’t have thoughts of my own, but it’s nice to know that I have legitimate reasons behind the things I put into my comps beyond, “I thought it would be neat.”

So now you have the tools to create a more zen-like design environment and mindset for your next project. Remember to clear your mind, research ideas, sketch to sift good ideas from bad ones and trust in the strategy. In fact I suppose you could write these things down on little cards … maybe even put them in a recipe box for the next time you feel designer anxiety creeping up on you.

When Facebook rolled out Timeline they gave us the Cover Photo and it looks like Twitter has followed suit. With their latest upgrade the microblogging giant has added a header photo to its new Twitter profile pages, providing more real estate to showcase your brand on mobile apps, twitter.com or anywhere your Twitter profile page is viewed on the web.

The new Twitter profile allows people to get to know your brand through the power of imagery. It also provides an opportunity for you to unify the visual representation of your brand with other platforms like Facebook’s Cover Photo, your website and your blog.

Your brand’s name, bio, website and profile photo (avatar) will display directly on top of your header photo. Since the text is white it’s important to note that you’ll want to make sure your header photo doesn’t compete.

Brands can still take advantage of Twitter’s background image, which you can design to compliment your header and profile photos.

Ready to add a custom header image to your Twitter profile? Here’s how…

1)     Sign in to you Twitter account

2)     Click the “Settings” icon (it’s the one that looks like a gear in the top right corner)

3)     Click “Design”

4)     Scroll down to “Customize your own”

5)     Click “Change header”

6)     Select “Choose existing image”

7)     Find the image you created

8)     Click “Open”

9)     Click “Save changes”

To see how it looks, click on the “Me” icon at the top of your page. You should see your Twitter Profile Photo, Name, Bio and Website superimposed over your new custom Twitter Profile page Header Image.

Twitter Header Image Design Tips

• Twitter suggests creating the image at 1200×600 but the image displays at 521×253
• Keep the image simple so it doesn’t compete with the Twitter Profile Photo, Name, Bio and Website
• Try a color palette that will contrast with the white text from the Twitter Profile Name, Bio and Website

We’re excited to announce that DC Shoes, one of the world’s most-renowned footwear and apparel providers for extreme sports enthusiasts, has brought us on to support the company with their social media efforts and to re-design their global website, scheduled to launch in Q2 of this year.

We also recently began working with Cisco Systems on their initiative GETideas.org, an open, online community for education leaders driving education transformation worldwide.

Terralever is headquartered in Phoenix, AZ with offices in Los Angeles, CA and has 40 employees servicing a wide range of national clients from Cisco to Goodyear. For more information, visit www.terralever.com.

When the iPhone came out, the internet was a flutter with speculation as to when, not if, it would support Adobe Flash content. The internet browsing experience on iPhone was okay, but with the ubiquity of the Flash Player on the Web, publishers had built Flash-heavy experiences that didn’t amount to much more than a “You need to install Flash” message on users’ iPhones and iPod Touches. What followed the iPhone’s introduction is a combination of anticipation, disappointment, hope, and ultimately, a feud between two huge tech companies (culminating with Steve Jobs’ article titled “Thoughts on Flash“) that leaves us still with Flash-less iOS devices, and a dismal outlook on whether we should ever expect Flash on our iPads, iPhones, and iPod Touches.

So what now?

“It needs to work on iPad.” A phrase that haunts my dreams. Terralever has a history of doing great, innovative development, including some pretty cool Interactive work with Flash. Here’s how we are approaching the new landscape of various ways of experiencing the Web:

Interactive Applications

When building a business application or website, Javascript and HTML experiences should always be the presumed user interface technology to consider unless there’s a compelling reason to use Flash. For example, Terralever’s new website was built from the ground up using good ole’ Javascript, CSS and HTML for all of the interactions instead of Flash. The only part of our site that uses Flash is our video player at the bottom, but this was also developed as an HTML5 player for users who don’t have Flash.

Rich Interactive Content

If we’re developing a game, or a highly interactive Web experience, Flash is still going to provide much more flexibility than HTML5 and Javascript, especially if 3D interaction is a requirement. However, if we determine that Flash is the way to go, we’ll always consider how we can build a “2nd best back-up” version in Javascript and HTML for devices that don’t support Flash.

Video & Audio

Flash and HTML5 both have great support for embedding of Audio or Video content (presuming that the content is encoded properly for either). However, neither Flash nor HTML5 are fully supported across all browsers or devices. For example, Internet Explorer didn’t include HTML5 support until version 9! Besides supporting non-HTML5-ready browsers, a Flash video or audio player is great because it makes sharing on Facebook news feed possible. Terralever’s approach to building these multimedia players is to build an iframe embed version that contains a Flash and HTML5 version of the player, and determines what to display to the user depending on the user’s browser. Hey, this is the same approach YouTube is moving toward, so it can’t be that bad of an idea!

And HTML5?

HTML5 is a topic worthy of a blog series all its own, but worth mentioning here. HTML5 is a great thing for the Web. It’s providing better options for handling browser animation and interactivity, including audio and video encoding. It’s got a long way before its browser support and performance catch up with Flash, but it’s worth throwing into the mix for certain applications.

Worth noting…

Beyond the Flash Player, Adobe has invested lots of time and money over the past decade into building and adapting a powerful suite of development tools and using the robust Flash and Flex frameworks. Flash development can now be utilized to develop native mobile applications for iOS and Android, which can easily be ported to Web using the Flash Player, or desktop for Linux, Windows or PC. Developers should always analyze performance implications of using Flash to create applications for any platform versus developing them in native code, but Flash provides a great way to create a multi-screen application using one codebase.

In closing

Flash is great, but its days of standing alone are over. It’s time to make room for HTML5 and Javascript.

Terralever is excited to announce the launch of the newly redesigned MommyTalk.com website.  MommyTalk.com is a free online community for parents that offers advice and tips from other moms and dads and provides parents a forum to connect with one another. The fresh-faced website now incorporates a softer color scheme, more intuitive navigation, and more comprehensive community tools and functionality. Moms are now encouraged to develop individual profiles to better enhance their experience and to better stay connected with one another.

We are very pleased with the end result, the before and after shots speak for themselves!

See the face lift for yourself at www.mommytalk.com.

It’s not every day you work for a client in an industry you love, let alone the pinnacle of the industry you love.  Now add to that a client who reached the pinnacle of that industry…ok, you get where I’m going with this. Red Bull Racing’s Formula 1 team has achieved status typically reserved for such iconic names as Ferrari and McLaren.  They are World Champions.  Red Bull Racing’s Sebastian Vettel added the icing in dramatic fashion by capturing the WorldDrivers’ Championship last weekend as well.

Last November we had an opportunity to first meet with “The Team” in Salzburg, Austria.  Underdogs we were…a growing interactive company from The States trying to break into the glamorous world of Formula 1.  After an hour we convinced them to give us a shot at their business.  Two weeks, 2 comps and a trip to Milton Keynes later, we won the account.

I have to say this year has been a memorable one.  It’s been filled with amazing trips, great people, and unforgettable experiences. Sure the hours were long and sometimes consumed weekends, but really…how many people can say they work with a Formula 1 team…a World Championship Formula 1 team that is.

Congratulations to the entire Red Bull Formula 1 family and we look forward to an even better 2011!

Visit Red Bull Racing.

Phoenix, AZ – October 20, 2010 – Terralever continues to push the boundaries with creativity and innovation when it comes to digital strategy and execution. As first-time entrants in the W³ competition, Terralever walked away with three Gold awards for website design and development.

• Gold: Website Features – Home Page – Red Bull Racing (F1)
• Gold: General Website – Sports – Red Bull Racing (F1)
• Gold: Website Features – Animations – Ashley Fiolek
• Silver: Website Features – Visual Appeal – Ashley Fiolek

Terralever took home the Gold for Red Bull Racing by rapidly creating a large and complex website suitable for multiple languages, content engagement and projecting the excitement of the sport. Terralever’s execution required technical innovation as well as savvy design.  The resulting website has been critically recognized but more importantly it has been embraced by fans who expect superlative performance and quality in all things related to their sport.

Terralever also created a website for Ashley Fiolek, a two-time Women’s Motocross Champion, with one goal in mind: to digitally showcase the female athlete as one of the world’s top competitors in a traditionally male-dominated sport. To create a compelling digital presence Terralever developed a WordPress-powered, Flash-based website complete with 3D interactivity as a platform to showcase a highly visual experience that would appeal to both Motocross fans and her large following in the deaf community.

“We’re beyond proud of the work we’ve created this year and we’re honored to be recognized by the W³.” said Chris Johnson, CEO of Terralever. “Both of these client collaborations produced great work, but more important, they delivered on the strategic goals we identified at the beginning of these initiatives.”

About Terralever

Terralever is an award-winning digital marketing and technology services firm that delivers online marketing solutions for innovative brands worldwide. With offices in Los Angeles and Phoenix, the growing firm specializes in digital strategy, social media innovation, website design and development, search engine optimization, conversion optimization and email marketing. For more information, visit www.terralever.com.

About the W3 Awards:

The W³ Awards honors creative excellence on the Web, and recognizes the creative and marketing professionals behind award winning Websites, Web Video and Online Marketing programs. Simply put, the W³ is the first major Web competition to be accessible to the biggest agencies, the smallest firms, and everyone in between. Small firms are as likely to win as Fortune 500 companies and international agencies. For more information about the W³ Awards, please visit www.w3award.com, email The W³ Awards at info@w3award.com or call (606) 326-9326.

Okay, so I know the topic of “The Web is Going Away” has already been covered in this blog just a few weeks ago by Heather Herr…but I couldn’t resist writing my own perspective on the matter. If I may be so bold as to summarize what Heather said in one line: “The Web as we know it is dying or already dead.” I’d state my one-liner perspective a little differently: “The ‘Web’ as we know it is not going away, but it is certainly taking a backseat to other ways to experience digital presences.”

The shift towards Internet over Web as I see it, is a matter of changing the perspective from users consuming “Web Sites” to preferring “APIs and Thin Clients.” Thin Clients can consist of a smart phone app, an app on your Blu-Ray player, or even a Web Site.  In fact, most of the apps on your smart phone are likely thin clients to an API, such as your Facebook app, Twitter, Foursquare…all except your whoopie cushion. The paradigm shift moves the user interface entirely to the thin client, with only enough programming logic included to communicate with the API of the application to store and retrieve relevant data. Maybe this diagram makes more sense…

Some companies have really embraced this paradigm of creating a strong central idea that’s manifested in several user experiences, most interestingly:

• Netflix
• Twitter

Netflix has built a disruptive entertainment business based on the initial idea of a massive selection of content at a great subscription price, with the only significant inconvenience being that you had to plan your selection a few days ahead. They’re now, however, in the process of removing the last obstacle to total market domination by building a more comprehensive collection of on-demand movies available in their Instant Queue. The ’2005 Web Wisdom’ strategy would have probably revolved around driving all users to a single Web presence where they can manage their queues, as well as watch their movies. Instead, the Netflix ecosystem now consists of one centralized queue management and video streaming API, and thin clients built on:

• Blu-ray players
• TVs
• Gaming consoles
• Mobile devices
• And of course, a full-featured website at netflix.com

If I think of a movie I want to see while I’m at dinner, I can just open up my Netflix Android app and add it to the top of my queue to watch later.

Twitter is an interesting example of this new paradigm because of both the simplicity and wild popularity of their core service. Twitter has taken the idea of “Share what’s happening in 140 characters or less” and turned it into an ecoystem consisting of:

• Simple and customizable SMS interactions
• Media-rich mobile apps
• An API with which cool applications can be built (by Terralever, of course)
• And a feature-rich website at twitter.com

As an example of how Terralever practices what we preach, we recently launched a Social Support Platform called Cisco Ripple, which revolves around one centralized API that’s manifested throughout several experiences:

• A Facebook application
• A Twitter integration
• A world-class website
• Unlimited possibilities of other applications and integrations

If you don’t want to get lost in this evolution of the Web, focus first on the core idea of your digital presence, and then consider how that idea should be manifested across the different experiences available to your consumers.

PHOENIX, Ariz. – September 23, 2010 – Terralever, one of the nation’s leading full-service digital marketing agencies, has announced the launch of its newly designed corporate website, showcasing the latest visual and functional innovations in experiential website design.

Prior to the launch, Terralever performed a comprehensive analysis to determine how visitors moved and interacted through previous versions of their site.  They also conducted research to identify significant trends in design and social engagement, all of which combined to create a new site that is both intuitive and engaging.

“Today, almost all content consumption online occurs as a pull, with the user defining their path,” says Terralever CEO and founder, Chris Johnson. “This site reflects and caters to that experience.”

One of the highlights of the new site is the company’s portfolio, highlighting Terralever’s depth and breadth of capabilities.  Known for helping some of the world’s most recognizable brands, Terralever will showcase some of its most recent work, including:

• Red Bull-sponsored motocross athlete, Ashley Fiolek – Ashley’s personal website has garnered FWA Site of the Day Honors, Dope Award, and the CommArts Award for the combination of a Flash interface built on top of a WordPress content management system.
• Moxy Vote – Recently featured on Fox Business News, www.moxyvote.com is a groundbreaking website that gives shareholders greater voice in boardroom decisions by facilitating information sharing among shareholders, advocate groups, and public companies.

Another big feature of the website is the focus on all Terralever employees and the company’s culture.  In a clear shift away from sites that feature only key executives, Terralever encourages all staff members to contribute to the company’s blog, interact on social media sites and provide input on digital marketing strategy.

“We’ve worked really hard to assemble a team of experts,” said Johnson. “Each of them contributes knowledge and skills from interests that extend far beyond their particular development language or marketing specialty. We’re proud of that, and we want others to see why we believe our team is truly unique.”

Originally posted to Ryan Plemons’ blog: Digital Transfusion.

It seems like only yesterday that Tim Heuer was  showing off Zero Gravity and the lovable antics of Lt. Bennett. It is hard to believe that was over 3 years ago. The Silverlight platform has grown up by leaps and bounds in that amount of time, and with the looming release of Windows Phone 7, it seems only fitting that I get the opportunity to go back and take a look at the first game built in Silverlight with the intent of bringing it to the modern age. That’s right, Zero Gravity is now available on WP7 as well.

What amazed me the most out of this whole experience is that the codebase written back in WPF/e was able to be recompiled with very little modification into the latest version of silverlight. Sure, there were a few namespace changes, but nothing in the code needed to structurally change. Even the old way of using a pre-loader (back before there was such a thing as a “splashScreenSource”) runs without a hitch. In my next post, I will go into the changes that were necessary to get the game to work in WP7 but until then…

Just give me the source!

So without further adieu, I give you the source code for the original zero gravity

Please note that the Wp7 version you will need the Toolkit which can be found on codeplex.

If you just want to play the original game, you can check it out right over here!

For more, about Zero Gravity and Silverlight for WP7, check out the following:

• Ryan reviews the development changes required to bring Zero Gravity to WP7 on Digital Transfusion.
• Tim Heuer shares his thoughts on the Zero Gravity Silverlight source code.

Facebook announced yesterday on their blog that they are finally making a Platform-wide migration away from FBML and towards standardization on IFrames as a mechanism for displaying content, on Canvas applications as well as Page tabs.  This is fantastic news for developers!  Particularly for Pages, where this kind of support has never been available, we expect that our abilities will grow to:

• Use of jQuery. As well as other standard web development libraries such as Prototype to provide compelling JavaScript-based user interactions.
• Provide no-click startup for Flash. Currently, Flash videos and other content must be clicked to start playing within these environments on Facebook.  Our contention that brands should be able to determine their user experience is finally taking hold, which is exciting.
• Provide Facebook accessibility for Silverlight. Previously, I thought that we might be able to shoehorn Silverlight content into Facebook via a loophole in which an IFrame could be loaded when an image was clicked, but Facebook eventually closed that hole. With the FBML support for Silverlight completely non-existent it left developers who wanted to target Silverlight stuck between a rock and a hard place until now.

What does this mean for brands seeking to leverage Facebook to connect to end-users?  Easily, it’s a far more interesting and engaging user experience.  This great news allows for brands to be able to further express themselves within the Facebook interface, but the fact remains that a substantial number of users prefer Facebook’s far-more-egalitarian user experience over a site like MySpace because of its clean interface. Users also prefer the surfing of Facebook because it doesn’t necessarily mean being inundated with someone’s music choice upon landing on any particular page.  I believe that for brands to continue to be successful and viral on Facebook once this change comes forward, they will need to be respectful of that distinction and avoid click-to-play content only when content of an immediate nature (such as a limited-time offer by a brand or a time-sensitive event) is impending.  We hope to be able to make similar content, such as the live broadcast of the Red Bull Stratos mission, available via the Red Bull Page on Facebook.

Other Changes

In addition to this change, which should be coming in the next couple of months, Facebook has continued its migration towards full support of the new Graph API, which includes deprecation of uncommonly-used REST API methods and the requirement of OAuth for Canvas and REST API access.  They have also cleaned up their developer documentation and moved the list of Preferred Developer Consultants. With the standardization of IFrames as the primary interaction medium for Facebook applications, it will also standardize the way developers work with Platform, as the list of XFBML and FBML elements become basically the same.

We look forward to seeing all of these changes implemented and standardized, and very much look forward to being able to work with our web-standards technologies (like jQuery!) when marketing our clients.  It will be exciting to see the new interactivity that brands will be able to leverage before the end of the year.

Today I start a 10-part series discussing Jakob Nielsen’s 10 Usability Heuristics. In each post I’ll discuss a topic and give examples so that you can keep your users happy go-lucky during their website adventures.

So, here we go…

Part 1: Visibility of System Status

Jakob Nielsen: The system should always keep users informed about what is going on, through appropriate feedback with reasonable time.

So, what does that mean?

It means that when a user interacts with your site, they need some sort of visual cue indicating that the system is working or that what they’ve done is either correct or incorrect. There’s nothing more frustrating than clicking on a button and not getting some sort of immediate feedback or response that something is, in fact, happening.

So, what sort of feedback can you provide?

There are a lot of different types of feedback that you can provide for your users. Here are a couple of examples…

1. Displaying loading, searching or progress indicators when users when information is loading on the screen.

At times they can look more like this…

Priceline’s full page feedback tool serves multiple purposes: entertainment, confirmation and marketing, but its main task is to provide a visual cue to its users, letting them know that the site is working hard to find their results. Obviously, having a whole page dedicated to a status indicator is not always necessary, but in Priceline’s case, it provides a clean, organized transition to the next screen.

2. Letting users know immediately that what they’ve entered is either okay or not okay.

Picnik.com does a great job of this. During their registration process, they let you know immediately if the username you’ve chosen is available or not. How annoying is it to fill out the whole registration form, hit submit and THEN find out that the username you’ve chosen isn’t available? What a time suck to sit there entering and submitting until you find something available. In Picnik’s case, you know right away.

This sort of immediate validation is just as amazing and helpful when filling out any type of form. Letting users know immediately that the email address they just entered is in the wrong format, is invaluable to their experience. Let them fix it right away and get on with their business, which may be purchasing a product from you.

There are more…These are just a couple ways that you can ensure users are “informed about what is going on” while browsing and interacting with your website.

How do you ensure that your users are comfy and confident?

Since earlier this year, we have known that Facebook Pages (like profiles, but for brands and businesses), were going to be going through a redesign, the most significant of which was going to be the narrowing of the content area for application tabs.  Facebook had announced the intent to reduce the size of tabs from the current, generous 760 pixels to a bit tighter 520 pixels – about a 31% reduction.  What we haven’t been sure about, though, was when, and the result of this uncertainty was the need to design for both the 760- and 520-pixel profiles.

Word on the street, however, is that the change should be taking place by the end of August, and while I might say tongue-in-cheek that they’ve been planning this change since the beginning of the year, I think they mean it this time.

Also happening very soon is the removal of the beloved profile boxes.  According to the Platform Live Status, effective the first week of August, users’ abilities to add Profile Boxes to their profiles will be terminated.  Shortly after that (no specific time frame is currently given), Facebook will remove users’ ability to see them, leaving the only ways for applications to present custom content within a profile as publishing to a stream, or installing application tabs.

Ostensibly, the purpose of these changes is twofold.  Users can have a significantly more interactive experience with applications than they can with profile boxes, as profile boxes can’t really go back and forth with AJAX requests.  They also can’t be updated dynamically; I used an app called InstaMapper GPS Tracker on my Android phone, and it was neat in that it could auto-publish my latest map onto my profile.  However, when I changed from my G1 to a Nexus One, I didn’t update my device information on my Facebook profile.  Consequently, since the data hasn’t been updated in more than three months, the image has expired, and they couldn’t update it (because it’s not generated whenever I view it – it was generated when I last used the app back in April).

The other purpose behind this is to increase advertising space.  I think along with the change, we’ll probably see a more compelling design around the implementation of the tabs, for instance (though any specifics on this haven’t been announced).

My hope is that they’ll also make it clear for developers about specifically when the change will be made, and then give us a timed opt-in ability (like they currently have given with the “New SDKs” components).  If we remember back to the big 2008 Facebook design change, too, new Facebook applications still even get the “in-the-new-Facebook” parameter on requests, letting applications know that they should be using the “new” standard UI.  A parameter like that would help us to be able to be responsive to the change, even if we need to design and cut twice.

Like always with Facebook: we know change is imminent.  We see its shadow on the horizon.

During the 2010 f8 conference, Facebook announced that it would be launching a new set of data permissions as part of the new Graph API.  The permissions themselves, while they provide more granular coverage of the data available via Facebook, aren’t really that interesting – the interesting part of the new data permissions are what Facebook grants to clients in terms of license to use and store the data.

User Experience

The user experience has changed as part of launching the new data permissions.  Using the old permissions required a user to click through a number of authorization dialogs, one for each permission required.  This series of dialogs sometimes caused confusion for users, depressed conversion, and sometimes left developers with an incomplete permission set as users began authorizing the app but quit when they felt they were giving too much away.

Figure 1 – Facebook previously required four popups to log in, allow offline access, and read/write access to the user’s stream.		Figure 2 – With the new permissions dialog, all of the required permissions are displayed in a single authorization prompt.

Facebook’s CTO Bret Taylor wrote in the Facebook Developer blog  that this change increases conversions for applications by 28-41%.  If only we could get that kind of conversion rate increase from flipping a switch on other websites.

Better Data Provisions

One of the most debilitating parts of a Facebook application, performance-wise, were the restrictions on data that prevented most Facebook data from being cached for more than 24 hours.  As Facebook’s Ethan Beard wrote in the Developer blog, we often had to write special code paths to handle Facebook data due to the 24 hour caching limit, or worse, we never actually stored the data at all, instead using FBML or XFBML to access it.  Now with explicit consent, we can access the user’s preferences and store it forever (as long as we provide a way for the user to opt-out).  This opens a number of new possibilities – imagine a business like Amazon.com taking advantage of knowing a user’s preferences.  All of a sudden, they could start recommending books similar to Anthem or 1984, even though I’ve never bought those books on Amazon, because I listed them as part of my favorite books on Facebook.

On top of the new data retention policy, Facebook is actually going to start pushing data to application owners via a process they’re calling Real Time Updates.  Now, application developers don’t even have to query the data – it gets pushed to us as users authorize our applications or as they change their profiles.  This will hopefully speed up Facebook by not having numbers of redundant queries being made on behalf of applications, but it will also provide the opportunity for more interesting development tools to be included.  I’m happy to say that real-time updates were important enough to me to include support for real-time updates for users as part of OpenGraph.NET, an open-source .NET Framework-based toolkit for developing for Facebook’s Graph API.

Like It or Not

As of June 30, you can access these changes via the Developers application .

Figure 3 – The New Data Permissions setting is disabled by default for existing applications, but enabled by default for new applications.

I haven’t seen in our applications that the new permissions are causing much trouble because of the way they’re used, but as always, your mileage may vary, and it would be better to check it out now before they’re forced on your app.

After months of developer community anticipation and beta releases, WordPress 3.0 is finally out in the wild. WordPress updates the core code several times a year for maintenance reasons, but this iteration has some pretty significant improvements that have got the Terralever developers of the WordPress persuasion (myself included) pretty excited.

If you don’t know what WordPress is, it’s a powerful, lightweight, flexible CMS. It’s evolved from a powerful blog tool (which it still is), into a tool that can power myriad websites with varying content and technical requirements. Terralever has built several websites with WordPress as a backend content management system, including the award-winning Ashley Fiolek site we recently built for Red Bull at http://www.ashleyfiolek.com.

There are a few new features that have me excited about the new version of WordPress, both from a development perspective and an end-user perspective.

1. Child Themes
2. Built-In Menu Support
3. Custom Post Types
4. and last but not least…Multiple Site Support!

One major limitation that’s been lifted by WordPress 3.0 is support for “child themes,” which are themes that inherit functionality and styling from, you guessed it, a Parent Theme. This gives you the flexibility to create variations of your base theme (such as creating a seasonal, holiday, or promotional theme). It’s also helpful for developers who do a lot of WordPress development, and want to use a base theme with common resources for each build, but don’t want to have to modify the core code of the theme. When a WordPress site utilizes µ (WordPress MU) functionality, child themes can be utilized to provide variations of a base theme for the different site instances.

One good indication that a feature should be included in the core, is how many plugins have been developed to deliver a basic piece of functionality. A perfect example is built-in menu support (Just search the plugin repository <http://wordpress.org/extend/plugins/search.php?q=menu&sort=> for “menu”). Previously, there wasn’t a whole lot available out-of-the box in terms of building a dynamic navigation menu based on your site’s page taxonomy. However, in WordPress 3.0, it’s simple for non-technical admins to manage the organization of their navigation through the backend. The new interface provides a means to quickly create menu items, and drag/drop them into their proper hierarchy. As long as your theme has support for this new feature, you should see immediate results. If you want to take it for a drive, look for the ‘menus’ option under the Appearance menu in the WordPress admin.

Custom Post Types are especially interesting to me, since we use WordPress to power such a diversity of sites with varying content requirements. Essentially, this feature addresses a need that’s been handled previously by users creating posts and categorizing them in categories such as “portfolio” or “products,” or otherwise creating a custom plugin to manage content. Custom Posts allow developers and admins to more effectively manage different types of content on their site, by organizing them under their type of post, alongside similar posts in the admin. This opens the door to something like turning your WordPress site into an ecommerce site, or a collection of any other type of data that can be administered through the post editing interface.

And perhaps my favorite new feature, is that WordPress µ (Multi User) support is built into WordPress 3. If you need to create a bunch of WordPress sites, and you don’t want to get a separate server for each one, this feature is your friend. Each site built off of this base can be managed by administrators that only have access to that specific site, but the super admin can access all sites on the WordPress µ install. Themes and plugins can be shared from the root of your site with each of the individual sites, so it now becomes very easy to manage updates and maintenance to your codebase across multiple domains.

And that’s just a few of the new features in WordPress 3.0. For a full list of new features, visit:

At the age of four, my parents and I left Tempe, Arizona, and ventured into the heart of Europe, to live in the capital city of the Czech Republic, Prague. My family traveled there as missionaries to work with the local church to develop student ministries, just a year after the the country split from Czechoslovakia in the Velvet Revolution. Growing up overseas gave me a cultural experience like nothing else and a much wider perspective of the world. Europe branded me with a passion for travel and culture that has followed me to this day.

Since my family and I have moved back to Tempe, in the summer of 2007. I’ve had a chance to intern for several of the most innovative and exciting design and development agencies in the metro Phoenix area, including Perk, Integrum and Keane Creative. Working for all of these awesome agencies has given me a chance to be involved in multiple exciting projects and gain the practical workplace knowledge not taught in high school, as well as aiding in funding my passion for photography.

I first became interested in web development in 6th grade, where our class assignment was to create our own personal web page. Although, I would cringe looking back at what I created then, the experience left me with a longing for more. To discover how everything worked, to break things and put them back together again. This passion has grown since then to all things from laptops to webpages, but it always leaves me with a desire to learn more.

Currently, after graduating from McClintock High School, I am pursuing my degree in Business Management at Mesa Community College while I Intern at Terralever. The work that I do at Terralever isn’t the typical intern work, such as sending faxes or refilling staplers but it’s getting to do what I love, web development! It gives me a chance to work on huge projects such as Red Bull Stratos or Flugtag, collaborations I would never have a chance to be a part of working freelance. It gives me a chance to utilize my abilities to the fullest extent. I believe that the experience and training I receive while I intern here at Terralever is as valuable as the teaching I could be studying at ASU. The web is growing explosively and the demand for current and up to date programming is increasing. It’s difficult for college course content to keep up with the growing pace of the web. That’s why I believe that interning at Terralever, not only gives me practical workspace knowledge but allows me to work with technologies that aren’t being taught.

One of the best parts about working at Terralever is having the ability to go to developers who are higher up than me and get their help and assistance in any project I am working on or struggling with. Not only does this teach me new ways to problem solve and tackle different issues, it prevents me from hitting walls or road blocks in which I am unable to solve a problem myself. I can get immediate help and feedback, which makes me significantly more productive. I get the opportunity to learn an exceptional amount of web development as well as teach others what I have learned, or what experience I have gained.

My passion is to travel back to the Czech Republic and to shoot photography. For now I want to continue pursuing my career in web development as well as continue rock climbing, playing the drums, shooting photography, drinking lots of tea and living for the gospel. Follow me on my blog at http://www.connormcsheffrey.com/

When Silverlight just lived in the browser, it was relatively easy to interact with the analytics framework of your choice via code; it simply interacted with JavaScript on the browser.  This wasn’t terribly designer-friendly, since it required using code unless your developers were clever, but when Silverlight 3 and the out-of-browser experience came around, suddenly developers no longer had the guaranteed access to the analytics JavaScript hosted on the containing web page.  In response, Microsoft developed the Microsoft Silverlight Analytics Framework, a plugin-capable API for implementing analytics clients within a Silverlight application.  With it, we can now easily add any number of analytics vendors to a single client, without much headache at all, and what’s more, it’s extended to be easy-to-use for designers:

The components and behaviors built-in for Analytics in Expression Blend is already pretty deep.

The Analytics API implements behaviors, so that you can simply attach certain actions and behaviors to events on objects, easily in Expression Blend (so easy, a Designer can do it):

Here, Expression is collapsed, but you can see the Analytics TrackAction behavior is selected and can have its properties modified.

Given how often we utilize Google Analytics within our solutions, we were very excited to hear that Google was one of the providers to implement the Analytics Framework.  As our ability to track behaviors for our clients grows, we’re especially excited to see where the future of Silverlight will carry this capability – to mobile devices and embedded scenarios, or interactive and offline video players, our ability to monitor conversions and user behavior is only going to grow.

Originally posted to the Phoenix Business Journal

Terralever has become one of slightly more than two dozen companies to be recognized as a preferred developer by Facebook.

The Tempe-based interactive marketing agency is one of 14 companies in the Facebook preferred developer consultant program, which can build programs for the massive social networking platform.

Terralever has been involved with Facebook applications since 2007 and has built programs for companies ranging from Apple and BMW to Red Bull and the University of Phoenix.

“Clearly, Facebook is one of the most innovative companies in the world. In the last five years they have strategically found ways to capture the attention of users everywhere, attracting more then 350 million active users worldwide,” said Chris Johnson, Terralever CEO. “We are honored and excited to be a part of this new program and to have the opportunity to continue to develop new experiences on Facebook Platform.”

Introducing “Zero Gravity”, our new mind-bending adventure featuring the lovable and lost astronaut, Lieutenant Bennett. To build this game, we used Silverlight Technology with the Microsoft Expression suite, along with a few other tools.

“Zero Gravity” was built using the C# language. Considering this is Beta Tech, we relied on a few of our own tricks to make the game exactly how we wanted. To help reduce the size of the xaml files over the wire, we used compression. We also created a pre-loader that would load our assets to provide a better user experience. In addition to our own assets, we used info on the Silverlight forums and the community’s code to get a leg up. We will certainly be giving back to the community through articles and code samples.

The result is an addictively fun game that has it all: animation, sound, video, quality gameplay, and over twenty levels of cosmic adventure.  Check it out at www.ltbennett.com.

Joel Neubek, Terralever’s Director of Technology, is presenting at this years Mix Conference in Las Vegas.

Joel will be talking about how Terralever was able to use the powerful new features of Internet Explorer 8 to change how users interact with the Digg website.

Those who stop by his presentation will learn how using Accelerators and web slices changed the way users are able to discover, as well as simplify submitting stories to Digg. He will also be looking at how taking advantage of these awesome features can improve a user experience, while increasing the number of users visiting your site.

If you would like to attend Joel’s presentation it will be taking place on Thursday March 19th from 2:30-3:45 pm at The Venetian in Las Vegas – presentation room, San Polo 3501.

To register for the event or to check out more details, you can visit The Mix website here.

We hope to see you there!

It’s fairly common for a prospective or existing client to come to say “we need to redesign our web site.”  The first question we ask is “Why?”

Occasionally the answer is motivated by something technical:

• Our IT department has decided we’d be better off if we changed over to Ruby on Rails
• We’re thinking doing a site in Silverlight would differentiate us
• We can no loner maintain our site because the guy who built it quit

More often than not the answer is subjective or ambiguous:

• It’s time for a change
• The last redesign we did was 2 years ago
• Our new CEO’s wife doesn’t like the color blue we’re using

What we almost never hear is that the decision is based on a business goals or performance metrics. Examples:

• We used to convert about 4% of our browsers to buyers, but we’re far below 3% for the last six months and we feel it’s due to a direct competitors’ superior user experience
• We have a full Flash site and can’t get a foothold in organic search which we’ve determined is preventing us from a great deal of potential business
• Our offline and online brands aren’t in sync; we think if we can get the two in parity we would have better conversion and retention of customers

When is the right time to redesign your web site? It could hinge on a number of things.  If its along the lines of the reasons just above this paragraph, you’re good to go. Is your web site developer’s departure or a general feeling that “it’s time for a change” a good enough reason?  It could be.*

My advice?  If you’re going to expend the time and energy to redesign your site, take advantage of the opportunity and ensure the money you spend is an investment. Whatever your industry, if you have a web site it serves some sales, marketing or support role for your company. Regardless of how you enter into a site redesign, consider this as a high-level guide for your redesign process:

1. Reflect on your current site and what you hoped it would provide your organization
2. Review any metrics you have on how your site currently performs
3. Understand what your visitors motivations are and how they can be serviced – be objective – this is about your visitors, not you
4. Clearly define what success would mean to your organization after the redesign (such as we’d have better visibility online, our content would be more engaging, or we’d reach new prospects and have an opportunity to create a dialog with them)
5. Map success metrics to key performance indicators that are measurable (such as a 25% increase in traffic within three months, a 10% decrease in bounce rate at launch time,  or 3,500 new email newsletter sign-ups by end of year)
6. Create guiding principles for your site redesign design based on your visitors, goals, and measurable performance indicators
7. Build your new site by the principles above
8. Put performance measurement tools in place so the new site can be evaluated and improved upon over time

What’s above is oversimplified; a general approach that will help direct your redesign process towards measurable success. If you are getting close to a site redesign, there’s several great books out there that can provide you with a complete, detailed process.  If you’re interested in a recommendation, just ask.  And, if you need a company to lend you a hand, I know of one of those, too.

* If your site is designed for a maximum screen size of 640×480 pixels and no more than 256 colors, and the CGI programmer that’s held it together for the past ten years quit to start a one man pilgrimage to acquire the last card to complete his Magic, The Gathering set then yes, you should absolutely redesign your site.

Originally posted on Scott McAndrew’s online marketing blog.