View Source

{section:border=false}
{column}
*us-er ex-pe-ri-ence \[ˈyoōzər ikˈspi(ə)rēəns\]*
noun
A person's perceptions and responses that result from the use or anticipated use of a product, system or service, in other words, the state of mind induced by an artifact or design.

*Our Commitment*
OOI CI is committed to providing a user experience that is intellectually stimulating, scientifically productive, and conducive to transformative innovation. This where you will find all our latest materials related to the design of the OOI user experience. At this time, all our efforts are focused on Release 2 of the Cyberinfrastructure.
{column}

{column:width=250px}
{panel:title=Page Index|borderStyle=none|borderColor=#003366|titleBGColor=#DDDDDD|bgColor=#CCCCCC}

{panel}
{toc:maxLevel=1}
{column}
{section}

{section}
{column}

{panel:title=(i) URLs to key CIUX materials|width=500px|borderStyle=none|borderColor=#003366|titleBGColor=#DAEAF7|bgColor=#EEEEEE}
| [tinyurl.com/ciux-confluence|http://tinyurl.com/ciux-confluence] | this page |
| [tinyurl.com/ciux-website|http://tinyurl.com/ciux-website] | mockups and illustrations website |
| [tinyurl.com/ciux-database|http://tinyurl.com/ciux-database] | filemaker specifications database |
{panel}
{column}

{column:width=250px}
{panel:title=Quick Links|borderStyle=none|borderColor=#003366|titleBGColor=#DDDDDD|bgColor=#DAEAF7}

{panel}
* [R2.0 User Request Tracker|https://docs.google.com/spreadsheet/ccc?key=0AqoUAUnQk7T4dGF3SHZzb2ktM0tFRUwzYTkwZ2xmRlE#gid=8]
* [CIUserDoc:User Documentation]
* [CIPROD:CI User Engagement and Adoption]
* [User Research Statistics|https://confluence.oceanobservatories.org/display/ux/User+Research+Statistics]
* [R2.0 Mockups and Illustrations|https://userexperience.oceanobservatories.org]
* [R2.0 Functional Design Specification|CI R2 UI Specifications^CIUX_R2.0_Functional_Design_Specification_CI_2012-10-22_v-1-41.pdf]
* [R2.0 Graphical Design Specification|CI R2 UI Specifications^CIUX_R2.0_Graphical_Design_Specification_CI_01-11-12_v1-00.pdf]
* [Detailed Specifications and Reports|https://userexperience.oceanobservatories.org/database-reports]
* [ux:Internal Working Documents]
{column}
{section}

h1. Activities and Status

(/)  \- Complete (+) \- In Progress (*b) \- Not Started (*r) \- Paused -- - Not Planned

{section}
{column}

{panel:title=Current Priorities|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff|width=300px}
| (/) | 15-Mar-13 | R2 design revisions resulting from R2.0 Beta Testing complete | |
| (/)\\ | 19-Mar-13 | Plan for integrating design revisions accepted by development and management | |
| (/)\\ | 5-Apr-13 | R2 final artwork complete | |
| (/)\\ | 5-Apr-13 \\ | Design and specification modifications needed by development complete | |
| (+) | 5-Apr-13 | R2 User Documentation complete | [ION User Documentation|https://confluence.oceanobservatories.org/display/CIUserDoc/User+Documentation] |
{panel}
{column}

{column:width=250px}
{panel:title=Planning Documents|borderStyle=none|borderColor=#003366|titleBGColor=#DDDDDD|bgColor=#DAEAF7}

{panel}
* [UX Task Tracking|https://docs.google.com/spreadsheet/ccc?key=0AqoUAUnQk7T4dDNQaEl4WUhMTW15ZW9JWVNHeERBa3c#gid=8]
* [R2.0 Beta Test Plan]
{column}
{section}

{expand:Complete Listing}
{section}
{column:width=900px}

{panel:title=Overview|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
|| R2.0 || R2.1 || R3 || Activity || Key Artifacts ||
| (/) | -- | (*r)\\ | Normative definition of design objectives from product definition and user research |
| -- | (/)\\ | (*b) | Revised design objectives from user research results |
| (/) | (/) | (*b) | Low-fidelity mockups of all key screens (information content and layout) | [R2.0 Mockups and Illustrations|https://userexperience.oceanobservatories.org] |
| (/) | (/) | (*b) | High-fidelity mockups of select screens (graphical treatment) | [R2.0 Mockups and Illustrations|https://userexperience.oceanobservatories.org] |
| (/) | (/) | (*b) | Formative review of key screens with users |
| (/) | (/) | (*b) | High-level functional specification | [R2.0 Functional Design Specification|CI R2 UI Specifications^CIUX_R2.0_Functional_Design_Specification_CI_2012-10-22_v-1-41.pdf] |
| (/) | (/) | (*b) | Graphical design specification | [R2.0 Graphical Design Specification|CI R2 UI Specifications^CIUX_R2.0_Graphical_Design_Specification_CI_01-11-12_v1-00.pdf] |
| (/) | (/) | (*b) | Detailed specification | [R2.0 Screen Report (Base Screens)|https://userexperience.oceanobservatories.org/database-reports/CIUX_R2-0_Screen_Report_Base_Screens.pdf]\\
[R2.0 Screen Report (Drill Down Screens)|https://userexperience.oceanobservatories.org/database-reports/CIUX_R2-0_Screen_Report_Drill_Down_Screens.pdf] |
| (/) | (/)\\ | (*b) | Graphical artwork |
| (/) | (/)\\ | (*b) | Design revised and specifications updated in response to Development needs |
| (/) | (+)\\ | (*b) | Design revised and specifications updated in response to functional testing |
| (/) | (+) | (*b) | User Documentation complete | [ION User Documentation|https://confluence.oceanobservatories.org/display/CIUserDoc/User+Documentation] |
| (/) | (+)\\ | (*b) | Evaluative testing of functional system with users | [R2.0 Beta Test Plan|R2.0 Beta Test Plan] |
| (/) | (*b) | (*b) | Analysis of user test results and recommendations for design revisions |
{panel}
{column}
{column}
{column}
{section}
{expand}


h1. Technical Specifications

Materials used to communicate the design for construction.
{section}
{column:width=225px}

{panel:title=R2 Revised Designs|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

{expand: Reduced Design Set}
Reduced set of designs targeted for immediate implementation.
{expand}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Stage 1 Interactions |CI R2 UI Specifications^CI_R2_UI_Design_Revised_Stage_1_interactions.pdf]
[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Stage 1 CSS |CI R2 UI Specifications^CI_R2_UI_Design_Revised_Stage_1_interactions.pdf]

_Last Update:_ Wed 2013-03-20
_Next Update:_ --

{expand: Complete Design Revisions}
Complete set of design revisions to be considered for implementation and user review.
{expand}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Full Interactions |CI R2 UI Specifications^CI_R2_UI_Design_Revised_2013-03-14.pdf]

_Last Update:_ Fri 2013-03-15
_Next Update:_ --

{panel}
{column}

{column:width=225px}

{panel:title=R2 Specification Documents|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

{expand: Functional Design Specification}
Describes the goals and principles underlying the design. Specifies principles and patterns for organizing visual, information and interaction elements and relating these to information content.
{expand}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|CI R2 UI Specifications^CIUX_R2.0_Functional_Design_Specification_CI_2012-10-22_v-1-41.pdf] [!ux:Utility Attachments^Document-Microsoft-Word-icon_32.png!|CI R2 UI Specifications^CIUX_R2.0_Functional_Design_Specification_CI_2012-10-22_v-1-41.docx]

_Last Update:_ Mon 2012-10-22
_Next Update:_ --

{expand: Graphical Design Specification}
Describes the principles underlying the graphical design, along with graphical design specifications and css snippets.
{expand}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|CI R2 UI Specifications^CIUX_R2.0_Graphical_Design_Specification_CI_01-11-12_v1-00.pdf] [!ux:Utility Attachments^Document-Microsoft-Word-icon_32.png!|Attachments^CIUX_R2.0_Graphical_Design_Specification_CI_01-11-12_v1-00.docx]

_Last Update:_ Mon 2012-11-12
_Next Update:_ --

{expand: Detailed Design Specifications}
Printouts of screen reports from the CIUX Specifications Database. Includes Current Screens (only elements accessible from present screens) and All Screens (all elements and screens defined). CSV files have same ordering of columns as pdf reports.
{expand}


|| Report || Screen Layout || Attributes to Screens ||
| Current Screens | [!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Screen_Layout_Report_Current.pdf] | [!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Attributes_on_Screens_Report_Current.pdf] |
| Current Screens | [!ux:Utility Attachments^csv32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Screen_Layout_Report_Current.csv] | [!ux:Utility Attachments^csv32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Attributes_on_Screens_Report_Current.csv] |
| All Screens | [!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Screen_Layout_Report_Comprehensive.pdf] | [!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png!|http://userexperience.oceanobservatories.org/database-reports/CIUX_Attributes_on_Screens_Report_Comprehensive.pdf] |

_Updated Nightly_

{panel}
{column}

{column:width=225px}
{panel:title=Specifications Database|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

{expand: Online Database}
Maps information elements to information content and resource attributes, and visual elements to informational elements and interactions. Includes specification of location of visual elements to screen layouts, views and panels, as well as associated elements such as text labels, icons, and help tags.
{expand}

[!ux:Utility Attachments^Rubiks-cube-2-icon_32.png! Guest Access|http://filemaker.oceanobservatories.org:8001/fmi/iwp/cgi?-db=CIUX%20Specifications&-startsession]

_Updated Continuously_

{expand: Database Schema}
Export of database design, including table and field definitions, scripts and layout reports.
{expand}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Relationships Diagram |http://userexperience.oceanobservatories.org/database-reports/CIUX%20Specifications%20Schema/CIUX_Specifications_Schema_Diagram.pdf]

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Complete Schema |http://userexperience.oceanobservatories.org/database-reports/CIUX%20Specifications%20Schema/CIUX_Specifications_Schema.html]

_Last Update:_ Sat 2012-11-17
_Next Update:_ As needed

{panel}
{column}

{column:width=225px}

{column}
{section}


h1. Design Illustrations

Materials used to communicate design intent for qualitative evaluation and feedback purposes. Note that illustrational materials may not always be updated with respect to technical specification materials. The technical specifications should be considered the definitive source for the final design.

{section}

{column:width=225px}
{panel:title=Mockups and Illustrations|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
[!ux:Utility Attachments^gallery-icon_32.png! Webpage|https://userexperience.oceanobservatories.org]

_Last Update:_ Mon 2012-03-12
_Next Update:_ TBD

Static mockups of screens and panels (pixel-perfect as well as low-fidelity), and animated illustrations of specialized visual behaviors and interactions.
{expand: Mockup Status}
_Relative to current design thinking_
Pixel-perfect mockups are *Clean* _(possible errors) and_
Low-fidelity mockups are *Smudged* _(known inconsistencies and inaccuracies)_
{expand}
\\

{panel}
{column}

{column:width=225px}
{panel:title=Storyboards|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
[Complete list|ux:R2 Storyboards]

_All storyboards are outdated with respect to informational content._

Narrative sequences of mockups that illustrate a particular story of use, with example content that is true to the story and consistent from mockup to mockup.
{panel}
{column}

{column:width=225px}
{panel:title=Infographics|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! Sites, Devices and Deployments|https://confluence.oceanobservatories.org/download/attachments/36045022/ION_R2_Sites_Devices_Infographic.pdf]

Concept illustrations developed for educational purposes.
{panel}
{column}

{column}
{column}
{section}

h1. Design Rationale

Materials used to guide and inform design deliberations and planning.
{section}
{column:width=225px}

{panel:title=User Research|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

[!ux:Utility Attachments^confluence-logo.jpg|width=40pxpxpxpxpxpxpxpx! User Research Statistics|March 2013]

_Updated Monthly_

Records of user and community research activities that have informed the design.

{panel}
{column}
{column:width=225px}

{panel:title= Workflows and User Stories |borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! PDF Document|Attachments^CIUX_R2_Workflows_CI_2012-03-09_v1-00.pdf]
[!ux:Utility Attachments^Document-Microsoft-Word-icon_32.png! Word Document|Attachments^CIUX_R2_Workflows_CI_2012-03-09_v1-00.docx]

_Last Update:_ Fri 2012-03-09
_Next Update:_ \-

Lays out the user interaction workflows, user stories and screenflows that have been used to inform and guide design deliberations..

{panel}
{column}
{column:width=225px}
{panel:title= Research Context: The Science Behind the Design |borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

[!ux:Utility Attachments^confluence-logo.jpg|width=40! Research Context|ux:UX Research Context]
[!ux:Utility Attachments^confluence-logo.jpg|width=40! State of the Art|ux:Product Research]

_Last Update:_ Fri 2013-01-05
_Next Update:_ \-

Background materials that have driven UX design.

{panel}
{column}
{column}
{column}
{section}

h1. Management and Planning

Current reports and planning materials.
{section}
{column:width=225px}

{panel:title=R2.0 Beta Test Plan |borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

[!ux:Utility Attachments^confluence-logo.jpg|width=40! R2.0 Beta Test Plan|ux:R2.0 Beta Test Plan]

Plans for interactive user testing of the R2.0 Beta Release.
{panel}
{column}

{column:width=225px}

{panel:title= Construction Plan |borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}

[!ux:Utility Attachments^google_docs_logo_sm.png|width=40! R2.0 Construction Map|https://docs.google.com/spreadsheet/ccc?key=0Ao_G5zjjtCQldE82QTJXUElmbTBBaGxWaGFWOUhDdHc#gid=0]
[!ux:Utility Attachments^google_docs_logo_sm.png|width=40! R2C2 Planning|https://docs.google.com/document/d/1CLCI6yXqycZZ_yfhdLgxGwy5SkJa7nPV0quLtMZPXZs/edit]
[!ux:Utility Attachments^google_docs_logo_sm.png|width=40! R2C1 Planning|https://docs.google.com/document/d/1n2q9B6zDuHmaSI_z8bO9vOPtVh9XfUGUHyP-xAvhv-Q/edit]

_Last Update:_ Tue 2012-06-05
_Next Update:_ Fri 2012-05-12


Plans for R2 Construction phase activities.

{panel}
{column}
{column:width=225px}

{panel:title= Elaboration Report|borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! PDF Document|ux:Management & Planning^CIUX_R2_LCA_UX_CI_2012-03-20_ver_1-00.pdf]
[!ux:Utility Attachments^keynote-icon_32.png! Keynote Presentation|ux:Management & Planning^CIUX_R2_LCA_UX_CI_2012-03-20_ver_1-00.key]

_Last Update:_ Wed 2012-03-21
_Next Update:_ \-

Report summarizing R2 Elaboration phase activities and achievements.

{panel}
{column}
{column:width=225px}

{panel:title= Elaboration Plan |borderStyle=solid|B9DBF6|titleBGColor=#DAEAF7|bgColor=#ffffff}
[!ux:Utility Attachments^Adobe-PDF-Document-icon_32.png! PDF Document|ux:Management & Planning^CIUX_R2_Elaboration_Work_Plan_CI_2011-09-16_v1-00.pdf]
[!ux:Utility Attachments^Document-Microsoft-Word-icon_32.png! Word Document|ux:Management & Planning^CIUX_R2_Elaboration_Work_Plan_CI_2011-09-16_v1-00.docx]

_Last Update:_ 2011-10-25
_Next Update:_ \-


Plan for R2 Elaboration phase activities.

{panel}
{column}

{column}
{column}
{section}