Child pages
  • Use Case Details
Skip to end of metadata
Go to start of metadata

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

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

View list of images

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

View slideshow

  1. User selects (mouse click or enter on keyboard) the collection title they want to view.
  2. System displays thumbnails of images within the chosen collection.
  3. User chooses "Slideshow in view option.
  4. 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

  1. 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.
  2. User checks box next to "Tags" in show option.
  3. System displays tags along with title and description. 

View detailed image


 

 
 

  1. User navigates so identified image is in view (thumbnail or list view).
  2. User selects (click of mouse or enter on keyboard) zoom icon for image.
  3. System displays individual image window on top of Browse Image & Collections window.  The individual image window is in focus.
  4. 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.

  1. User selects "full view".
  2. System displays image (without metadata) in full screen.
  3. 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. 

  1. User selects collection (can be "alll images"). 
  2. System displays images in collection. 
  3. If not already there, user selects list view (they can also do this in thumbnail view).
  4. System displays list of images sorted alphabetically in descending order.
  5. User scrolls to find image.
  6. 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

  1. User selects tag tab.
  2. System displays tags in the Navigation pane and nothing in the Workspace pane.
  3. User checks tag.
  4. System displays all images associated with tag in the Workspace pane.  If tags are not already displayed with images, system automatically displays them.
  5. User continues to choose as many tags as needed.
  6. 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

  1. User selects Reorder.
  2. System displays Arrows AND Text Entry with current order displayed numerically.
  3. User selects appropriate arrows to move collection(s) to desired location.
  4. System displays changes as they are made.
  5. When all changes are complete (or anytime while in Reorder mode), user selects Save.
  6. System no longer displays reorder UI elements.
  7. 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


 

  1. User selects New.
  2. 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".
  3. User types in collection name.  They leave Available set to the default of "Today".  Set access?
  4. User selects and drags image(s) from image stream to the working pane.
  5. 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).
  6. User clicks on another collection name.
  7. 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. 

  1. User selects collection from the Navigation pane they want to add images to.
  2. System displays collection's images in working pane.
  3. User scrolls the Image Stream to find the correct image (do we need to display the title in the image stream?).
  4. User selects and drags image(s) from image stream to the working pane.
  5. 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).
  6. 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:

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

Keyboard interaction:

  1. User tabs to the Collection Details Pane.
  1. System gives first field in Details pane focus and displays the first field, Title, as editable.
  2. User types in new title and continues arrowing through the rest of the fields changing as many as they like.
  3. 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. 

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

Alternate: 

  1. User is in All Images and selects the delete icon for an image (different from the remove icon).
  2. 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 

  1. User selects image to be moved (mouse click on image or arrow keys to navigate and land on image).
  2. System displays image with visual indication it is in focus.
  3. User "drags" image (mouse drag or ctrl+arrows on keyboard).
  4. 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.
  5. User "drops" image in desired location (mouse release or ctrl key release).
  6. 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


 

 
 

  1. User selects Add Image in Global Action Links Bar.
  2. System displays "Choose Images" page with Your Computer selected.
  3. User selects Images in this site.
  4. System displays view of image files in the Resources tool.
  5. User checks 1 to all files and the Continue button.
  6. System displays chosen files with an option to remove any and to "add more images" (see alternative).
  7. After reviewing chosen images, user selects Add Images button.
  8. Once complete, system displays success message at top of the page. 
  9. 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



  1. User selects Add Image in Global Action links bar.
  2. System displays "Choose Images" page with Your Computer selected.
  3. User selects Images in another site.
  4. System displays view of image files in the Resources tool and the Image Gallery with dropdown for choosing the site (defaulted to "Choose site").
  5. User checks 1 to all files and the Continue button.
  6. System displays chosen files with an option to remove any and to "add more images" (see alternative).
  7. After reviewing chosen images, user selects Add Images button.
  8. System displays success message at top of the page. 
  9. 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



 



 

  1. User selects Add Image in Global Action Links Bar.
  2. System displays "Choose Images" page with Your Computer selected.
  3. User selects browse.
  4. System displays Mac finder or Windows explorer view of user's files on their computer.
  5. 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.
  6. System displays progress bar describing % complete and estimated time left to complete.
  7. System displays chosen files with an option to remove any and to "add more images" (see alternative).
  8. After reviewing chosen images, user selects Add Images button.
  9. Once complete, system displays success message at top of the page. 
  10. 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.

  1. User completes Upload Image or one of the Add Image use cases.
  2. System displays Batch information page and "images successfully added" message.
  3. 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).
  4. 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.
  5. User sets copyright if default "Material is in public domain" is not appropriate.
  6. If appropriate, user checks "Display copyright alert and require..."
  7. User selects access option to images.
  8. User selects email notification option.  Need example email!
  9. User completes Add Info to Individual Image use case OR selects Done button.
  10. 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.

  1. User selects Individual Image tab.
  2. System displays thumbnail of each image along with editable information for the information (see wireframe): title, filename, description, tags, copyright, access.
  3. User enters and/or edits desired information for each image and selects Done.
  4. 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?

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


 

  1. User selects "All Images" in navigation pane.
  2. System displays all images in the Working pane.
  3. User locates the image they want to delete and selects Delete.
  4. 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]?
  5. User selects "Delete Message".
  6. 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

  1. User mouses over an image in the Workspace Pane.
  2. System displays:  1) mouse pointer as text cursor, 2) background around image and metadata highlighted and 3) editable fields in edit mode.
  3. 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.
  4. 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.

  1. 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)
  2. System displays and saves changes.
  3. 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.
  4. User chooses "Back to Thumbnails". Do we need a keyboard shortcut for this or do we already have one in Sakai?
  5. System displays thumbnail view of images in current collection.  Collection 'selected' in navigation pane.

