Insane User Experience

Hello everyone!

Looking at this blog posts, we can easily realize we write a lot about programming, but not that much about game-design. One facet of the game-design consists in thinking the user interface (UI). But writing about UI these days is so outdated! Now, people talks about UX, and UX only. Actually, it’s about the user global experience of the game. We can find lots of theories and recommendations all over the Internet.

Factory build queue
Factory build queue

The insane UX process

I have a practical approach about it :

  1. I reasonably code the UI. I want it convenient, plain and understandable.
  2. I test it, you test it,
  3. I improve it.
  4. And so on. Back to step 2.
Energy and Sharp Crysal gauges
Energy and Sharp Crysal gauges

 

The best feedbacks we had so far were from players who tested the game during some fairs (Stunfest, Utopiales)…even if it often makes us start all over again.

Our approach of the Win That War! UI

Why should you have to double-click while a simple click is enough? Why should you have to move the mouse till the very bottom of your screen while the menu could come up in its middle? UI is all about giving the player a nice experience,  that’s why I try to remain faithful to those principles :

  • every clickable component (no matter if 2D or 3D) has to react on mouse-over
  • every change in the game has to be visually and easily identifiable…
  • …and every visual change has to be the exact reflection of the simulation (damages, building progression, etc.)
  • at one time, necessary information only have to be showed up depending of the situation
  • in order not to penalize the player, the action has to be restricted ( ONE click, ONE button, ONE mouse-move…)
  • the more common is an operation, the more it has to be simple to execute.
  • for every action, we’ve integrated visual and sound feedback to easily inform the player that this action was taken into consideration.

Well, well, well…written like this, it may sounds really easy to do, but actually it requires a lot of work…

Feedbacks building tank traps
Feedbacks building tank traps

Since my latest post about UI, we worked on the conception of a brand new animated SVG-based panel. The UI is entirely javascript-coded.  And I’m using only 3 external libraries :

Jquery (I mean…How I’m supposed to do without it?)

requirejs (To fill Javascript major gaps)

snap (To easily manipulate the SVG)

 

 

 

The new alpha version of Win That War! will be released soon, so you could test it and send us your feedbacks. Then “back to step 2”