spugbrap’s blog

I’m becoming increasingly aware of usability flaws, as time goes by. I’m a professional web application developer, and tend to work on the presentation layer most of the time, so it makes sense that I pay close attention to user interfaces. I wouldn’t call myself an expert on the subject, but it is something I’m very interested in/passionate about.

But, it’s becoming more of a curse, kind of like the way typos jump out and punch me in the nose, whenever I encounter them. Actually, it’s very much like that. When I run across confusing instructions, misleading button labels, dead ends (pages that don’t include any navigation controls to get back to where I need to be), or any other UI elements that don’t make sense to me, I want to fix them!

Unlike typos, though, I feel like I have a better chance of enacting a change by reporting usability flaws, so I’d like to start emailing companies’ customer service/tech support teams about this kind of stuff.

This requires several steps, though:

1. track down the correct people to contact (may or may not be trivial… depends on the site)
2. write up descriptions of the issues, in a way that the recipients will be able to understand (optionally may involve screenshots, URLs, steps to reproduce, etc)
3. suggest potential solutions/improvements (optional)

As this seems like an awful lot of unpaid time/labor, I think I’m going to start by posting some of this stuff here, on this blog, so I will have it handy if/when I’m ready to deal with the companies directly. That way, I can just post a few quick  notes/screenshots immediately, and can deal with some of the details later, if I feel like dealing with it. Unless it’s something I encounter repeatedly, or something that’s really easy to explain, I’m not sure how often I’ll actually follow through. But many companies keep tabs on the blogosphere, so there’s a slight chance they’ll run across it without me having to actually tell them directly. That would be ideal!

An added benefit of posting these things here is that other people (like you!) will be able to comment on them, and perform a bit of sanity checking for me. You can tell me if I’m overreacting, or missing something obvious. Or, you can chime in and say “I’ve run into that, too, and it bugs the heck out of me!” Or maybe it’s a common gripe, and you know of a GreaseMonkey script that addresses the problem. In any case, comments are always welcome!

I was looking through my Gmail Spam folder today, as I do once in a while, to make sure nothing is in there that doesn’t belong. Among the actual spam, there were a couple of legitimate messages (nothing important though), including the official Google Earth newsletter (Yes, Google automatically marked one of its own newsletters as spam. I went ahead and clicked “Not Spam” on that one, since Google Earth is a cool program), and the MySpace newsletter.

My focus today is on the latter. After taking one look at it, I agreed with Gmail’s determination that the damn thing was spam. It consisted almost entirely of images (49 IMG tags!)! None of the images had alt tags, and 26 of them were linked to myspace pages (the rest were spacers/decoration).

It also included one little line of text at the very bottom:

Unable to view this newsletter? Click here to view the MySpace Newsletter profile page! :)

Gmail does not display images in messages marked as Spam, so what I saw was 3 browser-window pages of image placeholders. On the left side of this post, you can see 3 screenshots of the message, scrolled one page at a time. The screenshots are linked to their full-size versions, but I think the miniature versions and my explanation make it clear enough: This is utter garbage!

I wasn’t even the slightest bit compelled to view the images, or to click the link at the very bottom to view it on their website. Gmail was right to mark this crap as Spam!

Last week, I posted about my observation that, Gmail snippets include ALT text for images in HTML emails.

This information won’t matter to most people. But, I was thinking that anyone sending email promotions/customer service alerts/etc. might benefit slightly from this knowledge. I wouldn’t suggest putting a LOT of effort into it, since I’m sure the number of people who read their email in the gmail web interface, with the “show snippets” option turned on (I think it’s off, by default), is not large enough to warrant it, but it wouldn’t hurt to consider this tip: get right to the point!

What I’m suggesting is to put the main idea of the email in the first line of the message body (or better yet, in the subject line!). Or, at least put a reasonable hint, so the recipient can tell–at first glance–whether the message is relevant/useful to them.

You don’t get very much space to work with, here, so make it count! With my gmail window maximized, in 1280×800 screen resolution, with normal font sizes, I can see exactly 123 characters of [Subject]+[Snippet]. Usually, my window is not maximized, so we’re probably talking more like 80 characters.

I’m not in the email marketing business. I am just an ordinary consumer/geek. But I do recognize that, when reading my email, I follow some predictable behavioral patterns.

