1. 1. vim:filetype=moin:set expandtab:set textwidth=0:

<>

||<>||

Unity Places & Dash

Rationale

Ubuntu Netbook Edition 10.04 introduces a new desktop metaphor, the "Place". A place is an appliance optimized for browsing and searching a specific kind of content. Think of a place as a browser specially tailored for viewing and searching objects of a certain kind, or objects gathered from a specific source.

The primary use cases enabled by places are browsing, searching, and sophisticated drag-and-drop. For example, the Files place provides file browsing and file search. For more advanced features, such as renaming files or creating archives, the Files place would delegate to an application like Nautilus or Dolphin.

In one sense, places are predominately "read-only" interfaces because they emphasize content discovery over content creation. To understand the crucial difference between places and applications, it's useful to think of applications as sets of operations on data, and to think of places as views on data that generally avoid side effects. (In practice, this distinction is not so clear-cut--applications usually allow users to browse content, and places can allow operations producing side effects.)

Examples

As an example, consider the Files place. It is an appliance optimized for browsing and searching files. The kind of content that the user interacts with in the Files place includes documents, folders, movies, etc. These types are related insofar as the user would normally encounter objects of these types as flat files stored in a hierarchical filesystem, each with a particular file type, name, icon, size, and default application. The Files place should be thought of as a browser specially tailored for viewing and searching files; it encompasses the experiences of browsing, searching, and opening the user's files.

Another example is the Applications place, an appliance optimized for browsing and searching applications. The kind of content that the user interacts with in the Applications place includes installed applications, and applications available in the Ubuntu Software Center. These types are related insofar as objects of these types behave like Applications; they can be launched, placed in the Launcher, installed or uninstalled, etc. The Applications place should be thought of as a browser specially tailored for viewing and searching applications; it encompasses the experiences of browsing and searching (and launching) applications.

Plans for 10.04

A Home screen, presented to the user when no place is selected.

The places being developed for UNR 10.04 are:

Important Concepts

2.1 Browsing

Each place offers an intuitive, interesting, and beautiful way to browse the content found within it, and should take advantage of its focus on a particular kind of content to present that content in the best way possible. The user who is browsing through files is interested in very different things from the user who is browsing through applications; the former may want to see rich file previews, and the latter may want to see only games. Places embrace these differences by creating browsing experiences specially suited for different kinds of content.

2.2 Search

Similar to browsing, each place should take advantage of its focus on a particular kind of content to search for that content in the best way possible. Just as with browsing, the user who is searching for a file is interested in very different things from the user who is searching for an application; the former may be looking for a file he edited last week, and the latter may be looking for an application that is not yet installed. Each place is responsible for searching a particular kind of content, so the search can be more accurate and precise without becoming too complex.

High-level Features

2.3 Dash

The main content area where places are browsed and search results are displayed is called "the dash".

Dash View Hierarchy

The dash provides access to places, which in turn provide access to different, closely-related sections of content. Within these sections are groups of items:

{{attachment:Dash Universe.png}}

For example, the Applications place has sections for each major application category, such as Games and Internet. Within each of these sections are three groups--"Most Used", "Installed", and "Available"---which organize individual application items.

2.4 Places Bar

{{attachment:Places Bar.png|Places Bar.png}}

The Places Bar contains icons for each available place; all mounted volumes excluding internal disks; and a trash icon. The purpose of the Places Bar is to let users easily navigate among places, quickly access external devices like USB sticks, and use the trash icon to remove elements from their environment.

The Places Bar displays the following icons, in order:

1. The Applications place icon.

2. The Files place icon.

3. Flexible space, pushing Place icons to the left, and Device icons to the right.

4. An icon for each volume or device. This does not include the system partition, but includes mounted partitions, external disks, optical media, and network shares. These icons are aligned right, to the left of the trash icon.

5. A Trash icon, aligned furthest to the right.

Each icon in the place bar may be presented in four states:

When a place icon is clicked, the icon becomes Focused and the corresponding place is displayed. The previously focused place icon becomes Normal (if there was a previously focused place). When the Dash is first accessed, the Home screen is displayed and all place icons are Normal (no Place icon is Focused).

