Mobile devices interface overhaul concepts (Tablet/Smartphone)

[Toki]

Note: I’m not a developer yet, so these are just concept ideas I want to show you and how they might work.

Lately, I’ve been interested in the level of customization Krita offers when creating workspaces. I’m a desktop user who primarily uses Krita, but in my free time, I took the liberty of conceptualizing a more intuitive and user-friendly mobile version for mobile users.

What is the problem?

• The first issue a mobile user has is the interface, it requires a medium to large (Tablets) screen to be used with ease. Vertical or small display devices cannot use krita in a comfortable way; limiting program use to users of specific devices.
• Some dockers can use way too much screen space, reducing canvas visibility by showing options that you don’t need at the moment or don’t get used at all; especially in smartphones.
• Because of a lack of a keyboard you cannot use shortcuts for your tools or actions.
• The displayed tools are too small to read or too small to quickly access to them at any moment, breaking the workflow by forcing the user to search the tool or the action

Possible solutions

1. What I see most mobile users do is remove all dockers except for layers, color selector, brush preset selector and tool box, mess with the settings and tool bars to make more space for the canvas. This may work but it needs too much user input to set up, can be confusing and frustrating, and is not really a solution for small screen users.
2. Some others think krita needs to rebuild the program interface by copying or imitating other popular apps, interfaces and workflows like procreate, but I think that is not the direction the developers of krita want to go.

What i propose

I think that instead of rewriting what krita already has, we can build on top of it dedicated tools without erasing the already existing dockers or tools, so i propose dedicated dockers for mobile users

How can this be helpful?

Instead of erasing or rebuilding already existing dockers, creating new dedicated ones could benefit the development and the users. The development can be focused on creating these tools without having to adapt all dockers or tools to a mobile environment, and the already existing users can choose if they want to use the PC dockers or the mobile friendly dockers.

New additions for mobile users

1. Tools & actions docker,
2. compact layer docker,
3. modifier docker
4. Button modes (only for the T&A docker and the modifier docker)
5. New tools: Rearrange docker tool
6. Optional extras: New workspace preset for mobile users, new toolbar configuration for mobile users.

Tools & actions docker

Provides users with easy access to Krita’s features with minimal space usage

Features:

1. Tools and action groups
2. Display modes: List or grid, Titles or only icons
3. Krita button to access all krita functions.
4. Easy color selector for background or foreground color.

Button modes (only for the T&A docker and the modifier docker)

A way to organize buttons in the T&A docker, allowing the user to have custom shortcuts by using one finger gestures.

How we can customize the T&A docker:

Tap the settings button to access the button manager where you cand customize the button display, add or delete buttons, select actions or action folders for your custom buttons.

Compact layer docker

Alternative to main layer docker for small screens.
Features:

1. Compact vertical view of layers
2. buttons with the most common quick actions
3. large button to easily add a new layers

Modifiers docker

It shares a similar system to the button mode system.. Allow users to use modifier buttons as a replacement for a keyboard mod keys (Ctrl, shift, alt), useful for tablet users. Buttons can be used as:

1. Hold to activate: the action will be activated while the user keep pressing the modifier button
2. Toggle hold: the user tap one time and the modifier remains active, tap again an the modifier deactivates.

Move docker (action)

By default all dockers will be lock in place; use this action to activate the edit mode to move an reorganize your workspace. Useful to avoid misstouching and moving your dockers by mistake.

Some more mockups i made:

That’s all. There might be some things that can’t be implemented in Krita right now, but I think adding similar tools would make the mobile experience much more enjoyable for tablet users and help introduce smartphone users to Krita.

Sorry if there are any spelling mistakes, but English isn’t my native language. I might have left some things out, but I’ve been working on these ideas for days and I’m really tired of creating these concepts.

[sooz]

Hi @Toki

Thanks for taking to time to do this.

I’m tagging @drawpile as they are engaged in the mobile version.

[BeARToys]

Just FYI

Mobile ui is in development. Maybe you could get in contact.

And there is development for Docker buttons on the toolbar

You could use that branch and use it as starting point.

Have you tried the nightly build ? There you can display dockers next to the popup-palette.

[Drawpile]

There are also some interesting ideas in this proposal. Having a dock to press modifier keys could definitely be useful, since there’s a number of tools that need it. Not just for mobile, also just in general, since not everyone has a workspace where they can put both a tablet and a keyboard. Nor does everyone have two functional hands.

A dedicated arrange mode for docks makes sense. Also maybe even for desktop, most of the time I drag a dock it’s definitely accidental.

Having some kind of toolbar with combined buttons is also useful, although I don’t know how discoverable the proposed multi/long tap method would be. Qt actually already provides combined toolbar buttons that you can press and hold to get a menu, but nobody ever seems to make use of that feature due to how incomprehensible it is.

Other things don’t match up with feedback I have gotten from artists on small-screen devices. They tend to want to be able to fold away docks and toolbars altogether. In that regard the attempt of making a compact layers dock is misguided, since the full-sized layers dock works just fine on a phone if it doesn’t need to share space with anything else. That kind of fold-out UI exists in Drawpile, viewable e.g. in the web version by making your browser window very narrow, and is also the direction that the aforementioned dedicated mobile UI is going in.

When users do ask for persistently-visible things, it’s always in the form of floating widgets, not docks or toolbars. For example some kind of circle they could put on their screen somewhere and then drag over to change their brush size. Or a quick toggle button to switch between brushes in one tap.

[Toki]

I had in mind that the dockers could be hidden with show/hide dockers action in the toolbar, to easily clear your view of the canvas. I got curious and decided to check out Drawpile i didn´t heard about it.

The Drawpile mobile workspace looks good, and I also check out the mockups made by Timothée Giet, they look great, maybe I could make some other concepts based in the Drawpile UI; there are some cool features in drawpile that i wish they were implemented in Krita or get implemented in the future.

thank you for your comment!

[Toki]

Is there a chat or a sever where this is discussed?

I should check out the nightly builds too

[Drawpile]

You can send me a wishlist of things you find useful and would like to have in Krita as well. I currently have other things I need to work on and have a pretty good idea of what I want to port over as well, but it doesn’t hurt to know. Particularly animation stuff, I’ve never managed to get my head around Krita’s animation system, so I don’t know how it compares to Drawpile’s and if there’s anything worth stealing.

With regards to a chat, there’s the developer IRC channel. The discussion about features usually happens in this forum though, since that also lets artists give feedback and doesn’t require everyone to be available at the same time.

[not_guevara]

i kinda like toki’s concepts for mobile. kinda reminds me of medibang and sometimes can felt user friendly when its looked like this

[abhifx]

although i can categorize this as “another day another mobile mockup” but this one is very well articulated. I like most of the ideas. There is however as beartoys have said, mobile interface is in works which can potentially use these ideas.