| 1) Quick Navigation Menu
This handy little menu can be used to navigate any portlets in a users layout. When a user selects a portlet, the system behavior would simply be to focus that portlet. This feature would give users persistent access to any portlet in the portal from one easy location. Depending on how this would be implemented, this feature could also help disabled users since screen readers would hit this menu first.
2) Updated Logo
This is an optional logo that could be used in place of the current logo. Click here for more information on this subject.
3) Admin. Tools Menu
Users with administrative privileges would see this menu. This menu would list all of the administrative tools/portlet (i.e. Groups Manager, Channel Manager, Etc.) in uPortal. Ultimately, I would like to see a portlet that consolidates a dashboard view of all of these tools much like Mambo's back end UI. Ideally, all of these tools would be completely re-designed to create a cohesive user experience across all of the workflows – but that's another discussion.
4) Custom Settings
Think of this as a menu that provides access to the Preferences options. I'm not sure about the "Custom Settings" title, but the idea is to have a roll up of preference options.
5) Quick Link Icons
These icons represent quick link / tray functionality. The concept here is to allow users to have quick access into key portlets or portal functionality with the added layer of alerts (i.e. mail notifications) where ever appropriate. The edit link next to the icons implies a UI that would allow users to select which set of quick link icons they want to display in this area.
| Warning |
|---|
| These icons are FPO (for placement only) and were grabbed from other, possibly commercial / licensed products, rather randomly while mocking up these designs. These icons are not to be used or reproduced without permission. At a later date, these icons, and consequently, these screenshots will be updated with OS friendly versions.
If you plan to use these screens in any of your own materials, please include this disclaimer. |
6) Page Headers
Page headers are simply titles that re-enfource enforce the tab a user is in. The idea of a page in this design is a slight departure from Collier's concept of a page in that these pages reflect a renaming of what we are currently calling tabs. The reason I'm calling them pages rather than tabs is because tabs are navigation metaphores and pages are conventionally what are understood to be destinations. This nomenclature adjustment could make things a little easier for the user to understand.
7) Page Menu
In addition to selecting a tab to navigate to a page, a user can also use this menu.
8) Variable Tab Navigation
This AJAX powered tab navigation system will allow users to add as many tabs as they want without concern for horizontal screen real estate. When tabs exceed a given browser width, they get rolled-up into a fly-out menu selector. Also, users will be able to re-arrange tabs on the fly by dragging and dropping their location. Color coding tabs might also be offered.
9) Section Menu
This menu implies a "tabs within tabs" option for those users who find a need to organize their portal with a secondary level of navigation. I think this whole idea needs to be flushed out a bit more, but I thought it makes sense to at least throw it in here for discussion.
10) AJAX Columns
These columns display option selectors to hide the columns, delete them, and more. The columns also support drag and drop functionality so that users can easily swap the position of any given column. Users might also be able to grab an entire column and drag and drop it into a different tab (blue sky idea). It would also be nice to distinguish between narrow and wide columns – forcing portlets to be developed for one or the other. This would offer a cleaner (visually easier to understand) and more conventional UI.
11) Example of a Narrow Column Portlet
This portlet should be displayed only in narrow columns and prevented from being displayed in wide columns.
12) Example of a Wide Column Portlet
This portlet should be displayed only in wide columns and prevented from being displayed in narrow columns.
13) Portlet Styles
Portlets should have UI options to change the labels / titles, colors, border styles, bg. transparencies, header icons, etc. on an individual and global level.
|