Initial Application States

This page is out of date and no longer maintained. For up to date design guidance, see the HIG.

Initial or welcome pages, to be displayed by applications on first run (in some situations).

Goals

When opening an application for the first time, ensure that it:

  • Looks good.
  • Is welcoming.
  • Isn't negative or a downer.
  • Isn't boring.
  • Guides you into using the app - if users need to know something to use the application, the information should be communicated. Likewise, if the application has a relatively technical or obscure purpose, it should explain what it is for.
  • Visuals should be consistent with OS branding, particularly those used in initial setup.

Out of scope for now: first run setup/configuration.

All of this is mostly relevant for applications that present content items in their main view, and might be empty when first run.

Relevant Art

Chrome

http://cdn.g.design.org/imagecache/full_width/inspirations/16/a77dc6d85e81ec2fa3865f86d0de674c1337015503.png

iTunes

http://operationproject.com/wp-content/uploads/2013/01/Screen-Shot-2012-11-29-at-3.15.03-PM-1024x707.png

Firefox 35

ff-first-run-1.png

ff-first-run-2.png

ff-first-run-3.png

GNOME 3

Screenshots taken with GNOME 3.14 running under Fedora 21. For this test no online accounts were connected.

Discussion

  • Size of icon?
  • Initial Window position?
  • Color of text?
  • Maximized?
  • Link to Online Accounts or File Manager?
  • Initial state and empty state might be different - with an initial state, the emphasis is on welcoming and guiding the user. If the application then becomes empty, you might want to present a different view depending on the type of application.

Tentative Design

Initial state should be displayed from first run, when no content items are present. It can be displayed over multiple runs, but should not be shown once content has appeared (if the application subsequently becomes empty, it should display the empty state).

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/template.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/boxes.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/documents.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/music.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/notes.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/photos.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/initial-app-states/videos.png

Bugs

Boxes

To do

Documents

To do

Music

To do

Notes

To do

Photos

To do

Videos

To do

Initial setup

To be requested if a sufficient number of apps are fixed

Comments

See Also

Design/OS/InitialStates (last edited 2021-05-17 15:07:00 by AllanDay)