| 1) Quick Navigation Menu
This AJAX enabled selector menu can be used to navigate all portlets in a users layout. By selecting a portlet, uPortal should focus that portlet view for the user. This feature would give users persistent access to any portlet in the portal from one easy location. Depending on how this would be implemented, it may help disabled users since the screen reader would hit this list 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 get 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 into all of these tools much like Mambo's back end UI. And ideally, all of these tools should 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 for the current Preferences options. I'm not sure I'm completely sold on the title "Custom Settings" yet, but the idea is to have a roll up of preference options.
5) Quick Link Icons
These icons represent a quick link / tray functionality. The idea being that users would have quick access to key portlets or portal features 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. |
6) Page Headers
As a slight departure from Collier's concept of a page in that these headers identify the tab a user is located on. The reason I'm calling them pages rather than tabs is because tabs are navigation metaphores and pages are conventionally what are understood as destinations (or screens). This is just a nominclature nomenclature adjustment that could make things a little easier for the user to understand.
7) Page Menu
This is a redundant navigation option for navigating the pages (or what are currently called tabs). Instead of clicking on a tab to get to the desired page, a user can also use the menu option.
8) Variable Tab Navigation
This AJAX powered tab navigation system will allow users to add as many tabs as they want without concern for the vertical screen space. 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 a nice feature.
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 would be nice to at least throw up 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). This desgn design suggest a properties specification for distinguishing between narrow and wide columns.
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.
|
