Basic navigation for smart feature phones
By Omega Feng, UX Designer at KaiOS
In the smartphone world, we use finger touch to navigate. This creates an unexpected problem, however: as screens get bigger and bigger, the phone’s frames becomes narrower and, we can’t enjoy one-handed navigation anymore like we did in the good old days.
In the smart feature phone world of KaiOS, we don’t face this problem because we use physical keys for navigation: the directional pad (D-pad), OK, and BACK buttons. These six keys are usually located in a proportionately-sized area where our thumbs can easily reach them while holding the phone, which is perfect for one-handed navigation.
The downside of using keys instead of our fingers is that we need a highlight to indicate the current focus state; basically, where are we and how do we navigate on the screen? The answer is the D-pad. We can do hierarchical navigation by pressing the OK and BACK keys to enter or leave a page.
Basic Navigation 1: List View
A list view typically contains items listed vertically where we can press the UP and DOWN keys to navigate. Since a list view might accommodate many items, continuous key actions — the events that happen after a button has been pressed — and a list view loop are introduced to improve the experience.
When we press and hold one of the D-pad keys, key events are dispatched continuously, from slow to fast. This feature allows us to scroll a list without pressing the D-pad numerous times. We can start slow to target accuracy, then speed up for efficiency.
At the end of a list, pressing DOWN will navigate to the top. This list view loop also applies when you press UP at the beginning of the list.
There is one catch to this approach: the combination of continuous key events and list view loop may confuse a user into thinking he’s still scrolling the list when in reality he’s stuck in an endless loop. To solve this, continuous key events get terminated when reaching the end of a list. Users then need to press DOWN to re-engage the list view loop. The same rule applies vice versa.
Basic Navigation 2: Grid View
A grid view displays items in a two-dimensional grid, where we can press the D-pad keys to navigate. We’ve introduced Z-navigation and no-row-skipping to improve this experience.
We usually have to use four D-pad keys to navigate a grid view since it has only two dimensions. With Z-navigation, pressing the RIGHT key at item three brings you to item four instead of item one. This allows users to navigate through all items by using only the LEFT and RIGHT keys.
When you press the DOWN key at item nine, it goes to 11 instead of item three. Similarly, pressing the UP key at item three brings you to item 11 instead of item nine. No-row-skipping helps users not to miss the last row which is especially useful when that row falls outside of the screen.
Basic Navigation 3: Tab View
When an app has a lot of content that needs to be organized by grouping, tab view is the appropriate solution.
The traditional way to implement tab view navigation is to move the highlight to the tab row first, then pressing the LEFT or RIGHT key to switch tabs. If the highlight is over an item far from the tab row, it takes some time to move the highlight all the way up to the right tab row. This makes for a terrible user experience, especially on a non-touch feature phone with a small screen.
To improve the experience, we’ve designed a simplified tab view navigation where you can press the LEFT or RIGHT keys to switch tabs no matter where the highlight is. This provides quick tab changes because the need to first move up or down has been removed. The compromise here is that the content of each tab cannot use the LEFT or RIGHT keys for control or navigation. For this reason, our solution can’t support certain views and functionalities under tab view, for example, a grid view.
Working in a world without touch
Navigation is a fundamental topic when designing an operating system. As users cannot interact with the screen directly in a non-touch OS, we face unique design challenges all the time. We’ve had to identify and properly tackle many new pain points that don’t exist on a touch-based smartphone. The above are some of the lessons we’ve learned, and we’ll keep sharing more of our thoughts and insights as we progress further on this exciting journey!
Please feel welcome to leave your comments below and don’t forget to give me a clap if you enjoyed the article.
Want to get the latest updates of KaiOS? Don’t forget to follow our Twitter, Linkedin, and Facebook.
