Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

List Reorderer Storycards in Announcements Context

Owned by Daphne Ogle
Last updated: Dec 10, 2008Version comment
5 min read

Storycards for Integration into the Sakai Announcements Tool

Notes:  LR stands for List Reorderer

To view detailed interactions for these storycards, see:  List Reorderer Storyboard - Make Important Announcements Viewable

LR Story 1:  Add custom order setting to Announcements Options screen

  • Add setting per wireframe below
  • After Reordering is turned on, a "Reorder" link displays in the intra-tool navigation

  Options:
 

 
 

LR Story 2:  Create Reorder Mode and screen

  • Selecting the Reorder link, opens the reorder page
  • Clicking on an announcement in this mode, opens the content of the announcement in an overlay [fluid:Need Wire frame for this]
  • See wireframe below:
    • List all announcements (not filtering or paging)
    • View filter & paging are disabled.  Their controls remain displayed but grayed out.
    • Update (from main page) becomes "Save New Order".  It is disabled and grayed out until a change in the order is made.
    • Informational message initially does not includes link for "Don't show me this message again" (see LR10 for implementation)

 

 
 

LR Story 3:  Enable numbered reordering in "Reorder Mode"

  • When a number is changed by the user, the list element moves to the appropriate location and all numbers adjust appropriately.
  • Changes are saved after the user selects "Save New Order" button.  Once saved, user is taken back to the main announcements page with 'Custom Order' message displayed (for message, see LR5)
  • As the item is moved, focus the screen so it is in users view.  Also show highlight for 2 seconds (see 2nd wireframe).
  • Make the shift of list elements around the drop visually evident
  • See wireframe below:
    • Each list element is assigned a number representing their order in the list
    • The numbers are displayed in a far left column in editable fields


 

LR Story 4:  Enable drag & drop reordering

  • Treat a list elements row as one object when dragging and dropping
  • Changes are saved once the "Save New Order" button is clicked. 
  • See wireframe below for rollover and click visual elements:
    • On hover anywhere over the row of a list element, change the mouse pointer to a hand and display the hover message shown in wireframe after 1 second.
    • When list element is clicked, mouse changes to an open hand and hover text disappears if still displayed 
    •  
  • See wireframe below for dragging and dropping visual elements and interacation:
    • Storyboard referenced above shows interaction step by step
    • Mouse remains an open hand while dragging
    • The list element object is highlighted and appears to be dragged on top of the elements below.  The highlight is a bit transparent so the user can see the list elements they are dragging on top of.
    • A red line across the row with a black arrow beginning the line indicate the drop target (where the item would be dropped if user let go at that moment).
    • The number in front of item being dragged changes to represent where it is in the list order as it is moved.  All other numbers remain the same until the item is dropped.  
    • When element is dropped, it is in it's new location.  All numbers adjust to represent the new order.  The screen stays focused so the new location is in view.
    • When element is dropped, continue to display the highlight for 2 seconds
    • When element is dropped, make the shift of list elements around the drop visually evident

LR Story 5:  Display Announcements displayed in custom order message

  • Display message at top of page when custom order has been saved.  See wireframe below for message:
    • Allow user to cancel custom order.  This cancels it completely

LR Story 6:  Allow sorting when viewing custom order

  • Once custom order is saved, allow user to sort via column headers again.
  • After they sort, display message shown below in wireframe:
    • Allow user to cancel custom order
    • Allow user to go back to custom order

LR Story 7:  Create Student Views of Custom Ordering

  • Display message at top of page letting them know the list is custom ordered
  • Allow sorting
  • If student uses sorting, display message at top of page:
    • Allow them to go back to custom order


 

LR Story 8:  Allow Undo once a move has occured

  • Allow user to undo last move.  To keep this simple, only allow undo last move once.  After a move has been undone, the undo last move link should be grayed out until another move is made.
  • Allow user to undo all moves

LR Story 9:  Design Changes to Announcements

These changes are necessary for the list reorderer to be smoothly integrated into the Announcements Tool

  • Add "View List" to intra-tool navigation [fluid:This will allow users to get back to that view after reordering]
  • Add an "always keep at the top" setting to the announcement creation process. [fluid:Solves use case for always keeping important announcement at top]
  • Add a setting while editing an announcement to "not change the modification date" [fluid:Solves use case that announcement gets edited but instructor doesn't want it getting moved to the top of the list]
  • Nice to Haves but not Critical to List Reordering:
    • Add a New icon to announcements that are new since the user last logged in.  This is not as critical to the reordering since new messages will be displayed at the top of the the list. Still a good thing of course to tell users what they haven't seen yet.
    • Change "Date" to "Modified Date"  to more specific.  It might be important for users to know the difference.  If they want to find the announcement in email for instance.
    • Remove instructions at top of list view page -- self explanatory.

LR Story 10:  Allow user to no longer display informational message

Allow user to specify they no longer want to see message.  This is important functionality since the message is no longer useful after they understand they can drag and drop to reorder.
 

LR Story 11:  Remove save and cancel buttons and automatically save changes

  • Remove buttons and assume user wants to save changes.  The undo protects users from making mistakes they can't recover from.
  • Add a "Back to List View" link to allow user to get out of the reorder mode.