Child pages
  • Scenarios and storyboards

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

(Greyed out text indicates functionality not part of the lightbox component scope.  The functionality already exists in another Sakai tool or the user completes the activity off-line)

Eileen's Scenarios

Assumptions:

...

  • Eileen is preparing for a lecture on early modern art a few days from now and she wants to gather images associated with this topic.  She goes through a complex process to gather and organize the relevant images.  She uses the images she set aside to create her lecture presentation.
  • Wiki MarkupEileen also wants to post the images in her class site for later access by students. \ [Note:    In a perfect world, Eileen's images could automatically be uploaded for Eileen (pulled from ppt. into her Gallery collection\] Wiki Markup
  •  She uploads all her images into her Gallery Tool Collections folder in the Resources tool.  \[Note:  Eileen should be able to upload these images in the context of the gallery tool.  Moving between resources and gallery is quite clunky.  Likely functionality added in future work\ She uploads all her images into her Gallery Tool Collections folder in the Resources tool.  [Note:  Eileen should be able to upload these images in the context of the gallery tool.  Moving between resources and gallery is quite clunky.  Likely functionality added in future work].

Resources Tool - after Gallery Tool is added, the "Gallery Tool Collection" folder is automatically created (Existing page & functionality)

...

Gallery Tool - User has just clicked the "Gallery" link in left menu (Existing page & functionality)

  • Wiki Markup She chooses her  She chooses her "Lecture 1" Collection by clicking on the folder name or icon and views thumbnails of her images. This is Eileen's first time using the Gallery tool and she can see that she is able to reorganize her thumbnails by dragging them around on the screen.  \  [Note:    we may add stronger visual cues for the first few times Eileen visits to help her discover the drag and drop functionality.    This question added to the wiki outstanding questions page\].    Specifically she sees:
    • Visual design element showing her she can do something with the thumbnails
    • When her mouse hovers over a thumbnail she sees the mouse change to a pointer (or whatever we decide)
    • Other?

...

  • Eileen continues this work moving the thumbnails around into the desired order.unmigrated-wiki-markup
  • While organizing the thumbnails she realizes she has a few more images in her collection that would be useful for this week's topic.    She goes to the Resources tool and sees her image files are now listed in the order she specified in the Gallery tool. She uploads 3 new files and sees they are displayed at the front of the collection in alphabetical order. \ [Note:    This is new behavior we'll have to request in the resources tool - only from within the Image Gallery Collection foleder\]  

Resources Tool - New files uploaded after some reorganization has been done in the Gallery.  The new files display at the top of the list organized alphabetically within them.

...

  • First 5 steps are the same as default behaviorunmigrated-wiki-markup
  • Once Eileen arrives at the Image Gallery \ [fluid:How does she move between tools?\] she uses the tab key to move to the folder pane of the page.    After moving to the folder pane, the first collection folder is in focus and Eileen can use the arrow keys to move up and down among the list of folders.   She arrows down to the "Lecture 1" folder (focus changes to each folder as she moves through them) and presses the return key to select and open the collection. Wiki MarkupThis is Eileen's first time using the Gallery tool and she can see that she is able to reorganize her thumbnails by moving them around on the screen. \[Note:  we may add stronger visual cues for the first few times Eileen visits to help her discover the drag and drop functionality.  This question added to the wiki outstanding questions page\].  Specifically she    She arrows down to the "Lecture 1" folder (focus changes to each folder as she moves through them) and presses the return key to select and open the collection.
  • This is Eileen's first time using the Gallery tool and she can see that she is able to reorganize her thumbnails by moving them around on the screen. [Note:  we may add stronger visual cues for the first few times Eileen visits to help her discover the drag and drop functionality.  This question added to the wiki outstanding questions page].  Specifically she sees:
    • Visual design element showing her she can do something with the thumbnails
    • When her mouse hovers over a thumbnail she sees the mouse change to a pointer (or whatever we decide)
    • Other?.  
      Gallery Tool - initial view after user goes to tool and selects a collection.  The first image should be shown as focus.
  • Eileen presses the tab key to move into the thumbnail pane.  Once in the pane, the first thumbnail is in focus.  Eileen uses the arrow keys to move focus to other thumbnails (see style guide for specific interaction).  She focuses on the thumbnail she believes she wants to move. 

...

  • Back on the thumbnail view, she decides to move the thumbnail. The thumbnail is still in focus so she presses 'ctrl + right arrow' to move the image to the right.  She can see the projected new location as she continues moving to the right.  Her visual cues are:
    • The thumbnails on either side of the "drop" location spread apart as it moves.
    • The screen focus moves with the moving thumbnail.
    • A transparent version of the image displays in the  location where it would land.
  • Wiki Markup          Shift + Arrow key movement \          Shift + Arrow key movement [fluid:need visual depictions of these\]:
      unmigrated-wiki-markup
    • Right arrow moves thumbnail to the other side of the image on its right. If this is the first image in the collection move the other side of the last image in the collection \ [fluid:is this the right behavior or do want it to stop\]. Wiki Markup
    • Left arrow moves thumbnail to the other side of the thumbnail on its left.    If this is the first image in the collection move the other side of the last image in the collection \ [fluid:is this the right behavior or do want it to stop\].
    • Wiki MarkupUp arrow moves thumbnail directly above and the thumbnail currently in that location moves to the left one spot \ [fluid:Does moving to the left make sense - even given down arrow moves to the right?\].    If first row in collection, move to the last row in the collection.
    • Wiki MarkupDown arrow moves thumbnail directly below and the thumbnail currently in that location moves to the right one spot \ [fluid:Does moving to the right make sense?\].
    • 'Shift + home' moves image to first in the collection.
    • 'Shift + end' moves image to last in the collection.

...

  • To "let go" of the thumbnail, Eilleen releases the ctrl key.  She also releases the arrow key (otherwise she would be changing focus to the next thumbnail) Eileen sees the thumbnail is in its new location since:
    • The thumbnail is in view in its new location
    • The thumbnail is still selected until Eileen chooses another thumbnail
    • The thumbnail in the original location has disappeared
  • Eileen continues this work moving the thumbnails around into the desired order.unmigrated-wiki-markup
  • While organizing the thumbnails she realizes she has a few more images in her collection that would be useful for this week's topic.    She goes to the Resources tool \ [fluid:How does Eileen choose a new tool?    What's the status quo in Sakai now? Focus is within the iframe on an object so she needs to jump out of the iframe and then move between the tool names\]. She notices her image files are now listed in the order she specified in the Gallery tool. She uploads 3 new files and sees they are displayed at the front of the collection in alphabetical order.unmigrated-wiki-markup
  • Eileen goes back to the Image Gallery tool \ [fluid:State how she gets there\] and tabs to the folder pane, arrows down to the "Lecture 1" folder and presses return to select and open the folder.   She sees the    She sees the new.thumbnails at the beginning of the collection.    The VISUAL CUE INSERTED indicates to her that these first 3 have been added since she last organized her images (if the images had not been re-ordered (still in alpha order) they would have fallen into line where they belong alphabetically in the larger group). As before, she moves each of these images to the desired location.
  • Eileen goes to the announcements tool and sends a message to students to let them know the image collection is available