The Impact of Project NG on User Interface Design

The Impact of Project NG on User Interface Design
by Jim Riecken, Senior Software Engineer
Stephanie Cupp, Product Director User Experience

Why are they doing NG?
Want an easier, engaging experience. Want to merge best of WebCT and Bb. Trying to make experiences more similar. Want to reduce training costs – not make it too difficult, meaning adoption can be increased.

Trying to reduce page loads and clicks – using data to monitor these are actually decreasing. Generally about 1 click or page load less to do for common tasks in Project NG on average. 22% improvement for clicks, 38% for page loads

Hope new stuff will be easier for developers with better tag libraries, more accessible, easy to move existing building blocks to it. Will have a new tag library to use, meaning compatibility will be ok with legacy building blocks but gives them a fresh slate to work with too. Will have tags for managing new UI elements that are introduced.

Existing Building Blocks
-will they work? Yes, with minimal to no changes – won't have to update all JSPs
-will it look out of place? Should not look too out of place, may require some minor UI changes.
-why use the new tag library? - Legacy ones will look similar but there won't be any new functionality, so you will miss out. New tags are simpler to use. Security for the future by using new tags.

Next are the different page elements we can use in building blocks
Page 'Shell' Tags
Generates all the starting and ending html and portal role theme CSS to make them all work better, manage the resources like scripts, headers, CSS. Also generates breadcrumb, title automatically if you want. 3 types – for admin pages, pages in course/orgs, and pages that are jsp included to other pages

Action Bar
Dropdown menu bar available for things like adding content to content areas, rather than existing buttons only. Can specify what are most important and what are secondary buttons/menus.

Data Collection Page
Step 1, step 2 type thing. Looks similar to as it is now but a bit more attractive. Cancel and Submit at top and bottom of pages – added automatically by tag library. Colour picker doesn't pop up a separate window

Inventory List
For displaying sortable, paged data in a table. Can have an action bar across the top, where items can be specified (like tick the boxes and then delete all those selected) (note can also appear at bottom, for long lists). Can also have individual actions clickable on the item title, like the caret next to Grade Centre grades to get to attempt details. This can be done for all the large selection lists (called a Contextual Menu)

Contextual Menus
Needs less clicks to do actions. Can have dynamic contextual menus pulled from Ajax or explicitly defined. The dynamic menus would be based on conditions unknown to the JSP.

Content List
A way of displaying content items that are in a specific order – can be dragged and dropped now, instead of needing to click the numbers. They have context menus for modify, manage, delete (so no buttons on the right, but a caret thing next to the item title). Made the drag and drop accessible by adding a keyboard accessible way to do drag and drop and can move it up and down

Drag and Drop
Can drag and drop in the inventory list too. Will have built in support in the tag libraries

Accessibility
Major focus on accessibility – wanting everyone to be able to use the new features
Have been working with user groups to get them to test out what accessibility problems are before implementing it fully. Everything will be standards-based HTML and CSS, not tables and hard-coded colours, styles. Also, using labels, other accessible features in HTML. Can navigate with arrows, open contextual menus with enter, close with Esc

Best for users to design with accessibility in mind, and try to use the NG tag library. Don't use tables for layout purposes, as HTML and CSS is better. Use header tags to define hierarchies for screen readers. Be sure alternatives are provided for mouse or sight-required tasks.

Performance
Because of all the dynamic behavior, the browsers need to perform well.. 80% of page load time comes after everything has come back from the server. NG Tag library contains some help to maintain good client side performance, but developers have some responsibility too.
-make less http requests
-avoid using duplicate CSS and Javascript files, Bb tag library can help with this by checking if the Javascript and CSS already exist
-externalize all your Javascript and CSS files, don't put them inline in your building block as can't be cached
-write efficient Javascript code, test it on different browsers, don't run all scripts on load if not necessary

Prototype and Scriptaculous is loaded by their tag libraries – best to use those tools to get dynamic scripting in any building blocks we write.


This session did give me a perspective on the way some of the new stuff will look, which isn't so different from the way it is now, just easier to use. I'm curious about some of the new features too, rather than just the new UI for the old features. All in all another good session, though I imagine Mary and Colin will benefit from some of the details more than most folks.