OddThinking

I support the new clutter-free OddThinking!

That archive access widget rather violates Fitts’ Law, though. Maybe you could add some styling to make the links a little bit larger and equisized, something like “a { display: block; height: 1.2em; width: 1.2em; }” or whatever. (Those 1.2em are just a blind wild guess. I have no idea whether those dimensions are too aggressive or conservative.) Also, I don’t think it’s very useful to repeat the entire archive link enchilada on every permalink page. It’s probably enough to have it on the front page and the monthly archive pages.

Next: “Pages” as a label is… vacuous. “Here are some links – they lead to… wait for it… pages!” Conversely, it’s not at all clear that EmailShroud and CRCRLF are software projects. As well, the EmailShroud sub-pages probably really don’t need to be linked from each and every single page on the entire site – having them only on the main EmailShroud page would suffice. Actually, come to think of it, none of these links except “Start here!” really need to be anywhere but the front page and possibly the archive pages.

Conversely, the “Start here!” link probably needs to be much more prominent. It might be better off as part of a short blurb included inline in a centre pullout or some such at the top of every page.

Bottom line is you probably need no navigation menu at all on permalink pages, just prominent prev/main/next links (I think they ones you have are not prominent enough) and a two-sentence blurb that looks like part of the content, explaining what this is and linking the Start page. (Btw, I had never previously noticed that the very bottom of the page has another set of prev/next links; they really need to move above the comment section.) If you do that, it would probably be better to put the navigation menu on the front- and monthly archive pages on the right side instead of the left, so that the content doesn’t jump around.

The list of greatest hits on the “Start here!” page should probably be part of the navigation on the front page. (And possibly, again, the monthly archive pages.) You can write less about each link then, but it’s much more likely that people will actually see it and click around. It would also replace the marginal value that the category list offered, which was to give an idea of the tone and content of the site. (But I agree that that list wasn’t much more than clutter.)

Your “Subscribe” page is, in my opinion, a usability disaster. That gigantic table with X subscribable things available by way of Y different methods makes subscribing here look like rocket science. Almost all of those options are irrelevant to most people who’ll be looking for exactly one thing: a feed for the articles. Even having a separate page for feed subscriptions is a pretty user-hostile concept, if you ask me. I would supply nothing but autodiscovery links with well-written, descriptive titles – plus maybe a single link to the articles feed on the front page. I wonder if the per-category feeds are even a useful concept to begin with. OTOH, your email subscription feature probably means you can’t do away with that page entirely.

To be pedantic, a widget can neither adhere to nor violate Fitts’ Law. I suppose a user could “violate” the law by having supernatural dexterity which allows her to select tiny things with the same ease and speed as bigger things. (To be really pedantic, the possessive of Fitts should be Fitts’s, at least in American English.)

I agree, though, that the letters for the months are a bit tough to select. The space savings make it a lot better than it was before, but I do think the sweet spot has been overshot.

I actually liked the category list and the blogroll. I actually did pick categories that had nothing to do with any articles I just read. It was a great way to get acquainted with the blog. And now with so much space saved in the sidebar… 😉 Perhaps a reasonable compromise would be to have a link to the category list and a link to the other blogs?

I also have criticism for the Subscribe page, but it seems to come from a completely different angle than Aristotle’s. I am actually not a feed user and not too familiar with them, but when I imagine what setting up a feed would be like, and the kind of person who would do such a thing, it seems to me that the page is not overly difficult to understand or unfriendly to use.

My problem with the page is precisely that I am not interested or knowledgeable about feeds, and wanted to investigate the e-mail option. The link at the top brings me down to the bottom of the page, where I can find two more links, right next to each other, which don’t take me anywhere because I’m already at the destination, where the supposed instructions live, but all they tell me is that I should register first. Um… OK, but how do I do that?

I actually did pick categories that had nothing to do with any articles I just read. It was a great way to get acquainted with the blog.

Wouldn’t having a list of OddThinking Highlights (that are now lurking on the Start Here page) in the navigation serve the same purpose? (I actually think it would do so better than the categories, but that’s just my opinion.)

I support the new clutter-free OddThinking!

Thanks! And thanks for your quality comments below. I’ll break them down and address them over a number of comments.

That archive access widget rather violates Fitts’ Law, though.

That was (is!) a concern I had. I was afraid of making the letters any bigger because the December link (in my browser) is already pushing up against the edge of the column.

The choices I can see:

