Senior Production Blog 4 (2/10/2017)

Most of my week was consumed by my systems design class, working on a prototype system, with 16 pages worth of documentation along side it. Suffice to say, because of this I didn't have much time to work on Kanji Samurai.

However, I was asked by the team to come up with a solution for one of the UI issues we have yet to approach: the level select process.

We have this gorgeous piece of art for the map for our game. It starts with the tutorial and the rest of the map is covered by clouds until you finish other sections of the game, and the clouds clear. Through this we can provide a visual treatment for the players progression through the game. However, in the game's current state when a player selects a level, it pulls them away from the map to a seperate screen with a list of kanji in English on the left hand side, and a start button down below. Because the first kanji you currently draw in the game is the kanji for "one", the word "one" is in this list of words and players want to click it, thinking it's the way to start.

Later levels have the core 3 game modes: practice, spar, and battle, which could theoretically have different sets of kanji, so they are presented in their own columns with a brief description of gameplay. My solution for this clutter and confusion is this:

The proposed solution scraps the second screen where players confirmed that they wanted to play that mode and instead uses a scroll that drops down from the top of the screen when players make a selection. Each kanji is listed out, but this time with a graphical representation, English translation, and anglicized translation. This no longer has the confusion of players wanting to click "one" as the context around "one" makes it clear that it isn't a button. Not in the above sketch, but discussed later with programmers is arrow buttons on each side of the "In This Level" rectangle, allowing selection of game modes, and moving around elements in the UI can allow for a brief description of game modes as well.

If players don't want to play the level they selected, they no longer have to hit the back button and wait for the scene transition to bring them back to the map screen, they can instead just tap the map again, and the scroll will disappear, allowing them to make the choice that they wanted. This echos mobile app design, and is used in apps like Uber, Googles suite of apps, Tweetbot, FitBit, Facebook, and others.

It also cements the idea of UI elements dropping down from the top of the screen, our agreed upon UI scheme for gameplay, so UI is consistent across all aspects of the game and players know where to go when they want to bring the UI down.

This next week I've been asked to come up with VDD's and Design sketches for alternative game modes to help sell the learning aspect even more, and we have a meeting tomorrow at 1 PM.