K-Squared Ramblings

ATM Design: Shelf?

It sure would be nice if this ATM had at least 1 horizontal surface so I could set down my drink & not have to mess w/my wallet one-handed #

Login Form Fail, Pinhole Bridge

• Pet peeve: Login forms that move the cursor to the username field AFTER the page finishes loading. Sometimes I’m already typing by then. #
• Weird: I feel tired, but I’m acting like I’m still on caffeine. #
• Cool: A 6-month-exposure photo showing sun trails above a bridge, made using a pinhole camera made from a soda can #

First item cross-posted at LiveJournal.

Don’t Hurt the Web

The Mozilla Developer Center has just posted some desktop wallpaper promoting open standards, (and the MDC itself) with the theme, “Please don’t hurt the web. Use open standards.”

Apparently the design was a big hit as a poster at SXSW.

For those who haven’t seen it, the MDC is a great developer resource for web developers, describing lots of standards along with Mozilla-specific information.

(via Rhian @ SFX, who notes that the image is available for use under the terms of the Creative Commons Attribution-NonCommercial license. These wallpapers are also covered by the Mozilla Trademark Policy.)

Thoughts from a Redesign

Last weekend I did a redesign of my comics fan site, Flash: Those Who Ride the Lightning. It was prompted by two goals:

• Get rid of the non-working compatibility cruft for Netscape 4 (some of it was actually making things worse in NS4)
• Make navigation easier.

Read the rest of this entry »

Web Design is Like Pizza

When web designers switch from focusing on a single browser (usually Internet Explorer) to developing cross-browser sites (usually adding Firefox, sometimes Opera or Safari, ideally all three), they often find that things don’t work as expected in the “new” browser. This can be for a number of reasons, including:

• Bugs or “missing” features in the new browser (whether incomplete support in the new browser, or proprietary features in the familiar browser).
• Broken code on the website being handled differently.
• Different defaults where behavior isn’t well-defined in the specifications.

A big problem is that when you get into the code, a lot of pages aren’t as specific as the authors think they are. When you write code and test it on one browser, you’re not testing that the code is correct, you’re testing that that browser makes the same assumptions you do.

It’s like ordering pizza.

No, really. Let’s say Internet Explorer specializes in Chicago-style pizza, with a thick, chewy crust. And let’s say Firefox specializes in New York-style pizza, with a thin crust. But each can make the other style of pizza on request.

So you call up Internet Explorer and ask for pizza. They deliver you Chicago pizza, and if that’s what you wanted, you figure your order is fine. If you actually wanted New York style, you make sure that next time, you tell them you want that style of pizza.

But let’s say you like Chicago pizza. You get used to calling up IE and just asking for “pizza,” until one day you’re busy, and ask your roommate to order it. He likes to get his pizza from Firefox, so he calls them up, asks for “pizza,” and you get New York style. That’s not what you wanted. Obviously, Firefox pizza is inferior, because they got the order wrong! Well, no, it’s not, and no, they didn’t. They delivered what they were asked for. If you’d told your roommate to ask for Chicago style, Firefox would have been perfectly happy to deliver that style of pizza.

The moral of the story: always be specific with your code. Make sure it’s asking for what you think it’s asking for (validation helps here). And if something doesn’t do what you expect, make sure you didn’t leave that expectation out of your order.

See also: No, Internet Explorer did not handle it properly

(Expanded from a comment I posted at Mozillazine.)

Suggestive logo

Here’s another example of using a design that suggests a logo, rather than using it outright. This is a “Win Compatible” badge from the package of a KVM switch. (I think it was from IOGEAR.)

What I like about this is that it manages to get the idea across clearly even though it doesn’t use the actual Windows name or logo. “Win” is enough to get the name across, and the overlapping colored rectangles immediately call to mind the look of Windows 2000, Windows Me, and Office 2000. Sure, it’s one redesign back, but it’s still recognizable.

As for why they made their own logo? Well, it’s all hardware, with no drivers needed, so there really isn’t any point in putting it through the OS compatibility tests. You might as well label a monitor as being “Designed for Windows.” But not everyone knows what is and isn’t OS-dependent. Even those who do are more likely to buy it if they have that reassurance. I’ve looked at devices that I was 90% certain should work with any OS, but bought the one that specifically mentioned Mac or Linux compatibility because it filled in that last 10%.

The power of color

I was looking for a list of requirements for Opera, and found this browser comparison table [archive.org]. Opera is compared to “Browser 1″ and “Browser 2″ on various features, speed, security, etc. Browser 2 doesn’t look too favorable, but Browser 1 looks terrible.

