Shipping a product always involves making tough calls. Some of these interesting decisions relate to questions that may seem minor. One such question is the “green up arrow” question we dealt with for the iPhone Economy app (download from the app store)
The iPhone Economy app displays the latest values for several key economic indicators (e.g. housing, employment, trade deficit, inflation etc.) and draws graphs tracking the history of these indicators over the past few months, years and decades.
The app also compares the latest value of each indicator (e.g. housing starts) with its value from the previous month and the previous year. To make this comparison easy on the eye, we decided to add a green-up-arrow indicator if the latest value was more than the previous month’s value and a red-down-arrow if the value was lower than that of the previous month. See picture (at the bottom of this post) for an example of the UI.
Originally, this seemed like a good idea, but it raised a usability question. The app includes indicators like “unemployment rate”. Showing a green up-arrow for an increase in unemployment didn’t seem like a good idea because a green up-arrow would signify “good” to most people, but very few people would consider an increase in unemployment as good. So here are the options we considered
- No arrow to indicate increase/decrease, just a sentence that mentioned the increase or decrease.
- Using the same color to indicate increase and decrease (with an up arrow indicating increase and a down arrow indicating decrease)
- Using a green up-arrow for indicating a “good” increase (like an increase for the GDP parameter) and using a red up-arrow for a “bad” increase (like an increase in the unemployment rate)
- Using a green up-arrow for all increases and a red down-arrow for all decreases.
Option-1 seemed a bit user-unfriendly because it was limited to text. Option-2 was better, but using the same color meant that the up and down arrows were less easily distinguishable.
Option-3 had a couple of disadvantages. It introduced a minor inconsistency because some indicators would show increases with a green up-arrow and some others with a red up-arrow. More importantly, it introduced a judgmental element that wouldn’t necessarily be correct. For instance, is it “good” for the interest rate to go up or for imports to go up or for the dollar to become stronger? Arguably, sometimes it is good for some of these values to increase and sometimes it is good for these values to decrease. Option-3 also required some (minor) additional development work.
Given all of the factors discussed above, we decided to go with option-4 in spite of the usability question mentioned earlier. It will be interesting to find out whether users would have preferred one of the other options. However, as discussed in an earlier post on product design, startups need to make quick decisions and execute and ship quickly. So executing on option-4 was the best option for the app.
Cascade Software Corporation 
Could you add Freight Car loadings or container loadings to your economic data program to give an earlier indication of economic activity.
@Steven, thanks for the suggestion. However, the Federal Reserve doesn’t publish numbers on freight car loadings and container loadings. The iPhone Economy app relies on the Federal Reserve for its data. So we can’t show numbers on freight car loadings. Sorry about that.
Some of the indicators in the “Business” section of the app (like Industrial Production Capacity Utilization etc.) may give you an early indication of market demand. Others (like Manufacturers’ new orders:Durable goods) may also be helpful.
There are other options you you can consider here. Typical users pay a lot more attention to color than the actual shape of the icon image. For instance, instead of arrows, you can just have red or green circles, and they would still get an accurate interpretation of the good or bad indicator.
The actual image-part in the icon (an arrow shape in this case) is useful to people who may be vision impaired (say, color blind) and cannot distinguish between various colors.
One solution that addresses both might have been to add an icon background and have that background take the colors red or green. In this case, the arrow would remain white (or an appropriate color with sufficient contrast) against the colored background.
Overall, you’re right – Choosing the right icons is a complex problem and requires a lot of testing and making many considerations. If I were hiring a visual designer, this speciic scenario might be a great interview question 🙂
@Shyam, these are good points. I hadn’t thought about using circles (instead of arrows). You also make a great point in noting that the current usage of arrows helps color-blind people.
I agree that using white arrows (or circles) would address one of the limitations of option-3. However, the bigger issue with option-3 (the judgmental issue) is still not completely addressed.
For instance, is the interest rate a “good” indicator or a “bad” indicator. How about imports ? Should they get a green background or a red background ?
As discussed in the original post, sometimes it is good for the interest rate to go up, but some other times it is better for the rate to go down and it is hard to pigeon-hole some indicators into “good” and “bad” categories.
So overall, it seems like choosing option-4 was the right thing to do. As you note, UI design questions are often complex matters. So the choice of option-4 is debatable, but for now, it seems to work fine.