The Stranger’s Long Neck

Written by: Jeff Parks

Show Time: 33 minutes 42 seconds

Download mp3 (audio only)
Download m4a (with visuals, requires iTunes, Quicktime, or similar)

iTunes     Del.icio.us     Boxes and Arrows Podcast theme music generously provided by Bumper Tunes

Gerry McGovern has recently published The Stranger's Long Neck - How to Deliver What Your Customers Really Want.

Ireland’s Gerry McGovern shares a few of the key ideas in his recent publication The Stranger’s Long Neck – How to Deliver What Your Customers Really Want. Mr. McGovern, who will be teaching a Masterclass series in Canada on the importance of task management this November, discusses several of the key findings in his new book, including:

Trading with strangers

– The customer is a stranger. On the Web, the customer isn’t king—they’re dictator. When they come to your website, they have a small set of tasks (long neck) that really matter to them. If they can’t complete these top tasks quickly, they leave.
– There is an existential challenge going on right now between organization-centric and customer-centric thinking. Customer-centric thinking is winning.

From Long Tail to Dead Zone

– The Long Tail theory says that the Web allows you to sell more of less, that we are seeing the decline of the blockbuster and the rise of the niche.
– The Long Tail is often a Dead Zone of extremely low demand and hard to find, poor quality products.

The rise of the Long Neck

– The Web is exploding with quantity but quality is still relatively finite. Quality is the ‘long neck’; the small set of stuff that really matters to the customer.
– Understanding and managing the long neck has never been more important.
– Remember that the customer’s long neck—what really matters to the customer—is rarely the organization’s long neck —what really matters to the organization.

A secret method for understanding your customers

– A unique voting method that identifies your customers’ long neck.
– Developed over 10 years, with over 50,000 customers voting in multiple languages and countries.
– Used by the BBC, Tetra Pak, IKEA, Schlumberger, Wells Fargo, Microsoft, Cisco, OECD, Vanguard, Rolls-Royce, US Internal Revenue Service, etc.

Organization thinking versus customer thinking

– Case study that shows how car company managers think differently about how customers buy cars to how customers themselves think.
– Explanation of how to frame the task identification question.

Deliver what customers want—not what you want

– Case study of Microsoft Pinpoint, a website to help businesses find approved Microsoft IT vendors and consultants.
– What’s the top task of US small and medium businesses when it comes to IT? Security.

Measuring success: Back to basics

– Why traditional web metrics such as page views, number of visitors, etc., are often misleading
– Observation-based technique to measure online behaviour.
– The key metrics of task measurement: completion rate, disaster rate, completion time

Carrying out a task measurement

– The benefits of remote measurement
– How to run an actual measurement session

This podcast has been sponsored by:


Publishers of world class content for students, researchers, and practitioners in the UX and HCI fields. To learn more visit http://www.mkp.com/hci


From concepts to rich prototypes and detailed specifications, all in one tool. Get your free 30-day trial at www.axure.com

The design behind the design
Boxes & Arrows: Since 2001, Boxes & Arrows has been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

Contribute as an editor or author, and get your ideas out there. boxesandarrows.com/about/participate

Emotional Design with A.C.T. – Part 1

Written by: Trevor van Gorp

As UX professionals, we strive to design engaging experiences. These experiences help to forge relationships between the products we create and the people who use them. Whether you’re designing a website or a physical product, the formation of a relationship depends on how useful, usable and pleasurable the experience is. Ultimately, we form relationships with products and services for the same reasons we form relationships with people:

  • Pleasurable products are attractive and make us feel good. Attractive people can have the same effect.
  • Usable products are easy to interact with and easy to understand. Good conversationalists are the same.
  • Useful products fulfill our needs in a way that leaves us emotionally satisfied in the long term. Long-term relationships can fulfill our physical, psychological, emotional and spiritual needs.

