More on good iPhone app design
After reading yesterday’s post about good iPhone app design, reader “michael” said that a “much better example of a nicely done game on the app store” is Subway Shuffle. So let’s take a look, but understand that both games are a lot of fun to play, regardless of how appropriately they’re designed for the iPhone.
Subway Shuffle, like the Blocked game discussed in yesterday’s post, is a puzzle game in which you shuffle pieces around on a board until you’re able to get one particular piece to its destination. That’s how the games work, but we’re not concerned here with how the games work or whether they’re fun to play. Here, we’re looking at how well they’re designed to be iPhone apps, and why.
Design guideline: Use screen area effectively.
Here are their game pages on which you play the game, Blocked on the left, Subway Shuffle on the right:
If we compare their respective gameboard areas, it appears that Blocked devotes more screen area to the gameplay. We can determine this by measuring the number of pixels for each. In these screenshots taken from the actual games on my iPhone then reduced in size by an equal amount, Blocked devotes roughly 36290 (190×191) pixels to the game, while Subway Shuffle devotes 30210 pixels (265×114). So Blocked’s game area is roughly 20% larger than Subway Shuffle’s.
There’s no reason Subway Shuffle couldn’t be using more of the screen for that level than it does. You don’t see them in this screenshot because Subway Shuffle hides them after a brief pause, but panels appear at the screen’s top and bottom when you tap anywhere but on the dots and connecting lines. It’s puzzling why these panels are hidden at all if the real estate they occupy isn’t going to be reclaimed. As it is, the area not used is as large as the area used.
Design guideline: Use easily legible text.
The text shown in Blocked appears in a large font size, easily readable even in this reduced screenshot. Subway Shuffle’s text is by comparison considerably smaller and hard to read, even at full-size. There’s no clear reason why Subway Shuffle displays text at that small size, especially if the available space isn’t going to be prioritized for something more important like gameplay.
Design guideline: Be lean.
Subway Shuffle includes a Settings page with controls for disabling the sound effects and for changing the app’s appearance. It’s easy to understand what “Sound Effects: on/off” does, but what exactly is meant by “appearance”?
Here’s what those three Appearance settings look like:
Paper Map
Classic Flat
Better for Colorblind
There’s not much difference between them, really. Paper Map includes a folded-paper background image with 3D highlights on the little round buttons; Classic Flat includes a solid colored background without the 3D highlights; and Better for Colorblind differs from Classic Flat in one color only.
So, with the understanding that being lean and focused are especially important in iPhone apps and that the addition of any feature makes an app less lean and less focused, the question you have to ask is: does Subway Shuffle’s Appearance feature add more than it detracts? The answer depends on the implementation and audience of course and is admittedly subjective, but in Subway Shuffle’s case I’d have to say no, it doesn’t:
Why Subway Shuttle’s Appearance feature should have dropped, or at least deferred:
- There aren’t many themes.
- The themes differ only slightly. Better for Colorblind barely differs at all from Classic Flat, and being colorblind myself, I can say that the colors in Better for Colorblind are harder to distinguish. There are many different kinds and degrees of color-blindness, so any slight shift in color to favor one person may end up being harder to see by another. Better would have been to accompany the different colors with matching symbols.
- The Appearance feature actually introduces a bug. Choose any theme other than Paper Map and you’ll still see the Paper Map folded paper background image when you launch the app. That’s because the iPhone loads the app’s Default.png image file at launch time, but because apps are read-only, Subway Shuttle can’t change which image is shown. The result is that you see the Paper Map background image for several seconds, after which it is replaced with your theme of choice.
Given those limitations to the feature itself and the importance of weighing the value of a feature against how that feature affects an app’s leanness and focus, the Appearance feature detracts more than it adds, and thus should have been left out.
There are more examples, but these alone already suggest that Blocked is the better designed iPhone app.
John,
Thanks for your comments.
First, I’d like to say that my personal opinion is that Blocked has an original, refreshing look. I like the design. (Though I had the same immediate response as Michael, that it looked like an unauthorized copy of Rush Hour, so I have not yet tried it. After reading the developer’s comments I may change my mind.)
As to your criticisms of Subway Shuffle, let me respond to them in order, and explain my design decisions.
First, “Use screen area effectively”. The screen you show happens to be one of the smaller levels. Most of the levels fill or almost fill the space, in one or both dimensions. Did you actually play the game? In the Lite version you’re using, 5 of the 10 levels use the full vertical space. Believe me, I have spent an inordinate amount of time trying to optimize space. Thus the translucent navigation bar and toolbar, which on most levels partially cover the game-play area. (Those work the same way as the ones in the Photos app, by the way.)
Second, “Use easily legible text”. You write “There’s no clear reason why Subway Shuffle displays text at that small size, especially if the available space isn’t going to be prioritized for something more important like gameplay.” See above — there is a tradeoff here. The title bar you show (when the navigation bar and toolbar are hidden) is as big as I felt I could make it while leaving room for all the levels to fit at a comfortable scale. It is true that the text shown in that image is too small, even for the size of the title bar it is drawn in. But I have already addressed that in the 2.0.1 update (on the store for Subway Shuffle, in review for Subway Shuffle Lite); the text is now larger, almost as large as it is in the navigation bar.
Third, “Be lean”. Here I think you lose me. There is essentially no interface clutter created by adding options to a Settings page, especially when there is little else there to begin with. Both of the alternate appearance settings were added at the request of several users. Some preferred the original “flat”, more abstract layout to the paper-map look. And some were colorblind. Those users have thanked me profusely for adding this option. I am sorry if the colors are hard for you to distinguish. Which colors in particular are too similar? I’ll address this if I can. You mention that only one color is different. Actually the yellow is lighter, and the green is darker. Furthermore, many of the later levels in the full version use 5 or 6 colors. This is not strictly necessary — they could all be rendered with 4, by for example having two disconnected green or yellow lines. But perceptually, it is easier to think about how to solve a puzzle when different lines are different colors. In the Colorblind setting, however, I *do* render them all with at most 4 colors, to reduce any possible additional color confusion. Also — applying “be lean” to the main interface — it is hard to get much leaner than the basic game-play mode of Subway Shuffle. With the tools hidden, all there is besides the puzzle is its name and the number of moves you’ve made. It took a great deal of effort to get this degree of simplicity.
Hi John and Bob,
I just downloaded Subway Shuffle, and I’m already a big fan. (I especially like the little touches, such as the nudges that occur when the subway cars collide). I look forward to what I’m sure will be excruciatingly enjoyable frustration.
I think it’s easy to put two designs side by side and find subjective differences between them, even when working from an objective rubric. So although I’m happy for the nice review, I may not necessarily agree with all of the conclusions. Speaking for myself, my takeaway is to make sure I keep these considerations in mind when making my next app.
And design discussions on this site aside, Mr. Hearn developed a fun and challenging puzzle concept and implemented it amazingly, whereas I just devised a new implementation of an existing puzzle.
Bob,
Yes, I played the game, enjoyed the levels I completed and looked at the remaining levels I didn’t complete. You’ve created a great puzzle and an attractive design. That it’s rough in a few places regarding its iPhone realization doesn’t detract from that, nor did I intend it to.
But it does have rough spots as an iPhone app. Regarding using screen area effectively, why, for instance, aren’t the simpler levels scaled up to fill the screen, and the more complex levels scaled out to fit comfortably on the screen without having to go to the extremes you have, including hiding the navigation and zoom bars? You’ve even hidden the status bar to accommodate the game graph. I can see hiding the status bar for an immersive game like a 3D shooter, but to reclaim its meager real estate? That seems a good sign that something needs rethinking.
The screen area problem seems to stem from the fixed 60-degree angles along with the fixed sizes of the dots and lines. Those are all nice, but when they start forcing you to adopt relatively extreme measures to maintain them, they start to cause problems. As it is, you’re already limited to a maximum graph size if you don’t make the sizing dynamic, and if you did make them dynamic, you wouldn’t have to hide that status bar, and the header and footer bar.
Regarding text size, a dynamically resizing graph would easily solve that too.
And by “be lean”, I mean “every element should justify its inclusion.” Adding options to a Settings page certainly adds clutter and complicates the app. That the Settings page has little else on it doesn’t justify including something else to fill the empty space. I can believe that some users preferred the original “flat” look, but appeasing them came at a cost. You may consider that cost worthwhile, but it’s a cost nonetheless: the feature complicated the app and introduced a bug.
And I definitely appreciate color-blind accessibility support and perhaps expressed myself poorly there. When I meant was that, having added support for the Appearance setting, it appeared as though you may have restricted your color-blind support to what that Appearance support let you do–namely, change colors. In other words, it appeared as though you approached the task of adding color-blind support not from what the task might require, but from you were able to do given your existing Appearance support. It still appears that way to me. Imagine, for instance, that instead of colors you had used different patterns or some other non-color concept to distinguish the different subway lines. You could have then layered that concept atop your existing Appearance support, freeing the color-blind users to enjoy any additional Appearances you might have added later. As it is, color-blind players are pretty much restricted to that one Appearance, and given constraints on your time and enthusiasm, perhaps destined to remain so restricted.
So “lean” doesn’t mean “stripped to the bone” so much as “stripped to the essentials”. In that regard, Subway Shuffle could still be leaner than it is. The status bar, for instance, could well be considered essential, though it adds nothing to the game.
I know you put a lot of effort into your game, and it shows. Your customers love it and rave about it. Clearly, it’s a well-designed game. It’s already a nice iPhone app too, and could be even better with a few things addressed.
John,
I think we may have to agree to disagree here on what makes a good interface. I also have a feeling your opinions might be different if you hadn’t been put off by the too-small text in 2.0, which is fixed in 2.0.1.
The changes you suggest are certainly possible, but I do not agree that they would be improvements.
Why aren’t the simpler levels scaled up to fill the screen? Because they don’t need to be. They are already at what I judge to be a comfortable size to play. If the station spacing or overall scale varied widely between levels, I would see that as a negative. Don’t change interface elements needlessly and make the user adjust.
I don’t see hiding the status bar as a good sign that something needs rethinking. Games are almost by definition immersive apps, and it is very common for them to hide the status bar. In a landscape app, any vertical real estate is not meager. The status bar is not essential to game play; enough space for the larger levels is. That said, in the next update I am planning to show the status bar (translucently) when the tools are on — again mimicking the Photos-app behavior.
You suggest keeping the status bar, navigation bar, and toolbar up permanently, and resizing all the levels to fit the remaining space. If you actually looked at that layout, I think you’d realize how awkward it would be. Together that would cost 108 vertical pixels, I believe, out of an available 320. You’re asking me to scale down most of the levels by a third linearly, or by over a half by area. What’s more, there would always be large empty space to the left and right. Now actually, some of the levels are rescaled to fit, but subtly (in the full version, not the lite version). And I do have a few larger levels that I will probably wind up scaling down to fit. But I will have to make a judgment first on how playable they are when compressed. I see the current station spacing as optimum for the iPhone.
For color-blind accessibility, my first thought was indeed to use different patterns to distinguish the lines. But the several colorblind users I polled preferred solid, distinguishable colors. Not being colorblind myself, I had to trust their judgment. Which colors are hard for you to distinguish?
Bob,
While I agree that it looks as though we’ll have to agree to disagree, I continue to wonder at some of the design decisions you made regarding the application itself.
Why, for instance, is your game in landscape orientation? Those levels would seem to work equally well in portrait orientation, which would reduce some of the pressure to claim real estate.
Why do you use system panels at all for header and footer if you’re going to immersion? If I mistakenly tap the background rather than a dot or connector, the panels appear confusingly. Why allow such a thing, when you could have easily shown/hidden those panels explicitly with an onscreen control? In this instance, the obvious care you took to enhance the immersion, as you say, works against things.
Why do you keep the connectors at a rigid 60-degree angle? By abandoning that simple point, you could relax the layout considerably, albeit at some cost to the grid-like aesthetic. It looks nice as is, but it could look nice with varied angles as well–without handing to pay any layout cost.
Color blindness differs by kind and severity. My own variety equates blues with purples, browns with green and red. In musical terms, I’d say where most people can discern a minor second, I can discern at best a major second, and more likely a minor third.
But it’s important to note that no choice of colors is likely to work for everyone, thus the need for alternative approaches. One effective solution is to choose maximally contrasting values, such as White | Blue | Red | Yellow | Black | Gray. Hard to miss those. Another is to include other visual cues such as line thickness or icons as differentiators.
Regarding Subway Shuffle in particular, I can distinguish between the colors you chose, but only with a difficulty that pulls me out of the game to focus on the UI instead. It’s not a big enough point to keep me from enjoying the game, but probably enough to keep from enjoying it often.
John,
You raise some good points. I’m honestly not sure whether the game needs to be landscape only. I laid it out that way because that is how I have always played the puzzles, and it’s how I think of them; when I try to play them in portrait mode, it gives me a headache. However, it’s entirely possible this is just my own bias. I am planning to add autorotation in a future update (though keeping the instructions in landscape mode, to at least steer users to the “natural” orientation).
However, I still don’t see that there is a problem with real estate; I think hiding and showing the tools is perfectly appropriate. This is probably a subjective thing, but it’s the call I’ve made, and my users seem happy with it. And even in portrait mode I would still hide and show the tools.
” If I mistakenly tap the background rather than a dot or connector, the panels appear confusingly. ” This is the same behavior as in the Photos app. Actually the behavior is somewhat improved in 2.0.1. In 2.0, if you tap on the graph but not on a legal move, the tools appear. In 2.0.1 you must tap the map background or the title bar. The tools appear by accident much less often now. Yes, I could instead use an onscreen control. Again this is a subjective call; I chose to keep the playing interface as clean as possible. It’s possible I could change my mind on this one, but people seem to like it.
Why use system panels for the navigation bar and toolbar? Actually I may tweak the look a little bit; the standard look smacks just a bit too much of “productivity app”, vs. game. However, I’m using them in a very standard manner that users will immediately understand, so I don’t see it as a big problem.
I don’t understand your concern about the standard 60-degree layout. Actually some of the levels in the full version are on a square grid. But it just turns out that a triangular grid tends to support more interesting puzzles.
I agree that my current solution for colorblindness is not ideal, and in the end I’ll probably need to use more than color to distinguish the lines, in spite of what most my users have requested.