Skip to end of metadata
Go to start of metadata

Working Page

This page captures VERY preliminary thinking/brainstorming from the 3akai UX working meetings. It will continue to evolve quickly as we iterate through out thinking. Please also feel free to add your ideas here.

On This Page

Potential Vignette Use Case & Scenario Titles

What does "vignette" mean in the context of this discussion? Vignette here is roughly equivalent to other words like widget, gadget, entity, etc. used in other Sakai contexts. It is being used to refer to a chunk or snippet or piece of Sakai's capabilities that can be incorporated into a page; you can have multiple vignettes per page if desired as well.

A simple example to envision would be a page you might compose for students to read before a class session. You author text on it, embedd files in the text that are pictures and graphs, include a link to a self-test at the bottom that they can take when they've completed the reading, and a discussion area to discuss the reading before/after the face-to-face class session. So in this example the vignettes are offering the capabilities for:

  • files vignette - As an instructor you need the vignette to support finding or uploading the files you want to place in the reading. For the student, the vignette simply displays the content in the right place in the page.
  • self-test vignette - As the instructor you need the vignette to support creating a short quiz or selecting an existing one that you've created beforehand. You also need to be able to choose to include the self-test questions directly in the page, rather than just a link to them. You probably also want the vignette to provide summary stats on how students have done, once they start taking the self-test. As the student you need the vignette to display the questions, accept your answers, and probably provide feedback on your responses.
  • discussion vignette - As an instructor the vignette provides a way to create a discussion topic or thread, or pick from an existing list, to configure options like who can respond and how responses are handled, and to view posts once the discussion starts. As a student you need to be able to view the topic and existing posts and add your own input.

Vignette is not being used here as another word for use-case or usage-scenario. Rather, this page is a place to post examples of the latter, so that they can inform the design of and capabilities needed in vignettes/widgets/gadgets/entities, and how those vignettes should be able to be put together with each other and/or other page content.

Individual Vignette Use Cases

Add Discussion to a page

  • Add a new discussion to allow students to discuss an article/reading/etc.
  • Add snippet of an existing discussion to a page (can we come up with a concrete example of when you would want to do this?)
    For Exam Question, Assignment

Add Discussion Forum to a page

  • Add a container for an indefinite number of discussions about a particular topic

Use Cases related to files ("Resources")

See child page to add use cases

Add an assignment to a page (with due date and other submission criteria)

  • Add a dropbox to the page for uploading a file directly to the page
    • Students see just their dropbox
    • Instructor sees a folder/label for all submissions thus received
    • Allow students to turn in homework in context (ex. of a reading) and let the instructor see all of them
  • Add an assignment description to a page which involves an "inline" submission (i.e. submitting a form) or other activity
  • Add group assignments to a page
    • each student viewer sees only assignments particular to their project team
  • Add a to-do list to a page (i.e. a sequential ordering of upcoming assignments, with due dates, status in workflow, etc.)

Add Administrator Gradebook

  • An administrator of a course that has several different sections wishes to view grades across selected sections, without combining rosters. The administrator would need an interface where (s)he would choose which sites would be included in the aggregated gradebook.
  • A student would like to view all of his/her grades across several different sites.

Work from the Gradebook/Calendar

  • An instructor wishes to work primarily from a gradebook interface.
    • So in the gradebook (which might look much like the one being developed at UCDavis) the instructor wants to add an assignment (NOT an ITEM).
    • He chooses 'assignment' from a dropdown list or a menu screen.
    • A little 'add assignment' thickbox page pops up, and the instructor fills in the assignment details.
    • On Save, the assignment is added to the Gradebook AND to the Assignment List.
    • When the student clicks on the 'Assignment' tool, the assignment is listed there.
    • The instructor would follow the same workflow for adding quizzes and tests, forum postings, etc.
    • Any activity could be created from within the gradebook.
  • Maybe the instructor wishes to work primarily from a calendar interface.
    • In the Calendar, he chooses 'add calendar item' and subsequently chooses a format for the item.
    • As in the scenario above, the different formats would inlcude activities like assignment, quiz, forum discussion, etc., in addition to the typical type of calendar item - meeting, appointment, etc.

