App Grid in GNOME Shell

GNOME Shell is the cornerstone of the GNOME experience. It is the part of the system where the vast majority of user interactions takes place. Windows are managed by it. Launching and closing applications as well. Workspaces, running commands, seeing the status of your system — GNOME Shell covers pretty much everything.

One interesting aspect of GNOME Shell is how it deals with launching applications. Currently, it organizes application launchers in three different places:

  • The Dash, which contains both favorite and running applications
  • The “Frequent” tab, which shows a small selection of the most used applications
  • The “All” tab, which shows all applications (that may be inside folders)

Let’s focus on the “All” tab for now.

The “All” tab

The “All” tab contains a list of all installed applications on your system. These applications may be inside folders. GNOME has a default set of folders and applications that aims to minimally organize it, and avoid displaying applications that may be too specialized for regular usage.

What many do not know is that the folders are customizable. Unfortunately, GNOME Shell does not provide any means within it to manage these folders. So far, the only (officially supported) way to do that is through GNOME Software!

Furthermore, it is a pity that only the smallest of the application launchers — the Dash — is customizable. There is only so much that can be put in there!

New Ideas

During the London UX Hackfest, in 2017, GNOME designers and developers had many interesting ideas about different ways to organize GNOME Shell’s UI elements. Letting designers create freely, without having to consider toolkit limitations or time constraints, can produce wonderful results!

It is interesting to notice that many of these ideas floated around the concept of an user-customizable application grid.

In fact, such kind of application grid exists in Endless OS (which by itself is loosely inspired by how smartphones do that) and our user research has shown that it improves discoverability. New users that are presented to Endless OS can easily and quickly navigate through the OS.

Managing icons in GNOME Shell

For the past few weeks, I’ve been working on a way to manage application icons and folders in GNOME Shell itself.

The implementation is different from what we have at Endless, and fits GNOME’s current UI paradigm better. Let’s check it out!

Naturally, it’s possible to create folders from GNOME Shell:

Notice how the folder name was automatically picked from the shared categories between the applications.

Folders are automatically deleted when emptied:

In addition to that, custom positions are also supported:

And of course drag between pages:

Keep in mind that none of this is merged yet. It’s still under design and code review, and testing!

OMG what have you done i hate it lolol

Fear not! This first iteration of the feature is implemented in such a way that if you don’t customize the icon grid, it will continue to work exactly as it used to. That way, we can still deliver a consistent experience and reduce friction as we persue further changes in GNOME Shell.

The Roadmap

We are trying to land this before the feature freeze in 3.34, in which case you’ll get it in the next GNOME release. In case that doesn’t happen, it will appear early in the 3.36 development cycle. Either way, discussion and refinement will continue, so between 3.34 and 3.36 what you see in the videos above might change significantly.

The design team is already considering how we might fully use the potential of the customizable icon grid feature in a future iteration of GNOME Shell, and I’m looking forward to see what comes out of that discussion!

Fortunately, thanks to my employer Endless, I was able to work full time on these changes, and will be able to work on future changes in GNOME Shell as well.

This was all made possible by Endless.

17 thoughts on “App Grid in GNOME Shell

  1. Seems great, but honestly I really need to point out:

    The delay on the animations feels far too long.

    Personally, I’d rather there was none, because it makes it feel slugish; but nice feature, none the less.

    Like

  2. Hej, looking great, always wanted GNOME to make folder creations like this possible! Really nice work 🙂

    One question, although I am pretty sure someone already pointed it out somewhere else, why keep folders with just one program inside them? Wouldn’t it be more intuitive for them to just unfold and show the app icon of their former content?

    Like

  3. Finally. That was a long overdue for Gnome Shell. I am glad to see the name of folders will be automatically assigned depending of the applications group. Hopefully that functionality will make in 3.34 release in time for Fedora Design Suite 31.

    Like

  4. Great work Georges, thanks! Looking forward to this. I agree with gtsiam that the default animation delay values (for dragging icons into and out of folders) could be lower.

    Liked by 1 person

  5. Not meaning to dismiss your work, but I find it interesting that I’ve almost never used that feature of Shell. I know it’s there, but I’ve never had any use for it because all my high-use apps are in the Dash, and for anything else I’d use “type to search”… e.g. if I want a spreadsheet, I hit the Windows key, type “spr”, and select LibreOffice Calc. It would never occur to me to use the app grid, because the alternatives are so much faster.

    Like

    1. I also tend to mostly use type-to-find for launching apps, but there is one occasion when the appgrid comes in handy, the cases when I use my 2-in-1 in tablet mode.

      Like

  6. Thank you for you efforts!

    A folder should actually already disappear (get deleted) if only one app is left in it.

    Your solution looks a lot like launchpad on the Mac/ springboard on iOS. Apple implemented automatic folder deletion that way as well. Why reinvent the wheel? It really works well that way.

    Like

    1. Working on a Administrator/parental controls panel for Gnome. Not sure where to begin. Gnome Safety. Is there a developer guide available for the control center?

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s