The iPhone app Trapster is a great app for finding user submitted speed traps, red light cameras and other police activity while going on a trip. While it does alert you to potential hot spots of police activity, I think its usability fails in my use case (see below), which I am assuming is fairly common among users.

How I Use Trapster

As a college student, I do a lot of interstate traveling to either go home for holidays or to visit friends at different schools throughout the year. When driving, my iPhone 3G is docked in a dash mounted charger in order to charge it and allow me to keep the screen on throughout the entire trip. This mounting point is near my AC controls, about arms length away from me. This small distance may seem insignificant, but it murders the usability of the app.

Problems

Problem #1: Icon Design

The first problem with the Trapster UI is the design of the icons. As you can see in the screenshot, the icons all look very similar. I can’t tell the difference between a cop actually being near a location and a frequent speed trap that might not necessarily have a cop using it at that moment. To give the developer credit, when you first install the app there is an informative popup that describes what each icon does, but I only use this app every few weeks, and have completely forgotten what the popup contained. This is a moot point because you shouldn’t have to use the app’s help every time you need to use it.

Icon Help Popup

Which ones of these is a live cop?

The second problem with the icons is the fact that even if you did know what each means, they all look the same from just a short distance away. The problem stems from the fact that all of the icons change color to indicate the accuracy of the threat, and change “sub-icons” to indicate the type of threat. This usability problem is most evident when you run into the following situation: You are driving down the highway and you have two different threats in front of you. They are both “green” in the accuracy rating to tell you that they have been reported by only a few users. One is a “live police” notification (someone just saw a cop using radar) and the other is a “police frequently hide here” notification. As you can see, the “sub-icon” for both of these is also green and black, which means they both turn into identical looking dark green blobs on the screen. When you see the two on the map, you can’t tell which one is which with the phone in front of your face, let alone at arms length away (If you don't believe me, roll your chair back two feet and take another look). This makes it very hard to use the app by glancing at it while driving. Instead you have to take your eyes off the road for a dangerous few seconds to comprehend the map.

Problem #2: Icon Size

Another one of the problems with the app’s icons is their size. When displayed on the map, they are only 25x25 pixels. This small size is horrible for readability no matter how close you are to the phone. I’m sure the developer has chosen this size for a reason, but I can’t see why. Cluttering up the map shouldn’t be a problem since no one is using it for trip navigation. A 40x40 or 50x50 icon covering up an intersection seems to be a worthwhile compromise for the immensely increased readability. Seeing cops is the entire point of the application!

Problem #3: Notification

The problem with the Trapster UI design is the combination of ways that the user is alerted of different threats. This notification system is three fold: an audible voice alert, vibration, and icon pulsing/scaling. In some circumstances these alerts combine to provide an excellent notification, but these too can frequently break down. One of the reasons I bought my iPhone was the ability to have my music with me at all times. Whenever I am in my car I take advantage of this capability by playing music via the dash-mounted dock. Since the Trapster voice notification is overlaid above the current audio source, you can’t hear it when listening to a drum-heavy song for example. This normally shouldn’t be a problem since there are two other ways the app notifies you, but these commonly break down in similar fashion.

Icon scaling for notification

The vibration alert is not useful at all when you have the phone docked or just laying on the seat next to you. Even if it was sitting on a hard surface, you wouldn’t be able to hear the vibration over the music. The icon animations are the third way the app notifies you of a threat, and the issues addressed earlier still come into play here. The “blob effect” described above is amplified by the face that the icons will scale up to be twice as big and then scale back down again to allow you to pin point the exact location on a map with a lot of icons. This just makes it harder to tell what the icon represents because its moving and changing the entire time you are looking at it.

Solutions

Solution #1: Changing the Icons

The easiest and most obvious change to improve usability would be to alter the design of the icons. Two separate issues need to be addressed here: the ability to convey the accuracy and the type of threat in front of the user. The developer’s use of color to represent threat accuracy or severity is a frequently used and accepted practice in other computer applications, as well as other analog devices such as stoplights. The combination of additional colors is where readability problems start to occur. The first step in my redesign was to find a way to convey the thought of a speed trap without having to rely on an icon to tell you what it was. Visualizing the radar's sightline was an obvious choice that also provides the user with the direction that the speed trap commonly faces. I chose to use a very bold red circle for "live police" notification and once again removed the need for an icon to identify it.
Redesigned Icons

Solution #2: Changing the Notifications

Animation showing the new UI

The second change I would make to the application would be to tweak the audio and visual notifications. The multi-tiered notification system was a great idea, but frequently flawed for small, easy to fix reasons. Fixing the audio alert is as simple as lowering the volume of the currently playing music to be able to hear the alert more clearly. I would go even further to change the audio alerts based on the type of threat. For example, when a cop has just been reported to be using radar a mile up the road, silence all of the music to read the alert. A simple beeping tone could be appended to the front to make it more obvious. Since the idea of running an application like this is to be warned ahead of a cop, this shouldn’t come off as too drastic. Changes to the visual notification could also help to alert the user if he or she happens to have the volume down or the stereo off for a second while driving. Instead of just animating the icon, the entire screen could flash for a second or two to notify you in your peripheral vision that a cop is stationed up ahead. Once again, the entire point of the app is to get your attention, and I don’t think this is going too far to alert the user. This blinking effect could be integrated with removing the rest of the threats on the map, since they aren't pressing at this time. All the user would see at this point is where the most important threat is relative to the current location.

Conclusions

This article is not intended to discourage use of Trapster, but to show some possible improvements to the usability in a fairly common use case. Developers of any iPhone apps that could possibly be used in a mounted configuration should integrate test cases similar to this one into their development and testing workflow.