Skip to end of metadata
Go to start of metadata

News & Updates

Here's the UX Kit.
This concludes UX improvement project called Improving OSP 1.

The initial upload only includes the PNG screens (source graphic files). The HTML is in progress and will be posted as it becomes available.

Download The UX Kit

This is the complete set of screens in PNG Fireworks format with active layers. They can be viewed using most any image viewer (including browsers), but if you want to edit them, you'll need to use Adobe's Fireworks.

Week 3

This week's changes reflect the feedback given by the OSP group on last Monday's call.


  • Too many things to list at the moment. I've added Beth's summary of last week's call instead. Download the summary here
  • The add user (for sharing) feature is quite different. I'm imagining some intermediate use of AJAX. I hope the screens are self-explanatory.


Zip archive of all screens (Week 3)

Still bothered by a few issues... so I had to make a couple updates. Hope you can see and appreciate the changes.

Zip archive of all screens (Week 2.2)

After thinking over the screens I posted earlier, I realized there were a few things I just wasn't thrilled about. So, I took another swag at it.


  • What you'll find in these screens is that the broad structures have changed, but the detailed interactions (ex: adding content) have not
  • The start screen with the 3 boxes has been replaced with more of a dashboard looking screen
  • There are tabs now that allow the user to navigate between the dashboard, the build/edit mode, and the preview
  • The portfolio list view is a lot cleaner now, IMO
  • This approach also brings the design closer to the new Sakai 3.x direction


Zip archive of all screens (Week 2.1)

Week 2 - Almost there...

This week I've updated the screens per the feedback I received from the group. I've made a few relatively dramatic changes since last week, but I believe they're for the better. Plus, they speak to all the issues (at least those I recall) that everyone raised about the last screens.

I'm not going to summarize the scope of the design, other than to describe how to organize the sequence of the screens.

My numerating system works as follows:

1, 2, 3, 4 – Each number represents a "unique" screen template presented in a sequential order based on a user's flow

1, 2, 2a, 2b, 3 – The a, b, c... n denotation implies a change in a screen's state. So 2a and 2b are the same screen, but something changed. The change is most often sequential based on the letter (but not always, so follow the flows below for best results).

4b.1 – Screens with these notations imply an "alternative" screen. In other words, if you compare 4b and 4b.1, they fall in the same sequence, but 4b.1 is an alternate to 4b for some reason or another.

Sequence Guide (follow these steps)

Flow 1 - User Adds Content

1, (1.1 - if some portfolios already exist), 2, 3, 4, 4a, 4b, (4b.1 - if there is no content available for this section), 4c, (4c.1 - shows a multi-select alternative), 4d. If there are questions about what happens on 4d, I will answer them either here or on a call.

Flow 2 - User Edits General Settings

1, 2, 3, 5, 5a

Flow 3 - User Shares Portfolio

1, 2, 3, 6, 6a, 6b, 6c, back to -> 3a


  • Notice that now there is no longer a step by step status indicator. The wizard has been re-arranged into a hub model, which upon further analysis, seems to be the better approach to this data model.
  • I still haven't included "commenting" and "expiration" into these screens. Those options will probably appear in screen 6. I'm just not comfortable with how much information is on this screen already. If we can lose the "share by role" feature, it would make life a lot easier (smile)

Zip archive of all screens (Week 2)

Week 1 - Rough Draft!'s a quick an dirty clean-up job to the basic flow for adding (building) a portfolio using templates.

