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.

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.

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.

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!

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.

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.

The worst part about using the website was actually finding the doctor required some dynamic AJAX that (of course) didn’t work on my Mac Firefox 3.0.whatever.

The lesson here? Test all browsers with your application, because not doing so will result in some very angry users.

You might not thing that’s important (who really uses Mac Safari anyways!), but it is, especially if your site or application makes money, skipping one or more browser platforms may mean skipping millions of users, all of whom have credit cards and their “need” to use them.

PC Browsers I would test for:

• Internet Explorer 6 and 7
• Firefox 3
• Google Chrome

Mac browsers I would test for:

• Firefox 3
• Safari

The Anthem Blue Cross site is especially troublesome, because the issues there affect users that have very real health problems, and going to the wrong doctor means an extra cost to the insurance company; how much do you think this adds to the tab on insurance costs in America?

Make your call to actions clear, obvious and in your face

I live what’s turning into a Verizon FIOS neighborhood, and for the unitiated, FIOS is fiber into the home: blazing fast speed that will eventually displace cable modems as the fastest cars on the web access market. Verizon is the leader in the space, and they have a website that illustrates the service.

We know it’s fast. We know it’s digital, How do we check if we can get it?

Their call to action is in the lower right corner of the page, barely obvious enough to actually do something. I highlighted it in yellow because I didn’t think anyone would find it.

A lot of us don’t have Verizon so we have to enter an address on a separate screen. Never mind that when you enter your address, there’s an error page that says the address check isn’t working, but that’s a separate usability issue.

If there’s a call to action for your website — and most of them have one — make it obvious, because that’s your conversion point. Small type isn’t obvious, no headline isn’t obvious, a single red button with some text entry fields isn’t obvious. It should be absolutely clear the user knows where to go. Here, it isn’t.

A good test is to stand about five to seven feet away from the screen: if you can spot the call to action from there, it’ll work for end users.

No matter what, your site is the first thing your users see, and in effect your brand; a true brand will build loyal customers

I buy way too much photo equipment. Way too much. I got some high end lenses, the prosumer Canon 5D body. It’s fun stuff.

For lighting equipment, I want to buy good quality stuff, but I don’t want to break the bank, so Alienbees come highly recommended. They are a company based in Kentucky, and their customers rave about them.

Most importantly, they know who they are, which is more than I can say about most of the customers I know.

Their website isn’t the most attractive site on the planet; however, it’s really easy to use, and reflects the personal nature they use when dealing with their fanatical customer base. No elaborate graphics, no flash, but there’s a simple shopping cart that’s straightforward.

The site has this clunky, midwest feel to it, but that’s okay, that’s who they are, and they even include links to other vendors for products they don’t have. It’s a true resource for the camera buff.

They are religious about customer relationship management. Keep it simple stupid is their motto.

How religious about their superior customer service?

I had one of their flash packs die on me. I used their website, called their customer service, and was connected directly to their tech person. He explained the issue in English, that it was a bad transistor that’s been showing up in some of their recent products, and that they are making their best efforts of keeping their customers happy.

He said, ship it, we’ll have it out back to you the next day.

I did, they did. I received a phone call, an email notice that it was on it’s way.

How often do you see that?

If you run a blog, there should be a search box somewhere on the site

I might have written another post about this — it might have been Baseball Prospectus — where I described the issue where search was confusing because there were too many different ways. In their case it’s probably a technical issue because they’re on some custom hacked together content management system.

Six Revisions is different: they’re on WordPress, which has search right out of the box (notice the search box I have on this site, nice and big). Yet, there’s no way to search the site except through using google. It’s really disappointing, because the content is off the charts, and I was going to find a Photoshop article along the lines of their Illustrator article to send to a friend, but I can’t. I have to browse through their archives; this increases page views, but I don’t want to take the time.

It’s simple: blog readers sometimes want to see what’s on the inside, and the easiest way to do it is either through free form search, or through tag clouds.

If you have an action on your site that a user can click on, the page should be primarily around that action

