Respect Users’ Data

One of the immutable tenets of designing mobile user experiences is to respect (and protect) your users’ data. This means, among other things, saving form data as users move from screen to screen and eliminating the need for them to type the same information more than once.

Time Magazine iPhone App
Time Magazine iPhone App

Time Magazine either didn’t know or didn’t follow this tenet in the latest update to its iPhone app. When I launched the app for the first time after updating to version 2.2 I was shown an alert telling me that my customized settings had been reset and that I needed to redo them. To be honest, I don’t even recall what settings I may have customized (I download and explore a lot of apps and many, like this one, almost never get used after the first week). But I certainly wasn’t going to customize anything again if my settings could just be wiped out without a warning.

There are several reasons my settings may have been reset: a change to the underlying data structure that rendered them unusable, settings that I had customized had been removed, careless or rushed programming, or a simple bug that slipped through testing. If there was a legitimate reason, the app could have done a better job of letting me know why. While this may be a trivial matter for infrequent users, it could be a big deal to someone who uses the app regularly.

Sometimes apps have to change their business rules and functionality as they evolve. This is unavoidable. But app creators can manage these changes better if they start with a healthy respect for their users.

Mind Mapping for Note Taking

I’m always looking for a way to work smarter so I recently started using mind mapping as a note taking technique during user testing. I’ve found it superior to taking notes in a linear, chronological fashion because it allows use to organize your notes both topically and visually on the fly.

Mind mapping is a visual way of taking notes, capturing ideas, or arranging thoughts around a central idea. It has been around for several decades since it was popularized by Tony Buzan in his 1993 book The Mind Map Book, and has many uses beyond note taking.

Below is an example I created of a mind map for taking notes of observations from a user testing session. It was created with FreeMind 0.9.0, a free mind mapping tool for Mac and Windows. In addition to allowing you to visually organize notes, you can flag notes with icons with one click to mark task failures, successes, user comments, and other observations you want to quickly find later. This is a big time saver when you have notes from many sessions to digest.

Since trying this technique I have not gone back to note taking in a Word document or text file. Give it a try, you’ll be glad you did.

Mind Mapping for Notes
Mind Mapping for Notes

Safari Reader Improves Mobile Browsing

One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.

Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.

Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.

Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.

Mobile Safari Reader
Mobile Safari Reader

Tobii and Lenovo Experiment With Eye-Controlled Laptop

Eye tracking equipment maker Tobii recently demonstrated an experimental laptop designed in collaboration with Lenovo that uses a person’s eye movements to interact with the computer’s user interface.

The interactions involve combining mouse clicks or keystrokes with eye movements to provide an enhanced user experience. The eye tracking dimension of the demonstration shows that eye movement would be used to complement, not replace, keyboard and track pad input from the user’s hands. Anders Olsson of Tobii demonstrates in the video below the modified Windows 7 user experience.

See Tobii’s press release for more details.

Features Meant to Assist Should Support Efficient Use

Tools meant to make things easier for people shouldn’t slow them down. I ran into this situation when I was signing up for a webinar through GoToMeeting this week and tried their Show in my Time Zone features since the meeting was scheduled using Pacific Time.

Clicking a link exposed a layer with a select menu of different time zones, but they all led with the offset from GMT, such as (GMT-06:00) Central Time (US and Canada). So the user has to shift their focus to the middle of the options to scan the list for the first characters of meaningful information. Why not format the list as: Central Time – US and Canada (GMT-06:00)? It’s admittedly a small detail, but as Charles Eames said, “The details are not the details. They make the design.”

GoToMeeting Time Zone Selector
GoToMeeting Time Zone Selector

SUS Calculator

I recently used the System Usability Scale on a graduate school project and wanted an easy tool for calculating scores. Since I hate doing manually anything that will be done repeatedly, I took the time to create a simple SUS calculator in Excel.

The spreadsheet is available for download from Google Docs.

For more on the SUS itself and how it is calculated, take a look at this article on Wikipedia.

App Store Flow on iPhone Could Be Streamlined

Normally I love the iTunes App Store, but not so much today. I was trying to add Kayak’s travel app to my new iPhone and found the experience to be full of unnecessary and redundant tapping.

This was my screen flow:

  1. Launched the App Store
  2. Clicked Search
  3. Typed “kayak” and clicked the Search button
  4. Tapped Kayak’s app on the list screen
  5. Clicked the Free button
  6. Clicked the Install button
  7. Received a prompt for my password
  8. Entered my password and click the OK button
  9. Received a message asking me to confirm I wanted to download the app since Apple had detected this was a new device
  10. Clicked the Continue button
  11. Received a prompt for my password
  12. Entered my password and click the OK button
  13. Got directed to billing page with a request to confirm all information (since this was the first time using this device)
  14. Entered credit card security code without making any other changes and clicked the Done button
  15. Returned to the Kayak screen
  16. Clicked the Free button
  17. Clicked the Install button
  18. Done

Did I really need to enter my password twice? The App Store should be smart enough to know I just entered a password when sending me to the billing information page. Normally I don’t mind having to authenticate when accessing billing information, but not when I just did it a moment ago and am finger tapping an iPhone.

Another redundant step was requiring me to tap the Free and Install buttons a second time after going through the setup screens. At that point I had gone through 36 taps, so I think I clearly expressed my desire to download the app (“Really, I do want it!”, I thought). The App Store should have just started the download.

A last unneeded step was asking me to update my payment information to download a free app. My guess is that was done to get my iPhone ready for seamless purchasing in the future, but that’s a business goal of Apple’s, not a user goal of mine. I just wanted to download a free app. Ask me to confirm my billing information when it’s really needed.

My entire Kayak download took 38 taps. Eliminating the second password prompt and the last two buttons would have cut it to 26, a 31% reduction in taps. That’s a lot in a mobile experience. Dropping the credit card setup for a free app would have removed four more taps. Luke Wroblewski stated it best in Web Form Design, don’t ask for data you don’t need to complete the user’s task at hand.

As I said before, I love the App Store. But its download flow needs some streamlining, especially in the mobile context. I’m surprised Apple missed this aspect of the store’s design given its usual laser-focus on all the small details. As Charles Eames said: “The details are not the details. They make the design.”

HCI 450: Foundations of HCI

I just finished my latest course in DePaul University’s HCI program — Foundations of Human Computer Interaction. This type of course is a must for anyone who is serious about designing product user interfaces, whether you want to do visual design, information architecture, or interaction design.

The course focused on studying basic and applied research into cognitive psychology and using those learnings to craft more usable interfaces. The course provided a solid foundation in the human factors considerations that should be a part of any design effort, including study of the structure and mechanics of the human eye and the limitations and capabilities of short term memory.

The class had three main objectives: learning to read and review research articles, creating interface design guidelines based on original peer-reviewed research, and evaluating interfaces against those guidelines. We used previously published research instead of conducting our own studies because of the limited time available to the class.

The organization of the course was such that each assignment provided a foundation for the next, leading up to an interface evaluation and presentation. I choose to evaluate, a popular financial management website. My design guidelines mostly focused on the color and screen location of key navigational elements of a website. A sample of my guidelines and how they were used to evaluate can be viewed in PDF format.

Completing assignments required use of the EBSCOhost databases, Google Scholar, and other academic research databases. These can be powerful tools when you need to find solid research to back up design decisions.

Knowing how human factors considerations should be treated during a design project and how to find existing research into those areas are invaluable tools for any user experience professional. A course in these topics would be helpful to anyone doing UI design.

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.

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.