Web Communications, EOP October 13th, 2009 (v1.6)
Content Migration Strategy – “Courts” The image below is a screen shot of the new Information Architecture (IA) for the California Courts Judicial Branch. The purpose of this document is to help guide you, the subject matter expert (SME), in understanding the new information architecture and structural organization of the re‐designed site. Below is an example of the “Courts” section, which includes a series of subset “landing pages” and “content pages” with various “page layouts." These terms will be more clearly defined later in this document. Complete Information Architecture
Ctrll+Click to follow link for larger view (.PDF)
Content to Migrate Within the “Courts” section you will be responsible for auditing your existing content and in some cases, you will need to massage content so that it maps over to the new design structure. The Web Communication team will provide a migration package containing metrics, inventory and guides to help you understand the new template designs and page elements. Recommendations and best practices for streamlining content for online consumption may also be provided upon request. Page types include, “Overview”, “Landing” and “Target (Content)”. In the example below you see the navigational path to the “Jury Basics” page and the different page layouts/templates applied.
Courts (Overview)
o Superior Courts o
o o o
o
Courts of Appeal Supreme Court About California Courts Jury (Landing) Jury Basics (Target) Trial Process Jury Instructions Employer Info Jury Improvements Find My Court
Navigational Path As seen below, users are presented with various page layouts while navigating down a path, but consistent core page components and interface elements are relevant to both browsing and searching; they establish and maintain a broad sense of a web site as a navigable space and provide a “you are here” sense of local placement within the larger dimension of the site.
A
A. B. C. D.
Home Page Overview Page Landing Page Target Page
B
C
D
Page Types When users are searching for content on a site, each page they encounter must do one of two things: either the page provides the content they are seeking or it delivers them closer to the page that does.
One Column Example
Two Column Example
Three Column Example
Menu Plus Example
Overview (Three Columns) Overview pages offer a consolidated and organized listing of landing pages associated to the high‐level topic or subject. The main use of this page is to provide users with enough information to narrow down their selection. Ctrll+Click to follow link for example
A three column design that emphasizes the content groupings top high priority tasks. Elements Include: Left side navigation General overview/description/Imagery Relative content groupings Optional left and right column modules for links to supporting information o Contact Info o Quicklinks o How do I’s o What’s new o News Landing (Three Columns) Landing pages offer a listing of links to content pages; this page is the most critical “link in the chain” of pages. Most navigation failures we see are due to poorly‐designed “overview pages”. Users want to decide on the content page from within the ”landing page” to eliminate pogosticking. Ctrll+Click to follow link for example A three column design that emphasizes the content groupings high priority tasks. Elements Include: Left side navigation Targeted overview/description/Imagery Relative content groupings Optional left and right column modules for links to supporting information o Contact Info o Quicklinks o How do I’s o What’s new o News
Target/Content Page(s) The most important page on your site, assuming it contains the content the user seeks at that moment. Content pages are also known to contain lateral navigation, allowing users to jump from content page to content page to gather more information to support their activity. Ctrll+Click to follow link for example
Target/Content Page (Two Columns) Elements Include: Left side navigation Targeted overview/description/Imagery Content (structural markup) Contextual links to supporting content pages Optional left column modules for links to supporting information o How do I’s o Related Links Ctrll+Click to follow link for example
Target/Content Page (Two Columns Menus‐plus Tab) For content rich pages/portals where real estate might be limited Elements include: Left side navigation Targeted overview/description/Imagery Tabular design within the body Content (structural markup) Contextual links to supporting content pages Optional left column modules for links to supporting information o How do I’s o Related Links Ctrll+Click to follow link for example
Target/Content Page (Three Columns) Elements Include: Left side navigation Targeted overview/description/Imagery Content (structural markup) Contextual links to supporting content pages Optional left and right column modules for links to supporting information o How do I’s o Related Links o Contact Info o Quicklinks o What’s new o News o Video Print, Newsletter, Applications (One Column) Standalone “Print”, “News Letter” or “Application” type pages Used sparingly, as it breaks the navigation scheme and acts as a “standalone” page