Sorry to pick on Technorati — it’s fun — but one of my pet peeves is when I click on Sign In in the top navigation, this is the screen I get. Over in the right corner, small, is a sign in panel for members to use. For people that clicked on Sign In and didn’t realized they have never been a member of Technorati (and mind you, why would someone click on Sign In if they weren’t a member already?), those users get a huge registration screen where they can create an account.

Users who don’t have accounts that didn’t understand what Sign In means would click on it, thinking they would have the ability to Register. Read that again for emphasis, because it’s supposed to be as confusing as it sounds.

The issue is that both Register and Sign In take the user to the same screen. It was probably a conservation of development resources on the part of Technorati, but I would think they could take the extra week to separate the functions. However, front and center is a registration form. Is it to increase user membership? Is it to confuse existing users?

Keep it simple. If it says Sign In, make that the primary action, and provide a link to the registration screen. Of all the functions that we do over and over again, you would think that registration and signing in (and the design patterns around that) would be fairly straightforward.

Don’t Let Business Needs Get In The Way Of User Needs

Yeah, I know, we all have to make money on this thing, but one of the most annoying things about CNN.com is that the search box is set to default to the web, specifically Google.

But what if I want to search CNN.com?

When it comes to the web, I figure I’m smarter than the average bear, but it took me a couple of tries to figure out what it was doing. and that I had to click on CNN News above the search box to change the search. Not only is the indication of status above the search box weak (the links are bolder than the status), but for the millions of users that use CNN, you would think they would be able to make enough money on advertising not to perform this standard web trick.

This is, in essence, like a porn site: let’s hide the link so we can make some more revenue. Additionally (and I’m going to call Google out on this), this dirties the reputation of both CNN and Google because you and I know this was part of the business deal. Some lawyers got together and figured out a way some extra revenue.

I know this isn’t an isolated case. Another conversation I had with someone that works with an even larger site that also has a deal with Google said that the search engine practically monopolizes search, and in essence, it hurts the user experience of the whole site because of the legal terms of the revenue deal.

User needs should not be adversely affected by business needs, and the user experience of what we see here is affected actually that.

If you are making changes to your site to generate a few extra clicks, you’re in the wrong business. Users see through that, and it will affect your business.

I love MySpace.com because there’s a raw feel to it, and I think it hits it’s target audience with it’s usuability better than most people give it credit for. They’ve been going through a rolling refresh of a redesign for the past few months (some of which I know the people involved with it).

However, one of the changes where I think they missed some key usuability is the messaging links, and here’s a couple of improvements that might really help users.

Outlook has this great feature that shows you how many unread items you have paranthetically. That would be a great feature to add to this menu for the items that are active.

If there’s a vague item on your menu, explain it, especially if it’s a change to the user interface

Another change was adding notifications, which previously had filled the inbox. I had no idea what that was until I realized I should click on it. In the notifications box, there were over 200 comment approvals I had to read and either approve or deny, which took me a fair bit to go through.

What they could do as a quick fix is use the TITLE tag for the hyperlinks for more explanation of what each option is, so when the user hovers over it, you’d get a clear indication of what to do.

Search should be intuitive

I watch baseball. A lot of baseball. And I’m in a fantasy league, so I read a lot alot about baseball. Because of this Baseball Prospectus is a site I subscribe to because the content is top-notch analysis. If though it doesn’t help me much, there’s a lot of information about teams and players that’s very insightful.

That’s what I like.

What I don’t like is their search interface — it’s hard to figure out how to get to certain articles, and everything is separated. Click on the search link above, and it sends you to a complex advanced search page. Finding a player is pretty self explanitory, but the Audit Team doesn’t mean anything to me.

Remember, users are looking for one search box, and it should be designed to intuitively go to results based on what they expect. In this case, I would expect a search box that would show me all results (“Google-style”), and then I could filter on players based on direct and indirect matches. What is here now doesn’t work for me.

When a form has been completed, indicate status clearly and not just with a single line of text

I’ve been promoting the blog a bit lately, and that means filling out a lot of contact forms. One of my pet peeves (and this isn’t just the Sharepoint Blogs site) is that many contact forms have a single line of text that reads something along the lines of, “It’s been sent.” Usually, it’s so small, people resend the same message over and over again. My first assumption is, “Did I do something wrong? Where’s the error text?”