As discussed, for now, I've toggles the "design your own portfolio" option. For now, the user is just presented with templates. However, the other option can easily be added into the UI. But I recommend you guys add a config script to toggle this.


  • Removed items that distracted the user from the task at hand (see 1. Before and 1. After)
  • Hid the "design your own portfolio" option
  • Simplified/humanized the language. Stopped using words like "template" or "forms"
  • Added helpful but concise descriptions
  • Recommended a step by step title indicator that does not break
  • Re-arranged the order in which some screens appear (see 3. Before and 4. Before)
  • Reduced the title, name, display name, presentation name chaos! I highly recommend you guys simplify this. One name is plenty. Let the user pick one name, and force the system to pick up the slack of unique identifiers or key field names. That stuff should all be invisible to the end user.
  • Reworked the "add items to your portfolio" screen. Now it is simpler and more scalable. If you look closely at 5a. After, you will that I have also suggested an option to <Add New> content that would deep link to a Wizard or a Matrix – or call up a FCKEditor directly. No need to first create content, then make a portfolio – just link them off and loop them back.
  • Implied the ability to add more than one form "item" to each portfolio template (See 5c. After).
  • Sharing is still incomplete, but will be drastically easier to understand and manage once done (see 7. After). Once a user selects the "Shared" radio, a DIV will slide open to reveal a simplified sharing UI.

*The screens are just a rough draft to facilitate discussion. There's much work to be done.. so please don't worry that these are the "new designs". They're recommendations for better usability. We can talk more and massage them into the screens you want if you don't like these."

I've numbered the screens in sequence. So just start with 1_before.png, then view 1_after.png, and so on.


Zip archive of all screens (Week 1)

This page contains macros or features from a plugin which requires a valid license.

You will need to contact your administrator.

