Archive for the 'QuickTip Sundays' Category

If you didn’t notice, I made a few changes on the site, and it was easy — I let the data do the changes based on site traffic.

This was based on a year of site traffic data through Google Analytics.

Removing the tag cloud

This is a conversation that I’ve had a few places.

I feel tag clouds are useless pieces of Web 2.0. Most executives think they make great demos. Users could care less.

Now I have the data behind the argument.

The highest tag from a page view perspective was requirements gathering, at 160 pages (39th highest request). After that it was usability (at 76). Silly Saturdays clocked in at 122.

Almost no traffic.

Tag cloud — gone.

Promoting content higher

A few posts, specifically Seven Reasons Why Agile And Scrum Works For Web User Experience which got thousands of views, I promoted to a new area for Top Posts. I’ll rotate posts through that region, but going through the data a few posts got a significant amount of traffic.

If users want to read certain content, they can have it!

Removing links

The links on the right generated almost no traffic, so I removed a lot of them. I do think it’s good to have some resources for users, but they’re more often than not clicking on them within the body of an article, not in a sidebar.

Links, gone!

From 25 User Experience Videos That Are Worth Your Time:

In this half-hour session held at the IA Summit 2008, Leah Buley of Adaptive Path shows what it means to be a UX team of one by telling her own story and recounting a real-life example. Leah explains the concept of generative design, which is the process of creating and sketching a lot of different ideas and then refining them. The slides are amazing because Leah drew them by hand.

From Adaptive Path. Good presentation, yo.

Untangling brand and customer experience, in 10 minutes or less from Brandon Schauer on Vimeo.

From Bokardo:

Ironically, the smallest bits of copy, microcopy, can have the biggest impact.

Microcopy is small yet powerful copy. It’s fast, light, and deadly. It’s a short sentence, a phrase, a few words. A single word. It’s the small copy that has the biggest impact. Don’t judge it on its size…judge it on its effectiveness.

One of the biggest misconceptions about the web is you just design it, and don’t worry about copy.

Copy has such a big impact, more so than design in some cases.

I’ve been wanting to do this for a while (because I’m sick of trying to view the blog on my iPhone), and it took a while to plan what I wanted to do with it.

Launched this weekend was the mobile version of UsabilityCounts.com. The home page viewable at mobile.usabilitycounts.com, and i’m working on enabling the whole site at that URL. Most mobile devices should automatically detected and show the right version.

Twitter users that view the site on the iPhone, cheers, and enjoy.

Here’s what I did:

A unique design depending on the device

You can use CSS to handle a different display, but you should do it using server-side technologies, because the whole point of a mobile device is to deliver an experience that has less graphics but is still functional. Delivering a site that is 200k on a limited device with lower than DSL bandwidth doesn’t make sense. To do this, I’ve been slowing ripping apart the TypoXP theme of WordPress for purposes of simplication (most WordPress blogs are overcomplicated in their usage of CSS).

When the site loads, it does an initial detection of the User Agent: Blackberry, Android, iPhone and iPod are the currently supported devices, and you can see a  list at Wikipedia. The pages load different content for mobile devices — the web version is heavier, where as the mobile version contains just HTML and a couple of backgrounds and icons for navigation only. WordPress has a set of function calls that makes it easy to show different content depending on how you want it triggered.

I also added the following HTML tag:

<meta name=”viewport” content=”width=480; initial-scale=0.63; maximum-scale=1; user-scalable=0;” />

The iPhone assumes the screen is 960 pixels wide, so there is the new META tag specified called viewport for mobile devices. The iPhone technically is 320 wide by 280 tall in portrait mode, but I set it to 480 pixels wide and adjusted the initial scale to preserve current content. More on that later in the post.

I used CSS style sheet but did not declare it as a mobile style sheet.  I would I like to think device manufacturers properly identify their devices, but I know better because I’ve been doing this for too long (and don’t even get me started on Netscape 4.72).

Keep It Simple, Stupid

