View Source

Introduction

When uPortal 3 launches, it will look and work like uPortal 2 out of the box. However, in addition to this default look, we would like to include an additional interface that refreshes the overall look of uPortal, takes advantage of many of the new features of the framework, and provides an easy-to-follow starting point for organizations wishing to customize uPortal's look to their needs.

This document is very rough. It will grow/refine as time goes on, but I wanted to get community involvement started.

The following screenshots are meant to give the community the general idea of a flow for the uPortal interface. These screenshots use a My VT look and feel since it was easier to modify existing screenshots rather than create new ones from scratch. The final look and feel will determined after the features have been nailed down.

General Notes/Thoughts/Goals

All layout manipulation must occur in a transform, not a portlet. Since organizations have tremendous control over the structure and layout of their portal, encoding this functionality in portlets would be problematic.
Bringing Customization Forward - At the Baltimore UE BOF, we all agreed that customization was too complicated and not enough people used it. Most of the customization works similarly to uPortal 2.2+ but the most common functions have been brought forward to make them more discoverable. I know some would like to eliminate the customization "mode" entirely but doing so relies on JavaScript more than might be acceptable in a lowest common denominator version of the interface (such as this one). However, if there is enough interest in the community, we can move the bar for the lowest common denominator. That said, some functionality has been enhanced with JavaScript.
- Adding Content - there is an Add Content button on the screen at all times (unless content cannot be added to the current tab). With JavaScript enabled, there is a drop down to select a portlet to add, bypassing the portlet selection screen.
- Removing Content - there is a remove button on every portlet's titlebar
- Moving Content - Portlets can be moved via a drop-down portlet menu.

View Mode

This screenshot shows a standard tab within the portal. Some notes on this screen:

Page Header - Standard header with organization and portal branding.
Header Links - There are three portal-provided header links: Settings, Help, and Log Off. These links would be generated by a portlet.
- Settings - Goes to the Settings screen. The settings portlet is only a concept and does not exist.
- UPC:Settings Menu - With JavaScript enabled, a small down arrow will appear next to the Settings link. Clicking the arrow brings up a list of all of the settings modules the user has access to allowing the user to jump directly to that item.
- Help - Opens a new window (or not) to portal documentation.
- Log Off - Logs the user off of the portal.
Tabs - Standard tabs with the option of having active and inactive icons for each tab. Tab colors could also be an option.
Greeting - A place for a user greeting. This text would be generated by a portlet with no chrome.
Search - This is the normal mode of a new search portlet with no chrome. Submitting a search takes you to the focused mode for the results. The search portlet is only a concept and does not exist.
Location Bar - Shows the name of the current tab/section. If you navigate to a page of a tab/section then this shows the breadcrumbs for that page.
Add Content - Goes to the Add Content screen.
UPC:Add Content Menu - With JavaScript enabled, a small down arrow will appear next to the Add Content link. Clicking the arrow brings up a list of "New and Popular Portlets" that allows orgnizations to advertise new content. Clicking one of these portlets then allows a user to select a location to add the portlet. The last option on the menu is "Select content to add..." which goes to the Add Content screen.
Change Layout - Goes to the Change Layout screen.

Portlet Actions - In the titlebar of each portlet are buttons representing the various portlet actions. By default, only three buttons are shown: Portlet Menu, Collapse, and Remove. Actions not shown in the titlebar are displayed in the portlet menu. Organizations should be able to easily customize which actions are in the titlebar vs. the menu.

Collapse - Collapses a portlet into its titlebar. When collapsed, this button becomes an expand button.
Expand - Expands a portlet from its titlebar into a normal portlet view. When expanded this button becomes a collapse button.
Remove - Removes the portlet from a user's layout. A JavaScript prompt is optional.
Focus - Puts the portlet is a focused view mode. See see the Focused Portet example below.
Detach - Opens the content of the portlet is a new window. See the Detached Portlet example below.
Move - Allows the user to move the portlet.
Help - Puts the portlet in Help mode.
Settings - Puts the portlet in Edit mode.

