Steal This Film II

Remix That Video

Before the 2007 MTV Video Music Awards aired on cable television, the show’s producers announced that the network would broadcast the ceremony only once in its traditional linear form. Any future TV broadcasts of the VMAs would be ‘remixed’ versions of the show, producers said, as created by viewers and/or MTV.

The change in how MTV produced and distributed its annual awards spectacle this year serves as a key example of how traditional broadcast video is being influenced by the popularity and ‘personalization’ aspects of Internet distributed video.

On MTV’s website, viewers aren’t forced to watch the awards show in its original 2-hour broadcast TV format. MTV repurposed the content for online, dividing up the show into separate, 2- to 4-minute video segments. The short video clips can be accessed by viewers in any order and at any time, as well as multiple times.

Now, the Internet-distributed video segments don’t look nearly as good as they did originally on the TV broadcast, especially if you saw it on a big screen plasma high definition television. Online, the videos display in a relatively small window (400 x 300 pixels) embedded on a HTML page, accessed by an Internet browser.

But by putting all of the scenes from the Video Music Awards online, including clips that can only be seen on the website, MTV significantly expanded its potential viewing audience and handed users some control over how and when they can view the content.

TV versus Internet: Production Values

Audiences consume Internet-distributed streaming video differently than traditional broadcast TV. Watching online video tends to be a private viewing experience, while TV viewing can be communal.

“My relationship with television is different from my relationship with the Internet. While I’ll catch an occasional news clip online, I don’t cozy up for extended viewing in front of my laptop,” wrote Jennifer Woodard Maderazo, a media blogger at PBS.org, in August 2007. “Lazing on the couch with a remote control is much more enjoyable than hunching over a desk and maneuvering a mouse to make things happen. Video clips stop, connections time out, sound turns choppy and I end up turning off the computer and turning back to my trusty television, which lets me lean back comfortably and effortlessly rather than forward.”

Traditional TV has its advantages, especially with high definition televisions (HDTV) becoming standard. Watching HDTV can be an amazing experience – lifelike, detailed pictures with stereo surround sound. Production values are high in this medium, since HDTV viewers expect perfect quality video, incorporating more types of shots and quicker edits, finely polished. They also expect it to be seamless – not 2 to 4 minute clips that stop and start – and viewable on a huge screen, ideal for collective viewing.

But traditional broadcast video as a communication form is limited. It is one-sided and passive. It doesn’t give the audience any choices. Internet-distributed video can be digitized to take advantage of the strengths of computing, such as searching and linking, to enhance understanding and usability of the material. Online video can also be wrapped with user-controlled applications so the audience can be active, communicate and share content with each other. This participation and personalization may make for a better overall experience, despite less-than-perfect video quality.

Video that will be accessed in a tiny window on a computer monitor or mobile device needs to be produced with those parameters in mind, so the picture quality, sound quality and file size are optimized. Lynch & Horton’s Web Style Guide suggests the following guidelines to tailor video for Internet distribution:

• Shoot close-ups. Wide shots have too much detail to make sense at low resolution.

• Shoot against a simple monochromatic background whenever possible. This will make small video images easier to understand and will increase the efficiency of compression

• Avoid zooming and panning. These can make low frame-rate movies confusing to view and interpret and can cause them to compress poorly

• Use a tripod to minimize camera movement. A camera locked in one position will minimize the differences between frames and greatly improve video compression.

• When editing your video, don’t use elaborate transitional effects offered by video editing software, such as dissolves or elaborate wipes, because they will not compress efficiently and will not play as smoothly on the Web.

• If you are digitizing material that was originally recorded for video or film, look for clips that contain minimal motion and lack essential but small details. Motion and detail are the most obvious shortcomings of low-resolution video.

There are also factors of compression (codecs) and formats for consider, so Internet streaming video looks good, sounds good and be accessed by the widest possible audience.
There’s also the issue of cost.

With traditional broadcast TV, new viewers tuning in don’t cost the broadcaster anything. But webcasting has a price attached. Digital media files are very large, requiring huge amounts of server space. According to Lynch & Horton’s Web Style Guide, one second of uncompressed NTSC (National Television Standards Committee) video, the international standard for television and video, requires approximately 27 megabytes of disk storage space. Producing and distributing large amounts of popular video over the Internet may require a big investment in server infrastructure.

The landscape of consumers watching video really big on a HDTV screen and really small on a iPod means that video producers have to be willing to follow MTV’s example and ‘remix’ how they work to provide the best product to audiences no matter how or when they choose to watch.

References

Creating & Delivering Podcasts & Other Downloadable Media. 2006, June 27. Akamai. Retrieved 9/12/2007 -http://www.akamai.com/cfcgi/forms/podcasting_whitepaper.html

. Lynch & Horton. 2004, March 2. Web Style Guide: 2nd Edition. Retrieved 9/12/2007 – http://www.webstyleguide.com/multimedia/strategies.html

Maderazo, Jennifer Woodard. 2007, August 10. “Is the Future of Television Online? Not Yet.” Mediashift blog | PBS.org. Retrieved on 9/12/2007- http://www.pbs.org/mediashift/2007/08/tvshiftis_the_future_of_televi.html

“MTV shakes up Video Music Awards.” 2007, September 7. Associated Press. Retrieved 9/12/2007 – http://www.msnbc.msn.com/id/20644178/

Siklos, Richard and Carter, Bill. 2006, December 18. “Old Model Versus a Speedster.” New York Times. Retrieved 9/12/2007. http://www.nytimes.com/2006/12/18/technology/18youtube.html?ex=1324098000&en=c4674e65ba242ce4&ei=5090&

Why 60-inch print newspaper stories don’t work so good online

According to Jakob Nielsen, the guru of Web usability, most people don’t read Web pages at all.

They scan them.

A recent study showed that 79 percent of Web users scan any new page for individual words and sentences. Only 16 percent read it word-for-word.

The implications? Nielsen suggests using:
- highlighted keywords
- sub-headings
- bulleted lists
- one idea per paragraph
- and half the word-count of conventional writing.

That means that printed newspaper content needs to be reformatted and optimized for online use when it appears online.

Jakob Nielsen’s Website: www.useit.com

Why people use media

Diversion: escape from routine or problems; emotional release

Personal relationships: companionship; social utility

Personal identity: self-reference; reality exploration; value reinforcement

Surveillance (forms of information seeking)

- from “McQuail’s Mass Communication Theory: 5th edition,” 2005

Structure & Style

Before you can fill a house with furniture, install rugs or paint walls, a house first needs rooms. It needs defined areas with floors and doorways and ceilings. The structure of the house must be in place before its interior can be filled with stuff, and style.

