Both the User Interface (UI) and the User Experience (UX) are critical components to a successful game (or mobile app). Without a good interface users won't understand how to interact with your app. Without a good experience users won't return to interact a 2nd time.
Although very closely related, UI and UX are different. These differences can best be summarized as the following:
The User Interface (UI)
The UI represents the controls, information and inputs that allow the user to interact with your product.
The User Experience (UX)
The UX represents the feelings, reactions and perceptions the user gets as a result of using your product.
You can have a great User Interface and end up with a horrible User Experience. Let's explore the differences in more depth.
Focus on the User Interface (UI)
The user interface is arguably one of the most important pieces of your app. If a good user interface is not provided for your app, then users will not be able to get the value out of your product. If there is no value, the users will not stay and success will not be experienced.
A good UI consists of a clean and organized approach to convey the most important details about your product. It should be naturally intuitive allowing users to easily see and understand what they need to do next. Although not required, it is advised to follow industry standards and trends allowing users to have a comfortable feel with other relevant products.
A bad UI consists of information that is irrelevant, hard to read and otherwise distracting. A bad UI makes it difficult for users to find the actions they want to perform. In short - a bad UI will prevent users from progressing in your app.
The UI consists of the colors, fonts, layout, size, inputs and other visual elements of your app. If your app is just starting out, try testing different versions of your UI in an A/B style experiment to see which ones resonate best with your audience.
Focus on the User Experience (UX)
The user experience in many ways contributes to whether or not users like your app and whether or not they decide to return. A great app can have a terrible UX bottleneck preventing users from progressing beyond a certain point.
A good UX consists of smooth user flows between features, graceful handling of errors and generally gives the user a sense of enjoyment from your app.
A bad UX presents messages in SPAM fashions, utilizes abrupt or abusive language and generally makes the users mad as a result of using your app.
The UX consists or messaging, transitions, standardizations, reliability and general trust within your app. When you release a new feature within your app, try testing out different versions of your messaging and transitions in A/B style tests to see which ones provide better results for your app.
How does UX and UI work together?
To discuss how UZ and UI work together - let's make comparisons with a traditional building.
The UI of your app is like the foundation of a building. A larger building needs a stronger and more complex foundation that provides reliable support for many different stories. In your app, this is related to the HUD or heads up display for your user. This is the foundation that displays your app info, presents a camera view to your game and entrances to menus and level controllers.
The UX of you app is like the interior/exterior design of your building. When users walk into your building, you want them to feel a sense of inviting and ease. In other words you want them to be comfortable. In your app, this would be the FTUE (first time user experience) or the main menu. Both need to be inviting and provide the user with a sense of purpose.
The UI of your app is similar to the elevators and stairways found within the building. These building elements are functional and assist is carry people between the floors of the building. Similarly your app will need strong menus to organize the entrances to different levels or sections of your app.
The UX of your app is similar to a hallway in a given floor of a building. If the hallway is long and unnecessarily weaves all throughout the building, it was cause frustration as guests have to walk more than needed. Similarly in your app, if it takes users several clicks to get to a desired destination, it will frustrate your users.
The UI of your app is similar to the layout of a room within the building. If the light switch is not handy, then it is hard for a user to turn on the lights upon entry. In your app, if it is difficult to change settings or interact with features, then those features will not experience success.
The UX of your app is similar to the cleanliness of a room within the building. If the room is dirty, the guests will not be comfortable and will not enjoy their visit. In your app, if colors, fonts and design elements fight with each for attention it will leave your users confused about what is important.
The Mistakes Made with UX and UI
A lot of misconceptions exist about what UX and UI are and are not. Let's look at a couple examples.
Good UX and good UI is not a mystery... but is also isn't a simpleton. Good UI and UX requires a lot of research, mockups, testing and general attention to detail.
Who should do what?
Ideally, you would be able to employ both a UI expert and a UX expert. The two would work together to focus on their areas of the product and allow them to work seamlessly together. A good UX goes hand in hand with a good UI.
In smaller teams it is not always possible to have a dedicated UI and UX expert. In those situations it is critical that whoever is doing the UI and UX work, treats them as related but distinctly separate components of your product. If the UI is neglected, it will be hard to have a positive UX. Likewise if a bad UX is provided to the user, it won't matter that a strong UI is in place.
Wrapup
Ok - let's wrap this up. The UI is the structure found within your app. Are you able to present the needed information and controls so that your user can quickly and easily navigate and interact with your app. The UX is the flow that your user experiences while using your app. Are they left with a sense of enjoyment in using your app - or do they just get frustrated by spam messages and errors.
Investing in both UI and UX is a critical aspect of your apps success. Ideally a different individual would be in charge of each and work together to accomplish success - but that is not always the case. Regardless, focusing on both the UX and UI as related but distinctly different elements of your app is crucial in order to enjoy success.