Outstanding Questions

Outstanding questions.txt 

  • No labels

3 Comments

  1. i think in the thumbnail view we don't need to display the filename(at least by default). e have a working title that we can display and also we have the image itself which is 1000 words.

  2. I apologize for being so late with these comments, Daphne. I hope at least some of them will still be useful.

    1. The split between "Resources"-type data and Image Gallery data is clearer now in the wireframes and should be easier to work out in the detailed requirements and implementation. Thanks!

    2. "Browse Images & Collections" - The "Search" input says "enter filename or tag". Wouldn't title or description usually be more useful than filename?

    3. "Browse Images & Collections" - Still wondering what "Recently Added" means and whether there's a way to show "Uncollected" images....

    4. "View image info for all images in collection" / "If text is truncated end with '...' and show text in entirety in tool tip. Show 3 lines of description, 2 lines of tags." - Just wanted to explicitly warn that this will cause browser text search to fail (Firefox on-page searches are especially convenient), and to do my usual worrying about how to dynamically figure out where word-wrapping occurs.

    5. "Find image using X tag" / "User selects tag link." / "Does this clear all previous settings or work just like a checkbox selection? – I'm thinking the former" - Me too. The user sees it's a link, so what should a link named after a tag link to? Intuitively it would be a bookmarkable URL to all visible images in the collection(s) that include that tag, something like "http://site/ImageGallery/tags/SusanBAnthony".

    6. "Download image (should everyone really be able to do this - if so do we need an 'allow download option'?)" - The intent needs to be spelled out more. It's impossible to prevent someone from downloading an image that's natively accessed by the browser. The way really paranoid sites try to block this is by showing all images in Flash or a Java applet, but even then the viewer can always take a screenshot. Are you assuming a gigantic full-size original image file somewhere that isn't usually displayed by the browser but which is accessible by a special link that gets enabled or disabled?

    7. "Re-order collections" - Is this required in the first release?

    8. "Image Stream" - This is an interesting way to handle image copying / moving between collections, but running through some imaginary workflows makes me doubt it can be the only supported way to add to a collection from another collection. There just isn't enough screen real estate to handle a lot of use cases. As you say, it would be "nice to allow selecting multiples here with keyboard shortcuts (shift, alt / apple)", but a skinny row with a wide scrollbar makes it impossible to keep track of what's been selected. With a large collection (especially one like "All Images"), the user is likely to want to search by title, tag, or description, and there's no room for that either. Then there's the question of whether the image(s) are being copied or moved (for example, when reducing the size of a large collection). We may need to provide some more source-centric approach to adding images to a collection from other collections, much as you've already done for adding images from outside the Image Gallery site.

    9. "Create collection" / "3a. If collection name matches existing name, add a '1' to the end of the new collection name." - Optional automated renaming can be valuable for operations which involve automatic creation of objects that must have unique names (such as downloading folders of files or restoring backups), but I've never encountered it when the user is explicitly focused on one object at a time. It seems to introduce an unnecessary layer of uncertainty. Are we certain that users would prefer this over being warned that a collection with that name already exists?

    10. "Collection Details" (editable) / "Access" menu - Choosing the "Site" or "publicly viewable" options is easy to visualize, but we'll need to know more about the "selected groups only" workflow.

    11. "Add Images" / "2) Add Images to Image Gallery" - The "Add more images" link seems misplaced – at least it took a long while for me to find it. The two buttons at the bottom ("Add Images" and "Cancel") navigate to a new page, and so does "Add more images", so it seems that they should all be in one place. And the distinction between "Add Images" and "Add more images" isn't immediately clear. As an alternative to "Add Images", what do you think of "Continue" or "Finish adding images" or "Add information to images"?

    12. "Add Images" / "Add information to images" / "Individual" tab - This is a roomy and straightforward editing environment compared to the more compact and complex "edit in place" of the "Browse Images & Collections" view. At some point early in the development process, could we try it out on testers as an alternative approach to editing?

    13. "Edit collection information" / "# User mouses over the Collection Details Pane / # System displays pane with highlighted background and all editable fields editable." - Especially with the dropdowns I worry that we won't be able to keep the display size steady. Just a warning that we may have to be content with a highlighted background until the user clicks.

    14. "Edit collection information" / "# User clicks anywhere outside the pane. # System displays Collection Details in view mode and all previous changes are saved." vs. "System displays changes (and saves) data immediately as the user is making the changes." - Having two different saving behaviors in the same panel depending on whether the user entered it by a mouse click or a tab seems overly complex. Especially to a user like myself who often combines mouse click and tabbing. (smile)

    15. "Add info to All Images (Batch)" / "User selects email notification option. Need example email!" - Not intuitively obvious to me, I'm afraid. Could you explain who gets emailed when?

  3. By the way, if I could pick the single most important "Outstanding question", it would be "Need to figure out image sizing". Those particular "invisible" requirements have a huge impact on both the client and server sides of the project.