The basic principle is the same when designing a web site. Before the content of a web page can be displayed — whether it be a large heading, an ordered list or a bunch of blue hyperlinks — the web page itself must have a fundamental structure. Once the content of a web site is anchored by a good structure, distinctive style can then be applied for its presentation.

The elements of structure, presentation, and content embody the core of any web site. How these elements are treated in the construction of a web site can, at their best, render a site useful, delightful and available to all. If the three elements are programmed poorly, however, a site will be arduous to update, ineffective and arbitrarily inaccessible.

This is why organizations such as the World Wide Web Consortium (WC3) and the Web Standards Project (WaSP) advocate the use of “web standards” to create and interpret web-based content. Two of the web development guidelines are to “keep structure separate from presentation” and “keep content separate from presentation.”

Modern web technologies provide tools to implement these strategic practices – HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and XML (eXtensible Markup Language). The programming techniques allow each of the three elements – structure, presentation and content – to be coded in separate files while being collectively contained within a web site.

STRUCTURE

HTML is standard way to build the structure of a web page. Hyper Text Markup Language labels pieces of content so web browsers can identify headings, hyperlinks, lists and images. Web browsers or “user agents” can then look at the structure of the document and format it in a way that makes sense (1).
But HTML was not designed to describe the exact physical or typographical presentation of a document (1).

In the not-so-distant past, designers wanted the web to look and act like a printed document. Designers wanted WYSIWYG (what you see is what you get) and became accustomed to manipulating HTML in any way possible to will to control the visual presentation of a web page. The techniques (which I am also guilty of using), sometimes jokingly referred to by some as “HTML terrorism,” included:

Browser-specific HTML tweaks, such as the font tag, the blink tag, and the ability to change background colors (2).

Using HTML tables for page layouts and hiding table borders by coding “0” into the attribute.

Controlling layout with invisible, transparent single-pixel GIFs.

Using images to control font displays, especially for important text, such as headings and subheads.

The browsers released by Netscape and Microsoft in the mid-1990s were also poor in their support for Web standards, allowing the use of browser-specific HTML extensions to control the appearance of pages (1).

What designers failed to understand back then is that making a document look identical across browsers and platforms is next to impossible (3).

The web has particular advantages and limitations. Designers cannot control what kind of equipment visitors use to view pages or users’ browser preferences.

Web designers are beginning to understand that they don’t have to exercise absolute power over a site’s design to make the content useful, valuable or delightful.

Building web page structure in platform-independent HTML helps to assure that anyone using any web browser can view the content, noted Geoff Duncan on the website TidBITS (1). This allows a web site to reach the greatest possible audience.

Now, with the majority of Internet users accessing web pages with browsers that support CSS, designers can use HTML the way it was meant to be used: to describe the structure of a document (3). Developers should remove all references to style from the HTML of a web page and use CSS to handle the presentation.

“You can have structure without style, but you can’t have style without structure,” observed web design expert Eric Meyer (4). “Intelligent structure makes styling lots easier.”

STYLIZING THE PRESENTATION

Cascading style sheets are the standard way for web designers to format information on a web site. Positioning, sizing, margins, leading, type faces, and colors – everything geared toward style can be isolated inside a single CSS file (5).

CSS allows developers to separate style (look, appearance, colors, fonts and layout) from the page structure (1). By modifying just the CSS file, web developers can change the font on an entire site, make larger text, splash on a new color, change the position of elements or hide elements.

CSS makes it easier to carry out site-wide changes because developers have to change one CSS file rather than all individual pages.

There are other advantages, too. A site-wide style sheet helps shorten page download times for all users. The style information only has to be downloaded once, not over and over again with each page that is served up (6). Files are more accessible to a wider variety of mediums, including hand-held devices and printers, because separate CSS files can be created for each distinct display.

With CSS, documents suggest how they should be formatted, rather than demanding a particular presentation (1). So if a user prefers a larger font, or wants to see just the text of a particular page, CSS is flexible and allows users to tailor the presentation.

Sarah Horton in her 2006 book, “Access by Design” uses color as an example of why CSS is better than HTML for controlling presentation.

“Colors set in style sheets are easily customized using user style. Colors set on the page are less flexible,” Horton writes. “When colors are defined in the HTML code, users cannot selectively override color settings. They have no choice but to override all color settings and display the page using the browser-defined color settings. Colors in graphics cannot be customized. If users have difficulty with the colors in an image, they have no way to remedy the display so as to access the content. When essential elements such as headings and links are presented as images, users who need custom colors may be unable to use the site.”

However, Horton adds, when color is applied using CSS, designers have a way to define, and users to customize, color in the user interface (9).

CONTENT

None of the aforementioned structuring or presenting would happen on a website without content.

The single most important thing most Web sites can offer to their users is content that those users will find valuable (8). Information is what drives web sites. Therefore any site must begin with content.

“It is vitally important to iterate the importance of content before the designing and building phases of a web site,” observed Christopher Schmitt in his 2003 book, Designing CSS Web Pages (2). Content needs to match the design, so it needs to be considered before the structure is built.

Site developers, for example, need to determine how much structure will be needed to accommodate the content. And raw content must be marked up structurally before it can be designed. Markup can be done using HTML, as discussed previously, or it can be done using XML.

XML stands for Extensible Markup Language. It is a markup language that is designed to specifically describe data. XML is about describing information, while HTML is about the display of information (7).
XML wraps information in tags, so different kinds of software can send, receive or display the information. XML tags are not predefined like HTML. Web designers must invent their own tags, specific to the data that is being managed.

A big benefit in converting data to XML is that it reduces the complexity of the content and creates a data form that can be read by many different types of applications and exchanged between incompatible systems (7).

With people accessing information using so many different platforms, isolating content within an XML file can help assure that the data can be shared by different computers and devices.

XML can be used to isolate the content of a web page in a separate file. Once content is marked up structurally, web developers can use CSS to design and redesign the content for visual presentation. If content resides in a separate XML file, it will make adding or updating the site easy and maintain the site’s presentational consistency (5).

TRANSFORMING GRACEFULLY

So why should web developers and designers adhere to standards that call for separating structure (HTML), style (CSS) and content (XML)?

Forward compatibility is one reason. Forward compatibility is the ability to mark up content in a manner today that will allow it to display in future browsers. Web documents, like printed materials, will be able to retain their long–term durability and viability (2).

Another reason is simpler development and maintenance. With web standards, all developers will be creating sites in the same language, as opposed to a ‘Tower of Babel’ model where large amount of proprietary knowledge is needed for every site.

