Challenges of Designing a Goban UI for Mobile
2025-07-07 · 4 min read
About a month ago, I wrote the post “Go (Game) Mobile App Idea for Learning & Practice”, , where I discussed an idea for a new mobile app for the game of Go. Since then, I have researched and experimented with potential implementation methods. In this post, I want to share the design challenges I have encountered and my proposed solutions. I have also created a demo to illustrate this approach.
Design Challenges
When it comes to designing a Go board (a.k.a. Goban) for mobile phones, my main goal is to allow players to read the board and place stones more accurately and comfortably. For a 9x9 board, I believe the experience is comfortable for most players on the majority of modern phones, including smaller models like the iPhone SE 3. This is because the size of a 9x9 board is comparable to that of a chessboard, which has already been thoroughly tested and successfully implemented by apps such as chess.com.
On a mobile phone, a Goban can be comfortably shown and interacted with just like a chess board due to similar sizes.
While a 9x9 Goban fits well on a mobile phone screen, the most common board size for Go is actually 19x19, with 13x13 also being a popular alternative. Both 13x13 and 19x19 boards are significantly larger than 9x9, and although a 9x9 Goban “just fits” on a mobile device, displaying the full 13x13 or 19x19 boards makes the individual squares feel too small for comfortable play.
If you are using a phone, you can click the images below to compare how the three Goban sizes look on your phone screen.
9x9 Goban
13x13 Goban
19x19 Goban
The major challenge of displaying 13x13 and 19x19 Gobans on a mobile phone screen is input accuracy. The intersections on the board become smaller due to the larger board size. This causes more difficulty for users to place a stone on the correct intersection with a single touch. To address this issue, existing apps either use a cursor mechanism, or a zoom mechanism. Whereas the former allows players to slide their finger over the board to adjust where they are placing the stone, the latter lets users zoom in on a part of the board before placing the stone.
Placing a stone in cursor mode (wireframe)
Zoomed-in view in zoom mode (wireframe)
Personally, I prefer the cursor mechanism, as I find it easier and quicker to place a stone. That said, I think zooming can be preferable for some people, especially in situations where they need to focus on a particular area of the board where stones have already been placed.
What’s more, both mechanisms can be enabled simultaneously, as they can complement each other. My thought is that players would be in favor of the cursor mechanism, so it should be enabled by default. As for the zoom feature, instead of hiding it behind a settings menu, I think players should be able to quickly toggle it during the game.
Using both cursor and zoom modes (wireframe)
Goban Demo
I created this Goban demo to demonstrate my approach for integrating cursor and zoom mechanisms to enhance user experience. The demo lets you select the board size, place stones, and toggle between cursor and zoom modes for greater flexibility. For those who are interested, I recommend trying it on both desktop and mobile devices to experience how the interface adapts to different platforms. Note that this demo focuses solely on the interface and doesn’t implement the rules of Go.
How to Use the Demo
Zooming
To zoom in, double tap on the board. To zoom out, double tap on the board again.
For computer users, you can also use a right click to zoom in and out.
Moving
You can move the board while zoomed in.
When using cursor mode, you can move the board by dragging with two fingers on the board. On a computer, you can move the board by dragging with Shift + mouse.
When not using cursor mode, you can simply move the board by dragging it with one finger or mouse.
