POST DIGITAL

on: audi's augmented reality calendar

a balsy move. imagine getting an automotive company calendar without cars in it. the audi augmented reality calendar prompts users to download an app on to your iPhone so you can get the first glimpse of the new Audi A1.

on: football boots and your future

This is one to watch! This is the first stage of a Nike journey that will ultimately see fans around the world write their own future through experiences that put them at the center of the action. In June, fans will be able to live like their heroes through a unique experience on nikefootball.com that generates ripple videos and visuals from their own photos and information, placing them at the center stage.

Write The Future from Nalden on Vimeo.

It was directed by renowned Hollywood director and producer Alejandro G. Iñarritu (21 Grams, Babel). Footballers can use this creative to build their own Facebook campaign to get noticed and selected for “The Chance” – an elite Nike Academy football camp in partnership with the Barclays Premier League in England that allows players to get scouted and get noticed at the highest level of the game.

This is epic!

on: facebook's approach to the social semantic web

As many of you have been following in the mainstream and tech media, in late April, Facebook [FB] announced and launched a number of new and updated products for developers.  This set of products is centered on the Open Graph platform that allows the sites, brands and apps to share information about users in order to tailor offers, features and services.  FB’s approach will lead to a truly social semantic experience across the web.

Why do you want to integrate your website or blog with Facebook? 

Context.  FB has amassed more than 400 million users, 100 million mobile Users, 100 million Facebook Connect users and 25 billion items shared each month on FB.  While integrating with FB may not be right for all businesses and situations, it will likely be a valuable tool to create rich connections between marketers and their audiences.

What does that mean for your brand today?
Lets start with the social plug ins.  Imagine a person coming to your website and knowing what their friends thought about the content of your site. FB has developed a set of portable social plug-ins that will make it easy for users to see information from or about their FB friends, share things with their friends or even log in to FB all without leaving your site.

You may have recently noticed that the fan page you were a “fan” of has become more of a community, company or brand page that allows you to “like” it.   When you “like” a brand or product page, their content will appear in your personal news feed.  The FB feed is the femoral artery of the FB and social experience.  If you are a brand who wants prime real estate on the social web, the “like” button is the permission you need to deilver your content into people’s daily lives.  Under this new release the “like” button is much more powerful and now more portable.  You now can implement the “like” button, with a line of code on to your website. 

The Activity Feed exposes the actions your friends on any website. When you're logged into FB and visit CNN.com, you will instantly see articles & topics your friends’ sharing, recommending & commenting on via Activity Feed.

The Recommendations Social Plug In helps make sites more relevant to you by highlighting content based on top "Likes" across a site. Think of it as a people-powered "most popular" list. For e.g., if logged into FB, a user can visit your brand web page and instantly see articles, product summaries and features that people are liking & sharing with their friends most often, in real time.

The portable FB Log In now lets you increase sign up rates at your site.  This feature has the potential to catapult the power of the social CRM space. The Log in with Faces plugin displays your friend’s profile pictures that have already signed up for your site in addition to a login button.

We cannot forget the FB Social Bar. This nifty toolbar can be added to the bottom of your site. The Social Bar includes a like button, friends who like the site, as well as Facebook chat.  I expect to see chat addition groups pop up across the web.

What does this mean for consumers on sites in the FB ecosystem?

Tonight when I visited Pandora, using FB’s new open graph protocol, I was able to see that it picked up my FB music interests and recommended Bebel Gilberto’s latest and recommended that I create a Pandora station because of it.   Now that what I call personalization.

 

The new FB platform has jump-started the semantic web so that a users experience is incredibly personal and social with easy and simplicity.  

If you have not had a chance to check out this video of the f8 conference key note address, I highly recommend it for anyone who wants to connect their brands to consumers in a relevant way. 

f8conference on livestream.com. Broadcast Live Free

Sources 

• Facebook for Websites
• Hacking The Graph: Live From Facebook’s f8 Conference

ON: Nike's Grid