If I see a subject from Barnes & Noble like, “Two 25% Off Coupons Inside”, and have been thinking about buying a book/movie/etc., I will probably click it. However, if I see “This Week — Coupons, Anne Lamott, Tracy Chevalier, More”, I almost definitely would not. Kodakgallery.com rarely compells me to click, because they use titles like, “March Gallery Exposure: Winds of change!” Officemax.com and Dell usually mention specific coupon types/values in the subject line, which I like.

Nobody seems to be taking advantage of the first line of their emails, though. Looking through my gmail right now, the only snippets that are useful *at all* are from personal emails, and a newegg.com RMA confirmation (which shows my invoice # in the title AND the snippet, and my RMA number in the snippet). Most of the marketing emails seem to start with things like “Having problems viewing this email? Click here.”, which makes their gmail snippets worthless.

Another reason to get right to the point, with a compelling title and first line, is for mobile users. When reading email on my mobile phone, I would rather not have to scroll through several pages of menu bars, company logos, icons, greetings/small talk, etc. I’d like to see the important information first. If I don’t see it right away, and don’t have a very specific need for the information, I will most likely skip reading that message, and may or may not try to read it on my laptop later.

Brevity becomes extremely important when it comes to sending information (such as bank alerts) via SMS. Bank of America does not know this. Every time I get an SMS alert from them, it’s at least 80% fluff, and usually gets broken up into 3-4 smaller messages by my wireless provider (which, if I was not on a text messaging plan, would cost me $0.15 per message, to receive). I’ll probably post more about that another day.

While checking my email this morning, I noticed something interesting about gmail’s “show snippets” feature. It wasn’t something that jumped out at me or anything. In fact, it didn’t really register in my mind until after I’d already clicked to view the message. The words “Bank of America Customer using a laptop” seemed a little strange. So, I went back and looked at my Inbox again, and saw this snippet:

This seemed like an odd bit of text for an email notifying me that a direct deposit just posted to my account. Sure, I am a Bank of America customer, who usually uses a laptop to access Online Banking. But they shouldn’t know that, so I clicked on the message again to see what they had to say about using laptops.

Well, the message, itself, showed no signs of the word “laptop”, but the large header image in this HTML email had a picture of a laptop in it. That’s when I realized that gmail was probably showing the ALT text for the header image! To verify this, I used gmail’s “show original” option, to view the full message source. Sure enough, the header was made up of several images, each of which had ALT attributes, and the header images appeared before any of the actual message content. The ALT text for the laptop image was, as expected, “Customer using a laptop for Online Banking”.

Apparently, to generate message snippets, gmail strips the HTML out of the message, leaving behind the ALT text from any IMG tags that appear in that code.

That makes some sense, since the ALT attribute provides a textual representation of the image content, for accessibility purposes. However, I’d bet that most of the time, images in HTML emails are not meant to be part of the content… Most of the time, they’re probably things like company logos, navigation bars (linking to different parts of a company’s website), list bullet icons, pictures of your [family member/friend]’s children, etc.

Don’t get me wrong. I’m not complaining about Bank of America’s email header, or gmail’s snippet generation method. I just thought this was interesting behavior. I have a few ideas for who might benefit from this information, and how they might use it, but I’ll have to save that for another post, tomorrow.

Yes, it’s another post about public restrooms!

Just a silly thing I noticed recently, and since I had a camera handy, I took a few pictures. The lock on the handicapped stall door in the bathroom at my work is the type that you rotate counterclockwise or clockwise to lock or unlock it, respectively. The other stalls have similar locks, but the handicapped one has a bigger handle part.

Anyways, the funny thing is that when it’s in the locked position, the big handle is just loosely balanced, there, such that its extra weight (and therefore gravity) is giving it potential energy in the downward (unlocked) direction.

Not only that, but when any of the other stall doors are opened or closed, it shakes this stall door enough to make the lock fall down and half-unlock. I haven’t sat in there long enough to see if it could eventually become completely unlocked without ever touching it directly, but I am curious. :)

See pictures below… Yes, I know the locked one is not latched. The pictures were taken to make it easy to tell which is locked and unlocked. But I labeled them anyway:

locked	unlocked