A UI so good, it breaks language barriers
I’m here to talk about a mobile app that’s quickly drawing a huge fan following all over the Internet. I’m of course talking about ねこあつめ.
Are you an English-only speaker like myself wondering what the heck ねこあつめ translates to? Don’t worry, it’s completely unimportant. The App Store/Play Store reviews speak for themselves:
“Simple UI,” “doesn’t need translation,” “easy to pick up even if you don’t read Japanese!” Just how is this app earning such incredible feedback?
I downloaded this to find out for myself. This had nothing to do with wanting to play with kitties on my phone, of course. This was pure research.
The premise of the app is very simple. You have a very narrow backyard facing an alleyway. You can purchase food and toys and leave them out in an attempt to attract cats to your yard. You check on the app periodically throughout the day to see which kitties have visited your yard (they come in all different kinds of colors!), and refill your food sources for them. You earn sardines which you can spend on more food and toys. If you’re lucky, you’ll catch the cats in action, playing in your yard! If not, a log will show you which ones you missed.
In the course of using this app and seeing how quickly and enjoyably I was learning how to use it, despite all the lettering being dauntingly unreadable, I realized this simple, fun, and admittedly silly app has a lot to teach about good User Interfaces.
Let’s take a look at how this app shows you how it works.
Who needs words when you can use affordances?
I have a growing collection of UX- and UI-themed articles in my Medium Bookmarks, but a notable one details the concept of affordances in design. An affordance is essentially an interactive element in a design. Among the different affordances described in the article linked above are:
- Physical affordances: Elements that appear physically interactive, like “3D”-esque buttons
- Language affordances: Using language to explain what actions are possible — a type of affordance that ねこあつめ proves isn’t necessary
- Pattern affordances: Elements that we understand because they have become so ubiquitous, like an “X” meaning “close,” or a cycle icon meaning “refresh”
- Symbolic/iconic affordances: Imagery used to denote an action or content, like the Twitter bird logo to imply you can send a tweet
Despite such a flat, cartoony interface that isn’t too visually dissimilar to your kitty backyard, ねこあつめ uses physical affordances in the form of what are obviously buttons in the top left and lower right of the app. If we take a guess (a point I’ll address later) and click on the top left button, we discover the menu for the app.
ねこあつめ uses pattern affordances by taking what we know and expect how most apps work to help us get the main start/enter and end/close actions down. We learn we’ve discovered the menu because clicking the top-left button opens a classic box of more iconic menu options. Even better — the menu button turns into an X, letting you know that to exit the menu, you can click the X to get out of it.
Did I mention icon affordances? Check out the menu options we have here. I was able to take a guess before even clicking on them:
Cat-face: Look at kitties?
Bag: Shopping!
Ball and box: My toys inventory?
Camera: Take pictures!
Center cat: I didn’t learn this one initially, but soon figured out that the center icon is for your yard. Clicking here will close the menu and take you back to looking at the kitties and junk you’ve got strewn about your place.
Airplane sardine? I had no idea what this was, but given that your currency is in fish, I assumed it had to do with that. This menu option shows you what currency you’ve earned for the cats that have visited since the last time you used the app.
Gear: Classic icon for settings.
News: One of the few language affordances in this app, although not so much “news” as a promotional spot for their other apps, including a ninja panda game.
Boxy menu grid: My assumption was just more menu options, and I wasn’t wrong. This just houses a sort of FAQ section and a messages section, both of which are useless to non-Japanese speakers, unfortunately.
A few things in your yard are clickable as well, although this is slightly less obvious than the other affordances. You cannot seem to click on any of your toys, but you can click on the food to refill it, and click on the cats themselves to learn about them and see if it’s a new cat or a returning moocher.
I have a lot of returning moochers.
How do I know which cartoony cats have been in my yard already?
You are forgiven when using trial and error
I can tell the cat above has visited me already because I’ve already captured a picture of him from his last visit and added it to his ID card (below). If a new cat were to appear, the picture box would show a small, non-descript kitty face, but if I click on the larger, white kitty face, I would be able to choose from photos I’ve taken of the cat and select my favorite picture for the card.
If that sounds a bit technical, it actually isn’t, but it did take me a while to learn. When you open the option to choose your cat’s picture, if you haven’t taken any photos, this area is just…empty.
But! Once you do take photos (remember the obvious camera icon earlier?), you don’t need to worry about which photos are of which cat: The app will sort these for you!
I made the initial mistake of clicking on one of the buttons that becomes available once you have some photos to choose from: Delete. You are ‘punished’ for this action in the sense that you lose your photo, but this is easily overcome as a) the cats return frequently for more photo ops, and b) when they are around, they stay in one spot doing the same animation, so grabbing a new photo is easy.
Deleting pictures is about the worst thing that can happen in this game. As you poke around and learn how the UI works, you learn that it takes two taps to complete an action, effectively ensuring that you indeed want to perform the action and giving you a chance to cancel.
The low risk of failure in this app, and the ease of backing away from an action, makes the user feel relaxed and more open to exploring — and thus learning — the UI and how the game works.
There is nothing frustrating about navigating around or learning how to complete certain actions in this app. You have the opportunity to seamlessly back away from any action that confuses you or that you don’t want to do, or experimenting with an action that you are unsure about will simply show you what you can do, without any negative or uncomfortable consequences.
Can you imagine your banking app being as easy and stress-free to explore?
Obvious affordances, relaxing trial-and-error…what else makes this unreadable app so understandable?
“The Three UX Laws” in action
Another gem I’ve collected in my Medium bookmarks is The Three UX Laws. I recommend having a read of that for yourself, but in summation, the laws are:
- Avoid choice overload: Keep options few and easy to digest.
- Large targets (or touch surfaces) are harder to miss.
- Avoid memory overload: Keep mental items to retain at 7 or fewer.
As my menu break-down earlier shows, there’s not a whole lot to do in this app that can overwhelm you. Options like settings, news, and messages/FAQ will be ignored the vast majority of the time, leaving you with only a few very basic action concepts to grasp.
Even within the main options, the further choices you can make are very simplified. Take the camera option, for example: Once you click on it, a classic camera crosshairs graphic appears over whatever cats are present, letting you know immediately that you can click and take a picture of them. When in camera mode, you can see two new options next to the “X” close button. One shows a cat (take pictures of cats!) the other shows a scene (take a picture of the whole scene!). Very easy to understand, and even easier to navigate around.
Whatever actions you perform, your options are obvious and easy to click. To make sure your cats have food, for example, involves clicking the food bowl in the yard, which will show you graphically how full it is. You can fill it (gold option) or exit (gray option). The buttons and the fill-line bar are large and easy to understand.
Understanding the “fill bowl” or “cancel” buttons isn’t actually something I figured out myself, though. I watched another user do this. Which brings me to how I discovered this app in the first place.
Word-of-mouth is an efficient and perfectly acceptable form of user onboarding
My boyfriend, someone heavily involved in the mobile gaming scene, is the one who told me about this app. After I downloaded it, he explained the basic premise: Get cats to visit you.
Without that first nudge to put an objective in mind, I probably would have abandoned the app early on. It takes time (and food, and toys…) to attract the cats, so without understanding the premise, you’d end up thinking you downloaded a Japanese app to look at an empty backyard.
The novelty and slight unpredictability of this app makes you want to talk about it.
Sure enough, after playing with it for a bit, I was quick to make a Facebook post. To my surprise, a number of my friends already had this app as well and were eager to rave about it. This blew up even more once I announced that I attracted the elusive ‘pirate cat’ to my yard:
And just like that, I learned about another new feature.
Notice how conversational this exchange is, and how easy it is to explain the feature. I didn’t need to dig through pages and pages in a forum, find a top-ranked post, and then follow some lengthy step-by-step. In the process of raving about one feature I enjoyed, an organic conversation lead to the discovery of another feature I was unaware of. On top of this, the new feature was simple enough that a friend could explain it in one sentence.
I mention pages of forums and lengthy step-by-steps because I have seen these as the usual approaches to customer-driven self-help, and they are often more infuriating than helpful. Some companies will identify the most talked-about trouble points and adjust their product to make it easier to use. However, I have also seen that instead of simplifying pain points, a company will just create a FAQ out of top-ranked forum posts, or keep linking the same posts when the same questions keep arising. This ends up leaving customers feeling helpless and ignored, and the conversation dies.
The mark of a good product experience
Obviously, not every app, SaaS or other product can be compared to a silly kitty game. But all the same, I think a non-English silly kitty game has a lot to teach us about good UI:
- Make your affordances obvious enough that language isn’t needed (or use language as little as possible)
- Create an experience where trial-and-error is inviting, forgiving, and easy to back away from
- Keep options simple, few, and easy to select
- Simple features lend to simple and enjoyable customer conversations, which lend to easy customer learning and increased word-of-mouth marketing
Think of an app you use or maybe even one you’ve created yourself. Do you think people would be able to use this app if all the language points were removed? Why or why not?
A language-free experience isn’t ideal for every product, but thinking about how a user can learn about and accomplish a task without the use of language is definitely food for thought when designing user experiences.
Thank you for reading this article! If you enjoyed it, please comment and share on Twitter! Also check out my other article on life goals and motivation: You’ll Get There Eventually.
Post-publish Edits:
- While the title implies this article is only about UI, obviously the UX of the app is addressed as well. While separate concepts, UI and UX have obvious influences on each other, and hopefully this article illustrates how a good UX is empowered by a good UI.