In a previous article on Boxes and Arrows (Design for Emotion and Flow), I talked about the importance of balancing users’ emotional states to command attention and create flow: the mental/emotional experience where all the user’s attention is totally focused on an activity. The total engagement of the flow experience is highly immersive and encourages user loyalty. The experience of flow during interaction can be seen as one of the foundations for the formation of an ongoing relationship.

In Part 1 of this two-part article, I’ll be discussing how emotions command attention. Then, we’ll dive deeper to explore how design elicits and communicates emotion and personality to users. Emotions result in the experience of pleasure or pain that commands attention. The different dimensions of emotion affect different aspects of behavior as well as communicating personality over time. In Part 2, I’ll introduce a framework for describing the formation of relationships between people and the products they use.

 

Defining “Affective Design”

Some time ago, a friend offered me a ride home after work. I got into her SUV and sat down, ready for the short ride. After a few minutes, an annoying beeping sound started. “Oh,” she said, “You’ll need to fasten your seatbelt to make that irritating noise stop.” Grudgingly, I did up my seatbelt and the noise ceased, but the beeping had accomplished its purpose; I fastened my seatbelt.

This is an example of affective design: design that’s intentionally created to capture the user’s attention, triggering an emotional response that will increase the likelihood of performing a certain behavior. The emotional response can be conscious or unconscious. For example, a brightly colored button will attract users’ attention unconsciously by affecting the degree of arousal (i.e. physical stimulation). And the behavior could be any action, from clicking a button or signing up for a newsletter, to making a purchase online.

To make the unpleasant sound in my friend’s SUV stop, I had to perform a particular behavior. In this case, the stimulus was the unpleasant beeping sound, which triggered my annoyance and led me to fasten my seatbelt. With your latest web app, the stimulus is likely visual, rather than auditory, but the energy that it commands is the same. One thing these stimuli have in common is that they demand and command your attention.

 

Attention

Attention has been described as psychic energy.1 Like energy in the traditional sense, no work can be done without it, and through work that energy is consumed. Csikszentmihalyi (1990) named the mental/emotional state where all our attention is totally focused on an activity “Flow”. Flow is a highly engaging experience, and strong emotional engagement demands and narrows the user’s attention. In order for users to accomplish their tasks and attain Flow, we need to capture and hold their attention by managing the design of their emotional experiences.

The products we design need to attract users based on how they look and sound, persuading them (via their feelings) to approach or avoid. They also need to converse with the people using them. The way these products interact should persuade users to take particular actions in predetermined sequences, while also affording users a feeling of control. If we’ve done our jobs correctly, the result is that users will commit and transact with our system; they click the button, subscribe to the newsletter, make the purchase or book the flight.

These events mark the formation of a relationship between the user and the product or application. Each experience with a company’s products or services shapes the user’s relationship with the company’s brand. In order to build positive brand relationships, companies need to effectively manage the user’s emotional experiences during every encounter with their products or service channels. As we’ll see, the consistent expression of a particular emotion is perceived as a personality trait, and our personality traits determine the relationships we form.

 

Dimensions of Emotion

To understand how emotional expression becomes personality, we first need to understand emotion itself. All emotional or affective states can be described in terms of two underlying dimensions: value and arousal. “Value” judgments are judgments of good vs. bad. We tend to base these conscious judgments on whether something is pleasant or unpleasant.

“Arousal” has been used to refer to the unconscious activation of the body, the brain or a particular behavior.2 It has been defined by levels of anxiety vs. boredom,3 and we can measure it by monitoring heart rate, respiration, blood pressure and skin conductance. To simplify it, you can think of arousal as the level of stimulation or activation. When we combine these two dimensions of emotion (i.e. the conscious & cognitive, and the unconscious & physical) we get a circular model of emotion.

Figure 1

Figure 1: Affect Circumplex (Van Gorp, 2006 adapted from Russell, 1980)3

