Improving Portfolio User Experience

Owned by Former user (Deleted)
Last updated: May 17, 2010 by Former user (Deleted)Version comment
31 min read

Title:

Improving Portfolio User Experience

Jira Number:

SAK-14417

Related Jira Numbers:

n/a

Component(s):

Portfolio, Evaluation Selection

Author:

Beth Kirschner, University of Michigan
Noah Botimer, University of Michigan,
Nathan Pearson, Sakai Foundation,
Eugene Malin, University of Michigan

Date:

September 9, 2008

Demo Status and Date(s):

Status: 2.6.x Testing
Date: September 29, 2008 Demo

Part 1: Functional Description

Improving Portfolio User Experience (1)

Summary (1)

The OSP Portfolio tool allows users to create personal ePortfolios using existing templates, layouts, or free-form design. Content for ePortfolios can be harvested from many different sources, including Matrix forms, Wizard Forms, general resource attachments, and free-form design.

The User Experience using OSP tools has a long suffered from a confusing, complicated interface. The Portfolio Tool was chosen as the initial candidate for a UI makeover due to it being a comparatively standalone tool. Nathan Pearson (Sakai Foundation User Experience Lead) has provided his time and experience to review and propose an improved Portfolio user interface.

Rationale (1)

(see summary)

Origin (1)