I’m going to make everyone a deal — I’ll write a “thank you for sending us a note” page for free if you need that if you promise to endlessly promote me on your site.

Please spend the extra 15 minutes to add a secondary page that knows the message has been sent and confirms it to the user.

Don’t bury content; give your users multiple ways to view the same information

Usability Counts was just recently named as to the Social Media and User Interface topics on Alltop, which is a self-proclaimed “online magazine rack.” While we don’t think we know about as much as anyone else, we’re included in the same page as some of the top blogs out there. So cool. Maybe someday we can can aspire to be Jeffrey Zeldman.

The only issue: we are really, really below the fold. Don’t get me wrong — I like the new design All has launched — but for my own selfish reasons (more traffic, more targeted users, less pooftas), I wish we were a bit higher, and that there was a different way to view content so I could see items by date and not by blog.

How far down is Usability Counts?

Two scrolls down on the 1900 by 1200 monitor we function on for User Interface, and more than five on Social Media. Almost mad dogs and Englishmen tolerance.

Not all is lost: the good news is that AllTop is human-edited i.e. there’s some kind of vetting process on deciding who belongs, and who doesnt. so the spam aspect would be a bit lower, avoiding the torrent of bad posts Technorati delivers to my inbox.

Alltop needs a content view where items are displayed as they are posted (so there’s some encouragement of consistent posting), and maybe a couple others around autority and reputation. 9Rules does a really good job of this, and tends to push more traffic to blogs. A tabbed approach would be a huge benefit to users, and they could set the default of what they wanted to view first.

What do you think?

The navigation should be obvious enough that if you’re standing five feet from the monitor, you can distinguish it

I’m not above picking on sites of companies where I know the people that work there, so I know someone that works at this company. Mac And Jac is a clothing line targeting women aged 25 to 44; the company is based in Canada, and is part of Liz Claiborne. The site and photography is very attractive (I’m a black and white kind of buy), but the one issue I could not figure out was how to navigate through their collection until I saw the “next” link in light grey, as highlighted in the screen shot above.

Where I work at, we had the same issue with a client: they wanted to make all their links grey without an underline.

I’m not against style, but there should be an arrow (or something) indicating navigation links, and it should be easy to read. Navigation points are exactly that: links or other items that allow users to easily distinguish where to go next. If you can’t read next, you can’t go anywhere, right?

If you are a service provider, no matter what, get the phone number somewhere on the site

A friend of mine, Bob Benaderet, runs a small but growing chiropractor business. He doesn’t have a big office (it’s about 700 square feet), but because of his previous experience as a marketing account manager, he understands that the internet is the most cost effective way for him to grow his business.

I helped him out by designing a very simple yet very effective site, and through the use of free tools, we’re seeing about a decent lead acquisition rate, which is excellent for a small business website. The site is designed specifically to reflect that he is a small business that gives a personal touch, but also sophisticated enough so he appears to be respectable and professional.

The amount of time and money spent on the site didn’t break his bank, and for what you can hire a professional writer to work with a designer for, any small business owner would see the return on investment fairly quickly.

The core ideas we recognized:

• Long URL’s are fine as long as you can spell it. BobTheChiropractor doesn’t role off the tounge, but it brands him exactly as he wants to be seen. You can say it over the phone or radio, and know exactly how to spell it, and what the site is.
• No one is using the yellow pages anymorel they are searching on the web. For the cost of a yellow pages advertisement ($150 a month, and you can’t change it all the time), your money would be better spent on internet advertising.
• Target your advertising carefully. Use keywords that are very specific (i.e. Long Beach Chiropractor or Long Beach back pain, which Bob uses).
• Put the contact information prominent, and in multiple places. The main reason users (including myself) are returning to the site is so they can get the address and phone number, more often than calling 411, so they can schedule an appointment.
• It’s a journey, not a destination. Change and tweak the site often, which is the beauty of the web.

Looking at the site, we might increase the visibility of the phone number even more; he may get a uptick of calls, some of them less qualified, but it should pay off.

Facebook Navigation

MySpace Navigation

LinkedIn Navigation

What’s Missing From This List?

