Archive for the 'QuickTip Sundays' Tag

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.

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 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.

I just purchased an iPhone a month ago and after a month, I understand why they’re calling it the crackPhone: it’s addictive, much too easy to spend too much time with it. It’s really easy to use, and after a few modifications find it a device that I’m using in the way some people use personal organizers.

The best of it is buying the applications. No matter where you’re at — in an airport, in Canada, on the road — you can go through the purchase process for applications with the greatest of ease.

This is a screen shot from the iTunes store (because I’m too lazy to get it from the phone). All they ask for is the password, using a credit card that you have stored on file. For the purposes of limiting fraud, Apple actually errors on the side of not working about charge backs because the purchases are so small, and I imagine they have some kind of limits in place if you go past a certain number of purchases or a certain amount.

For the purposes of purchases, you can actually argue there’s probably more security in place here than at the supermarket, because there is a password involved.

The phone is even easier: all they ask is for your password.

If you have an application or website that has a significant ecommerce component, look at how often the user has to make a purchase; if it’s repetitive, consider this approach because six form entry fields is much more troublesome than one, and all it takes is security on your server.

Make it easy, and watch revenues go up!

I use Facebook more than MySpace for some things just because I think Facebook is more “adult” — the real name thing, more people from work, et al. More often than not, i’ll update my status over there and really don’t use MySpace for that work kind of thing, because, well, I view it as more as the local bar where Facebook is Starbucks where you discuss work and business.

However, uploading photos is a bear, and it demonstrates a real need for examining the taxonomy and labeling of a site. I ran into this over the weekend when I had some professional photos taken of me. I wanted to upload one so I didn’t look like I walked in from the prehistoric period and I had just invented the mouse wheel.

From the top

Upon arriving at your home page, there’s an application called Photos that shows everyone’s photos (which is where I clicked first, figuring, hell, I’ll manage my photos in the place where it says Photos). You can select Photos of Me, you can’t upload a photo. You can create a photo album, but there’s no link to says, “Upload Photo, Yo.”

I unless have a serious need to add 1,000 photo albums to my profile without any photos, creating a new photo album is completely useless to me. I would guess that 80 percent of the users have less than 20 albums, tops, so the importance of creating new photo albums is overstated, much like my demise.

(Props to Jason Hewitt for pointing out my overzealous use of Yo.)

I click on my name on the top right corner, and I arrive at editing my profile. I see a number of links front and center:

Maybe if I go to my profile, I can find something?

There’s an Add Photos link there, but because of the labeling and taxonomy (it’s under the Wall tab), I think I’m adding photos to my Wall. Why would I do that? I just wanted to upload one photo and replace my profile photo. It has nothing to do with my Wall.

But wait, there’s more!

I hovered over the profile photo accidentally and saw an edit picture link. (Never mind there was no way to know that I could even edit the picture — that was an interesting surprise.) I was able to click on the photo, and it showed me a number of photos I could select, but I couldn’t upload photos from there either.

Note the frustration level growing, but alas the treasure hunt continues!

Let’s click on that pesky little word that says Photos

I click on the Photos tab, and I see my albums, but I still don’t see a place to add a photo. After returning to my home page by selecting the back button on the browser, I figured out the Post a Photo was how I added one. When I did figure out how to upload a photo, the default action after I had figured out how to add a photo wasn’t that, but of creating an album:

And once a photo is up, figuring out how to change the album requires a fortune teller. Can you tell me where I can move the photo to another album is?

Frankly, managing photos and albums shouldn’t be this hard, but it illustrates how labeling and placement within a tab selection is very, very important. I shouldn’t have to take eight or so clicks to get where I want.

I had no idea for months where I could upload the photos, and since this is one of the main features of Facebook (Face is in the name, for god sakes), ease of use for managing photos is important, and I could spend one day with their developers to change it. If there is a Photos tab, that should make it very clear than you can upload and manage photos from that Photos tab, and it’s difficult to find to with Facebook, because it’s under Wall.

The conclusion: It’s making it obvious, period

Placement of tabs and other links an taxonomy is very important, because there’s an implied meaning of what a link does depending on where it sits in the taxonomy. Here, I had no idea that the Post a Photo wasn’t just to The Wall, but to my profile. I’ve had friends ask how to upload photos (some of whom are Information Architects themselves!), and they couldn’t figure it out either.

It makes much more sense to me to put some of those links under Photos than the Wall.

(And seriously, someone at Facebook should be looking at the usage logs and have figured this one out, already.)

MySpace does a great job of handling this feature in its new interface, why can’t Facebook?

As a side note: I’ve messaged Mark Zuckerberg about this article — let’s see how long he takes to respond.

Take the extra 15 minutes with the developers and write a regular expression to take out the dashes and spaces

Somewhere in America, there’s a product manager or client talking to a programmer, and the programmer is telling them, “Yo, it’s going to take an extra day or so to make it so the users can enter in credit card numbers with dashes. Let’s just put in a help message telling them they can’t do it.”

And that client is saying, “Uh, sure. It must be really hard.”

Developers say all sorts of things, and this has to be one of the most insane comments. That’s like saying at a cash register, “You can only use the card this way, and if you don’t, we won’t take your money.”

As bad as conversion rates are, this is one of the worst reasons to limit them. How prevalent is it? There’s a Hall of Shame dedicated to it.

Please.

Fifteen minutes.

Write the regular expression.

Anything that limits the user from completing a form means less revenue, and less revenue means less pay for anyone. Conversion is sometimes about the little details, and this is one of them.