BlogmyQuery – BMQ

Because each website appeals to its audience differently, the prudent user experience designer takes a measured approach when communicating, especially when they do so on behalf of their client. No matter what the vision and no matter how it’s executed, a design can always communicate more effectively.

Online and off, we gauge the effectiveness of design—of communication—by its affect; in other words: what action(s) do people take after they give us their attention? Properly utilized, Web Analytics and Measurement helps us answer this fundamental question.

In the early days of the Internet, webmasters used hits (remember counters?) to gauge their website’s success. The logic went like this: if people liked what was written on a site, they would request that content more often. This made sense because, at the time, the web was largely state-driven. People navigated the Web one page at a time.

Today, however, that’s far from true.

As a consequence, analysts have turned their attention towards the constant in the Internet + User equation: the User. Instead of simply tracking hits, analysts track user behavior. Emphasis has appropriately gone from answering the question “what is the web server doing?” to “what is the user doing?” (Joshua Porter details this trend in his post User Engagement Metrics.)

Both the metrics and methods required to illustrate what our users do are nuanced. In this article we’ll take a closer look at how these methods inform our design process.

Back to topWhat is Web Analytics?

It’s nearly impossible to understand why someone does something online. How, then, can we possibly hope to evaluate trends across (potentially) thousands of viewers? As it turns out, it’s not so difficult.

Even with only a modicum of traffic, web servers generate a tremendous amount of data. Web Analytics tools were created to collate and refine this data. Typically manifested as web-based applications, Web Analytics tools (such as the popular Google Analytics) take data and, through a variety of computations, generate insightful charts and reports.

Unlike research methods—which are typically qualitative in nature—web analytics methods are decidedly quantitative. So instead of dealing with warm, fuzzy descriptions of problems (practically written by our users) web analysts look at reports based on cold, hard data about them. Where’s the love?

Louis Rosenfeld explains the conundrum:

…analytics tell us what is happening, not why. After detecting data patterns, we might guess what’s going on with reasonable accuracy. But we can’t know for sure unless we conduct qualitative analysis, such as actual user testing, where we can ask people why they do what they do.

Louis Rosenfeld

As a consequence, Avinash Kaushik motions to combine the two heretofore disparate disciplines with his definition of “Web Analytics 2.0:”

“[Web Analytics 2.0 is] the analysis of qualitative and quantitative data from your website and the competition, to drive a continual improvement of the online experience that your customers, and potential customers have, which translates into your desired outcomes (online and offline).”

Avinash Kaushik, Web Analytics 2.0

Marko Hurst calls this behavioral metrics. He explores this amalgamation in his recent presentation, User Experience by the Numbers.

Back to topWhat is Web Measurement?

If Analytics provides the tools, Web Measurement is the process by which those tools are utilized. Thus, Web Measurement helps us make and act on inferences from the aforementioned tools. Marko Hurst makes an uncanny parallel in his presentation Analytics & Gambling—How Similar They Really Are.

Because analysis is rooted in mathematics, it’s typically accomplished following a logical, deductive process. We start by defining outcomes, then we proceed to measure, monitor, and act on our analysis. Let’s briefly cover each:

Outcomes

We begin measurement by establishing a desired outcome, or goal. In other words, what do we want to accomplish?

For example, say you want to improve your company’s next email blast. Their mailing list contains 150,000 members; what action do they want recipients to take? Fortunately for us, this email contains a coupon—perfect.

Outcomes are best when they are both specific and quantifiable. Let’s set a hypothetical goal of six percent. That is, six percent of our 150,000 members should convert (9,000). Next, let’s set a deadline: if we send this email out on Friday, let’s give users 1 week to determine whether or not they found our offer valuable to them.

Measure

We begin measurement by determining what’s quintessential to our desired outcome. In other words, a metric is anything we can track, but we’re looking for what we should track. For email, we’ll want to take a look at delivery rate, open rate, bounce/invalid rate, click-through rate, etc. Based on our desired outcome, though, we’ll put supreme emphasis on conversions. Thus, conversion (using our coupon) becomes our Key Performance Indicator (KPI).

Monitor

Monitoring keeps you aware of and lets you know three things at all times:

