PAGE. DocumentViewer_v3 WIREFRAMES DESKTOP & TABLET 2.3 VERSION. Thu Feb PUBLISHED. Columbus,Tom AUTHORS

Transcription

1 1 DESKTOP TABLET VERSION 2.3

2 2 Viewer Anatomy Tool Bar 36px tall by X wide. The width should adjust according to available screen real-estate Node in Focus Display Height and width should adjust according to available screen real-estate Actions Bar 32px tall by X wide. The width should adjust according to available screen real-estate Task in Focus Display X tall by X wide *See Task in Focus Section for further description The height should accommodate the description text + 16px space at the bottom The width should adjust according to available screen real-estate

3 $ $ 3 Task In Focus - Min/Max Task in Focus Maximized Task in Focus Minimized Task in Focus Dismissed (no Task in Focus) TASK DESCRIPTION FLOW: Lorem Ipsum is simply dummy text of the printing and typesetting industry. STEP: Lorem Ipsum has been the industry's standard dummy text ever since the POLICY: 00s, when an unknown printer took a galley of type and scrambled it to ASSIGNED TO: FROM: make a type specimen book. It has survived not only five centuries. Endorsement Sign documents and Mike Mann Bill Roberts " TASK DESCRIPTION " *Minimizing, maximizing and dismissing a task should all have animated transition up or down respectively. The animation should have an ease in/out effect and last for 500ms

4 $ $ 4 Task In Focus - Construction Click Targets 24px 16px 8px Ellipse area (if needed) When an ellipse is used a tooltip should be available to display any truncated text MAXIMIZED TASK Task Description gets 65 of available screen width or whatever is remaining after Task Details are displayed Task Details occupy a minimum of 25 of the available screen width max out at 35 of available screen width. The width can vary between those percentages as needed See Example A MAXIMIZED TASK - Click Targets Minimizes task description Brings focus to the document associated with the Task. Focus applies to both the viewer and the file tree Displays actions menu. Task Details Area Task in Focus s height is determined by the height needed to display the entire description or details without scrolling plus 16px padding at the base See Example A " TASK DESCRIPTION Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. FLOW: STEP: POLICY: ASSIGNED TO: FROM: Endorsement Sign documents and Mike Mann Bill Roberts " TASK DESCRIPTION Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. FLOW: STEP: POLICY: ASSIGNED TO: FROM: Endorsement Sign documents and Mike Mann Bill Roberts MINIMIZED TASK MINIMIZED TASK - Click Targets Maximizes task description Brings focus to the document associated with the Task. Focus applies to both the viewer and the file tree Displays actions menu TASK DESCRIPTION TASK DESCRIPTION Example A " TASK DESCRIPTION " TASK DESCRIPTION *MAXIMUM TASK DETAIL ALLOWED *MINIMUM TASK DETAIL NEEDED

5 ' 5 File Folder Node Viewer Construction 48px 24px 16px 8px Ellipse area (if needed) When an ellipse is used a tooltip should be available to display any truncated text MENU ITEMS Clicking the icon toggles the respective menu open or closed. A click outside of an open menu closes the open menu File or Folder Title is right aligned File or Folder Title Area ATTRIBUTES Height of these elements stay fixed FILE OR FOLDER ICON AREA 224px Applicable form inputs and information available about item in focus Scrollable Area File or Folder Title Area Here NEW FOLDER NEW DOCUMENT 352px Wide Height of Notes section adjust to fit the available screen realestate NOTES AREA Width and height of Notes section adjust to fit the available screen real-estate *See Notes Section for further description 232px RECENTLY DELETED ITEMS FILE MARKS: Item Name 10/25/2014 Item Name 10/25/2014 Item Name 10/25/2014 Item Name 10/25/2014 Scrollable Area " RESTORE DOCUMENTS $ Item Name 10/25/2014 " RESTORE DOCUMENTS RECENTLY DELETED ITEMS THE DELETE FEATURE ARE OUT SCOPE THIS RELEASE Content contained in this area is center aligned with a 48px Margin on each side.

