Skip page content

Archive for the ‘Design’ Category

Right for Your Audience? Write for Your Audience…

Getting started in designing or redesigning your website should begin by answering this question: who am I trying to reach with the website? By putting the customer first and serving their needs, you can connect with them. The copy on the site should show them how your product or service will solve their problem.

To design your site right, you should begin by thinking about the goals of your potential audiences. Why will people be coming to your website? What problem will they be trying to solve? What search terms will they use to find you? What information are they seeking?

Your potential audience is often composed of people in various roles. They may be potential customers, current customers, investors, job seekers, or even your own company’s staff. Take into consideration all of these roles when designing the site and writing copy, but prioritize the list to handle any conflicts.

The highest priority target audience for a e-commerce or lead-generating website is most likely potential customers. Remember, your website is essentially an online welcome mat and could quite possibly be the first point of contact that you have with your potential customer.

The primary space on the Home page of a website should be devoted to helping customers find the products and services they need. Make sure that the website copy uses terms that your potential customers would search for to find your website, rather than internal company names for your products. Of course, internal product names can and should be included as well, but make sure things are spelled out in plain wording using targeted search terms. You want your potential customers to find you using a search engine, right?

Here are some things you can do to learn more about your website audience:
  • Interview customers
  • Develop website personas
  • Conduct a usability study on your website – watch how users interact
  • Do keyword research for your industry – try out Google Insights, a free tool based on real world search history
Many companies feel that they already know their prospective customer, from a demographic point of view. Yet we find that every company can also apply these simple techniques to learn even more, and ultimately hone both their online message and the methods to reach people.

Personas in HCI: Shocking Truths Revealed

The objectives and usefulness of personas are disputed topics in professional HCI contexts. I’d like to reopen the debate, by suggesting that personas are based on at least one flawed assumption.

First, though, a quick definition of persona. Personas are narratives that describe hypothetical users of a website, typically through details about their background, their values, their overall information needs, and their specific objectives on a site.

picture-13

The best descriptions of personas focus on the way that they can function as communication devices, and drive home to business decision-makers that their choices will affect real users. While this might be true to some extent, I feel that some critique is necessary to clarify that personas are not fact, but instead are a pretty nebulous methodology, and not ‘scientific’ tools.

Major philosophical problem 1:
This problem is more a clarification of what personas are not: objective, or able to subject to considerations of proof of concept. Personas are impossible to refute as a scientific technique, because they are based on the construction of hypothetical worlds. As a result, any arguments of whether or not they are good or useful, or bad and not useful, is meaningless. Is astrology useful? If you believe in it, you can use it to validate certain perceived characteristics of your self, others, or situations. But you will never have any evidence as to whether it is valid or not. Personas, I argue, are a similar form of ‘pseudo science’, because there is nothing that can’t be explained through a persona, and there is no single, or even identifiable subset, of correct personas for a given website affliction. Let’s say you are a designer asked to evaluate a website. Can it be said whether there is any truth, in terms of real-world correspondence, between the type of person described and the aspect of the site? Is the persona true? That is impossible to say, regardless of how much sense it may seem to make as one
reads the tasks, needs, etc, associated with the person. If personas live in the world of fiction, how can we possibly tie them to actual aspects of a website and types of people?

Major philosophical problem 2:
Personas assume that there is a real connection between desires (i.e, information needs), actions, and aspects of a website. But these things are not at all necessarily contingent, and I argue that the specific connections personas imply of these sorts are probably quite often completely false, if not verified through other, less subjective techniques. The problem is that, stated in terms of information beliefs and personal values, personas are only a re-description of the action that they are thought to be predicting, and that that action is only a re-description of the aspects of the website that it is thought to be linked to. But in reality, the connections personas imply are logical, not contingent — they are created in the mind of the designer who writes the persona.

In sum, a persona is in my opinion best described as a label. A complicated, completely arbitrary label, used to direct focus to an aspect of a website, but without any foundation in fact.

If you are a huge persona fan, feel free to weight in. My intention in this blog post was not re-hash obvious facts of personas, but instead to touch on some of the more tacit assumptions that go along with them.

