Using Ajax to Improve uPortal User Experience Jen Bourey Yale University

Outline  Short demo  Technical overview  Code changes  Customizing for your portal  Implications for our portal  User testing  Dojo channels  The future!  Short demo  Technical overview  Code changes  Customizing for your portal  Implications for our portal  User testing  Dojo channels  The future!

Old User Preferences

Goals  More intuitive interface  Simplify preference options  Use current conventions from other portals  Easier and faster to...  Find and add new content  Rearrange layout elements  More intuitive interface  Simplify preference options  Use current conventions from other portals  Easier and faster to...  Find and add new content  Rearrange layout elements

UI Overview

Current Status  Most features copied from preferences channel.  Brower compatibility: IE6, IE7, Firefox, Safari.  Fails back if scripting is disabled.  Most features copied from preferences channel.  Brower compatibility: IE6, IE7, Firefox, Safari.  Fails back if scripting is disabled.

Channel Editing  Move  Delete  Min/max  Move  Delete  Min/max

Channel Editing

Adding Channels  Browse channels by category  Search channels  Use channel without adding to layout  Browse channels by category  Search channels  Use channel without adding to layout

Browsing Channels

Searching Channels

Adding a Channel from Focus Mode

Editing Tabs

Page Layout

Technical Details

Java Resources  Servlets  RetrieveChannelListServlet  UpdatePreferencesServlet  Theme Param Injectors  AjaxThemeParamInjector  Servlets  RetrieveChannelListServlet  UpdatePreferencesServlet  Theme Param Injectors  AjaxThemeParamInjector

Javascript Resources  Dojo!  Portal dojo classes  PortletDragObject.js  PortletDragSource.js  PortletDropTarget.js  ajax-preferences.js  Dojo!  Portal dojo classes  PortletDragObject.js  PortletDragSource.js  PortletDropTarget.js  ajax-preferences.js

Dojo  IO libraries  Provide data (ex. Channel registry)  Handle asynchronous requests  Return relevant information  Widgets  Popup-style menus  tabs  IO libraries  Provide data (ex. Channel registry)  Handle asynchronous requests  Return relevant information  Widgets  Popup-style menus  tabs

Theme Changes  Lots and lots of element IDs  Onclick() events  Hidden preference menu widgets  Generate drag objects based on layout information  Lots and lots of element IDs  Onclick() events  Hidden preference menu widgets  Generate drag objects based on layout information

Interaction Overview User action JavaScript UpdatePreferencesServletUpdate UI Stored layout

Example: adding tabs User clicks JavaScript Insert new tab in layoutInsert new tab in UI Store preferences

Add tab: Java code  Create new tab node  Save layout and get new tab’s nodeId  Create new column and add it to the tab  Save layout  Return new tab nodeId  Create new tab node  Save layout and get new tab’s nodeId  Create new column and add it to the tab  Save layout  Return new tab nodeId

Add tab: JavaScript code  AJAX request to preferences servlet  Create new tab and append it to the tab list  Assign tab the appropriate id  AJAX request to preferences servlet  Create new tab and append it to the tab list  Assign tab the appropriate id

Example: adding channels User clicks JavaScript Get channel registry XML Display channel adding menu User chooses a channel Preferences servlet Reload page

Skin Resources  {$skin}_preferences.css  Override dojo defaults  Extra icons (left and right arrows)  {$skin}_preferences.css  Override dojo defaults  Extra icons (left and right arrows)

Customizing  Other skins  Create and link new ${skin}_ajax.js  Other themes  Add element IDs  Create javascript  Other layout managers?  Other skins  Create and link new ${skin}_ajax.js  Other themes  Add element IDs  Create javascript  Other layout managers?

Back to the Portal

Refining our UI  Terminology choices  Positioning of menu items  Too many features?  Ex. Moving columns  Suddenly a lot of channels look clunky  Links channel  Search  Multi-RSS feed with pull-down menu  Terminology choices  Positioning of menu items  Too many features?  Ex. Moving columns  Suddenly a lot of channels look clunky  Links channel  Search  Multi-RSS feed with pull-down menu

Using Dojo in Channels  io library  Get data from XML, JSON, etc.  Interactive, asynchronous requests  Widgets  Tabs in channels  tooltips  io library  Get data from XML, JSON, etc.  Interactive, asynchronous requests  Widgets  Tabs in channels  tooltips

Google Maps CWebProxy + AJAX + XML

Google Search

Dining Menu

Yale Events Calendar CWebProxy + AJAX + custom xCal

CSyndFeed Dojo tooltip widget

Weather Portlet Custom RSS feed -> local JSON

Sports Scores ScriptSrcTransport + JSON

Missing Pieces  Resetting a layout  Setting the active tab  Moving columns  Moving channels to a new tab  DLM restrictions  Resetting a layout  Setting the active tab  Moving columns  Moving channels to a new tab  DLM restrictions

Future Development  Improved tab editing UI  Drag channels to another tab  Reset layout and/or fragment  Increased user feedback  Accessibility  Improved tab editing UI  Drag channels to another tab  Reset layout and/or fragment  Increased user feedback  Accessibility

Resources  JA-SIG wiki  driven+Drag+and+Drop  JA-SIG subversion repository   Yale portal   Contact info   JA-SIG wiki  driven+Drag+and+Drop  JA-SIG subversion repository   Yale portal   Contact info 