Improve system settings disk usage analyzer

mymike

The downside of the super table is that it is less immediate to see what takes up space, am I wrong?

Also it's all too compacted in my sketch, but I guess making rows more tall won't help much...

What about hiding the app name and show only the icon?
Let me explain this better: There is a simple list like here With a button at the bottom "Start cleaning space". Now the app name, the bar and the size on the right disappear and the 3 columns appear. tap or keep pressed on the icon to see temporarily the name.
The issue here is: bars (or circles) should be proportional to what. proportional to the app size? proportional to other values on the column? proportional to everything else (like 1 degree/pixel is 1MB)?

I haven't talked about burst uninstalling yet...Dedicated page? But for each app you uninstall you have to decide whether to keep, remove or select the data to remove, and so the super table already lets you to do so, but there's little space left for an additional uninstall button (or 3, like the 3 options in the dialog)... A row under each app with the three buttons? "Uninstall & Clear", "Uninstall & Keep", "Uninstall & Select". The first will check all the three columns for that app, the second will uncheck them ad the third won't touch them. All of them would mark the app as "to be uninstalled" when confirming the cleaning with the bottom button.
Oh, maybe an uninstall button/icon can make the row under the app with the 3 button visible...

I'm getting lost in this super table sigh, to many thing to show and to many actions the user can perform, and they need to match perfectly each other... But maybe something cool can came out of this

AppLee

@mymike
I see we are both lost because it starts to be too complex.
Let summarize things a bit.
I'm focusing here on actions and visual information. In my process, it helps figuring how to perform such actions given the chosen display.

As you're the one doing the hard work you have the decision power.

Actions evoked:

Remove app
Clean app data
Bulk cleaning app data
Clean app config
Bulk cleaning app config
Clean app cache
Bulk cleaning app cache

If I missed some, please complete the list.

Then we have the visual components.
We have to decide what will be displayed. Again I list all that I have in mind.

App data size
App config size
App cache size
App total size
App name
App logo
Checkbox to select app to be deleted
Checkbox for app's items to be cleaned
Sorting options
Visual confirmation that sorting is applied properly
Visual information regarding the relative size of data, cache and config
Action buttons
Warnings
Action feedback

Of course all information and all actions don't have to be implemented.
It might help to sort what's important and what is just noisy.

IMHO the long press can be used for hidden infrequent actions like bulk actions.
We have the same behavior in messaging app and I guess it's OK this way.
So long press on any line will add a checkbox on each line and allow a single action to be perform for all selected apps.
We have to choose one because too many options will be confusing.
I suggest using the sorting option to either clean data, config or cache.
At the bottom we'll have a cancel button and an action button explicitly stating the action.

Individual actions can be implemented using the swipe left or right quick actions. That's a common way to do it on UT.

mymike

@AppLee said in Improve system settings disk usage analyzer:

I see we are both lost because it starts to be too complex.
Let summarize things a bit.

Yeah, great!

Actions evoked:

[..]

If I missed some, please complete the list.

Do we want a bulk removing app too?

IMHO the long press can be used for hidden infrequent actions like bulk actions.
We have the same behavior in messaging app and I guess it's OK this way.
So long press on any line will add a checkbox on each line and allow a single action to be perform for all selected apps.

Ok, I agree long press can trigger bulk cleaning.

You don't think cleaning multiple data type at the same time could be useful?

I suggest using the sorting option to either clean data, config or cache.

I thought about it already but I don't feel it's the right choice: sorting option should only sort, not decide what you're going to clean...

At the bottom we'll have a cancel button and an action button explicitly stating the action.

ok

Individual actions can be implemented using the swipe left or right quick actions. That's a common way to do it on UT.

Yeah, but swiping is meant to put buttons and don't waste space in the list. If we already expand the list item, we don't have to worry to waste space.

AppLee

@mymike said in Improve system settings disk usage analyzer:

Do we want a bulk removing app too?

I was just putting all ideas. Accepting or rejecting one is completely up to you.
The lists are for general purpose.

You don't think cleaning multiple data type at the same time could be useful?

Here starts my personal opinion
Yes it can be useful, but my opinion is with combining multiple choices it makes it harder to perform a simple operation while the gain is not that important once in a while.

I will more frequently delete cache for multiple apps.
Deleting config+cache on multiple apps doesn't require a specific feature. I can easily repeat the operation for config and then for cache... and it's less probable that I'll have to do it.

I thought about it already but I don't feel it's the right choice: sorting option should only sort, not decide what you're going to clean...

Then maybe we shouldn't have a "sorting" option. But a scope.
I want to see cache, data or config and maybe perform an action towards this kind of data.
We can always have total size for each app for convenience, but exit the details...

That's the choice you'll have to make. What is the goal :

Showing what space is used and where
Cleaning such space

What should be the easiest and fastest? What is an additional feature that can be less easily accessed ?

mymike

What do you think about the first picture vs the second one?

CiberSheep

For me second is cleaner.
Also for the buttons: Remember, only main action colored the one at the right

mymike

@CiberSheep said in Improve system settings disk usage analyzer:

For me second is cleaner.

ok

Also for the buttons: Remember, only main action colored the one at the right

But how should I decide which one is the main? The other one will be grey even if negative?

danfro

@mymike

I'm getting lost in this super table sigh, to many thing to show and to many actions the user can perform, and they need to match perfectly each other... But maybe something cool can came out of this

Sorry for making you pulling your hair out by suggesting this. As @AppLee said, just gathering ideas. Even if dropping them is all we do with it, it brings us a step further.

danfro

@mymike I like this approach.

Having thought about it, only for cache I see the use of bulk cleaning. That could be done with a button in the header, if needed.

Although the right image does look cleaner, as @CiberSheep already said, I can imagine, that very small portions of data can look like "dirt on the screen" or a graphical fault.

Maybe make the not filled bar's color a tiny bit brighter?

