By Omega Feng, UX Designer at KaiOS
All apps are built from common UI components: small pieces of design and functionality that together create a graphical user interface and provide a consistent experience across different apps. These features dictate the ease by which users can navigate their devices, and can be tailored to better suit different applications and hardware.
When designing for smart feature phones, the approach to UI is very different from that of smartphones — requiring special attention to screen size, navigational differences, and ease of use. For example, smart feature phones use a keypad for navigation instead of a touch screen, so buttons need to be arranged in a vertical list to minimize the number of necessary keypresses.
KaiOS-powered smart feature phones incorporate the following UI elements to create a smooth, consistent UX.
A header is a banner fixed to the top of the screen. A header tells the user the app name or the purpose of the current screen.
A tab appears below the header and separates grouped content while providing the ability to quickly switch between different sections of an app by tapping Left or Right on the D-pad.
Software keys appear at the bottom of the screen and correspond to the center, right, and left hardware keys. Each key may or may not appear depending on the availability of features.
In certain conditions, an icon for the center key is used if it holds universal recognition; such is the case with play or pause buttons.
A list typically displays information, toggles controls, or navigates to a new screen.
A separator describes a subsection of content. Separators often appear between list or grid items, as they help separate different groups of content.
Controls — Checkboxes and Radio Buttons
Checkboxes allow users to select multiple options from a set. Radio buttons provide the ability to select one option from a set.
A progress element represents how long the current operation will take, or appears as indeterminate when the completion status cannot be determined.
A slider is an extension of progress that adds a draggable thumb. On a non-touch device, the user can press the Right and Left D-pad keys to set a new value for a given control, such as volume or brightness.
A button performs an explicit action. It can include a title or be combined with an icon.
An input field is a data entry field and can be as simple as a text-only entry field in a list, or a search input in the header. For a multi-line input field, the center key serves as Enter for a new line.
An option menu provides a list of choices on a pop-up component which may appear with controls such as checkboxes or radio buttons. It allows users to perform actions on objects without having to leave their current screen.
A value selector provides an easy way to select single or multiple values from a pre-determined set. A date value selector or a time value selector can be used for specific scenarios, such as birthdays or start time settings.
Dialog gives the user important information, ask the user to take/confirm an action, or allow the user to make a choice or enter information.
A toast appears at the top of the screen and provides important information or alerts the user to a system event. It can’t be interacted with and will automatically time out, depending on the length of the content.
A notice appears at the top of the screen like a toast, but with a different layout. A notice has an icon, primary text, and secondary text. After a notice disappears from the top of the screen, users can still access it from the notice panel.
UI components are the fundamental building blocks for every app, and becoming familiar with them enables designers to create apps with a consistent user experience.
We hope this article has helped you understand more about the KaiOS UX.
Leave a clap and share it if you like the article, and leave a comment if you have a question. We’d love to hear your feedback so we can continue to improve our UX.