Web Design and Usability

RSS feed for this category only.

Zebra Striping: Pointless?

Zebra Striping: Does it Really Help?: This article suggests that zebra-striping (alternate row coloring) in tables does nothing to improve usability.

This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks.

It does, however, make the tables look nicer to most people. Maybe that’s reason enough?

Nielsen on Menu Usability

Right-Justified Navigation Menus Impede Scannability: Jakob Nielsen, demigod that he is, has just published an interesting alert box about right-aligned menus (something we’re guilty of). He claims they reduce readability.

Aligning a navigation menu with the right margin might look cool, but the resulting ragged left margin severely reduces the speed with which users can scan the menu and select their preferred options.

The other two problems are (1) designers using all CAPS, and (2) lack of contrast between the background and letters.

What makes this interesting is that the University of Michigan read his Alertbox and realized they were guilty of all three problems, so they fixed their menu the same day, which caused Nielsen to update this column.

An examination of both screencaps is below the fold, and it’s interesting to look at — I tend to agree that the changed menu is remarkably more readable. And this is not only when actually reading it, but it just beckons to be read more. The “before” menu is something I probably would just gloss over without reading it, where I’d be much more likely to read the “after” menu.

Not Just Spicy, Zesty Too!

Yesterday I needed to know when Daylight Savings Time started and I hit the first link Google gave me.

DST_SpicyNodes.jpg

The default (you can switch) presentation is via something called SpicyNodes.

SpicyNodes is a zesty way to explore information on the Web. We’ve taken sophisticated radial mapping technology and made it easy to use – for both you and your visitors.

Hey, it’s pre-beta.

Revolution Themes

Revolution WordPress Theme: I have to say that I’m really smitten with this guy’s WordPress themes. He’s selling them, and he’s used them to hot-rod WordPress into several different vertical platforms.

The Revolution themes are widget-ready, customizable themes that provide ideal solutions for online magazines, online newspapers, and other websites that wish to use WordPress as a content management system.

There’s a real estate site, a news paper site, a general business site, etc. Really nicely done, and it’s stuff like this that really pushes WordPress forward.

About $80 each for a single use.

Benefits of Plain English URLs

