Posts Tagged With: Usability

What you learn from fixing 5 years worth of broken links

I just spent two hours finding and fixing all of the broken links on my site. The Broken Link Checker plugin is invaluable for this task (as well as extremely usable!) Here's what I learned:

  • Don't hotlink images. Hotlinking is where you embed an image into your page that is hosted on someone else's page. Not only does it cost the other person bandwidth to serve the request, but it is extremely vulnerable to breaking whenever the other person decides to change their site, or (worse) change the image hosted at that URL, so where you thought you were showing an image of a cat, you are actually showing a porn image meant to embarrass you. The majority of broken links were hotlinks.

  • The alternative to hotlinking is downloading the image, uploading it to your own site and then displaying it from there. This is pretty tedious in Wordpress; there should be a plugin that lets you do this.

  • Think very, very hard before deleting or moving resources on your site. Once you create a resource, you should serve the content at that URL forever, or use a 301 redirect to indicate the new location of the resource. If you don't, you are breaking the Internet. A related problem is that it's very easy to break links: change your page title, move subdomains, or move a small section of content, and you've caused a problem for your site's users.

  • If a link is broken on your site, you've created a problem for every single person that links to that resource, because now they are pointing their visitors to a broken link. The best way to handle this is with a 301 redirect. However many webmasters don't know they broke links, or don't care, so I had to update many links by hand to point to the new resource.

    It would be nice if there were some kind of link wiki service that you could update to point to the correct resource; then everyone could just point their links to the wiki and the Internet would not be broken when someone updates the location of their content.

  • I had a much better chance of finding what I was looking for when the URL described the post content than when the URL was opaque (e.g. http://example.com?p=519). It's also good SEO to have the title of your posts displayed in the post URL's, so you should definitely try to do this for your posts.

  • As a webmaster, you should try to make your 404 (File Not Found) page helpful for users. Try parsing the URL and outputting the results of a site search onto the page, in case you can find the content under a different name. At the very least, you should set up your CMS to send an email whenever your site serves a 404. That's an easy way to find broken links on your site that are hurting users.

All in all, there were 2300 total links on my site, and about 230 of them were broken, for about 10%. This means that, roughly speaking, a user has a 1 in 10 chance of being disappointed when they click on a link on my site; I cut that down to about 20 broken links by unlinking content that 404's or updating it to point to the correct resource. This was a good use of my time; it's important to keep a good user experience for all of my users, even the ones that will only visit once.

Liked what you read? I am available for hire.

Markdown.css: help make the Web prettier

Markdown is a tool that lets you quickly write text for the Web. As an example, if I want to write a list, instead of this:
<ul>
    <li>First list item!</li>
    <li>Second list item!</li>
    <li>Third item!</li>
</ul>
I can write this:
* First list item!
* Second list item!
* Third item!
then run it through the markdown processor to generate HTML. However the default text it spits out is really ugly; it uses your browser’s default styling. This means that lines will stretch all the way across the page and the only font you can use is Times (or Arial, for sans-serif). So I wrote about 100 lines of CSS to make your generated Markdown files look much, much prettier. You only have to add the following line to the top of your .markdown file:
<link href="http://kevinburke.bitbucket.org/markdowncss/markdown.css" rel="stylesheet"></link>
and you’re good to go. Your eyes (and your viewers eyes) will thank you. For more check out the project homepage or the Github repo.

Liked what you read? I am available for hire.

CMC’s Website Redesign: the good, the bad and the ugly

CMC recently redesigned its website. Here are my thoughts on the redesign. Note that I don't have any data, and I haven't conducted any tests on users, so the stuff I'm writing here might be totally bunk. But if no one has any data, we might as well go with my opinion, as I've read the entire back collection of articles on useit.com, as well as Steve Krug's Don't Make Me Think, and CMC's Public Affairs Office probably hasn't.

The Good

CMC quick links bar The new "Quick Links" bar.

This has a good list of places that I visit most often. This should probably be contextual based on the page you're currently on, so the "Faculty" page would have different quick links than the "Students" page, but again they should be testing this on actual users.

cmc contact info Contact information on most pages.

Most pages have phone numbers and addresses listed in a prominent location. This is an excellent step and something I've called for.

The footer.
cmc website footer
On a site like CMC's where users have a diverse set of goals, you want to get people to where they are trying to go as quickly as possible. The footer makes this possible with a ton of deep links to pages you probably want to visit.

Much more readable faculty profile pages, as well as an acknowledgement that social media and student websites exist.

The Bad

Horribly small default font size.
small font size on cmc website
The default font size is 11px, which is fine for people under 40, but really difficult to read for people over 40, especially because users don't know how to change the font size in their browser. In addition, a small font size makes a link more difficult to click on because the target is so small - see Fitts Law. The small font size makes it hard to distinguish text in low contrast environments as well. cmc website small text

Not changing the color of visited links.
cmc visited unvisited links
On a Google search results page, I can see at one glance which links I've already visited, because they are purple. No such luck on CMC's site, which displays every link in blue. This violates rule #3 of Jakob Nielsen's Top 10 Mistakes of Web Design, and has been shown in tests to disorient users, and cause them to visit the same page over and over.

The menu bar text shows up inconsistently.
missing menu text
The menu bar is the series of grayish-red boxes, which as you can see contain no text. This photo was using the latest version of Chrome on a Mac. Props to CMC for trying to use Cufon but they need to work out the bugs and test in all browsers.

No mobile version of the site.
Mobile devices should load an alternate stylesheet that presents the main content without the fluff, to save bandwidth and optimize the information presentation for a smaller screen.

Clicking on the logo doesn't take you back to the frontpage.
When you click on the logo in the corner of every page you are taken to cmc.edu/discovercmc, instead of the homepage. This violates a well known usability convention: if the logo is clickable, it should take you to the homepage. I challenge you to find a top 500 website where this is not true.

No Analytics.
This means that Public Affairs isn't collecting data about which pages are popular, which keywords users are searching for to find our site, and which links are being clicked on, which implies they don't really care about how users use the site, and will hurt their ability to iteratively improve the site navigation in the future.

No caching site resources or minifying Javascript.
Page load times are slow; CMC scores only 63/100 in Google's Online Page Speed tool. Because no images, scripts or stylesheets are cached, they have to be reloaded every time the user reloads a page. This is costly in terms of speed and bandwidth. Fortunately this is easily fixable in Apache.

The Ugly

The homepage.
cmc frontpage Holy cow, this is a mess. Some of the problems:
  • No search bar. This is stupid - the search bar exists in the page's source but is hidden from the user.
  • Fourteen links to other pages. On a page whose goal should be to get users deep within the site as quickly as possible, having this few links is unacceptable.
  • Incredibly small link targets make the links hard to click.
  • No skip links for disabled users.
  • Changing the center image will require extensive Photoshopping to remove the background, which in the end will reduce the total number of changes made to the frontpage slideshow.
  • The "Discover CMC" link looks like an ad, and I missed it the first six times I visited the homepage
  • There's no way to determine at a glance what separates CMC from every other university. One of the boxes has some bland text below a "Why CMC" header but the page has to do better.
  • It's not clear where you should click to find any of the items described here:
    University Website
  • No meta description or keywords, which are essential for search engine optimization (SEO).
    cmc no meta
Fortunately, if my search habits are at all typical, most people use Google instead of the homepage to find resources on CMC's site. But the new homepage is the flagship, and it violates most usability guidelines. It reminds me of flash intro sites from the '90's that used to load when you went to Nike.com or Boo.com. Those flash intros looked really cool when they were presented to management, but loaded slowly and caused shitloads of usability problems, which is why sites don't have flash intros anymore. The homepage is a huge step backwards from the old page.

Big Ass Images that Convey No Information
Here's the homepage for current students:
cmc student gateway
And here are the parts of that page that are actually clickable:
cmc student gateway links
The prime real estate on the page is taken by an unclickable infographic telling us that upperclassmen return to campus on August 28. Here's the same information, in a more compressed format:
8/28 Students Return
The image on the page is 465 pixels wide by 290 high, or 134850 pixels of screen real estate. My compressed version is roughly 150 pixels wide by 18 high, for 2700 pixels of screen space, a 4900% improvement in information density.

More generally, big ass images take forever to load (especially important on mobile devices) and don't contribute anything to the page. User test after user test shows users ignore filler images, and that visual bloat is annoying.

The SEO strategy/URL's are still awful.
To illustrate CMC's nonexistent approach to search engine optimization (SEO), I'll use the faculty page for my thesis reader.
ananda ganguly
The page looks OK - the email link is a little wonky but it's fine. Now, what are the keywords we'd like to use to describe this page? The biggest one is the name of the professor - Ananda Ganguly. The second biggest is his department, Accounting, and then maybe we want to also have CMC as a keyword.

URL Contains No Keywords
Let's look at the page URL, which Google uses as part of its PageRank formula to determine what's actually on the page:

http://www.claremontmckenna.edu/academic/faculty/profile.php?Fac=519

This URL does not contain any of our relevant keywords, making the page tougher to find in a Google Search.

Nondescript Page Title
Let's look at the page title, which shows up in the browser bar, and is the bright blue link text when the page shows up in Google results, as well as a large component in the PageRank formula:

ganguly page title
The page title is "Academics," which tells you zero about the page content. Since this page title is so non-descriptive, Google had to use its own algorithm to give the page a descriptive title in search results:
ganguly google title

Generic Meta Tags
Let's look at the page meta description, which shows up as the black text below the blue text in a search result in Google:
ganguly meta description
The meta description is "Academics and research at Claremont McKenna College," which is generic enough that Google has to try to find better text on the page to use. The result isn't optimal:
ganguly google text

No H1 Heading
Pages should have exactly one h1 heading containing information about the primary subject of the page text on the page. There's a perfect candidate - the professor's name, Ananda Ganguly. This text does not have an h1 heading - in fact, there's not a single h1 heading on the page.

No Alt Text for Images
There's a nice image of Professor Ganguly on the page. Images can't be crawled, it's important to provide an alt tag so Google knows what's in the image, as well as for blind users or users on slow internet connections. However, the image does not have an alt tag, so Google doesn't know the subject of the image.

Those are some really, really basic SEO optimizations. Figuring that stuff out would make CMC pages more prominent when researchers from other schools search for work done by CMC professors. I haven't done a thorough examination but I'm not confident that the rest of the site does much better.

Conclusion

I have the following questions for the CMC Public Affairs Office:

  1. When deciding what to emphasize in the site redesign, did you interview a single user of the site? Did you ask any students, prospective students, faculty members, staff members, alumni members, or parents, about how they use the CMC website?
  2. How does the redesigned site address the complaints raised by users in question (1)?
  3. Could you explain how the new frontpage does a better job of conveying CMC's brand than the old frontpage? When you showed the frontpage to prospective students for 30 seconds and asked them to say what set CMC apart, what did they tell you?
  4. What metrics are you using to determine the success of the site redesign?
  5. What was the decision making process during the design of the site? Was evidence from user testing ever presented to inform design decisions?
CMC's website hasn't been that great for years and it's good to see that it's finally getting more attention and resources. But while the new design is flashy, it's not clear that it became more usable, which is disappointing.

Liked what you read? I am available for hire.

Usability in common objects

One thing you pick up when you start having to design things on your own is a keen sense for details - all of the tiny parts of an object that make it pretty, and easy to use. A good test for this is to pick up your iPhone, open it to any screen and try to observe all of the gradients, drop shadows, bevels, fonts, and rounded corners that make up the pixels on the 640 by 480 screen. If you tried to design something with the exact same shapes but without the subtle effects, you would probably wonder why the Apple one looks so much better. And the effects are hard to get right - it's easy to go overboard on effects and end up with something hideous. Take, for instance, a basketball jersey, which is a pretty simple object - it's a shirt, with letters, numbers, and a color. But there are a surprising number of rules about a jersey that make it a more usable object. At a very basic level, everyone on the same team wears the same color jersey, so it's easy to identify which players are on your team. Traditionally, the home team wears white, and the road team wears a dark color. Why? In the old days, the road team might not have a chance to wash their jerseys between games of a road trip, so wearing dark jerseys would help hide the stains. Another feature of jerseys is that a team's dark jersey will usually feature the name of the city or university the team represents, whereas the home, or white, jersey, will feature the team's nickname. This is because the team wears the white jersey inside their own gym (where everyone knows the university or city name), but for the road team, the more relevant piece of information is the city or university name. A third principle revolves around numbering, where each sport has different rules based on how numbers are used. In high school and college basketball, players' numbers can have at most two digits, and each digit has to be between 0 and 5. This is so referees can use their hands to report a player's number when she commits a foul. In soccer, the players on the field traditionally wore numbers 1 through 11, where the number indicated the position of the player on the field, with 1 being the goalkeeper, 2 and 3 for the outside fullbacks, and so on. (Fortunately, rugby still follows this tradition). And of course, the numbers should be as big as possible, so people can read them. So even in a pretty simple object like a jersey, you can see a complex set of rules develop to make things easy for people that use them. If you were asked to design a jersey from scratch, it's unlikely that you would have covered all of these use cases, which is why it's important to prototype, test things on real users, and then iterate.

Liked what you read? I am available for hire.

A table-based redesign

I'm a big fan of the data-driven approach, and I love basketball, so one of my favorite sites is Ken Pomeroy's stats site, where he tracks tons of statistics for every team, on offense and defense, and lets you break down exactly which parts of each team (rebounding, turnovers, etc) contribute to their success, and which players (efficiency, no. of possessions used, etc) are the most influential. The site used to be entirely plain text on a blue background, which worked for me, but Ken redesigned the site this year. Last week he posted on Twitter asking for feedback on the redesign. I agreed that it was hard to read and I had some feedback. Here's Ken's initial version: Data presentation legend Edward Tufte always says that your design should be as dense as possible; that is, every single piece of ink should convey some bit of information. The table is a good format, especially when you need to search quickly by team instead of by efficiency, but you can change it to make the information easier to scan. The first step was to replace the heavy black lines between teams. These convey no information and clutter up the design. The best alternative is so-called zebra-striping, where you shade in every alternate line with a light color. The lines are still there, because there are color differences, but they're much more subtle and don't clutter up the display. I also took out the vertical dotted lines. However, the purpose of these was to distinguish between like groups. We've already used color to distinguish between line elements, and instead of doing a checkerboard pattern I decided to use spacing to group like elements together. I moved the small-text rankings close to their associated item and increased the space between some of the columns. I also pushed the table width to the full 960 pixels. The final step was to make it easier to associate the numbers with the team names. I added a gray bar that highlights the table row you are hovering over with your mouse. All in all, I think it's much more readable and when I have more time I'll explore some other ideas about how to stretch the data. Check it out here.

Liked what you read? I am available for hire.

Groupon’s purchase form leads to mistakes

Groupon’s got a great business model: Subscribers get one offer every morning in their inbox from a local restaurant or business, and a time period to redeem that offer. They have tons of revenue. This morning I purchased my first Groupon. Even though I’m a pretty advanced computer user, I failed their purchase process and had to enter in my credit card data twice, as well as make two purchases. Let’s break down why it happened.

The offer was for Mr. Cecil’s California Ribs. I emailed a friend and she agreed it looked awesome, so I clicked on the link to make the purchase. Here’s their purchase page, which every user receives, unless they’ve previously logged into Groupon and set cookies to remember their login and password.

Note I’ve tried to buy two Groupons at the top of the form. I start entering in my personal information, password and credit card info. What I actually need to do is login first, like every customer that gets the Groupon emails.

After I’ve gotten out my credit card and punched in the information, I click “Complete My Order.” But I’m told by Groupon that my email address is already registered (of course, I subscribe to the email) and that I need to sign in first.

So I go back to the sign up form and click the light green “Sign In” button, which I’ve completely ignored up to this point. With the purchase information right there in front of me, why should I bother signing in?

Now that I’ve signed in, all of my information’s gone and I need to enter it all in again. I enter all my credit card and billing information again, and then get told “Congratulations! You’ve bought 1 Groupon for Cecil’s Ribs!” but of course I wanted to order two – Groupon reset the quantity while I was logging in.

Now I have to click on the deal again and click “Buy Groupon” to get one more. This time Groupon’s saved my credit card info, so I don’t have to enter it again. However, it’s generally not good practice to take people’s credit card information without their consent.

Finally I have my two Groupons. I’ve had to enter in my data twice and I’ve had to make two separate purchases. All in all, this is pretty bad usability for a well-known company, and I hope they fix it soon. They need to filter users with accounts from users without accounts, through a two-stage purchase screen, or email link magic, or allow everyone to make a purchase without using an account.

And now checking the site for the third time, I notice that you can only use one Groupon per table. All in all, a frustrating customer experience.

Liked what you read? I am available for hire.

Great Design: Amazon’s sign in form

Companies have a problem on their sign in page: they need new users to register, and they need returning users to log in. Usually they have two separate forms, or one group gets short shrift. Jakob Nielsen pointed out Amazon's design in his latest Useit column, and the more I've looked at it the better it looks. I'm surprised more sites haven't copied this design. Both new and returning users have to enter in their email address. New users will not be able to enter in their password, so they find the radio button that says "I'm a new user" and Amazon's sped up the process by collecting their email address already. Returning users (the large majority) enter in their password and get started. Awesome.

Liked what you read? I am available for hire.