1. Where you are at—1,000 successes after 3 days.
2. Where do you want to be?—9,000 in 7 days. At the current rate you’d need 27 days to achieve your goal.
3. How you will get there?—Your current path and actions are not going to cut it, so you’ll need to change something to still have a chance to achieve the desired outcome of 9,000 conversions in the next four days. This is your output or delivery item for this phase. It tells what item or items can and should be acted upon to still achieve your goal.

Remember—the greatest gift monitoring can give you is time to make adjustments and manage expectations before it’s too late, in this case after the seven days.

Act

Action helps us refine measurement endeavors based on the data we’ve received thus far. In the case of our hypothetical email blast, we could:

• inform stakeholders of this campaign’s outlook.
• send a blast to a new set of subscribers (in case we’re not approaching our goal).
• send a blast to the same set of subscribers (minus those that have already converted) as a reminder.
• change the title of the email or the call-to-action in the email—the equivalent to an A/B Test.

Back to topWeb Analytics luminaries

On Twitter

Back to topTools of the trade

Many different tools enable Web analysts to do their jobs. Here’s a selection of some of the most popular:

Google Analytics

Google Analytics is the self–described enterprise-class web analytics solution. What does this mean to you? Google Analytics gives you insight into your website’s traffic and marketing effectiveness through user session metrics, including bounce rate, keyword frequency, etc.

Google Website Optimizer

From their product page:

Which phrase will earn more clicks: “Add to Cart” or “Buy Now”? Should you use a photo of your product or a photo of someone using it? Or no photo at all?
Website Optimizer will find out. It shows the alternatives at random to your website visitors, then measures which versions lead to the conversions you want. And it’s all free.

MINT

Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages, and searches can all be taken in at a glance on Mint’s flexible dashboard.

KISS Insights

KISS Insights is a tool that allows designers to place a small survey bar across the bottom of their websites. Curious visitors can take a peek and are then presented with a simple survey in which they can evaluate the experience design of your website.

4Q

The 4Q Online Survey is a free online survey solution that allows you to find out why visitors are at your website, and whether or not they are completing their tasks (and if they aren’t, what’s getting in the way?).

ClickTale

ClickTale captures every mouse move, click, scroll, and keystroke that a visitor makes inside a webpage, and then sends this information back to the ClickTale servers in a highly compressed package. In addition, ClickTale takes a snapshot of the webpage as it was experienced by the visitor, and combines it with the recording to recreate the original browsing session.

PostRank Analytics

Engagement events are individual activities performed using specific social networks, sites, or applications. One tweet is an engagement event, for example as is posting one comment, or voting one digg. PostRank tracks these events and gives analysts the tools to extrapolate meaningful insights from this data.

Compete.com

Compete.com is a simple tool for gauging a website’s traffic versus that of its competitors. Compete also allows members to track that data over time to make calculated decisions based on their competitor’s strategy.

Quantcast Planner

Quantcast Planner lets you search, rank, and sort millions of Web properties in real-time according to the criteria that matter to you, including audience age, gender, ethnicity, income, education, and geographic location as well as constraints such as property size, content category, and ad acceptance. They claim that once you identify your audience, you can “buy” that audience.

Icerocket.com

Icerocket is a simple off–site analytics tool that gives interested parties a glimpse into the latest chatter going on around their website.

Back to topWeb Analytics Books

• Web Analytics: An Hour a Day
• Web Analytics 2.0
• Landing Page Optimization: The Definitive Guide to Testing …and Tuning for Conversions
• Search Analytics
• Advanced Web Metrics with Google Analytics

If you’re itching for more UX tools, checkout our articles: Top 29 Free UX Tools and Extensions and Information Gathering: a Roundup of UX Applications.

Back to topAdditional Resources

• Why Bloggers Need Analytics and Usability Testing
• How to Increase Site Performance through A/B Split Testing
• Using Google’s Website Optimizer to Improve Customer Experiences
• Successful Web Analytics Approaches by Avinash Kaushik
• A List Apart Issue 292: Triple issue on UX and Search

Editor’s Note

Many thanks to Marko Hurst and Louis Rosenfeld for their contributions to this article.

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