Icon Labels

Icon labels are shown centered below icons in the Hover state.

Hover labels are as follows:

Trash

When the trash icon is clicked, it opens the user's Trash folder in the user's preferred file browser. In Nautilus, for example, the location "trash:///" is opened.

The Trash icon is also an important drag target. The following elements can be dropped onto the Trash icon:

The Trash should display the appropriate icon specified above as soon as the drag begins, for the duration of the drag. Once the drag is over the Trash, it should enter Drag-over state to visually indicate that the drag operation is valid. If the user drags something that cannot be placed in the trash, the Trash should not enter Drag-over state; instead, it should be Insensitive for the duration of the drag to indicate that the drag operation is not valid.

Devices

Mounted volumes, excluding internal disks, appear in the Places Bar. If the device is writable, the user can drag and drop files onto the device icon to begin copying files to the device.

2.5 Search Field

{{attachment:search-field.jpg}}

The search field behaves much like the https://wiki.ubuntu.com/SoftwareCenter#Search%20field(search field used in the Ubuntu Software Center). It consists of:

2.6 Scroll Bar

The Scroll Bar behaves just like a normal scrollbar. It is not shown when there is sufficient vertical space to display the current view without scrolling.

2.7 Section Button

The Section Button is a segmented button control appearing at the top of the Dash when a place is viewed. It presents a set of sections, each representing a different view of the content exposed by the place. For example, the section button in the Applications place displays sections corresponding to available application categories:

{{{

}}}

The section button in the Files place displays sections corresponding to available file types:

{{{

}}}

It may be helpful to think of the section button as a tab bar on the Dash. A segment is drawn in one of three states:

The left-most segment corresponds to the default section, and is Focused by default while other segments are Normal when a place is first opened. Here's an example of a segmented button control exhibiting Focused, Hover, and normal States:

{{attachment:Section Button - Example.png}}

Scrolling Behavior

The Section Button scrolls with the main view.

2.8 Path Button

{{attachment:path-button.jpg}}

When content is browsed hierarchically (e.g. browsing folder contents in the Files place), a Path Button similar to the control described in the https://wiki.ubuntu.com/SoftwareCenter#path-button(Ubuntu Software Center specification) is displayed. The behavior is identical, but the visual styling is different for UNE.

Path Components

{{{

}}}

The components of the Path Button include:

Path Button and Section Button

The Path Button is very similar to Section Button: both offer navigation via clickable segments, and both display the current Place's default section in the first segment. Due to these similarities, and due to the fact that only one of these two navigational controls is displayed at a time, it is possible to smoothly morph the Section Button into a Path Button and vice versa when a view determines that it needs to show one and not the other.

This effect will make the transition between browsing sections and browsing content hierarchically feel smart, as the interface correctly anticipated and adapted to the user's navigational needs with an explicit and obvious transformation.

Morphing from a Section Button

The Section Button morphs into a Path Button by:

Morphing to a Section Button

Put simply, perform the inverse of the morph from Section Button to Path Button.

Scrolling Behavior

The Path Button scrolls with the main view.

Wide Path Buttons

When the Path Button becomes too wide for the current view, the path components, from left to right, excluding the first (root) path component, are collapsed to an ellipsis until the Path Button fits within the current view.

Path components ellipsize at middle when they are longer than 40 characters.

2.9 Groups

Groups are used to organize items displayed on the dash. Here's an example of three groups--Recent, Downloads, and Favorite Folders--used in the Files place to organize and present useful files:

{{attachment:Groups.png}}

Group Headers

Groups consist of a collection of items, delineated by a group header:

{{attachment:Section Header.png|Section Header.png}}

Group headers consist of:

Scrolling Behavior

When scrolling down (content is moving up), the topmost group header "sticks" to the bottom of the Places Bar the next group's header pushes the topmost header off-screen.

