Skip to main content

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!




Comments

  1. Hey Judit,
    Thomas here, he main interaction designer behind Kirigami and author of the Kirigami Human Interface Guidelines. I'm happy that you like our work on Kirigami and are going to use it for Marble Maps!
    Before starting to design your Kirigami-based UI, I'd recommend reading the HIG ( https://community.kde.org/KDE_Visual_Design_Group/KirigamiHIG ) to see how the components were intended to be used together.
    You are also more than welcome to join the Kirigami Telegram group ( https://t.me/joinchat/AAAAAD6l7b5u8dG8upyFFw ) to get input and feedback on design as well as technical questions.
    Looking frward to a Kirigami-based Marble Maps!
    Cheers,
    Thomas

    ReplyDelete

Post a Comment

Popular posts from this blog

My experiences with Summer of Code 2017

How quickly the summer ran away, in a wild mix of fun, frustration, development, and success! It seems like just yesterday that I received news of working with Marble in the summer, yet now September quickly approaches, and it’s time to look back on all our experiences this summer. This year hasn’t been my first foray into contributing open-source projects, I’ve had the pleasure of working with Marble under last year as well. However this year has come with it’s own set of challenges and I’m proud to have taken part in such a great experience, built up by fantastic mentors and a lovely community who helped me along the way. But let’s get to the recap, this year's tale, from beginning to end, how the summer went! This years project was focused on Marbles Android version, Marble Maps, and my task was redesigning the UI, adding features and making sure it's all up to Material Design standards! The summer began with my work on Marbles historical map viewing app, Behaim Globe. 
The…

Compare and Contrast - Marble Maps and other Map applications

Still knee-deep in exam territory but our dreams fly high ahead! Let's take a moment to compare Marble Maps to some of the other available Android Map applications. This will help us find places that need some polish, and features that we need to add.

So without further ado, Google Maps - Maps.Me - Marble Maps
Google Maps Routes have a drag & drop system for managing the order of the locations.A menu has frequently used options such as a quick button for reversing the order, as well as route options. Adding a stop can be done with through the menu, not just by clicking on the map.
The side bar has several options, including Tips and Tricks under which a contribution option can be found, as well as a Send feedback option which is great for user made reports. Help menu offers a forum of problems with most frequent ones at the top. Maps.Me Has an Introduction that showcases some of the main features. Uses Empty States pattern when showing empty Bookmark Sets. Offers already existing emp…