(Note: the audio for this post is here.

We have a client building a large, static site. The files in the site right now — in the middle of development — are named for their page ID on the content manifest:

A657.aspx
J864.aspx
etc.

We’re going through now and assigning them more usable, “plain english” URLs:

/products/industrial/portable
/products/residential/cleaning
etc.

This is going to be a tedious process, and I got to wondering why we do it. So I figure I’d write down all the reasons why the plain-english URLs are a good idea.

  1. They are easier to remember and communicate
    The plain-english URLs are more memorable to the customer, and they impart some meaning. When picking URLs, we envison someone at the client’s firm reading the URL to someone over the phone. How easy is it going to be?

  2. Users can use them as a navigation device
    The plain-english URLs impart some meaning to where the user is in the Web site. The URL becomes another crumbtrail.

  3. They have branding value
    The URL becomes another way to position your product or information in the marketing space. It becomes another label to describe your product.

  4. They have SEO value
    We’ve debated this before, but an unscientific study apparently proves there’s some value to it.

  5. You hide the file extension
    I think this is a critical point (though I don’t always follow it). File extensions are bad form in general, because they bind you somewhat to the underlying platform.

  6. You can use the URL in code to determine context
    By referring the URL in code, you can determine where the user is in the Web site. In this client’s case, we’re going to drive their navigation off the URL — based on what URL was accessed, we will decide what secondary nav to load in the sidebar.

  7. The URL becomes an abstraction layer to content
    The long URLs don’t have to point to actual files. By using URL re-writing, you can point those wherever you want. Of course, you could do this with the short ones too, but “/products/industrial/” has universal value which you could always point to specific content. What universal abstract value does “A657.aspx” have?

  8. They open up new analytics
    In particular, Google Analytics has “content drilldown,” where you can roll up traffic views based on URL pattern. You can see how many people visited the “portable” section, then how many visited the “industrial” section. This can tell you things like what the most popular section in “industrial products” was, etc.

That’s a quick list. If you have others, let me know in the comments.

(And yes, I know Gadgetopia’s URLs are somewhat lame in this regard. There are reasons why I did it, but changing it now would probably not be worth the value. But if I had to do it over…)

Course on Text Formatting

Good buttons, bad buttons: Rachel, over at Contented, is developing a course based around a pet-peeve of mine: text formatting. Combine this with her courses on writing for the Web, and you have a couple classes a lot of Web editors should take. (See this post for a nice rant on this subject.)

Formatting web content: that’s the new CONTENTED course I’m working on at present. And it struck me that every WYSIWYG editor has good buttons and bad buttons.

Bad, bad: Bold, italic, colour text, font size, centre text and right align text.

Good buttons: bullet list, numbered list, blockquote, insert link and insert image.

Excellent buttons: Heading 1, Heading 2, Paragraph styles etc.

The bad buttons are OK if you don’t mind your content looking naff. In other words, use them if you are doing your own thing, rattling on about your shopping. Steer clear of them if you want to create a professional impression.

We’re discussing lumping in some writing and text formatting classes with every Web project we do — it’s that important.

Outsourcing HTML/CSS

Make sure machines dig your designs: XHTMLized: These guys do outsourced HTML/CSS, nothing else. You send them a PSD, they send you back HTML/CSS.

Look super in all major browsers […] Optimized for search engines […] Accessibly ready for everyone […]

They have a little slider on their site that you can adjust between number of page designs and number days. One page in seven days is $249; in one day it’s $499.

I know this isn’t new, but it’s interesting in its focus. At what point does HTML/CSS become a commodity? At what point in the maturation of you as a developer does it not pay to wrestle with basic HTML issues anymore and instead concentrate on larger =, more strategic development issues?

I actually enjoy HTML/CSS quite a bit, so I’m not ready to be a customer anytime soon, but I know there’s a lot of shops that could benefit from this.

The Downside of Dummy Text

I’m reading Jakob’s Nielsen’s Prioritizing Web Usability off and on. He has an interesting aside in his chapter on typography.

Why do so many Web sites have illegible text? Didn’t anybody read the text while designing the site?

The unfortunate answer is “no.” It’s quite common for Web sites to be designed without real content. Instead the designer fills the pages with dummy text…

He makes a good point. Do we actually test the typography of our text for legibility when we design a site? Or do we just fill it with Lipsum and gloss over it, assuming people can read it fine?

Our guideline: If you don’t have the final content available while designing a Web site, at least insert representative text from the current site instead of nonsense text.

Subtle Manipulation

Measuring ‘Completeness’ to Encourage Action: David Gammel points out something I’ve always thought was brilliant.

This strikes me as a very subtle yet effective way to get your users to provide more information about themselves in their profile. Who doesn’t want to get to 100%?

I spent a lot of time trying to cultivate that third recommendation in an attempt to get my LinkedIn profile complete. I knew it was manipulative, but I just couldn’t get past the fact that my bar wasn’t at 100%.

Save a Developer. Upgrade Your Browser.

SaveTheDevelopers.org :: Making The Web A Better Place: Dear God, please save us.

Say no to IE 6! Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a less stressful and complicated environment for web developers by hastening the retirement of an outdated browser.

IE8 Passes Acid2

Internet Explorer 8 and Acid2: A Milestone: There’s a screencap on this page of a build of IE8 passing the fairly brutal Acid2 test.

Last week, we achieved an important milestone that should interest web developers. IE8 now renders the “Acid2 Face” correctly in IE8 standards mode.

Kind of exciting, considering that Acid2 uses data URLs. Data URLs are a little-known feature that could be hugely useful in the future.

Flot

flot - Google Code: Flot looks crazy, crazy good.

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming.

Hats off to the developers at iola — excellent work.

Edit In Place

Edit In Place: Joseph Scott has given Edit In Place a home. It’s pretty cool technology, but where did the demos go?

View as a Single Page

This is a refreshing usability feature I found over at AlterNet. Users often hack this feature by going to the printer-friendly version (but, is that theft?). It’s nice to see it offered as an explicit option here.

Shelfari Relents

Shelfari: Invitations and updates: From the official Shelfari blog, posted yesterday.

We’ve seen the recent emergence of complaints about Shelfari’s invitations feature, and it’s quite distressing. […]

It’s been about five months since we last touched our invitation design. In June we looked at a number of different designs with the goal of creating something easy to use as well as clear. Recent feedback has been clear that our current design is not clear enough. As I read through the feedback, and look at the experience afresh, I can see where the problems stem from.

So, will they actually change the design? You know we’ll be watching.

As this soap opera unfolded, I was contacted by dozens of people who have had problems with Shelfari. In particular, the guy who created Library Thing (an admitted Shelfari competitor) wrote me and just posted this list of a stunning number of stories about people who have been burned by this.

Some of the stories are really sad:

After it sent out a second email today, I dove right back under the rock of humiliation, sank into the moat of despair and basically thought about changing my name and moving to Tahiti.

[…] Shelfari sent a bloomin’ email to every person I have ever emailed. Ex-boyfriends, people I hoped would never contact me again, coworkers, my vice-president, my CFO, my old boss, potential employers, my bishop, the entire Sunday school and relief society. EVERYONE. All now invited by spam to join my on-line book club.

[…] One hour after I pressed the button, Shelfari invited two dead people, one prisoner (he should probably read books but his warden is reading his mail), the CNN news desk, four European editors—and potentially a boatload of others who I hope I never meet.

[…] so then I got the bright idea to email an apology for the spam to my entire address book and Gmail decided that I’m a spammer and shut me down for 24 hours.

[…] That email went out to ex-boyfriends from ten years ago, their parents, high profile business professionals that I sent my resume to five years ago

So, did all of this cause Shelfari’s change of heart? I doubt it. Given the number of copy-and-pasted blog comments from “Danny,” they knew full well how much pain this was causing people.

In the process of my crusade, I discovered that Amazon was a big investor. I managed to acquire the email address of a highly-ranked contact in Amazon’s PR department, and I sent him a collection of choice links. So, did Amazon put any pressure on them? I don’t know — I never heard back. But you have to wonder.

Maybe they change their ways because my post entitled “Shelfari has Pissed Me Off” just hit the first page of Google results for “shelfari.” That must be embarrassing.

In the end, I refuse to pat Shelfari on the back or tell them they did the right thing here for the same reason Jay Allen refused to be nice to Plaxo when they changed their ways. The bottom line is this:

  1. Shelfari should have known better from the start.
  2. They are not changing this because they give a crap about you in any way. They are changing now because the disadvantages of their under-handedness suddenly outweigh the advantages. They acted like jerks for as long as it benefited them, and as soon as that plan was no longer viable, they crassly switched gears and tried to pretend it was because they cared about their users.

With this in mind, their punishment must continue. They have to be beaten over the head not until they just stop what they were doing, but until they regret ever doing it in the first place. In my mind, they need to be crucified in the blogosphere until it wasn’t worth it. We must negate the advantage.

So, at the risk of sounding bitter, screw Shelfari. I have canceled my account, and I encourage you to as well (go to Account Settings — the button is at the bottom of the page). If you accepted my inadvertent invitation that started all this, expect an email from me soon explaining what happened (for those who don’t read Gadgetopia).

If you like the idea of a social networking service centered around books, I encourage you to look at these two sites:

Shelfari: When Usability and Ethics Collide

At what point does a usability flaw become unethical? If a usability flaw continues to cause people to do something undesirable to them but very desirable to you — and you know this and don’t change your interface — at what point do you become a massive tool?

I’m left wondering if Shelfari has gotten to that point. As I posted last week, they really pissed me off when some crappy usability on their site sent 900 emails under my name to everyone in my address book. It was intensely embarrassing for me, but I’m sure it was very handy for Shelfari — in fact, 34 people accepted the invitations.

The usability problems were pretty clear, and I outlined them in my post on it last week. I emailed Shelfari about this (see last week’s post for the email I sent), and this was their response:

We only send emails on behalf of users who have explicitly authorized us to do so. The invite friends page clearly lists your friends in the system and all the email address of friends from your address book who from which you are given the opportunity to invite. If you don’t want to send emails to your friends there is an unselect button above each section. We have actually evaluated numerous designs for this process and have chosen one that we felt was extremely clear explaining the process and what is happening.

Gosh, that sounds…rehearsed. Could it be because it’s boilerplate text? Well, yes, in fact, it is. “Danny” from Shelfari, the same guy who emailed me the drivel above, posted this as a comment to Gadgetopia:

Hello, I am an employee of Shelfari and found your blog a bit disconcerting. Shelfari by no means forces or tricks its members in anyway to sending invitations to all of their contacts.

So far so good, but…wait for it…

We only send emails on behalf of users who have explicitly authorized us to do so. The invite friends page clearly lists […]

Yeah, that’s right — Danny pasted the same text into a blog comment that he sent to me in an email. You must keep that text real handy, Danny, because it seems this happens a lot:

Jesse Wegman from the New York Observer unwittingly sent invitations to 1,500 people.

[…] I accidentally failed to uncheck the approximately 1,500 names in my Gmail address book that Shelfari had helpfully pre-checked for me, thereby inviting to join Shelfari, under my name (and ostensibly from my e-mail account), every single person with whom I have exchanged an e-mail in the past three years, in addition to every single person who has ever been on the same cc list as I have, regardless of whether we have ever met, in addition to every single listserv I have ever joined and every single Web site from which I have ever ordered anything (Amazon, Circuit City, and Law Students Against the Death Penalty have all, sadly, declined my invitation

A commenter to Gadgetopia had this to say:

I just had the same thing happen to me. My ENTIRE address book was poached. I think this is purposeful so they can spread their service faster and pass it off as an “oopsy!”

I emailed customer service and received no reply. I deleted my account. They still sent a reminder email!

Rodney Olson did the exact same thing:

Even though I didn’t press the button below the bottom list I still should have deselected the contacts before pressing the button from the top list. My silly fault compounded by what I consider to be a dishonest method of enlisting new users for Shelfari.

After Shelfari sent out another round of emails, which I specifically asked them not to, and failed to respond to the email I sent them, I have deleted my account. I refuse to deal with a company that has no regard for its users.

After all this happened, I decided to go back to the guy who invited me to Shelfari — a local lawyer named Todd — to let him know what his original invitation caused. Here was the Google Chat conversation:

Me: Did you get my email about Shelfari?

Todd: probably. I entered one person’s name and it took everyone’s name in my gmail address book. […] I didn’t see any warning that they would take my entire address book. I put in a name or two then I started getting replies for literally hundreds of people. The site is a good idea but I don’t appreciate having my email list hijacked.

So, there you have it, even the guy who invited me did it accidentally. That’s four stories, five if you include me, and I wasn’t even looking.

Going back to Danny’s cut-and-paste excuse for a second, he says:

We have actually evaluated numerous designs for this process and have chosen one that we felt was extremely clear explaining the process and what is happening.

Well, Danny, you’re wrong. And not just regular wrong — you’re mind-numbingly, eyeball-flatteningly wrong. So wrong to be patently ridiculously wrong.

You apparently have zero respect for the fact that you’re playing around with people’s address books (the only thing worse is the lack of respect I showed my own address book by letting you in it). Seriously — how often do you think someone wants to send an Shelfari invite to their entire address book? I mean, cut the B.S. and level with me — how often do think this situation occurs?

Almost never. This is compounded by the fact that most Webmail services add everyone to your address book to which you’ve ever sent an email. So everyone’s Webmail address book is hopelessly bloated with one-off emails to people and services we’re never going to contact ever again.

Given that, I’ll ask again Danny: how often do you think someone wants to send a Shelfari invite to their entire address book? Yet you so helpfully and optimistically check all the names in gleeful abandon then set that “Send Invite” button out there in the most retarded place you can imagine. Gosh, it’s amazing these little accidents keep happening, isn’t it?

A lot of you may be sitting there think, “What’s the big deal? So you sent out a few extra emails…” So, I’ll close this with account, from Jesse Wegman’s experience:

[…] many other people in my address book I have not spoken to in a long time. Some of these people I have not spoken to for very specific reasons, such as, for instance, the woman who broke my heart in 2002 after she swore up and down that she was in love with me, and then married some tweedy environmental lawyer and moved to Park Slope, or the old deaf landlord on East Fourth Street with whom I had a flame war over an unreturned security deposit, which he had no right to keep in the first place because the window casing was a piece of crap and would have broken anyway.

I would not voluntarily write to these people for any reason, let alone to ask what they’re reading. But now, through the magic of default check boxes, I have reconnected with them […]

It’s a big deal.

Update:

My friend Declan found something else interesting in Google. He searched for the text of Danny’s comment, and found this post on the blog of Beth Kanter.

Beth says:

I’ve gotten too many messages from colleagues that have the subject line “Do We Read The Same Books” and it encourages you to sign up for a social software called Shelfari. The “bacn” from this program was sent to a listserv, and it annoyed people on the list. The problem is that the Shelfari uses the “find a friend” feature to spam your friends without permission. So, don’t install Shelfari or you will be apologizing to your friends.

There’s one comment. From a guy named “Danny.” He writes:

I am an employee of Shelfari and found your blog a bit disconcerting. Shelfari by no means forces or tricks its members in anyway to sending invitations to all of their contacts. We only send emails on behalf of users who have explicitly authorized us to do so […]

Gosh, that sounds familiar…

Another Update:

This was added to the Shelfari Wikipedia page today. I swear I didn’t do it and I don’t know who did.

Shelfari has received bad press for its potentially disastrous “Invite Friends” page, which causes new users to send unintended invites from the user’s private email address to their entire network of contacts. Shelfari then continues to send follow-up invites as if from the user’s email address.

There’s a citation after “bad press” which links to Jesse Wegman’s story at the Observer.

Another Update:

Shelfari is updating their own Wikipedia page. The quote above was changed three hours later to this:

Shelfari has received bad press for its “Invite Friends” page, which causes new users to send invites from the user’s private email address to their entire network of contacts. Shelfari sends one follow-up invite from the user’s email address.

Here was the edit note:

Removed commentary and innaccuracies [sic] from Line 20.

The IP that changed this is the same IP of “Danny,” the admitted “employee of Shelfari” that left a comment on Gadgetopia yesterday.

What’s interesting is the text they decided to leave alone. If the subject of this sentence…

[…] “Invite Friends” page, which causes new users to send invites from the user’s private email address to their entire network of contacts […]

…doesn’t change it when he has the opportunity, is that a tacit admission of that fact?

I thought editing your own Wikipedia page was prohibited, but apparently it’s just “strongly discouraged”:

[Conflict of Interest] edits are strongly discouraged. When they cause disruption to the encyclopedia in the opinion of an uninvolved administrator, they may lead to accounts being blocked and embarrassment for the individuals and groups who were being promoted.[1] Merely participating in or having professional expertise in a subject is not, by itself, a conflict of interest.

Editors who may have a conflict of interest are not barred from participating in articles and discussion of articles where they have a conflict of interest, but must be careful when editing in mainspace. Compliance with this guideline requires discussion of proposed edits on talk pages and avoiding controversial edits in mainspace.

Spolsky's New Web Sites

New websites: Joel Spolsky just had both his Web sites — Fog Creek and Fog Bugz — redesigned by Happy Cog Studios. He has an interesting piece this morning about the process, and about how he incrementally destroyed one design and had to start over.

That’s when I knew we had to start over, and when I suddenly knew what it felt like when you told the barber to give you an “en brosse” haircut because you thought you would look like Tom Cruise, and that’s not what happened.

I’m not sure if they actually redesigned the Fog Creek site, I guess. They have it down to about three pages.

If Jesus Had a Web Site

Free Church Web Site Design Advice - If Jesus Had A Website: I love the name of this Web site. It’s kind of along the same lines as Mean Dean and healyourchurchwebsite.com.

Welcome to If Jesus Had A Website, where we strive to help churches make their websites all they can be. You’ll find information on site design, hosting and software options, content creation and targeting, and much more!

Dear Forbes: Your Slide Shows Suck

Forbes has some great content on business, and they do a list article better than anyone. But, for some reason, they’ve chosen to cripple their slide shows with stupidity.

Consider this one about the most expensive homes in the world.

First of all, why a slide show? Why not just a page that lists all the pictures with a sentence or two of text beside them? I like the scroll wheel on my mouse — why can’t I just use that as a navigation tool? What is gained by going through this slide…by…slide?

Oh, right, ad impressions and useless page view stats. I forgot about those.

But why is this? The page view is more or less dead as a stat, and how are the banner ads helping here? People are concentrated on this slide show. They’re not going to roam around the page looking for something to click on.

A very important point: every single one of the slides in this show is transitory — you’re on it with five seconds, and you’re concentrated on getting of it and on to the next one. You’re not going to do anything else on these pages. You’re probably not even going to look at anything else. If I was an advertiser, I’d be pissed about appearing on any one of these pages. It’s an utterly wasted banner ad impression.

So, anyway, we have this asinine slide show with the little speed slider thing — pictured above. Problem is, it gives you no idea how fast either of the extremes are.

I sat there staring at a picture for 30 seconds before I realized it wasn’t going to change anytime soon. So, I cranked the slider out to as fast as it would go. Whoa — too fast. So fast that the page was reloading before the main image loaded. So I read some text next to a blank image, then the page reloaded. Whoops — back up.

Speaking of page load, it’s slow and annoying. The page cobbles together bit by bit, accompanied by a nice, long delay for the banner script to load. On my machine, it was taking two full seconds to load, which is about half as long as it takes to the read all the content on the page.

Once it does load, you’re inundated with banners, images, and navigation, except for the tiny little content area. So you get one image, and one sentence, and about four times that pixel area for advertising and navigation. Nice. Why not use abbreviated navigation on a page like this for the reasons I mentioned above in relation to the banner ad? There is only one thing you want to do when you’re on a slide — get to the next one. I don’t need all your friggin’ nav for this.

Forget it — I gave up.

In the end, I only complain because I care. The content was good. I was really interested in it. But this crappy slide show beat the enthusiasm right out of me.

It’s a lot like crab legs — they taste good, but it’s just too much damn work to eat them. Some people like crab legs enough to work at it. I’d rather just eat a McNugget.

Sites that Don't Like Firefox

Sites that make Firefox sad: Why would you want to make the Firefox sad? He’s so cute.

The following is a list of sites that actively block browsers other than Internet Explorer or have some serious problem that prevents the site from being usable in Firefox.

Ignoring Firefox used to be defensible, but it’s approaching 20% penetration, depending in who you ask. Do you want to ignore 1 in 5 users?