KS Rice 2.4 UI Differences & Resolution Recommendation

KS UX/UI, please list specific examples of the UI that’s changed as a result of the Rice 2.4 upgrade, indicating whether the change is an improvement or not an improvement. If necessary or applicable, provide screenshots and perhaps a rough estimation of the level of effort to resolve it (Low, Medium, High), if it should be corrected (Change) or if its acceptable (Accept). Provide any references, if available. There’s no need to create JIRAs for any of these at this time, but if there’s already one, provide the link.

May 8, 2014

Differences

Buttons

Bootstrap 3 introduced new button styles. However, these are lacking affordances (i.e. stylistically very flat) and there’s not enough contrast between the background and text colors.

Recommendation: Change
Effort: Low

Some exploration into a recommended style:
http://codepen.io/oliverng/pen/uwmHa

Alerts

Inconsistent padding and styling. Not all CSS classes are included where they’re expected. Do we use Bootstrap 3 alert styling or explore custom styles? Is the problem Rice or KS on this one? Contract should be examined, like in the Buttons recommendation. Padding should be examined, like in the Pixel Units recommendation.
Recommendation: ?

Effort: ?

Icon Fonts

Conflict with Rice’s default icon set. We will continue to use the custom icon set before the upgrade. Further collaboration with UXI is needed to see if there’s a set of icons or method of implementing icons that would be universally recommended for all of Kuali.
Recommendation: Change

Effort: ?

Labels I

By default, all labels are now positioned on top of form controls. We recommend against this default, and will retain alignment as it originally was. This will require restructuring beans to shift to the Bootstrap layout manager wherever there was a left aligned label.

Recommendation: Change

Effort: Medium

Labels II

In cases where labels are placed to the left of input fields, labels are now top aligned. They use to be centered aligned.

Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3hn411

Pixel Units

Bootstrap heavily utilizes pixels (e.g. for spacing, layout, etc.) where it would be much more appropriate for scalable units to be used (e.g. rem, em, %) as a way to support efforts toward responsive design and accessibility.

Recommendation: Change

Effort: Medium–High

Application Header

Prior to the upgrade, the color of the Term text use to be white. It has now changed to black which does not provide enough contrast with the background color.
Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3hlzsv

Calendar Search

The Search button on the calendar search screen has moved below the fields (was previously to the right of the fields).
Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3iir79

Dropdown Alignment

Dropdowns are no longer vertically centered/aligned with other fields.
Recommendation: Change

Effort: ?

Screenshot: http://prntscr.com/3iivsl

Primary Action/Cancel Button Alignment

On multiple screens throughout the application the Save and Cancel buttons in the sticky footer appear stacked vertically, rather than side-by-side.
Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3iirte

Edit Holiday Calendar

The whitespace that was previously above the ‘Holidays’ header is no longer there.
Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3iisi9

Copy Course Offering - Copy from Existing

Pagination controls now appear above the table and the whitespace that was previously above the Options header is no longer there.
Recommendation: Change

Effort: Low?

Screenshot: http://prntscr.com/3ij0oj

Edit CO

The registration options are not displaying correctly and there is no whitespace above the Course Offering Information header.
Recommendation: Change

Effort: Low?

Screenshot: http://prntscr.com/3ij28o

Edit AO

The Edit icon in the Manage Scheduling Requests table is not aligned properly with the other icons.
Recommendation: Change

Effort: Low?

Screenshot: http://prntscr.com/3ij39k

Action Bar

The action bar layout is broken. Button groups appear stacked vertically (instead of horizontally), and some of the button labels are not visible.
Recommendation: Change

Effort: ?

Screenshot: http://prntscr.com/3ij15c

Tabs

Tab styling is gone/broken.
Recommendation: Change

Effort: ?

Screenshot: http://prntscr.com/3iityq

Pagination

Left and right borders of the pagination controls are a darker color than the other borders in the pagination control.
Recommendation: Change

Effort: Low

Screenshot: http://prntscr.com/3iiz0c

Button Alignment

In several places throughout the application buttons now are not vertically centered/aligned with the associated fields.
Recommendation: Change

Effort: ?

Screenshot: http://prntscr.com/3iix34

Disclosures

Disclosure headers now have an inconsistent font size also causing the disclosure icon to have inconsistent sizes.

Recommendation: Change
Effort: Medium
Screenshots: http://prntscr.com/3iiwie http://prntscr.com/3iiwxp

Table Headers

There is a 2px bottom-border applied to table headers.

Recommendation: Change
Effort: Low
Screenshot: http://prntscr.com/3iizhg

Breadcrumbs

The last item should not be bolded.

Recommendation: Change
Effort: Low
Screenshot: http://prntscr.com/3ij5vh

Advanced Search Links

Advanced search links use to be flush left to the left edge of input fields.

Recommendation: Change
Effort: Low
Screenshot: http://prntscr.com/3ij7x8

Text Padding, Margins

Titles did not use to touch the header divider line. The left edge is not aligned with the items in the title page header

Recommendation: Change
Effort: High

http://prntscr.com/3ij9cp

Schedule of Classes - Search Input Field

The input field use to be aligned with other fields.

Recommendation: Change
Effort: Low

Screenshot: http://prntscr.com/3ijbuk

Schedule of Classes - Expand/Collapse

The expand/collapse column is now wider but resizes to the correct size when refreshing the page. The page is a blank screen when attempting to expand.

Recommendation: Change
Effort: High?

Screenshot: http://prntscr.com/3ijbuk

Rollover Management

The input field and button use to be aligned.

Recommendation: Change
Effort: Low?

Screenshot: http://prntscr.com/3ijm5e

Toolbar

There is a 1px line missing on the left side of the button.

Recommendation: Change
Effort: Low

Screenshot: http://prntscr.com/3ijnuo

KSAP: Course Search Faceted Navigation

● The facets box is narrowed by a few pixels, causing a header to line-wrap.

● Mouse-over shading for facets no longer span across the entire facet box.

● The facet headers are taller.

● The borders are inconsistent with the original design - thicker, and shows gaps in between.

Recommendation: Change
Effort: Low (Estimated 4 Hours)

Jira: https://jira.kuali.org/browse/KSAP-1253 (Closed)

KSAP: Planner Printable Page Formatting

● Table borders are missing.

● Table cells are too big.

● Placeholders are displayed for terms where no courses are planned

Recommendation: Change
Effort: Low (Estimated 4 Hours)

Jira: https://jira.kuali.org/browse/KSAP-1256

KSAP: “Add to Plan” Popover Checkbox Alignment

● Labels for checkboxes are above the checkbox rather than to the right.

● Labels for checkboxes are bold in instead of standard weight.

Recommendation: Change
Effort: Low (Estimated 2 Hours)

Jira: https://jira.kuali.org/browse/KSAP-1282 / https://jira.kuali.org/browse/KSAP-1301 (both closed)

KSAP – 1282ex1.png

259 KB 30/Apr/14 5:11 PM

KSAP 1282ex2.png

415 KB 30/Apr/14 5:11 PM

KSAP 1282ex3.png

30 KB 30/Apr/14 5:14 PM

KSAP-1301_Popover_Checkbox

42 KB 05/May/14 1:02 PM