Logo design has been a controversial subject in the design press lately. One branding professional recently claimed that logo design is not that hard to do and another said that logos are dead; some rebutted while others concurred. Why all the fuss?

We live in a Brand Era, where branding is in, and for some, aspiring to the Paul Rand style of logo craftsmanship is about as hip and contemporary as writing your invoices with a quill. Yes, logo design is only one facet of the powerful force that we call brand identity. Yes, a branded design environment can communicate sophisticated brand meaning without much (any?) usage of logos. But some ‘brand gurus’ or ‘brand evangelists’ (translation: ‘bastions of corporate pretension’) seem to enjoy making hyperbolic pronouncements just to sound shocking or cutting-edge. Logo design is not dead. The technological advancements and tumultuous industries of our century are causing its role in our culture to evolve.

Perhaps this clamorous debate is cause for a look at where logo design comes from, what state it’s in currently, and where it’s headed in the future. Where does a logo ultimately derive its power from? If we’re so hung up on divining what this Brand Era means for our clients, can we envision a Post-Brand Era?

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Symbolism

The history of logo design begins with the roots of human expression. In fact, the fundamental power of symbols remains most important element of logo design. A logo has meaning because it draws on centuries of signs and symbols (including the alphabet) in human literary and visual language. A logo designer who uses an image of an apple, for example, is drawing on centuries of potent symbolic usage. For most Western viewers, the image of an apple summons our associations with nature, food, the ‘forbidden fruit’ in the Garden of Eden, Snow White, Apple computers, et cetera. To design a logo with symbolic resonance is to participate in the lineage of social dialogue.

Fragment of a vase, third millennium B.C. The figures on this vase bear a striking similarity to the cave paintings of Lascaux and even to contemporary imagery like the Puma logo. These similarities reveal the harmony and union of human communication over great distances of time and geographic location.

To communicate effectively with design, it’s important to view the big picture of human communication and mythology. Logo design as we know it today is a strategy that rose to popularity with brands and corporations of the twentieth century. However, people and organizations have been identifying themselves with an enormous variety of marks, signatures, and emblems for centuries. In terms of visual communication, a modern company that represents itself with a logo, color scheme, and slogan is not very different from a 15th century royal court that invoked identity and unity through the use of family crests, uniforms, and religious symbolism.

In semiotics (the study of signs and symbols and their use or interpretation), human communication is discussed in terms of signs and signifiers. Signs can take the form of words, images, flavors, or even odors: things that have no intrinsic meaning until we invest it in them. We perceive, understand, and negotiate the world around us by investing meaning in all manner of signs and symbols. In the West, an image of a snake signifies evil. But without our Western cultural and mythological associations (many of which are rooted in the Bible), a serpent is just a serpent.

Greek signature seals, fifth century B.C. Affluent Greek citizens used these molded stamps to sign or endorse documents. Using an animal image to identify oneself has a long history predating famous animal logos like Lacoste and Penguin.

Symbols are highly subjective and dependent upon cultural reference. The swastika, for example, is a symbol that was used by various cultures across the globe for over 5,000 years to symbolize a variety of positive meanings including good luck, life, sun, power, and strength. In fact, the word swastika comes from the Sanskrit svastika, which means “good fortune” or “well-being.” Sadly, those meanings have all been usurped by the atrocities of the Nazi party. No symbol has inherent meaning of its own, but when maligned by indelible association with war and unspeakable tragedy, a simple symbol like the swastika can be transformed into a potent talisman capable of eliciting an intense reaction from the viewer. Our complex emotional responses to rudimentary images reveals the profound depth of our relationship with the visual world around us.

The meaning of a logo is often an elusive concept, and two top professionals may disagree about whether a particular logo is a masterpiece or an abomination. This subjective nature of meaning in logography is part of the beauty and wonder of the craft.

Historical Identifying Marks

A wide variety of stamps, symbols, and signatures have been used to identify people over the centuries. Here are a few.

Printer’s marks, late fifteenth century

The printer’s marks above are variations on an ‘orb and cross’ theme, symbolizing the idea that “God shall reign over Earth.”

Aldus Manutius, printer’s trademark, c.1500.

This printer’s trademark symbolizes a beautiful paradox. It was used in conjunction with an epigram reading “Make haste slowly.” Swiftness is visually represented by the speedy sea animal and stillness is represented by the anchor.