Pure Visibility Test Drives New Visualization by HCI Designers

Pure Visibility recently supplied a visualization challenge to several students in Professor Mick McQuaid’s Information Visualization 649 course at the University of Michigan School of Information. And the results, a visualization system design for SEO Word Market Analysis by HCI Designers Jasper Liu and Li Li, were fantastic!

Read More

“Motion Charts are Hard”

Two months ago, Google Analytics Motion Charts were hot. Now, they’re not, at least if we trust the amount of traffic coming to this blog looking for information on the charts and the amount of new content being produced around this feature. Is this a natural consequence of time since the feature was released, or is there something about the Motion Charts that make them less-than-user friendly? Did Google possibly goof?

Read More

Great book on Landing Page Testing

Have you ever wanted to be systematic about testing different versions of a popular page on your site, but felt overwhelmed by questions of how long a test should last, which traffic channels should be sent to the pages being tested, and how certain your results are? Landing Page Optimization by Tim Ash is the most comprehensive book available on test design, analysis, and the finer points of both.

The book’s clarity is its strongest feature. The risks, advantages, and disadvantages of A/B versus multivariate tests are explicitly defined, and examples that put success in terms of revenue are used throughout the book.

Another memorable aspect is Tim’s observation that both the visits to the site, and the element variations being tested on a page (for example, the font, or a graphic, or any other aspect of the page design) are are independent of one another in effects. This is something we’ve discussed here at Pure Visibility on multiple analytics projects. For example, you may have a page for which you are testing two background colors, and two very different button designs. It may be very well be the case that the color and the button design displayed effect each other, either positively (increasing the conversion rate) or negatively (canceling each other’s positive effects). In this simple scenario, it is relatively easy to add tests for each pairwise combination of elements, to determine the truly winning “recipe”. However, in a more complex test, separate tests of each combination increase the time and data needed for the test. Sometimes, independence must be assumed to some degree. Kudos to Tim for addressing this in a book anyone with basic stats knowledge can understand.

Progressive Enhancement: It All Starts With Content

Separate your content from its presentation. It is a best practice to keep the code on your website that controls of the appearance of your site separate from the actual content. It’s good for accessibility and it’s good for flexibility, in case you want to go back and change stuff on your site later. I recently read an article by Aaron Gustafson on A List Apart, Understanding Progressive Enhancement, that reinforced this concept from a bit of a different angle.

“Progressive enhancement” dates back to 2003. This article starts with contrasting progressive enhancement with graceful degradation. Whereas graceful degradation focuses on giving the latest browsers the best experience while not completely breaking the experience for older browsers, progressive enhancement takes the opposite perspective: starting with a good experience and making it better depending on what technology you’re using. This is the angle the interesting angle. It’s not just about making sure that a website works for everyone. A highly interactive site can engage users and may increase conversion rates, and progressive enhancement takes the content as the foundation on which you can build a great website.

The heart of progressive enhancement is the content – writing content that is properly marked up so it is versatile and can be displayed in all sorts of different technologies. Gustafson uses the analogy of a peanut M&M to discuss this – the content is the peanut, the chocolate is presentation (CSS), and the hard candy shell is the flashy, snappy interactive features that use the best that browsers have to offer. Although almond M&M’s are obviously superior to the peanut variety, this is a good analogy.

This approach makes sense. Foremost, if people can’t access your content, why bother having a website? Solid and versatile content is good for people who have disabilities. There’s always going to be plenty of users who do not have the very latest browser – plus, you never know who’s going to come out with a brand new browser next. Browsers may not even be the main way customers interact with your content, one day.

This progressive enhancement concept plays well with SEO. You’ve got to ensure that search engines can figure out what your site is all about, so making your content adaptable is going to help. From a user experience perspective, also, this stuff matters. You don’t want to go around cutting off potential customers from reading your site just because they’re on a mobile device or are paranoid about having Javascript turned on.

Color in Web Design