For example, if Lola is viewing the All Applications section of the Applications place, and she scrolls until the header of the group containing all installed applications ("Installed") rests immediately underneath the Places Bar, the group header will remain immediately below the Places Bar as she continues to scroll downward. Application items contained within the Installed group continue to scroll upward, "underneath" the group header and Places Bar, then off-screen. The "Installed" group header eventually scrolls with the content again as the header of the next group, "Available", pushes the "Installed" group header away.

Use Cases

2.10 Accessing Places

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions None

Success End Condition The Places Bar is shown, along with the user's previous place context

Failure Conditions None

}}}

Primary Scenario

USE CASE ENDS

Variation 1.b The user presses and releases the Super key

RETURN TO 2

Notes

When the Netbook User's session first starts, the Dash is visible and displays the Home screen.

It may be helpful to think of the traditional Desktop and application windows as one world, and the Dash as another world. The Ubuntu Button is the gateway between these two worlds.

2.11 Returning to the previous context using Escape

{{{

Level Sky

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions The Netbook User is in a context listed below.

Success End Condition Upon pressing Escape, the Netbook User is returned to

Failure Conditions The Netbook User presses Escape in Application context.

}}}

Context ordering is:

1. Application context

2. Home screen

3. Place - default view

4. Place - search view

5. Place - hierarchical browsing

Think of these contexts as being pushed onto a "context stack" and pressing Escape pops the stack (top of the stack is the last item in the list above).

Primary Scenario

1. Upon pressing Escape, the Netbook User is returned to the previous valid context. For example, pressing Escape when browsing the (3) Applications place returns the Netbook User to the (2) Home screen. As another example, pressing Escape three times after (4) searching for files in the Files place returns the Netbook user to (3) the Files place default view, then to (2) the Home screen, then (1) the previous Application context.

USE CASE ENDS

2.12 Navigating the default view of a place with the keyboard

{{{

Level Fish

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions The Netbook User is viewing the default view of a place

Success End Condition The Netbook User can access the Search Entry and Activities by pressing Tab

Failure Conditions None

}}}

Primary Scenario

1. By default, keyboard focus resides in the Search Entry.

2. First Tab keeps keyboard focus in the Search Entry but makes this focus apparent by clearing the search hint and displaying a blinking cursor in the Search Entry.

3. Another Tab brings keyboard focus to the first item in the first group.

4. At this point, the arrow keys move the selection among items in the focused group, or to items in the adjacent groups.

5. Pressing Tab again moves focus to the first item in the next group, if one exists. When Tab is used to move the focus to a group, the group header should be scrolled into view (below the Places bar if possible).

6. Another Tab returns keyboard focus to the Search Entry.

USE CASE ENDS

Notes

Shift+Tab performs the inverse movement of Tab.

2.13 Dragging to the Trash

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions The Netbook User decides to discard some item in his environment

Success End Condition The item dragged to the Trash is removed from the user's environment

Failure Conditions The item cannot be placed in the Trash

}}}

Primary Scenario

USE CASE ENDS

1.b Variation: The item cannot be placed in the Trash

USE CASE ENDS

2.14 Browsing the Trash

{{{

Level Fish

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions None

Success End Condition The Trash directory is opened in the appropriate File Browser

Failure Conditions None

}}}

Primary Scenario

1. The Netbook User clicks on the Trash icon.

2. The "trash:///" location is opened in the appropriate File Browser (i.e. the File Browser used with the command "xdg-open trash:///").

USE CASE ENDS

2.15 Adding a new device

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger The Netbook User plugs in an external device that mounts as a volume

Preconditions None

Success End Condition An icon representing the device is placed at the head of the list of devices

Failure Conditions The Places Bar is too crowded to accommodate an additional icon

}}}

Primary Scenario

{{attachment:Devices.png}}

USE CASE ENDS

1.b Variation: The Places Bar is too crowded to accommodate an additional icon

USE CASE ENDS

Notes

In Lucid+1, the Places bar will contain an icon labeled "All Places," which is analagous to the All Applications entry in the Launcher (Launcher has All Applications entry; Places will have All Places entry). Clicking "All Places" reveals the "Places place" -- all possible contents of the Places bar are shown in the Dash, and the user can reorganize the Places bar as he sees fit.

1.c Variation: Places are not visible when the device is added

