Customize Portal Gallery
Gallery Definition
BYU would like to create a new "gallery" interface for browsing and selecting skins and portal content.
This portal customization gallery will be referred to in this documentation as simply "gallery".
- 1 Gallery Definition
- 2 Requirements
- 3 Design
- 3.1 Initial Mockup
- 3.2 Current Design
- 3.2.1 Design Notes
- 3.2.2 Open Gallery
- 3.2.3 Add Portlets
- 3.2.4 Use It
- 3.2.5 Select Skin
- 3.2.6 Select Layout
- 3.3 Interaction
- 3.3.1 Drawer
- 3.3.2 View Navigation
- 3.3.3 Gallery Selection
- 3.3.4 Filtering Selection
- 3.3.5 Adding Portlets to Layout
- 4 Implementation
Requirements
BYU's proposed "Gallery" feature is essentially a re-design and repackaging of the existing AJAX layout editing features present in uPortal 3.0 and above. While BYU does not propose many new features, the requested user experience differs significantly from that provided in uPortal 3.2.
The "Gallery" will be a unified content selection view consisting of the following sections:
Portlets: Add a portlet to the current tab
Skins: Change the currently-selected skin (called "theme" in the BYU interface)
Tabs: Add a pre-configured or custom tab to the layout
Additional requirements:
All gallery element collections should be navigable by both browsing and searching
Portlets should be represented by both a name and an icon (new feature)
Design
Initial Mockup
Provided by BYU
Inspired by the MyIthaca portal:
Demo videos: the "customize" demo is particularly relevant
Current Design
Provided by Unicon
Design Notes
Scope: Select and Add, not Manage
The scope of the gallery is to allow users to select from existing content and options. The gallery is not scoped to provide management capability of the content and options. Separate interfaces are needed to facilitate the management (create, edit, delete) of the content and options provided to the gallery.
Scope: Does not include Tab Management
The scope of the gallery does not include the management (create, edit, delete) of tabs/pages within the portal. Separate interfaces will provide Tab Management. This separation keeps the tasks and the interfaces cleaner and simpler, and therefore more intuitive.
Open Gallery
The gallery is closed by default. The Customize button opens the gallery drawer by sliding down the current view and revealing the drawer contents. The gallery will open to the Add Stuff view. The gallery drawer can be closed by clicking again on the Customize button (arrow direction will change based on the open/closed state) or on the I'm Done button. The gallery drawer should also close if the user clicks outside of the gallery.
Add Portlets
Portlets can be filtered by category or search to aid the user in browsing and selecting portlets.
Current selection is indicated by hover/focus feedback.
Clicking on the portlet in the gallery adds the portlet to the topmost position of the first available column in the current layout. The added portlet will be indicated through feedback to the user (in this example, an outline/glow that quickly fades to normal). The gallery drawer should remain open after adding a portlet (even though adding a portlet will require a page refresh).
Search will filter the list by the search term as the user types. Search searches against portlet functional name, portlet display title, and portlet description.
Packaged portlets (template tabs) are also available for selection. Adding a package creates a new tab for the user.
Use It
Use It allows a user to use the portlet without adding the portlet to his layout. Use cases are single-use or rare-use portlets (one-time registration functions, for example).
Use It allows the user to select any portlet that is flagged as available for use without being in the user's layout. Selection method is search, or browse.
Current selection is indicated by hover/focus feedback.