Groups. All three of them have groups has major functionality, and none of the three have added groups as a component of the top or main navigation. Since all three of the services need advertising and page views to a certain extent, you would think each would try to drive traffic to groups.

My opinion? I think groups are underused; with the right approach, groups could be mini social networks upon themselves. For the services above, maybe they haven’t gotten there. But, if they could increase traffic in highly targeted and focused groups, why don’t they?

What ever you do, make navigation options obvious

It didn’t occur to me until a year and a half after using the site (really, a year and a half!) that messaging was connecting me to my internal email or in box at Yelp. Now, I’m a fan of cute, and it works on some sites, but not on most, especially a social networking review site. They really need to name it something obvious like InBox or Mail, because users don’t want to have to search for basic functions. It would really nice if there were a constant reminder of how many unread messages I had.

Talk is also a bit esoteric (I would have used Message Board or Forum, and there’s plenty of room).

I wonder how many page views they gave up because Yelp users don’t realize there’s a message board on Yelp?

Keep the options in your face

The vast majority of people that come to the page are new users, but I would guess a good percentage are returning users without the cookie saved. Why ask them to go above when sign in can be placed in line right here? It would take up 50, maybe 60 pixels of vertical space, tops, which is more important than losing a user.

Keep the options obvious and limited

Additionally, where it says Top In All Topics, that encourages leakage, meaning users are going to click there when they can’t figure out how to sign in. Just about every usability test I’ve seen regarding web forms is that the more places the user has to click, the more places they are going to click. there are metrics that show the number of people leaving a page were directly related to the number of links on that page.

Keep the forms simple

This registration form requires 12 pieces of information.

Twelve.

That’s great, if you are marketing cars, but this is an internet news site.

This is way too long, especially when the target audience is bloggers, most of whom don’t want to give up this much information. At the very most, digg should only be asking for the user name, email address, a password, and the CAPTCHA. Everything short of the gender and birthday could be assumed from the IP address to a certain amount of accuracy, and if the users really want to add those two, they can do that later or on a second screen.

When the user signs in or registers, return them to the page they were expecting

When I signed in, was I returned to a page where I could enter information about the article?

No.

I was returned to the home page. I have to return to the blog so auto-capture the article information. Not only does this irritate the user who clicked on the link to Digg, but it also irritates the blog owner (me), because I took the time to place a link on the article to promote my blog.

Can you spot the expert interface?

In-and-Out Burger is famous for its hidden menu — there’s a bunch of options you can ask for like grilled cheese that aren’t listed anywhere on their physical store menu which has the basics of basics: hamburger, cheeseburger, and double double.

This is an excellent example of a expert vs. simple interface. For the people that are new to In-and-Out, it couldn’t be easier, because the counter person asks if you want certain items, thus simplifying the process for the person ordering. If you go there more often and are an expert at ordering what you want at the restaurant, you’ll know that you can ask for extra pickles (which I do), or extra cheese, or even ketchup and mustard instead of the sauce.

This is an important distinction, because this shows that they have the customer in mind: they hide all the hard interfaces to get what you want, and keep it simple for the customer. If the customer really wants to delve deep into ordering a more customized product i.e. a hamburger with what they want, they have to learn it as an expert, but they’ll get exactly what they want.

It’s the same as the Mac OS X interface, because under the hood, it’s really Free BSD, but all of the nasty command line issues are hidden for most users like me. If the user really wants to tweek it, they can learn Free BSD.

What are some expert vs. simple interfaces that you see outside of computer systems?

I not a big fan of the SCE site to begin with, and this obviously boggles the mind. You know who I am, you know where I’m moving from and where I’m moving to — how about making it easy for me?

Note to Smashing Magazine: Blogs are picking fixed layouts because liquid layouts are a pain in the neck.

So here are a few tips:

• Add a subscribe via email function (which I’m going to add soon). Feedburner has a few options, and make the text simple, like what I wrote on this site.
• Make the RSS Feed image big so people can find it (and i find those little feedburner images too small)
• Add a link next to this called, “What’s this?” I’ll be adding a page explaining what RSS is, and most sites, especially sites with less sophisticated users, should add this.

