Moving forward! - Dialing phones, and designs featuring Kirigami

Hello everyone, it's been all-too-long!
I am proud to announce the end of the semester! Exams are finally all done, but that only means the real fun can start. And so many things to come and do!

I'm also happy to announce one of the first new features! Marble Maps now supports in-app phone calls! If you're browsing the map, and come across a nice looking shop, you can easily access their phone number, and give them a call right there!
This task has been very useful to establish a lot of the inner workings, and also gave insight to a lot of UI elements that could be structured differently.

But with that question of layouts and design decisions, came the question of what tools to use to achieve them. On that note:

Behaim Globe with Kirigami

Kirigami is a QtQuick based components set that brings a lot of useful reusable components to QtQuick UI's. Among these we're easy to create menus, unit based scaling, drawers and all sorts of navigation options. It was a lot of fun exploring all these pieces we could fit together to create a user-friendly interface. As a way of getting to know Kirigami, I was tasked with giving the Behaim Globe app a small redesign using these components.
The info bar now comes in an overlay form (with a small black tint), which makes it clear that it's the focus point (and doesn't compete for space with the globe), and should be closed for easier navigation on the globe. It is also now flickable, which allows the user to easily close it, even with one hand, without having to find the exact button. The button to open the menu previously moved from the top left to the bottom right depending on the orientation of the screen, is now fixed at the top left to avoid confusion.

The Behaim Globe app.

The redesigned app.

Kirigami has a lot of interesting solutions and components, one of these being the OverlayDrawer, which I used to replace the old bottom menu. Below I have highlighted some other features that Kirigami offers, that may prove to be very useful.

Button styles, notifications, and menu variations, such as the OverlayDrawer.

Progression markers, and swipe-revealed secondary actions. Also note the central "Main Action" button, as another great way of guiding the user to the main purpose of the page.

Side menu, with checkable items, submenus; context-based actions that are relevant to the current page.

Kirigami provides several menu solutions, such as context-based actions, which the Kirigami Gallery app showcases better than the few examples I have provided ever could.

Pros of using Kirigami

• Navigational options are readily available and easy to use, including actions, context-based menus, drawers and sidebars
• Units make scaling more intuitive
• Several components that can be used "out-of-the-box", such as headered lists with different varieties on how the header stays or moves out of view, secondary actions on swiping, progression meters for both defined, and undefined amounts of time

Cons 

• Since the built Kirigami files need to be included in the app, this requires another step to be added to the compilation process (namely installing Kirigami as detailed here, to the same folder as the build of our app). 

Overall this experience has led me to have a strong support of Kirigami, and I think it would be a very useful tool to use in crafting an even better Marble Maps. Stay tuned to hopefully see how some of these tools come together in action! See you on the next post!