Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Orion/Page Layout

< Orion
Revision as of 14:45, 1 December 2011 by Susan franklin.us.ibm.com (Talk | contribs) (Revisiting Page Anatomy in Orion 0.4)

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.

Page Anatomy in Orion 0.2/0.3

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. This all seems pretty obvious, but when organizing the page content it has been helpful to be explicit about this approach and to name these tasks and page elements.

In our early work in Orion, we used the following terms when talking about the page organization, from general to specific.

  • Branding isn't functional (though it may link to the home page) but establishes the brand.
  • Discovery links appear prominently/consistently on the page and teach you what can you do. They may even link to other sites. They are the least related to what you are doing.
  • Primary navigation links appear prominently/consistently and help you to search for things or go to common tasks. They may or may not be related to your current task. (The distinction between discovery and primary is not clear, but the main point is that discovery links are there to show you things you might not know you could do otherwise.)
  • User info shows who you are and lets you manipulate your account, login, etc.
  • 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 Commands (links, 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
  • In-resource navigation can help you find your way within a large resource or change the view within that resource.
  • Resource/edit commands (links, 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 to what you are doing is a combination of "Page Title (task) + Where I Am (resource)." 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.


Other Site Examples

We originally looked at other developer sites for examples of how this kind of layout is done. Our main comparisons have been Github and Jazz. Both have similar concepts. (Jazz has a very substantive style guide describing page anatomy and where elements should appear, whereas we have just observed Github and drawn some conclusions).

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. Within the resource, gray bars are used to designate different parts of the resource, and commands/links related to those parts appear in the gray bar, to orient the task to the "section" 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

In the initial designs for Orion, we wanted to honor this structure, but assigning high priority to constraining vertical space. One of the primary tasks in Orion is editing code, a task that is very deep and complex, where as much room is needed for the resource itself as possible. We considered whether we should have a special layout for the editor vs. the other pages, but decided to try and design a layout that would work for all pages, that used less real estate than that used by jazz and github.

Editor

As you can see, the amount of vertical space used for the elements that do not belong to the resource/task at hand is about half that of the space used in jazz (112 vs. 245 pixels). But it is at the cost of combining many of these elements into the header.

In the editor, you don't really see any links/buttons for "in-resource tasks" because most of the tasks involve editing or using keybindings to execute commands that don't appear on the dark toolbar or in the editor.

Editorlayout.png

Navigator

The navigator uses the same approach, but since the "resource" being manipulated is a list of files and folders, there are more commands inside the list.

Navlayout.png

Git

The git functionality came later in the release, and you can tell that we started to run out of space to express all the things we needed. In git, the "Where I Am" is more complicated, because it's not just important to know what resource is being viewed, but also what branch. So we start to get really crowded page headers. We also started to introduce pagination, and we didn't have an explicit place designated for the page navigation links.

Gitlog.png

The git status page is the first page to segment the resource/task into subviews. We did not have a clear/consistent strategy for using trim to delineate sections, or for associating commands that operate on a particular section with the content. (We don't have the equivalent of jazz's gray bars for separation, or of github's inner tab rows with commands)

Gitstatus.png

Revisiting Page Anatomy in Orion 0.4

As seen above, we have outgrown our visual layout/anatomy. We need to revisit the terminology/elements on our pages and ensure that our pages are consistent in showing the various elements.

Problems

  • Header content. The header is too crowded for some views (that are trying to cram multiple levels of "where I am"), yet it is still considered too tall when editing or trying to work on a small screen/tablet device. We've just added a feature to hide the banner/footer when editing. We should consider using more vertical space to address the additional context information, since the user can get rid of it when needed. It's been pointed out that parts of the header (such as the breadcrumb) are still useful when editing, so perhaps we revisit what appears in the banner vs. a secondary layer of "where I am"
  • Resource switching beyond the breadcrumb. We use the breadcrumb for scoping the information on the current page, but there are additional ways to look at the page data (for example, git branches and local/remote). We need multiple levels of "where I am/what I'm looking at" and a way to switch between these. Using "task commands" in the toolbar to accomplish this clutters things up. An early mockup tried to solve these problems in the current header anatomy and it does not seem sufficient. We also need a way for plug-ins to contribute contextual "where I am" information, such as being able to know in the editor which git branch the file came from.
  • Subsection affordances. The commands/links that appear for subsections of a page do not visually relate to the subsections, and it's not always clear which subsections belong together. Users have trouble orienting themselves in pages like "Git Status" and may not notice certain commands (such as push) because the affordances are not clear.
  • Links to related pages. In some workflows, it's very common to open a related page. For example, the "Git Status" page includes mini-logs and links to those logs. But one cannot get to "Git Status" from a "Git Log." We need to be specific about the relationship between pages and provide a place where the user can quickly access "related links." These links are different than discovery or primary nav links. Need to understand how this relates to favorites, and how favorites can be accessed from anywhere.
  • Page Navigation Commands. In 0.3, the page navigation commands appeared alongside the task commands. In the 0.4 stream, we've moved navigation commands to the right on the toolbar. It seems logical to separate these, but we should revisit the location in the context of the larger redesign.

Back to the top