Design Presentations (OSP 1)

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.

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

Summary

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

Enjoy!

Zip archive of all screens (Week 3) Click Here to Download

Week 3 Thumbnails
1.1	1.1a	1	2
3	3a	3b	4
5	6	6a	6b
6c.1	6c	6d

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) Click Here to Download

Week 2.2 Thumbnails
1.1	1	2	3
4	5	6

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.

Summary

• 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

Enjoy!

Zip archive of all screens (Week 2.1) Click Here to Download

Week 2.1 Thumbnails
1.1	1	2	3
3a	3b	4	5
6

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

Notes

• 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

Zip archive of all screens (Week 2) Click Here to Download

Week 2 Thumbnails
1.1	1	2	3
3a	4	4a	4b.1
4b	4c.1	4c	4d
5	5a	6	6a
6b	6c

Hereweek1_screens.zip'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.

Summary

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

Enjoy!

Zip archive of all screens (Week 1) Click Here to Download

Week 1 Thumbnails
1. After	1. Before	2. After	2. Before
3. After	3. Before	4. After	4. Before
5. After	5. Before	5a. After	5b. After
5c. After	6	7. After	7. Before