Color perception is a tricky business – the way a color makes a person feel, the colors we choose to wear and identify with, is about as subjective a topic as you can yet. But studies in perceptual psychology have also shown certain colors to have certain effects across subjects, albeit with sometimes contradictory results. Use of color on websites becomes an interesting area of investigation. How does one strike a balance between the colors the designer prefers, and the associations that color might bring up for users? What facts can we be sure of when it comes to the effects colors produce?

Not too long ago Mike wrote a post discussing a report from the Journal of Usability Studies, originally published here. The take-away is that a study on color combinations on websites showed that both classical and expressive aspects of aesthetics (meaning both formal guidelines, and more subjective ‘feelings’ produced by colors) both affect users. Particular color combinations were shown to be more effective than others – specifically, “the split-complementary color schemes that utilized a cool primary color (blue) for the top or global part of the page and then used either another cool color (medium blue) or a warm color (orange) for the secondary page components provided the color balance that users found most aesthetically pleasing”, in comparison to double warm colors.

This information is incredibly useful to designers, and raises the question of what further conclusions might be drawn. But searching the web for what others have to say about color in web design brings up the expected contradictions and unsupported facts – for instance, did you know that
“white is associated with youth and freshness,”, or that “orange is associated with fun and youth?” What’s funny is that the first site cites the second for information.

So no definitive source exists. While I typically prefer data to back up guidelines, my desire for further guidelines led me to turn to what some of the seminal thinkers on form and color had to say about what colors mean. Wassily Kandinsky, the early abstract modern artist, developed his own theory of color early in the last century, one that has been much referenced by researchers following him in art theory as well as other fields. Why? Even if modern art isn’t your thing, its hard to deny Kandinsky’s talent (skill?) using color to produce effects on a viewer. The experience of viewing a Kandinsky up close, is, (imo), difficult to reproduce.

So what does he have to say? Blue, found to be effective in main navigation on sites, is associated with depth and restfulness; yellow is its opposite, the most aggressive, insistent, and disturbing color. The mid-point of these two “active colors” is green, a color that feels stationary as a result, and is thus even more restful than blue. Black and white, neither of which are “active colors” themselves, represent silence, but one (white) with possibility, while the other (black) brings up connotations of death or impossibility. These two opposites also combine to form an even more motionless, silent color, grey. Red is an intense warm color, but lacks the quality of reaching out to the viewer that makes us perceive yellow as so aggressive. Orange lies between the two in seeming closeness to the viewer. Brown is passive, and violet’s connotations depend on the amount of red/blue creating it.

What I like about Kandinsky’s ideas is that they are a basic guideline that describe the less tangible qualities (degree of seeming “motion”, for example) over focusing on more debatable connotations.

Use Causation to Convert Leads

Have time to read a blog post? What if I told you in just a few short minutes you could walk away with increased knowledge of persuasive design techniques?

B.J. Fogg, a well-known researcher in the land of web design and info architecture, who’s been influential in discussions of web credibility, is also the author of a book on Persuasive Interaction. In short, “captology” as he calls it, is the idea of computers as persuasive technologies.

One interesting idea Fogg suggests is using cause and effect to persuade potential customers to convert: Fogg uses the example of how using curve of a simple graph symbolizing the growing nest egg of a customer can be juxtaposed with an image of one of the luxury perks, such as a hotel or yacht, that could result of the savings. I like this idea, but immediately begin thinking of other ways to show cause and effect online. Before and after type pictures are one obvious idea. But not everyone responds to pictures; some like hard facts, some like charts. Is there a “best” or “correct” way to use cause and effect?

An email newsletter I came across this week emphasized this same idea, cased as describing a service based on its benefits, rather than the logistics of what it entails. Reading it I imagine “fluffy” web copy, the kind that harks of empty promises and turns me off personally as a consumer. Thus as straightforwardly effective as the idea sounds, the same quandary presents itself: how can I speak to a variety of potential consumers on the same page?

The basis of the question seems rooted in people’s differences when it comes to preferred levels of specificity and presentation-types. A little research turned up Dave Young’s great resource on tailoring web design to different types of decision makers. The video uses a 4 quadrant grid to dichotomize fast versus slow decision makers as well as emotional versus logical ones. My dissatisfaction with over-generalized web copy describing benefits results from being a fast, logical decision maker. I want anything I’m going to read online to be quick to get to the facts.