Designers, especially ones coming from the print world, may feel artistically boxed-in by web-centric rules that separate structure and presentation, and content and presentation. Graphic artists at my workplace, The Hartford Courant, for example, prefer to design content for the web using Adobe Flash. With Flash, these artists feel they can retain total control over the presentation of the content because Flash works in a WYSIWYG-like manner.

“[Print designers] first priorities were fonts and colors instead of content and interaction,” notes Peter-Paul Koch in a 2003 article from Digital Web Magazine (10). “The web [is] a different medium, where content and interaction are far more important than pure form.”

The design possibilities displayed at www.csszengarden.com have proven to me that wholly original and creative online presentation can be and is being accomplished with CSS files and structured HTML. The designs are artistic, all while keeping the content in a functional state, accessible by all.

Mastering CSS is a challenge for designers, as is learning Adobe Flash. But CSS seems to be more than worth the effort. Building web pages with separate elements will make web content more understandable, navigable and available, whatever technology they are using to access it – whether it is a desktop browser, voice browser, a mobile phone or a PDA. Flash can’t do that.

In the end, it is the content of a web site that must be preserved. Presentation is secondary. If a site can transform its presentation gracefully, the information contained within will remain accessible and do its job fulfilling users’ expectations.

Citations:

1. Duncan, Geoff (2000). Building Characters: A Brief History of the Web War. TidBITS.com. March.20. http://db.tidbits.com/getbits.acgi?tbart=05859

2. Schmitt, Christopher (2003.) Designing CSS Web Pages. Indianapolis: New Riders, pp. 14-15, 18-308.

3. Johansson, Roger (2006). Developing with Web Standards: Recommendations and best practices. 456 Berea Street. August 24. http://www.456bereastreet.com/lab/developing_with_web_standards/full/

4. Meyer, Eric (2003). The Incomplete Divorce. October 15. http://meyerweb.com/eric/thoughts/200310.html

5. Cohen, Michael (2004). Separation: The Web Designer’s Dilemma. A List Apart. May. 14. http://www.alistapart.com/articles/separationdilemma

6. WC3 (1999). Web Content Accessibility Guidelines 1.0. May 5. http://www.w3.org/TR/WAI-WEBCONTENT

7. González, Graciela (2001). On Database Theory and XML. Sam Houston State University website. http://www.shsu.edu/~csc_ghg/presentations/ML.ppt

8. Garrett, Jesse James (2003). The Elements of User Experience: User-Centered Design for the Web. Indianapolis: New Riders, pp. 35-36.

9. Horton, Sarah (2006). Access by Design. Indianapolis: New Riders, pp. 160-161.

10. Koch, Peter-Paul (2003). Form Follows Function. Digital Web Magazine. February 6. http://www.digital-web.com/articles/form_follows_function

3 Unconventional Designs

Here are three websites that do not follow conventional web standards.

The sites incorporate Flash-heavy designs with unusual navigation and layout to grab and hold users attention. The unconventional structure of these sites may contribute to confusion among some visitors, but may also enthrall others.

paramountvantage.com/babel – Official web site for the movie “Babel”

The website for the critically acclaimed 2006 movie “Babel” forces you to first watch a list of its award nominations and wins, including “Golden Globe Winner, Best Motion Picture Drama.” This splash intro forces users to wait and there is no button to “Skip” forward.

Once the “Babel” home page loads, it flickers with images from the movie before a large video window in the bottom half of the screen begins playing. This home page is essentially the one and only page on this site. Clickable elements to show video, photo and text from the film are loaded up in the same two visual boxes on this page.

Navigation is located within a gray horizontal bar in the middle of the page. The white outlines of little squares change color when rolled over and pop up text cues for links. The squares are filled with color after the link has been visited.

Within this navigation structure is another sort of “hidden” sub-navigation. As an example, click on the third square on the bar and get “Photo: Morocco” Users can now view a bunch of photos of Moroccan scenes from the movie in the large window, but only if users realize they need to click on one of the 10 thumbnails that have appeared at the top of the page.

The “Babel” site does not include a logo in the upper left corner, a search box, a site map or a bread crumb trail. But I think the site’s design works for its genre. This is a movie website. Its design is meant to evoke the tone of the film, as well as promote it. I found myself intrigued, and didn’t mind learning how to navigate it. It also comes equipped with a haunting audio soundtrack (and the user can control the volume).

shimano-xtr.com – Mountain biking/x-country cycling equipment

Shimano is an international manufacturer and distributor of cycling equipment and accessories. Its XTR line is designed for mountain bikers and cross-country racers, an audience of active adults, athletes and thrill-seekers.

As such, the XTR product website – www.shimano-xtr.com – is showy. Driven by a flash engine, users pick high or low bandwidth and wait for the site to load. Then a splash page with sound effects is presented. It’s like a commercial. A “skip intro” button is offered on the splash page at the top left.

The next page users are led to has six black squares on it with the words “The Product” in one of them. Click on the words “The Product” and another flash page loads, kind of slowly. Now users are led to a third page (see below), essential the XTR home page, where visitors can finally learn more about Shimano shifters, brakes, drive trains and wheels for their mountain bikes.

Roll over one of the four boxes at the bottom of this “product” page and the boxes will light up to show users they are “clickable.” The company logo for Shimano is located not on the top left of the page, as is conventional, but on the right side of the page. Click this logo and the user will be taken away from the XTR site to the main Shimano corporate site.

A conventional link that says “home” can be found at top left, and leads back to the home page of the XTR site. However, that’s probably the only convention used on this site.

Shimano-XTR’s site does not have a search box, a site map or bread crumb trails. Shimano’s main purpose for this site, it seems, is to introduce a new mountain biking product with a certain brand image and tone. I think it is kind of clunky and too slow to load. But it suffices overall.

magichat.net – Vermont-based beer company

Lastly, the website I found that caused the most confusion is the official site for the Magic Hat Beer. I can only assume that this site’s intentionally bizarre design is meant to delight, entertain and bewilder visitors. It follows hardly any of the web standards or conventions.

Magichat.net does not feature a logo in the upper left corner. The logo is in the middle, being sort of “projected on a building.”

The site’s splash page is mandatory – users have to enter their age / 21 and over to enter. There is no search box. It does not offer clear navigation, obvious hyperlinks, or bread crumb trails.
Users are challenged at every turn to find hyperlinks hidden about like Easter eggs within a highly-stylized mish-mash of art that appears on this Flash driven site. There is no site map.

