Redesigning the user interface



The head-up display is an important part of the user interface of any game.

It needs to present a lot of information and interface elements, in a clear an concise manner. In Samurai Wars, although the current interface works and does the job, I’ve felt that there have been several flaws:

  • it doesn’t scale well for matches with many players (or many teams for that matter)
  • the top and center popup panels obscured too much of the battle field
  • some inconsistencies here and there and some unintuitive choices
  • it was inflexible and hard to generalize and add new functionality

The first step was to introduce the command bar, to hold the chat and command buttons, and that functionality was released in the last update. After a lot of brainstorming and lot of mockups and I think I have arrived at a nice solution for the other parts of the UI as well.

The head-up user interface has been rewritten in Angular2 Material, which is a really nice framework that makes the code well structured which means it is easy to maintain and add functionality. Some key improvements:

  • cleaner layout, better use of screen space
  • the same interface works well for both desktop and mobile
  • the sidebar panel architecture will make it really easy to add more panels for stuff like user settings, additional match settings, more map tools, and whatever…
  • chat works more smoothly, obscuring less of the battle

Here are some before/after screens:

New build of iOS/Android/Web beta (170907.1951)
New build of Web beta (170821.1916)

I think the HUD is pretty good already. It is generally simple and unobtrusive, besides the chat blocking the game and keyboard blocking the chat. The command bar worked out really well.

I’m interested in seeing more ways to create and join matches. Such as: sending a match request to a certain player, some means to enter a match from the forum, and a tournament brackets option.

Not sure if the match options are directly related to the HUD, but a lobby with more options would be nice. Also a score board >.> <.<


They are related and indeed part of the motivation for the redesign.


This all sound good im so excited about this game and your commitment to this game its realy a great app and the scoring would be cool maybe we could get medals for a 20 game win streak 30 game and so on something that will show on are profile to drive the desire to look at others profile to see there skill set or accomplishments it could be like the badge profile

New build of iOS/Android/Web (170921.2048)