Our dream for Tau Station is to create a world you can explore and escape into, the way that we escaped into books as children. A world that you can picture yourself living in. But with more than two hundred stations to visit and explore, NPCs to talk to, missions to take, careers, combat, trading, politics, and more, how can we translate that onto the screen while also making it accessible to all players? It’s a challenge, but we have a team of very talented people working on it. By following web standards and design best practices, they’re building a user interface (UI) that is both good for gameplay and supports our overall vision for the game.
Our UI:
• Ties all the elements of the game together
• Is easy to use
• Provides you with information when and where you need it
• Contributes to the immersive atmosphere of the game
• Is accessible to all players
• Follows the principle of designing for mobile first
Information Where You Need It
Regardless of what you’re doing in the game, your character’s most important information should be easily accessible.
On the desktop, the left-hand column of the screen always shows you your stats, your experience, how many credits you have, what mission and job you’re on, and a few other critical pieces of information. This column also shows all the areas that are available to visit on the space station. You can move between them by simply clicking on the one you want to go to.
Mobile devices provide their own set of challenges: there isn’t as much screen space to work with, the internet connection may be less stable, and there’s less computing power.
That’s where our mobile first practice comes in handy. We’ve concentrated foremost on the user experience and are providing an easy and pleasant UI built for the mobile environment, rather than trying to run the desktop version on a smaller screen. Since a sidebar isn’t an option in this case, we’ve laid your stats and character information out differently for mobile.
Ease of Use – Desktop and Mobile
The main part of the screen reflects the area you’re currently in and shows you what you can do while you’re there. In the desktop image on the left, the player has been confined to the Sick Bay to recover after having a bit too much to drink at the station’s bar. While she’s there she can get priority care for herself, bribe a doctor to keep another patient in longer, or have some modifications surgically installed. As you can see from the image on the right, when you’re playing on a mobile device you’ll have all the same actions and options available to you as on the desktop but the layout of the area has been adapted for the experience.
Information When You Need It
Part of making the game easy to navigate and understand involves providing feedback whenever you take an action. If your character is sick and decides to get priority care, you’ll immediately see a message on the screen letting you know how much sooner you’ll be released from the Sick Bay. Being a text-based game, the actions you can take in Tau Station are presented as links or buttons on the screen. We know how easy it can be to accidentally click on the wrong thing, especially if you’re playing on a small device like your phone. If an action will use your stats, or cost you some of your hard-earned credits, you’ll get a chance to confirm it before the game proceeds.
Immersive Atmosphere
To contribute to a sense of immersion, we’ve made it a point that the text in all the station areas speaks directly to you as a character rather than as a player. This means that you won’t see many on-screen details about what an action does. We’ll offer a game tutorial that leads you through all the rooms and describes in more player-oriented terms what they do. That said, we know that you might want a refresher from time to time and that that info needs to be readily available. We struggled a bit with how to incorporate this sort of help text without disrupting the immersive feel and settled on an expandable “Room Tutorial” link that will live near the top of the screen. It’s unobtrusive, but always in the same place if you need it. When you select it, a text box will expand and give you all the details about that room. When you don’t need it, you’ll barely notice it’s there.
Accessibility
We believe that anyone who wants to play Tau Station should be able to, so designing our UI for accessibility has been a priority for us. Some of that is visible to players, such as how we display game messages and the colors we’ve chosen because we know that they’ll work for colorblind players. A great deal more of it is the work of our skilled front-end developers and their coding magic. Thanks to their efforts, our site is built in such a way that a player using a screen reader can navigate it easily. Important images will have a text description for players who can’t see them, and the game can be played using a mouse, keyboard, joystick, and even voice control.
We’re still finalizing the graphic design details for several areas in the game, but we have our UI framework in place and know what we want. As each room is designed we’ll continue to be guided by our core UI principles: ease of use, immersion, and accessibility.