• leave it small. Downside: less-adept mouse users will fumble for links.
• make it larger, and dedicate more real-estate to the sidebar. Downside: That’s a lot of empty screen real-estate all the way down the left hand side.
• make it larger, and let it wrap (perhaps encourage it to happen between June/July). Downside: I am concerned about whether users will recognise the initials of the months. Splitting over two lines increases this concern.

Any other suggestions?

Next: “Pages” as a label is… vacuous.

I absolutely agree. It is a side-effect of using widgets, which have a formatting convention for titles. I was hoping that eventually a brilliant new title would occur to me. Static pages? Ugh. Permanent? Sitemap? Features? All ugh!

The choices I can see:

• leave it as “pages”. Downside: vacuous.
• change its name. Downside: needs brilliant idea.
• revert to non-widget-based theme. Downside: I would need to unpack the Compact Monthly Archive widget, which means I can’t share it with the world as an easy-to-use widget.
• break the widget convention. Downside: I am sure it will bite me later, but given I have already rewritten this plugin, this is probably the best option.

Conversely, it’s not at all clear that EmailShroud and CRCRLF are software projects.

Ooh, I do like the idea of calling them Projects, and separating them from the other pages.

The choices I see:

• The simplest way to do that would be to create another level in the hierarchy called “Projects”. Downside: That would probably break permalinks, so I would need to investigate that.
• Create another widget that only shows a subset of pages.

Actually, come to think of it, none of these links except “Start here!” really need to be anywhere but the front page and possibly the archive pages.

Argh. This would have been a trivial change before I went to widgets. It is a difficult change with the widgets. I am thinking maybe going to widgets was a wrong step; is it time to revert, and give up on ever releasing my widget to the world?

Wouldn’t having a list of OddThinking Highlights (that are now lurking on the Start Here page) in the navigation serve the same purpose? (I actually think it would do so better than the categories, but that’s just my opinion.)

It does serve that purpose well, and in some ways better. Certainly for many users it will be more inviting. But it doesn’t provide the same access. If you happen to want to know what all the categories are, there is really no substitute for a list of them. I am a freak like that, though—I like having comprehensive and structured access, and I find organization by category particularly useful for any author who has a sufficient body of entries and is reasonably serious about categorizing entries appropriately.

Regarding the balance between space saving and ease of targeting in the monthly archive, would it be practical to keep the sidebar about the same width as it is, but put the months on separate lines from the years to let them use more of that width? Something like

_2005:
__J F M A M J J A S O N D

And Aristotle’s suggestion of making the actual link areas bigger and uniform in size would be great if it’s possible. (The J’s in particular need help.) I’ve put a space between each letter, but I don’t think it will fit like that. I was just trying to show the letters with a little bit of breathing room.

As for people not being able to figure them out, I say don’t worry one whit about that. Not to unduly promote snobbishness, but I think anyone who is likely to enjoy your blog is going to have a good fun fraction of a second while they realize what you’ve done. It contributes to the intellectual and puzzle-oriented flavor of your blog and appeals to the efficiency-minded. If you can’t figure out a nice way to make it easier to click on without giving up a lot of space, I think you should leave it.

Actually, come to think of it, none of these links except “Start here!” really need to be anywhere but the front page and possibly the archive pages.

Personally, I like having the sidebar invariant and “fully stocked”. (That is, the same on every page, and not hiding certain links on certain pages.) To me, the point of the sidebar is to be able to jump to anywhere, anytime. And really, unless you add a lot of stuff back into the sidebar, it is compact enough. Getting rid of links would be removing more access while reclaiming not a lot of screen space or clutter.

I wrote:

make it larger, and let it wrap (perhaps encourage it to happen between June/July).

Alas, I tried that – by putting a &zwsp; between June and July.

Zero-Width Space (&zwsp;) has exactly the connotations I want, but apparently isn’t part of a widely supported standard. Works perfectly in IE, but is not accepted in FireFox nor Opera. 🙁

What’s the correct way of saying “you shouldn’t put a space here, but feel free to put a line-break”?

I am going to re-state Aristotle’s suggestions about navigation links to make sure I have understood.

1) Previous/Next links should be more prominent, and also be available between the article and its comments.

Good idea. I should implement this.

2) The front page should offer a concise list of “greatest hits” to get people started. This is more useful than categories.

Good idea.

I did a test run, using the list of pages from the “Start Here!” list, and I found it was very long – I have 20 links in 4 categories. It was over a page in length along the left of a a 17″ screen, and looked cluttered. Still mulling over this one.

3) Links to archives should be on the front and archive pages, but need not clutter up the single article pages.

