ON: Digital+Marketing

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: Gustavo's Arrival to the LA Philharmonic

The LA Philharmonic launched a spectacular micro site celebrating the arrival of Music Director Gustavo Dudamel. The attention to social details is quite amazing.

What I love about the site located at http://www.laphil.com/gustavo, is that it features so much share-able content. My favorite example is this video of Members of the Los Angeles Philharmonic, celebrities, and LA residents welcome Gustavo Dudamel to Los Angeles in a video shot at Walt Disney Concert Hall, Santa Monica beach, the Griffith Observatory and other L.A. landmarks.

Check out the site at http://www.laphil.com/gustavo

ON: Coke's Facial Profiler

Coke is attempting an interesting social experiment using Facebook Connect.  Are there other's out there that look just like you?  Could their be an impostor JP-B?  

The only way to know is for you to connect with the new Coke Facial Profiler site which seems to be building a repository of social images that will eventually find your twin.

Check it out this cool use of FB Connect at http://www.cocacolazero.com/index.jsp#/facialprofiler/

ON: My Flash Forward

Want to see what your Flash Forward looks like???  Go to http://www.flashforwardexperience.com and click on the Facebook connect button. 

The site uses your public Facebook information and friend data to give you a flash into my future.  The text to voice integration got my last name right and spoke to me. (it sounded better than most real people!) 

This is a lovely way to use people's public info to personalize a web experience.

It would have been interesting for them to have included a predictive algorithm to "predict" who you will be friends with in the future.  They could do this by looking at your friends and looking at common friend characteristics.

Get your flash forward at http://www.flashforwardexperience.com

ON: Designing Obama

The Obama brand has inspired many. A real test of a brand, is whether it inspires innovation in artistry. There is no doubt that Obama's Design Director, Scott Thomas, used art and design to bring America together while commenting on their grass roots messages in a visual way.

Today you can revisit the art of the Obama campaign in a 360-page book that reveals the story behind the design of the campaign. The book also features many of the unofficial grassroots art work created in support of Obama.

My favorite part of this book launch is that Thomas is funding the production of the book using Kickstarter, an online funding platform that supports creative endeavors.

Designing Obama from mas / menos on Vimeo.

Get your copy today at http://www.designing-obama.com

ON: Blogging The Now

I recently heard a wise man say something absurd.  "Blogging is dead!"  

WRONG!

We are the new media - and blogging allows us to do it now.

Blogging has just evolved. The vast majority of bloggers are thought leaders who have pushed the medium forward.  These influencers have moved the bar and migrated to smarter platforms that allow the broadcast of their thought leadership. 

One of new my favorites social/blogging apps happens to be posterous.com.  Easy, connected and portable.  Here is a fantastic video that highlights why real bloggers have migrated and adopted this new service.

Visit the ñ stream at http://joannapenabickley.posterous.com/

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: Great Design = Business Solutions

by: Jongho Nho via coroflot