Don’t Touch That Dial — Lessons Web Designers Can Learn From Television Broadcasts

Advertisement

Each year, the battle for television ratings begins. Networks unveil their latest creations, jockeying for position in the ratings race, doing everything and anything within their means to gain and keep as many viewers as possible. Months, sometimes years of planning, preparation, marketing, shooting, and editing are laid bare on the “tube” for all to see. Some shows fail miserably and are cancelled after a few months. Others thrive, and become the next big thing. They all hope to become the next American Idol.

Television broadcasts continue to have a major impact on society — both in positive and negative ways. Whether you have a long-standing love affair with your television set, or you just use it to kill the monotony when you’re taking a break from the internet, I’m sure you’ll agree that, due to the overwhelming impact TV has had on modern society (and on television producers’ pocketbooks), techniques and principles unique to television broadcast production and marketing are worth examining.

Let’s see if there are lessons to be learned from the television broadcasting medium that can be applied to web development, design, and related fields.

Google on an Television

Pre-Production

Before a television show is actually produced (that is, filmed and edited), a large amount of pre-production work is done to ensure that the entire process will run smoothly and achieve a desired result. Pre-production work for television might include storyboarding, script writing, budget planning, preparing special effects, casting guest stars, arranging for stunts, as well as creating sets, props, and costumes. Only after such preparation can a polished and interesting product be realized.

Storyboard Sketch

Don’t Start Shooting Before You Prepare the Script

How can you apply pre-production methods in web development and design? If you’re designing a site from scratch, you might be tempted to jump into Photoshop without giving any forethought to the design. Have you researched the competition? Have you sketched some ideas on paper? Have you identified the target audience? Have you thought beforehand about particular design principles that would work in the context of the product or service being offered? Preparing answers to such questions can significantly impact the direction the design will ultimately take and the success it achieves.

What if the project is a simple blog post or article? Have you thoroughly researched the topic? Have you ensured that the same topic has not been covered ad nauseam throughout the blogosphere? Have you chosen your main points? In most cases, to create a solid, polished piece, many of those tasks should be completed before opening up your word processor.

Whatever project you’re working on, following the example of television broadcasts by integrating pre-production into your work strategy will likely have a large impact on your project’s final result.

On-Screen Branding

Over the years, television producers have recognized the importance of branding and have taken advantage of opportunities to promote their brand with digital on-screen graphics1, while being careful that these don’t interfere with the viewing experience.

The methods of use for on-screen graphics vary from country to country and weren’t used as often prior to the late 1990s. Take a look at the two screen captures below, both from the popular American hospital drama ER2.

This 1994 episode of ER has no on-screen branding

Screenshot from 1994 episode of ER

In 1994, on-screen branding of logos and other graphics was virtually non-existent. Nowadays, it’s virtually impossible to watch a television station without some kind of on-screen graphical overlay. The screen capture below shows the semi-transparent NBC3 logo in the bottom-right corner. In North America, this is the customary place for an on-screen logo, whereas in the UK a station logo is commonly found in the top left.

This 2005 episode of ER includes on-screen branding by means of a graphic logo

Screenshot from 2005 episode of ER

Television stations have used this technique to increase brand recognition, assert ownership of a video signal, and in some cases attempt to prevent or discourage piracy. Although the use of such technology was not fully utilized until recent years, its benefits were eventually recognized. Networks and television stations have repeatedly tried to innovate in this area in a way that does not greatly affect the viewing experience.

Non-Obtrusive Branding That Makes an Impression

Web developers have many opportunities to establish their brand using elegant, non-obtrusive methods. This might be by means of custom bullets on an unordered list, the subtle color and graphics on a PDF document, or even something as simple as a customized <blockquote> that harmonizes visually with the overall website theme.

Chris Coyier of CSS-Tricks has recently redesigned his site, however, in the previous version of his design, he beautifully accomplished a type of “on-screen branding” by means of a simple enlarged asterisk character that found its way into every nook and cranny of his site — in a non-obtrusive manner. (Although his new design is much nicer overall, the asterisk is not as prevalent.)

Chris Coyier’s Pesky Asterisk4

Chris Coyier's Pesky Asterisk5

The branding on Soh Tanaka’s website can’t be missed. He beautifully incorporates various subtly-rounded blue elements that give his site character, doing so throughout the site in a non-obtrusive manner.

Soh Tanaka’s Blue Branding6

Soh Tanaka's Blue Branding7

Similarly, Nettuts+ uses a plus symbol that is a primary part of that site’s branding.

The “Plus” Symbol on Nettuts+8

Nettuts+9

Maximizing Screen Real Estate

With technological advances, television broadcasters have realized the advertising potential of screen space during popular programming. Besides the on-screen logo branding mentioned in the previous section, TV producers have for years regularly displayed on-screen advertisements for upcoming shows, usually at the bottom of the viewing area.

This technique in television broadcasting has been widely used during sporting events and especially on 24-hour sports channels that display scores and news updates in “ticker” format. But similar to the logo branding trend, this was not used regularly until the late 1990s and beyond.

Today, every major live sporting event will display the current score, game time, or other informational graphics at the top of the screen. Hockey and basketball broadcasts will commonly display this information even during action, while baseball will usually remove the graphics during action, except when the pitcher-batter view is being shown.

Take a look at the two screen captures below from Major League Baseball’s World Series, depicting the final moments of the 1993 and 2009 World Series, respectively.

Screenshot from the 1993 World Series with no informational graphics

Screenshot from the 1993 World Series

Screenshot from the 2009 World Series with informational graphics

Screenshot from the 2009 World Series

The 2009 World Series image shows the score of the game, the current inning, the number of outs, the current batter’s count, a network logo, and the current score in the series — displayed while action is in progress, without obstructing the view of the game. By contrast, the screenshot from the 1993 World Series has no on-screen graphics during the action.

Television broadcasts have utilized space on the screen that they believe can be sacrificed. During a televised sporting event, much of the broadcast consists of trivial in-between-the-action moments, so the use of informational graphics has proved to be extremely useful and is rarely obtrusive to the viewing experience. In fact, in today’s market, sports fans would be appalled to watch a game for more than two minutes without an on-screen graphical update of the score or current game time.

Don’t Make Them Hunt for Common Functions

Web site users, in certain contexts, will also expect a company’s site to provide information in certain areas. The top right corner of a website’s layout is traditionally reserved for shopping cart functions, search forms, and login/register buttons. The header often holds a horizontal navigation bar that begins and ends with “Home” and “Contact”, respectively. The footer will customarily hold contact info, copyright info, and terms/policy links. On blogs, footers have expanded greatly and might include bio info, twitter feeds, social media links, and more.

Of course, none of these are to be considered hard-and-fast rules, but under certain circumstances (sometimes on information-heavy layouts), users expect certain things. Taking advantage of space in this manner will follow the example of TV industry professionals who have obviously seen great value in displaying all sorts of informative and brand-oriented graphics in a convenient manner in their broadcasts.

Closed Captioning for the Hearing Impaired

Closed Captioning, or “subtitles” (as it’s often called outside of North America) is a system that displays a text transcription of the audio portion of a television broadcast. This system, shown in the photo below, is available on many television sets, DVDs, and even video games. For prerecorded television broadcasts, transcriptions are prepared beforehand, whereas live broadcasts are transcribed by a human operator in real time.

Recognizing the need to provide hearing impaired viewers with a comfortable experience, for more than 30 years television broadcasts have included closed captioning as an option in their programming.

Closed Captioning Example on Conan O'Brien10
Flickr photo by trainman7411

Not Just Screen Readers

Web accessibility is the obvious lesson learned from this television broadcast standard. Making content accessible to a wide range of users, however, is not limited to just focusing on visually impaired users.