I have mixed feelings about this one. My initial gut reaction is to agree with John that I like the “fully stocked” links on all the pages, but I can’t think of any
rational reason why. That is usually a good indicator that I am wrong.

4) If there is no need for a sidebar on some pages (e.g. single article pages) then it should appear on the right on the other pages where it is required.

This suggestion scares me a little; it is a fairly major change to the RSS, which I found painful to get right the first time. If I was to do it, I would also look at making the sidebar a limited height, so the text could flow around it lower in the page. In a long article, it is taking up a lot of unnecessary real-estate. On the other hand, wider lines are not always more readable ones.

5) The “Start Here!” link needs to be more prominent.

If I have a greatest hits list, then “Start Here!” isn’t as important any more. It reverts back to a simpler “About Me” which is what it used to be called. It seems less important to read, and more like “FYI if you are interested” information for new users.

Aristotle also mentions a Main link in the same context as Previous/Next. I don’t have such a link made explicit (although the title is clickable.) If I did suppress the archives on some pages, the home link would be important, so I should add one.

Aristotle writes:

Your “Subscribe” page is, in my opinion, a usability disaster.

Harsh, but fair.

I would supply nothing but autodiscovery links with well-written, descriptive titles – plus maybe a single link to the articles feed on the front page.

The first part was implemented months ago.

I always hated the brokenness of orange XML links into unreadable XML, especially with the feed: prefix. Admittedly, all the major browsers now display them much more cleanly, so perhaps I should get over that, and include such a link, purely as a reminder that that’s a valid option.

I wonder if the per-category feeds are even a useful concept to begin with.

What I would love is a “exclude-category” option, so I don’t need to read articles on topics irrelevant to me.

OTOH, your email subscription feature probably means you can’t do away with that page entirely.

Right. I was strongly tempted to ditch the email subscription some months ago, but when I looked at the email addresses I realised there were a few regulars that I didn’t want to lose. If I was to do it all over again…

John Y writes:

The link at the top brings me down to the bottom of the page, where I can find two more links, right next to each other, which don’t take me anywhere because I’m already at the destination, where the supposed instructions live, but all they tell me is that I should register first. Um… OK, but how do I do that?

My head is hung low. The subscription form used to work, but at some point I broke it in two (count them, two!) different places.

The missing form at the bottom of the Subscribe page now appears again, and accepts your email address.

Right above this form, the hint that directs you to the Register link is now more clear, and the Register link now actually exists!

Sorry for the unnecessary user interface pain!

I have updated the archive widget to split the text over two lines and increase the text size.

Does having a list item larger than its parent look vaguely disturbing to other people, or is it just me?

There’s a   between June and July to promote line-splitting there, and to make up for the narrowness of the two Js. I am thinking of making it a &zwsp; (or whatever the official Unicode name for a Zero-Width Space is.)

I’ve also increased the space above the menu and between sections.

First, let me just confirm that the previous comments by “Julian In Disguise” was in fact me, in disguise. I was using a test account to check subscriptions and forgot I was still logged in.

I have now much simplified the subscriptions page by assuming feed aggregators just work. Hopefully, it is now less a “disaster” and more just a “bad day”.

John:

To be pedantic, a widget can neither adhere to nor violate Fitts’ Law.

Yes, sorry. I should have known better than to run afoul of a similar confusion as the people who annoy me by speaking of “violating Godwin’s Law.”

If you happen to want to know what all the categories are, there is really no substitute for a list of them.

I suppose having the list somewhere would be occasionally useful. Maybe on a dedicated page? I think they don’t serve much purpose in the navigation; it’s just too much stuff.

Getting rid of links would be removing more access while reclaiming not a lot of screen space or clutter.

It’s not about screen space. I don’t think “it might be useful and doesn’t take up much space” is a good criterion for designing the navigation on a site. Providing options for the sake of providing options just leads to overload.

It does bother me a bit that my suggestion leaves no easy way to get from an article to its context in the archive. Maybe something like this (assuming the reader is looking at an article posted in Feb 2006)?

« Foo Bar | Main | Baz Quux »
« Jan 2006 | Feb 2006 | Mar 2006 »

(Lined up, of course, or at least centered.)

Re: “Subscribe” page:

Harsh, but fair.

Hey, you asked us to sock it to you. :-) Wasn’t meant to disparage you, mind; plenty of the things I design come out horrible and need a good amount of iteration before they work. I continue to learn to judge my own stuff harshly so it doesn’t end up sucking too bad.

