You Are Browsing The Web Design Category

Google 2.0

February 02 2010 // SEO + Web Design // 1 Comment

Google has recently been trying to streamline search results as the number of universal search elements grows. It's what Marissa Mayer, VP of Search Products and User Experience, calls 'user interface jazz'.

Solving Google's Jazz Problem

Recent attempts to solve the jazz problem have revolved - primarily - around a left contextual navigation pane. Whether it is always exposed or only introduced when clicked, Google seems sure that this is the way to solve search overload.

But is it really?

Google and Web 2.0

Google is rooted firmly in Web 1.0. There's (clearly) nothing wrong about that. Yet, the interface hasn't changed all that much as the web has evolved. While Mayer acknowledges the bimodal world of screen sizes (larger desktop screens but smaller mobile interfaces), does the interface fully acknowledge and take advantage of these advancements?

The Splinternet is real and seems only to be expanding with the launch of the iPad.

New User Interfaces

Some of the most interesting new interfaces are far more visual and horizontal in nature, allowing the user to digest more information at a glance. Think about what Google search results could look like if they used an interface like Lazyfeed or the Times Skimmer.

Google 2.0

Here's a quick Frankenstein of what Google 2.0 could look like using a bit of Google's Jazz UI and the Times Skimmer.

Google 2.0 User Interface

One or all of these results or panes could update in real-time. Another could present a fully embedded video. Yet another could present thumbnails for image matches. The possibilities, while not endless, are numerous.

I've kept the left hand navigation, but you could just as easily do without it. In fact, that would better adhere to Google's search motto: don't make the user do something we can do for them.

Google Takes The Safe Route?

Of course, Google would need to determine how to present AdWords effectively in this environment. Perhaps the fear of disrupting AdWords revenue is why a major UI change isn't in the cards. But this seems like a contradiction in how Google sets goals and measures success.

Achieving 65% of the impossible is better than 100% of the ordinary – Setting impossible goals and achieving part of them sets you on a completely different path than the safe route. Sometimes you can achieve the impossible in a quarter, but even when you don’t, you are on a fast track to achieving it soon. Measuring success every quarter allows for mid course corrections and setting higher goals for the next quarter.

Maybe Google has already tested radical new UI with unsatisfactory results. Or maybe Google is taking the safe route, thinking that the search interface can remain relatively static as the web transforms.

Is Google really doing enough to solve user interface jazz?

Comcast Upgrade Disrespects Customers

October 31 2009 // Rant + Technology + Web Design // 1 Comment

Saturday is bill paying day. One of those bills was Comcast. I'm signed up for automatic payments but I generally check to make sure everything is okay. I'm a bit paranoid that way and it usually only takes a few minutes with a cup of coffee steaming next to me to confirm that all is well.

Comcast was last on the list since I review my bills in reverse chronological order and the Comcast bill notification arrived in my inbox on Friday.

Comcast Fail

I clicked through on the bill and entered my user name.

comcast fail

I tried three times, paying special attention to ensure I didn't fat finger something. Each time, same thing.

So I contacted customer support using their Live Chat feature. I was quickly connected with Vanessa who after a brief back and forth provided this explanation.

Vanessa > I wish to inform you that we did an upgrade with our system and we merged the 2 accounts which is the comcast.net and .com

Vanessa > And due to this upgrade since you do not have internet service I am afraid that you need to register it again online, AJ.

That makes as much sense as a fish riding a bicycle! To Vanessa's credit she was apologetic (even though it wasn't her fault) and very helpful. Thank you Vanessa.

Comcast System Upgrade?

I'm not an engineer or a coder, but I know enough to know that a database merge can be done far more elegantly. Boiled down, isn't this a simple left outer join?

Even if there is more complexity (and there usually is) wouldn't it be wise to deal with those issues instead of inconveniencing your customers?

Comcast Error Messaging

Even if Comcast chose to go ahead as planned, they could have avoided in-bound customer service issues by applying proper error messaging.

A simple statement about a system upgrade requiring users to re-register would have made the situation clear. Inconvenient but at least Comcast would have provided an immediate answer to the problem they created.

But here's the rub. You need your account number to register!

That account number is not on the billing email and since I use paperless billing I have no material with my Comcast account number. No matter what, I'd still have to contact customer support to retrieve my account number.

Comcast Customer Service

Despite the buzz Comcast has generated around their use of Twitter they still don't seem to understand customer service.

If they did, they'd have created use cases from a customer perspective and realized that this upgrade would be detrimental for users and would cause added customer support costs.

AT&T U-verse is looking better all the time.

Are you Canadian?

October 13 2009 // Advertising + Marketing + Web Design // 6 Comments

Two weeks ago my wife dug out some Fall felt stickers from the closet for our daughter. Delighted, my daughter stuck one of them on my shirt before I walked out the door to work.

It was a red leaf.

Red Leaf

Being a bit sentimental, I left the red leaf on my shirt for the day. That decision led to a renewed appreciation for the power of iconography.

Are You Canadian?

