Hello Planet readers!
Some of you already know me (as Alex L.) for my contributions in the Visual Design Group (VDG). Now it’s time for me to blog a little about my work in KDE, but first of all I want to use this post to introduce myself to you:
I’m an Italian student (Information Engineering), a FOSS enthusiast and GNU/Linux user.
I used KDE software for years, I literally love Plasma, Dolphin and many other KDE apps/projects. I have to thank a lot the KDE Community not only for the great software it provide, but also for the big amount of things I learned, for the improvements in my work-flow (thanks of the KDE’s highly configurable features-rich software) and for kindness when helping me! A lot of thanks also to the great VDG guys, all of them are very kind!
Currently I’m working on Human Interface Guidelines (HIG) for KDE mobile apps together with Thomas, Andrea and Heiko.
I have a lot of things to say, so let’s start!
What are KDE mobile apps? Thanks to Qt & QML our devs are able to deploy apps for many mobile platform: Ubuntu Touch, Sailfish OS, obviously Plasma Mobile (all of these use QML natively) and additionally Android! We will define mobile-oriented HIG so our apps can integrate well in all of these platform and obviously we will introduce our innovations in mobile world! Thomas already blog about this (part 1 & part 2), and now I’m going to update you about recent news; the subjects of our work are mainly three:
1. views-by-columns approach for browsing contents;
2. global drawer + context drawer;
3. the KDE FAB or Floating Action Button according to KDE 😉 (the FAB is that colored button in the right-bottom corner in Android’s apps, introduced by Material Design)
The views-by-columns approach consist into translating hierarchical contents to columns and making user able to switch between columns/pages/views by swiping horizontally (avoiding the need of a back button and I will dedicate a post about this [edit: done]). We are very proud of this approach because it’s very powerful: when you reply to an e-mail for example, you can swipe back to the previous view and then swiping forward to the editing view, without losing contents already written. More details will come to the working progress wiki page, so be quite in questions about this ;-).
The global and the context drawers are two drawers the user can show by swiping from the right and left edges of the screen (by default global by the left, as in Android and the context by the right). The global drawer will be available in any views of the app and will provide actions and options that have sense everywhere in the app. Instead the context drawer change its contents according to the current view and according to eventually selected items; you can consider it the mobile counterpart of the right mouse click.
The FAB in KDE apps will not be simply an action button: since there aren’t an hamburger menu like the Android one to show the global drawer and a button for the context drawer, the user could find two issues:
In the first uses of the app, the user could don’t understand that there are two drawers “hidden” in the edges of the screen. And also when he will know the could be there, he don’t know which drawers are available in each view, so he could be frustrated trying to show a drawer that isn’t available;
- Since we use the horizontal swipes for navigation, the user need to swipe from the edges of the screen to show a drawer, but it could be a little hard, especially if the user need to open a drawer very quickly and he isn’t patient.
So at this point a bulb literally lighted in my head and I suggested to use the FAB to resolve this: the FAB can be moved to left/right to show respectively the context and the global drawers and it can have arrow-like indicators that suggest to the user which drawers are available. You can see a draft of it in the following image:
Again, I will add details about all of this stuff in the HIG wiki page.
What about implementation of these components? Marco works a lot to make prototypes and recently he met Sebastian and together they used them in Subsurface Mobile app for Android, so you are able to test this preview of the components by installing this apk!! 😀
Wait wait, the cool stuff don’t end here: since many devs ask to me for mock-ups, I decided to put all the mock-up stuff into an SVG file, making an innovative mock-up kit (here a preview): when you will open it in Inkscape you will see a poor kit, in fact you need to open the layers panel to see a lot of other hidden layers. Play with them making them visible/hidden, edit the texts and replace the icons, so you will be able to quickly do mock-ups for your app using our components. When we will draft more components, I will update the mock-up kit, so you will be able to see news and provide feedback to us during the brainstorm process 🙂
Thanks for the attention, see you around!