Because arousal is largely unconscious, it provides an especially powerful channel for designers to command attention and influence behavior. For example, large images, bright saturated colors and high contrast all increase arousal levels. Increasing the size of an image and moving anyone in it closer within the frame will increase arousal levels.4 When the level of arousal increases, the focus of attention narrows and goes to whatever is causing the stimulation. A good example of this is a stop sign, which uses a bright red to command attention within the busy visual environment of the street.

During the product development process, there is often a disconnect between design, marketing and usability for this very reason. Visual designers and marketers are often focused on increasing arousal through the attention grabbing emotional-impact of bright colors and large images, while usability analysts are focused on controlling arousal and reducing negative emotions by ensuring task completion.

 

Dimensions of Behavior

Each dimension of emotion affects a different aspect of behavior. Value affects whether we approach (i.e. pleasure) or avoid (i.e. pain), while arousal levels influence how motivated we are to do either. Both pleasant and unpleasant objects and experiences can increase arousal levels. For example, fear and excitement are both high arousal emotions. The level of arousal also affects how intensely we experience a given emotion, and the more intense the emotion, the more attention is demanded. Arousal also affects our level of motivation. Low anxiety or boredom results in low motivation, while higher anxiety results in higher motivation. This continues to an optimum level (i.e. the balance of Flow), after which motivation and performance decrease, while anxiety increases.

Figure 2: Behavior & Motivation Circumplex (adapted from Russell, 19803 ; van Gorp, 20064)

In the case of the annoying sound in my friend’s SUV, the value of the noise was negative (i.e. unpleasant). This unpleasant feeling creates the urge to avoid. If the volume of the noise had increased, or the rate of the beeping had sped up, this would have unconsciously increased arousal levels, further increasing my motivation to avoid the noise or make it stop.

This is a very simple example within the relatively controlled context of a vehicle, but what happens when the context becomes more layered or complex? What happens when the design is visual and interactive? As we’ll see later, that’s when simple emotional expressions are perceived as personalities.

 

Emotion and Personality

Humans are such social beings that we perceive the expression of emotion in everything, including products, objects and websites. Because products usually remain the same, any perceived emotional expression becomes a perceived personality trait over time. The person who appears down or sullen the first time you meet is expressing an emotion — sadness. When that same person appears sad the next 20 times you meet, he or she is likely to be seen as “depressed”. When it comes to products and websites, we can think of a personality trait as the long-term expression of a particular emotion. Take a look at the video below to get a better idea.

Figure 3: American Express Video

As human beings, we assign personalities to objects, interfaces and websites based on the way they behave and appeal to our senses. Even though we consciously know that computers and media are not animate and do not have feelings, we still respond socially and automatically when viewing, interacting and evaluating them.5 It has been suggested that products should be viewed as “living objects with which people have relationships.”6 Through the relationships that are formed by using products, people can be made to feel happy or sad, angry or passive, relaxed or anxious, proud or ashamed, and motivated or demotivated.

 

Personality Traits and Relationships

Like perceptions of emotion, our first impressions of personality are based on the information received by our senses (i.e. sight, smell, hearing, taste and touch). These impressions are formed quickly and unconsciously. With websites and applications, personality is inferred from the use of language, user prompts, sounds, navigation, proportions, layout, contrast, color, images and fonts that comprise the formal properties of the design. In fact, these perceptions of personality are so automatic and unconscious, they occur regardless of whether the people experiencing them believe they are appropriate. Other, more conscious decisions about personality are based on how the object we interact with behaves over time.

In human relationships, personality traits are an important part of attraction and conversation. They shape our relationships by determining who we like and what we expect from those we encounter. They also influence how well we get along with others. In this respect, perceived personalities in products and websites are no different. Unlike us, however, product personalities can exist in fictional worlds and be controlled by designers so that they appear at particular times and places. They can often be simpler, more consistent and more easily identifiable than real personalities, reducing uncertainty and promoting trust.5

 