I did research using other content sites, like the NYTimes application for the iPhone, which I think is one of the best applications on the market. I selected a very similar design approach: allowed for the display of 30 articles at a time, and enabled paging of those articles, and designed around a single column of content.

I figured people were getting very used to scrolling on the iPhone, and designed with that in mind. Common use cases I could see someone reading the site would be while using mass transit or eating lunch.

Once a user was within an article, I kept the same format without the Twitter feed links. Below the article the user could see other recent articles, encouraging browsing of the site. In the future, I’m going to be adding pages where users can view lists of articles by tag.

For the CSS, I avoided a lot of the tricks like hover because they seem pointless in a mobile environment. I figured users would be most appreciative of a simple interface without all the bells and whistles that are reserved for web displays.

Adjust appropriately to use existing content

I planned for a 480 pixel wide maximum width of the content originally for the blog (by no mistake). To make it look good on the mobile device, I had to add 10 pixels of padding around the content. This required adjustment of the viewport values to handle the YouTube and other video content I post in the site.

The values I picked are listed below:

<meta name=”viewport” content=”width=480; initial-scale=0.63; maximum-scale=0.63; user-scalable=0;” />

Initial scale was set below two-thirds because I wanted the videos and image content to scale within the window. YouTube supports the iPhone well. When you select one of the videos, the site is automatically launched. The CSS type is set bigger to account for the initial scale, thus I can use all of the existing content without changing it for those using web browsers.

Make targets big

Dan Saffer writes about this in the book Designing Gestural Interfaces, but I’ll explain it in English: Most people have fat fingers, so it’s a good idea to have fat targets.

Dan advocates the target area be at least one centimeter square, so I adjusted the UI appropriately, including larger than normal search boxes, comment boxes, and the links to the articles are quite a big larger than most websites.

Test on the official manufacturer simulators

The good news is that Apple and Blackberry have applications to test the emulators on. The bad news is that you have to sign up for their programs (which you can do for free) to download the simulators. The Apple iPhone Simulator comes part of the xCode package, so it’s quite a download. Once you have installed it, it’s great at simulating the experience of a website on an iPhone.

Most of the “free” simulators aren’t very effective and don’t give a true experience, so I limited it to using the official iPhone application. I also tested the site on my iPhone, and there was no difference.

Once I get the Blackberry simulator installed, I’ll give you the results. I’m still having difficulties.

Online Marketing Summit is one of my clients, and I’ve been working with them on doing some slight changes to redesign their site. The base design was very attractive and functional; we’re going through the process of making improvements to make the site more usable and effective. The Online Marketing Summit has a very strong core audience, but they need to reach out to new attendees in regional markets that could benefit from these networking and educational events.

How did we attempt to make it extremely clear?

It’s called Online Marketing Summit for a reason

Just the title alone is a great draw.

It’s a long company title (and even longer URL), but there’s no question the people that get to the site are potential attendees, which in other words guarantees targeted users. It’s not clever, it’s not cute, it just states exactly what the event is about: online marketing. The partnership with ClickZ adds extra credibility because they are a website that’s very popular with online marketing professionals.

Som websites use a motto or a headline that’s way too vague — most of the time, it’s just better to say exactly what the product or event is, and how it will benefit them.

The navigation at the top of the site clearly states this is an event. “Cities and Agendas”, “Register Now” and “Speakers” doesn’t make it seem like an e-commerce site, that’s for sure.

Use headlines that clearly state why an attendee would want to go

The headlines and each action item we used were:

• What: Join The OMS Regional Whistle Stop Tour
• Why: Learn from the Marketing Experts
• How: “Next Steps”
• When and where: Event cities and dates

Additionally, we emphasized particular words in the main call to action graphic (“best practices”, “expert online practitioners”, “share ideas”, “marketing peers in 13 cities”) that may attract attention. Sometimes content gets lost in the mix, so emphasis of certain words helps the user scan content. Don’t over do it though.