Never mind that Firefox 3, the new browser, is so fast it runs circles around Internet Explorer 7 and Safari for the Mac (this after a long time of bloatware with Firefox 2), their website is the best I’ve ever seen at identifying exactly at getting people to download the browser. The navigation of the site has always been phenomenal (is there anything more straight forward than add-ins?), and this release, it just gets better.

The wins?

Detect who the user is in a hurry

Am I a Mac or a PC person?

No problem!

We’ll just look at the user agent provided by the browser and server, and we’ll detect the language and operating system. No choosing, just a small note that tells the user exactly who they are. This is a detail most websites completely miss (how many times do I have to see PC Software listed when I access Download.com?).

At the bottom of the page there’s content comparing Firefox vs. Safari, the native browser for the Mac I’m on. Brilliant!

How much does this cost?

It’s free! And they tell you it’s free! Download now! Operators standing by!

But what if I have the wrong language selected?

I would have listed some of the languages here (how many Japanese people will be able to translate Other Systems and Languages if their browser is set wrong?), but for the most part, selecting another platform or language is straight forward. The secondary page does it a great job listing the languages, but a poor job of translating the word “Download” into each language. Was someone, anyone paying attention?

Use Rich Media With A Purpose

This is not a criticism — this is actually a compliment. Ted.com does an amazing job making Flash relevant with this page design, using large images are very prominent business and social leaders to create a very visual experience. Select an option on the left (say, technology), and the page reshuffles like a tag cloud to present new speakers. They could have built this using DHTML — the page still would have been fairly heavy — but it’s really aimed at an audience that already has a fat pipe to serve up this content.

Content can be ordered and sized by different faceted filters (woo hoo!), and if the visualization mode is too much for you, you can resort to a list view (how Web 1.0). You can even view the number of comments and times each was emailed to friends.

Another tip: it would be even cooler if the boxes could be dragged around and re-ordered to see certain topics large.

So some of you have probably been following my misadventures with United Airlines. After a few calls, they were awesome at correcting a airline ticket where I didn’t include the full name of the passenger (she has an Anglicized name that also appears with her Chinese name on her passport), and I didn’t find out until later that I needed to include the full name.

Not to throw just United Airlines under the bus (pun intended), but most of the other sites didn’t point out the the following requirement: that whatever name was listed, it should be exactly the name on any identification. This isn’t necessarily the airlines’ fault — all of the airlines are following guidelines set forth after 9/11.

The issue for some of the sites is that this requirement isn’t obvious enough: if someone like me, who never reads the text on a site, misses this, I can’t imagine how many others have fallen prey. And with the frustration over customer service and airlines in general, passing the buck of the travel sites with the airline companies has become almost sport.

Here are a few screen shots from my favorite airlines:

Southwest Airlines

No indication.

American Airlines

Does indicate, but in legalspeak.

Delta Airlines

No indication, but does have an indication that you can refund the flight if there are changes within 24 hours of booking further down the page.

Orbitz

Perfect. Someone at the other sites needs to copy this exactly. An additional improvement would be to add a link to the polices for changing flights. They should have additional text that reads something to the effect “even in the event of a mispelling.”

Other Travel Sites