That was one of the first things a co-worker asked me that day. The question seemed rather random and out of left field. In reaction to my puzzled expression, he pointed to the red leaf.

Later that day another co-worker asked if I liked maple syrup. And yet another started up a conversation about the upcoming hockey season. (Go Flyers!)

The Power of Iconography

I suppose it does look like the Canadian maple leaf. And the sticker was out of place and likely attracted attention. But all that aside, I wasn't wearing a Canadian flag sticker. It was a simple, small red leaf.

The meaning that this red leaf conveyed was impressive. A single red leaf created an instant association with Canada and then, like a needle skipping on a vinyl record, to maple syrup and hockey. A stream of data, of experience, of knowledge, was trapped inside that red leaf.

How does that happen?

Semiotics

Semiotics, or the study of signs, helps explain how a simple red leaf can have such a profound impact. The field of semiotics is both dense and ambiguous, filled with academic rhetoric and debate. Even a beginner's guide to semiotics clocks in at over 5,500 words.

The main elements of semiotics are syntax, semantics and pragmatics, described in as follows in an icon design article.

  • Syntax: the internal grammar of parts that enable a properly formed sign to be parsable by someone or some system—think of the computer throwing a “syntax error”
  • Semantics: the intending meaning of the sign by the maker(s) of it
  • Pragmatics: how the sign is received, perceived, and acted upon by some person or interpreter by the confluence of syntax and semantics; the resulting effect

Pragmatics is where it really gets interesting in my opinion. Pragmatics deals with the impact of context and experience as it is applied to the perception of signs.

Now, back to the red leaf.

The syntax is fine. You know it's a leaf. However, the intended meaning (semantics) changed through the prism of pragmatics.

The bag of colored leaves was intended to be a sign of Fall. Yet, the one red leaf taken out of context is instead perceived to be a sign of Canada, which opened up a whole new flood of associations based on personal experience and perspective.

Icons and Marketing

The Internet is a vast landscape of icons. My red leaf experience reminds me that iconography can be a very effective marketing tool. It is done wrong and badly for the most part, but when done well can have a tremendous impact. (For more on semiotics and advertising I recommend the retro semiotics hypercard essay from Thomas Streeter at the University of Vermont.)

The challenge is figuring out how to create icons that unlock that stream of data. Creating icons that tap into shared experiences and personal histories can deliver a tone to your website that you simply can't convey otherwise.

The Icon Test

Sometimes you're capitalizing on ancient archetypes and sometimes they can be recent and repetitive shared experiences. Don't believe me? Lets try a little icon experiment. I'm going to show you an icon of sorts.

Tell me what you instantly think about after seeing it.

Twitter Bird Icon

Post the first three words that came into your mind in your comment.

Nofollow Change is about Usability

June 29 2009 // SEO + Web Design // 2 Comments

The SEO community was thrown into a tizzy by the announcement at SMX Advanced that Google had changed the way it dealt with nofollow links. The details were a bit fuzzy. Conjecture ran amok. Was nofollow page sculpting dead, or just crippled?

Nofollow page sculpting is dead

A post by Matt Cutts cleared up any confusion.

So what happens when you have a page with “ten PageRank points” and ten outgoing links, and five of those links are nofollowed? Let’s leave aside the decay factor to focus on the core part of the question. Originally, the five links without nofollow would have flowed two points of PageRank each (in essence, the nofollowed links didn’t count toward the denominator when dividing PageRank by the outdegree of the page). More than a year ago, Google changed how the PageRank flows so that the five links without nofollow would flow one point of PageRank each.

Lost Page Rank

The days in which you could hoard page rank or authority on a few links by nofollowing others is a thing of the past. (In fact, has been in the past for over a year!)

Instead, the page rank or authority on nofollow links is lost, falling into the equivalent of the Bermuda Triangle.

SEOmoz wrote up a great piece that illustrated this point and detailed ways in which you can continue to page sculpt without the use of nofollow. Though doing so might not be wise. Read on to find out why.

Nofollow change outrage

Many in the SEO industry became irate. They shouted and stomped their feet, decrying the whimsy of Google, who in 2005 introduced the nofollow concept, nurtured it (to a point) and changed the rules without notice.

The changing nature of SEO is what keeps most agencies, consultants and talking heads in business. If the algorithms were transparent and had been perfected then no one would need our services.

The truth is that the algorithms are a work in progress. Search Engines are like blind five year olds and, as such, are still learning. If you're a parent, you know that as soon as you figure out how to deal with one problem your kid has moved on and given you another one to solve.

I mean, really, are you still grousing about how meta keywords are no longer important?

So why did Google make this change? Well, it wasn't to target specific people or sites. And it wasn't malicious or to make your life miserable. The truth is that the nofollow change is about usability and Google's continuing efforts to make the web more useful for people.

Nofollow change is about usability

The problem with nofollow was that it didn't allow the search engine to look at the page like a human being. If you nofollowed 20 links out of 25 on a page you were essentially telling Google that only 5 links existed.