1. A notification is displayed using notify-osd to indicate that the device was successfully mounted. The notification is structured as follows: Icon is the device icon as it appears in Places; Title is " is now available" where "" is the name used in the device icon's label as it appears in Places; and there is no Message body.

USE CASE ENDS

2.16 Browsing the contents of a device

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions A device is mounted with an icon in the Places Bar

Success End Condition The device is opened for browsing in Nautilus.

Failure Conditions None

}}}

Primary Scenario

1. The Netbook User clicks on the device icon in the Places Bar

2. Nautilus opens to display the content of the device.

USE CASE ENDS

2.17 Copying a file to a device

{{{

Level Fish

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions A writable device is mounted with an icon in the Places Bar

Success End Condition The file begins copying to the device

Failure Conditions None

}}}

Primary Scenario

USE CASE ENDS

2.18 Removing a device from the Places bar

{{{

Level Fish

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions A device is mounted with an icon in the Places Bar

Success End Condition The device is unmounted and its icon is removed from the Places Bar

Failure Conditions The device is busy

}}}

Primary Scenario

1. The Netbook User begins dragging a device icon. The Trash icon becomes an Eject icon for the duration of the drag.

2. Dragging the device icon off of the Places Bar leaves an empty position in the Places Bar. This position does not potentially close during the drag as similar gaps close on the Launcher when Launcher entries are being removed.

3. Dragging the device icon over the Eject icon causes the Eject icon to enter drag-over state and display the label "Eject".

4. Dropping the device icon on the Eject icon unmounts (and ejects if possible) the device. The Eject icon reverts to a Trash icon.

5. While the device is being unmounted, an activity spinner is displayed in the empty Places Bar position.

6. The device unmounts successfully, the activity spinner disappears, and the icons to the left of the empty position slide right, filling the empty position.

USE CASE ENDS

3.b Variation: The device is busy

1. When the device is busy, the Trash becomes Insensitive to indicate that it cannot accept the device. As the Trash is Insensitive, no Drag-over label is shown.

USE CASE ENDS

2.19 Removing a device by other means

{{{

Level Fish

Primary Actor Netbook User

Other Actors None

Trigger A device is ejected/unmounted independently of

Preconditions The device is mounted with an icon in the Places Bar

Success End Condition The device's icon is removed from the Places Bar

Failure Conditions None

}}}

Primary Scenario

1. The Netbook User unmounts a device by some method other than via the Places Bar.

2. The corresponding device icon in the places bar quickly fades away and any device icons to the left slide right by one position to fill the empty position.

USE CASE ENDS

2.20 Entering a query in the Search Field

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions The Search Field is displaying its hint.

Success End Condition The Search Field contains the query string typed by the user.

Failure Conditions None

}}}

Primary Scenario

1. The Netbook User places the caret in the Search Field by pressing Tab before any other interaction in the current place; or by clicking on the Search Field. The Search Field is also implicitly focused, meaning that the user may begin typing a search query without explicitly placing input focus in the search field. Typing a search query when no other element has input focus immediately places input focus in the Search Field and allows the user to input the search query.

2. Once the caret is placed in the Search Field, the hint is now longer displayed.

3. The Netbook User types the search query, causing it to be entered in the Search Field.

4. The search view is displayed.

USE CASE ENDS

4.b Variation: The Path Button is visible (hierarchical browsing is initiated)

1. If the Netbook User modifies the contents of the Search Field, the hierarchical browsing context is destroyed and the search view of the current section is displayed.

RETURN TO 4

2.21 Clearing a query in the Search Field

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger None

Preconditions The Search Field contains a query string.

Success End Condition The Search Field displays its hint.

Failure Conditions None

}}}

Primary Scenario

1. The Netbook User presses the clear button in the Search Field; manually deletes the text in the Search Field; or presses Escape while viewing search results.

2. The query is deleted from the Search Field, and the hint is displayed.

3. The Netbook User is presented with the default view of the current section.

USE CASE ENDS

3.b Variation: The Path Button is visible (hierarchical browsing is initiated)

