You don’t need to have played Mystic Messenger to read this article, just know that it’s an otome game primarily using an original phone-like interface to interact with the main characters.
Mystic Messenger is quite unique from a user-interface standpoint, especially considering it’s a visual novel. My first impressions post included some thoughts about the immersive qualities of the main menu as well as how the chatroom text conveys emotion and feelings. Since they were covered already, I’ll be going over a few specific design principles and how well they were followed in this post.
Design & Aesthetics
For sure, the app main menu is a pleasing sight with good aesthetics. A consistent yellow-silver-black color scheme keeps the user from getting overwhelmed, and the icons are clear looking and attractive. However, just because it looks pretty doesn’t mean it’s designed well! Usually, when talking about how something looks, the terms ‘design’ and ‘aesthetics’ are used interchangeably. In actuality, aesthetics focuses on how pretty something looks while design focuses on creating something (in this case, a visual interface) that is functional and intuitive. Is the design of Mystic Messenger just pretty, or is there something deeper in how it looks?
Grouping & Visual Hierarchy
Mental grouping occurs when there are visual similarities, strong alignment, and close spacing between like-elements. Ideally, the grouping is clear and gives the user an idea of the collective functions of the items without having to check each individually. We can divide the interface items into four main groups:
- Main Character and Story Interactions – The main story is delivered through the chatroom, while the Message and Phone buttons are non-essential but experientially important. These buttons are the only ways to directly interact with main characters and are, appropriately, the biggest buttons on the menu. Visual similarities include their being circles with mostly-silver fills and yellow outlines. Any updates to the message and phone systems are indicated with a number badge, a common convention on real smartphones.
- Party and Credits Functions – The party is the second most important element in the game besides interacting with the main characters, as it is what the story is initially supposed to be building towards (and something you’re given a grade on). These elements are given a yellow fill and brown outlines, and any updates to the email are given a number badge.
- Social Network and Help Buttons – These buttons are the third most important group in the game, as they help push the complete ‘phone app’ concept further. However, they don’t allow you to interact with them, and this is probably why they are not so well emphasized in the design. These buttons are distinct because of their square shape. Any updates are indicated by changing the usually dark fill with a bright orange, a color that draws your eye to it.
- System Functions – These buttons are the least important group, probably because the average user will need to use the buttons the least. The only time you’ll need to interact is to change a setting (which you shouldn’t need to do more than once or twice), save or load a file (there is supposed to be a 5 “hourglass” penalty to dissuade people from abusing this), see hearts, and buy “hourglasses”, the in-game currency. These are visually separate because of the rounded-corner rectangle and border around them.
As Mystic Messenger is intended to be played on a phone, it’s reasonable to review its user interface using user interface principles for mobile screens. One of these principles is designing for a single hand grip of the phone. This is the most limiting phone grip in terms of comfortably accessible space and is assumed to be the grip people use the most (unless a user is actively typing). Shown below is the main menu screen overlayed with colored zones indicating how comfortable the area is to reach using a default right-handed grip.
Original image w/o Mystic Messenger screen is here: http://cravings.no/wp-content/uploads/2014/09/iphone-6-screen-size-realistic-usability-1.jpg
The chatroom was the most important link on the main menu screen, as a majority of the story is told using items from that screen. As such, it is the largest button (making you automatically drawn to it before you know what it does) and is always partially in the natural comfort zone. The next most important links for interacting with the main characters are the Message and Call buttons, and tend to fall into the yellow stretch zones, but don’t always do this. The other buttons won’t fall into any of the comfortable ranges, as they are considered less important. At first glance before using an overlay of the thumb comfort ranges, I had assumed the game wasn’t actually optimized. Ultimately, the goal isn’t to put everything in a comfortable range. Keeping the most important and most used items in the comfortable range is the best thing to do for a good user experience. Fortunately for this main menu, it would seem Cheritz definitely did their research.
This post is sticking to the analysis of the main menu, but was the rest of the app very intuitive besides the main menu? Judging from the light confusion I had when navigating, not quite! However, this post is pretty long already. If you’d like to see more analysis on user interfaces in games, please feel free to comment below or even tweet to me @huamingjuan.
If you were interested in Mystic Messenger and some other user interface notes, check out my first impressions review!
What did you think of the user interface? Would you like to see more posts like this? Did I miss anything? Regardless of any of that, thank you so much for reading!
How Apple is Giving Design a Bad Name – An article using Apple as a case study while explaining the difference between design and aesthetics.
Design vs Aesthetics – Back to Basics – If you really like Apple, this article about design and aesthetics does a good job of clarifying the difference between the two as well.
How Do Users Really Hold Mobile Devices? – An article full of statistics focusing on how people hold their phones and why it isn’t a simple thing to figure out.
The Non-Designer’s Design Book ($24) – A book that easily and accessibly teaches design concepts through concise explanations and exercises.
Mystic Messenger – The game I was referencing in this post. Totally worth it, I’ve enjoyed it a lot so far!