HIG Iteration - Mobile UI wishlist
There have been recurring discussions about how to improve the UI/UX for our mobile applications, so it's worth discussing improvements to the HIG, and how we want users to navigate and interact with mobile apps.
Associated MRs:
-
Bottom navbar: frameworks/kirigami!376 (merged) -
Bottom navbar HIG: documentation/develop-kde-org!147 (merged)
Bottom navbar
Currently, the only way to switch "horizontally" between top-level pages is through the sidebar. However, in many cases we have that apps can make do with 2-4ish top-level pages and so the sidebar becomes quite empty. Sidebars also are a more annoying way for users to interact with, as it requires opening the sidebar -> stretching to reach the desired tab. These cases can be filled with a bottom navbar, which is already used in kclock and plasma-dialer.
Devin: I've iterated on that design, and an planning on submitting an MR to Kirigami with it soon.
Examples (kasts, koko):
Rethinking page actions
There have been many complaints about the current action system.
We currently have that our 3 main actions (main, left, right) are floating at the bottom of the page, with all other actions being put into the right sidebar (bottom aligned). The initial design was meant to be similar to BB10, as it places actions within a reachable distance for your thumb near the bottom of the page.
However:
- The floating page handles and action buttons cover content on the page
- Labels are not on the main actions (only icons) and so they don't provide indication of what they do unless the icon is obvious
- There have been complaints about their appearance
Some possible solutions:
- Add actions to the top right of the screen, with an "..." overflow button (similar to Android & iOS)
- Create a bottom action bar component (similar to https://docs.microsoft.com/en-us/windows/apps/design/controls/command-bar)
This needs more discussion.