The one convention offered: A “contact us” button situated at the bottom left side of the page.

The question arises of what image the Magic Hat Beer Company is trying to project to the public with this website. The site is visually arresting and artsy, for sure, but the site is also perplexing to navigate.

The Magic Hat site seems to say that this beer company is clever, hip and fun, and those who visit the web site should approach it with that same kind of attitude (or with a few beers in ‘em).

I’m not sure what visitors to this site will end up learning, but if they treat it like a game, they could have a little bit of fun.

3 That Use Conventions

Most people use the World Wide Web as a tool, a device to find, retrieve and exchange information so they can carry out the business and leisure of daily life.

The Internet’s most useful/popular web sites tend to be those that don’t force people to solve a navigational puzzle. Rather, these websites incorporate standard design elements – elements that are obvious and familiar to the average internet user.

If visitors feel like they have a “sense of mastery” over a web site, they will achieve their goals and find satisfaction with the experience. But if visitors find a web page confusing and difficult to use, many will click away from the site, feeling irritated and unfulfilled.

Here are three websites that use standard interface components in their design and navigational structure.

IMDb.com – The Internet Movie Database

IMDb.com is a highly searchable information clearinghouse targeted at movie fans, celebrity hounds and film & TV professionals. The site features a graphical logo in the upper left corner of every page. This logo serves as a standard link back to the home page from anywhere on the site.

Horizontally to the right of the main logo are nine more static global navigation “buttons” that change color when rolled over. These blue buttons are situated on every page of the site and provide links to major areas. IMDb.com does not have an introductory “flash splash” page.

IMDb users can easily spot the site search box. It is prominently displayed at the top center of the home page and all other pages of the site, and it is highlighted with yellow. Click one of the site’s text hyperlinks, and it will change color to indicate it has been visited. Links to sibling areas are uniformly positioned in the left-hand column on inside pages. The site also supplies bread crumb navigation on inside pages.

Online retailing powerhouse Amazon.com owns IMDb.com, a relationship clearly identified at the bottom of every page. A link to site “search” and “help” is available at the bottom, too. The one element IMDb is lacking is a master table of contents or “site map.” But I do not think the site suffers without it, because its search functions superbly.

Washingtonpost.com – Newspaper/Media company

Washingtonpost.com is the online home of The Washington Post, one of the largest and most read U.S. daily newspapers. The majority of the audience are people who live in the District of Columbia, Maryland and Northern Virginia, as well as people working for and/or interested in the U.S. government, the White House and Congress.

The Post’s online identity resembles that of many other newspaper websites. It has the logo/title at top left on every page which serves as a main link back to the home page. It is organized in columns, with the site search box anchored consistently under the logo.

However, global navigation does not appear down the left side of the home page. Instead, graphical links to major sections are spread horizontally across the top of the site, and include drop down boxes that popup when rolled over. Text links to major sections are listed horizontally at the bottom of every page.

Roll over a headline and its color will change from blue to red. But the headline color will not stay red to show it has been visited.
Washingtonpost.com does not feature a “flash splash” page. But you do have to register (for free) to view full text of articles.

Once you register, notice that breadcrumb navigation appears on all inside pages. It will help you determine what major section you came from.

Washingtonpost.com appears to be consistent with its design and layout. There are links at the bottom to the site map and site index. The many, many informational hyperlinks and graphics at the bottom of the home page and inside pages make it clear that the Washington Post Company owns this website and you can contact them.

LLBean.com – Outdoor apparel and gear, casual clothing

I recently used llbean.com to shop for a few new items for my daughter. The website seems to have multiple goals. First, llbean.com serves as the digital identity of the Maine-based outdoor apparel company. Second, it is a retail site for the company’s products and services. And lastly, it is a utilitarian site for existing customers to track orders or sign up for special email newsletters.

The site features the logo in the upper left corner of all pages. That logo is a link back to the llbean.com home page. A text “home” link is also situated underneath the logo.Llbean.com does not feature a splash “flash” page. The white background of the site provides a clean canvas for the dark green, light green and tan accents that surround the product pictures.

The site search box is fixed in the upper left corner, below the logo. Some of the global navigation of the site is provided horizontally at the top with green buttons that say “Shop | Explore the Outdoors | Customer Service | My Account.”

More of the site’s static navigation is positioned in a column on the left. This menu is broken down into categories and sub-categories. Two of these categories include “About LLBean” and “Need Help?” The former has links to company information, contact info and address. The latter has a “site map” link. verall, links change color (red) when rolled over, but don’t stay changed to reveal a visited link.

In addition, LLBean.com offers bread crumb trail navigation on its inside pages. The site is straightforward, consistent and functional, albeit a little-old fashioned.

Ooh, Good. Eww, Bad.

The Good: http://www.imdb.com

What qualities make up a good website? Pages that load fast. A reliable site search engine that returns relevant results. Page layouts that are easy to navigate. Unobtrusive advertising.

A good website should know its audience and cater to that particular audience. And it should fulfill users’ expectations with the least amount of stress. Based on these factors, the Internet Movie Database is a very good website.

IMDB.com is not visually stunning. But what it lacks in aesthetic “wow,” it more than makes up for in functionality and volume of information. The site is targeted at movie fans, celebrity hounds and film & TV professionals. IMDB.com offers users a deep well of archived and updated movie information – a huge library of bits, hyperlinks, photos and more.

Because exceedingly large amounts of data can overwhelm a website and bewilder its users, web sites with enormous catalogs of information need to offer a highly navigable structure that is both intuitive and obvious. IMDB.com accomplishes this. No matter which actor or movie I’m interested in, I can find information about him or her or the film at IMDB.com.

An obvious site search box appears at the top of every page. The search engine’s parameters are very flexible and consistently return pertinent results. The simplistic three-column layout features static navigation on the left and plenty of white space. Individual movie and actor pages all follow the same conventions.

Best of all, a vast web of hyperlinks helps users jump from one subject to the next, whether it be actor bios, movie, director, photo galleries or message boards. Those hyperlinks make the site very “sticky.”

Other positives that IMDB has going for it:

• Personalization. Registered users can make their own movie lists.

• Consistency. Users can easily navigate the site because of the uniform layouts

• Interactivity. Registered users can submit movie plot summaries, contribute mini-biographies of celebrities, report omissions and errors, and participate in message board discussions.

• Immediacy. The content is continually archived, updated, expanded and fun.

It’s no surprise that the folks who run IMDB.com are connected with Amazon.com.

The Bad: http://msdewey.com

