Background Redesign Development Notes

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/RedesignNotes (last edited 2018-06-22 10:58:16 by AllanDay)