Dimensions of Personality

Although human personality traits are complex, psychologists have grouped product personalities into a small number of categories that have a similar character. They’ve identified two major dimensions of personality that are readily assigned to products, computers and interfaces by users: dominant vs. submissive5 and friendly vs. unfriendly.7

Figure 4

Figure 4: Personality Circumplex (adapted from Reeves & Nass, 19985; van Gorp, 20064)

Take a look at the simple objects below. Are they expressing emotion? As static objects, any emotions they’re expressing will remain consistent over time. If the major dimensions of personality are friendliness and dominance, which object do you perceive to be friendlier? Which do you perceive is more dominant? Check the comments people left below the photos. Happiness is associated with a friendly demeanor, pleasure and approach behaviors, while sadness is associated with unfriendliness, pain and avoidance.

Figure 5: Objects Displaying Personality – (photos courtesy of Jim Leftwich)

 

Designing Personality: Dominant or Submissive?

Dominant visual features could be described as angular, straight, cold/cool, dark, silver, black…with a heavy base. Submissive visual features could be described as round, warm, light/lucid, soft/delicate, golden.8 When a personality is not represented with overt dominant visual or interactive characteristics, the tendency is to describe it as more submissive. Of the two sites in Figure 6, which site is more dominant and which is more submissive? Which site is friendly and which is unfriendly?

Figure 6: Martha Steward and WWE – Submissive and Dominant Designs

Notice which one of the sites above you’re more naturally attracted to. Which one do you feel more compelled to approach or avoid? Which one naturally grabs more of your attention? How well do these sites match the likely personalities of their target audiences? Generally speaking, you can attract the user by presenting a visual personality that is similar to his or her own. When it comes to attraction, we’re attracted to things that look similar to the way we are, or the way we’d like to see ourselves.

 

Friendly or Unfriendly?

Friendly visual features could be described as positive, while unfriendly visual features could be described as negative. Friendliness is not only determined by what is said, but also by how it is said (i.e. the tone of the conversation). Our tendency to assign and characterize personality based on conversation is easily recognizable in the example below. This example uses contrast, visual weight, , color value, size and typography to alter the meaning that is conveyed by the words. The content conveys the message, but the look and feel change how that message is interpreted, altering the meaning.

Which of the statements below would you rather hold a conversation with? Which one do you feel more compelled to approach or avoid? Which one naturally grabs more of your attention? When it comes to conversation, someone has to lead, and opposites attract.


Figure 7: Personality and Meaning4

Similar or Complementary?

Similarity is the theory that people are more attracted to those with personalities similar to their own, over those who display different personalities.5 Complementarity is the theory that people are attracted to people with personalities that complement their own level of dominance or submissiveness (Markey 20079; Personality Research10). It comes down to the old question of whether relationships work better when people are the same or opposite? And the answer is yes.

When it comes to personalities, different things stir our emotions at different stages of a relationship. Researchers found that Similarity takes precedence early in relationships, playing a vital role in initial attraction. Complementarity becomes more important as relationships develop over time.11 People in long-term relationships are more satisfied when their partners are either more or less dominant than they are. Two dominant persons may experience conflicts as both attempt to lead, while two submissive individuals may lack initiative, as neither is willing to lead. (Markey 20079; Wikipedia 200912)

Generally speaking, interaction between the system and the user should be complementary, where the user takes up the dominant role, while the product, interface or service takes on the submissive role. These roles might flip in the case of a guided tour, or an application where the system is guiding the process or has an air of authority.

 

Conclusion

In Part 1, we learned that emotion commands attention. We also learned that affective design is a term used to describe design created to intentionally capture the user’s attention and trigger an emotional response that will increase the likelihood of the user performing a desired behavior.

The value dimension of emotion influences our behavior (i.e. whether we approach or avoid), while the arousal dimension influences how motivated we are to do either. Emotions influence different aspects of behavior, and their expressions are perceived as different aspects of personality over time. Value influences the perception of friendliness, while arousal influences the perception of dominance.