I’ve quoted him before and I’ll do it again. Vincent Flanders of www.webpagesthatsuck.com says that most people visit a website to solve one or more of the following three problems.

• They want/need information.
• They want/need to make a purchase or donation.
• They want/need to be entertained.

Msdewey.com attempts to accomplish the “information” and “entertainment” parts for users, but doesn’t succeed. Clearly, this website was not developed with users in mind. The site puts form before function.

Msdewey.com is a Flash-driven experimental search engine created by Microsoft. After a brief load time, the site features a black and grey cityscape background with the character of Ms. Dewey moving around on the left side. The actual search engine box rests at the bottom of the page in the middle, while search results appear on the upper right.

Ms. Dewey is portrayed by actress Janina Gavankar – www.janinagavankar.com. The character comes across as an alluring woman, dressed in black with a neckline that accentuates her cleavage. The site has been described by some as a “sexy search engine.”

But Msdewey.com is the kind of website that requires only one visit. The site, so unlike Google or Yahoo, is like a carnival oddity. Any visual appeal that Ms. Dewey captures at first glance quickly deteriorates once she starts talking.

Ms. Dewey has got an attitude. It’s cute at first. “Can I help you find something?” she purrs.

But wait a few seconds and Ms. Dewey will be smirking, staring at you and making fun of you. She’s really pushy.

“Hello!” she says, sarcastically. “Type something here!”

Users can watch and listen to Ms. Dewey talk on her cell phone, flip through a magazine, and try to be funny. (She’s not.)

Probably the worst aspect of the site is that after you are mocked and prodded, you click on a URL in the search results and it will pop up in a new window. Ms. Dewey, meanwhile, will continue to yell at you from the previous window.

Yes, Ms. Dewey does come with a MUTE button. But after one visit to this flashy peculiarity of a search engine, most users will vow to never stray from Google again.

#8: A Little Bit of Web 2.0

“The more collaborative the employees of a company are, the more successful the company becomes over time,” observed Shiv Singh in his August 2006 essay “A Web 2.0 Tour for the Enterprise.”

I’m very drawn to this idea of collaboration in the workplace. Companies can foster meaningful participation among employees from every level and department using interactive communication technologies.

“Employees that collaborate efficiently by leveraging each other’s intellect and resources create stronger and more successful products,” Singh noted.

About a month ago, I was appointed co-chairperson of a workplace committee charged with gathering “innovation ideas” from the staff. The committee was comprised of non-managerial personnel from a cross section of departments. The big bosses figured, rightly, that more staff would submit ideas if the request came from the bottom up.

To solicit ideas, the committee agreed to use a bunch of different approaches:

Face-to-face conversations with colleagues.

Multiple mass emails to the staff (Spam!)

Design and display large attention-grabbing posters in high-traffic areas, as well as witty fliers in unexpected places, such as the stalls in the bathrooms.

Incentive money: six $100 gift certificates awarded with a drawing to those who participated.

All of the approaches seemed worthwhile and doable. We had one week to collect ideas. But the most obvious communication tool was missing from the mix: the web.

So taking inspiration from our ICM501 class, I volunteered to create a small “innovation ideas” intranet website. The site served multiple functions. First, it was the committee’s online billboard. It provided a highly accessible place to keep all information about the committee, including the name, department and email address of each member; the explanation of why we were seeking ideas; and images of our posters and fliers.

Second, a special “ideas” email address was created specifically for employee idea submissions. I also produced an online submission form to allow employees to submit ideas anonymously, if they preferred. This is what the form said:

FILL IN THE BLANK
I wish the company would _________________.

Lastly, and most importantly, the intranet site publicly displayed all of the ideas as they were submitted (without names attached), much like comments on a blog.

I figured if people could read what their colleagues were saying about improving our workplace, they would be more likely to submit an idea themselves, build upon an existing idea, or respond to a particular idea. The concept is one of the driving forces behind Web 2.0 — web-based software which is continually collaboratively updated.

“Web 2.0 lets you share and incorporate multiple voices who quickly take the product, service or idea in a direction that you could not alone,” Singh wrote.

Such an open and inclusive process seemed to be a fairly foreign concept to the big bosses. A few seemed threatened by the ideas coming out of the staff and the fact that everyone could read them on the intranet. I heard rumors that some managers were trying to figure out who was saying what.

But the staff really seemed to like it. The response was enormous, far more than anyone expected. We heard from people who hadn’t made a peep in years. Many of my colleagues told me they appreciated the opportunity to get their ideas heard and distributed among the entire staff, not just their immediate manager or department.

The “innovation ideas” intranet site, coupled with our other commitee approaches, tapped deep into what Singh referred to as “the wisdom of crowds.”

Now the commitee is wading through some 70 pages of ideas and getting ready to give a presentation to the staff and managers. We plan to summarize what we learned from the submissions and give recommendations about ideas to act upon immediately and ideas to make long term goals.

Companies should drop the culture of “control, containment and secrecy,” Singh argues. I agree. It causes the work environment to become one of competition rather than collaboration. Companies should try to embrace the values of Web 2.0 and its architecture of participation and rich interaction.

“Companies that are more collaborative, participatory, efficient, user-driven and action oriented are recognized as the most successful,” Singh wrote.

I can only imagine what could happen if my company was courageous enough to build upon the momentum of our recent web 2.0 experiment and keep the lines of communication open all the time. Morale would certainly improve. I think the product would, too.

Citations:

Singh, Shiv (2006). Boxes And Arrows: A Web 2.0 Tour for the Enterprise. [html]

Psychology of Color

“I see skies of blue…clouds of white
Bright blessed days…dark sacred nights
And I think to myself…what a wonderful world.”- Louis Armstrong, 1967

Colors evoke an emotional language all their own. Colors can grab attention, supply contrast, accentuate and understate. A room can seem tense and small, or serene and airy just by painting the walls a different color. A woman’s face can look soft or severe depending on the makeup colors she chooses.

“Vision is the primary source for all our experiences,” states Jill Morton in her 2005 essay, “Why Color Matters”(1). “We become bored in the absence of a variety of colors and shapes… Color addresses one of our basic neurological needs for stimulation.”

That’s why when designing a web site, colors play important part. The Internet is a visual and a psychological medium (2). While the visual functionality of a web site is influenced mainly by the text on the screen and page layout, color takes interaction a step further by making a psychological impact.

People react to colors on a visceral level, and emotion is often the driving force behind decision making (3). If a color scheme on a web site can help stir positive feelings among users, the site will be able to fortify a stronger connection with those users.

This essay will examine the human response to color and will attempt to establish a set of best practices when incorporating color on a web site.

