GNOME UX Hackfest 2017

Designing the future of GNOME Shell

I just got back from a week-long design hackfest in London focused on GNOME Shell and related components. It was a fantastic week with friends from GNOME, Red Hat, Endless, System76, and elementary working together to help make GNOME even better.

In the end we generated a lot of designs that will need to be refined, thought through more, and tested before implementation. But I’m confident the issues we raised and solutions we arrived at will positively affect GNOME Shell in the future. I look forward to the designs getting better hashed out and sharing them as soon as we can!

Photos by Jakub Steiner unless otherwise noted.

Attendees

Cosimo, Mario, and Robin are from Endless; Allan, Florian, and Jakub are from Red Hat; and Tobias is a student at TU Berlin. I attended on behalf of System76, but also brought my experience and knowledge from elementary.

We were all there, however, as GNOME community contributors and designers to work together on the future of GNOME Shell.

Tuesday, Nov 14

Tuesday room, photo by Cosimo

Shared Agreements

  1. Bring your full, honest self
  2. This is a safe space
  3. Assume good intentions from each other
  4. Be open, listen actively
  5. Speak your mind & heart

We all agreed to operate under these guidelines, wrote them on a large piece of paper, and posted it at each venue. I really liked this opener to ensure we’re all working together and getting the most out of the event!

Agenda

Next, we hammered out our agenda for the week, which you can check out on the hackfest wiki page. In summary, we decided to focus on three main areas for the four-day event:

  1. Activities Overview (2 days)
  2. First-Run Overlay/Tutorial (1 day)
  3. Login/Lock Screen (1 day)

We also decided to fit some of the other items in from the list in between if we were stuck, burnt out, or just had extra time. With the agenda decided, we dove straight into the Activites Overview.

Activities Overview

The first day of discussion was largely high-level and unconstrained. It ventured, at times, into tiling window managers, window switching, larger OS-wide spatial models, and “using the Z-axis.” We eventually did spend some time generating a lot of sketches and mockups of potential ideas, and Allan shared an idea he had been working on. We kind of settled into two main areas we needed to tackle: how to get into this “app picker” view, and how this app picker view would operate.

We had less consensus on how to get into it, but had started arriving on a few shared concepts with how it would operate:

  1. Provide a “favorites” area that is the default view with user-manipulable icons and folders
  2. Have a sort of “app basement” (thanks for that term, Robin!) where all apps live and can be brought out to the favorites area
  3. Have a “suggested” area that would surface frequent/recent apps plus recently-installed apps to proactively prevent users from having to dive down into the basement

These concepts would help make the app picker more immediately useful to users than a paged list of everything on their system, and would help make folders actually behave how users seem to expect to based on their experiences with mobile OSes.

Other Concepts

One was using app icons to badge windows and workspaces in the Activities Overview; this is something we do in elementary OS and can be a boon to glanceable recognition of tasks. Another idea was revamping the Super + Tab window switcher to basically utilize the existing window spread as its UI.

Some concepts we briefly touched on

These ideas weren’t fleshed out in detail, but I think they would be interesting areas to explore. Badging windows and workspaces, for example, could be a relatively small change that greatly increases the usefulness of the overview.

Wednesday, Nov 15

Wednesday room, photo by Mario

App Picker

Sketch of the existing mouse travel for launching apps

Getting Spatial

Thinking through spatial models and layers with paper, photos by me

We seemed to arrive at a consensus that workspaces should continue to operate vertically and live to the right of the window spread, meaning for balance reasons the app picker should probably live to the left. This negated some of the more radical ideas like having it slide up on a sheet from the bottom (because it would be very unbalanced). Apps living to the left also keeps the general mouse travel from existing versions of GNOME Shell, meaning it would be an easier transition for existing users.

A sketch of how the app picker itself could work

We ended the day wanting to sleep on the ideas we’d had and to give some of the designers opportunities to mock their ideas up in a higher fidelity.