1. If the Netbook User modifies the query, and after modifying the query the Search Field is non-empty, this constitutes a new search, and the hierarchical browsing context is destroyed and the Netbook User is brought back to the search view. On the other hand, if the Netbook User completely deletes the query string resulting in the Search Field displaying its hint, the hierarchical browsing context is not interrupted.

USE CASE ENDS

2.22 Presentation of Individual Search Results

{{{

Level Sky

Primary Actor Netbook User

Other Actors None

Trigger The Netbook User performs a search with query X.

Preconditions None

Success End Condition Search results with labels containing words in the query string highlight the

Failure Conditions Labels for the search result do not contain any words from the query string.

}}}

Primary Scenario

1. "Match words" are words that appear in both the query string, and in any label displayed with an individual search result. Match words are highlighted when found; match words are determined case-independently; and match words may only be whole words from the query string.

Examples:

USE CASE ENDS

Notes

These matches are determined after the fact and do not play a role in determining which search results are presented. They are merely meant to give the user insight into complex search processes.

2.23 Presentation of Groups of Search Results

{{{

Level Sky

Primary Actor Netbook User

Other Actors Focused Place

Trigger The Netbook User performs a search in the Focused Place

Preconditions None

Success End Condition Search results make efficient use of available screen space

Failure Conditions There is more than one group of results, but given the default

}}}

Primary Scenario

1. The search results are displayed, using the full height available to display search results.

USE CASE ENDS

1.b Variation: There is empty space available at the bottom of the screen

1. In order of smallest group to largest: if a group has enough results to display another row, and there is still room to display another row, another row of results should be displayed in that group.

2. If all groups with sufficient results are expanded by one row and there is still empty space available at the bottom of the screen, repeat the previous step; otherwise, proceed.

USE CASE ENDS

Python pseudocode demonstrating the algorithm loosly described above:

{{{

hidden_rows = sum(g.hidden_rows() for g in groups)

empty_rows = screen.rows_above_fold - sum(s.visible_rows() for g in groups)

while 0 < empty_rows and 0 < hidden_rows:

}}}

1.b There is only one group of results

1. When there is only one group of results, it should be displayed fully expanded.

USE CASE ENDS

2.24 Dragging a Selection to the Ubuntu Button

Low priority for Lucid

{{{

Level Sea

Primary Actor Netbook User

Other Actors None

Trigger The Netbook User drags a selection over the Ubuntu button

Preconditions The Dash is not currently shown

Success End Condition The Dash (Home screen & Places bar) is shown

Failure Conditions The Netbook User dismisses the Dash without ending the drag

}}}

Primary Scenario

1. Once the drag locus is over the Ubuntu button, the Ubuntu button acts as if it were clicked; the Dash is displayed.

USE CASE ENDS

1.b Variation: The Netbook User dismisses the Dash without ending the drag

1. Moving the drag locus away from the Ubuntu button, and eventually placing it back over the Ubuntu button has the same effect as clicking on the Ubuntu button when the Dash is showing: the Dash is dismissed, and the previously focused application is shown.

Visual Design

2.25 Visual Treatment Needed

* Group Header: general appearance; minimized; minimzed, maximized, and restore buttons.

2.26 Icons Needed

2.27 Testing

1. Subscribe to the Vala PPA for latest Vala: {{{1. add-apt-repository ppa:vala-team/ppa}}}

2. Get added to Launchpad team canonical-dx-team.

3. Visit https://edge.launchpad.net/~YOUR-LP-ID/+archivesubscriptions and click "View" next to "Private PPA for Canonical Desktop Experience Team".

4. Select your version of Ubuntu and add the PPA described there following the instructions provided.

5. To get dependencies: {{{5. apt-get update; apt-get install liblauncher clutk unity libgee-dev; apt-get build-dep liblauncher clutk unity}}}

6. For the time being, Unity must be built: {{{$ bzr branch lp:~canonical-dx-team/anjali/unity; cd unity; ./autogen.sh; make; sudo make install}}}

7. Run Unity: {{{$ unity}}} or {{{$ unity -p}}} for "popup" (debug) mode.