One question that still lingers after watching Young’s video relates to whether there is any risk in combining so many types of content in a single page/site. I am thinking both of the example contractor’s site that Young uses, and Fogg’s example above of the graph in conjunction with the picture. The latter combines not only symbolic and realistic representations, but also emotional and logical ones. It is a fact that many people are scared of numbers and graphs. Is there a chance that some emotional folks will be scared off by certain charts, or numbers displayed too prominently? On the flip side, I do feel there are limits to how much “soft” marketing content I can handle before I am scared off.

Examples of sites that go to far in combining types of content would be appreciated!

How can your landing page convert visitors that don’t care?

Seth Godin posted a couple of thought-provoking blog posts recently about online ads: Ads are the new online tip jar and a follow-up, Beating the status quo.

What Godin proposes is, when you read a blog, “if you like what you’re reading, click an ad to say thanks.” If everybody engaged in this behavior, it would over time change the model of online advertising so that ads would pull in more people but they would be less well qualified.

He writes that your landing page gives you the opportunity to “immerse someone in an entire page you designed. In other words, a chance to convert mild interest into big interest.”

This is the part that is particularly interesting to me. The idea of landing pages (at least at this time) is it fulfills the promise made in the ad the user just clicked on. The ad is meant to pull in only people that are interested in learning more. The landing page, in turn, is meant to speak to people who found the ad interesting and want to learn more about the product that was advertised or finding a solution to a problem they experience. Godin’s vision entails people clicking on ads that they don’t actually care about.

We would be challenged to put together landing pages that speak to the casual visitor. We would have to grab the attention of these less-motivated visitors immediately to keep them from leaving. When talking about the product or service, different messages will appeal to different people, but the more messages you try to pack into a landing page, the harder it will be to get through to visitors.

The answer, then, may be to try to suck in visitors through content that is entertaining instead of presenting a purely informative page. Will that strategy work for every business, though? Perhaps the answer lies in crafting the message on a landing page to clearly and loudly tell visitors why this landing page is worth their time.

Godin’s idea intrigues me but I am not convinced. He proposes that the value of this new model to advertisers would be “begin[ning] to reach the unreachable non-clickers.” It will be hard to reach visitors whose motive for clicking on an ad is not to learn more about what you are advertising, but rather to generate income for the blogger whose work they enjoy.

Is Your Website Too Hip For Search Engines?

If you want search engines crawlers to find your content, design your site so your text is text, not images. By hiding subject matter from search engines, you’re creating obstacles to good website rankings. It confuses me that anyone would decide to implement their site in a way that gets in the way of people visiting it.

Is this a “cool factor” that I am unaware of? I ask because a lot of sites that eschew text are creative organizations with amazing content; Flash may be preferred to text because of greater control over layout and appearance. Yet, unless done thoughtfully, Flash can completely interfere with search engine findability.

Below are a few examples of sites that are findable, more in spite of their websites than because of them. (The irony of annotating these with image-based text does not elude me.)


It appears the Beatles are popular enough that they don’t need their page content spidered in order to get top rankings. This pricey-looking page has practically no search engine friendly content. But it’s on the Beatles’ official site; John Lennon famously claimed that the Beatles were more popular than Jesus. Are you more popular than Jesus? No? Then don’t use images for text.


Weiden + Kennedy is my favorite ad agency. But their website not only obscures all of the incredible work they feature, it also looks pretty dated. Making all the text on this site visible to search engines would be pricey. But who can afford to have a website that’s hidden from search engines? W+K clients include Coca Cola, ABC, Starbucks and Nike, so maybe they can. But I still don’t see why they would.


A few of us around the office are really into the spontaneous public concert videos website blogotheque. Nearly all of the text on their home page is invisible to search engines. (See? They’re so cool I just had to link to you so I could tell you about them! Clooney.) Fortunately their detail pages, which contain much more text, make good use of html.

Subscribe to our blog

Never miss another post. Enter your email address and subscribe: