Use Case Details

Wireframes out of date by 1 version – updated versions to be uploaded after a team review. In the meantime see the wireframes section for the most up to date designs.

Preconditions:

All use cases assume user is logged into Sakai and in the image gallery of the site they are working in. By default when the user lands in the Image Gallery they see the "Browse Images & Collections" view with the "All Images" collection chosen.

All Users (Instructor, TA, Student)

View Collection (Generalized use case)

View thumbnails of images

User selects (mouse click or enter on keyboard) the collection title they want to view.
System displays thumbnails of images within the chosen collection.

View list of images

User selects (mouse click or enter on keyboard) the collection title they want to view.
System displays thumbnails of images within the chosen collection.
User chooses "List" in view option.
System displays list view of images.

View slideshow

User selects (mouse click or enter on keyboard) the collection title they want to view.
System displays thumbnails of images within the chosen collection.
User chooses "Slideshow in view option.
System displays slideshow. NEED DETAILS HERE OF HOW SLIDESHOW WILL WORK.

View image info for all images in collection

Precondition: User is in thumbnail view of collection they want to view

By default, system displays title and description of images.
1. If text is truncated end with "..." and show text in entirety in tool tip. Show 3 lines of description, 2 lines of tags.
User checks box next to "Tags" in show option.
System displays tags along with title and description.

View detailed image

User navigates so identified image is in view (thumbnail or list view).
User selects (click of mouse or enter on keyboard) zoom icon for image.
System displays individual image window on top of Browse Image & Collections window. The individual image window is in focus.
User may choose to go to the next or previous image in the current collection (without leaving individual image window) by using the arrows.

View full screen image

Precondition: User is viewing individual image.

User selects "full view".
System displays image (without metadata) in full screen.
User selects X to close window.

Find image

Find image using filename

Need an image of list view if we think it's important to have it.

User selects collection (can be "alll images").
System displays images in collection.
If not already there, user selects list view (they can also do this in thumbnail view).
System displays list of images sorted alphabetically in descending order.
User scrolls to find image.
If user chooses thumbnail view the images in focus stay in focus (*need to create rule for what shows -- based on top in list?*)

Find image using X tag

User selects tag tab.
System displays tags in the Navigation pane and nothing in the Workspace pane.
User checks tag.
System displays all images associated with tag in the Workspace pane. If tags are not already displayed with images, system automatically displays them.
User continues to choose as many tags as needed.
System displays all images associated with all tags selected.

Alternate 1

3a. User selects tag link.
4a. System selects checkbox for tag and displays all images associated with tag. *Does this clear all previous settings or work just like a checkbox selection? -- I'm thinking the former*

Download image (should everyone really be able to do this - if so do we need an "allow download option"?)

Instructors & TAs only

Re-order collections

User selects Reorder.
System displays Arrows AND Text Entry with current order displayed numerically.
User selects appropriate arrows to move collection(s) to desired location.
System displays changes as they are made.
When all changes are complete (or anytime while in Reorder mode), user selects Save.
System no longer displays reorder UI elements.
Do we need a confirmation message here?

Alternate:

    3a. User types new numerical order into text boxes.
    4a. System displays user entry but does not change order of listed items.
    5a. User selects Save
    6a. System displays list in new order and no longer displays the reorder UI elememts.

Create collection

User selects New.
System displays new collection in collection list and it is selected. Collection Details display in editable form. Working pane displays empty. Image Stream displays defaulted to "All Images".
User types in collection name. They leave Available set to the default of "Today". Set access?
User selects and drags image(s) from image stream to the working pane.
System continues to display image in Image stream pane and also displays it in the Working pane (and the image is added to the collection). The image is added into the collection where "dropped". Can we use the reorder here?
1. Would be nice to allow selecting multiples here with keyboard shortcuts (shift, alt / apple).
User clicks on another collection name.
New collection is created and displayed in collection list. If collections are still alphabetical order (user has never used reorder), collection name is displayed in appropriate alpha order. If user has reordered collections, new collection is displayed at the end of the list. NOTE: We could add an action button in the Collection detail pane to save rather than saving as the user goes.

Alternate - Collection name already exists:

3a. If collection name matches existing name, add a "1" to the end of the new collection name.

