Skip to main content
Jump to: navigation, search

Difference between revisions of "Orion/Page Layout"

(Github)
Line 17: Line 17:
  
 
=== Github ===
 
=== Github ===
Github's primary and discovery links are organized in two rows.  The top row is mostly concerned with things related to your overall account, and the bottom row seems more discovery focused, combined with a search box.  (A little upside down conceptually, but the account links are given more prominence since they are more common.)   
+
Github's primary and discovery links are organized in two rows.  The top row is mostly concerned with things related to your overall account, and the bottom row seems more discovery focused, combined with a search box.  (A little upside down conceptually, but presumably the account links are given more prominence since they are more common.)   
  
 
Tasks are organized in tabs.  The layout as it relates to what you are doing is very structured/explicit, with the downside that there might be a lot of vertical space used before you get to the primary task at hand.  Note there is not an explicit "page title" from a task point of view, just "Github."
 
Tasks are organized in tabs.  The layout as it relates to what you are doing is very structured/explicit, with the downside that there might be a lot of vertical space used before you get to the primary task at hand.  Note there is not an explicit "page title" from a task point of view, just "Github."

Revision as of 13:31, 30 November 2011

We have often said that in Orion, a page is defined as "task + resource." We wish to follow a common page layout so that it's easy for the user to understand where to find the tasks they are interested in performing. In general, the top of the page contains links to other tasks and resources that you might wish to discover, and as you move down the page, the buttons and links become more focused on the task at hand.

The visual layout to support this idea has had to balance this idea of "moving down the page" with conserving vertical real estate. We don't want to take up too much of the page with items not directly related to the content that you are trying to work with.

We use the following terms when talking about the page organization.

  • Discovery links appear prominently/consistently on the page and teach you what can you do
  • Primary navigation links appear prominently/consistently and help you to search for things or go to common tasks
  • Page title describes the kind of page/task you are on
  • Where I am indicates where you are and perhaps has a breadcrumb to lead you elsewhere.
  • Task links (or tabs or buttons) help you manipulate the entire task/resource at hand, there might be multiple levels of task links depending on what the page is doing
  • Resource/edit links (or buttons, gestures, etc.) appear inside the main resource you are working with and help to edit/act on that resource

For Orion pages, then, if a page is generally "task + resource" then the visual on the page that orients you is a combination of the Page Title and Where I am. Note also, that this combination is typically shown in the browser tab so you can quickly find the thing you want to work on when it's already open.

Site Examples

We've looked primarily to other developer sites for examples of how this kind of layout is done. Our main comparisons have been Github and Jazz.

Github

Github's primary and discovery links are organized in two rows. The top row is mostly concerned with things related to your overall account, and the bottom row seems more discovery focused, combined with a search box. (A little upside down conceptually, but presumably the account links are given more prominence since they are more common.)

Tasks are organized in tabs. The layout as it relates to what you are doing is very structured/explicit, with the downside that there might be a lot of vertical space used before you get to the primary task at hand. Note there is not an explicit "page title" from a task point of view, just "Github."

Githubrepo.png

The browser tab uses "where I am - page title". Githubtab.png

Jazz

Jazz is navigating across various products (called projects) as well as helping navigate the jazz community (blogs, etc.). The top set of menus/links could be considered the high level discovery links (similar to what github puts in the second row). A second "bar" of links combines the top level project "where I am" (page title?) on the left with the account related links on the right. A third level of links/tabs navigates the secondary tasks, and the search appears on the right (the search is scoped to this secondary level). All of this task navigation is in various blue colors, with the resource itself shown in white.

The top part of the resource includes more "where I am" (with breadcrumb) along with the tasks that act upon the whole resource. Underneath, we can use tabs to pick a more specific view of the resource and then edit those aspects of the resource.

Once again, this is very structured, with the downside of vertical space required to present the structure before you can actually work on the task.

Jazzworkitem.png

The browser tab uses "where I am + summary". Jazztab.png Note that there is no use of the primary task or page title "Rational Team Concert" or "Work Item". This can work because the name of the resource (Enhancement NNN, Work Item NNN, etc.) implies that you are using workitems.

Orion 0.2/0.3

Orion 0.4

Back to the top