Project Status: Closed
Design Assets
Project Plan
Related Links
  • No labels


  1. I like the direction you are taking with this, Nathan. One functionality point that many of us voiced that I don't see here is the ability from the 5, 5a, 5b screens to jump into creating a new piece of content or to edit an available piece of existing content. It's still pretty much a "picklist" and students would have to go "elsewhere" to do the real heavy lifting.

    1. Hi Sean,

      Your comment was repeated in confluence, so I deleted the duplicate – hope that's okay?

      Actually, in "5a. After", you will see that the pull-down has an <Add New> option. This could link the user to a wizard, for example. But this is still something we should all discuss before I go much further with the idea.

      Likewise, on 5b and 5c, you will see that the content block has a "Remove" link. An "Edit" link can be placed next to this which would present the user with the UI to make changes (either locally, ex: "apply changes here only", or globally, "apply changes everywhere this content appears.")

      But again, I didn't want to go too far with this until we all talked it over – that's why I also made a point of keeping these options fairly modular in the UI; in case we can't fit them in this go-around, we can just ignore/not pursue them at the moment.

  2. The prospect of moving toward a DESIGNED interface is exciting to say the least! Here are my comments:

    workflow breadcrumbs

    The two problems i outline below might both be addressed by one solution, and i think it's a pretty feasible one...

    optionus interruptus

    When the user is in a multi-step process, it's certainly handy context for the user to see "step i of n" – but within the portfolio-building process, there's an optional extra step in the current workflow when "outline options" is used. In your screen shots above, 4.before shows an example of this, where UMich came up with a form allowing the end-user to specify a heading (probably for an <h1> or something along those lines in the final html).

    One of the worst aspects of this interruptive interface is that if you're editing the portfolio, and don't make any changes at this step, why are your only options "Save Changes" (there aren't any changes) or "Cancel" (which aborts the entire workflow process)? The rest of the workflow includes "Continue" and "Back" and "Finish" but here... we're just editing a form! That's not clear to the end user. But i digress--

    This interrupt-at-step-two feature is OPTIONAL, and is often omitted (it comes from selecting a form for "outline options form type" in step 2 of 4 when building a portfolio TEMPLATE). It merely gives the XSL developer more flexibility. It is NOT a requirement for building a portfolio. To illustrate that it's not pertinent to naming the portfolio, here's a different outline-options example from our Serensoft sandbox:

    • step one:
    • step interrupt-everything-with-form-options:

    Here, instead of asking the user for a heading, we're asking for a matrix column. That is, in your 4.before screen-snap above, the developer had included an extra-step form asking for a heading to display in the final portfolio; here we've included a specify-a-matrix-column form, instead. This form could conceivably have dozens of different fields, it's not specific to the naming of the portfolio.

    As to the confusing parts: note that the form-option workflow-interruptus includes a "save changes" button, as i mentioned above, which is guaranteed to befuddle all but the most hardy users. In the context of a standard fill-out-this-form dialog it would make lots more sense (and that's really what this is), but in the context of this multi-step process, yikes! This is likely to confuse end-users.

    • step two:
    • step three:
    • For context, here's a snippet of the matrix showing that the user is specifying which matrix COLUMN to include in the portfolio being created (option-forms can be used for all kinds of things, this is just one example using one field – see where the mouse pointer is in "step-interrupted-of-3" above)

    So: right now, the interrupted workflow comes from using the generic fill-out-a-form interface when there's a form-option involved in the portfolio-creation process. we've got to make that more elegant somehow. either incorporating it as one of the steps, or having a popup show up at that point to make it clear this is an extra side-step...

    portfolio-sharing options

    In the normal build-a-portfolio workflow, the third and final step is to specify sharing options – that is, where i specify who gets to see my portfolio. So, i just hopped directly to the sharing step by clicking on "share", but what is all this step-3-of-3 nonsense? One click, and i'm at some mysterious third step? That's confusing!

    proposed solution

    On the other hand, instead of "step i of n", if we had the breadcrumb-milestones labelled and all steps were displayed on each page, with the current step highlighted, THEN we could drop users at any Nth stage, and they could understand where they were in the workflow context – imagine something like this at the top of every step of the process:

    Name Portfolio >> Design Portfolio >> Share Portfolio

    And, turning such breadcrumbs into clickable links shouldn't be much trouble. Further, if it's possible to have the optional options-form step be injected between 1 and 2, (providing that the 'save changes' button gets updated to match the "continue / back / finish / cancel" model used throughout the rest of the process) that would be even better:

    Name Portfolio >> Portfolio Options >> Design Portfolio >> Share Portfolio

    Alas, i don't know how complicated it would be to have the options-form step conform to the rest of the portfolio-building workflow. If it's too complex for now, maybe we can have a popup window show up (perhaps similar to the way the screen-snaps above kind of float over the page?) to let the user know that this form-filling is a different sub-process from the main workflow.

    what does 'add' mean?

    In several places in the OSP world, there's the opportunity to "ADD" an item. Unfortunately there are two different meanings: at some places it means "to CREATE" a new instance (upload a new file, fill out a new form)... in others it means "to ATTACH" (or include) an existing item to the current context. One term with two partially-overlapping meanings, is likely to confuse.

    I recommend we use specific terminology to distinguish these two contexts – off the top of my head, what i come up with is:

    • CREATE NEW, when expecting the user to come up with something altogether new to the Sakai environment
    • ATTACH or INCLUDE, when expecting the user to link something that already exists, to the current context

    There may be instances where ATTACH allows the users to browse resources, where there's a further opportunity to CREATE a new item before returning to the original context, which is fine. But the two meanings are still distinct, just as the terminology should be.

    Other terms may be more definitive, these are just my first-pass, to avoid the double-duty confusion that 'add' gives us. Whatever terms we use, i strongly recommend we use them consistently across all tools.

    free-form portfolio

    It's not that we're all in love with how elegant free-form portfolios are (far from it, they're not (smile) ) it's that some schools rely heavily on them – LaGuardia/CUNY being a well-known example.

    I imagine we're all hoping that the free-form interface gets a huge overhaul soon to make life better for those who use it – but for now, it's simply required on several campuses.

    default templates?

    In 2.after it looks like you may be hinting at providing a set of default portfolios with the Sakai system? If so... This would be GREAT for a new sakai administrator to have the ability to conjure up some sample templates in order to speed up the process of learning about the interoperability between forms, matrix, wizard, and templates. It might even be nice to have a button such as "create sample portfolio templates" for newbie-types to get a quick start on getting their heads around portfolios. It could import needed matrixes and forms, complete with portfolio templates.

    If not, maybe it's still worth considering. (smile)