Some users may be voluntarily browsing with certain functionality disabled. This might include disabling scripting, images, or animations. In some rare instances, users may be limited to older browsers because of company restrictions on software updates. Content can be made accessible to virtually all users by coding clean semantic markup, implementing progressive enhancement, and performing regular testing on IE6 as well as browsers designed for visually impaired users.

Segues That Keep Viewers Locked In

Over the years, television producers have realized the power of the “clicker”. When a TV ad appears, many viewers will reach for the remote control and see if there isn’t something better to watch. This is inevitably going to occur, and is worsened when you consider that television now competes with the internet for viewing time. To combat the channel-surfing habit, TV stations will often provide virtually seamless segues from one show to the next, without commercial interruption.

In years past, it was customary that a TV program would end about five minutes before the next scheduled show. Then, after two or three minutes of ads, the closing theme and credits would play, sometimes followed by more ads, finally leading into the next show.

Television producers have evidently realized that the old method leaves a window of opportunity for “channel surfers” to escape. Nowadays, it’s common for the final scene of a TV program to run simultaneously with the closing credits, as shown in the screen capture below from the popular American series The Office12.

Screenshot from The Office, rolling credits during the final scene

Screenshot from Season 6 Episode 11 of The Office

This technique virtually ensures that the viewer will see the introduction of the program that immediately follows. Likewise, the subsequent program will not start with opening credits and theme song, but instead will begin “cold” with the opening scene — a perfect segue to keep the viewer locked in.

There’s No Such Thing as “The End”

This principle can be applied when planning and storyboarding call-to-action processes in web architecture. A simple thank you page after a form submission can be transformed into a smooth gateway to related parts of the website. The completion of an online purchase can close with a “related products” screen. The end of a blog entry can include related links. The expiration of a software trial can promote the purchase of the full version. With the principle of smooth segues in mind, the possibilities are endless.

Web mail providers like Yahoo! Mail and Hotmail have recognized the importance of such a segue — indicated by the fact that, upon logout, the user is quickly redirected to the Yahoo! or MSN home page where there is always plenty to do.

Nielsen Ratings

The Nielsen ratings13 audience measurement system began with brand advertising and radio market analyses in the 1920s and 1930s, and later moved to television. It eventually became the standard for audience measurement information for television broadcasts around the world.

Nielsen Ratings on Broadcast TV in the U.S.14

Nielsen Ratings on Broadcast TV in the U.S.15

Television professionals that don’t pay close attention to trends and patterns in the weekly Nielsen ratings system, will likely not be able to compete with other regularly scheduled programs. Although the Nielsen system has been criticized16, it is generally a trusted source of audience measurement and continues to be the standard for TV viewing statistics.

The Jakob Nielsen Ratings

Today, web professionals have access to site analytics, browser- and platform-use statistics, usability trends17, A/B testing potential, job skills trends, and other technology-related statistics that could impact how they design, how much time they spend on browser and usability testing, how they plan site architecture, and even what projects they’ll build next. Some of the software and online applications used in obtaining the aforementioned data have become standards that, similar to the Nielsen ratings system, cannot be overlooked.

Regularly Scheduled Programming

In the TV world, in most cases, viewers know exactly when to expect a new episode of their favourite program, and this has served to solidify viewership for many broadcasts. Certain timeslots have come to be known as “prime time” because they fit into the recreational habits of most families — prior to bedtime and shortly after dinner.

TV Guide18

TV Guide19

It would be counter-productive if television networks decided to air new episodes, at random, whenever they fancied, without a regular schedule. It would be unlikely in such circumstances that a solid user-base would be established.

Maybe We’ll Publish Something, or Maybe We Won’t

Is it any wonder that A List Apart20 has established one of the most loyal readerships in the web design writing industry? They publish exactly four high-quality articles per month, two at a time, on two separate Tuesdays — now that’s regularly scheduled programming that readers can depend on!

A List Apart21

Of course, there’s no need for other bloggers and authors to follow that exact pattern, but it has become generally understood that mid-week releases for articles tend to get higher traffic. This mid-week “time slot” has become recognized as “prime time” in the blogging world.

It should be noted, however, that this method may not work for every type of content. Also, if you decide to regularly schedule a specific kind of blog post on one day of the week or month, you’ll be restricting site content for that day, without the flexibility to change. If you’re prepared for such a commitment, then it may be worth a try. Also, if you ever decide to stop publishing a regularly scheduled topic, you may disappoint readers who subscribed because of that particular type of content. So, while the principle of regularly scheduled programming may have some benefits, it could be a risky endeavor if you’re not prepared for the commitment and it could create potential for reader backlash.

Post-Production

Post-production on television broadcasts occurs after all shooting and recording of the footage has completed, and may include video editing, adding a soundtrack, and integrating computer-generated visual effects. If any of the post-production work is overlooked or neglected, the final product will be affected.

Post-Production22
Flickr photo by roomman23

Refine Your Product

Developers, designers, and site architects can follow this example by polishing, fine tuning, and ensuring that the finished product (whether it’s a large-scale application, a brochure site, or a simple blog post) meets the standards and requirements that were set during the planning and wireframing stages.

Spell checking, grammar checking, code quality assurance, usability testing, speed optimization, and dozens more website maintenance24 tasks may fall under the web development equivalent of “post-production” — and often such tasks go beyond even the launch of the project.

Conclusion

If a medium has existed for a significant amount of time, numerous practices associated with marketing in that medium will become solidly established and refined.

The web is still relatively young, and as designers and developers we have the opportunity to shape and create methods of marketing and production that will define this medium for years to come. The television industry has certainly established methods that can influence us to create a better and more intuitive user experience.

Related Resources