COLOR = FEELINGS

“Colors, like features, follow the changes of the emotions.” Pablo Picasso (1881-1973), Spanish artist.

Color is one of the most difficult aspects of design to get right, observed author/designer Mark Boulton (4), because the color preferences of human beings are highly subjective.

Color transmits meanings to people in two primary ways. The first is natural associations. People find comfort when colors remind them of similar things (5). The second is psychological symbolism. For example, a light shade of blue might elicit associations with the sky and a psychological sense of calm.

Color theorists and psychologists have been able to break down some general color preferences by culture, age, gender and class. Being aware of these preferences can help web designers pick the right colors.

Symbolic cultural differences exist for many colors. For example, the color red means good luck and celebration in China, but is the color of mourning in South Africa, observed Jennifer Kyrnin (6) on her About.com design website. In India, red means purity, while in the United States red suggests excitement, danger, love, passion, intensity, “stop” and Christmas (when paired with green).

Color preferences differ among age groups. Young children tend to prefer brighter, more solid colors, Kyrnin (6) states. Primary colors, like those used on the pbskids.org web site, produce lively and energetic results that grab and hold kids’ attention.

Adults, meanwhile, tend to gravitate toward more subdued colors. Saturated colors “have the feel of coming straight out of the tube” at adults and seem to lack sophistication, observed Roger Nuttall (3) on his British-based online design website.

Gender differences also reveal themselves in color preferences, Kyrnin notes that in many cultures, men tend to prefer cooler colors (blues and greens) while women tend to prefer warmer colors (reds and oranges). Western men are also more likely to be color blind and unable to see some of the differences in color on Web pages.

Kyrnin also remarks that marketing research in the United States has shown working class people prefer colors that can be plainly named: like blue, red, and green. More highly educated groups of people prefer colors that are more obscure: like taupe, azure and mauve.

Here are a few more basic color meanings, starting with the most popular web design color – blue. Color studies have shown that almost everyone likes some shade of the color blue (7).

Blue is a cool color that conveys importance and confidence without being somber or sinister, states designer Jacci Howard Bear (7) on her About.com web color tutorial. Long considered a corporate color, Bear says blue, especially darker blue, is associated with intelligence, stability, unity, and conservatism. Its affective aspects are tranquility, and contentment.

“Deep blues create a feeling of the ether, a mysterious and enchanting space that rolls out to the very edges of the imperceptible,” observed Nuttall (3). “Large tracts of blue can create a sense of expansiveness.”

Mysterious purple comes next. Purple is associated with nobility and spirituality, power, luxury and creativity. It is also associated with childhood villains – most of the villains in Disney animated films are colored with some purple.

Green conveys both warming and cooling effects on people. Green denotes balance, harmony, and stability. It signifies nature, growth, renewal and health, or it can mean jealousy or envy and inexperience (7). Green is also the most restful color for the human eye, according to the excellent online Color Theory Tutorial at worqx.com (8). Designers can use green to create serenity.

Nuttall argues that blue-greens are another good color to use to appeal to discerning adults. Muted blue-greens always speak “class” and “restraint” like silk and classical elegance (3).

Yellow, meanwhile, is the most cheerful color of the spectrum. It is the most visible color of all the colors and it is the first color that the human eye notices (7). Kids love it. But the color also possesses conflicting symbolism, denoting happiness and joy, as well as cowardice and deceit. Yellow is difficult to see on a light background and its brightness may strain the eyes.

Mix yellow with red and get orange, a color that symbolizes comfort, creativity, celebration, fun, youth, affordability and warmth. It denotes energy and demands attention. Orange can also supposedly promote feelings of hunger. Softer oranges and peachy colors are even friendlier and more soothing (7).

Brown is earthy, natural, primitive and simple (2). But it can also seem dirty and dark.

Black is the negation of color itself. It can represent power, darkness, intrigue, depth, as well as seriousness, darkness, mystery and secrecy (2). Sounds like a good James Bond movie.

Coloring a background black on a web site can sometimes “strike a cozy, nocturnal feel, perhaps with an element of rebelliousness inherent,” Nuttall notes. But this mainly appeals to younger audiences, who tend to be more tolerant of “twilight” seductiveness than older surfers who prefer white space (3).

Gray seems to be as popular a color for web design as blue. Gray is non-committal. It is a neutral, balanced color – cool and conservative. Gray seldom evokes strong emotion, and may help to balance a layout of stronger colors.

If an appropriate use of color on a website can spark positive feelings, it can increase user productivity, minimize visual fatigue, and entice users to relax and return.
Let’s face it. Color sells, but the right colors sell better (9).

“Once you understand your audience make up,” wrote Kyrnin, “You can create a color scheme that suits them.”

GRAB ATTENTION, REINFORCE THE MESSAGE

“The color of the object illuminated partakes of the color of that which illuminates it.” – Leonardo DaVinci, (1452–1519). Italian Renaissance artist & engineer.

With an infinite number of websites competing for attention on the Internet, grabbing users’ attention within the first few seconds is key (10). Visual appeal can sink in that hook.

Research conducted by a group called the Institute for Color Research revealed that people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing. Between 62 percent and 90 percent of that assessment is based on color alone, the institute determined (11).

Designers today aren’t as bound to the palette of “web safe colors” as a decade ago. Standardization of web browsers and the popularity of Flash-enhanced websites have given web designers the ability to pair thousands of colors together.

There are, however, certain colors and color relationships that should be avoided. These color combinations can be eye irritants, cause headaches, and wreak havoc with human vision.

According to the Color Worqx website, every visual presentation involves figure-ground relationships (8). The more an object or figure contrasts with its surroundings (or ground), the more visible it becomes. If there is not enough contrast between figure and ground, a viewer will squint to view the text, causing eye fatigue.

For example, people will strain their eyes trying to read yellow text on a white background, or blue text on a black background because of the low level of contrast between figure and ground (8).

To help avoid unattractive and detrimental color combinations, author/designer Mark Boulton is among many graphic design experts who advocate limiting a web site’s color palette. He suggests first building of a website free of color – completely in black, gray and white (4).

“There’s a lot of value in removing color from the equation entirely and focusing on the tonal aspects of a design before applying the color,” he says. “Designing with black and white first will ensure that the [web site] doesn’t rely on color to work.”

Once the shell of the site is built and tested, add color to highlight specific usability elements of the design,” Boulton argues. He says to splash color on key functional elements of the web site, such as search buttons or elements of the navigation bar. Color used in this manner will enhance the functionality of the site by providing visual cues for users to find their way around.

