the new look at humantransit.org

 We're pleased to introduce the new "look" for Human Transit, including a more readable serif font (Georgia) and I hope a cleaner, more legible feel.  Big thanks to my associate Evan Landman for building and sculpting the design.

As with any change to a transit system, most comments are from existing users disoriented by change of any kind.  So: Calm down, everything you love is still here.  It's just moved around like this:

  • Most content that was in the right-hand columns of the old design is now in the new menu bar above.
  • The Links menu has subcategories, which will open to the right when you click on a menu item.
  • Categories referring to cities have now been separated from other categories.

One note: If you browse the category menu by just clicking and pulling your mouse down, the menu will seem to extend beyond the screen.  Instead, hold the menu by leaving your cursor on it, then use your arrow keys to move the scroll down in the window.   We're working on a better way to handle that.

Some older posts are likely to look messy for a while.  It will take Evan a few days to go through all 942 past posts and clean up anything that didn't translate cleanly.  Be patient and we'll get to them.

I'm sure I don't need to tell you to share your feedback, and any bugs, in the comments!  Please be constructive!

Here's one question that you can answer in comments.  Historically, this blog has used all-lower-case post titles, even for proper names.  Is this (a) a nicely distinguishing bit of "design" or (b) an irritating affectation or (c) you've never noticed or cared one way or the other.  Now everyone can make a one-letter comment!

