Game Career Guide is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Get the latest Education e-news
 
  • A Look Inside Sunless Skies' UI Redesign

    [03.12.19]
    - Tobias Cook
  • Hi, I'm Toby and I'm the lead on the User Interface redesign for Sunless Skies. This is a a major overhaul touching every element of the UI, so I wanted to give a bit of insight into our rationale for the redesign, and explain the thinking behind the decisions we've made. 

    A bit of background:

    We delayed the release of Sunless Skies to next January because we wanted to improve several key areas of the game. Of these, a major priority was the game's UI and user experience. Sunless Skies is a relatively text-heavy game and demands a greater than average amount of reading from the player, and we wanted that reading experience to be as immersive, atmospheric and intuitive as possible. At the same time, we took the opportunity to shift the tone of the interface to better align with the - increasingly dark and spooky - game world. We only had a few months, so there was no time to start from the ground up. We had to be economical, adapting existing technology wherever possible.


    Pictured: The previous UI design dating from our Early Access launch in September 2017]

    Identifying problems

    We began with an analysis of our existing UI. Having chosen the areas we wanted to focus on, we had to quickly produce wireframes (Adobe XD was useful for this) and problem solve ‘on-the-go' during implementation.

    One of the primary issues we identified was a less than ideal reading experience. This was due to a few factors, among which the most significant was the off-center positioning of the reading panel. This was an aspect of the old design, a panel based  system which allowed users to open any combination of two interfaces in a left/right configuration. The intention was to allow the player to review their inventories whilst simultaneously interacting with story content, allowing simultaneous comparison of different inventories, and so on. The unfortunate result of this design was the pushing of the reading panel off the screen center, a sometimes confusing and unpredictable visual layout, as well as a general loss of real estate in which to display content.


    Pictured: The new UI design, featuring a center/side panel layout. Link to larger image.]

    Simplification

    For the update, we decided to cut back on this design. We moved away from the mixed two panel design to a center panel/side panel layout. We centered and expanded the reading panel, and expanded the inventories whilst locking them to the side of the screen and adding tab cycling. We allowed a small amount of travel in the reading panel when the inventories panel opened to afford more space to the interface as a whole, while ensuring that the reading panel would remain centered if no other interface required real estate.

    I wanted to cut back on the three dimensional, button-heavy appearance of the existing UI, presenting the written content as seamlessly and free of distractions as possible whilst remaining intuitive. To this end we cut back on overt affordance in the reading interface, using colouration, indenting and dividers to indicate hotspots rather than buttons.

Comments

comments powered by Disqus