How Seoul reminded me of a few design basics

2023/06/18 #uiux

Seoul is great...

I recently went on a trip to Seoul. It was my first time in South Korea and to get this out of the way right at the start: It was great! But I’m not writing this post to tell you about my trip and all of the amazing things I saw, ate and experienced during my stay (just know that I can really recommend a trip to Seoul if you want to have a great time!!). Instead, I want to share one small annoyance I had to deal with during the whole thing.

The thing is, I am used to relying on Google Maps whenever I am exploring a new place. To me it’s just the best tool to plan what I want to see. I simply mark everything like sightseeing spots or cafes and restaurants that I might want to check out before I go on the trip and then during my trip I normally use Google Maps to navigate to all of those marked places. Unfortunately however, Google Maps kind of sucks in South Korea. What I mean by that is that in South Korea, Google Maps can’t actually tell you turn by turn directions when walking around (you know, the thing you want to do as a tourist).

...but Google Maps in Seoul isn't!

From what I have read online this is due to South Korea’s strict laws concerning mapping services. But whatever the reason might be, I had to get around this somehow. I ended up following the conventional wisdom online and downloaded KakaoMap. KakaoMap is basically South Korea's Google Maps replacement (or at least one of them).

While this solved my issue of not being able to get walking directions, it unfortunately created another one: having to deal with KakaoMap's 'interesting' UX design choices. To cut a long story short, I got more and more annoyed with KakaoMaps over the course of the trip and in order to channel all of that annoyance into something productive I decided to share my thoughts here by showing you four infuriating things I discovered (in just one small part of the app). Enjoy!

Lesson 1: Use signifiers...

It took me multiple tries myself, even though there are actually three ways to accomplish this! First, you could tap the white horizontal bar below the blue top bar. Second, you could tap the little right-pointing arrow at the very bottom left of the screen. Lastly, you could slide your finger from the very left of the screen to the right and “expand” the left sidebar into a more detailed list.

The reason this is so hard is because this screen uses no signifiers. Signifiers are additional pieces of information that support an affordance ('signaling' to the user what they can do). From the top of my head I can think of three ways to improve this screen simply by adding signifiers:

Adding some text (for example 'Details') to the white horizontal bar
Moving the right-pointing arrow to a more visible spot next to the top of the sidebar
Adding a drag indicator to the left sidebar.

There, I fixed that problem for for you. You're welcome!

Lesson 2: …but use them correctly

The even more infuriating thing about the lack of signifiers in the previous screen is that the app actually shows you a little drag indicator on the very right of the screen when you manage to get to the more detailed list. Why doesn't it just use that consistently in every place something can be dragged?

Of course there are also several things wrong with its use here. First of all, the indicator is on top of the map instead of on top of the expandable bar. This makes it look like the map is the thing that you can drag to the left instead of the extendable sidebar. This is already very strange but the second problem is even more infuriating: When dragging from left to right to minimize the sidebar the indicator does not move but instead stays in place and just fades away. This is so unintuitive it hurts my brain a little bit to watch. So of course I'm making you watch it too (focus at the middle of the screen at the very right for some mind-bending drag indicator action):

Lesson 3: Animations should reduce cognitive load

Animations in software can help the user experience by simulating the experience of interacting with a physical object in real life. This makes for an easier, more natural experience for the user, and reduces cognitive load

Unfortunately, the way KakaoMap uses animation here actually increases confusion. Why should a drag from left to right lead to the sidebar sliding in the opposite direction and only then revealing another sheet that then follows the direction of my finger? This strange use of animation makes it so that even after multiple uses of the navigation feature I still forgot that I could drag on the navigation bar from left to right.

Lesson 4: Respect the guidelines of the platform you are designing for

One last thing: The reason I did not notice the arrow at the bottom left of the screen I showed you earlier is that it is located in a highly unusual spot. No other app I have used recently has put any buttons directly in the lower corners of the screen and there is a very good reason for it: Apples design guidelines tell you not to do that because it is interfering with the home indicator and is hard to reach! Sigh...

Some consolation?

If all of this seems like I am being a bit too harsh on KakaoMap please rest assured that I have my fair amount of gripes about GoogleMaps’s way of doing things too and I plan to write about those in a future post. Until then, I hope you have better luck with finding a Google Maps replacement for any future trips to South Korea.