Most people don’t read web pages, states Stephen Krug in his popular web design book “Don’t Make Me Think.” People scan pages, using their visual brains (12).
To make sure web site visitors are getting the intended brand message, Krug suggests web designers use color to help create a visual hierarchy on the page.

“The more important something is, the more prominent it is. For instance, the most important headings are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page-or some combination of the above,” Krug wrote.

The homepage of ctnow.com (the website where I am employed as a senior online producer) is an example of a design that attempts to create a visual hierarchy for online users.

The logo banner at the top left leads to the big bold white words on a dark blue ground. Directly below “What can I do tonight?” is another larger field featuring a slightly more muted shade of blue. This area serves as the focal point of the page. This area of the site exists in the upper half of the screen and encompasses a big headline, white text and a large photo. The blue background and white type is meant to draw attention to the top featured story of the day and offset it from the rest of the page.

In his book, Krug also suggests that smart designers should employ a repetition of color to show how things are related.

“Things that are related logically are also related visually,” Krug wrote. “You can show that things are similar by grouping them together under a heading, displaying them in a similar visual style, or putting them all in a clearly defined area.”

The design of Diet Coke’s web site repeats the product’s brand colors of red, black and silver. Hyperlinks to interior pages are grouped above the big photograph or below the red Diet Coke swoosh.

The Diet coke website also gives an example of colored text. Designers can color font type for emphasis instead of using bold or italic. The more the type color changes, the more emphasis it creates, wrote Tomas Caspers on his website, “Web Pages For Designers (13).”

Colored text works well as a subtle means to distinguish section heads, writes Patrick Lynch and Sarah Horton on webstyleguide.com. They recommend dark shades of color that contrast with the page background, and suggest avoiding colors too close to the default Web link colors of blue and violet (14).

On his Design Crux web site, John Soellner mentions one other purpose for adding color to online pages.

“Color can help with boredom.” Soellner wrote.

Web sites designers can use human color psychology to differentiate their sites from the pack and make use of attractive colors to keep visitors visually AND emotionally stimulated (15).

ADDING COLOR: BEST PRACTICES

• Design your website first in black, white and gray.

• Determine which functional areas of the site should get the most attention, and then highlight those with color.

• When deciding on colors, make sure the colors have some kind of relationship — either symbolic or literal — to the product or service (16).

• Be mindful of the users. Will the colors you picked appeal to the site’s target audience?

• Limit the color palette to a handful of colors or less.

• Repeat colors to reinforce branding and to bring a sense of visual harmony to the site.

• All the colors of the components — the navigation system, banners, buttons, and text must all work well together. Some common attribute must unify them (16).

• Make sure all text is highly readable. Enough contrast should exist between the text color and the background.

---

CITATIONS:

1. Morton, J.L (2005). Why Color Matters. Color Matters. http://www.colormatters.com/market_whycolor.html

2. Al Martinovic, Color Psychology in Online Marketing. http://www.2createawebsite.com/design/color-psychology.html

3. Nuttall, Roger. Psychology color marketing.
http://www.web-design-uk.biz/web_design/psychology_color_marketing.htm

4. Mark Boulton. (2006) Five Simple Steps to Designing With Colour. http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_with_colour

5. Morton, J.L. (2003) Color Logic for PowerPoint. http://www.colormatters.com/symbolism.html

6. Jennifer Kyrnin. Color Symbolism. http://webdesign.about.com/library/bl_colorculture.htm

7. Bear, Jacci Howard. Color Meanings. About.com Desktop Publishing. http://desktoppub.about.com/cs/color/a/symbolism.htm

8. Color Theory Tutorial. Color Contrasts. http://www.worqx.com/color/color_contrast.htm

9. Market Illumination. Why Color Design? http://www.marketillumination.com/why_color.shtml

10. Flanders, Vincent (2004). Biggest Web Design Mistakes of 2004. Web Pages That Suck. http://www.webpagesthatsuck.com/dailysucker

11. Institute for Color Research. Color Communications, Inc. (1997) http://www.ccicolor.com/research.html

12. Krug, Stephen (2000). Don’t make me think. Indianapolis: New Riders, pp. 22, 31-32.

13. Caspers, Tomas. Web Pages For Designers. http://www.wpdfd.com/wpdtypo4.htm

14. Lynch, Patrick and Horton, Sarah, Web Style Guide, 2nd edition. http://www.webstyleguide.com/type/emphasis.html

15. Soellner, John. Information Applied To Graphic Design: Color Psychology, http://www.designcrux.netfirms.com/infograph.html

16. Morton, J.L. (2005). Color and E-Commerce. Color Matters. http://www.colormatters.com/des_ecom.html

Psychology of Color by Marie K. Shanahan is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. Based on a work at mariekshan.wordpress.com.

#7: Search for Signs of Intelligent Life *

Much like the library websites described by Brenda Battleson in her 2000 case study, “Usability testing of an academic library web site,” major newspaper websites are evolving into information gateways.

Large news websites feature deep collections of stories, archived material, photos, searchable databases and more. But like libraries, the exceedingly large amount of data can lead to “information overload.” Sorting through such a vast collection of ‘bits’ can overwhelm, “bewilder, confuse, and even discourage users,” Battleson wrote.

Good organization and “compartmentalization” are necessities. And web sites with huge catalogs of information need to offer a highly navigable structure that is both intuitive and obvious.

The fact is no two people surf the internet alike. Every human being has her own distinct thought processes to take her from POINT A to POINT B. I witness this all the time working at courant.com and ctnow.com. No matter how much time and careful thought my team of web producers puts into organizing and highlighting important items on the home pages, most users glaze over it and head directly to the “site search box.”

Maybe Internet users have been trained to do this because of search engines like Google and Yahoo. It just makes sense to them that “search” is a good place to start.

So websites would do well to make site search as blatantly obvious to visitors as possible. And websites would do even better to make sure the search utility functions really well, returning the kind of results users are seeking.

I encountered this issue at work recently. The Hartford Courant Food section recently agreed to start printing a web-only feature I created on ctnow.com, called “The Liquor Cabinet.”

“The Liquor Cabinet” is gallery of cocktails from bars and restaurants around Connecticut and is featured on multiple pages of ctnow.com, including the home page, the nightlife page and the dining page. However, the Courant’s food editor contacted me on recent afternoon and told me she couldn’t find it.

Why? Well, she went to ctnow.com and immediately typed “Liquor Cabinet” into the site search. Unfortunately, it returned NOTHING. Apparently, ctnow.com is structured in such a way that none of my existing links to “The Liquor Cabinet” were included in the search metrics.