It starts with 40 postcodes across London each with a ‘Grid’ phone box. Participants play for their postcodes by running between boxes, dialing in at each location code and score points that earn badges (for speed, endurance and stamina).  This is experience planning at it's best.

ON: The "Above The Fold" Design Myth

An artist's job is to rethink the boundaries of their medium.  Whether it's a canvas or a web browser, our job is to improve its value and use.  Since 1994 web designers, digital gurus and usability pros have debated the topic of designing "above the fold".  The term "above the fold" is a print term that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.  In the early days this print term was adapted and used in web development to refer the portions of a web page that can be visible without scrolling.  When I started designing web pages most users were unfamiliar with the concept of scrolling.  It just wasn't a natural thing for them to do . As a result,  I would design web pages so that all content would be “above the fold”.   When I was designing e-commerce sites on   AOL, page-level vertical scrolling was not permitted. As AOL moved away from their proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer and wider pages.  That was 15 years ago!  A lot has changed.

That Was Then. This Is Now.
According to ClickTale's scrolling research, Today, 91% of the page-views had a scroll-bar. 76% of the page-views with a scroll-bar, were scrolled to some extent. 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.  As screen resolutions vary greatly, HTML design has improved and browsers have become common place in a users life the time has come for the term and the practice to die! 

The "fold" simply does not exist.  There is significant research, design methods and technology  that renders the "fold" theory useless.  Research like ClickTale's Scrolling Research Report V2.0 - Part 1 and Part 2 completely unravels the "Above the fold" myth.  The most compelling test they ran was proving ‘Absolute Scrolling Reach’.

"This graph below shows us how much time visitors paid attention to each section of different-sized web pages as they scrolled through them. ‘Absolute Scrolling Reach’ measures the distance from the page top (in pixels) that a visitor scrolls down the page."

Let's think about it for a moment.  If you subscribe The “fold” theory, you are assuming everyone uses the same size monitor, monitor resolution and Web browser.  More over, you must also assume we all have the same number of toolbars. Obviously there are too many factors involved to identify a consistent fold location.  The "fold" is just silly!  scrolling has become a natural practice in surfing the web. Scrolling is also associated with most Web 2.0 design.  Big, clear text and spacious content implies longer web pages.

Web 2.0 Design
Today, I design my pages to use liquid layouts that stretch to the current user's window size in order to avoid frozen layouts that are always the same size. Great consumer centric design does not give equal weight to all the content in a site. It puts its most valuable messages at the top and throughout the design.  If you present compelling content and use proper design queues and tools then your users will find and grab your content.  Here are a few examples of mainstream sites that are designed "below the fold" for millions of uses everyday.

Facebook

The New York Times

YouTube

Where was the fold? 
Did you scroll?  of course you did.   (you are scrolling now)

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s clear that the rest of the page can be just as valuable to contextual advertising.

Look at the 2010 Ford Mustang site. 

They get it. I scrolled up and down, clicked and shared.

If its good they will scroll.
It is imperative that we begin to educate our clients and account teams that this is no longer a best practice. It really never was. Open up your design and stop cramming stuff above a certain pixel point. You’re not helping anyone. If your content is compelling enough your users will read it to the end.

Educate your peers and clients with these recommendations in mind:

1. Your content is king. If your page contains lots of engaging content, users will scroll to the bottom to view it.
2. Keep important new content that helps users understand the main purpose of your site above the 600 pixel mark.
3. Design universal navigation and business information that can be modular.  It should allow users to manipulate and control its placement. It should also appear above the 600 pixel mark.
4. Minimize your written text and maximize images and video, the web is now a converged 3D medium. Users would rather you engage them instead of asking them to read.  Remember they do scan pages.
5. Use design cues like icons, cut-off images and text blocks to help users expect additional content below the screen.
6. Try to keep browser-less applications within a given screen space and make sure the inputs and outputs of the application appear within that space.

Join me, lets help dispel the urban design myth by sharing this data.

Research used for this post:

• ClickTale's HeatMaps
  
