Elisa Volpato: Apresentando resultados antes de wireframes - com princípios de design
Insight 3.1.1 Annotated Wireframes - I Ching€¦ · Annotated Wireframes documents the interaction...
Transcript of Insight 3.1.1 Annotated Wireframes - I Ching€¦ · Annotated Wireframes documents the interaction...
1
Insight 3.1.1 Annotated Wireframes
About this document
Annotated Wireframes documents the interaction design that is specific to a page, section, or page element.
For global design, refer to Interaction Design Pattern Guide.
Design Scope: Not all pages, page sections, and page elements are represented. Primarily only those that
have been modified since the last version of the application are annotated in this document.
Look and Feel: Wireframes are not exact (i.e., some white squares around buttons). Refer to Certona Visual
Style Guide for details (colors, font sizes, margins and padding, etc.).
Activity Logging: Provided here as a high-level summary. Refer to Experience Management Activity Log for
details.
Tips: Elements that have tips are marked with a type abbreviation and question mark. i? = icon/button,
L? = label
Permissions: For users with edit permissions: 1) Page sections with user modifiable data display Add and/or
Edit buttons. Section names display as “Manage [SectionName]” instead of “View [SectionName]”
References to page elements are denoted with italics.
2i?
2
Table of Contents Version History .......................................................................................................................................................................3
Application Map .....................................................................................................................................................................4
Container Content Panel ........................................................................................................................................................5
Container Content Panel – Add Experience Dialog - Create New Experience ........................................................................6
Container Content - Experience Created ................................................................................................................................7
Container Content Panel - Manage Experience ......................................................................................................................8
Container Content Panel - Edit Experience Details/Traffic .....................................................................................................9
Container Content Panel – Change Status ............................................................................................................................10
Container Content Panel - Experience Updated ...................................................................................................................11
Experience Content Panel – Manage Experience Details .....................................................................................................12
Experience Content Panel – Experience Details Saved .........................................................................................................13
Experience Content Panel – Strategy Added/Re-prioritized ................................................................................................15
Experience Content Panel - Edit Strategies Status ...............................................................................................................16
Experience Content Panel - Edit Strategies Status ...............................................................................................................17
Strategy Content Panel – Manage Strategy Details ..............................................................................................................18
Strategy Content Panel - Manage Modifiers ........................................................................................................................19
General - Unsaved Changes Warning Dialog ........................................................................................................................20
Data Validation .....................................................................................................................................................................21
3
Version History Changes in this version are red text and marked with red indicator
Date Author Notes
04/08/13 K. Cornwall First draft
04/11/13 K. Cornwall - Added help icon to Add Experience modal - Removed checkboxes, status dropdown, update button from Manage Experience panel - Added additional interaction details to Manage Experience – Edit Details/Traffic - Added Manage Experience - Change Status - Changed trigger and text of Change to Shared Experience Warning Dialog
04/15/13 K. Cornwall - Visual change to modal dialogs – gradient background - New page elements identified for tips - Experience sharing features removed - Changes to Manage Experience - Changes to View/Manage Experience Details – rearranged, 3 fields always read only - Changed functionality and language for Unsaved changes - Removed content panel specific Unsaved Changes wireframe and added one for the General case of unsaved changes - Added wireframe for field level Data Validation - Removed wireframes related to shared experiences (strikethrough of page title) - Added table interaction details to Strategy Added and Edit Strategies Status wires - Added interaction details to Manage Strategy for Modifiers and Details - Text changes
04/17/13 K. Cornwall - Text changes to Unsaved Changes
04/25/13 -04/26/13
K. Cornwall - Removed all design related to traffic splitting in Container – Manage Experience - Reordered items in Strategy Content Panel > View/Manage Details - Changes to table controls for Experience Content Panel > View/Manage Strategies - Manage status is now view only in Experience > Manage Details - Added page for Manage Details Save sections reverts to View Details mode
05/22/13 K. Cornwall - Updated for recent changes and fixes
4
Application Map
ContainerAdd
Experience Dialog
AddExperience
Create New Experience
form
Create
Manage Experience
ModeManageExperience
Change Status
Adjust Traffic
Strategy
Manage StrategyDetails Mode
ManageDetails
Manage Modifiers
Mode
ManageModifiers via unlock
Change modifiervalue
Turn modifieron/off
Experience
Manage Experience
Details Mode
Manage Strategies
Mode
ManageDetails
ManageStrategies
Change Status
Decision Plan
DialogEdit
DecisionPlan
AddStrategyDialog
AddStrategy
ExperienceWith new strategy added
Save
Manage Modifiers
Mode
ManageModifiers
Change modifiervalue
Turn modifieron/off
5
Container Content Panel Use cases:
Entry points: Nav Panel, Location Table
Outstanding issues:
Annotations
1. Name values in the table are linked to the content panel for the experience. 2. Add button (plus icon) opens the add experience dialog. It is only shown when the user has edit
permissions and the section has user modifiable data. 3. Manage button (pencil icon) toggles the section between edit and view modes. It is only shown when
the user has edit permissions and the section has user modifiable data. 4. Only one experience can be active.
Alternate row striping added to this and following wireframes No filter on Status column. Inactive Status is italicized: “Inactive”
Activities logged
None
1
2i? 3i?
4
6
Container Content Panel – Add Experience Dialog - Create New Experience Use cases: View container, Create experience, View tips
Entry points: Container Experiences section Add button
Outstanding issues:
Annotations
1. Modal background doesn’t block Tips Panel functionality 2. Save is enabled only when the user has filled-in mandatory fields (marked *) 3. Cancel button and dialog close button closes the dialog 4. Help icon displays contextual help (see Interaction Design Pattern Guide) 5. Changed first field label to “Name 6. Window title is “Add Experience”
Activities logged (Save)
Experience created
Experience added
2i?
L?
4i?
1
3
i?
5
7
Container updated
Container Content - Experience Created Use cases: View container, Create experience
Entry points: Container Experiences section Add button
Outstanding issues:
Annotations
1. Show the new experience in the table using current sort order a. The new tree node and the new row flash green and fade away after 500ms
2. Newly added experiences are inactive and shown with value of “--“
Activities logged
None
1
2
8
Container Content Panel - Manage Experience Use cases: View container experiences, Change experience status
Entry points: Manage Experience Edit (pencil) button
Outstanding issues:
Annotations
1. Row highlighted on row hover a. Experience names aren’t linked when section is in editable mode b. Row edit button is displayed and opens row for editing when clicked c. If a row is open for editing, hover state for others rows (highlighting and edit button) is
disabled
Activities logged (Update)
None
1 1ai?
9
Container Content Panel - Edit Experience Details/Traffic Use cases: View container experiences, Edit Experience, Configure traffic
Entry points: Row edit button. Detail changed (excluding status).
Outstanding issues:
Annotations
1. The row Save button is enabled when a change is made to any of the row’s values a. When clicked, the new data is saved and the row is closed for editing
2. The row Reset button resets any changes that have been made to the row’s fields 3. Success message is displayed when changes have been updated (see below for messaging when
status changed )
Activities logged (Save)
Experience changed
1i?
3
2i?
10
Container Content Panel – Change Status Use cases: View container experiences, Edit Experience
Trigger: Experience deactivated or deleted. Or, inactive or deleted experience is activated
Outstanding issues:
Annotations
1. Traffic value for deactivated/deleted experience shown as “- -“ 2. Traffic is displayed for activated experience with value of 100 3. The row Save button is enabled
Activities logged
None
2
1
3
11
Container Content Panel - Experience Updated Use cases: View container experiences
Trigger: Experience row > in-line Save button
Outstanding issues:
Annotations
1. Success message of “Experience updated successfully” is displayed. a. If status was changed from active to inactive, the message is “Experience updated
successfully \n This container has no active experiences” b. If status was changed from inactive to active and previously active experience, the message is
“Experience updated successfully \n The previously active experience is now inactive.” 2. The values in the datagrid are updated. 3. The row for the experience flashes green and fades away after 500ms.
Activities logged (row-level Save)
Container experiences split changed
Experience updated
2
1
3
12
Experience Content Panel – Manage Experience Details Use cases: View experience, Manage details
Entry points: Manage Details section Edit button
Outstanding issues:
Annotations
1. Save button is enabled when the user changes a Details section value 2. Columns are not sortable - default sort is by Priority, ascending 3. If no traffic, value is “--“
Activities logged (Save)
Experience updated
1
2
3
13
Experience Content Panel – Experience Details Saved Use cases: View experience, Manage details
Trigger: Manage Details section Save
Outstanding issues:
Annotations
1. Success message is displayed when changes have been saved
Activities logged
1
14
Experience Content Panel – New Strategy Dialog
Use cases: View experience, Manage strategies
Entry Point: Experience Strategies section Add button
Outstanding issues:
Annotations
1. Priority dropdown options are “1” through the lowest priority +1 2. Save is enabled only when the user has filled-in mandatory fields * 3. Cancel and dialog close button closes the dialog 4. Title of dialog is “Add Strategy” 5. The dropdown should have values from 1 to the number of slots available at the container level.
Colons removed from labels. Catalog is asterisked as a required field.
Activities logged (Save)
Strategy added to experience
1
2 3
L?
L?
L?
L?
L?
L?
4
5L?
15
Experience Content Panel – Strategy Added/Re-prioritized Use cases: View experience, Manage strategies
Trigger: Strategy Added
Outstanding issues:
Annotations
1. Success message is displayed 2. The new tree node and the new row flash green and fade away after 500ms
a. If needed, the content panel auto-scrolls to show the new row, before it flashes 3. Clear any status filters as necessary to make sure that the new strategy is displayed, and sort by
priority. 4. Because only one strategy per priority is allowed, rank for existing strategies adjust as necessary
according to the new strategy’s priority (i.e., if user selected option 3 out of 5 options on the priority dropdown when adding the strategy, then existing strategies with priorities 3 and 4 would have rank changed to 4 and 5, respectively.
Activities logged
Strategy priorities for experience changed
1
3
4
2 L?
16
Experience Content Panel - Edit Strategies Status Entry Point: Experience Strategies section Edit button
Trigger: Manage Strategies section Edit button
Annotations
1. The rows highlight on mouse-over and are selectable by clicking the row or the checkbox; row background shows selected.
2. Select an Action dropdown options are: “Activate”, “Deactivate”,” Delete”, “Move Up”, “Move Down”
3. Update changes the section to view mode (see next): a. The status for all selected (check-boxed) strategies b. Move-up: Moves the selected strategies up in priority by 1, except when the first strategy is
selected. A strategy that isn’t selected is moved incremented down in priority by the number of strategies selected to move up that are directly below it.
c. Move-down: Moves the selected strategies down in priority by 1, except when the last strategy is selected. A strategy that isn’t selected is moved up in priority by the number of strategies selected to move down that are directly above it.
Activities logged (Save)
Strategy status for experience changed
2
3
1
17
Experience Content Panel - Strategies Status Saved Use cases: View experience, Manage strategies
Entry Point: Experience Strategies section Edit button
Trigger: Manage Strategies section Edit button
Annotations
1. Success message is displayed when strategy/strategies status has been changed
Screenshot changed
Activities logged
None
1
18
Strategy Content Panel – Manage Strategy Details
Use cases: View strategy, Manage details
Entry points: Nav Panel, Experience Panel/Manage Strategies table – strategy Name link
Trigger: Manage Details section Edit button
Outstanding issues: Max char for textbox entry (i.e. description)?
Annotations
1. Save button is enabled when the user changes a Details section value 2. Success message is displayed when changes have been saved 3. Catalog name is linked to model details screen 4. All modifiers percentage shown as 100% to indicate maximum range (except Pool, maximum is 10)
Activities logged
Strategy details changed
1
2
3
4
19
Strategy Content Panel - Manage Modifiers Use cases: View strategy, Manage modifiers
Entry points: Nav Panel, Experience Panel/Manage Strategies table – strategy Name link
Trigger: Manage Modifiers section Edit button
Outstanding issues:
Annotations
1. Save button is enabled when the user changes a Modifier value 2. Success message is displayed when changes have been saved 3. Checkbox turns off the modifier for the strategy 4. Modifier input field accepts only integers 1-10 for pool and 1-100 for all others
Activities logged
Strategy modifiers changed
1
2
3
4
20
General - Unsaved Changes Warning Dialog Use cases: Edit section, Edit line – does not apply to forms where the parent of the data is being created
Trigger: There are unsaved changes on the page AND User tries to: toggle to read only mode; Navigate away
from the page; Refresh the page, Push the browser back button; close the browser
Outstanding issues:
Annotations
1. Yes, discards any changes, closes the dialog, and executes the user’s previous action 2. No and the dialog’s close button, closes the dialog
Activities logged
None
1
2
21
Data Validation Use cases: Create item, Edit section, Edit line
Trigger: User tries to save without entering required data.
Outstanding issues:
Annotations
1. Background of field changes to red and validation message is displayed a. Other page elements slide down b. There must be sufficient white space in dialogs to show the validation message without
scrolling
Activities logged
None
1
1
1