Background

Set the background image for the session and for the lock screen.

Participants

Thomas Wood, Bastien Nocera, Julian Sparber, Design team.

Old Design

The current design features two separate menus for setting the lock screen and session wallpapers. This means that in order to change the wallpaper there is always an extra click to open one of the dialogs, which is especially bad because the only way to preview a wallpaper is by actually setting it. This means trying out multiple wallpapers is very inefficient because it requires lots of back-and-forth.

https://raw.github.com/gnome-design-team/gnome-mockups/master/system-settings/wallpaper/old/with-lock-screen.png

The separation between session and lock screen wallpapers introduces addtional complexity with little benefit. Having two separate wallpapers means a more complicated interface and twice the work when changing both wallpapers to a new one. Since the wallpaper is often visible to other people while users are using the computer, privacy concerns with using the same wallpaper for both should be minimal -- if something is truly supposed to be private, using it as a wallpaper is probably a bad idea.

Goals

Set the session and lock screen background using

  • Default set of images (including dynamic ones that change depending on the time of day)
  • Photos from personal library

It should also be possible to:

  • Easily preview new wallpapers
  • Easily revert back to the previous wallpaper

Non Goals

  • Set a default background for all users on a multiuser system
  • Background slideshows (as in defining individual images to be part of a slideshow)
  • Set a different background per display
  • Combine an RGBA image with color or gradient background.
  • Set lock screen wallpaper separately

Relevant Art

ios 11 wallpaper chooser mac os wallpaper chooser windows 10 wallpaper chooser elementary OS Loki wallpaper chooser

Proposed Redesign

This redesign features:

  • fewer clicks to set wallpapers
  • preview mode to try wallpapers before actually setting them
  • streamlined layout that scales better to different screen sizes
  • session and lock screen wallpaper are automatically set together

The new settings panel layout:

concept with recent section and links to photos and nautilus

The preview mode is opened when selecting a wallpaper from the settings or another app, e.g. Nautilus, Photos, or Firefox. This ensures a unified experience and makes it possible for previous wallpapers to be available in the "recent" panel, which is not possible when every app just sets a gsetting and stores the wallpapers in different folders.

wallpaper preview mode

Proposed Redesign v1

Advantages

  • Background for both desktop and lock screen can be changed with a single click
  • Previewing wallpapers is much easier (hover a thumbnail and click preview)
  • Undo setting a background via in-app notification

Disadvantages

  • It's not obvious that this applies to both desktop and lock screen
  • Desktop and lock screen wallpapers cannot be changed separately

backgrounds-concept.png

Proposed Redesign v2

This concept features

  • No undo via in-app notification (not visual enough)
  • Instead, the 3 most recently used items of each category are at the top of the list
  • No buttons on each item that are awkwardly revealed on hover
  • Wallpapers can only be set from preview

Advantages

  • More streamlined workflow
  • No reliance on hover to reveal elements
  • Undo is more direct and visual

Disadvantages

  • Changing the wallpaper always requires two clicks and a bit more mouse travel

proposal2-1.png

If we use GtkIconView, on bigger screens, the column remains centered and the grid does not reflow.

bigger-screens.png

If we use GtkFlowBox, we can reflow the wallpapers and use the space more efficiently.

bigger-screens-reflow.png

Preview UI variations

A full-width header bar (option 1) would be the most obvious choice, but it covers a large portion of the wallpaper and the buttons are all the way off to the sides, which means more mouse travel. Options 2 and 3 move the same controls closer to the center of the screen, which makes the preview more immersive and the buttons easier to reach.

preview-ui.png

Proposed Redesigned v3

This concept addresses some issues with v2, namely:

  • The "Photos" tab, which tends to be full of random pictures which aren't suited to be wallpapers, is gone in favour of a file chooser
  • The "Wallpapers" and "Colors" tabs are unified in one scrollable view, because they each only contain about 15 items

The file chooser and color chooser add new elements to the lists of wallpapers and colors, respectively. These elements can then be opened in the preview by clicking them, same as the default wallpapers. Unlike these, they can also be removed.

Custom image/color chooser variations

custom-variations.png

Proposed Redesigned v4

This concept drops the colors section, and reintroduces the recent section. It also drops the file chooser, because setting arbitrary images as wallpapers is already possible from Nautilus, the Photos app and other applications. These applications are better suited than the file chooser to selecting wallpapers, because the file chooser doesn't have adequate thumbnails, and they allow for setting the wallpaper from the context that users are used to working with their images.

concept with recent section and links to photos and nautilus

Design/SystemSettings/Background (last edited 2017-11-07 23:47:42 by TobiasBernard)