6 6 File Folder Node ClickTargets Keyboard Interactions Opens the Attributes Menu ATTRIBUTES Keyboard Interactions File Title Ctrl + I Show/Hide Attributes FILE OR FOLDER ICON AREA Applicable form inputs and information available about item in focus Ctrl + N Add Note Ctrl + D New Document File or Folder Title Area Here Ctrl + F New Folder NEW FOLDER NEW DOCUMENT Ctrl + R Restore Documents $ ( NOTES: RESTORE DOCUMENTS ' ADD NOTE SEPT 12, Jenny January Need to add an arrow to the document so that the client knows where to add the company name. SEPT 12, Jenny January NOTES AREA Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. SEPT 12, Jenny January Create New Task Need to add an arrow to the document so that the client knows where to add the company name. Create New Diary Opens the Recently Deleted Menu RECENTLY DELETED ITEMS THE DELETE FEATURE ARE OUT SCOPE THIS RELEASE Launches an Input based Modal to create and name a Folder in the context of the current file/folder location. Once complete the focus lands on the newly created Folder. ) ( Launches a Create Task or Create Diary Modal Launches Import Wizard in the context of the current file/folder location. Once complete the focus lands on the newly added document RECENTLY DELETED ITEMS FILE MARKS: Item Name 10/25/2014 Item Name 10/25/2014 Item Name 10/25/2014 Item Name 10/25/2014 Item Name 10/25/2014 $ RESTORE DOCUMENTS DELETE Launches a confirmation Modal to confirm the user s intent to restore the document or folder

7 7 File Folder Notes Anatomy Construction 24px 16px 8px NOTES ADD NOTE NOTES ADD NOTE SEPT 12, Jenny January Need to add an arrow to the document so that the client knows where to add the company name. SEPT 12, Jenny January Need to add an arrow to the document so that the client knows where to add the company name. Height of Notes is dynamic based on available screen real-estate SEPT 10, Peter Parker Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. OCT 19, Mary May Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. It also the leap into electronic typesetting, remaining essentially unchanged. It was Scrollable Area SEPT 10, Peter Parker Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. OCT 19, Mary May Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. It also the leap into electronic typesetting, remaining essentially unchanged. It was

8 8 Notes Click Targets and Interactions CLICK TARGET Launches a modal to capture input text NOTES ADD NOTE SEPT 12, Jenny January Need to add an arrow to the document so that the client knows where to add the company name. SEPT 10, Peter Parker Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. OCT 19, Mary May Lorem Ipsum has been the industry's standard dummy text ever since the 00s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for over five centuries. It also the leap into electronic typesetting, remaining essentially unchanged. It was User inputs note text into modal ADD NOTE SEQUENCE JAN 12 - NOTE *All animations should have an ease in and ease out User selects ADD NOTE NOTES + ADD NOTE NOTES + ADD NOTE Modal fades in 300ms NOTES CANCEL ADD + ADD NOTE Modal fades out 300ms New note slides down from under the Note Menu 500ms NOTES + ADD NOTE Touch device may evoke onscreen keyboard

9 9 Document Node Anatomy Construction Ellipse area (if needed) When an ellipse is used a tooltip should be available to display any truncated text Out of Scope 32px 24px 16px 8px Stays Flush Left Stays Centered Stays Flush Right Document.pdf 999 of 999 -, 100 $ ' ( Document.pdf 999 of 999 -, 100 $ ' ( + ) *./ ) DOWNLOAD * PRINT./ APPEND 0 1 Stays Flush Left Stays Flush Right

10 10 Document Page Node Click Targets Launches Attributes menu (see p5) for the document in focus Undocks/Redocks Document in Focus to a separate browser window out of scope Input field for currently displayed document page Previous Page Next Page Input field to scale the view ZoomIn - ZoomOut Enters/exits the annotations editing mode. Refer to Annotations document for more detail Document.pdf 999 of 999 -, 100 $ ' ( Toggles show/hide annotations if they are available. Disabled if there are none Append Document Select where to add addition pages to this document Input Modal to allow the user to choose where to add additional pages Beginning of the document End of the document CANCEL APPEND TO BEGINNING Launches Import Wizard. User selects document to attach Referring Action (ex: Download) Create New Task Create New Diary Launches a Create Task or Create Diary Modal Select the pages and features you would like to include Entire Document 56p - 5.6MB + ) DOWNLOAD * PRINT /0 APPEND 1 2 Specific Pages ex: 1, 5, 10-, 37, 55. With Annotations Launches a input Modal to allow the user to isolate the parts of the document the action will apply to CANCEL NEXT

