Introduction
A lot of websites don't need a separate mobile site, and can get by with a responsive layout and some media queries. Travel sites, however, require a separate and usable mobile site, as many people need to check flights, bus stops, and train schedules while on the go
Before a recent trip from Cincinnati to St. Louis, I found myself browsing travel sites on my phone. As it turns out, there is no convenient and direct means of mass transit between the two cities, but in my search, I got to survey three mobile travel sites. Each has relatively the same functionality, so I thought it would be interesting to do a small compare and contrast. The three sites I looked at were Southwest Airlines, Megabus, and Amtrak. I accessed these sites via my web browser and on my Blackberry Pearl 9100 with a Wifi Connection, using the Opera Mini browser.
What they all do well
All three of these avoid the most common pitfalls of most mobile sites. First and foremost, they all load quickly, in under 1 second. This is easily the most important to prevent bounce rates on your mobile site, and these sites accomplished this by limiting the use of images and videos. Second, they all automatically switch to the mobile site when trying to access the main website, but allow you to switch to the full site if you choose. This is really important, because as screen resolutions and mobile browsers improve, more people will be accessing the desktop page from their phones.
Megabus
http://mobile.usablenet.com/mt/us.megabus.com/default.aspx?The Good
Overall, the Megabus site is a solid mobile website. There aren't too many problems with it, but there's nothing that really stands out about it. It uses standard HTML form controls for its interactive pages, which is good because higher end phones like the iPhone interact with them in a way most efficient for the phone, and lower end phones like mine have browsers that can handle just basic HTML. Probably the best aspect of the mobile site is that is strips down the functionality of the site. It only focuses on the most important actions for a person on the go: buy a ticket, check the schedule, and check reservations. A good rule of thumb is that a mobile site should have roughly 20% of the functionality of the main website.
The Bad
The bad parts about the Megabus site are largely aesthetic. The logo takes up way too much space and serves no real purpose, especially the animated bus image. In an environment where scrolling is annoying, its important to reserve space only functional elements. Also, the colors just awful in general. While blue and yellow are opposites on an HSV color wheel, on most color wheels they aren't even complementary colors. Blue and yellow offer good contrast, which is important on smaller low resolution screens, but so do black and white, which would definitely be an improvement. A mobile site should be usable, not promote brand identity.
Amtrak
http://m.amtrak.com/mt/www.amtrak.com/home?un_jtt_redirectThe Good
When going from Megabus to Amtrak, the first thing you'll notice is how much "cleaner" the site feels. This is because the Amtrak site has a very conservative approach to space usage. You'll notice that there isn't a lot of padding around elements, instead, they opt to use borders. Even on my small device, the entire page fits on the screen without scrolling. The logo is small and not intrusive, and serves the purpose of identifying the page and being the home link. As a user, I'm able to see all of my options at once and make a decision more quickly. Another good aspect of the site is how they chose to deal with the large amount of Amtrak stations. Megabus comparatively has few station, so they can lob them all into a select tag. Amtrak opted to do a separate page, with a select box for the letter and then a list of stations. This saves a lot of scrolling from the user, especially on a phone like mine that has no special handing of HTML forms. While navigating separate pages can disrupt the user's attention, this seems justified to me, and it allows some additional processing without the use of Ajax.
The Bad
The overall usability of the Amtrak site is good, although I don't like the One Way Trip and Round Trip buttons when booking a trip. From looking at it, can you tell which one is selected? It may have been better to fake a tab metaphor, or use an underline or green border to indicate a selection. While the usability is good, it fails a lot of functional requirements. When selecting a From location, it takes you to the separate page to select stations, which is good, but upon returning, does not weed out all the invalid times, dates, and To locations. As stated above, the separate page is an opportunity to do some additional processing. Instead, I'm taken to an error page and have to do it all over again. Another functional flaw is the Contact page, which is an enormous web form to send an email. We're accessing this page from a phone; why is there no phone number? Why do I have to type my address on my tiny phone keyboard or touchscreen? I did check, and Amtrak does have a phone number, which is listed only their desktop page for some reason.
Southwest Airlines
https://mobile.southwest.com/pThe Good
The Southwest page was probably my favorite website of those surveyed. Unlike the Amtrak page, they were more liberal with their space, and opted for a cleaner, minimalistic look at the expense of user scrolling. To counter balance this, the Southwest page uses a very narrow and deep. The tasks are well organized and intuitively partitioned, which keeps the page size small. Note this could also be considered a negative aspect of the page because traversing 6 pages to get where you need to go on a slower 3g connection is pretty annoying. Another thing I like about this site is the form organization, which gives it a very clean feel. Unlike the other sites, they used floating elements to position labels and inputs side by side, conserving vertical space. This can be risky, as some mobile browsers do not display floating elements correctly and the horizontal space can be limited on devices. That being said, if it works for my Blackberry Pearl, chances are they are safe with higher end smartphones. The forms are nicely padded and have subtle horizontal dividers to denote sections.
The Bad
While I do like this site, it certainly isn't perfect (no website really is, after all). One of the biggest annoyances I had using the site is that the logo is not a link to the homepage. By now, your logo being the home link is convention, and both of the other sites use this technique. Southwest has a home link on the bottom of nearly every page, but not all. Relying on the back button is bad usability. Another qualm I have is while they have many airports, they choose to lob them all into a single select box. A scheme like Amtrak would be far more appropriate.
Conclusion
Everybody knows how important page load times are to mobile sites, but there are so many other aspects of mobile website design that are often ignored, even by big corporations. These three sites overall are very high quality, and I admit I am being a little picky on some issues, but it just goes to show that there is so much more to mobile design than load times and 100% widths. It's important to keep in mind these questions:
- Am I efficiently using the limited space I have? Are my elements organized and spaced properly? How will this affect the vertical length of my page?
- Are the UI controls appropriate for their use? Do they adequately suggest their state and value? What differences will there be from device to device?
- How will average users navigate my site? What is the information hierarchy? Do I have too many functions on my site?
No comments:
Post a Comment