But to a human being, all 25 links exist.

The fact that you were telling Google that those 5 links were what mattered most isn't how a human being would interpret that page. This made Google unhappy.

Nofollow Design Guidelines

Yes, Google does have design and content guidelines.

Keep the links on a given page to a reasonable number (fewer than 100).

The nofollow change essentially means that they're counting your nofollow links against that 100 link benchmark. Translation. Stop putting so many links on a page!

Many at Google point to Barry Schwartz's The Paradox of Choice as a favorite in the Google Tech Talk series.

The one hour video is absolutely worth watching but, to make a long story short, more is not better because more makes it difficult for someone to make a choice.

The Paradox of Choice applies to web design and user experience too. In a time compressed society with broadband access and tabbed browsing, you have a limited amount of time to communicate what your site is about and where they should go next. Overwhelm your users and they'll run screaming to the next tab.

Search engines are simply trying to emulate the human experience. That's not an easy job. It's essentially designing artificial intelligence! Remember, right now a search engine will always fail a reading comprehension test.

Instead, search engines have to model the ability of humans to parse a site. The nofollow attribute interrupted that model. It forced the search engine to see authority where a human user might not. The nofollow change removes this bias and also pushes sites to design according to that model by tossing nofollow page rank and authority into the Bermuda Triangle.

The real nofollow question

Google is serious about this mission, which is why it has begun to execute JavaScript, another favorite way to obfuscate links without using nofollow. There are still plenty of ways to hide links and sculpt your page rank or authority but it seems clear Google feels it needs to see all the links on a page to properly evaluate how it is being processed and interpreted by people.

The nofollow change is a not-so-subtle push to encourage sites to simplify. Not just so the search engine can better understand, but so people can better understand too.

The real question resulting from the nofollow change is far more thought-provoking.

How comfortable are you with Google shaping user experience?

Call To Action Button Size and Color

February 08 2009 // eCommerce + Marketing + Web Design // 3 Comments

In December I said that testing your call to action should be at the top of your New Year’s resolution list.

On the Internet the call to action often takes the form of a button. So while words still matter, there are other dimensions to consider.

Thinking about the size, shape, color, and placement (among other characteristics), our findings indicate that future testing could reveal surprising – and positive findings – based on changes to the download button.

That's an excerpt from a post (The Download Button Drives Downloads) on the Mozilla Blog of Metrics. By the way, they're absolutely right.

Call To Action Button Size

Your call to action buttons should be big and obvious. If you abide by Five Foot Web Design principles you should have no problem seeing the call to action when you take a few steps back from your monitor. If you can't see it, your users are likely to miss it as well.

Here are a few examples of sites who got it right.

Dropbox

Dropbox Home Page

Intense Debate

Intense Debate Home Page

Songbird

Songbird Home Page

WordPress

Wordpress Home Page

Size can be relative based on the placement of the button and other design elements on the page. Your call to action button doesn't always have to be huge but ... you're probably better off with it being bigger rather than smaller. (No jokes here please.)

Don't be afraid to make your offer! Be confident. Not doing so is a subliminal sign to users that the product or offer isn't valuable.

Call To Action Button Colors

Size is a relatively easy subject to tackle. The color of call to action buttons, on the other hand, is a hot topic. Jonathan Mendez (who you should be reading) touts the use of red in his 7 Rules for Landing Page Optimization.

Tell your brand team to go to hell and throw your styleguide out the window. Red buttons can by themselves raise your conversion rate. Green can be good as well but most times in our testing if color matters it is red that wins.

Not everyone agrees that red is the answer. And clearly none of the examples above took this advice to heart. Yet three out of four (Songbird being the outlier) have buttons that adhere to the site's current styleguide and color palette. So who's to say red wouldn't provide a boost in conversion rate.

Why is color such a big deal?

Research reveals all human beings make a subconscious judgment about a person, environment, or item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. [Institute for Color Research]

Each color is associated with different emotions and meanings. The 'red' debate revolves around whether the benefits of the color - passion, desire, excitement - outweigh the drawbacks - anger, danger and debt.

Red should be used sparingly, so as not to overwhelm users, and should also be first on your list of colors to test on your call to action button.

Lets face it. The speed of our society has accelerated and time is perhaps our most guarded resource. A site has a very short window to capture, retain and direct a user. So red doesn't sound like a bad idea. In fact, any contrasting color might do the trick.

Ogilvy on Advertising

Less talked about is the color of the text on the call to action button.

David Ogilvy, often called the Father of Advertising, made black text famous in his book Ogilvy on Advertising. (Yes, the man practiced what he preached.)

Yet the overwhelming number of call to action buttons use white text on a colored background. Ogilvy would certainly have thrown a fit if he saw white text on black.

Three out of the four examples above (Songbird being the outlier again) use reversed out text. Is that a lost opportunity?

Don't forget to try a black text version when testing your call to action button.

You've got nothing to lose and everything to gain by testing the words, size and color of your call to action buttons. It is one of the easiest things you can do to improve your business.