Rembrandt ‘branded’ his authorship on his paintings with a variety of signatures during the course of his career, but the distinctive ‘R’ and unique personality of the letterforms provide unity to the marks.

Corporate Identity

The industrial revolution profoundly expanded the reach and power of mass production and the marketing used to promote it. Corporations now found that a simple identifying mark was insufficient for distinguishing themselves amongst growing competition in broadening markets. “The national and multinational scope of many corporations made it difficult for them to maintain a cohesive image, but by unifying all communications from a given organization into a consistent design system, such an image could be projected, and the design system enlisted to help accomplish specific corporate goals.” (Meggs’ History of Graphic Design, by Philip B. Meggs and Alston W. Purvis).

In other words, the logo was now being used as one element in a broader system of visual elements used to identify the entire output of a corporation — many of which were becoming larger and more powerful than any had every been before.

Here are some notable developments in the evolution of identity design.

Wiener Werkstätte

The Wiener Werkstätte was a manufacturing and marketing enterprise founded in Vienna in 1903 — decades before graphic designers were doing work that was officially recognized as corporate identity. This group of craftsmen and designers were true trailblazers.

Marks of the Werkstätte, left to right: Werkstätte monogram, rose logo, logo for Galerie Miethke designed by Kolo Moser

Wiener Werkstätte letterhead printed in ‘Wiener Werkstätte blue,’ 1914. The group’s obsession with squares and grids is evident here.

A trademark was proposed for the Werkstätte, but designer Josef Hoffman proposed a complete graphic identity. The appearance of the group’s letters and articles was unified by four elements: the Werkstätte’s red rose symbol plus the monogram marks of the Werkstätte, the designer, and the producer. These standard elements, along with the use of the square as a decorative motif, were used to design everything from invoices to wrapping paper.

Now that’s dedication to designing an immersive brand environment: the Werkstätte logo forged into the handle of a cupboard key.

Identity Masters

Westinghouse logo and annual report designed by Paul Rand

Extraordinarily influential designers like Paul Rand, Milton Glaser, and Alan Fletcher helped shape the graphic identity of consumer culture during the second half of the twentieth century. Rand, for example, designed many ubiquitous logos and his varied identity work for IBM became a benchmark in the industry. These great designers have been covered in depth elsewhere (check out ‘The world’s best logo designers?’ by David Airey), so we won’t spend too much time on them here.

Music Television

“The move of information from the printed page to other media has changed the nature of graphic identity. The MTV logo, which emerges from an unexpected metamorphosis, is probably the ultimate in animated identity.” -The New York Times, September 1996

The MTV logo was designed by the now-defunct studio Manhattan Design in the early 1980’s. Former Manhattan Design member Frank Olinsky tells the story behind the creation of this logo here.

This logo was a revolution in corporate identity because it adapted to the language of television and shattered standing notions about the ‘rules’ of logo use. In the early 80’s, television had become a ubiquitous medium. The MTV logo adapted to the nature of this medium by exploiting the speed and motion of the moving image: it was regularly animated, shattered, decorated, erased, and reborn in the course of a brief station identification spot. This showed that logos could be adaptive vessels for graphic identity and demolished the notion that trademarks should always be presented in a consistent, static form. The logo had evolved to fit the culture of the television era.

The Brand Era

“In order to be successful multinational corporations, you need to produce brands, not products.” -Naomi Klein

Lebron James is deified in a Nike desktop wallpaper ad. The Swoosh is tiny; the brand is huge. For some, Nike epitomizes successful branding. For others, it’s the poster child for deceptive marketing, sweatshop labor, and unethical business practices.

Now that the whole world has been branded, the Twentieth Century approach to branding is old school. I’ll call our present day in age the Brand Era. The logo has evolved from a mark of quality on a product to a visual distillation of a cultural ideal — one that’s capable of accruing or asserting brand equity in a variety of marketing environments and inspiring great allegiance among consumers. “In this corporate formula,” says Naomi Klein, “the brand has little to do with the life of the product. Rather, it is a free-standing idea. The goal of the successful brand has become nothing short of transcendence from the world of things.”

