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: ? Unable to identify source; likely Kuali Student 1 12 May 2014 Reproduced from a Windows Word file, larger images not available
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
ButtonsBootstrap 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: ChangeEffort: Low
Some exploration into a recommended style:http://codepen.io/oliverng/pen/uwmHa
AlertsInconsistent 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 FontsConflict 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: ChangeEffort: ?
Unable to identify source; likely Kuali Student 1 12 May 2014Reproduced from a Windows Word file, larger images not available
Labels IBy 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: ChangeEffort: Medium
Labels IIIn cases where labels are placed to the left of input fields, labels are now top aligned. They use to be centered aligned.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3hn411
Pixel UnitsBootstrap 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: ChangeEffort: Medium–High
Application HeaderPrior 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: ChangeEffort: LowScreenshot: http://prntscr.com/3hlzsv
Unable to identify source; likely Kuali Student 2 12 May 2014Reproduced from a Windows Word file, larger images not available
aford, 05/12/14,
I think these are really the same thing. The effort could really be high if we are changing the layout in all cases. If wejust use CSS, the effort is medium-low.
Calendar SearchThe Search button on the calendar search screen has moved below the fields (was previously to the right of the fields).
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3iir79
Dropdown AlignmentDropdowns are no longer vertically centered/aligned with other fields.
Recommendation: ChangeEffort: ?Screenshot: http://prntscr.com/3iivsl
Unable to identify source; likely Kuali Student 3 12 May 2014Reproduced from a Windows Word file, larger images not available
Primary Action/Cancel Button AlignmentOn multiple screens throughout the application the Save and Cancel buttons in the sticky footer appear stacked vertically, rather than side-by-side.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3iirte
Edit Holiday CalendarThe whitespace that was previously above the ‘Holidays’ header is no longer there.
Recommendation: ChangeEffort: Low
Unable to identify source; likely Kuali Student 4 12 May 2014Reproduced from a Windows Word file, larger images not available
Screenshot: http://prntscr.com/3iisi9
Copy Course Offering - Copy from ExistingPagination controls now appear above the table and the whitespace that was previously above the Options header is no longer there.
Recommendation: ChangeEffort: Low?Screenshot: http://prntscr.com/3ij0oj
Edit COThe registration options are not displaying correctly and there is no whitespace above the Course Offering Information header.
Unable to identify source; likely Kuali Student 5 12 May 2014Reproduced from a Windows Word file, larger images not available
Recommendation: ChangeEffort: Low?Screenshot: http://prntscr.com/3ij28o
Edit AOThe Edit icon in the Manage Scheduling Requests table is not aligned properly with the other icons.
Recommendation: ChangeEffort: Low?Screenshot: http://prntscr.com/3ij39k
Unable to identify source; likely Kuali Student 6 12 May 2014Reproduced from a Windows Word file, larger images not available
Action BarThe action bar layout is broken. Button groups appear stacked vertically (instead of horizontally), and some of the button labels are not visible.
Recommendation: ChangeEffort: ?Screenshot: http://prntscr.com/3ij15c
TabsTab styling is gone/broken.
Recommendation: ChangeEffort: ?Screenshot: http://prntscr.com/3iityq
Unable to identify source; likely Kuali Student 7 12 May 2014Reproduced from a Windows Word file, larger images not available
PaginationLeft and right borders of the pagination controls are a darker color than the other borders in the pagination control.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3iiz0c
Button Alignment
Unable to identify source; likely Kuali Student 8 12 May 2014Reproduced from a Windows Word file, larger images not available
In several places throughout the application buttons now are not vertically centered/aligned with the associated fields.
Recommendation: ChangeEffort: ?Screenshot: http://prntscr.com/3iix34
DisclosuresDisclosure headers now have an inconsistent font size also causing the disclosure icon to have inconsistent sizes.
Recommendation: ChangeEffort: MediumScreenshots: http://prntscr.com/3iiwie http://prntscr.com/3iiwxp
Unable to identify source; likely Kuali Student 9 12 May 2014Reproduced from a Windows Word file, larger images not available
Table HeadersThere is a 2px bottom-border applied to table headers.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3iizhg
BreadcrumbsThe last item should not be bolded.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3ij5vh
Unable to identify source; likely Kuali Student 10 12 May 2014Reproduced from a Windows Word file, larger images not available
Advanced Search LinksAdvanced search links use to be flush left to the left edge of input fields.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3ij7x8
Text Padding, MarginsTitles did not use to touch the header divider line. The left edge is not aligned with the items in the title page header
Recommendation: ChangeEffort: Highhttp://prntscr.com/3ij9cp
Unable to identify source; likely Kuali Student 11 12 May 2014Reproduced from a Windows Word file, larger images not available
Schedule of Classes - Search Input FieldThe input field use to be aligned with other fields.
Recommendation: ChangeEffort: LowScreenshot: http://prntscr.com/3ijbuk
Unable to identify source; likely Kuali Student 12 12 May 2014Reproduced from a Windows Word file, larger images not available
Schedule of Classes - Expand/CollapseThe 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: ChangeEffort: High?Screenshot: http://prntscr.com/3ijbuk
Rollover Management The input field and button use to be aligned.
Recommendation: ChangeEffort: Low?Screenshot: http://prntscr.com/3ijm5e
Unable to identify source; likely Kuali Student 13 12 May 2014Reproduced from a Windows Word file, larger images not available
Toolbar There is a 1px line missing on the left side of the button.
Recommendation: ChangeEffort: LowScreenshot: 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.
Unable to identify source; likely Kuali Student 14 12 May 2014Reproduced from a Windows Word file, larger images not available
Recommendation: ChangeEffort: 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: ChangeEffort: 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.
Unable to identify source; likely Kuali Student 15 12 May 2014Reproduced from a Windows Word file, larger images not available
Recommendation: ChangeEffort: Low (Estimated 2 Hours)Jira: https://jira.kuali.org/browse/KSAP-1282 / https://jira.kuali.org/browse/KSAP-1301 (both closed)
KSAP – 1282ex1.png259 KB 30/Apr/14 5:11 PM
KSAP 1282ex2.png415 KB 30/Apr/14 5:11 PM
Unable to identify source; likely Kuali Student 16 12 May 2014Reproduced from a Windows Word file, larger images not available
KSAP 1282ex3.png30 KB 30/Apr/14 5:14 PM
KSAP-1301_Popover_Checkbox42 KB 05/May/14 1:02 PM
KSAP-1301 – Checkbox Alignment109 KB Today 12:58 PM
Unable to identify source; likely Kuali Student 17 12 May 2014Reproduced from a Windows Word file, larger images not available
KSAP-1301 – Checkbox Alignment41 KB Today 12:58 PM
KSAP-1301 – Checkbox Alignment117 KB Today 12:58 PM
Unable to identify source; likely Kuali Student 18 12 May 2014Reproduced from a Windows Word file, larger images not available
KSAP-1301 – Checkbox Alignment127 KB Today 12:58 PM
KSAP-1301 – Checkbox Alignment127 KB 06/May/14 7:02 AM
KSAP: Planner - Add Link and Credits are not Bottom Aligned For the Planned Items
The Planned Items section of the planner is a fixed height and the items list should start right after the header and fill in top to bottom. The Add to Plan Link and the credits for the section should be at the bottom of the section with white space between them and the plan items if the list of 8 is not full. It looks like these use to be in different sections but the krad upgrade puts them in the same.
Recommendation: ChangeEffort: Low (Estimated 2 Hours)Jira: https://jira.kuali.org/browse/KSAP-1302 (closed)
Unable to identify source; likely Kuali Student 19 12 May 2014Reproduced from a Windows Word file, larger images not available
KSAP: Expand/Collapse Images Broken
The image that is displaying for the toggle is not the correct image. The image that we were using on env2 was located in the following directory on env2:
Recommendation: ChangeEffort: Low (Estimated 2 Hours)Jira: https://jira.kuali.org/browse/KSAP-1302 (closed)
References
Rice JIRAs fixed in 2.3.2 - 2.4 which affect Accessibility, CSS, UI, UX.https://jira.kuali.org/issues/?filter=19981
first_dialog.PNG24KB 11/Nov/13 5:00 AM
second_dialog.PNG21KB 11/Nov/13 5:00 AM
Unable to identify source; likely Kuali Student 20 12 May 2014Reproduced from a Windows Word file, larger images not available
Related Documents
