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.

Scenarios and storyboards

Owned by Daphne Ogle
Last updated: Jun 02, 2008 by Allison BloodworthVersion comment
8 min read

(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 familiar with the Gallery tool and knows to upload her images in the resources tool.  
  • When Eileen views the gallery tool her collection is already in the tool because she uploaded her images in the resources tool.

Displaying images in class site

DEFAULT BEHAVIOR

  • 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.
  • Eileen 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]
  •  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)

Resources Tool - Creating the "collection" folder under the "Gallery Tool Collection" folder (Existing page & functionality)

Resources Tool - Adding image files within the newly created "Lecture 1" folder (Existing page & functionality)

Resources Tool - Image files uploaded (Existing page & functionality) 

  • Since the image files are automatically sorted alphabetically in the resources tool, Eileen wants to organize her images for her new collection to match the intent of the lecture.
  • Eileen goes to the Gallery Tool 

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

  •  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?

Gallery Tool Wireframe - initial view of collection for the first 5? times a user uses the tool.  At which time, the extra "you can drag me" identifier no longer shows for this user.  INCLUDING THE ADDITIONAL DISCOVERY CUES IS AN OUTSTANDING QUESTION.

  • Eileen clicks on the thumbnail and sees that it is in focus.  As she moves the mouse across the screen, the thumbnails show a hover state (see "interesting moments")

Gallery Tool  Wireframe - Thumbnail in focus

  •  She moves the thumbnail and begins dragging it to the new location.  She can see she is dragging it because:
    • a translucent version of the thumbnail is moving with her mouse
    • the thumbnail on either side of the projected drop location "move out of the way".
    • the thumbnail is no longer in its original location although there is a an empty spot for it.

Gallery Tool Wireframe - Mid-drag of thumbnail

  • Eileen then "drops" the thumbnail in the new location by letting go of the mouse click.  As she was dragging the thumbnail she could see where the thumbnail would be "dropped" because of
    • a translucent version of the thumbnail is moving with her mouse
    • the thumbnail on either side of the projected drop location "move out of the way".
    • the thumbnail is no longer in its original location although there is an empty spot for it.
  • She 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

Figure 1Gallery Tool - Thumbnail dropped and still selected until user selects another thumbnail

  • Eileen continues this work moving the thumbnails around into the desired order.
  • 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.

  • When she goes back to the Lecture 1 collection in the Image Gallery, she sees the 3 new images have been added to the beginning of her collection in alpha order.  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.  She moves them to where they fit in the collection as specified above.
  • Eileen goes to the announcements tool and sends a message to students to let them know the image collection is available (oooh, what about an "alert class of new content" component ? )

KEYBOARD ONLY USER BEHAVIOR
Assumptions:

  • Resources allow a keyboard-only user to to upload files.
  • First 5 steps are the same as default behavior
  • 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.
  • 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. 

Placeholder - Example states of thumbnails.  This will be replaced with wireframes showing the interaction.

  • She wants to verify this is the correct image and not one of the other similar ones in her collection.  She presses return to open the larger version of the image and realizes it is the correct image.  Eileen uses the arrow key to move to the "return to thumbnail" link then hits return to activate the link.

Current Gallery tool (screen shot) - Cat image should be shown larger (this is a bug that will be fixed).

  • 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.
  •           Shift + Arrow key movement [fluid:need visual depictions of these]:
    • 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].
    • 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].
    • Up 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.
    • Down 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.

Visual look of thumbnail states.

  • 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.
  • 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.
  • 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 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