Footnotes

  1. 1 http://en.wikipedia.org/wiki/Digital_on-screen_graphic
  2. 2 http://www.nbc.com/ER/
  3. 3 http://www.nbc.com
  4. 4 http://css-tricks.com/
  5. 5 http://css-tricks.com/
  6. 6 http://www.sohtanaka.com/
  7. 7 http://www.sohtanaka.com/
  8. 8 http://net.tutsplus.com/
  9. 9 http://net.tutsplus.com/
  10. 10 http://www.flickr.com/photos/trainman/212243393/
  11. 11 http://www.flickr.com/photos/trainman/212243393/
  12. 12 http://www.nbc.com/The_Office/
  13. 13 http://www.nielsen.com/
  14. 14 http://en-us.nielsen.com/rankings/insights/rankings/television
  15. 15 http://en-us.nielsen.com/rankings/insights/rankings/television
  16. 16 http://en.wikipedia.org/wiki/Nielsen_ratings#Criticism_of_ratings_systems
  17. 17 http://www.useit.com/
  18. 18 http://www.tvguide.com/
  19. 19 http://www.tvguide.com/
  20. 20 http://www.alistapart.com/
  21. 21 http://www.alistapart.com/
  22. 22 http://www.flickr.com/photos/roomman/417965763/
  23. 23 http://www.flickr.com/photos/roomman/417965763/
  24. 24 http://www.smashingmagazine.com/2009/11/04/website-maintenance-tips-for-front-end-developers/
  25. 25 http://www.useit.com/alertbox/media-velocity.html
  26. 26 http://www.smashingmagazine.com/2009/08/13/10-unique-tv-series-episodes-that-inspire-creativity/

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thx for the article – storyboarding is often the 1st step overlooked. It IS so tempting to jump into Photoshop.

    • 2

      Interesting article that I will apply to my work. Funny though mention was made to testing in IE6. You may want to look at this page in IE6. :)

  2. 3

    Fantastic article! It’s definitely going to help me prepare for one of my new projects.

    I find myself diving directly into photoshop most of the time due to time restraint.

  3. 4

    Interesting read especially the comparisons from the “then & now” TV programs.

    The most important key I found was about planning. From experience one should always pre-plan a design’s layout for instance. Even though you are bound to change it whilst you are designing, it eases the mind and removes those moments where you are just like “um, yeah, um, that could go there, no here, no there,…1 hour later -> delete layer/group”. Senseless pondering is time-wasting. If you can’t see a clear next step then that is the indication for a break! :)

    AR

  4. 5

    Is it me, or is Smashing really scraping the bottom of the barrel the past week or so?

    • 6

      Smashing Editorial

      February 3, 2010 6:35 am

      David, what exactly do you mean?

      • 7

        I disagree that this was a “bottom of the barrel” post. It is nice to read some original thought and analysis rather than the typical roundup of firefox add-ons, photoshop tutorial, or vector package etc. that is so common and unoriginal. I respect your opinion though.

      • 8

        I think he means the interesting title image. It kind of lowers the expectation of quality. Other than that, though, I think it’s a good article.

      • 9

        He means that a Smashing article had gone almost five posts without someone whining about not liking it for no good reason, and he just couldn’t stand the idea. Isn’t that what makes Smashing what it is? :)

    • 10

      I agree with Josh and strongly disagree with David. This is in NO way a bottom of the barrel post. You can get a plethora of articles on CSS, jQuery techniques, etc but you hardly see any thought provoking articles like these.

    • 11

      I actually found this post really helpful. I’m just starting to design my portfolio and picked up a few things I probably wouldn’t have thought of until well down the track.

  5. 12

    …exactly the type of trans/interdisciplinary thinking web design needs.

  6. 13

    Very interesting, something I’ve never considered as a designer – utilising the graphics on TV and drawing inspiration from them. Great post, thanks!

  7. 14

    Interesting article although hotmail and ymail redirecting is one of the things that ‘turn me off’ using the service as google does it much more subtly using the top bar.

  8. 15

    Great post with some great parallels between TV and Online World.
    I think some of the things you mentioned already are common practice, but in some areas we can definitely take a leave out of the TV Producers’ book.

  9. 16

    Interesting and definitely left a lot space for me to ponder over. Inspiration is indeed everywhere.

  10. 17

    David , you’re a loser. Great article, I quite enjoyed the read.

  11. 18

    I think this kind of thought make the web design go forward, getting ideas from others areas needs a lot of thinking to make the conexion, really interesting reading!

  12. 19

    Great Insight into the Broadcast industries techniques and how it applies to web development. Especially the segment of Ending of Shows and the transition into the next show. Thank you.

  13. 20

    Haha they misspelled Chris Coyier’s name as “Christ Coyier”

    • 21

      Christ,

      Woops, I mean Chris… Thanks for noticing that, that was pretty funny. Maybe I was sending a subliminal message regarding my true feelings about Chris Coyier, the CSS Messiah. :)

  14. 22

    As I was reading the post, I thought “This author must be Canadian…”. ;) GO JAYS!

    Anyway – interesting look at branding for sure. Nice post.

  15. 24

    Great post! You missed one observation in the “Maximizing Screen Real Estate” header. If you take a good look at the background of both of the telecasts, you can see today’s baseball uses advertisement behind the plate to provide more market to the viewer. It is in part subliminal, but is looked at every time the ball is thrown across the plate.

    • 25

      When baseball came up, I thought you were going to talk about the digitally added ads behind the batter on the wall as well.

  16. 26

    What you guys don’t understand is that Smashing Magazine is much more of a theoretical/idealistic magazine than a technical, straightforward one. They’re a true inspiration and thought-provoking magazine, they don’t serve everything on a silver platter in front of you.

    Thanks for these articles and keep them coming. It’s what sets you apart from the rest of the web-design blog/tutorial network.

  17. 27

    Thanks for the great article. I find it difficult to consider Nielsen a credible yardstick, the last survey of read into the trends of our local under 18 web users had a sample group of 5. Their own website proves they care little about usability.

  18. 28

    Does this mean that I can write off some time I spend watching TV as R&D? I will have to see if I can get that one past my accountant. Good article. It is always a good idea to look outside your monitor for inspiration.

    Cheers

    K

  19. 29

    This is very Interesting stuff.. Love you guys for this deep approach to the content.

  20. 30

    Phil @ NetInspired Web Design

    February 4, 2010 2:28 am

    Segues That Keep Viewers Locked In – This is the most annoying thing ever about watching TV in America. In the UK, a 30 minute program contains one ad break; in the middle. Then when the show ends completely, we have another ad break. This is how it’s been forever and its ideal. Whenever I go to America, it’s so darned confusing watching your shows where you have an ad break right before the end and nothing between shows. And if the next show happens to be the next episode of the same show, you’ve no idea where it begins!

    Anyway, rant over; great article as usual :-)

  21. 31

    That’s interesting thanks for share it.
    That’s great information i like this blog and this blog is really helpful for me.

  22. 32

    Thank u for adding up to our knowledge. It will help. Looking forward to more such inspirational ideas.

  23. 33

    Something I find myself needed to remember is that on the web, content is king, and people want only the information they want and they want it now. Once you’ve satisfied they’re needs you can give them something else to consider. Content is king.

    • 34

      Christiaan W. Lustig

      February 4, 2010 7:01 am

      Hear, hear!

      But good planning, concepting, design and production may (should?) help to better highlight that content.

  24. 35

    David L is a n00b :)

  25. 36

    Interesting article, but what if people are sick to death of the utter contempt that TV broadcasters have for their audience?

    In the UK the “dogs” are not broadcast over the commercial breaks – presumably the advertisers have the clout the object to the branding, but we the public have to put up with them – along with banners announcing the next programme, and continuity announcements being played over the credits and all too often, the closing dialog of the programs.

    Personally, I take the 20 minutes per hour of advertising that we get on satellite TV as an ideal opportunity to leave the room – and make a cup of coffee or have a pee. And at the end of a programme, I don’t just sit there like a vegetable, I look for something worth watching. And amongst the 600 or so channels available, it is still frequently difficult to find anything that is worth watching. So then I put on a DVD and skip the adverts on there as well.

    If the programme is worth watching, it will get the viewers. If it’s dross, it shouldn’t.

    Unfortunately my argument falls down when you get dross like “Big Brother” – but I believe that they are pulling the plug on that now. Perhaps we should build dross websites that cater for the Big Brother audience – all hype and no content. But I think I may stick to my principles, and leave that sort of thing to others.

    • 37

      Some good points, Steve, thanks. I was actually considering including some of the stuff you mentioned as part of a “bad lessons” section. Instead, I thought I might do another one in the future in a similar way but looking at the negative (often obtrusive) aspects of TV marketing and broadcasting.

  26. 38

    Great post! Jolly good content homies!

  27. 39

    I love the correlation you made between motion graphics (used on TV) and what static graphic designers (print and web graphics) can learn from those motion graphics on TV.
    I think this article was really well written; however, I think a point you missed and should have made is that Flash designers can learn even more from watching graphics on TV. In fact you can now make TV quailty flash graphics using the Adobe After Effects program (which is used to make graphics for TV, mostly).

    More money in TV folks, and it’s not as hard of an indursty to break into as you think.
    Look into motion graphics more…they’re easy to do and it pays well!

    swapitencryptit.com

  28. 40

    Great Article!

  29. 41

    i think it will be great. e-learning is getting popular on web. it is easy to understand and funny =)

  30. 42

    The branding on Soh Tanaka’s website can’t be missed. He beautifully incorporates various subtly-rounded blue elements that give his site character, doing so throughout the site in a non-obtrusive manner.

    There you go… Sohtanaka’s website layout is completely changed. Not a dash of blue anywhere :-) It’s grey & green now

  31. 43

    Diana Sánchez Peiró

    February 20, 2011 2:19 pm

    TV is missing field against internet, that’s why they have to come up with clever ways for catching audience… In my opinion, there’re very few things that TV can teach to Internet…

    Very interesting article. I’m doing my thesis dissertation about how is TV catching audience these days.

↑ Back to top