Embed streaming video in a page.

  • An instructor should be able to quickly embed say a Utube video directly onto a page.
  • Also, there should be some kind of streaming portlet that will pull a video file from the instructor's Resources and stream it onto a page.

Add a Calendar snippet to a page

  • Insert a snippet of the calendar to show when the assignment is due
  • Insert a snippet of the calendar about our guest presentation later in the semester (i.e. on the page that talks about the presentation)

Add or Share a My Workspace Calendar with other Sakai users

  • Allow an Instructor/Organizer share a personal calendar/schedule with other sites they belong to.

Add my Profile to page

  • Add profile tool to my course home page and add a different view of my profile to my book writing collaborative space

Make Announcement display on course site home page

  • Make an announcement to the class to let them know I want them to attend MLK activities rather than class. You'd like them to give a quick update on what they did at the next class meeting.

Create Groups "on-the-fly"

  • Allow for a quick drag-and-drop from the live user list (lower left corner) to create or build groups for that day's (or week's) activities.

Add prepared short text to a page (Example Bank)

  • For instructors with a large set of selected and collected examples for use in teaching materials such as Resources, Discussion, Assignments, Tests & Quizzes.

Add a Poll questions to a site AND display aggregate poll answers in a page

  • Insert a poll and allow everyone to se aggregated view of everyone's responses (ex. "What kind of car do you drive?")

Add Equation Editor

  • Instructor in a math course needs to create problem sets for students to solve
  • Students need to show their work when solving problem

Calendar as course structure

Professors in the business school who teach an integrated core of classes to a select cohort of students want to set up the delivery of course content and assignments through a calendar that combines the "material" from 5 professors.

Add flash player that integrates with Gradebook 

Instructor creates interactive content in an application such as Raptivity and wants to include it on a page, with the resuts sent to "site stats" or a gradebook

Linked Vignette Use Cases

Add an assignment which includes completing some other activity in the site (e.g. taking a practice quiz, replying to a discussion)

Progressive disclosure of vignettes: when one vignette task is completed, the next becomes available

Different areas allow for different groupings of vignettes

  • If using (something like) assignments, tests & quizzes, projects, dropbox, one might want these to be displayed in different ways within the site.  For example, the Site Info or Homepage may have a listing by week (as described as Syllabus as a Site map), but in another area the grouping would be by topic.  I'd like to see a plug-and-play modular approach to building learning areas.

Syllabus as a site map

See screenshot as an example. This is not the Sakai Syllabus tool, but simply an HTML page authored "outside" of Sakai - using webdav to work directly "in" Sakai via FrontPage - that is named Syllabus. So clearly there are some Sakai2 limitations imposed on the vision presented here, but we got pretty darn close to what we were looking for pedagogically. (Its just not likely achievable by an average user in Sakai2.)

  • This is perhaps the "aggregated view" of a Syllabus tool that is aware of Syllabus items, or aware of entities/vignettes of other tools' content?
  • It provides a grouping together of and links to (organized chronologically and topically) lecture materials (i.e., Resources items), lab materials (i.e., Assignments items), exams (i.e., Tests & Quizzes-like items), special lecture materials (some Resources items, some Schedule items), etc.
  • It effectively provides a sitemap as a navigation aid to finding information in the context of a whole view of the course, however, it is not the "home page" for the course. Its use as a general navigational aid isn't so great later in the semester as you always have to scroll down, but it remains useful for circumstances where "now" isn't as relevant to what one is looking for.
  • Since it is NOT the home page of the site, another web content page is maintained (manually in Sakai2) that provides a synoptic view (collection of vignettes based on date? a course Dashboard of vignettes?) of only "current" items (and links to the "full view" of each item): last lecture, next lecture, next lecture after that; last lab, next lab; student's current course grade and course grade statistics and histogram; link to weekly instructor evaluation form (when active over the weekend). In the general use-case I would likely add current discussion topic assignments in a forum too; however, that wasn't possible in Sakai at the time for this particular course (and the focus had shifted away from asynchronous communication activities.)
  • The example here is from a relatively mature cause taught for several years now, with much material re-used from past incarnations. When it was first being constructed many of the "vignettes" in the Syllabus were simply place-holders until the semester progressed to the point at which the materials had to be created.


  • Timed release of course content


  • In order to determine whether to bump a student up from a B+ to an A- (for example), the instructor would like to take a quick look at everything (everything) that a student contributed to the course during the term. Discussion items, papers, questions sent to the class via email...anything at all that might constitute evidence of the student's contribution to the class.
  • Gradebook should be the PRIMARY Edit/Save/Change/Delete tool, not just be the secondary display from other tools (e.g., Assignments).  The Gradebook should allow for the upload of revised scores to Assignments, Tests & Quizzes, etc.