Emotions, Behavior & Motivation and Personality
Figure 8: Emotions, Behavior & Motivation and Personality4

And finally, we learned that customers are attracted to things that they perceive have a personality similar to their own. Over time however, they prefer to interact with things that take up a role which is complementary to their own.

Useful, usable and pleasurable experiences help facilitate the formation of relationships. In Part 2, we’ll look at the different ways people experience love to get an even better understanding of how relationships form. Then, I’ll introduce a new framework that describes how to systematically provide experiences in the different ways that are necessary to form relationships.

Citations

1Csikszentmihalyi, Mihaly. (1990). Flow: The Psychology of Optimal Experience. New York: Harper Perennial.

2Cacioppo, J. T., and Petty, R. E. (1989). The Elaboration Likelihood Model: The Role of Affect and Affect-laden Information Processing in Persuasion. In A. Tybout and P. Cafferata (Eds.), Cognitive and Affective Responses to Advertising (69-89). Lexington, MA: Lexington Books.

3Russell, J. A. (1980). A Circumplex Model of Affect. Journal of Personality and Social Psychology, 39, 1161-1178.

4Van Gorp, Trevor, J. (2006). Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction. University of Calgary, Faculty of Environmental Design, Master’s Degree Project.

5Reeves, Byron and C. Nass. (1998). The Media Equation: How People Treat Computers, Television and New Media Like Real People and Places. Cambridge: Cambridge University Press.

6Jordan, Patrick, W. (2000). Designing Pleasurable Products. London: Taylor & Francis.

7Desmet, Pieter, R. (2002). Designing Emotions. Pieter Desmet. Delft.

8Wellman, Katrin and Ralph Bruder, Karen Oltersdorf. (2004). Gender Designs: Aspects of Gender Found in the Design of Perfume Bottles. In D. McDonagh and P. Hekkert, (Eds.), Design and Emotion: The Experience of Everyday Things. New York: Taylor & Francis.

9Markey, P.M.& Markey, C. N. (2007). Romantic Ideals, Romantic Obtainment, and Relationship Experiences: The Complementarity of Interpersonal Traits among Romantic Partners. Journal of Social and Personal Relationships, 24(4), 517-533.

10Personality Research. (August 1999). Interpersonal Complemetarity. Retrieved December 19, 2009, from Personality Research.

11Vinacke, W. E., Shannon, K., Palazzo,V, Balsavage,L., et-al. (1988). Similarity and Complementarity in Intimate Couples. Genetic, Social, and General Psychology Monographs, 114, 51-76.

12Wikipedia (2010, January 2). Interpersonal Attraction. Retrieved March 18, 2009, from Wikipedia, The Free Encyclopedia.

Google, Stanford, and The Government Fight Swine Flu

Written by: Nate Bolt

Bolt | Peters recently collaborated with a team at Stanford University on designing the Google Sites template for local governments to use as a backup to deliver information on the H1N1 outbreak, and also disasters and emergencies in general. The goal was to create a template that was well laid-out, easy for non-techie local governments to edit and update with content, and conveyed the most important information to different audiences.

Swine Flu info template

 

How It Started: The Quick Fix

With the recent outbreak of H1N1, Santa Clara County’s official public flu information site was taken down by the surge in web traffic. To help relieve the demand, the Stanford SIE Program, a Stanford University group that develops technology for social change, stepped in literally within hours of the interruption to create an ad hoc backup site using Google sites, so people could still access the critical info.

This is the version of the site they originally posted, using Google Sites’ standard WYSIWYG editing tools:

Stanford's original stopgap design
Stanford’s original stopgap design

After the site went live, Stanford trained the Santa Clara County maintain it and add their own information. Santa Clara County needed to have site that could handle the traffic and get the information out as quickly as possible—which is to say that there wasn’t a whole lot of time to think about design.

