The “Porthole” is undoubtedly the most important interface in the game, since it is always present on screen and must summarise the most important and useful information. The Porthole has to tell the players where their character is, how they are doing etc, all in the glance of an eye. The Porthole has to be clear, discreet and pretty all at once. A challenge indeed!

But this challenge follows the normal mark-up in difficulty from Dofus to Wakfu. We wanted to improve the user friendliness and concentrate the elements, so as to leave more space for the game itself, but at the same time, the interface has to display a lot more information. In Wakfu, the porthole contains about twenty different pieces of information and all of it is limited to an area of 200 pixels at most.

All the most important character stats must be displayed here – health points, action points, movement points, wakfu points, energy or initiative… A radar with a minimap is also required, a zoomable map of course. All sorts of buttons had to go there too: display gauges, health, constellations, the world map, a button to go back to the last saved point… and buttons for combat: quit, call for help, lock the fight, hide fighters… we are even planning personalised buttons so that each player can have links to the interfaces they use most. Finally, we have to display the “states” inflicted on the character (blinded, knocked out…) That’s a lot to get on there, a hell of a lot, and so everything has to be well organised to avoid confusion.



As the game’s development wound on and as new designs were conceived and some old ones scrapped, our ideas became more refined, the graphic style evolved… It even happened several times that we had to redo this interface from square one.

We set off with the idea of a round porthole, like on a ship. I liked the seafaring theme… portholes, waves and foam… it suited the submerged world in which Wakfu was set. And the dominant colour would be white, that was another firm decision, we didn’t want to go putting dark stains on such a cute and colourful universe.
The first version was black and white, but this was quickly abandoned for various reasons: it was opaque … and the contrasts were too great, this first sketch of the porthole drew the attention too much and seemed to stand between the player and the world. Then we decided to construct all our interfaces with “soft crystal”, a transparent, crystalline and malleable substance invented by Daryl, which surely had something magical about it. As you can guess, this decision to go for the see-through magic substance posed some additional difficulties, but we didn’t back down! ^^



So the second porthole was white, see through and elegant. Unfortunately it still took up a lot of space, while its round, transparent nature meant it was difficult to insert the other elements. On top of this, the buttons seemed crowded.
We concluded that if we wanted to give priority to user friendliness above everything else, we’d have to simplify our porthole further. So that’s when our porthole turned square…. The buttons fit in well … On the other hand, the point gauges were not that readable anymore – too thin, the figures were too small. After a lot of hair pulling, we at last arrived at the final form of the porthole which promises a “chemist’s” version of the combat gauges. There’s no way you’ll miss the info then! And in normal game play, these gauges are minimised to make room for the minimap.
At the time of writing, work on the porthole is still ongoing, but I’m tentatively hoping that we’re coming near the end! Even if I regret the loss of the marine porthole and its lovely roundness, I think that what we’ve come up with has improved the user-friendliness of the interface and I hope that you, the players, will find your way round okay.
PS: I’m dedicating this post to Franho, the graphic designer, Olivier and Clement, the developers, who have, along with a few others, suffered greatly for this porthole. ^^’