"Linked" or "Grouped" Profiles to create a social network

  • a drag-and-drop interface to create groups "on the fly" or to visually display the specific social network developed.

Assignment Dashboard Scenario

  • Mapping assignments and other types of activities/references into a cohesive dashboard. The view is per-student whether the viewer is a student or mentor
  • More details: Assignment Dashboard Scenario

Workflow Vignette

  • User/group 1 has set of files to review/approve when they are done they move on to next step.
  • User/group 2 receives files from user/group 1.  They are notified when first group "sends" them files.  User/group 2 reviews/approves and sends to next step.
  • This could be repeatable for a user defined number of steps.
  • The users/groups can be titled by the user and can be comprised of members from the site.
  • Permissions should be configured to allow privacy or not depending on how user decides

Use Case - Editing a Matrix in OSP

Includes a video from a faculty member at University of Delaware.

Use Case - LaTeX Export Function

Includes a video from a faculty member at University of Delaware.

Use Case - Peer Assessment Tool

Includes a video from a faculty member at University of Delaware.

Use Case - Whiteboard

Includes a video from a faculty member at University of Delaware.

Selective Release

Other LMSs, including WebCT, have selective release function. See the linked page for more info.

Related information

  • Content Authoring page thinking through entities:
  • Whiteboard exercise for "Create an assignment for students to read an article and discuss" scenario:
  • Fluid Rich Text Inline Edit Component early thinking which seems like it might have some synergies with the vignette work:
    • This is just more food for thought and should not become a distraction.
    • The most useful sections are probably the problem statement, design goals, and the various storyboards.
  • On the UX Skype conversation on Friday we talked about some basic types of authored pages, and I offered to provide some real-world examples, if I could easily strip out any student-specific information that would be inappropriate to share. I ended up simply recreating one of the lecture pages on the 3akai server:
    • It is a bit of a hack, but you'll get the idea. Some figures (stored in Resources) and text put together to provide students with some background material (no text-book in the course) to read before lecture/lab. There is a link at the bottom to a self-test for students to take after they've read through the material. Note that the self-test is not accessible in this hack, as it uses a non-Sakai system at U-M; used because we could link to individual test "entities" or groups thereof, which samigo didn't support at the time. The self-test is also a link, rather than embedded in the page, so that students can view the notes and scroll around in one window while keeping the test viewable in another window; particularly helpful when they are trying to read numbers form the question and look them up on one of the graphs. (Though, not all students do indeed use it that way, particularly if their browser defaults to opening new tabs rather than windows.)
    • There is also a link to a study-guide to help them later on when they're reviewing this topic for the exam. The study guides for each topic are also grouped together in various other views, often relevant to a particular exam (i.e., on the schedule under the exam in question, in the syllabus for the exam, in an exam study guide that is its own authored page that includes links to some student contributed content, such as discussion posts, etc. tied all together.)


  • No labels


  1. Some brainstorming done at Berkeley about other terms for "vignette":
    (just didn't want to lose these before board got erased)

    1. Yay for some term that people will understand without having it explained to them (almost anything except vignette).