Difference between revisions of "Orion/Page Layout"

From Eclipsepedia

Jump to: navigation, search
(Proposed Layout)
(Proposed Layout)
Line 136: Line 136:
Here's the editor with an outliner.
Line 160: Line 154:
[[Image: orionsectionoutline.png]]
[[Image: orionsectionoutline.png]]
Here is the git repo page using the outline approach.  (The user preferences page is probably a more likely example of a page needing outlined sections.

Revision as of 17:59, 4 January 2012



Page Anatomy (Old) in Orion 0.2/0.3





Other Site Examples


Github (pre "skinny header")


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. (As of 12/2011, Github has introduced the [skinny header] which is a lot more Orion-like in collapsing the header content vertically). Note there is not an explicit "page title" from a task point of view, just "Github."









Orion 0.2/0.3


One of the biggest changes from most website header layouts was to include information about "where I am" (the resource being edited) in the header. We thought we could constrain vertical space by using the breadcrumb to help navigate and show current location.









The git functionality came later in the release, and you can tell that things that perhaps should have been shown underneath the header started to get packed into the header, because we didn't have a formal information hierarchy or multiple dimensions of "where I am". 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.




Revisiting Page Anatomy in Orion 0.4



  • 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. Perhaps the "where I am" and breadcrumb navigation should be placed below the header. This is more in line with what other sites do, and also means that if we collapse the header when editing, etc., some of the more useful bits currently in the header will still be visible in a secondary layer beneath the header.
  • Footer content. The footer content was never designed with any structure in mind, and some of the elements that appear in the header could be moved to the footer.

Page Elements

For Orion 0.4, we further expand on the page elements and introduce semantic elements (such as "Legalese") for info that we used to refer to visually ("the footer.")

  • Branding (top left corner)
  • Legalese (usually in the footer)
  • Discovery links appear prominently/consistently on the page to teach you what can you do. These links may even link to other sites. They are the least related to the task at hand, but you should know about them.
  • Incidental links appear less prominently, but still consistently, on the page. They are links to less important places, such as user guides, documentation, support info, etc. (usually in the footer)
  • User info shows who you are and lets you manipulate your Orion environment
    • login, logout, account profile
    • settings/preferences
    • sometimes Help goes here
  • Notifications alert the user to error messages, progress or status info, etc.
    • Resource Name is the "thing" that you are working with, having resolved the various dimensions and containment.
  • Resource View Controls
    • Pagination Navigation
    • View switching
    • View options
  • Outliners help to navigate through a large resource
  • Sections show different parts/aspects of the same resource/task that one may want to work with.

Note that this list captures the atomic semantic elements that will get combined into a visual area. For example, Jazz defines an area on a page called the "Page Control & Resource Header Area" which contains the "Where I Am," "Task Commands," "In-resource navigation," etc. The important thing is to establish the visual hierarchy and ensure that we have room for the various atomic elements. It's not clear that any one Orion page contains all of these elements, but we need to determine that when keeping room for them...

Proposed Layout

The following wireframe repositions the page elements by including all static information in a smaller top area, with task and resource information in a separate area below. The notifications are moved to the footer. This wireframe includes a full content area (the entire wireframe is 1024x768) for perspective.


Please note this is a color-coded wireframe, not a proposed style! It's not assumed that the things shown as boxes will in fact have borders or colored trim. The following example shows the header for an Orion editor using this new anatomy. (This is the last wireframe that shows the whole screen. For the rest of the pictures, we'll just show the header and resource part since the footer is basically the same.)


Here's an example of git log using the new header. Note that the branch and local/remote switching can now be done in the second section without a massive breadcrumb.


When the resource is large enough to require a dedicated outliner, a command toolbar is applied to each pane separately.


Pages that have distinct "sections" include a command area (toolbar) with each section. There is no "global" toolbar since there is not a "default" section. Again, note that this is a wireframe and it's very likely the sections wouldn't actually have boxed headers. What's important is that we get common styling and conventions for the associated commands, etc.


Here is the "sectional" page wireframe applied to the new "flat style" repository page.


For pages with many sections, we expect that we'll need an outliner for navigating the sections. It remains to be seen whether the outliner would show only one section at a time (master/details pattern) or just navigate to the selected section. It's not clear that every page with "sections" should default to an outline view, we'll need to figure this out.


Apart from doing the visual design (color, fonts, trim, etc.) for the header and the command sections, some other issues need to be determined:

  • What are the conventions for representing commands in the various scopes? Links, icons, buttons, etc.
    • command toolbar
    • section commands
    • item level commands
  • How does a navigation pane like "Favorites" fit into this model? Do we consider it the "super outliner"
  • How would you get to Favorites when you already have an outliner, does it "swap in?"