Hangman Challenge’s new interface for iOS 7

Version 2.0 of Hangman Challenge has a new user interface, redesigned for iOS 7. This article will tell you a little bit about what we did and what we learned.

The new interface design was a collaborative effort between Ben Corrales and myself. Ben is an architect and visual designer. He did the initial designs for the new interface and then worked with me to refine and polish the designs. I did the final implementation.

Here’s a screen from Hangman Challenge 1.5

Hangman Challenge 1.5 in Play

Here’s the same screen in Hangman Challenge 2.0

Hangman Challenge 2.0 in Play

Less Chrome = More Space

In version 2.0, we got rid of graphics backgrounds that we had used to give the interface a three-dimensional feel. In previous versions of Hangman Challenge, there were curved backgrounds with a gentle gradient behind the word view and the countdown view. In version 2.0, those are gone. The background behind the word view is still there, but it no longer has a mock-3D appearance.

Moving to a “flat” interface gave us some unexpected benefits: where the old iPhone 5 interface could handle words up to 14 characters long, the new iPhone 5 interface can now handle 16-character words and phrases. The old mock-3D backgrounds reduced the available space in two ways: First, we needed the space for the backgrounds themselves. Second, in order to make the 3D effects work, we needed space around the mock-3D backgrounds so that there would be a context for the 3D effects. With a flat interface, we were able to reclaim all of this space, which gave us more room for game play.

Less Chrome = Brighter Colors

Hangman Challenge has always had a “countdown view” which changes color as the user runs out of guesses. Starting out with a light green, it progresses to yellow and red as the game progresses. The colors themselves haven’t changed in the new version, but the feedback from our users is that they notice the colors much more.

Part of this is related to the elimination of the mock-3D chrome: on an iPhone 5, the countdown view now takes up about 20% less space than it did before, but the countdown view’s pixels devoted to color have increased by 50%.

Improvements to Accessibility

Version 2.0 supports users with visual disabilities with significant improvements to our VoiceOver support. These improvements work equally well under iOS 6 or iOS 5 (which we still support).

Our upgrades for iOS 7 also resulted in an improvement for people who are colorblind. In all of the versions of Hangman Challenge, the letters on each button change after the user presses them: red for correct guesses, green for incorrect guesses. This is not helpful for people who are red-green colorblind. I had been looking for a good way to communicate this information in more accessible way. With the mock-3D buttons that we had used in our previous versions of Hangman, I was never able to find a solution that was satisfactory. Adding more chrome to the existing mock-3D chrome made my attempted solutions look overdone and distracting.

With Ben’s new button design for iOS 7, it was much easier to add subtle hints to the buttons that could be seen by all users. For correct guesses, the rims of the buttons darken, for incorrect guesses, the rims of the buttons become lighter. The effect is subtle, but people who are red-green colorblind now how a workable visual hint. For users with full color vision, the letters continue to change color as they did before.

Here’s our new interface in full color:

Hangman Challenge 2.0 in Play

Even without the color, the keyboard still gives the users subtle hints that allow them to distinguish between correct guesses, incorrect guesses, and unguessed letters.

Hangman Challenge in Play (grayscale)

Changes to Animations

For the most part, our animations in Hangman Challenge 2.0 are the same as they were in previous versions. However, we changed the animations for the letter buttons following the example set by iOS 7’s lock screen buttons. In previous versions of iOS, buttons typically had two states: highlighted or not highlighted. Typically there wouldn’t be an in-between state. For our iOS 7 version, we added a new animation to our buttons. When pressed. the letter buttons immediately highlight. When released, the highlighting gently animates away.

Conclusion

When we first started working on the iOS 7 upgrade, I was sorry to see the old mock-3D interface go. It worked very well for the first six releases of Hangman Challenge. In the process of doing the Hangman Challenge 2.0 upgrade, I have come to a new appreciation for the benefits that the simpler interface provides. By eliminating unnecessary chrome, it gave us more space for game play. And to my surprise, removing the mock-3D chrome did not reduce the visual interest of the game. Instead, the game now is more colorful, has new animations, and provides a more accessible experience.

Hangman Challenge is free and has no ads.  If you’d like to get a copy, you can find it on the iTunes App Store through October 28, 2013.

by Michael Patrick Ellard