In this twenty-first century brand space, Nike is no longer a shoe company — it is a concept that represents transcendence through sports. Consider the Nike ad above: Lebron James is deified in a Christ-like pose and with religious language (‘witness,’ ‘believe’), both of which imply spiritual transcendence. In the case of Michael Jordan, the star was granted superhuman powers in Nike ads (picture him achieving flight, suspended midair en route to the hoop). In the corner floats the simple, austere Swoosh. In this context, the logo is a sponge, soaking up the ‘brand equity’ created by themes of transcendence and flight as well as the basketball star’s fame/endorsement/deification.

‘Brand evangelists’ now use all kinds of lofty language to describe ‘brand worlds’ and ‘branded landscapes.’ At best, this kind of language describes creative brand strategy that can provide organizations with an innovative approach to defining themselves in today’s corporate culture — a place where tumultuous economies and rapid technological change require constant adaptation. At worst, this kind of behavior is an attempt to pull the pretentious wool over the novice client’s eyes, using ostentatious language to leverage the sale of mediocre design and commonplace brand strategy. None of us entered this field to become snake oil salesmen, so don’t pitch like them.

A Post-Brand Era?

Ask someone standing in Times Square if logo design is dead. Image: ‘Times Square Parade’ by Alexander Chen

In this era, the brand is bigger and more powerful than ever. Brands have become so big that some people have logo tattoos (physically branded with a brand) while celebrities like Martha Stewart and Oprah Winfrey have successfully developed themselves into personal mega brands. Brands like Nike have transformed themselves into lifestyle choices that consumers can integrate into their own identity. How much further can we go? What comes next?

Naomi Klein has noted that the many successful brands have already achieved “transcendence from the world of things,” meaning that the dissemination of a brand’s identity has become more valuable than its production of physical commodities. Technology will soon liberate brands from the visible world even further, as companies enter the fields of nanotechnology, synthetic life production, virtual space, and more. What will ‘brand identity’ mean for a person who has branded cells injected into their body to eradicate cancer? And you thought the favicon was small. Brands will occupy startling new environments (like the bloodstream) in the 21st Century.

The MTV logo famously introduced a logo that could undergo a costume change during every performance. How else can a logo break the rules to adapt? Is there a way to explode the logo, to decentralize it? What about a logo that consisted of separate elements that could be displayed on their own or joined together to create a unified whole? If branded products exist on a molecular level that’s invisible to the naked eye, could they project external holographic brand identity?

The role of brand identity in the future remains to be seen. But it appears as though — barring the apocalypse or some Naomi Klein-inspired activist revolution — brands will continue to expand into new areas. Just as most industries are dealing with abrupt transitional periods due to the disruptive effects of technology, so is ours. In fact, their transitional periods become our transitional periods, because they are our clients.

As brand identity designers, merely designing a logo for a client is not good enough. It is also unacceptable to stand on the cultural sidelines or design with our heads in the sand. We must be students of the changing cultures around us. We must take active roles in the use of design to strengthen and navigate the futures of the industries, people, and causes we believe in.

The Road Ahead

For now, brand identity design is thriving. Branded design environments (like a website with an integrated design strategy expressing brand qualities) can coexist with traditional logo design. In the future — as always — it’s creative thinking that will lead the way. One valuable asset will be the willingness to take a risk when it comes time to develop a strategy for a brand’s visual persona. The faster technology propels our culture, the more design risk-takers we’re going to need.

Whatever changes may come, one thing will remain. As graphic artists and designers, we possess the power (just as any two year-old with a crayon does) to ascribe meaning to the world around us. We put an expressive face on raw information. The fundamental desire of humans to understand the world in visual terms is a desire that we can understand and foster. Graphic design’s ability to provide meaning and useful information will prove more valuable than ever during uncertain and challenging times.

Partial Bibliography

• Typography and Graphic Design: from Antiquity to Present by Roxane Jubert
• Meggs’ History of Graphic Design by Philip B. Meggs and Alston W. Purvis
• Graphic Design: A Concise History by Richard Hollis
• No Logo by Naomi Klein
• Wiener Werkstätte: Design in Vienna 1903-1932 by Christian Brandstätter

© Dan Redding for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: