I was tasked with giving a presentation to the UI/UX department at Wooga recently, and decided to focus on an example of poor UI/UX implementation, as we usually focus on great ones and I felt it would be refreshing to see what not to do.
Whenever I’m asked about a bad or lacklustre example of UI implementation there’s always a handful of examples that jump out in my mind. Games or apps I’ve come across over the years that have stuck in my mind as a good example of what not to do. Some of these are very obvious, but what makes Star Wars Arcade, developed by Goodboy Digital, such a good example is that it takes a moment to notice the weaknesses that should have never made it into the final product.
Goodby Digital’s site explains Star Wars Arcade is ‘a fully operational arcade with three huge games as well as full user customisation options all contained within a custom Arcade hub’.
Upon opening Star Wars Arcade, the user is first met with a loading spinner and title screen, this is all fine, except that later the loading spinner will sometimes be a different spinner, and the different spinner’s sprite is also used as a button in some cases. Already we have an inexplicable inconsistency.
Users then find themselves in a retro arcade and are left in front of 3 game machines, contained within the game world itself. From here they can choose one of the games to play, or navigate to other areas of the arcade building. There are also options to switch off audio, request an instructions popup and also a controller icon which calls in a drop down menu which links to the same 3 games contained within the arcade machines. This may seem redundant, but is later used as a sort of ‘home’ button to navigate back to the arcade hub from playing one of the games. This UX is very clumsy and unintuitive – taking longer than it should to realise there is no ‘quit’ button and that in fact, what appears to be a control input explanation button from its icon is actually a return to hub navigational tool. Finally play tokens are displayed at the top of the screen too.
We can see that buttons do not have consistent line weights, consistent colour shades or borders and there is quite a bit of pixellation happening on many UI elements.
Navigating to the right brings users to a wall display containing cycling advertisements for other Star Wars products. Navigating to the left brings users back to the 3 arcade machines and left again will bring them to a door which users can click on to enter a customisable, personal room for the user. There are a great many UI/UX issues within this room and even in the process of entering it.
Firstly – why do users navigate first to position themselves in front of the door, then have to click a second time in order to enter the room. The area in front of the door holds no real value to the player other than displaying their initials, so could this step have been removed? The door could have been in the HUB area for a less click-busy experience. Secondly – the player’s chosen initials are displayed above the door, these initials are then blocked by the play tokens. This could have been solved by making the door shorter, but really showcases a lack of care and foresight being put into the UI. Something that further hammers home the lack of care are the instances of popups appearing on top of other popups, without any darkening, blurring or even breaking the frame of the underlying popup. This is poor UI and could be so easily avoided with a little forethought.
Inside the player’s personal room, a number of UI issues are visible immediately. Here icons are being stretched and skewed in order to present them in perspective with the room – this is a very bad idea. This renders the icons hard to understand and read, defeating the purpose of an icon altogether. What’s more these icons are not diegetic, as in – they are not like a sign above a tavern in a fantasy game, a sign existing within the game world, and therefore subject to perspective and camera positioning etc – these icons exist solely for the player to read, in order to communicate messages in a way that’s cleaner and quicker than text sentences. What’s more is the icons raise up upon hovering over them, and leave a duplicate of themselves in their original position – this is inexplicable and further muddles the image.
Exacerbating this problem is an instance of UI that is diegetic but is not handled correctly exists in this room too. That is the player’s initials display above the door. The display is in perspective, but the font is not, leading to a disjointed look.
On a side note: the room’s perspective does not work and is jarring to the eye. What’s more there appears to be a heavy use of repeating basic Photoshop brushes being used. Now these are not UI related complaints but do detract from the experience and don’t live up to the Disney or Star Wars brand expectations.
I hope these thoughts have been useful to you in understanding some of the pitfalls that a game can fall into without a strong UI/UX consideration.