Topic : Usability

17
Sep 09

Chicago Metra Redesign Could Better Support Mobile Use and Accessibility

Chicago’s suburban mass transit agency recently launched a new website design that could better support a few important audiences among its riders — people using mobile devices and users of adaptive technologies.

The new Metra website offers some long-needed enhancements, such as online ticket sales, finally accepting credit cards for ticket purchases, and email alerts for service delays and disruptions. But a feature that every transportation agency should offer, a smartphone friendly website, was not part of the relaunch.

By comparison the San Francisco Bay area public transit system (BART) offers riders numerous mobile options including support for the iPhone, Blackberry, Android, SMS, and even open access to BART schedule data for third-party app developers.

BART Homepage

BART Homepage

BART Search Screen

BART Search Screen

BART System Map

BART System Map

Metra Search Screen

Metra Search Screen

On the BART site, a visitor using an iPhone sees the normal homepage in Safari with an additional link in red text prompting the user to visit the BART mobile site. The link is hidden for people using regular web browsers. This leads users to a simple screen of seven text links from which the person can get to the BART search screen. While it’s better than what Metra does (or doesn’t do), it should just take you to the mobile site since that is what most mobile users likely want and then provide a link back to the regular site for people who end up there by mistake.

BART also provides a fairly easy to read system map for iPhone users. The Metra map for just one route is useless on the iPhone since it was designed for regular browsers and includes shading for municipal areas, lakes, and forest preserves. All important things to know when your train is unexpectedly stopped on the way home from work and you have to make a change to your travel arrangements. You’ll have to view the site in a regular browser to see the map in detail.

Even if you enlarged the portion of the screen with the start and destination station select menus, the results page is impossible to work with on a two-inch screen.

In yet another omission for users of alternative means of browsing, the accessibility features of the new Metra site leave a lot to be desired. The only skip navigation takes a user from the top of the page to the center content column. On the homepage this skips all the repetitive main header and utility header links but also takes you past the site search, search by route, and search by address or zip code utilities. The skip navigation on the BART site takes you to the Quick Planner, which resides in the left most column like on the Metra site.

Metra also dropped the footer link to web accessibility information that the previous site had and makes no mention of web accessibility on its system accessibility page. BART in contrast provides information on web accessibility as well as contact information for its website manager.

To be fair, both sites do make use of HTML label tags and standards compliant coding, which should improve the experience for users of adaptive technologies. Yet both sites also lack support for accesskeys.

The BART site is not perfect, as no site is. The homepage link for the system map takes you a page with one link that reads “View System Map” and includes a disclaimer saying some mobile browsers won’t be able to display the map. So an iPhone, BlackBerry, or Android user has to go through two pages to get to the map.

Metra’s new site is definitely a step in the right direction after years of a lackluster presence, but ignoring mobile users and the limited accessibility features are a huge disservice to the people who pay its bills everyday. More time spent walking through real use scenarios with a diverse set of users could have prevented much of this.

27
Aug 09

New York Times iPhone App Update Botches Navigation

The recent update to the New York Times iPhone app does its users a real disservice with some disastrous changes to the app’s navigation.

The main flaw in Version 2.2 is the removal the navigation bar and tab bar from the screen once the user scrolls down into the body of the story. In the first image below, the app is seen with all navigation when a story first loads. You just have to scroll down a small amount and the navigation and tab bars disappear, as seen in the second image.

Navigation in Place

Navigation in Place

Navigation Hidden

Navigation Hidden

Full Screen Ad

Full Screen Ad

What? I want my Back button back. Imagine scrolling halfway down into a long story and deciding you want to to the previous screen. There is no way to get back to the headline screen except to the scroll to the top or bottom of the story, which causes the navigation to reappear.

When the tab bar at the bottom disappears it hides the button to email someone a link to the story, the font size controls, and the Save story button.

In the previous version, the navigation and tab bars were always present along with the horizontal ad at the bottom.

The user experience is better in the AP Mobile app, which never removes navigation from the screen.

It may have been that the NY Times designers wanted to offer users a larger area of the screen for reading, but for someone like me who pogo sticks in and out of stories sometimes, this is a major annoyance.

A smaller issue is a full screen ad that comes up when the main screen gets its latest update of headlines, as seen in the third image. While this is intrusive, it’s also somewhat understandable since the battered traditional news media needs to find a new business model that goes beyond just giving their content away for nothing. Because I value the quality of the Times reporting and writing, and it’s free, I don’t mind clicking the Close Ad button and moving on. At least the app’s designers had the good sense to only show one full screen ad per session, which makes the intrusion minimal. Since this is the first news app I’ve seen using full screen ads it will be interesting to see if other apps start doing this.

