Launchpad Entry: karmic-boot-experience
Created: 2009-05-25
Contributors: Ubuntu Platform, DX and Design teams
Packages affected: see dependencies below

This document is a part of DesktopExperienceTeam/KarmicBootExperienceSpec

Related specs:

Contents

Terminology
Introduction – General Guidelines
Design Guidelines
Comments

Terminology

"Boot Experience" is a set of events and interactions that the user can experience between switching the computer on and accessing the login screen (or the desktop session if auto-login is enabled).

Introduction – General Guidelines

Boot Experience Should Be:

Guiding

1st Run: a friendly introduction to the system
Can teach the user about the computer
Highly accessible, easy to use for everyone
Familiar, personal

Fast

Efficient, giving the user impression of saving time, rather than wasting time
Lightweight and "breezy"

Simple

Not too crowded
Clean and user friendly
Easy to navigate
Seamless
Care free

Welcoming

Trustworthy
Friendly
Inviting
No technical jargon
Not scary (esp. during 1st time use)

Reassuring

Flicker-free, giving the feeling of stability and control
Reliable and safe

Making the computer "mine"

Self-expression, feeling of ownership even on shared machine

Inclusive

Should fit everyone
Flexible

Reinforcing/introducing the brand

Set the mood of Ubuntu
Give a good first impression
Convey a strong brand message
Be beautiful

Motto

"Light Ubuntu inside your machine"

The Boot Experience Will...

...guide the user through a fast, simple startup which feels welcoming and reassuring. The user will feel in control of his computer throughout.

Design Guidelines

BIOS/EFI

Whenever EFI is available, the screen should be filled with flat color as soon as possible. Color TBC. If standard BIOS is used, we should encourage manufacturers to not reset to text mode after the initial splash screen.

Bootloader

The Bootloader should not have any visible representation, unless the User holds down the Shift key, which will trigger the text-mode boot selector.

Example of a text-mode boot selector (wireframe):

Standard Boot Sequence with GDM Greeter

Boot Sequence with GDM Greeter – UI flow (download SVG)

Standard Boot Sequence with Automatic Login

Boot Sequence with Automatic Login – UI flow (download SVG)

Boot Sequence with Timeout Exception

If there is an X-startup timeout, the fallback graphical splash screen should be displayed, until the X session is ready. The fallback splash screen design should match the standard splash screen, with the only exception of no hint area being present.

Boot Sequence with Automatic Login – UI flow (download SVG)

Transitions

BIOS > Bootloader > Graphical Boot Splash

The bootloader is silent, therefore should not have any visible representation. If EFI Bios is available, the screen should be filled with flat color corresponding with the desired boot splash background. The graphical boot splash should fade in from black over 0.3s. Mouse cursor should be disabled in graphical boot splash.

Graphical Boot Splash > Graphical OS Selector

The OS Selector should fade in over 0.3s.

Graphical Boot Splash > GDM Greeter

The boot splash should fade out over 0.3s revealing the GDM greeter when the greeter is fully drawn and ready to use.

Graphical Boot Splash > Desktop Session

The boot splash should fade out over 0.3s revealing the user's desktop when all desktop elements are fully drawn and ready to use.

GDM Greeter > Graphical Boot Splash > Desktop Session

GDM greeter should fade out over 0.3s and the Graphical Boot Splash should appear with the text "Logging in..." at the bottom of the screen, until the desktop session is ready. The desktop should fade in over 0.3s when it's fully drawn and ready to use.

Graphical Boot Splash

Standard graphical boot splash will consist of the following elements:

Note: mouse cursor should be disabled (hidden) during the graphical boot splash sequence.

Background color/gradient

Any combination of colors and gradients can be used, as the full X stack is available. The styling should enforce the Ubuntu brand and create a smooth and pleasing experience, coherent with the overall desktop look&feel.

Ubuntu branding/artwork

Ubuntu branding should be used subtly, avoiding supersizing, patterns, etc.

Animated element(s)

Animated elements should enforce the impression of responsiveness and reliability of Ubuntu.

Hint area

Hint area is a portion of the screen where various useful hints can be displayed. This area is defined relatively to the currently set screen resolution and has constant XY percentage coordinates. The hints are always context-specific and inform the user about the actions that are currently executable (using the pattern: to achieve X, press/click Y).

Hints should not inform about status changes, errors or any other external or user-triggered events.

Appearance

Appearance of the hint should match the styling of Notify-OSD notification bubbles. Hint should be displayed as text, using sentence case only, no icons are allowed.

Behaviour

The hint should fade in immediately after the user enters the screen for the first time in the session. There can be only one hint per screen. Each hint should only be displayed once during each session. If the user has executed an action suggested by a particular hint, this hint should not appear again. The hint should fade in over 300ms and stay on the screen for no longer than 3000ms. It should then fade out over 300ms.

Layout Rules

Background artwork

Resolution

Background artwork should be supplied in the following resolutions (in pixels):

2560x1600
1920×1200
1680×1050
1440×900
1280×1024
1024x768
800x600

Scaling and cropping rules

The background artwork should never be scaled up or down, neither horizontally nor vertically.

The artwork should always be position centrally on the screen, using the nearest matching resolution that is either the same size as the screen or larger.

Ubuntu logo and throbber

Position

Ubuntu logo should be positioned in the center of the screen horizontally and 25% from the top of the screen vertically:

Throbber should be positioned in the center of the screen horizontally and the vertical center of the throbber should be positioned 34% from the top of the screen vertically:

Size

The logo and throbber assets should be picked appropriately to the current screen resolution using the following pattern:

_small assets for screens<1280px wide
_medium for >=1280 and <1600
_large for >=1600 and <2560
_xtra_large for >=2560

Boot Sequence With Encrypted File System

Whenever there is an encrypted file system, the user should be presented with the graphical interface that would enable entering the password and decrypting the system. The interface should also be able to inform the user if the password was incorrect or whether the Caps Lock key is on.

Boot With Encrypted File System – UI flow (download SVG)

Encrypted file system – password entry screen (wireframe)

Encrypted file system – wrong password notification screen (wireframe)

Appearance

The appearance should be simple and elegant and use the styling that would seamlessly correspond with the graphical boot splash and OS Selector. Only flat colors and linear (horizontal or vertical) gradients can be used and no transparency is available.

Behaviours

Only basic keyboard interactions are possible, pointing devices are not available at this stage. The user can only type in his password and confirm by pressing Enter.

If the password is incorrect, the following message should appear: "The password you have entered was incorrect. Please try again."

The password field should be automatically reset and re-focused.