Expedia does cover this under the rules and restrictions, and on the screen where you have to enter a traveler, but not next to the text entry area (and the rule is actually covered up by a popup window. Travelocity is much like Orbitz, where the explaination text is right next to entering the name.

Where’s The Search Box?

Hulu‘s a pretty good site — lots of video from companies that want some kind of control over the content, which is much more than YouTube is giving them. The site’s is version 1.0, so the interface feels a bit clunky. Most importantly, where’s the search box?

I made the screen capture small without a highlight for the primary reason that if you are on a content-heavy site, that search box better be easy to find. Like Google easy to find. Like YouTube easy to find. Like News.com easy to find.

Can you find it?

Search Panels Should Be Designed With Economy

In the upper left corner, there’s a huge search panel that contains all kinds of ways of filtering for car listings. While I’m all for showing as many options as possible. This area could be reduced by at least 50 percent by adding drop down menus and AJAX-style selection to get the user where they want to go. Some of the contextual navigation (finding a dealer, finding a car) could be mixed in differently.

Designing Above The Fold

Kelley Blue Book is an advertising-driven site, so the value isn’t only their ratings for cars, but driving users to the editorial content on the site. Most of the interesting content is buried low on the home page, and because most users are going to the site for finding a used car price range, they will never see the article content. I would actually suggest that searching for a car price might be placed below some editorial content (but screen centric) to see how it tests in A-B testing.

Personalization

I came in as a member, and those links showed up. They should be replaced with links that are appropriate to me as an audience. Off that page, I would also make getting to the online store more obvious.

Non-Standard Credit Card And Information Forms

This is the join form, but this also appears in the credit card form — the form required you to enter your month (May, November, September) instead of selecting it from a drop down menu or entering a number. It might seem clever, but every other form of this type I’ve seen has been entering a date as numbers and not as a text item.

You have to really do things people expect, and this is outside the lines. If 80 percent of the forms out there require thing, there better be a really good reason to do it different, and there really isn’t a good reason to do it different here. I wonder: did they do any usability testing?

One note: If you are designing forms for an international audience, the format of the date for most countries is day, month, and year.

There are no screen shots because I couldn’t install the software. Additionaly, there was no clear indication that the service was going to be discontinued for her.

Here’s what I would have done to make the service easier:

Tested the software on many platforms with many states of other application installs. One of the mistakes that many Windows developers make is they never test if for a typical install — which is when users install tons of applications, many of them of suspect quality, before installing your application. The developers always insist on a clean install of Windows, and how many of us have a clean install?

Put a “download software here” link somewhere on the site. If you go to Yahoo Music Unlimited now, there’s no explanation of what software you need to make it work — they just have a bunch of links to try this software now, which is entertaining, because they are about to kill the offering completely. The answer is that you have to download the Yahoo Music Jukebox, which I assume is a fine piece of software, except…

If the software doesn’t install, there should be an easy way to contact customer support for help. There was no install log, no click here if the software isn’t installing. Finding any answers at all on the Yahoo! website is a frustrating experience, and it took me upwards of two days to figure out that I should be contacting customer support. Additionally, there are seemingly three or four separate customer support contact screens, further confusing the issue.

Browser experiences are hard enough, but especially with applications, usability of said application is very important, especially when it’s an install of a paid service. Open source or shareware software, I could see less support — however, this is Yahoo, and the assumption is they are making some money off of this.

I ran into an issue at the Virgin America site — I tried to upgrade a seat from a premium to first class at check-in (which, by the way, is only a $50 upgrade on the day of the flight). My friends have been recommending the airline, so I decided to give it a try, because the price wasn’t much different than Alaska.

The issues were:

• The price was wrong
• The payment screen didn’t work well because it had issues automatically populating information if I entered the information wrong and showed a system error
• When I submitted payment, the site timed out

System issues like this are just as frustrating to the user as poor usability; users don’t know why things are going wrong, and sometimes assume that it’s something they did. I don’t know how many times I’ve seen during usability testing where a user would hit reset when hitting a javascript popup dialog.

Testing of a site is especially important if the site is an e-commerce site, like Virgin America, because it directly hits the bottom line. It’s all about ROI, baby.

The one usability issue I saw with the site was the color of the buttons (actually, the lack of color):

That continue button is really hard to spot. I would have made it dark gray (all the positives that color), to move the user along). The placement of the buttons was correct (positive to the right).

I do know that this site was designed by an agency (they were probably built the site also, and most agencies don’t have a lot of technical talent). Sometimes the look of a site should not take precidence over the usability of the site, especially when it comes to buttons.

On a good note, Virgin America honored the upgrade and did a wonderful job with their customer service, and the website had one important link — a mail to — so I could email the issue to their web team. I commend them for doing things the right way!

Metroblogging is a great site — localized blogs in 54 cities around the world, and they have a map that shows where the cities are. It would be great if i actually knew what the cities were if I hovered over them.

That’s really easy to fix: just add a label next to the city ball, and this would become a much, more usable Flash map.

Even with icons, there should always be some kind of label that indicates what the item is. Users don’t want to have to guess what it is, and even obvious items like folder items aren’t so obvious.