While I can live with the ads, the change to the navigation scheme is unbelievably bad design. I’m hoping Version 2.3 is coming soon to fix this mess.

17
Aug 09

Newspaper Website Redesigns

After spending some time looking at the recent redesign of the Chicago Tribune and Los Angeles Times websites I have to give the Tribune a slightly better grade for usability and learnability than the Times, mostly based on some simple design choices and the treatment of links, while the Times easily wins for sharp visual design.

The key area where the Times lacks is in how it handles navigation. In the new design almost all text is black, strongly mimicking the look of a print newspaper. From a visual design perspective this is just flat. The Tribune in contrast makes its headlines blue. The headlines of both sites are links, are not underlined, and give rollover feedback. The blue text on the Tribune site just seems to stand out more and makes it easier to scan the page. The different color also hints at clickability and invites exploration. Blue is one of the Tribune’s brand colors, so this also makes sense from a marketing perspective. There is no reason for the Times to mimic print design to such an extreme.

Los Angeles Times

Los Angeles Times

Chicago Tribune

Chicago Tribune

While most news website users will expect that headlines are links, the all black text treatment of the Times makes it harder to scan for relevant content and triggers. The Tribune, while using the same template, makes it easier to scan down the page and find links. Blue is clickable, black is not.

Both papers use the same template, not surprising since both are owned by the Tribune Company, but the way the Chicago paper executes the design makes it is a little easier to learn how to use the site. The key differences are:

— On the Tribune homepage, the tabs in the global navigation are visible no matter what the user does. On the Times homepage, the user has to roll over the global navigation before a tab background image appears. While the Times global navigation is pretty clear, the Tribune makes it a little more obvious that it is navigation. Once you go beyond the Times homepage, section tabs are revealed.

— On the Tribune homepage a global navigation item for “home” is selected, giving the reader a clear sense of where they are in the site hierarchy. As you navigate away from the homepage, the “home” tab provides a nice target to get back to a starting point. The Times homepage in contrast shows nothing as selected, thereby losing a chance to educate users about the navigation. After you navigate away from the homepage you have to click the logo to get get back. That’s hardly a fatal flaw, as most web users have figured out that a site’s logo links back to the homepage, but the Tribune’s design again just makes the navigation choices a little more obvious.

— Another difference is how the sites handle weather in their header. To the right of the Tribune logo is the temperature and an icon indicating whether it’s cloudy, sunny, raining, etc. The Times uses that real estate for date and time, but no weather. Weather is more volatile in Chicago, so maybe this makes sense. But to replace it with date and time doesn’t seem to offer the user anything. Usage metrics may show that Times users don’t spend much time on the weather page, but how about a highway gridlock meter icon that links to a real-time expressway traffic page or something else useful.

When it comes to typography and general visual design, the Times wins hands down. It has settled on a nice serif font — Georgia — that is consistently applied and easier to read than the Tribune’s Arial, especially for the articles. If the designers were looking to mimic the typographic sense of style of the New York Times or A List Apart, they hit their mark. It just looks classy. If they add some color to the headlines, they’ll have a real winner.

The Times also handles the homepage areas that feature content from other sections of the site in a more stylish and cleaner way than the Tribune, which has bulky colored headers for features like Sports and Entertainment. Aside from the lack of color in some of the fonts, the Times overall has more appealing visual design. And the faux ink splatter at the footer of the page is a fun design element.

The other papers in the Tribune portfolio (Baltimore, Orlando, Ft. Lauderdale, Hartford, Allentown, and Newport News) also are using the same new template, but the Chicago and LA papers have the best executions. The others lack personality and could easily be mistaken for any other news website.

If the Tribune Co. had mixed the visual style of the Times with the usability advantages of the Tribune, they’d have had a truly stunning design.

23
Feb 09

Welcome

Welcome to UXploration.

This is where I write about things that interest me in my professional life as a user experience architect and as a graduate HCI student.

I’m currently enrolled in the graduate HCI program at DePaul University in Chicago and will try to post details of school projects and research as well.

Having to produce something fresh on a regular basis forces me to look at my work and studies more critically and to find things that may be of interest to others. I’m looking forward to learning a lot as I go. I hope others do too.