May 4, 2020

5 min read

Small screen, large view: Why and how we redesigned the browser interface

Picture materials collected from: People vector by freepik , Flower vector by pikisuperstar, Education vector by stories , and House vector by stories .

By Percy Huang, UX Designer at KaiOS

This year, we released a significant update to the KaiOS Internet browser app: We created more space for content to be displayed on screens of smart feature phones.

In this article, we’ll explain how we did this and the logic behind our design decisions.

The Problem With Small Screens

Most designers agree on two things. The first is that content is the most important element of the internet browsing experience. Most of what people do on the Internet — read articles, watch videos, take classes, Google search — has to do with content. The other is that screen size affects people’s ability to enjoy the content they’re viewing. The bigger the screen, the better the viewing experience.

This presents a problem for smart feature phone users (and the people who design them). Smart feature phones are affordable because their screens are small. Designers can’t change that — not without making costs go up — but we can optimize readability and improve the user experience on small screens. That’s exactly what we at KaiOS set out to do.

In Pursuit of Simplicity

We started by going back to the original design to identify the essential items of the user interface. We then tweaked those items to provide a more minimalistic — and better — viewing experience. We will discuss the updates to each item below.

1. Header

The browsing experience starts with the header. The header tells users where they are in the complex universe that is the world wide web.

The decision to keep it was, of course, a no-brainer. Our challenge, then, was to figure out how to make the header smaller without compromising clarity. Here’s what we did:

Reduced the height of the header bar. As a non-interactive item, the title of a website only needs a small amount of fixed space, so we made the bar shorter.
Merged the header and the status bars. By applying the same background color to the status and the header bars, we reduced color complexity and size.

2. Soft Key bar

The original soft key bar consists of a left key, a central key, and a right key. Text in the screen footer indicates the function of each one, as follows:

Left key (Home) — Opens the landing page.
Central key (Select) — Selects a target.
Right key (Options) — Opens the Options Menu.

Physical keys and their corresponding soft keys.

We opted to get rid of the central key because its function was the most straightforward. Clicking to select a target is the most prominent and intuitive action in web browsing.

We also replaced the text of the left and right soft keys with icons, as shown below. This created more space.

Icons representing the function of each soft key.

The icons change to meet users’ needs: when watching a video, for example, a user will see the Close and Volume icons as opposed to the Home and Options icons.

As a final touch, we made the soft key bar transparent. This extended the viewable content to the bottom of the screen, which would have helped — except for those floating buttons in the corners.

The view is extended to the bottom of the screen.

We knew that these icons had to give way for content. We arrived at the design demonstrated in the gif below, where icons disappear whenever the cursor approaches. (The same happens when users are watching videos in full-screen mode.)

The cursor will not overlap the software key bar.

The software key bar will automatically disappear when playing a full-screen video. For the full video please visit: https://www.youtube.com/watch?v=Ff2_s1BTH_o

3. Shortcut Key Tips Menu

Aside from the soft key bar, what users see when they visit any website is the shortcut key tips menu.

Shortcuts enable the use of physical keys for performing quick actions such as zooming in, going to the top, and changing to scroll mode. (For more on shortcut keys, check out this blog post.)

In the original design, the screen displayed all the shortcut keys each time a web page loaded. As smart feature phones became more powerful, the number of shortcut key features increased, and the Shortcut Key Tips menu became a space-eating monster.

In the redesign, we opted to create a second-level menu to make room for more keys and to indicate their functions more clearly. The result was a cleaner, more instructive interface.

The new design: press [ # ] key to open the shortcut key menu.

We also made the shortcut key tips menu optional. Much like a cheat sheet, the shortcut key tips menu becomes obsolete when users memorize the function of each key. In the redesign, they can hide these tips when they no longer need them.