And (don't beat me ) do we need the dividers? I think in many places we found, that things look nicer without them.

As for the main action: Which is the main purpose? Managing apps data or uninstalling apps? OR Which is the more "dangerous/intrusive" action? Delete or clear?
I think, I would go for the first one and say managing data is the main purpose, so have the clear button red.

Will uninstall prompt the user to clear all data (popup maybe)?

AppLee

@mymike
I agree with ciberSheep, I prefer the one on the right.
And I also agree with danfro that deleting the app is not the prime focus here.

I deleting the app can be managed with swipe right and delete.
Expanding the app line gives option to cleanup some data with a single action : cleaning.
Long press to allow bulk modification.

The question I have is what would be the best way to choose the action performed in mass ?!
I like the idea of the "sorting" option as an input, but I hear the drawbacks...

mymike

@danfro said in Improve system settings disk usage analyzer:

Maybe make the not filled bar's color a tiny bit brighter?

Yeah, I'll make a test

And (don't beat me ) do we need the dividers? I think in many places we found, that things look nicer without them.

Idk, but I'll test this one too

As for the main action: Which is the main purpose? Managing apps data or uninstalling apps? OR Which is the more "dangerous/intrusive" action? Delete or clear?
I think, I would go for the first one and say managing data is the main purpose, so have the clear button red.

Yeah, I think I'll make red the clear button.

Will uninstall prompt the user to clear all data (popup maybe)?

Yes, I already posted it but you may have missed it

mymike

@AppLee said in Improve system settings disk usage analyzer:

I deleting the app can be managed with swipe right and delete.

Ok, I'll try the swipe and remove the uninstall button

Expanding the app line gives option to cleanup some data with a single action : cleaning.

Well, right now if you select e.g. cache and then press uninstall, the dialog will select "Choose what to delete" instead of the default "Delete all app data" and will check cache from the list in the popup.

Long press to allow bulk modification.

The question I have is what would be the best way to choose the action performed in mass ?!

An idea could be to make the user to chose it later: Long press, select the apps, press the "Clean..." button at the bottom and a popup will ask you "What do you want to clean from these apps?" and it will list the apps you have selected with an option selector for cache, config and data.

If we want we can also put an uninstall button (grey) at the bottom when in bulk mode. Or, more hidden as the impact is quite big, put the swipe to right in the list item floating at the bottom...

danfro

@mymike

Yes, I already posted it but you may have missed it

"Forgot about it" is the better wording. Sorry.

mymike

So I fixed some other things like update asynchronously the list when uninstalling an app or cleaning some data. I added a pull-to-refresh component too to update the list manually.
It's all in this github branch if someone is interested https://github.com/mymike00/system-settings/tree/xenial_-_better-disk-usage
If someone wants a .deb to test these changes, let me know.

mymike

I managed to get things working for bulk cleaning, but the GUI can still be improved. What do you think?

CiberSheep

@mymike Ouh, it's getting a lot better on every iteration good work

Off topic: I have a new favorite word: Orologio

mymike

@CiberSheep said in Improve system settings disk usage analyzer:

@mymike Ouh, it's getting a lot better on every iteration good work

Thanks!

Off topic: I have a new favorite word: Orologio

ahahah

danfro

So, finally testing this on my phone. Very nice!

A few things to think about:

we should move storage to a separate point in the main screen (has been said here before I think)
could the buttons be made wider? Then only the label is going to change. The buttons changing size looks "dizzy".
I am not sure if we need to paint a "refreshing list" somehow after clearing something. I cleared the cache of one app and it disappeared. Panic. After thinking for a second, sure it moved down the list. But I guess users are always wary when deleting things.
when multiselecting, I like how the apps are listed at the bottom. But here could we maybe rename the button to "proceed" or so? Then the user does not need to worry about what is going to be deleted but will expect another prompt/choice (that is coming after pressing the button).
the multiselect dialog could do with a space between the "Which type of data..." and the list of apps. Or maybe place them in brackets? "... selected apps (list of apps)?"
if nothing is selected in expanded view, tapping on the (disabled) "clear" button does collapse the view. That feels not natural? Maybe do nothing there?

Just some thoughts. Maybe too nutpicking. No real need to change things. More suggestions if others feel the same, then we can think about it.

If I discover more, I will come back. Enjoying it now I am...

mymike

@danfro said in Improve system settings disk usage analyzer:

So, finally testing this on my phone. Very nice!

A few things to think about:

we should move storage to a separate point in the main screen (has been said here before I think)

An idea was to put an app icon in the homepage that would open a page with the app list (no bar for the whole storage), and leave the Storage page under About with only the global storage bar and its categories and a button to "Manage Apps". Idk If this could be implemented easily but I think it would be the cleanest thing to do.

could the buttons be made wider? Then only the label is going to change. The buttons changing size looks "dizzy".

The issue is that with different languages, button gets different sizes so I can't know which length is enough... I can put a hidden button with the wider text and take the width from it, but it seems a bit hackish... What about a small animation when it changes the width? Otherwise the size can be put outside the button...

I am not sure if we need to paint a "refreshing list" somehow after clearing something. I cleared the cache of one app and it disappeared. Panic. After thinking for a second, sure it moved down the list. But I guess users are always wary when deleting things.

Oh you mean an animation for the listitem going down? I hope it could be done. I am afraid the model is resetting itself completely and so the ListView doesn't know anymore the index of the app before the cleaning... I'll try to make it happen

when multiselecting, I like how the apps are listed at the bottom. But here could we maybe rename the button to "proceed" or so? Then the user does not need to worry about what is going to be deleted but will expect another prompt/choice (that is coming after pressing the button).

Yeah, I was afraid of that. Initially I put "Clear..." that usually indicates that the action is not immediate but a dialog would open instead, but then the button gets too longer imho and there is fewer space for the app list... An icon could not be very clear but maybe I'm wrong...

the multiselect dialog could do with a space between the "Which type of data..." and the list of apps. Or maybe place them in brackets? "... selected apps (list of apps)?"

Sure, some space would improve readability

if nothing is selected in expanded view, tapping on the (disabled) "clear" button does collapse the view. That feels not natural? Maybe do nothing there?

Ah ofc. Since the button is disabled the tap event is propagated to the ListItem which then collapses... I can put a MouseArea over the button that, when the button is disabled, stops the event from propagating to the ListItem

Just some thoughts. Maybe too nutpicking. No real need to change things. More suggestions if others feel the same, then we can think about it.

No, I'm very pleased to hear such detailed suggestions! Since the core functionality are there, now it's time to do this little graphic improvements

If I discover more, I will come back. Enjoying it now I am...

Great! Next time if you tag me in the message I'll get notified and reply you sooner

danfro

An idea was to put an app icon in the homepage that would open a page with the app list (no bar for the whole storage), and leave the Storage page under About with only the global storage bar and its categories and a button to "Manage Apps". Idk If this could be implemented easily but I think it would be the cleanest thing to do.

Sounds good to me. App management in main screen. Storage info where it used to be.

The issue is that with different languages, button gets different sizes so I can't know which length is enough... I can put a hidden button with the wider text and take the width from it, but it seems a bit hackish... What about a small animation when it changes the width? Otherwise the size can be put outside the button...

Buttons only adjust the width to the text if no width is set, right? So if we set a nice and wide width and add an elide to the label that should do it.

Another idea: place the "clear" button to the left and the "uninstall" button on the very right. Because the user ticks the boxes at the left hand side, it seems appropriate to have the clear button on that side. Uninstall stays right. This way increasing the clear buttons width by adding more text to it will not move the uninstall button around. That reduces the movement of elements.

Another option would be to NOT display the clearage size in the button. The numbers are there for the user to sum it up. The sum could be easier displayed in the next step because the dialog has got more space available. This way the clear button would keep its fixed width.

Btw. I like how the uninstall button changes its content from uninstall -> uninstall & clear. Definitely keep that!

I am not sure if we need to paint a "refreshing list" somehow after clearing something. I cleared the cache of one app and it disappeared. Panic. After thinking for a second, sure it moved down the list. But I guess users are always wary when deleting things.

Oh you mean an animation for the listitem going down? I hope it could be done. I am afraid the model is resetting itself completely and so the ListView doesn't know anymore the index of the app before the cleaning... I'll try to make it happen

If an animation can not (easily) be done [check messaging app when deleting chats as example], maybe put a rectangle over the whole list [z=1] with a spinner and a label saying "refreshing list" or "updating list". Use a timer to give that a second or so. And then redisplay the list. Maybe the label isn't even needed.

Yeah, I was afraid of that. Initially I put "Clear..." that usually indicates that the action is not immediate but a dialog would open instead, but then the button gets too longer imho and there is fewer space for the app list... An icon could not be very clear but maybe I'm wrong...

Maybe we should not worry about that too much. After using it the first time, users will know about the second confirmation dialog. And I get the feeling, we will only be failsafe here, with an explanatory label above. But that would just not look nice. In the end most places for (batch) clearing things provide such a dialog.

Ah ofc. Since the button is disabled the tap event is propagated to the ListItem which then collapses... I can put a MouseArea over the button that, when the button is disabled, stops the event from propagating to the ListItem,

Great! Next time if you tag me in the message I'll get notified and reply you sooner

@mymike No worries. But pinging you right now.

Just for perfection, if a value is zero, maybe set the checkbox to disabled because there is nothing there to clear?

And I know we had this discussion, but if a size is zero (or close to zero), because there is no bar visible at all, the label looks misaligned in relation to the checkbox. But not adding that space will mess up the whole layout and make it irregular. Maybe we will just have to get along with that. It does look great all in all the way it is. So...