Add image(s) to collection

See "View Collection" use case for initial view.

User selects collection from the Navigation pane they want to add images to.
System displays collection's images in working pane.
User scrolls the Image Stream to find the correct image (do we need to display the title in the image stream?).
User selects and drags image(s) from image stream to the working pane.
System continues to display image in Image stream pane and also displays it in the Working pane and it has focus. The image is added into the collection where "dropped". Image is added to the collection.
1. Would be nice to allow selecting multiples here with keyboard shortcuts (shift, alt / apple).
Repeat 4 & 5 as many times as needed.

Alternate:

3a. User chooses a different collection in Image stream. User could also select a tag to further filter images.

Edit collection information

Mouse Interaction:

User mouses over the Collection Details Pane
System displays pane with highlighted background and all editable fields editable.
User clicks on one of the editable fields and changes the setting (on click in pane it goes into edit mode).
System displays change while pane is still in edit mode.
User clicks anywhere outside the pane.
System displays Collection Details in view mode and all previous changes are saved.

Keyboard interaction:

User tabs to the Collection Details Pane.

System gives first field in Details pane focus and displays the first field, Title, as editable.
User types in new title and continues arrowing through the rest of the fields changing as many as they like.
System displays changes (and saves) data immediately as the user is making the changes.

Remove image from collection

Precondition: User is viewing the they want to remove image from and have located the image.

Assumption: User is in any collection BUT All Images. See alternate for All Images flow.

User selects the remove icon below image.
System removes image from display and displays a "image has been removed from [name of collection] collection".

Alternate:

User is in All Images and selects the delete icon for an image (different from the remove icon).
System displays modal message "Deleting the Image will also delete it from [collection name, collection name...] collections. To only remove it from a collection go to that collection. Are you sure you want to delete [filename]?

Re-order images within collection

*This functionality already exists via the Lightbox Component

Mouse & keyboard interaction

User selects image to be moved (mouse click on image or arrow keys to navigate and land on image).
System displays image with visual indication it is in focus.
User "drags" image (mouse drag or ctrl+arrows on keyboard).
System displays 1) ghost where image was picked up from, 2) avatar of image as it is moved and 3) visual indication of drop target.
User "drops" image in desired location (mouse release or ctrl key release).
System displays image in new location. That image is still in focus.

Alternate (List View):

Add images to Image Gallery (IG) from within Sakai

Add Images to IG from current site

User selects Add Image in Global Action Links Bar.
System displays "Choose Images" page with Your Computer selected.
User selects Images in this site.
System displays view of image files in the Resources tool.
User checks 1 to all files and the Continue button.
System displays chosen files with an option to remove any and to "add more images" (see alternative).
After reviewing chosen images, user selects Add Images button.
Once complete, system displays success message at top of the page.
User may complete Add info to All Images use case and Add info to Individual Image use case.

Alternate

6a. User selects Add More Files & completes steps 2 - 5 as appropriate OR they complete Add Image to Image Gallery from within Sakai use case.

Add Images to IG from another site

User selects Add Image in Global Action links bar.
System displays "Choose Images" page with Your Computer selected.
User selects Images in another site.
System displays view of image files in the Resources tool and the Image Gallery with dropdown for choosing the site (defaulted to "Choose site").
User checks 1 to all files and the Continue button.
System displays chosen files with an option to remove any and to "add more images" (see alternative).
After reviewing chosen images, user selects Add Images button.
System displays success message at top of the page.
User may complete Add info to All Images use case and Add info to Individual Image use case.

Alternate

6a. User selects Add More Files & completes steps 2 - 5 as appropriate OR they complete Add Image to Image Gallery from within Sakai use case.

Upload images to IG

User selects Add Image in Global Action Links Bar.
System displays "Choose Images" page with Your Computer selected.
User selects browse.
System displays Mac finder or Windows explorer view of user's files on their computer.
User selects files. Using shift (select consecutive group) and ctrl or apple command buttons (select nonconsecutive group) the user may select multiple files at once.
System displays progress bar describing % complete and estimated time left to complete.
System displays chosen files with an option to remove any and to "add more images" (see alternative).
After reviewing chosen images, user selects Add Images button.
Once complete, system displays success message at top of the page.
User may complete Add info to All Images use case and Add info to Individual Image use case.