34 Responses to the new look at humantransit.org

  1. Chris July 12, 2013 at 10:27 am #

    A little more line spacing would improve readability.

  2. Paul July 12, 2013 at 10:33 am #

    Lower-case post titles: B

  3. Kenny July 12, 2013 at 12:28 pm #

    C – never noticed

  4. Vincent July 12, 2013 at 1:45 pm #

    A

  5. Brian July 12, 2013 at 2:07 pm #

    C.
    The overall new page blog text width is a bit narrow for my tastes though.

  6. a July 12, 2013 at 2:58 pm #

    a

  7. Shanedphillips July 12, 2013 at 3:08 pm #

    I think “irritating affectation” is strong, but it is annoying when I want to share a post on Twitter or Facebook and have to capitalize it myself, so:
    B

  8. Schala09 July 12, 2013 at 3:43 pm #

    I love the overall look, and the serif typeface.
    Regarding the lowercase titles, my vote is B+. I do think it would be easier to read with regular title case, but it’s not particularly irritating, and it’s arguably part of your style, which is a good enough justification for me.
    My only real complaint with the new design is actually the header image. I think the cross-fading looks kind of cheesy and down-market — not the image that I assume you’re going for. I think it would look much nicer if you kept the map, but got rid of the bus/city picture, and moved your picture to the right-most column (you could call it “the author”, for consistency).

  9. R2-JL July 12, 2013 at 4:50 pm #

    I’m not really a fan of the serif typeface, but I absolutely love everything else. Especially the new header image.
    As to the post titles, I’d never noticed it before, but now that it has been pointed out to me it sort of bugs me.

  10. Tom West July 12, 2013 at 6:01 pm #

    I find sans-serif *much* more legible on screen. That aside, I like the new look – much better suited to today’s screen resolutions.

  11. Neil July 12, 2013 at 9:17 pm #

    c
    And if you hadn’t said anything, I wouldn’t have noticed you redesigned either. I read for the content, not the look.

  12. Miles Bader July 12, 2013 at 9:38 pm #

    A nice looking revamp, although maybe the article font size is a bit small.
    I mainly like the fact that the text area seems to be wider… before both the stories and comments seemed to be squished so that they took up tons of vertical space.

  13. Michelle July 12, 2013 at 10:38 pm #

    Lower case can be ‘applied’ to selected content, such as titles, via style sheets (CSS). If it’s a choice made for style and design, that’s the way to do it. The more purely-content the content is, the better not only for minimal fuss during a design update but also better for readability for all and especially for those using assistive tools and tech such as screen readers and low-vision modifications.
    I find the legibility of the main text to be fine, the main navigation menu labels passable , and the sub-navigation labels poor.
    Requiring sub-menus to access the content is poor usability. There are cases where this will not work, and cases where it will but not well. If clicking or tapping any top-level menu item (hover or click-and-drag could still use the exploding submenus) went to a page offering an overview and links, this could address many issues, including the problems with a long list of sub-menu options. Giving ‘too much info’ a useful format is in your wheelhouse, right? For a quick CMS solution I might try a tag cloud for the categories that uses font size to indicate volume of posts. For cites I’d add a geographic breakdown by country or continent, and possibly a map, and as a reader I’d love to see groupings that suggest other cities with key similarities.
    I’ll stop, before I have to fetch my web design soapbox – this is a transit blog!

  14. Brian July 13, 2013 at 12:16 am #

    c

  15. Colin Stewart July 13, 2013 at 10:07 am #

    In general, the overhaul is a big improvement. Much easier to find things. I particularly like that the “Stuff you need to know” is very prominent.
    Now for the nitpicking: I don’t mind the lower-case post titles, but they jar a bit with the upper-case blog title and menu links. Some consistency would be good. Same goes for the somewhat arbitrary mix of serif and sans serif fonts. On the whole though, this is a big step up.

  16. Robert Wightman July 13, 2013 at 12:53 pm #

    Thank God; someone else has found how to use serif fonts. Many people with learning disabilities find them easier to read. Now if you could only do it for comments. Looks great, I love it.

  17. dwb July 13, 2013 at 5:33 pm #

    Is it just me or still no search function? [Am I blind?!?]

  18. Juris July 14, 2013 at 4:06 am #

    Looks pretty good!

  19. mike0123 July 14, 2013 at 10:13 am #

    The website is much better, but the image up top doesn’t fit.
    The Burnaby and New Westminster bus network doesn’t make any sense. It’s arterial network is reasonably well-spaced continuous-enough grid connecting pretty well to rapid transit. The bus network is an incomprehensible, infrequent loopy bowl of spaghetti that could, if it followed from the arterial network, be much more simple and frequent.

  20. Ben G July 14, 2013 at 1:04 pm #

    A suggestion for the banner image: See if you can get with TriMet and have them let you photograph an off duty bus with the electronic signage above the front window changed to say “HUMAN TRANSIT”. That would be cool 🙂

  21. Alan Robinson July 14, 2013 at 1:51 pm #

    C
    I second Michelle’s comments on the sub-menus. Multiline items (especially without indentation) and an excessive number of selections make them hard to use.
    I like the new fonts. I find the header visually confusing. Both the neighbourhood labels on the map and the subtitle are grey and sans-serif. The blue text on the map is darker than the subtitle. The map background is light pink that blends into your head while your white shirt blends into the title background. It took me several seconds to be able to distinguish between the header elements on my first look.
    I liked the idea behind your previous header images. That is, to avoid using abstract representations of transit and mobility and rather to have a image of a human having a good transit experience.

  22. EN57 July 14, 2013 at 5:08 pm #

    c

  23. Andrew in Ezo July 14, 2013 at 8:49 pm #

    Agree with Alan above about the previous header image- you can’t do much better than riding the Hankyu Railways to Kyoto (the image is of their station at Katsura). But I suppose this being a bus-oriented blog, the new image is more appropriate.

  24. Jason July 15, 2013 at 12:32 am #

    The drop down menu is a bit buggy. Because the “drop down” part is a few extra pixels below the item, if you move your mouse downwards too slowly, the drop down will disappear and you can never get to it. (Browser is FF 22.0 on Windows 8)
    I also second Michelle’s suggestion of having the menu items link to a separate page with all the submenu links.

  25. Alan Howes July 15, 2013 at 1:54 am #

    C.
    not sure I am too keen on the serif typeface, but if you hadn’t said i would probably not have noticed.
    but with firefox i can’t get even your work-round to work on those long drop-downs. the only way i could get to “wellington” was to shrink my page so small i could hardly read it.
    (can i go back to capitals where appropriate now, please?)

  26. dejv July 15, 2013 at 2:32 am #

    A.
    I don’t like the serif, though, pretty much any sans-serif is better readable for me on the screens (and this will remain so till 200+ dpi computer screens will become mainstream I guess).

  27. MaxUtil July 15, 2013 at 5:24 am #

    Ditto to @Colin Stewart’s comments about titles and general layout.
    I generally like the new header image. Maybe if the vehicle was red or another stronger color the whole things wouldn’t feel a little washed out. I will say (with love) that there is something about that picture of you. I feel like you’re silently judging me for conflating transportation vehicle types with service levels and perceptions of coolness! (But I think it’s good to have an image of yourself, helps with branding the page as being from you and your consulting expertise. Just smile a little…)

  28. Neil July 15, 2013 at 7:02 am #

    B
    “Irritating” is too strong, I’d go for something more like “bizarre and unnecessary affectation” 🙂
    I like the new design!

  29. Steve July 15, 2013 at 7:17 am #

    A
    I mostly like the new design, except the sans-serif comments, and that having you staring at me from the masthead is a little unsettling.

  30. Omar July 16, 2013 at 5:52 pm #

    Nice and clean. At first I cringed when I saw “Georgia” in my RSS reader, but when I visited the site it’s very tastefully done!

  31. Eric July 17, 2013 at 2:52 am #

    The menus are too long. I can’t see past “Language” in Categories for example. Also, if you go to a menu header, and move down, the menu disappears unless you move the mouse really fast. These problems are in Firefox.
    I don’t like the sans-serif, but it’s not a big deal.
    Other than that, it looks nice now. The new menus in particular are very sensible and accessible, except for the aformentioned technical issues.
    Re lower case – I see no reason to change it. I vote C with a touch of A.

  32. Andreas July 17, 2013 at 8:15 am #

    A

  33. Kyle July 18, 2013 at 7:48 am #

    b

  34. jeff wegerson July 19, 2013 at 10:53 pm #

    c