Call to actions are very clear and allow for active or passive participation

All of the call to actions were labeled with active words (“Register Now”, “Get Updates”, “Get Certified”, “Win A Free Entry”) that allowed the user either to be active about signing up (“Register Now”) or passive that they can sign up later (“Get Updates”,  “Win A Free Entry”).

According to some of the event companies, almost 75 percent of their entries for events come in the two weeks prior to the event, especially for regional conferences. Capturing the passive audience is very, very important; they will need to be reminded to be attend.

This target audience is a marketing group, so they don’t mind the site being junked up with a few extra call to actions as long as it’s effective and designed well. That’s important, knowing your audience.

I came across this post on SitePoint, and noticed the page navigation. Eight pages. I have a few articles that should have been broken up into a few pages, and this article could have been condensed (how much can you say about successful freelancing?).

The main reason it was eight pages, it seems, is that there’s a poster ad on every page.

Users.

Hate.

This.

There’s a good chance very few people actually made it the eighth page.

This could have been a several part series — keep bringing the users back — or there could have been some editing. Users don’t mind scrolling if there’s some payoff, or the content in engaging. Gauge the content first, to see if people actually want to read it, and see if there’s ways you can break it up other than paging it like this.

I come from the world of print, when we designed magazines with headlines in particular spots with particular word lengths, because they would sell. You walk into a store, see only the top half of a magazine, and there’s the headline: DEEP SEX, on a Cosmopolitan cover.

The form of media doesn’t matter: print, web, radio, people want a short summary of the story, even if it’s a hyperbole.

How important is it? The New York Post, Cosmopolitan, and other organizations have people that are responsible for creating engaging headlines. The Post, the best tabloid example, was host to the Headless Body in Topless Bar headline. Who could forget that?

Which brings us to Short Form Blog. It hasn’t been around for very long (two months), is taking a concept from another blog (Instapundit), and the design is so Roger Black, Roger Black might have to claim some licensing fees.

Who cares.

He does an excellent job taking existing content, and turning it into compelling headlines. Engaging. Fun. One word exclamations. It works.

He proves several points on why he’s getting traction with his blog, only two months in — he takes his time, because he realizes writing less actually takes more time, because he edits, edits, edits until he finds the perfect match.

Headlines should be tested. Headlines should be crafted. Headlines should be played with.

Why?

Because headlines are the only things that are visible at the top of the page, on most RSS readers, and on email subject headlines. Headlines translate to return on investment, more visitors, more page views, create more engaging content, shall I go on?

I love LaCie products. I have a few of their hard drives sitting on my desktop (there’s something very manly about having close to 2TB of storage),and I love their industrial design, especially the Porsche drives.

Llet’s just say a few weeks ago, one of the power supplies died.

(Well, it didn’t die, I cut the wire accidentally while the hard drive was on).

Over to the LaCie website, their website is as elegant as their products. It’s clean as hospital white sheets, and very easy to shop there (like any online shop should be).

Most importantly, when shopping for parts, the website list the name of the product, show a thumbnail of both the drive and the connector type. The only failing is no buy now button.

But I clicked on the part number, and was on my way in minutes.

Why don’t more sites do it this way?

If Your Audience Demands It, Localization Your Site

I’ll admit it, I’m not a big Soccer fan, but I get Ole Ole because it’s this social network that services the biggest base of sports fans in the world. Remember, the world speaks different languages and they happen to use the internet, so why not?

OleOle is the perfect example of not only why you should translate your blog into different languages (they have translated the site into 10 different lanuages, including Japanese, Chinese and other asian languages), but how to do it effectively. Because of their approach, OleOle has attracted an international audience. Not everything is translated, but enough of it to make it very usable for the user. OleOle also makes it very easy for a user to signup, in 10 different languages.

At the very least, limit the amount of text that is in graphic format so the users can use Google to translate the site, or copy and paste it into their own translation program (I’ve seen users do that). Make it as simple as possible.