This experience made it clear that it would be valuable to create a well-designed, easy-to-edit template for local governments to distribute information in case of emergencies—not just H1N1, but any public hazard, including floods, earthquakes, wildfires, and so on.

The team contacted us in late October with the original draft of the website. Since it was important to make the site available as soon as possible to deal with the ongoing H1N1 outbreak, so the timeline we had for design recommendations was really brief—just a few days. With that in mind, we got to work.

Spotting the Problems

Because of the layout restrictions, our design evaluation focused primarily on information design. We had two main issues with the early design, along with a handful of usability tweaks here and there.

First draft of Google template

1. Lack of visual hierarchy.

With two columns of equal width and mostly indistinguishable boxes filled with text, it was hard to tell at a glance what information was urgent, time-sensitive, or recently added.

2.
Big chunks of info, no
 organization

The info wasn’t grouped into meaningful categories—there wasn’t much visual or spatial distinction between contact info, prevention info, calls to action, and so on, making it difficult to zero in on information even if you know what you were looking for. Also, the info came in big blocks of unscannable prose, and deep reading is the last thing you want to do when you’re trying to learn about the tsunami headed your way.

3. It didn’t anticipate the distinct needs of the most critical user
segments.

There was plenty of good info on the site, but it was never clear who a given piece of info was for—you couldn’t scan the page headers and think, “Yeah, there’s what I’m looking for”. Instead it had a “general audience” feel to it; the info didn’t take into account that different groups might have different needs and different levels of urgency.

4. Buried info.

Vital info on vaccines, symptoms, and SMS / Twitter updates was absent from the front page entirely, lurking deep in the navigation.

Our Recommendations

To keep editing simple for the local government end-users who would be using the template, we had to stick to using the WYSIWYG Google Sites editor, which meant no custom CSS and very little control over layout. We also had literally a single day to make our recommendations and synthesize them into a first-draft mockup—the result wasn’t pretty, but got our main info design recommendations across loud and clear.

First revision of template
Our first stab at redesigning the H1N1 template

Redesign Goal #1: Prioritize information according to the urgency
of visitor need.

Our design takes into account that there are different “general public” user segments with different goals, and that there are tiers of urgency and priority. From most-to-least urgent, we identified these segments:
* People infected with the flu: Immediate help / contact info
* People worried that they might have the flu: Self-diagnosis
* People concerned about catching and/or spreading the flu: Preventative measures and vaccine info)
* People just curious, staying informed: Information about travel restrictions, public response, news updates, deep flu info

The structure of the site was altered to serve each of these segments:
# We added a page-width alert box that would be displayed to convey urgent, time-sensitive info—this is a common feature on many of Google’s sites, as well as CNN.com.
# A yellow-shaded box to give the highest priority group, currently affected individuals, clear instructions on what to do.
# The left-column contains info on self-diagnostic and preventative measures for at-risk or concerned individuals.
# The top-right contains info on vaccines; below is links to deep info, research, and update notifications. Though the Google Sites template didn’t allow us to resize the right column, we noted that it should be made smaller than the left column.
# The left sidebar navigation was reserved for redundant quick links to most important info, as well as links to pages for specially affected individuals and organizations.

Redesign Goal #2: Reduce block text down to easy-to-scan lists
and chunks.
Cut the bureaucratic BS.

We broke down the block text to keep from overwhelming users with too much difficult-to-scan information upfront. Lists were kept to under 8 items long, unless they broken down into categorized sub-lists; text was kept under five lines. All information that couldn’t be condensed in this way was moved to lower-level pages, and linked from
higher-level pages.

 

Users don’t need to know what the mission statement and goals of the organization are; they just want to know if and how they are personally affected, and what they can do in case they are affected.

Redesign Goal #3: Use informative headers that directly address
user goals, and which give all users clear next steps.

All types of visitor (e.g. directly affected, at risk, concerned, just curious, administrative, medical, etc.) should be able to tell by the header if that information is “for them”. We tweaked the headers to make it clear what kind of info you could find in each section. We also made it clear what, if anything, each user segment needed to do:
* Immediately affected individuals are given step-by-step instructions on how to deal with their
emergency situation(s).
* At-risk individuals are given step-by-step information on preventative, precautionary, and self-
diagnostic measures.
* Individuals seeking non-urgent information can be given supplementary external information
resources (by phone, online, and downloadable / printable) and means to stay updated (by email,
text, RSS, Twitter).
* Urgent contact info is immediately visible in the right sidebar.

The First Revision

After we sent over our recommendations and mockup, a member of the team sent us a nice note a day or two later:

You’ve convinced us that we have to completely rethink and redesign the site from scratch, so
your style guidelines come at a very good time. I can’t thank you enough for opening our eyes to
how we can do this in a much better way. I think we can create a site that works much better than
the original site.

…and then a few days after that, Stanford sent a revised version over to Google, who worked with the design firm OTT Enterprises to create two new designs with some added visual design flourishes.

Unfortunately we don’t have permission to show you this revision yet (working on it), but it wasn’t bad—certainly cleaner and better organized, easier to scan, less dense. There was, however, a large distracting green gradient background, some empty space in the sidebar columns, a few stock photos, and a muddled color palette (green, blue, yellow, and gray).

Our second batch of suggestions focused mostly on visual design and layout. Just a few of them:

Visual Design

* Get rid of the gradient background; it’s distracting and confuses the emphasis on different parts of the site, since it runs behind multiple different elements.
* Get rid of the green coloring, which is tertiary to the blue and yellow. Instead, use several shades of blue as the primary color and a little light beige or light grey as a secondary trim. Blue signifies authority, calmness, trustworthiness, etc., which are of course appropriate here. Notice how almost every major government agency’s website (including the CDC) uses dark blue and gray as the main colors.
* Remove the stock images, including the CDC and Flu.gov widget images, which look like ads. The phone and email icons are fine, however.
* Rather than images, make the content headers stand out with size and strong typography—”make the content the focus” is an old web design adage, and the content, in this case, is the flu information. Here are a bunch of sites that use typography, font size, whitespace, and bold layout to create emphasis, using few images [list of a bunch of websites].

Layout

* Header and upper-page content takes up way too much space—note that the important info (”If you or your child…”) doesn’t begin until more than halfway down the screen. Compress.
* I like how Design #2 places the alert and contact info in the sidebar; in Design #1 the sidebar is wasted space. This frees up space to move important info (Vaccine and How to Care for Someone With The Flu) up to the right side.
* This design consists mostly of links to deeper pages, but there’s definitely room to put more specific, useful info right on the homepage: symptoms, preventative measures, vaccine info (see our original design)
* Get rid of the Contents box.

The Results

Stanford started over once again, aided by our style guide and input from OTT Enterprises. After further iterations in Google Sites, they handed it over to the Google visual designers, and here’s the before-and-after:

Before
Google Sites template, super rush draft

After
Google Sites Public Health Template 1.0

Can you do better?

As with all things on the web, the template is a design-in-progress, and will be improved as time goes on. Stanford SIE is looking for feedback on the design, so here’s where you can send feedback for the Public Health template and the All Hazards template. Since these Google Sites templates are available to everyone, you can even make your own design edits and mock up improvements.

Or if you just think it’s great and you just want to use it yourself, here’s the complete list of links:

Google Sites Templates blog post

Public health sites:

Template
Example site
User guide

All hazard sites:

Template
Example
User guide
Stanford SIE site (we’re credited here!)

Note: Nate and Tony’s book on remote testing, “Remote Research”:http://www.rosenfeldmedia.com/books/remote-research/, will be published by Rosenfeld Media in 2010.