11 11 Document Node Presentation Manipulation Upon entering a document, the image should be presented at 100 of the available width. The document can scroll under the toolbar but initially is positioned with a 24px padding between the top of the document and the tool bar. If possible include a 24px padding on the right and left of the document. The user can scroll, drag, or use directional keys to view the rest of the document. EXAMPLE 1 EXAMPLE 2 Very Narrow Width Width may have extra padding initially The goal being to show as much of the document at a readable size as possible initially vs showing more of a thumbnail version that is unreadable. Default View 24px padding at the top Cursor is presented as the pan tool when over the document EXAMPLE 3 Scrollable Area Rare case where a document fits 100 within the entire screen Touch and drag moves the document around as well Document Not In View

12 12 Document Node Keyboard Interactions Gestures KEYBOARD INTERACTIONS TOUCH GESTURES Ctrl + + = Ctrl + _ - Zoom In Zoom Out Ctrl + W Download Ctrl + E Pinch Spread Double Tap = Zoom Out = Zoom In = Reset Zoom to 100 Ctrl + P Print Ctrl + { [ Enter/Exit Annotation Mode Ctrl + I Show/Hide Attributes Touch and Drag = Move document in direction of the drag Ctrl + } ] Show/Hide Annotations Ctrl + >. Puts focus on page input field Swipe Left = Next Page Ctrl + \ Dock/Undock of 999 Ctrl + Closes the file in focus 1 Two Finger Swipe Left Swipe Right = Last Page of Document = Previous Page Move document 50px left $ Move document 50px down Move document 50px up Move document 50px right First Page of document Last Page of document home end page up page down Previous Page Next Page Two Finger Swipe Right Multi-Touch Rotate Clockwise = First Page of Document 189 of 999 = Scroll Pages of Document Forward Multi-Touch Rotate Counter Clockwise 9 of 999 = Scroll Pages of Document Backward

13 13 MultiFrame Page of Document Construction 48px 32px 24px 16px 8px Thumbnail View 8 of 8 Frames Jump To Frame Input changes when user selects the thumbnail Jump To Frame Input Total Number of Thumbnails / Frames Document.pdf 999 of 999 * ) 100 $ ' ( 1 of 8 Frames Frame Name Frame Name Frame Name When Focus is on a Frame, The Border Is Thicker If Annotation Mode is Entered, This Tool Bar Disappears and Reappears on Annotation Exit *Only one frame can be annotated at a time Scrollable Area Page Scroll View 2 of 8 Frames Jump To Frame Input changes as user scrolls through frames Frame Name Frame Name Frame Name is Centered on Thumbnail Frame Thumbnails Stay Flush Left Number of Thumbnail Columns Are Dependent on Width. *Should have at least 32px padding on each side before adding additional column Single Frame Scrolling with 32px padding between Frames

14 14 MultiFrame Page of Document Navigation Entering Annotations Mode What ever number is in the Frame Input Field becomes the Frame they are annontating Thumbnail View Scroll View Focused Frame View 999 of 999 ) ( 100 $ ' 999 of 999 ) ( 100 $ ' 999 of 999 ) ( 100 $ ' Zoom Disabled in Thumbnail and 1 of 8 Frames Scroll View Modes 7 of 8 Frames 999 of 999 ' 100 " $ Frame 7 Neither view is selected. User is focused on Frame 7 until they select a different view mode or page away Zoom Enabled 1 of 8 Frames 7 of 8 Frames 7 of 8 Frames 7 of 8 Frames User can still switch frames with input 999 of " $ 999 of " $ ' ' Frame 7 User selects Frame 7 from Thumbnail View User selects Frame 7 from Scroll View Frame 8

15 Historical Notes 48px When Historical Notes are selected in the tree $ Title of Notes ' Historical Notes Folder Name Top of Notes Folder Name Folder Name Folder Name Scrollable Document Name NOTES AREA Document Name * ( ) +,