Now, while I thought ctnow.com users would naturally go looking for a gallery of cocktails on the dining or nightlife page, the food editor thought site search would be the quickest way to find the feature.

Most of the time, human beings don’t choose the best option, argues Steve Krug, author of the book, “Don’t Make Me Think! A Common Sense Approach to Web Usability.”

“We choose the first reasonable option,” Krug observed. “As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.”

I’ve since rectified that particular search problem on ctnow.com. But the experience has further proven to me that site search may be one of, if not THE most important function of a cavernous website.

According to Jakob Nielsen, whose Nielsen Norman Group in Fremont, Calif., has influenced tens of thousands of site designers, the number one mistake in web design is “bad search.”

Nielsen says, “Search is the user’s lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that’s what users are looking for.”

It all goes back to the core principle that websites should be designed with users in mind first.

Vincent Flanders, who runs an amusing site called “Web Pages That Suck” summed it up nicely in a post called “Biggest Web Design Mistakes of 2004.”

“Nobody cares about you or your site. Really. … Most people visit a web site to solve one or more of the following three problems.

They want/need information.

They want/need to make a purchase / donation.

They want/need to be entertained.
Too many organizations believe that a web site is about opening a new marketing channel or getting donations or to promote a brand. No. It’s about solving your customers’ problems.”

A website can start solving customers’ problems with a search that is both obvious and dependable.

Citations:

Krug, S. (2000). Don’t make me think. Indianapolis: New Riders, 1-39.

Battleson, B., Booth, A., & Weintrop, J. (2001). Usability testing of an academic library web site: a case study. Journal of Academic Librarianship, 27(3), 188-198.

Flanders, Vincent. Web Pages That Suck. [ html ]

Nielsen, Jakob. useit.com: Usable Information Technology. [html]

* Title of this response paper is co-opted from Lily Tomlin’s 1992 one-woman show, “The Search for Signs of Inteligent Life in the Universe.”

Diamonds & Coal

Let’s face it, on the surface, human beings are drawn to pretty things – the sparkle of a diamond as opposed to a black lump of coal.

The diamond has amazing form – it is visually captivating, artistic, beautiful. The coal is not attractive and isn’t meant to be. The coal is functional, serving a distinct, intended purpose. In the throes of winter, a human being is obviously far better off with an ugly lump of coal in the furnace than a shiny rock on the finger. But the diamond’s form, one could say, has its own function, albeit an abstract one – its beauty warms the soul.

So both form and function have their place in human existence. And they both have their place when it comes to design, particularly digital design.

Websites serve as the digital identity of a particular person, place or business. Users may initially be drawn to a website because it is visually stimulating, filled with graphics and an unusual layout. But once past the layer of aesthetic bells and whistles, users need to be able to find meaning with website’s substance. What function does the website perform to assist with their lives?

American architect Louis Sullivan coined the phrase “form follows function” in his article, “The Tall Office Building Artistically Considered” published in 1896. The dictum can also be applied to digital design.

The purpose of visual digital design is to facilitate communication, writes Ben Hunt in an excerpt from his book, “Web Design from Scratch.” “When designing products that have a communication function, usable design is simply better design, because it makes a product better at its job. Usability is a central element to successful design.”

A website that is merely bells and whistles – purely form – serves little purpose except to exist as art. For a user, such a website might be worth visiting maybe once or twice. Commercially, however, that’s not very viable.

“The most aesthetically effective visual designs also need to manifest some functional quality. If something has no functional effectiveness, it becomes art, not design. As far as a web site is concerned, even the most beautiful will impact more people for longer if they can be used,” Hunt writes. “A visually rich site that is also easy to navigate and comprehend leaves its visitors more time and mental energy to appreciate the visuals.”

If the form of a website becomes a goal in itself, instead of a means to an end, the website will not work, Peter-Paul Koch states in his column, “Form Follows Function.”

The web is a medium, different from print graphic design, different from pure art, Koch writes. “Content and interaction are far more important than pure form,”

On the opposite side of the spectrum, there can be such a thing as too much function. Jan Michl’s essay, “Form Follows WHAT ,” discusses how architects married to the idea of functionality alone led to an unfriendly period of design known as “brutalism.” “Functional forms simply do not appeal to taste, because they are a matter of truth – and truth does not pander to taste,” Michl wrote.

Buildings, during this period, disregarded the social, historic and architectural environment of their surroundings, Michl wrote. And the public found the new consciously ‘unappealing’ architecture and design to be unappealing.

Michl concluded that architects who based their designs solely on functional implications ended up being a lot like architects who based their designs solely on personal aesthetic vision. Both are too narrow and too conceited. Neither the designer nor the designs ends up serving the user. Any design, Michl states, should be meaningful to both the owner and the users.

The popular search-engine Google – a highly functional website – does a good job of fulfilling its distinct “purpose,” despite its exceedingly spare design. An elaborate design would get in the way of Google’s ability to perform its function – delivering relevant, comprehensive, easy-to-navigate search results.

Working at The Hartford Courant’s websites (www.courant.com, www.ctnow.com) for the past 8 years, I’ve been involved in some website design. And I’ve learned that it takes more than just pretty pictures and cool graphics. The Courant’s websites also have a distinct function – to deliver the newspaper’s daily mix of stories, photos and graphics in a digital format. So the digital design of the two sites must possess s a thoughtful inner architecture. Users should be able to easily direct themselves around the website and website producers should be able to easily update content. I want users to come to courant.com and ctnow.com and enjoy their experience, both on a visual level and on a “this is useful to my life” level. If users can’t find what they are looking for, than the website design is inhibiting the sites’ purpose and its viability.

According to Nick Finck in his essay, “Form vs. Function: Finding the Balance,” website users should not struggle with interface or navigational issues like site structure and organization. With good digital design, the user won’t see any of that.

“The user will only see the message, be it documentation, art, literature, music, video or whatever–everything else will appear transparent,” Finck states. “The form of the site will compliment the content; it will add to the site and not be distracting or annoying.”

A well-designed site will balance form and function to the point where those elements are invisible to the user, Finck wrote.

Ben Hunt sums it up nicely. “High-aesthetic sites are pleasurable and effective when their aesthetic delivery is appropriate and skillful.” A good example of this is some rock band websites, which project the image of the band in a highly-stylized way, often with audio, flash and more.

Alternatively, high-functionality sites, such as Google.com, are pleasurable to use and effective when they allow the user to fulfill his goals, Hunt writes.

It’s a balance. Websites can feature the diamond, as long as they keep users warm with lots of coal, too.