Analysis of Poor UI Design

Joel Spolsky analyzes the “Off” button and menu in Windows Vista. He claims that the UI is cumbersome (and I agree with him), and considers how it could have been better designed.

Using Spolsky’s article as a springboard, former Microsoft developer Moishe Lettvin provides insight into how Microsoft’s departmental organization contributes to this sort of poor design.

Spolsky briefly follows up.

All of this via Ceej.

Daylight Savings Time Without A Saving Throw

The official Dreamhost blog notes that computers will need to change their algorithms for handling Daylight Savings Time starting in 2007.

No, really.

I had heard about this change, but hadn’t considered the implications to the computer industry. Not to mention everyone who’s used to their VCRs and PDAs and other electronic gizmos adjusting their clocks for DST automatically, and whose software is unlikely to ever be revved. (Cell phones are less problematic since they seem to already get the local time via a server uplink.)

Next up: Congress passes law instituting a return to the Julian Calendar.

(In case my entry title baffles you, here’s the entry for saving throw.)

Internet Explorer Vexes Me

So yesterday Debbi brought home her Windows laptop from work to show me what Fascination Place looks like in Internet Explorer.

And, uh, it’s not exactly what I’d intended.

The core problem is with the three-column layout: It’s supposed to have three neat columns below the header and above the footer with a fixed-width sidebar running down each side, and a fluid-width column (i.e., column that grows if you make the window wider) in the middle. What appears in IE is that once the central column’s content is long enough to run below a sidebar, it flows around the bottom of the sidebar to take up (nearly) the entire width of the window.

For those familiar with CSS, each column is its own div element. The left and right sidebars are set with float: left or right (respectively) and with fixed pixel widths, and the middle column does not float but is set with width: auto. I’ve tested this with several browsers on Mac OS X, and it works fine in all of them. But it looks poor on IE on Windows, and unspeakably awful in the ancient IE 5.2 which was (I think) the last version available for Mac OS X (and which has many known bugs).

There are a few lesser issues, such as the words “Fascination Place” in the banner not appearing in the large characters I intend, and the text scrolling off the right side of the page. Those aren’t as annoying as the essential column problem, though.

I’ve been doing a little research, and it appears that IE has a number of bugs and quirks in it where CSS is concerned, for instance these bugs, and these bugs, and this box model problem. Debbi’s machine is running IE 6 on Windows 2000 v5.0, and apparently many of these issues have been fixed in IE 7. (Whether it fixes my problems, I don’t know.)

Fascination Place is my first foray into using relatively modern (i.e., this millennium) Web technologies. I’m well aware that the nature of the Web is that not everything works well for all people, and that there are people out there still using Mac OS 9 and Windows 98 (some people can’t upgrade), so not everything will render well for those people. But I’m not sure how much effort I want to put into making FP look good for people using old technology, not because I don’t want them to read my site but because I have finite time, and I don’t have access to most non-Mac or older browsers.

(For the record, I’ve tested with Safari, FireFox, and Camino. I should probably also try Opera and OmniWeb.)

I’d appreciate some input from my readers, especially ones living in a Windows world or on older software:

  • Does FP look like what you expect it to look like, based on what I described above?
  • If it doesn’t, is it at least readable and usable?
  • If you’re familiar with CSS (and/or willing to look at my stylesheet), do you have any tips for improving the experience for other readers?
  • Do I suck at writing CSS, or what? 🙂

I would like to make (as they say) a good-faith effort to whip things into shape. And of course improve my understanding and use of CSS generally. But those of you for whom the page looks really whacked may need to bear with me for a bit.

Sorry about that.