Customize Portal Gallery

Owned by Gary Thompson
Last updated: Aug 11, 2010 by Jen BoureyVersion comment
7 min read

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


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:

  1. Portlets: Add a portlet to the current tab
  2. Skins: Change the currently-selected skin (called "theme" in the BYU interface)
  3. 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.


Clicking on a portlet to use it will close the gallery and go to a focused view of the selected portlet. From the focused view, the user has options to finish working with the portlet (returns to dashboard view) or to add the portlet to his layout.


From the focused view of using a portlet, the user may choose to add the portlet to his layout by clicking the "Add this to my stuff" link in the portlet titlebar. Clicking the link brings up a dialog for the user to select which page/tab to add the portlet to. On submission of the add, the user is taken to the page to which the portlet was added. The portlet is added to the topmost position of the first column, and uses the same outline/glow feedback as with adding a portlet.

Select Skin

Registered skins are presented for selection by browsing. Currently selected skin is indicated. Normal conditions (5 or less skins) should allow all available skins to be in view without scrolling or filtering.


Select Layout

Layout options for the current page are presented for selection by browsing. Currently selected layout is indicated. Normal conditions should allow all available layout options to be in view without scrolling or filtering.


Interaction

Drawer

The gallery interface is initially hidden from view. A clickable button will slide open the gallery interface ("drawer"). When open, the same button will slide the drawer closed.

Considerations

  • Is a drawer the best interaction? How much space is required? Will it be too jarring?
  • Is the complexity of the customization interface too much for a drawer?
  • Does the user need a full preview of the portal when doing portal customization?
  • How will save be handled?
  • Can this interaction be accessible?

Design Patterns

View Navigation

The gallery interface will need to accommodate several unique customization views: tabs, page layout, page content, and skins. Some of these views may even require sub-interfaces (like search of available portlets). A method of separating and navigating between the views within the main gallery interface is needed. Tabs may be a good choice.

Considerations

  • View navigation will need to be obvious.
  • View navigation will require some space of an already small-ish space.
  • View navigation will add to the complexity of the interface.
  • How many unique views are needed?
  • Can the complexity of each view be represented in a small-ish space?

Design Patterns

Gallery Selection

For selecting portlets, skins, and page layout, available options should be displayed as a visual gallery. For portlets (and possibly skins and page layout) the number of available choices to select from will be greater than the display area. Pagination of some form will be required. Traditional next/previous pagination could work, but a carousel might be a better method. A portlet visual/thumbnail/icon will also aid with selection.

Considerations

  • Visual thumbnail size will need to be considered - big enough to be recognizable, but small enough to display many at once.
  • Pagination controls will take up space in the interface and add complexity.

Design Patterns

Filtering Selection

For selecting portlets, the number of available choices to select from will be greater than the display area. The user should be provided with a means to filter the choices to smaller sets based on user-input. A search form with live-filter or auto-complete and/or filtering by tag/category are good accelerators.

Considerations

  • Filtering controls will take up space in the interface and add complexity.

Design Patterns

Adding Portlets to Layout

Adding portlets from the gallery to the user's portal layout should be simple as pie. Drag and drop is recommended.

Considerations

  • Drag and drop ability must be obvious.
  • Drag to tab (other than current tab) ability might be required.
  • Page must be reloaded immediately after adding new content
  • Portlet description should be visible somewhere
  • How does the existing "use it now" feature fit into the new interface?

Design Patterns


Implementation

Portlet Icons (UP-2773)

BYU would like to include an icon for each portlet in the Gallery view. In order to implement this feature, uPortal's portlet data model must be updated to include a space to hold this new information. Portlet icons should likely initially be represented as a URL to an existing image. This implementation assumes that the same portlet icon will always be displayed for a portlet regardless of current skin.

  • Add a portlet icon URL property to the channel definition data model
  • Add the portlet icon to the channel list JSON/XML
  • Allow administrators to set the portlet icon in the Portlet Administration Portlet

Skin Selection Fluid Component (UP-2769)

The existing skin selection dialog should be refactored as a Fluid component. This new component will need to be responsible for the following tasks:

  • Locate and parse the current theme's skin list
  • Display a list of available skins, indicating the current choice
  • Allow users to select a new skin
  • Persist skin choice by making an AJAX call
  • Reload the portal page with the new skin

Portlet Selection Fluid Component (UP-2770)

The existing portlet selection dialog should be refactored as a Fluid component. The current implementation consists of a collection of display and interaction functions, plus a jQuery widget responsible for collecting and managing information about the available portlets. Our refactored implementation may include one or more subcomponents.

  • Locate and parse the current user's available portlet content list
  • Appropriately group content by portlet category
  • Provide search functionality within and across categories
  • Allow a user to choose new portlet content (and select a desired location)
  • Persist portlet selection (and desired location)
  • Reload the portal page with the new content

Documentation for the new reusable portlet browsing component is available at Portlet Browser Javascript Component.

Tab Selection Fluid Component

Tab selection in uPortal was recently updated to allow users to either choose a pre-formatted tab or create a new custom tab. This new functionality has not yet been reviewed by user experience experts.

Pre-formatted tab browsing and selection is already implemented as a Fluid component, and page layout selection was recently refactored using Fluid. As part of the Gallery work, we may need to do additional refactoring of the new components and create a super-component to manage the various parts of the tab selection interface.

Pre-formatted tab selection

  • Locate and parse the current user's available tab list
  • Indicate which tabs are disabled due to prior inclusion in the user layout
  • Allow a user to select a tab and add it to his/her layout
  • Persist tab selection
  • Reload the portal page at the new tab location

Custom tab creation

  • Allow users to create a custom tab with a chosen title and layout
  • Persist tab creation
  • Reload the portal page at the new tab location

Gallery Fluid Component

BYU's designs suggest a unified combination of tab, portlet, and skin selection, perhaps via a tabbed interface. Unicon will likely need to create a supercomponent capable of containing the tab, portlet, and skin selection subcomponents. This component should be flexible enough to allow for some variety of design selection. This component's technical implementation will be planned once Unicon is further along in the Gallery design process.