KarmicBootExperienceDesignSpec
|
Size: 4466
Comment:
|
Size: 25015
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| ## page was copied from DesktopExperienceTeam/KarmicBootExperienceSpec | |
| Line 8: | Line 9: |
| == Summary == This specification documents the changes planned for Karmic to the various /user visible/ steps of the boot sequence of the Ubuntu system, including KMS support at various level in the software stack, and work on ensuring smooth transitions between these steps. By extension, other aspect of the user experience are covered in specifications linked to this one, namely: * the splash screen shown during system boot * the OS switcher, allowing the user to select another operating system to boot * the fallback "splash", that includes running file system checks or querying the user for a password to unlock a encrypted filesystem * the "login experience", that includes autologin, the gdm greeter, and also logout and session switching These changes are also depending on the FastBoot effort lead by ScottJamesRemnant in the Foundation Team. == Release Note == Release notes, based on the above description and impacted packages, will be detailed as the integration progresses. == Rationale == The current boot experience feels rather jerky with a lot of abrupt transitions between different system states. With the advent of KMS as a generally stable technology, it is now possible to reconsider the full "boot experience" and turn that into a more pleasing and visually consistent experience. One of the main goals is to get rid of flicker caused either by resolution changes (KMS) or by visual flashes due to screen clears, replacing that with more modern color/opacity transitions for example. == User stories == Joe turns on his notebook. He sees the manufacturer's logo and then his system starts booting. After a few seconds, he sees a small animation to let him wait while the system automatically opens his user session in the background. As soon as his session is ready, the system smoothly fades-in the Jane has a slow machine with a lot of disks that are hard to check and mount. When she boots, the system displays a small spinner after 3 seconds, as it determines that the boot sequence is going to be longer than usual. Bob would like to use the other operating system installed on his machine. He turns on his computer, waits for a few seconds, then sees a graphical message on his Ubuntu system screen to invite him to press "Esc" if he wants to interrupt the Ubuntu boot and switch to another version. He presses 'Esc' and the system presents him a set of alternative boot choices, including other kernel version and legacy OSes. If he were to select the legacy OS, Ubuntu would shutdown and instruct the computer to reboot (but only for this time) directly into the legacy OS. But Bob would rather try the new experimental kernel he just installed, so he selects kernel-2.6.3X and his system shutdowns and reboots (for this time only) with the new kernel he selected. == Assumptions == This spec has been designed for conventional x86 systems. Parts of it may probably also apply to other hardware architectures. == (User Interface) Design == == (Technical Design and) Implementation == The implementation is split into the different dependent blueprints: * http://blueprints.launchpad.net/ubuntu/+spec/desktop-karmic-xorg * http://blueprints.launchpad.net/ubuntu/+spec/dx-karmic-gdm-greeter * http://blueprints.launchpad.net/ubuntu/+spec/dx-karmic-os-switcher * http://blueprints.launchpad.net/ubuntu/+spec/foundations-karmic-kms-console Code changes or migration issues and strategies are detailed within the different blueprints. == Test/Demo Plan == The test plan will be documented, based on the user stories above, at http://testcases.qa.ubuntu.com/Plans/KarmicBootExperience == Unresolved issues == * Plymouth vs usplash: for displaying splash screens in case of issues or as a fallback scenario when the boot sequence is longer than usual, we're still considering both alternatives. They both have advantages and inconvenients * User testing: initial feedback indicates that users can accept 3-4s of blank screen time during at the beginning of the boot sequence, but that may require further testing to validate this assumption. == BoF agenda and discussion == ---- CategorySpec |
This document is a part of DesktopExperienceTeam/KarmicBootExperienceSpec Related specs: * https://wiki.ubuntu.com/DesktopTeam/Specs/Karmic/LoginExperience * https://wiki.ubuntu.com/DesktopTeam/Specs/Karmic/ShutdownAndRestartExperience * https://wiki.ubuntu.com/FoundationsTeam/Specs/KarmicUpdatesOnShutdown <<TableOfContents(3)>> = 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): ==== {{attachment:boot-selector.png}} == Standard Boot Sequence with GDM Greeter == [[attachment:boot-sequence-gdm.svg|Boot Sequence with GDM Greeter – UI flow (download SVG)]] {{attachment:boot-sequence-gdm.png}} == Standard Boot Sequence with Automatic Login == [[attachment:boot-sequence-autologin.svg|Boot Sequence with Automatic Login – UI flow (download SVG)]] {{attachment:boot-sequence-autologin.png}} == 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. [[attachment:boot-sequence-exception.svg|Boot Sequence with Automatic Login – UI flow (download SVG)]] {{attachment:boot-sequence-exception.png}} === 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: {{attachment:boot-splash-wireframe.png}} '''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: {{attachment:logo-positon.png}} '''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. [[attachment:boot-sequence-encrypted-fs.svg|Boot With Encrypted File System – UI flow (download SVG)]] {{attachment:boot-sequence-encrypted-fs.png}} ==== Encrypted file system – password entry screen (wireframe) ==== {{attachment:encrypted-fs.png}} ==== Encrypted file system – wrong password notification screen (wireframe) ==== {{attachment:encrypted-fs-error.png}} === 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. == Boot with Graphical OS Selector == === Option 1 – Simple OS Selector with single list of OSs === If the user presses ESC during the boot splash sequence, the OS Selector will be triggered (possible flows in the diagram below). Unless the user decides to interrupt the current boot process by booting another OS, it will continue in the background, all the way through to the login screen or user session (if automatic login is enabled). [[attachment:boot-sequence-OS-selector.svg|OS Selector – UI flow (download SVG)]] {{attachment:boot-sequence-OS-selector.png}} ==== OS Selection Screen ==== Example screen (wireframe): {{attachment:OS-selector-2.png}} ''Note: 12 options per screen maximum, legacy OSs always at the top'' OS Selection Screen enables the user to: * view the list of all versions of all OSs (e.g. list of different Ubuntu kernels + other OSs) * reboot into another OS ==== Appearance ==== Appearance of the OS Selector should ensure that legacy OSs are easily recognizable at the top of the list. It is important to clearly highlight the currently booting OS (at the top of the list) with the animated spinner (preferred) or "Boot in progress..." right-aligned text. The currently booting OS should always be displayed at the top of the legacy OS list. Other legacy OSs should be displayed underneath, in alphabetical order. Other versions of legacy OSs should be displayed as a secondary list below, in alphabetical order. ==== Behaviours ==== Keypresses: * Selecting the OS: up and down arrow keys * Booting selected OS: Enter * Switching the pages if the list is longer than one page: PageUp/Page Down * Exiting the screen: ESC or Enter if the currently selected OS is booting in the background Pointing devices: * Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting * Scrolling of the list available via scrollbars or mouse wheel/trackpad gesture Automatic timeout: * If the user does nothing for 20 seconds, the OS Switcher should be closed automatically. ==== Transitions ==== * OS Selector should fade in over 0.3s and fade out over 0.3s when closing. === Option 2 (preferred) – OS Selector with floating logos === In this solution, when the user triggers the OS Selector, he will be presented with the logos of the legacy OSs, grouped in one row, with OS name beneath each logo. There will be up to 4 logos displayed at one time, with the ability to scroll horizontally using left and right arrow keys if there are more than 4 legacy OSs installed. [[attachment:boot-sequence-OS-selector-3.svg|OS Selector with OS logos – UI flow (download SVG)]] {{attachment:boot-sequence-OS-selector-2.png}} ==== Primary OS Selection Screen ==== Example screen (wireframe): {{attachment:OS-selector-logos.png}} ''Note: 4 options per screen maximum, Ubuntu always first on the left, other options ordered alphabetically'' Primary OS Selection Screen enables the user to: * view the list of all legacy OSs * Access the secondary selection screen, if any of the OSs has more than 1 version installed * reboot into another legacy OS ===== Appearance ===== Appearance of the Primary OS Selector Screen should ensure that legacy OSs are easily recognizable and their logos are presented in a visually attractive way. For each legacy OS there should be the following information displayed underneath the logo: * OS name (at all times) and version number (if available). For example: Ubuntu 9.10, Mac OS X 10.5, Windows 7, Fedora 11. Kernel numbers or any other information for Linux-based OSs should not be displayed. * "Boot in progress...", for the currently booting OS, regardless if it is selected or not * "Press Enter to boot", for the currently selected OS, unless the currently booting OS is selected * "Press Space for more choices" for the currently selected OS with more than one version available The logos used should be stylized to match the overall look & feel of the splash screen. * All Ubuntu versions should use the stylized "Circle of Friends" symbol * All Kubuntu versions should use the stylized Kubuntu "Circle of Friends" symbol * All other Linux distributions (incl. Ubuntu and Kubuntu derivatives) should use the stylized Linux Penguin logo * Mac OS (all versions) should use a stylized Apple logo * Windows (all versions) should use a stylized Windows logo * Any other operating system should use a default disc icon All of the above icons will be supplied with the package and, to maintain consistent appearance, should not be replaced or modified. ===== Behaviours ===== Keypresses: * Selecting the OS: left and right arrow keys * Booting selected OS: Enter * Accessing the Secondary Selection Screen: Space, when the OS with more than one version is selected * Exiting the screen: ESC or Enter if the currently selected OS is booting in the background Pointing devices: * Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting * Horizontal scrolling of the list available via arrow buttons on the left and right Automatic timeout: * If the user does nothing for 20 seconds, the OS Switcher should be closed automatically. ===== Transitions ===== * When selected, the OS logo should grow smoothly and fill with color * The horizontal scrolling should use smooth easing * The Secondary Selection Screen should slide up from the bottom smoothly, and the Primary Selection Screen should fade out over 0.3s * All sliding animation should use smooth easing ==== Secondary OS Selection Screen ==== Example screen (wireframe): {{attachment:OS-selector-secondary.png}} ''Note: 12 options per screen maximum, currently booting version at the top, other options ordered alphabetically'' Secondary OS Selection Screen enables the user to: * view the list of all versions of a particular OS * reboot into another version of a particular OS ===== Appearance ===== All options should be displayed as a vertical list, with 12 options per screen maximum. All options should be displayed as OS name, version number, kernel version number, for example: Ubuntu 9.10, kernel no. 2.80. The currently booting OS should be displayed at the top of the list, with "Boot in progress..." text aligned to the right. The currently selected OS that is not booting, should have the "Press Enter to boot" text aligned to the right. ===== Behaviours ===== Keypresses: * Selecting the OS: up and down arrow keys * Booting selected OS: Enter * Skipping pages if there's more than one page: Pg Up, Pg Down * Returning to the Primary OS Selection Screen: ESC * Exiting the OS Selector: Enter if the currently selected OS is booting Pointing devices: * Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting * Scrolling of the list available via scrollbars or mouse wheel/trackpad gesture Automatic timeout: * If the user does nothing for 20 seconds, the OS Switcher should be closed automatically. ===== Transitions ===== * When triggered, the Secondary Selection Screen should slide up from the bottom smoothly, and the Primary Selection Screen should fade out over 0.3s * If the user presses ESC, the Secondary Selection Screen should slide down and the Primary Selection Screen should fade in over 0.3s. * All sliding animation should use smooth easing == Boot Splash With Kernel Panic/Boot Failure == If there is Kernel Panic during the boot splash sequence, a warning message should be displayed, along with the kernel messages. The user should be informed about the need to reboot. The Kernel Panic message should have consistent appearance regardless of whether the user is booting or is already logged in. ==== Boot Sequence with Kernel Panic – UI flow ==== [[attachment:boot-sequence-kernel-panic.svg|Download SVG]] . {{attachment:boot-sequence-kernel-panic.png}} ==== Kernel Panic screen (wireframe): ==== {{attachment:kernel-panic.png}} == Boot Sequence With Kernel Oops/Warning During Boot == If a Kernel Oops occurs during the boot splash sequence, the user should be informed about the error without interrupting the boot process. ==== Boot Sequence with Kernel Oops – UI flow ==== [[attachment:boot-sequence-kernel-oops.svg|Download SVG]] {{attachment:boot-sequence-kernel-oops.png}} ==== Kernel Oops screen (wireframe): ==== {{attachment:kernel-oops.png}} ==== Appearance ==== The error message styling should provide good legibility, without being too prominent on the screen. ==== Behaviours ==== Error message should fade in over 100ms and stay on the screen for 3000ms or the remaining boot splash sequence time, whichever is shorter. It should fade out over 300ms if the boot splash sequence hasn't concluded before the 3000ms timeout or in sync with the boot splash screen if it has. == Boot Sequence With Disk Check == [[attachment:boot-sequence-disk-check.svg|Disk Check – UI flow (download SVG)]] {{attachment:boot-sequence-disk-check.png}} ==== Disk Check screen (wireframe) ==== {{attachment:disk-check.png}} ==== Disk Check With errors (wireframe) ==== {{attachment:disk-check-errors.png}} ==== Disk Check fail (wireframe) ==== {{attachment:disk-check-fail.png}} === 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. Keypresses: ESC cancels the disk check. = Comments = Go to DesktopExperienceTeam/KarmicBootExperienceDesignSpec/Comments |
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:
https://wiki.ubuntu.com/DesktopTeam/Specs/Karmic/LoginExperience
https://wiki.ubuntu.com/DesktopTeam/Specs/Karmic/ShutdownAndRestartExperience
https://wiki.ubuntu.com/FoundationsTeam/Specs/KarmicUpdatesOnShutdown
Contents
- Terminology
- Introduction – General Guidelines
-
Design Guidelines
- BIOS/EFI
- Bootloader
- Standard Boot Sequence with GDM Greeter
- Standard Boot Sequence with Automatic Login
- Boot Sequence with Timeout Exception
- Graphical Boot Splash
- Boot Sequence With Encrypted File System
- Boot with Graphical OS Selector
- Boot Splash With Kernel Panic/Boot Failure
- Boot Sequence With Kernel Oops/Warning During Boot
- Boot Sequence With Disk Check
- 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:
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.
Boot with Graphical OS Selector
Option 1 – Simple OS Selector with single list of OSs
If the user presses ESC during the boot splash sequence, the OS Selector will be triggered (possible flows in the diagram below). Unless the user decides to interrupt the current boot process by booting another OS, it will continue in the background, all the way through to the login screen or user session (if automatic login is enabled).
OS Selector – UI flow (download SVG)
OS Selection Screen
Example screen (wireframe):
Note: 12 options per screen maximum, legacy OSs always at the top
OS Selection Screen enables the user to:
- view the list of all versions of all OSs (e.g. list of different Ubuntu kernels + other OSs)
- reboot into another OS
Appearance
Appearance of the OS Selector should ensure that legacy OSs are easily recognizable at the top of the list.
It is important to clearly highlight the currently booting OS (at the top of the list) with the animated spinner (preferred) or "Boot in progress..." right-aligned text.
The currently booting OS should always be displayed at the top of the legacy OS list. Other legacy OSs should be displayed underneath, in alphabetical order.
Other versions of legacy OSs should be displayed as a secondary list below, in alphabetical order.
Behaviours
Keypresses:
- Selecting the OS: up and down arrow keys
- Booting selected OS: Enter
- Switching the pages if the list is longer than one page: PageUp/Page Down
- Exiting the screen: ESC or Enter if the currently selected OS is booting in the background
Pointing devices:
- Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting
- Scrolling of the list available via scrollbars or mouse wheel/trackpad gesture
Automatic timeout:
- If the user does nothing for 20 seconds, the OS Switcher should be closed automatically.
Transitions
- OS Selector should fade in over 0.3s and fade out over 0.3s when closing.
Option 2 (preferred) – OS Selector with floating logos
In this solution, when the user triggers the OS Selector, he will be presented with the logos of the legacy OSs, grouped in one row, with OS name beneath each logo. There will be up to 4 logos displayed at one time, with the ability to scroll horizontally using left and right arrow keys if there are more than 4 legacy OSs installed.
OS Selector with OS logos – UI flow (download SVG)
Primary OS Selection Screen
Example screen (wireframe):
Note: 4 options per screen maximum, Ubuntu always first on the left, other options ordered alphabetically
Primary OS Selection Screen enables the user to:
- view the list of all legacy OSs
- Access the secondary selection screen, if any of the OSs has more than 1 version installed
- reboot into another legacy OS
Appearance
Appearance of the Primary OS Selector Screen should ensure that legacy OSs are easily recognizable and their logos are presented in a visually attractive way.
For each legacy OS there should be the following information displayed underneath the logo:
- OS name (at all times) and version number (if available). For example: Ubuntu 9.10, Mac OS X 10.5, Windows 7, Fedora 11. Kernel numbers or any other information for Linux-based OSs should not be displayed.
- "Boot in progress...", for the currently booting OS, regardless if it is selected or not
- "Press Enter to boot", for the currently selected OS, unless the currently booting OS is selected
- "Press Space for more choices" for the currently selected OS with more than one version available
The logos used should be stylized to match the overall look & feel of the splash screen.
- All Ubuntu versions should use the stylized "Circle of Friends" symbol
- All Kubuntu versions should use the stylized Kubuntu "Circle of Friends" symbol
- All other Linux distributions (incl. Ubuntu and Kubuntu derivatives) should use the stylized Linux Penguin logo
- Mac OS (all versions) should use a stylized Apple logo
- Windows (all versions) should use a stylized Windows logo
- Any other operating system should use a default disc icon
All of the above icons will be supplied with the package and, to maintain consistent appearance, should not be replaced or modified.
Behaviours
Keypresses:
- Selecting the OS: left and right arrow keys
- Booting selected OS: Enter
- Accessing the Secondary Selection Screen: Space, when the OS with more than one version is selected
- Exiting the screen: ESC or Enter if the currently selected OS is booting in the background
Pointing devices:
- Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting
- Horizontal scrolling of the list available via arrow buttons on the left and right
Automatic timeout:
- If the user does nothing for 20 seconds, the OS Switcher should be closed automatically.
Transitions
- When selected, the OS logo should grow smoothly and fill with color
- The horizontal scrolling should use smooth easing
- The Secondary Selection Screen should slide up from the bottom smoothly, and the Primary Selection Screen should fade out over 0.3s
- All sliding animation should use smooth easing
Secondary OS Selection Screen
Example screen (wireframe):
Note: 12 options per screen maximum, currently booting version at the top, other options ordered alphabetically
Secondary OS Selection Screen enables the user to:
- view the list of all versions of a particular OS
- reboot into another version of a particular OS
Appearance
All options should be displayed as a vertical list, with 12 options per screen maximum.
All options should be displayed as OS name, version number, kernel version number, for example: Ubuntu 9.10, kernel no. 2.80.
The currently booting OS should be displayed at the top of the list, with "Boot in progress..." text aligned to the right.
The currently selected OS that is not booting, should have the "Press Enter to boot" text aligned to the right.
Behaviours
Keypresses:
- Selecting the OS: up and down arrow keys
- Booting selected OS: Enter
- Skipping pages if there's more than one page: Pg Up, Pg Down
- Returning to the Primary OS Selection Screen: ESC
- Exiting the OS Selector: Enter if the currently selected OS is booting
Pointing devices:
- Single-click selects the OS, double-click boots the OS, or closes the OS Selector, if the currently selected OS is booting
- Scrolling of the list available via scrollbars or mouse wheel/trackpad gesture
Automatic timeout:
- If the user does nothing for 20 seconds, the OS Switcher should be closed automatically.
Transitions
- When triggered, the Secondary Selection Screen should slide up from the bottom smoothly, and the Primary Selection Screen should fade out over 0.3s
- If the user presses ESC, the Secondary Selection Screen should slide down and the Primary Selection Screen should fade in over 0.3s.
- All sliding animation should use smooth easing
Boot Splash With Kernel Panic/Boot Failure
If there is Kernel Panic during the boot splash sequence, a warning message should be displayed, along with the kernel messages. The user should be informed about the need to reboot. The Kernel Panic message should have consistent appearance regardless of whether the user is booting or is already logged in.
Boot Sequence with Kernel Panic – UI flow
Kernel Panic screen (wireframe):
Boot Sequence With Kernel Oops/Warning During Boot
If a Kernel Oops occurs during the boot splash sequence, the user should be informed about the error without interrupting the boot process.
Boot Sequence with Kernel Oops – UI flow
Kernel Oops screen (wireframe):
Appearance
The error message styling should provide good legibility, without being too prominent on the screen.
Behaviours
Error message should fade in over 100ms and stay on the screen for 3000ms or the remaining boot splash sequence time, whichever is shorter. It should fade out over 300ms if the boot splash sequence hasn't concluded before the 3000ms timeout or in sync with the boot splash screen if it has.
Boot Sequence With Disk Check
Disk Check – UI flow (download SVG)
Disk Check screen (wireframe)
Disk Check With errors (wireframe)
Disk Check fail (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.
Keypresses: ESC cancels the disk check.
Comments
Go to DesktopExperienceTeam/KarmicBootExperienceDesignSpec/Comments
DesktopExperienceTeam/KarmicBootExperienceDesignSpec (last edited 2009-11-12 18:17:50 by 72-254-192-38)