05 January 2011

New UI, part 1

I originally prototyped the game on iOS using art from the original game, usually either shrunken or cropped. As I’ve mentioned, none of the screen shots I’ve shown before are final. (And since the game hasn’t shipped, some of the screens below may change slightly as well.)

I was lucky enough to get to work with a very talented artist from Finland, Jani Lintunen. We engaged in a fairly lengthy discussion of how to present all the information from the original game on a smaller screen. This consisted mostly of Jani mocking up a look, and me explaining that we’d need to make more tradeoffs to support the game. But we gradually iterated on a new look that I think is true to the spirit of the original game, is better suited to the small screen, and fresh and attractive. I’d like to share part of it now.

As I mentioned before, the original Tula screen (the bird’s eye view of the clan) is impractical for the iPhone screen. Here’s the replacement. It gives the same recap of the previous year, but now shows your clan reputation (which didn’t fit in the subsequent Sacred Time screen). It shows a different overview of your clan, one that used to be at the top of most screens: the illustration shows whether you’re a War, Balanced, or Peace Clan. You can also see the game’s new fonts, both from Canada Type: Dutch Mediaeval for most text, and Lorenzo for headings and buttons.

Radio buttons need to be much bigger on a touch screen, so the Sacred Time screen has room for little else. In particular, the row of advisors that was a feature of almost every screen in 1.0 is collapsed down to a single button which portrays your chief. Tap it to display advice:

As always, just tap each advisor to see what they have to say. Tap the down arrow to hide the advisors.

Once you allocate your clan magic, you’ll proceed to the Clan screen. This has all the same information as always (including the summary statistics at the bottom of each screen). But there’s no room for illustration at the top, which made things look a bit dry. So Jani came up with pictures for each of the major buttons.

If you’re familiar with the original game, you’ll note that there is some missing information: the current season and year, as well as your clan name. There’s no way to advance to the next season. And there are no icons to let you switch to a different management screen. This is where Jani and I iterated the most. Should we keep the original icons? Could Lore and Saga be combined? Could other screens be combined somehow? Was there even room to show the icons?

Well, you already know how that last one was decided. Instead, we came up with a menu, which is available from the bottom right icon. I can’t show you the animation, but here’s what the menu looks like. The left side shows the current season, while the right lets you switch to any of the original screens. (The Controls screen was available in the original game from a special icon at the bottom right. Jani redrew it to be more consistent with iOS.)

Also missing from the Clan screen is the standing stone that sat in the center of each management screen and showed you what blessings were relevant to that screen. This — along with screen-specific help — is available from the More Info button. This screen features the new filter control, which here shows blessings that you have learned. Tap one to get information about it, including which deity can provide it on the Magic screen.

That’s all for this installment, but stay tuned for the next post, with more of Jani’s great work.

4 comments:

  1. Hi David,

    Happy New Year,

    Great post about the new look interface. The game is starting to be its own new game in its own right separate from the old version. With the new art are you going to be able to iPad it? or is it still iPhone only?

    ReplyDelete
  2. We focused on making the UI work for iPhone & iPod touch.

    ReplyDelete
  3. I really dig the new art for those buttons (especially Feast!)

    ReplyDelete