UPC:Portlet Menu - With JavaScript enabled, a down arrow button will appear in the portlet titlebar. Clicking the button brings up a list of portlet actions not shown in the titlebar. If JavaScript is disabled, all actions will be UPC:displayed on the titlebar.

If a particular action in the titlebar is unavailable for a particular portlet, it is hidden for all actions except for Remove. If a user cannot remove a portlet, the remove button is disabled. This button is disabled and not hidden so that Remove is always the last button on the toolbar. This builds up a virtual padding in users mind that "unless I want to delete, don't click in this spot". By not hiding the button, we maintain this padding. Other "non-destructive" functions can hidden to reduce clutter because their consequences are less severe.

Community Forums - This portlet is collapsed.
Contact Us - This portlet has had its titlebar disabled.

Sections

Instead of subtabs, we are calling them sections in the UI. The parent tab acts as the first/default section by adding the word "Home" after it. This UI only considered one level of sections. Doing more than one level might be better served by a folder/column structure.

Detached Portlets

This is a detached portlet.

Focused Portlets

This is the focused mode of the Local Newsgroups portlet.

Header Links - The Settings and Help links have been removed. This is to prevent confusion between the portlet-specific settings and help links below.
Back to Community - This is a link back to the location in the portal the user was at when they focused the portlet.
Settings - This puts the portlet in Settings mode.
Help - This puts the portlet in Help mode.

Settings Portlet

This screenshot shows a rough concept for the Settings portlet. Each item on the left is a plugable module. Only modules for which the current user has access would be displayed.

Note: The modules listed here are for example purposes only and are not necessarily proposed pre-packaged modules.

Search

This is a concept for the search portlet. Institutions could add their own search engine modules to the left hand bar. Each module could be a portlet, iframe, or web proxy. Moving between searches should resubmit the keywords. Different search modules can change the search box in the upper right with additional options (like author/subject/ISBN drop down for library catalog) but should maintain only one keywords box.

The search box on the main screen could be the "normal" view of the search portlet. This would be the "focused" view.

Add Content

There is a section for browsing portlets and a section for browsing "collections" which is another term I'm playing around with instead of "fragments". Do collections need categories?

Only one folder/portlet can be expanded at a time. Inside of a folder, one portlet can be expanded at a time. When expanded, a portlet shows a description and an Add Portlet link.

Change Layout

When the user clicks the Change Layout button, this screen appears. (Labeled Buttons)

Header Help - The normal header of the portal is replaced with a help message indicating that the user is in a different "mode" and directs the user how to get out.
Add Tab - Allows the user to choose where a new tab is created. (UPC:Example) New tabs are created with the name "New Tab". Also, an initial column is added with the same help box that was shown in the Sections screenshot.
Finished - Returns the user to the normal view of the portal.
Always Saved - All changes made to a layout are saved immediately. Things are easy enough to change, so they are easy enough to change back if the user makes a mistake. Right?
Always Navigable - The user can freely navigate the portal in any change content mode. This allows a user to choose to move a portlet, then navigate to a different tab where they choose a location.
Disabled Content - All of the content on the page is put into a disabled state so the user is unable to interact with it. Also, all portlet actions are removed and collapsed portlets are expanded for this view (but returned to their original state) so users get a better feel for where they are adding content.
Add Content - This button takes the user to the Add Content screen. If the user cannot add content to the current tab, the button is disabled. After UPC:choosing where to add the portlet the user is returned to this screen.
UPC:Add Column - Allows the user to choose where a new column is created.
Move Column - Show the user options where to move a column on the current tab. Much like Add Column.
Expand/Shrink Column - Resizes a column in 5% increments.
Remove Column - Removes a column and all of its contents. Confirmation optional.
Move Porlet - Shows the user options where to move a portlet on the current tab. Much like Add Portlet.
Remove Portlet - Removes a portlet from the user's layout. Confirmation optional.
UPC:Sections - This is a sample of the Change Layout mode for a subtab.