The desire to improve the user experience of the Portfolio Tool originated from a discussion group (BOF) at the 9th Sakai Conference in Paris (see Proposed Changes to UX for Portfolios Tool.

Functional Details (1)

Screen 1: Portfolio List Page

  • Tabbed display with All Portfolios, My Portfolios, Portfolios Being Shared with Me
  • Special display when no portfolios are defined
  • Ability to set default tab
  • Inactive Portfolios will be grayed out in list
  • Modifications to mockup:
    • Change Options to Actions for consistency with Resources Tool
    • "Favs" (starred favorite portfolios) may not be implemented first pass

Screen 2: Create Portfolio Initial Page

  • Portfolio Templates displayed as selectable radio buttons

Screen 3: Create/Edit Portfolio Hub Page

  • Hub display of portfolio creation
  • Tabbed display of Summary, Add/Edit Content, Required Settings, Share with Others
  • Completion Status bar indicates if portfolio is done/ready
  • Active/Inactive status replaces expiration date (Inactive is default; Active selection is unavailable until appropriate completion status)
  • Statistics Analysis displayed for existing portfolios
  • Start Building Now link takes users to the Add/Edit Content
  • Modifications to mockup:
    • Screen layout will be displayed within tool iframe

NP: For future reference, please let designers know of these type of technical constraints early on. Fitting this work into a smaller box will not be trivial and will make a negative impact on the design. That could have been prevented if the constraint was known up-front.

Screen 4: Create Portfolio - Add/Edit Content Page

  • Option to add one or more of each specified form (Edit will be used for adding initial content or editing existing content based on Nathan's comment below)
  • Modifications to mockup:
    • List defined forms with 'edit' option (if multiple selection allowed)
      NP: I would keep these consistent. "Add" to me seems like an action I have to commit to, where "Edit" suggests something I can explore and back out of if necessary. It's subtle, but worth considering.

Screen 5: Create Portfolio - Required Settings Page

  • This optional page displayed only if an Outline Options Form is defined by the Portfolio Template (Step 2)

Screen 6: Create Portfolio - Share with Others Page



  • Initial page offers three simple radio buttons: Private, Public, Shared
  • Public selection displays the public url
  • Shared selection presents Click here to add people
  • Browsing for People can be filtered by group
  • Alternatives to Browsing for People option are: Searching for people, entering an email address, Picking roles related to this site, picking roles related to all sites
  • Modifications to mockup:
    • Alphabetic browse may not be feasible for internationalization
      NP: Can this be toggled for internationalization? (BK: Yes, this is a possibility)

Interaction and Implications (1)

This is strictly a user interface change, though changes to the portfolio share screen will also affect the Evaluator Selection screen used by the Matrix and Wizard tool (since they share the same code).

Diagrams and Mockups (3)

Mockups for the Portfolio UX redesign area available at Improving OSP v1.0.

Community Acceptance (4)

The proposed changes have been discussed over several OSP teleconferences (Portfolio (OSP) Meetings) as well as the portfolio@collab.sakaiproject.org list.


Part 2 of the Proposal for Enhancement Template: The Specification
The specification should be filled out once the feature is clearly defined.

Specification Template (5)

#TestPlan

Test Plan

Setup and Information

Initial Setup

  1. Create a Site with the Portfolio and Portfolio Templates Tools
  2. Go to the Portfolio Templates Tool and select Import from the menu bar
  3. Upload and select Leadership Portfolio.zip, then Import it
  4. On the list, publish the template.
  5. Repeat steps 2-4 for Trivial Portfolio.zip

Leadership Portfolio Information

The Leadership Portfolio has a number of items where a Form may be selected. The Forms used are Basic Page and Example Page. This simplified export does not have all of the materials to enable the visual themes, but the forms are functional. The Leadership Portfolio does have a Required Settings form, so the Edit Portfolio screen will contain the link to completed Required Settings, and the Active/Inactive buttons will be disabled until they are completed.

Trivial Portfolio

The Trivial Portfolio is a one-item template that has no Required Settings. It allows selection of one Basic Page. Its output is a raw XML passthrough. This should only be considered a crude testing device for verifying these low-level items.

Notes

There are various screens and items that are conditionally displayed, where the screen should be verified before and after the trigger condition is in place. One of these is the main Portfolio List. When there are no portfolios, screen 1.1 is visible, but after portfolios have been created in the site, screen 1.2 is presented. Another is Active/Inactive status of a given portfolio, Sharing Status, and wheher comments are allowed. These all affect how the portfolio is displayed in the list and when navigating to the Edit Portfolio and Share screens.

These dependencies dictate that there is not a linear path through the screens to verify them entirely, There must be some creation and interaction with portfolios and navigation back and forth between the screens to confirm that settings are saved and presented properly in the places they appear.

1. Portfolio List

This screen is the main landing page for the Portfolios Tool. There are slightly different views depending on whether there are portfolios available that match the selected filters.

1.1 - No Portfolios

In this view, the user has no portfolios visible, which results in a large, centered message.

1.1.1 - Ownership Filters

There are three tabs that filter the list of portfolios based on owner. These correspond to portfolios owned by the current user (My Portfolios), by other users (Portfolios Shared with Me), and a combined list (All Portfolios).

1.1.2 - Visibility Filters

The visibility filters correspond to portfolios that are hidden or not. Users may mark other users' shared portfolios as hidden to remove them from their main list.

1.1.3 - Create New Portfolio

There is always a toolbar link for creating new portfolios from the Portfolio List. However, when no portfolios match the selected filters, a link to create a new portfolio should be available in the main panel.

1.2 - Populated List

This view shows two portfolios in the list. The list follows the same form for all filtering combinations. Here, the first portfolio is active and the second is inactive and shaded.

1.2.1 - Active Indicator

When a portfolio is marked active, the row should not be shaded and should have a checkmark in the Active column.

1.2.2 - Shared Indicator

When a portfolio is shared or public, there should be a checkmark in the Shared column.

1.2.3 - Comment Count

When a portfolio allows comments, there should be the number of comments given shown in parentheses in the Comments column. When there are zero comments, it should not be a link. When there are actual comments, it should be a link to view a summary of the comments.

1.2.4 - Action Menu

The Options column contains an Actions button to open a pop-up menu. This menu contains options to launch the Share and Edit screens, review statistics, download, delete, and hide the portfolio in that row.

1.2.5 - Inactive Shading

When portfolios are inactive, the row should be shaded. Inactive portfolios should appear only in the list of the owner.

2. Create Portfolio

This screen is launched upon the Create New Portfolio action. It allows for selecting from available templates or a free-form portfolio.

2.1 - Creation Screen

In this view, there are two templates available as well as free-form.

2.1.1 - Portfolio Template Name

The name of the Portfolio Template should be presented next to the selection radio button.

2.1.2 - Full Description

The description field for the Portfolio Template should be presented beneath the Portfolio Template name.

2.1.3 - Option for Free-Form Portfolio

The last option should always be for a Free-Form portfolio.

2.1.4 - Create Portfolio or Cancel

When clicking the Create button, the shell of the portfolio should be created and the Edit Portfolio screen should be launched. Clicking Cancel should return the user to the Portfolio List screen with no new portfolio created.

3. Edit Portfolio (Portfolio Summary)

The main screen for managing a single portfolio is the Edit Portfolio screen. Here, overview information is presented, simple options are editable, and navigation to more complex operations is provided.

3.1 - Required Settings Not Completed

This view shows a portfolio has Required Settings that have not yet been completed. The Status panel is greyed with a hint displayed. The Required Settings (Portfolio Outline Options Form) must be completed to allow viewing of the portfolio.

3.1.1 - Activation Disabled

The option to activate the portfolio is not available until the Required Settings are completed.

3.2 - No Settings Required

This view shows a templated portfolio that does not have Required Settings.

The Quick Start link to Required Settings is omitted when there is no Portfolio Outline Options Form defined for the template.

3.3 - Navigation

This screen shows the navigational elements on the Edit Portfolio screen.

3.3.1 - Back to Portfolio List

This link should return to the Portfolio List.

3.3.2 - Preview Presentation

This link should show the rendered portfolio as viewers will see it.

3.3.3 - Select Materials

There are two links to Add or Edit Content within a portfolio. One is in the tab-strip, while the other is presented in the Quick Start Links panel. Both links should behave exactly the same, launching the Edit Content screen.

3.3.4 - Complete Options

For Portfolio Templates that have an Outline Options Form defined, a Required Settings link should appear in the Quick Start Links panel. This should launch the creation/editing of an instance of that form type. There is zero or one options form linked to a given portfolio.

3.3.5 - Sharing Settings

There are two links to define how a Portfolio will be shared. One is in the tab-strip, while the other is presented in the Quick Start Links panel. Both links should behave exactly the same, launching the Share Portfolio screen.

3.4 - Active Edits

This screen shows the edits that may be made to a Portfolio directly from the Edit Portfolio screen. There are two types of edits: inline text and radio button. The radio button options are saved immediately when clicked. The inilne text edits are enabled by clicking Edit next to the field and then changes are accepted or rejected by clicking Save Changes or Undo, respectively. When choosing Save Changes, the changes to the Portfolio are saved immediately.

3.4.1 - Edit Title

The title or name of the Portfolio, as it will be displayed in the Portfolio List, may be edited from any of the tabbed screens, as it is presented above the tab panel. This functionality is only mentioned on this screen to avoid redundancy.

3.4.2 - Edit Description

The full description of the Portfolio may be edited here.

3.4.3 - Activate

The owner may mark a Portfolio as Active or Inactive by selecting the according radio button here. Inactive Portfolios may have sharing defined, but will not be available to others while Inactive. Active Portfolios will be displayed in the lists of any users with whom the Portfolio is shared, and be viewable.

3.4.4 - Change Comment Settings

The owner may decide to allow or disallow comments by selecting the according radio button.

This screen shows that there is one small helper link on the Edit Portfolio screen under the right conditions.

This sharing link is presented inline with the description of what Active means to provide better contextual cues. It should launch the Share Portfolio screen, as do the other two sharing links. It is available as a link only when any Required Settings have been completed.

The sharing link is no longer available in this release.

3.5.2 - Contextual Comments Count

When comments have been given for a Portfolio, there is an additional status message in the Comments panel to indicate the number of comments. There is a link to view the comment summary.

4. Edit Content

This screen is where artifacts are selected for inclusion within a Portfolio.

4.1 - Select Artifacts

4.1.1 - Selected Single Item

When an item is defined in a Portfolio Template as allowing only one instance of a type of artifact, it is presented as a single-selection box.

4.1.2 - Edit Existing Item

As a convenience for the owner, a link to edit an existing Form is presented here. When clicking it, the item currently selected in the adjacent box is launched for editing. When editing is completed, the viewer returns to the Edit Content screen.

4.1.3 - Create New Item of this Type

Also as a convenience, the owner may create new Forms of the type for an item in a Portfolio Template. When clicking this link, the Form Helper is launched to create the new form. When complete, the viewer retursn to the Edit Content screen. If the new Form has been saved, it will not be automatically selected, but will be available in the selection box.

4.2 - Save Artifacts

When on the Edit Content screen, changes are not accepted automatically. The owner must decide whether to Save Changes or Undo.

The changes in the Edit Content are saved automatically. No further steps are required.

5. Share Portfolio

Options for who may view a Portfolio are set on the Share Portfolio screen. It is quite complex, to accommodate various sharing scenarios.

5.1 - Sharing Summary

This is initial view of the sharing screen. It shows how the screen looks when there are no active sharing selections made.

5.1.1 - Allow Anonymous/Public Viewers

The owner may elect to allow anyone to view this Portfolio. When this choice is made, any Sakai user, as well as any anonymous users may view the portfolio.

5.1.2 - View URL for Public Access

For users that do not have Sakai accounts, a public URL is available. This should be emailed or distributed otherwise to provide a direct path to the portfolio.

5.1.3 - Allow Specific Viewers

The owner may elect to specify individuals or roles that may view the Portfolio. Selecting this option exposes more sophisticated configuration.

5.2 - Share Expanded

This screen shows the sharing screen with the Shared option selected. This exposes a link to the more complex views.

5.2.1 - Specify Sharing Details

Clicking this link navigates to the more sophisticated Sharing Details screen.

5.3 - Sharing Modes

There are a number of modes through which an owner may select viewers for a Portfolio. These are detailed in sections 5.4 - 5.8. There are similarities between the modes, where selections are not finalized until accepting them on the Sharing Summary screen. See section 5.4 for typical details (omitted from other modes).

5.3.1 - Selecting Sharing Modes

Need to click the "Click here to share with others" link in order to access the screen shown in screenshot

When clicking the Select By link, a pop-up menu is displayed to select the desired sharing mode.

5.4 - Browsing by Name

Browsing by name allows the owner to select members of the current site as individuals with whom to share this Portfolio.

5.4.1 - Specific User Selectiion

Users are presented in a checkbox list, with each selected row being highlighted.

5.4.2 - Add Selected Users

After selections have been made, clicking this link will designate the selected users as viewers of the Portfolio.

5.4.3 - Return to Sharing Summary

After selections have been added in any combination of modes, the owner must return to the Sharing Summary to accept or reject them.

5.5 - Share by User ID

In this mode, the owner may share the Portfolio with anyone who has a Sakai account.

5.5.1 - User ID Entry

The User ID should be entered in this box. When using the Add user button, the ID will be checked against the Sakai userbase. If known, the user will be added to the tentative sharing list with a success message. If unknown, an error message will be displayed. As with all sharing modes, the changes must be accepted from the Sharing Summary screen.

5.6 - Share by Email Address

In this mode, the owner may share the Portfolio with any email address.

5.6.1 - Email Address Entry

The intended email address should be entered in this box. If the email address is registered for a given Sakai user, that user will be selected. If not, when accepted, an email will be sent to the address with the Portfolio details. As with all sharing modes, the changes must be accepted from the Sharing Summary screen.

5.7 - Share by Role

In this mode, the owner may share the Portfolio with roles in the current site.

5.7.1 - Role Selection

The intended roles should be selected from the list. All members of that role will be allowed to view the Portfolio. As with all sharing modes, the changes must be accepted from the Sharing Summary screen.

5.8 - Share by any Role

In this mode, the owner may share the Portfolio with roles from any site.

5.8.1 - Role Selection

The intended roles should be selected from the list. All members of that role will be allowed to view the Portfolio. As with all sharing modes, the changes must be accepted from the Sharing Summary screen.

5.9 - Viewer List

This screen shows a Portfolio that has active sharing selections, made in any mode.

5.9.1 - Current Audience

This is a consolidated list of the viewers (users, roles, etc.) for the Portfolio. They may be checked to be removed.

5.9.2 - Add Viewers

This is a link to return to the Advanced Sharing screen, where additional viewers may be selected. Changes may be accepted or rejected by pressing Save Changes or Undo, respectively.

5.9.3 - Remove Viewers

When the Remove selected people/roles button is clicked, the checked viewers are removed from the list. Changes may be accepted or rejected by pressing Save Changes or Undo, respectively.

Interaction

n/a

Quality Metrics

n/a

Assumptions

n/a

Outstanding Issues

The following JIRA issues have been opened as a result of QA Testing: