Six Memos for the Next Website

One of my favorite writers, Italo Calvino, published a book of essays about fiction in 1985 called Six Memos for the Next Millennium, that describes the characteristics of what fiction can and should be. The titles of his essays can serve as a useful construct for many creative endeavors, including websites. Asked to speak about trends in web design at Boston College earlier this year, I used Calvino’s construct to talk about those trends. Please note that I took and am taking considerable liberties in using Calvino’s thoughts selectively — and in a different order! I am doing what Calvino himself described in another context when he stated, “everyone mines every book for the things that are useful to him.”

Memo #1 Exactitude

The first memo for the next website: Exactitude. There is a lot of design before design for the best websites: business goals are set and prioritized; users are understood for who they are and what they want to achieve on the website; existing analytics and search frustration terms are mined for information; peer group and competitive sites and strategies are studied. It always helps to talk directly to end users in online focus groups. And it may help to collect quick quantitative pop-up survey information from every x visitor to the current site. Under exactitude I’d include pre-design work on nomenclature, taxonomy, and information architecture, all of which roots and structures the best creative design. Assuming a site already exists, usability studies on that site conducted by third-party usability laboratories can be used to inform smart design. These studies can also be used for testing design concepts during the design process.

After the creative work of business analysis and architecture, exactitude applies to the creative design itself. Do the images and words reflect the brand and speak directly — exactly — to the user or sets of users? Images offer an immediate emotive appeal, but, as noted by others, “words matter.” In this case, exactitude applies to all the work that needs to be done before mouse goes to design pixel, and later to the choice of images, colors, and words that resonate with the website user.

Memo #2: Lightness

So, what resonates? “Lightness” is an apt description of better-designed websites. It is the design axiom of less is more — a higher use of aesthetics with white space or negative space and imagery that is larger and more emotive. I’ve included a series of home pages below, all of which have white space or negative space. Take a look at the sites below for Brooklyn Law School, Viropharma, Life Technologies, Sappi Ideas That Matter, Dodge & Cox Funds, and Michael Weymouth Art. White space abounds. User paths are clear and simple. The type is legible and layers of navigation are simply presented and invite engagement.

Click screens to enlarge

The memo to the next website: use all the space you can; use the space wisely, and leave room for the eye to move. Provide information in layers. Offer the user simple, intuitive controls to get that information. Surprise and delight with copy and images that offer a visual and verbal acuity, unexpected but at the same time on target.

Memo #3 Quickness

Quickness is key. Convey the brand image quickly, convey the information quickly, let the user get in and out with what he or she needs, if it takes thirty seconds or (if necessary) thirty minutes or more of accurate, useful information. Quickness is a mix of form and function. Take a look at the home page redesigned for Activeion.com, a firm changing the way people think about cleaning. There are clear action paths with buttons for learning more, watching a demonstration, or ordering the product. Interactive rollover marks on the product image quickly summarize the features. Videos pop up in a light box, quickly and easily, without leaving the home page. Background imagery puts the product in context and helps build the visual brand of this innovative start-up.

A great example of quickness in design and function is the interactive Financial Snapshot created for Invitrogen — one of the first AR 2.0 projects in 2008. There is a matrix of numbers. Users click on their metric of interest and a voiceover from the CFO puts the number in context. Analytics indicated this was the part of the annual report where users spent the most time. It’s simple, intuitive, visual, and verbal.

Click screens to enlarge

Quickness entails more than design and more than function; it means having the infrastructure to quickly display information. The idea of a spokesperson on a screen is not new, but making it work effectively and smoothly is critical. That means optimizing the video for the web and working with the IT team and the infrastructure so that the quick message isn’t subverted. My kingdom for bandwidth. My kingdom for server capacity.

A memo to the next website on quickness: shorter is better — shorter video, shorter audio, shorter copy. New web technologies can make things quick. Make it easier to interact, to layer, to light up (or light box) on demand. And infrastructure matters.

Memo #4 Visibility (or Videobility)

Another memo for the next website: make the invisible visible. Expose, put in motion, explain. Add animations. Incorporate video. I am thinking of the mechanisms of action of new drug therapies and the animations of how instruments work. I am thinking of the rapid increase in the number and type of videos we are creating and incorporating into websites for clients across all industries. Mechanisms of action are extremely effective for explaining new therapies to investors, doctors, and patients. Any complex concept can be simplified with visualization, and MOAs are good example of that.

Video on websites is not new, but it has exploded in the past two years. Different filming and editing techniques are required (a topic for another blog post), but videos help tell a story, make the invisible visible, and if done well, add to the richness of site experience for the user.

A recent site launch is all videos — videos created for sinus surgeons and their patients. This series of videos really does make the invisible visible. (Don’t look if you are queasy!). The surgeon is adding a continuous stream of videos.

Click screens to enlarge

For another client, VBrick, a “video wall” on the home page created a dynamic means of showing (and flipping) a number of different types of video snippets.

Click screens to enlarge

The axiom for visibility (and videobility): show, don’t tell. Use animation. Use video. Use illustration. Create applications and widgets that make the invisible visible.

Memo #5: Multiplicity

The website is only one spoke in the digital wheel. There is mobile, of course. There is Facebook and Twitter and YouTube. There are widgets and podcasts and RSS feeds and e-marketing programs. In a memo to your anthropomorphized website: think beyond yourself; you are only one part of the digital storytelling.

Multiplicity is evident with Activeion, one of our clients. You can see all the different channels where information is presented. Note the page on YouTube with the same video used on the home page.

Click screens to enlarge

Mobile. Every year seems the year for mobile. But with increases in bandwidth and the advent of smart phones, mobile has to be considered in digital marketing strategies. Cross-channel applications are possible here as well. We have prototyped using new Microsoft capabilities to integrate print and mobile, i.e., take a photo of a mark on a print ad with your iPhone or other smart phone and you’re connected to a video you can see on that iPhone or smart phone.

Memo #6 Consistency

This may be the most obvious memo for the next website: be consistent externally and internally. Consistency strengthens the brand, leverages digital assets, and communicates more effectively. In the course of performing competitive reviews we have seen sites with a revised top level, but chaotic second and third tiers. Consistency has to go beyond look and feel to consistent navigation metaphors. Confusion often takes users away from sites immediately.

External consistency is equally as important.  Note the consistency, below, of the web and Twitter sites of the Harvard Clinical and Translational Science Center (aka Harvard Catalyst), which reinforces the brand and the community it is creating.

Click screens to enlarge

Click screens to enlarge

One final note on consistency: avoid peer consistency! We have been struck, in competitive peer reviews, by how similar sites in the same area can be. For example, many pharmaceutical sites have “happy patients” and the sites are interchangeable, save for logos. Also, in another competitive study, we saw very similar stock photography used on two direct competitors. The imagery on a site is one of the brand elements that can, and should, set a site apart.

Six Memos

Exactitude, Lightness, Quickness, Visibility, Multiplicity, Consistency: a useful construct to talk about a number of creative endeavors, and useful for talking about new websites. We do see more vibrant, intuitive, and adaptive interfaces coming. We do see higher aesthetics in terms of typography, space, and imagery. There is a much higher use of video online and an obvious increase in social media. Under the hood there are advances in technology that are making new creative approaches possible. And — pre-hood — there are advances in technology that are making online focus groups and usability testing easier than in the past.

A final note: for more on Italo Calvino, go here.