• ClickTale's Scrolling Research Report V2.0 - Part 1
• Jared Spool UIE Brain Sparks:Utilizing the Cut-off Look to Encourage Users To Scroll
• Jakob Nielsen’s Alertbox: Changes in Web Usability Since 1994

ON: An HTML 5 Cheat Sheet

This HTML 5 Cheat sheet has helped me design some of my latest creations.   This sheet is was designed by Woork.

This simple visual grid gives a fantastic list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

ON: A Fresh Approach To Social Design

Social design ain't your daddy's web design.  It differs in many ways from the old school study of pure omnibus interactions.  Social Design begins with sociological trends of tribes (your audience), then takes into account their behavior and more importantly their passions.  Most successful social brands are finding direct responses when they facilitate a tribal passion through pretty basic functionality. 

Think you can do it without their passion?  Think again. 
If you are not ready to be passionate about what a tribe is passionate about, this is a waste of time and money for your brand.  How do you expect to have a meaningful conversation within a tribe if you have nothing in common with them? When you listen to your audience and unlock their passions then and only then can you have a place in their conversations. (This is where I typically do the message is the medium dance.  I promise you it's a whole dance.)

As I was working on a conversation starter for one of our clients, I stumbled upon this fantastic presentation.  This is one of the most tribal-centric presentations I have seen on developing social software.  Each part focuses on a specific problem in developing social media platforms.  This sociological and behavioral approach takes on the major hurdles in a usage life cycle, which are the stages people go through as they use and adopt software over time.

Designing For Social Traction

View more documents from Joshua Porter.

This methodology can be used in many aspects of the things we create as digital agencies. The tribal insights dispel many digital design myths. Designing For Social Traction  makes the design challenge clear for anyone creating in the social space.

ON: LG's Smart Light Monitor Experience

LG has launched a fantastic promotional site.  The new Smart Light monitor site offers you a front seat to in depth discovery while taking on a worthy cause.  LG's technology works like an owls sight.   Its predictive features are integrated into this well designed site.

When you play with the site's functionality and navigation you realize that the site holds the promise of the product incredibly natural ways.

The curios clue finder ties in a social media streams by taking in feeds from Flickr photo pools and YouTube content that allow the user to experience detailed discoveries. This functionality is perfectly designed as it does not attempt to "build community", which is a mistake that many brands make.  

The design aggregates existing content and uses it to entertain and inform the user.  In my opinion, this the way we should be looking at utilizing social media platforms and their functionality.

When you visit the showroom the site offers one of time most beautifully designed demonstrations of technology that I have seen in a long time.  The Cinema mode is captivating.  It made me want to trade in  my Apple display for the Smart Light monitor.

What would a 2.0 site be with out a widget for bloggers? Now most of you know that I think that in the past year widgets have just been abused. A widget is there to facilitate the spread a good idea - it is not the idea. This one gives me a real reason for displaying it on my blog.  If I can save one animal it was worth posting it. 

The only criticisms I have of the site is that the writing could have been stronger by explaining the humanitarian reason for deeper engagement, the site and content is not coming up in search engines as well as it could have and in the widget section the drop down menu used to select your country is a bit over designed and hard to get to your country easily.

I encourage you to discover this site at :http://www.smamot.com/en/

ON: Toshiba's Scratch Pad

Toshiba has launched a new website to encourage the exploration of Toshiba’s vast product offerings. Users navigate the ‘What Next’ website by scribbling zig zags, lines, swirls and infinity signs that manipulate the small creatures on the site.

Visit www.leading-innovation.com to play

ON: The Smartest Car In The Class

Its time to celebrate the 10th Anniversary of the Smart Car!  What is smarter than a partnership with Hermes?   The haute Paris design house has created 10 fabulously crafted models.

Each car is about $48,560.  The interior offers Hermes signature shades of pinks, oranges, and blues.  For those of us in the Beta-Class who want style, smarts and a car worthy of its own exhibition, this seems like a great buy!