I have now much simplified the subscriptions page by assuming feed aggregators just work. Hopefully, it is now less a “disaster” and more just a “bad day”.

Much better! You might go further and cut out your mention of the available formats as well, though. Where autodiscovery works, it will take care of that automatically anyway.

Re: sidebar:

I did a test run, using the list of pages from the “Start Here!” list, and I found it was very long – I have 20 links in 4 categories.

That’s why I didn’t say you should remove the list from “Start Here!” :

[Having the sidebar on some pages but not others] would have been a trivial change before I went to widgets. It is a difficult change with the widgets. I am thinking maybe going to widgets was a wrong step; is it time to revert, and give up on ever releasing my widget to the world?

Hmm, why the dilemma? Isn’t it possible to not use the widget yourself, but still package up the code as a widget? Or is that too hard/much of a hassle?

This suggestion [of putting the sidebar on the right] scares me a little; it is a fairly major change to the RSS, which I found painful to get right the first time.

(I assume you meant CSS.) I think my suggestion would be much easier to implement in CSS than what you have now – particularly because I agree that the sidebar should be limited in height, with text flowing below it, which is exactly the behaviour you’d get with a simple float: right property.

On the other hand, wider lines are not always more readable ones.

You might be interested in the Jello Layout. (I’ll let it be known that augmenting the layout by adding a max-width property to the #stretch rule Just Works.)

I have updated the archive widget to split the text over two lines and increase the text size.

Hmm, that isn’t much better. The area for each link is still relatively small, and the fact that the letters aren’t visually spaced apart means that if you move the pointer over them, it covers up the targets, making it harder to aim. I tinkered a bit and came up with the following based purely on the markup structure you already have:

.STO_cma_line ul {
padding-left: 0.25em !important;
}
.STO_cma_month {
padding: 0.2em;
}
.STO_cma_month a {
margin: -0.2em;
padding: 0.2em;
}
.STO_cma_empty{
color: #4984E3;
}

However, I’m not sure how IE will take to those negative margins, and that !important hack is ugly. Having control of the markup, you should be able to come up with a way that needs neither.

Btw, the HTML you produce is a bit suboptimal. Instead of all those SPANs, it would be better to have LIs inside another unordered list; simply use a display: inline property for the list and its items and they’ll render just like your current pile of SPANs does.

Aristotle:

It’s not about screen space. I don’t think “it might be useful and doesn’t take up much space” is a good criterion for designing the navigation on a site. Providing options for the sake of providing options just leads to overload.

I agree that gratuitous features should not be included simply because it is cheap to do so. My point was that I do not find having the full complement of links available to be gratuitous. We obviously differ on the valuation of this particular feature, and perhaps more generally on what is a natural way to browse a site.

My idea of a sidebar, which I fully acknowledge may be weird, is that it stays the way it is everywhere so that you can always count on having the same level of access everywhere. I don’t like to be “steered” too much when I browse a site. But at the same time, I am not proposing that there be a direct link to every page, even if there is enough space for them. I did say that I liked the scrunched month initials better than the fully spelled out months all the way down the page.

Speaking about going all the way down the page, I am not in favor of a limited-height sidebar and flowing text under it. I would have stated Julian’s point about line widths more strongly: Wider lines (approaching the width of a typical browser window) are distinctly less readable than narrower ones. While it’s true that there’s such a thing as too narrow, it is much more likely that lines will be too wide than too narrow. (Though I must admit, Aristotle, your solution on plasmasturm of putting a generous amount of space between lines does work quite well.)

Where is everybody else? Surely there are more than just two people around to bounce around ideas? (Or maybe by now they are intimidated by the amazing vertical length of the accumulated comments… which, for this particular thread, kind of make me yearn for a hide/fold/excerpt feature. 😉 )

Where is everybody else? Surely there are more than just two people around to bounce around ideas?

We’re here, at least some of the time!

I approve of the theme changes, but it looks odd to me that the months are larger than the heading above them. I realise this conflicts slightly with the goal of making them easy to click on.

By way of more radical feedback I am going to point to this web typography presentation from SXSW, with the acknowledgment that I have not attempted to follow this advice on my own site. Some interesting tips displayed there through worked examples.

Though I must admit, your solution on plasmasturm of putting a generous amount of space between lines does work quite well.

:-) That one’s a well-known typographic rule: you can make lines quite wide (though not arbitrarily so) without significantly affecting readability as long as you adjust the line height to match. Since the eye has to travel further to find the start of the next line with longer lines, you have to make the “grooves” wider to allow it to track them reliably.