Of course, even if you don’t recognize the specs, you can identify them easily by the column headers:

• Opera is red
• Browser 1 is blue
• Browser 2 is orange

Hmmm….

Interestingly, I’ve got a project I’ve been working on off-and-on for a couple of weeks, and I’ve already put together a design using just color to represent different browsers.

It looks like I may have been on to something.

Update August 8, 2005: Apparently there are countries in which it is illegal to mention a competitor by name in ads, which might explain the tactic. Also, Opera has taken down the page, replacing it with a note that “This page is under development.”

Title goes here

I’ll always remember a line from a play I was in during college. It was an original musical, and the composer couldn’t come up with a good line by the time he had to hand out the scripts, so he filled it in with “Come around and schmoo” just to keep the rhyme in place. Oddly, I can’t remember the line he finally replaced it with.

And of course, Firefox’s cookie preferences were labeled “Cookies are delicious delicacies” for so long during the beta period that by the time they wrote a real description for 1.0, someone wrote an extension to put it back in!

Well, sometimes dummy text makes it through “rehearsals,” so to speak. Jim Heid found live sites with various kinds of filler text. Not just the ubiquitous “Untitled document” (millions of pages), but samples of “lorem ipsum” filler and even ~250 hits for “this is placeholder text” (whoops, I’m gonna skew those results a bit.)

(via Scobleizer, who recommends using “xxxxx” exclusively for placeholders.)

Web Clutter: An Object Lesson

Here’s a pair of excellent articles about how to avoid cluttering up your website so that people can actually see your content. The article is, however, hampered by appearing on a site that seems to violate every usability principle imaginable…. to the extent that the second one showed up on the Cruel Site of the Day [archive.org]. From the introduction:

We’ve all visited websites that made us wince. You know what I mean: full of distracting animation, flashing text, and enough other clutter that it reminds you of a Victorian home filled to bursting with knick knacks. Are you guilty of filling your website with useless junk? Christian Heilmann takes you down his checklist of website clutter. You just might find yourself considering a redesign.

Yeah, that sounds like a description of Dev Articles to me. I count no fewer than 8 ads on the first page, 6 of them animated. The text is buried in a morass of advertisements and navigation that make it extremely difficult to actually read the article.

It reminds me of a book called Fumblerules, which collected (or possibly originated) guidelines like “Always proofread carefully to make sure you don’t any words out,” or “Plan ahead” with the last few letters scrunched together to fit on the page. These were designed to make their points by deliberately breaking the rules to make them more memorable.

Well, there’s always the Daily Sucker.

Update: I checked out the author’s website, which demonstrates he has the sense of taste and aesthetics one would expect from his articles. It really is too bad DevArticles isn’t willing to take his advice.

Pixels as Magic Numbers

All the Linux desktop action these days is in KDE and GNOME, but on older hardware, servers, or anything else where you need to squeeze every last ounce of performance from the box, something lighter is needed.

My Linux box at work — a 300 MHz Pentium II — runs WindowMaker. It’s familiar, it stays out of the way, and it doesn’t tie up the memory or CPU that a modern version of KDE or Gnome (or Windows, for that matter) would. But you need to add applets like a clock or a desktop pager. You can find them easily enough — I ended up using the aptly-named wmclock and wmpager – but there’s a significant problem with both. WindowMaker lets you change the size of the dock icons, but when I shrank the dock to get more space I discovered that both applets have a hard-coded size of 64×64 pixels.

As you can see, a 64×64 applet just doesn’t work in a 48×48 space. It surprised me, though, since these dockapps are designed specifically for WindowMaker, and it’s WindowMaker itself that lets you change the size. You open up Preferences, change the size, and restart WM. Just menus and buttons. No config files, no registry, no third-party add-on. This isn’t an esoteric hack that takes serious effort to find, it’s a basic feature. You might as well design a Mac program that assumes the Dock is on the bottom of the screen. For most people it will be, but it’s not rocket science to move it.

In my ICS classes, they always discouraged us from using “magic numbers” — just throwing a number in the code without identifying or abstracting it. There are two very good reasons for this. The first is that you might forget what this 64 is doing. The second is that you might decide to change it later on, and it’s much easier to change one SIZE=64 definition than to track down every 64 and hope you’ve neither missed any you need to change nor changed any you need to leave alone.

Those dock applets are stuck at 64×64 pixels because the programmers were thinking in terms of the pixel grid, not in terms of actual display size. Read the rest of this entry »