Metro Online
Metro Online

Adam, in the previous post, showed an example of presenting important service alerts and said that Metro can improve the usability of its website with simple fixes. So I played the role of webmaster and took a look at Metro’s homepage. I found several issues and developed small fixes that cost very little to implement and doesn’t involve redesigning the entire website, summarized in the list below:

  • Get a timetable function not useful if you don’t know what route to look up.
  • No Quick Link to system map
  • Quick Link icon for ORCA should represent the card
  • Quick Link icon for fares should use standard symbol that Sound Transit uses
  • Some graphical banners don’t link to specific information and requires user to search for it
  • Minor trip planner usability issues
  • Shortcut menu doesn’t work without JavaScript enabled.
  • Structure of the website in relation to the shortcut menu

Specific and technical details follow after the jump.

Let’s begin with the Get a Timetable function. I must already know a route number to use it. If I don’t know, Metro has a tool to look up routes and bus tops near a location. Those tools are hidden in the Ride Metro menu which isn’t very obvious. Putting links to those tools with the Get a Timetable function increases their visibility and makes sense since they are related tasks. In addition to this, why not also put a drop down menu of all Metro routes? I know that Metro has over 200 routes but Translink makes it work. Community Transit combines the drop down menu and input form elegantly using some coding magic. When I begin to type a number it filters the results for me. Since route maps are linked to from timetable pages I think it would be appropriate to rename this section “Get a Timetable & Route Map”. I made a mockup of a less elegant implementation seen below.

Improved Get a Timetable with choices and link to route finder
Improved Get a Timetable with choices and link to route finder

While I call this a mock up, I created a copy of the home page on my computer, modified its source code and it actually works.

The list of bus routes
The list of bus routes

The Quick Links section is missing an important item: Maps. If I want the system map, I have to know that it’s under the Destinations menu. There’s space for a Maps icon, which should link to an index of all of Metro’s maps like the System Map, Downtown Seattle map, transit center maps, etc.

Visually, icons for the Quick Links look inconsistent with each other. Why does the ORCA icon not show the ORCA logo? The fares icon doesn’t use the standard pass symbol that Sound Transit uses. The shine and gloss of some icons look out of place on a site that has none of that. I discovered that some of the icons appeared to be from the Chicago Transit Authority’s website and modified with or without permission. I made new icons for fares and ORCA and put in a placeholder icon for Maps. If you’re reading this Metro, they’re yours to use.

Quick Links with a real ORCA icon and a map (placeholder) icon
Quick Links with a real ORCA icon and a map (placeholder) icon

Moving to the left column is the graphical banner that has four slides calling attention to the new Transit Alert system, 4th Ave Downtown road construction, Bus connections to Link light rail, and the “It’s why we ride” campaign. When I click on the 4th Ave slide it sends me to the main Alerts Center page, leaving me to look for myself where the relevant alerts are. Since this construction project affects many routes downtown, there should be a specific page for that. There is such a page on the Eye on Your Metro Commute (EOYMC) Blog but it is incomplete information. More on EOYMC later.

Then I see the students on the “It’s why we ride” slide. I’ve seen the ads and I click on it, expecting to learn more about why people choose to ride the bus and instead get a portfolio page of current Metro promotions. There’s no information about that campaign at all. At least put in some information about the slide I just clicked in from. This is a marketing campaign that lacks an online component.

Next is the Trip Planner. I applaud Metro for putting the Trip Planner on the home page where it’s easily accessible. The form is filled automatically to the current time and date for me. However, there’s still room for improvement. The “Tips” link should open in a new window. It’s annoying to have to click back and reenter the form. Users may not know the command to open it in a new window. The choice of leave or arrive should not be a drop down list as there are only two choices. Turn the list into a pair of buttons like the AM or PM choice. Lastly, when the autofill doesn’t work or JavaScript is turned off, the default value of the date should not be a space, it should be nothing (two quotation marks without a separating space in the code). Therefore, when I click to fill in the date I don’t have a space in the way. Also, tell people what the proper date formatting should be (MM/DD/YYYY) either all the time or only when JavaScript is turned off.

Slightly improved trip planner
Slightly improved trip planner

The shortcut menu does not work when JavaScript is turned off. There are legitimate reasons for users to turn off JavaScript, chiefly security. Community Transit’s menu doesn’t require JavaScript as it uses Steve Gibson’s pure CSS script-free menu system. I recommend Metro taking a look at that.