The default line height used by webbrowsers is too small for general use.

Does having a list item larger than its parent look vaguely disturbing to other people, or is it just me?

The area for each link is still relatively small

I approve of the theme changes, but it looks odd to me that the months are larger than the heading above them. I realise this conflicts slightly with the goal of making them easy to click on.

Based on the above feedback, I have made the text small, but increased the padding associated with the link, so being slightly inaccurate will still get you to the right link.

I didn’t seem to have to use Aristotle’s negative margins. Tested on IE7 and FF, and it seems to work. Is something going to bite me later?

IE7 has a zoom feature (a different feature to setting default font-size) which appears buggy. When you zoom, it forgets about the padding. It looks fine at 100% though.

I replaced the Thin Space with a Zero-Width Space, with additional CSS to handle the fact that most fonts don’t support it.

When the months don’t fit on one line, the dates don’t line up due to proportional spacing. 🙁 I am too tired now to work out if the CSS box model supports specifying an overall width for a box.

Btw, the HTML you produce is a bit suboptimal. Instead of all those SPANs, it would be better to have LIs inside another unordered list; simply use a display: inline property for the list and its items and they’ll render just like your current pile of SPANs does.

My thinking was that if it is distributed as a widget and the user has a theme that doesn’t explicitly support the new styles, the widgt should give a reasonable result anyway. Missing the “display: inline;” would give a pretty awful result.

Hmm… are you still fiddling with the month thingies? For me, the lines are not breaking and they are spilling out of the sidebar and into the main content area in Firefox. (For that matter, this comment edit box spills over into the right-hand blue margin once I type enough text into it.) Granted, I seem to have a lot of problems in general that most people don’t because I use a laptop with insanely high resolution and have set my DPI in Windows to compensate, which helps some things and makes others worse.

In IE, on the other hand, there is a visible dot after June and the months are broken into two lines. In both browsers, it looks like the spacing of the unavailable months is larger than that of the available months. So in IE, 2006 lines up nicely, but 2005’s top row is longer while 2007’s bottom row is longer. (I should probably mention that my version of IE is 6.0.)

Other than that, I think this looks and works noticeably better than the larger month initials. It’s much closer to what I was trying to describe earlier with only limited success due to my rudimentary knowledge of HTML, CSS, and other browser-related technical details.

I also wanted to mention that the Subscribe page is vastly improved. It’s not even a bad day. Again, I’m not as minimalist as Aristotle, and find it more comforting to see the protocols mentioned, even if not strictly required. And I do have a rational reason for this: I would rather not have to try something and only learn by its success or failure whether it was supported.

are you still fiddling with the month thingies?

Yes.

For me, the lines are not breaking […] in Firefox.

Waaah! I tested in Firefox on my test blog, but my test blog has less frequent posts, and it looked fine. I just tried again with the live site, and yuck!

(For that matter, this comment edit box spills over into the right-hand blue margin once I type enough text into it.)

When given the choice between breaking a word at a non-space or scrolling off into no-man’s-land, browsers always seem to choose the latter…

In IE, on the other hand, there is a visible dot after June and the months are broken into two lines.

I am not seeing that on IE7. It could be the zero-width space is being rendered as an unknown character on IE6. I’ll test it out.

In both browsers, it looks like the spacing of the unavailable months is larger than that of the available months.

Agreed. I need to fix that. I mentioend it before as a “proportional spacing” issue.

Thanks for your continued feedback!

Update:

Tested in IE6. IE6 can’t handle zero-width spaces, even when using the decimal expansion AND setting the font AND declaring the style to be zero pixels wide. Changed back to a normal space between June and July, but still have set the width to zero pixels.

The proportional spacing problem wasn’t proportional spacing. It was a plain old error in the CSS. Fixed.

Firefox looks good when in a small font (year displayed on one line), and when in a large font (year displayed on two lines) but not in a medium font (year displays on one line even though it won’t fit.)

I swear, I am close to redoing the whole theme with good old reliable tables, and giving CSS the flick. How close? Well I would show you, but   isn’t widely supported yet.

The latest spacing change renders horrendously in Firefox 2.0.0.3. The zwsp class doesn’t seem to be being treated as a potentail linebreak in this browser…

Richard,

If only it were that simple.

Try changing the font size. If your set-up is anything like mine, it looks perfect on any size except the default.

Shrink the font, and it fits on one line. Increase the font and it splits over two at the right point. Leave it at “Normal” and it doesn’t fit and doesn’t split.

I am getting frustrated about now.