8
Woodland Heroes (battle HUD) Albert Holaso

Woodland Heroes Battle HUD (Heads Up Display)

Embed Size (px)

DESCRIPTION

UX/UI design for social games

Citation preview

Page 1: Woodland Heroes Battle HUD (Heads Up Display)

Woodland Heroes(battle HUD)

Albert Holaso

Page 2: Woodland Heroes Battle HUD (Heads Up Display)

FIRE button

START BATTLE button

Player Avatar

Player Health Bar Player ‘Ship’ Icons EnemyAvatar

Enemy Health Bar Enemy ‘Ship’ Icons

Before I was hired…

Page 3: Woodland Heroes Battle HUD (Heads Up Display)

The START BATTLE button needed to be

re-presented in a way that it didn’t feel

like an obstacle to getting right into

battle.

Ship icons were too small to deliver an informative feedback. While the indicators were readable, it was hard to tell which ship was destroyed and damaged.

The most glaring deficiency of the original design was that the health meters did not effectively communicate what was happening in the core game play. After a day of reviewing the system, it did not make sense to display a health meter at for example 50% when multiple combination of ship damage and destruction can give a player the same 50% damage feedback. Because the number of shots fired is directly related to how many surviving ships one had, the health meter only became more confusing when the each ship’s base hit points were not equal. The ship icons were added to try and mitigate that issue but what the UI ended up with were redundant and ineffective.

The FIRE button felt out of place in the context of battle

action.

Primary UI/UX Issues!

Page 4: Woodland Heroes Battle HUD (Heads Up Display)

A pre-battle screen was created to make presentation of battle UI more sensible. The Start Battle button

was relocated there to be available after all the player ships have been placed.

The FIRE button displays only after all shots markers have been placed. The button is

centrally located to bring it to the center of the action!

After I was hired…

Page 5: Woodland Heroes Battle HUD (Heads Up Display)

I replaced the health meter with weapon block stacks where each weapon block would give feedback on

the state of the weapon.

The weapon block stacks also contributes to setting up the player emotions and expectations when the enemy

weapon stack slowly builds in height at the start of a new battle. (For example in a boss fight the enemy stack would grow and tower over the player weapon stack…to give the

player an “oh s#!t” moment =)

Various weapon block visual states. Note: Hit

points per block are also displayed.

Page 6: Woodland Heroes Battle HUD (Heads Up Display)

Included actionable monetization hooks which

were a part of business requirements.

Additional Battle HUD information to show the currently shooting ‘ship’.

The weapon stack design also provides a sort of mini-game. The intent was to bring a more arcade-y feel to the game

mechanic by using it as an opportunity to display more visual feedback effects. Cut from scope was my idea to

have it more physics based in the way it collapses.

Page 7: Woodland Heroes Battle HUD (Heads Up Display)

Additional Battle HUD information to show the next shooting ‘ship’ which also

displays in ToolTip and in the Shot Pattern display.

Page 8: Woodland Heroes Battle HUD (Heads Up Display)

Players may still view the shot patterns of other

ships that are not actively firing or next with custom

tool tip displays.