But why do we need a shortcut menu? It buries links under another layer of navigation that has no relation to the main site’s structure. I think it’s preferable to put more links in plain sight, judiciously. Also, perform an evaluation of the website’s structure, which has been unchanged in over a decade, whether it is logical and functional from a user’s point of view. Why do we need a shortcut menu? Is there something wrong with the side menu and site structure that makes it so difficult to navigate? This isn’t a small fix but it is a core problem that I have with the site in general. There seems to be two disconnected parts of the site: the original Metro Transit part and the part with King County DOT like the Transit Now section.

This is far from an exhaustive list of little things Metro can easily do to make their web site more usable and I’m only touching the homepage in this post. It may sound like nitpicking but the fine details really do matter as I hope to have shown. I might have missed a few things so feel free to add your own tweaks.

24 Replies to “Tweaking Metro’s Homepage”

  1. I really like Community Transit’s website, from that route search/dropdown list feature to their trip planner. I think Metro and Sound Transit should try to emulate that.

    1. I completely agree. Someone could type in “Wallingford” and all of the buses through there would show up – that’s pretty dope.

  2. While it can use a lot of refinement, I’d prefer to see Eye on Your Metro Commute hosted on Metro’s servers, not at WordPress.com! It’s not hard to implement at all!

  3. Now that Proof of Payment has come to service other than Sounder, a direct link to fare and ticket rules plus a link to code 0f passenger conduct would help.

  4. King County Metro Transit’s main page seems to be missing foreign language links. Orca’s main page has them. So does Sound Transit’s. Am I missing it on the main page, is it buried within the website somewhere, or does Metro online not even offer its site on other languages?

    1. No, it’s only offered in English. The only multilingual content on Metro’s site is the How to Ride a Metro Bus. And it isn’t very obvious. They are links at the bottom of that page to Cambodian, Chinese, Korean, Laotian, Russian, Somali, Spanish, Tigrinya, Ukranian, and Vietnamese language version PDFs of that page.

      Sound Transit only has links on where to get more info in that language and I find that inadequate.

    1. I like Chicago’s website better. I like that their routes on current alert is on the main page, and I like their mystery shopper program.

  5. In addition to telling folks the proper date formatting, an airline-style calendar pop-up would be great, though I imagine the only way to do that is with more Javascript (cf Alaska’s website).

    Also, if a transit website’s drop-down list for routes was that wide & detailed, it would annoy the hell out of me. Anything more than beginning and ending of route, except for maybe major landmarks/destinations (e.g. downtown, stadium, airport), is overkill. Sound Transit’s website does this well.

    1. The problem is with some routes that such a description would be too vague, especially the suburban routes. For example, if I started in Kirkland and wanted to go to Redmond I wouldn’t take the 230 because it’s a milk run through Bellevue and Crossroads. I’d take the 248 instead. Or the night owl routes that go in a loop through multiple neighborhoods.

      Sound Transit’s express routes are pretty much point-to-point so they can get away with just the terminals.

      I second adding a pop-up calendar. That’s easier than typing the date in for some people.

      1. I would love a pop-up calendar. For some reason with Linux and Firefox it doesn’t like the dates I type in even they’re valid. Even the default sometimes doesn’t work. Maybe that’s fix now with the new code?

      2. I agree, a popup calendar would be a useful addition. When I type in the date (I’m on Firefox & Windows) I always get an error page telling me to re-enter the date in the right format. My work-around is to navigate through Rider Tools, to the Trip Planner page, and then to the actual “Plan Trip” tab (where today’s date is already entered and ready to go).

    2. I would also add that not everyone is going to the end of the line so that kind of description would be useless for them.

  6. Also, I don’t think it was mentioned here, but a big website no-no is changing your URL without URL forwarding and an interstitial page to notify users that they are being redirected and that they should update their bookmarks.

    KC forwarded metrokc.gov URLs to kingcounty.gov for about a year, but at no point did they notify users that they were being redirected, so most users had no idea anything had changed or that they should update any bookmarks. Then, about two weeks ago, they stopped the URL forwarding, leaving users with nothing but 404 errors. After an earful, they finally added a disambiguation page of sorts, but it’s not very helpful. In all, they’ve done a really bad job with the transition.

    1. You know how I get around this? Just use google to jump directly into the webpage you want. For example try to find Rapidride information through the navigation menus. I tried it once and it took close to 15 minutes. This is ridiculous. I mentioned that to Kevin Desmond to no avail.

Comments are closed.