Thursday, Nov 16

Activities Overview Wrap Up

First-Run Overlay

My rough translation of the Endless overlay to a vanilla GNOME Shell design

I brought up my reservations with first-run tutorial patterns, but I think if implemented very basically (with only a couple of screens), it could work. Ideally it would also be implemented per-session, meaning that downstreams like Endless OS, Pop!_OS, and Ubuntu could choose to implement it and extend it or pare it back to match their experiences if they so choose.

We agreed that there are really five different components to the idea of user education and help as far as a GNOME-based OS is concerned:

  1. Help Guide (which is launched on first login in GNOME today),
  2. First-Run Overlay (like what Endless wants to implement),
  3. A sort of feature gallery in Initial Setup to show some features and how to access them,
  4. On-demand videos or tutorials that apps or the shell could call over some API (eg. in-context “help” actions that pull up a help UI focused on that feature), and
  5. Progressive disclosure/education through something like tooltips

None of these are mutually exclusive, and each one could be worked on. We spent a small amount of time working on some designs for a first-run overlay, but the tricky part there is more implementation than design.

Progressive disclosure of actions and keyboard shortcuts, photo by me

I also plan to file issues for progressive disclosure/user education through context like in my sketch above.

Starting on Login/Lock Screen

We ended the day after a bit of discussion, and rough sketches of how space could be better utilized, but nothing concrete.

Some rough initial ideas, photo by Robin

Friday, Nov 17

Login/Lock Screen

  • Iconified notifications (not the entire contents) to tell users there are notifications to be seen when they unlock
  • Reducing the number of clicks/actions to log into the last-logged-in user
  • Using the user’s desktop wallpaper instead of a separate lock screen wallpaper
  • Making stronger use of user avatars (and thus doing something intelligent in Initial Setup to ensure all users have a uniquely recognizable avatar)

One of my favorite concepts shared was by Tobias. He mocked up using the user’s wallpaper as a stronger identifier combined with their avatar as cards in the user list, then expanding that wallpaper out to the full screen when the user is selected. I’ve reproduced the gist of it in this terrible sketch:

At the end of the day, we didn’t have a single clear path forward, but had many concepts that we want to explore further. We did have a consensus of the key goals and some converged ideas around notifications and user avatars, which was productive. I look forward to seeing these ideas more fleshed out!

Food, Sights, & Social

GNOME Beers

What would a hackfest be without a little bit of food and socializing as well? Allan led the way to several delicious food venues throughout the week including Malaysian, Vietnamese, Australian, Thai, Ethiopian, British, Spanish, Italian, and probably half a dozen others I forgot. We also spent some time in the evenings at a handful of local pubs, and met up with more members of the GNOME community at the GNOME Beers event on Wednesday night.

Borough Market and London Bridge, photos by me
Left: Out on the street after lunch. Right: Millenium Bridge and St Paul’s Cathedral. Photos by me.

We spent one long lunch grabbing food at Borough Market, walking along the River Thames, and crossing the Millenium Bridge doing a small amount of sightseeing. After a different lunch we briefly stopped by the British Library.

Left: “How far does this go down?” at the British Library. Right: St. Pancras station. Photos by me.

We ended the week at a big band jazz performance by Beats & Pieces as a part of London Jazz Week, and got what I’m told is a traditional British cuisine: salt beef bagels.

Beats & Pieces big band jazz, photo by me

Summary

I am sure I missed some things we discussed, and I purposefully left out any higher-fidelity mockups (since these ideas are in no way set in stone). If you want to dig into things on your own, be sure to visit the hackfest wiki page for more details. Also feel free to leave a response here and I will try to answer any questions.

Thanks to GNOME, Endless, and Red Hat for making this event possible, and System76 for sending me out to London on such short notice! I look forward to our continued collaboration.

Cassidy James Blaede

Written by

Co-founder & UX Architect at elementary, Inc. He/him/his.