Scryptic Development - the Game Design

WordBattle Interaction Design Document

Version 1 - 16 December 2009

The iPhone Scrabble game serves as a model for our interaction design since the game dynamics are similar. However, we propose a number of improvements to overcome usability issues with the Scrabble interface and to accommodate the particular requirements of WordBattle.


Tile Positioning:

In iPhone Scrabble a player moves a tile by touching it and sliding their finger across the board, with the tile positioned beneath the fingertip.

Problem - iPhone Scrabble interaction presents two feedback issues: it is difficult to exactly place tiles because they are smaller than the finger and effectively invisible, and the player may not realize that they have failed to properly touch a tile, because even though it may be left behind on the rack, evidence of this is obscured by the bulk of their hand.

Solution - Once selected a tile pops up above the fingertip and remains above the finger as it is moved. Further feedback is provided by a shadow that indicates the map cell in which a tile will be placed on release.

Secondary Problem - A tile which pops above the rack will naturally snap to a position on the map, making it impossible to reorder tiles on the rack or lift them off the map.

Secondary Solution - a thin snap zone is placed between the rack and map area so that letters can be placed on the rack.

pp5a.jpg

pp5c.jpg

pp5b.jpg


Level of Detail:

iPhone Scrabble has two levels of display detail: an overview mode, in which the entire board (15x15 tiles) is visible, and a detail mode, in which a portion of the board (7x7 tiles) is magnified for accurate tile placement. Zooming between levels of detail is achieved either by gesture (double tap or pinch to zoom in/out) or time delay (once a tile is hovered in overview mode the game automatically zooms to detail mode).

Problem - WordBattle will have many boards with more than 15x15 tiles, making two levels of detail insufficient, since individual letters will not be legible in overview mode and context will be lost during the magnification required for detail mode.

Initial Solution - Two levels of detail could be provided as before: intermediate mode (15x15 tiles) and detail mode (7x7 tiles), with a separate overview map, showing the crossword as horizontal and vertical bars and also indicating the extent and position of the main board as an inset rectangle. However, it was decided that this solution would take up too much of the limited screen area.

pp2.jpg

Alternative Solution - Three levels of zooming are provided on a single map: overview, intermediate and detailed. Transitioning between levels occurs as before, except that the double tap gesture is no longer supported. The reason for this is that unlike pinching there is ambiguity about whether to zoom in or zoom out at the intermediate level of map detail.

pp3.jpg



Display Orientation:

The iPhone can be held in either portrait or landscape orientation with the game display configured appropriately. Many apps use the accelerometer to determine a change in orientation and the reconfigure the display but we regard this as too time consuming to implement.

iPhone Scrabble uses a portrait orientation, with a 7 letter tile rack, an icon area across the bottom, a map in the center, and a small strip with score and some icons across the top. However, in WordBattle the tile rack is much larger, necessitating a double row of tiles. Unless a second snap zone is placed between the two rows of the tile rack it becomes impossible to reorder tiles on the bottom row (cf. tile positioning)

For this reason a landscape orientation was chosen, with a tile rack across the bottom consisting of a single row; a thin snap zone above it, which can double as a display area for score and map information; a large map area in the center; and icons placed symmetrically to left and right (perhaps displayed semi-transparently to allow more of the board to show).

pp1.jpg

pp4.jpg



Combat Mode:

Another departure from Scrabble interaction is in combat between players. Paper prototypes below show a typical combat sequence - (a) the red player uses quick to attack greens crossword, (b) a semi-transparent pop-up window shows the defenders letter choices, (c) the defender selects numb, to defend with (d) numb is defeated and the letter b is removed because it is the only letter not shared by other defending words, (e) combat continues with a revised pop-up and the user selecting zen, (f) which defeats quick after it was weakened by the previous attack.

pp7a.jpg

pp7b.jpg

pp7c.jpg

(a)

(b)

(c)

pp7d.jpg

pp7f.jpg

pp7g.jpg

(d)

(e)

(f)

 

Download Now