Alternate

6a. User selects Add More Files & completes steps 2 - 6 as appropriate OR they complete Add Image to Image Gallery from within Sakai use case.

Add info to All Images (Batch) -- extension to "Add image to IG" and "Upload image to IG" use cases

Precondition: User has completed Upload or Add use case. After adding they land on the Batch add information page.

User completes Upload Image or one of the Add Image use cases.
System displays Batch information page and "images successfully added" message.
User enters tags they want associated with all added images. Tags are separated by a space. Multi-word tags entered with an underscore. As user enters text, system displays previously used tags matching the entered text (auto-complete). User may select auto-complete choices.
1. User may also select a tag(s) from the "Your previously used tags" tag cloud by clicking (or enter on keyboard).
User enters new collection title OR chooses an existing collection for images to live in.
1. User may choose "Add to more collections" to get more Existing dropdowns. One new dropdown appears when link is clicked.
User sets copyright if default "Material is in public domain" is not appropriate.
If appropriate, user checks "Display copyright alert and require..."
User selects access option to images.
User selects email notification option. Need example email!
User completes Add Info to Individual Image use case OR selects Done button.
If Done, system displays Browse Images & Collections panes with collection they have been working on in focus. If no collection was chosen, view is of All Images.

Add info to individual image -- extension to "Add image to IG" and "Upload image to IG" use cases

Precondition: User has completed Upload or Add use case. After adding they land on the Batch add information page.

User selects Individual Image tab.
System displays thumbnail of each image along with editable information for the information (see wireframe): title, filename, description, tags, copyright, access.
User enters and/or edits desired information for each image and selects Done.
System displays Browse Images & Collections panes with collection they have been working on in focus. If no collection was chosen, view is of All Images.

Flag image (Could this be for all users?)

Do we really need this use case? Where to put the "flag" interaction? How is flagged different from some other collection? What will it be used for? Can user just create a flagged collection if they need one?

Same as Add Images to collection use case OR should we have a shortcut? We could include a flag icon with image that is colored in when it is flagged and not otherwise. Clicking the icon makes it flagged (or something like that). We could implement the former and see how much the functionality is used. The trade-off is that if needed the easier interaction (former) would likely get used more.

Delete image

User selects "All Images" in navigation pane.
System displays all images in the Working pane.
User locates the image they want to delete and selects Delete.
System displays modal message "Deleting the Image will also delete it from [collection name, collection name...] collections. To only remove it from a collection go to that collection. Are you sure you want to delete [filename]?
User selects "Delete Message".
System displays message "[filename] (or should this be worktitle?) has been deleted and image is deleted from all collections.

Edit image information (generalized use case)

Title, description & tags associated with image can be edited in the Workspace pane. They -- and additional (OTHER) information can be edited in the individual pane.

Edit title

User mouses over an image in the Workspace Pane.
System displays: 1) mouse pointer as text cursor, 2) background around image and metadata highlighted and 3) editable fields in edit mode.
User clicks in Title field and types in new title (may change in its entirety or partially).
- Default title is filename. Once user edit this field the filename is saved a seperate metadata and can only be viewed in the detailed individual image pane.
System displays new title as user types and changes are saved. What about undo?

Edit description

1 - 4. Same as Edit title for the description field.

Edit tags

Precondition: Since the tag field is not displayed by default, user needs to check "Tags" in 'Show' options.

1 - 4. Same as Edit title for the tag field.

Edit OTHER info about image

Precondition: View detailed image use case has been completed and user is on the individual image pane to edit.

User selects edit icon for field they want to edit and makes appropriate changes. Initial fields in view are Worktitle, Description, Tags, Collections.
1. Selecting "More Details" displays the all other information stored about the image (see wireframes)
System displays and saves changes.
User may move through images in collection they are working in by using the arrow controls at the top of the image. If so, repeat steps 1 & 2 as many times as needed.
User chooses "Back to Thumbnails". Do we need a keyboard shortcut for this or do we already have one in Sakai?
System displays thumbnail view of images in current collection. Collection 'selected' in navigation pane.

Outstanding Questions

Outstanding questions.txt