UI design exploration

[chrxr]

Q2FY21 total time: 13.5 hrs

• [x] December 21 sprint review
• [x] November 20 sprint review
• [x] November 6 sprint review
• [x] Review meeting with Kathy and Patrick on week of October 4.

Q1FY21 total time: 73 hrs

• [x] September 28 sprint review
• [x] September 10 sprint review
• [x] August 31 sprint review
• [x] August 18 sprint review
• [x] July 20 sprint review
• [x] July 6 sprint review

gh-pages prototype following Mark-One styles *

• [x] All tabs

  • [x] Accessibility of table headers as they relate to the columns
  • [x] Accessibility of forms in table headers, with long description and not detected by screen readers as table headers
  • [x] Selection of term drop down above tables
  • [x] Replaced "Settings" with "Options"

• [x] Courses tab and modals (recommendations)

• [x] Non class meetings and modals (recommendations)

  • [x] Populate table with extra rooms per course and the Spring term column

• [x] Faculty tab and modals

• [ ] Schedule tab

• [x] 4 year plan tab

• [x] Manage courses tab

• [x] Manage faculty tab

• [x] Style of "Settings" and "Create new..." elements as distinct from the tabs interface

*: For the most part, I strictly used the Mark One styles merged on master. Occasionally, Bootstrap code was used for unavailable functionality (i.e.: modal) and relevant user interface elements (i.e.: bordered div, stripe-less table, etc.)

[chrxr]

[Vittorio2015]

Courses tab, Edit (pencil), Notes and Details modals. Details modal with two column display of terms and navigation buttons, consistent with the interfaces of the Courses table: https://seas-computing.github.io/course-planner_ux/courses.html

[Vittorio2015]

Faculty tab with Sabbatical/Leave and Detail modals: https://seas-computing.github.io/course-planner_ux/faculty.html

[Vittorio2015]

Added "Non class meetings" tab per wireframe on kanban #15 :

https://seas-computing.github.io/course-planner_ux/courses-ncm.html

[Vittorio2015]

"4 year plan" tab

Notice the header when the table is larger than the web page.

https://seas-computing.github.io/course-planner_ux/fourYearPlan.html

[Vittorio2015]

"Manage courses" tab

I need to get back to fix the functionality to add "Same as" in the "Create new course" and "Edit course" modals.

Recommendations:

• Left align secondary button in modals (e.g.: Cancel)
• padding-left: .5em; on input and placeholder
• padding: 0 .5em 0 .5em; on table headers, especially when the td content is minimum (e.g.: only an icon)

https://seas-computing.github.io/course-planner_ux/manage_courses.html

[Vittorio2015]

Vittorio changed Spring 2016\Fall 2016 to Fall 2016|Spring 2017 (so it shows as "<- Fall 2016 | Spring 2017 ->") https://github.com/seas-computing/course-planner/issues/169#issuecomment-600816580

On Manage Courses, he removed "CCN" from modals and interface - https://github.com/seas-computing/course-planner/issues/169#issuecomment-604707983

[Vittorio2015]

Manage courses tab

I need to get back to fix the functionality to add "Join with" in the "Edit faculty" modal.

https://seas-computing.github.io/course-planner_ux/manage_faculty.html

[chrxr]

@Vittorio2015 to review styling of "settings" or "Create new..." buttons for consistency and standing out against the tabs.

[Vittorio2015]

Styled "Settings" link to stand out against the tab interface

• Primary colors and text-decoration: underline on hover (consistent with the Mark-One guidelines)
• Same link color to the sliding menu border-color
• Visual distance from tab interface
• position:absolute tab interface so that it doesn't slide when the panels is opened.

https://seas-computing.github.io/course-planner_ux/courses.html

[Vittorio2015]

Styled "Create new course" button to stand out against the tab interface

• Class.icrnXS now with padding: 0xp; to allow all tabs to be visible within (no-scrolling) view
• nav width to match the width of the table
• Visual distance of "Create new course" button from tab interface
• Tab interface position matches the tab "Courses" position

https://seas-computing.github.io/course-planner_ux/manage_courses.html

[Vittorio2015]

Non class meetings and modals - notes

Table

• min-width of columns with no data
• Forced width of Title header to allow horizontal space to Room columns

Modal

• Classes for (table) pagination, columns and rows (CSS grid?)
• Style for h2 modal heading
• Style for bordered div
• white-space: nowrap; for certain values
• The color of the text link and the secondary button don't have sufficient contrast with the background-color of the table header

[Vittorio2015]

Courses tab and modals

Table

• Insufficient color contrast between the colors of the icons and the color of the highlighted table row
• Insufficient color contrast between the colors of the icons and the color of the non- highlighted table row
• Right and center align icons
• Vertical spacing between content in the sae table cell (see AC 2090b)
• Invisible colspan columns (terms navigation interface)
• Uniform look and feel between dropdown with input forms
• Top align table headers without forms in the same table cell

  Modal

• Style for h2 modal heading
• Non-striped table with bordered rows
• Button left and right alignment
• Columns and rows for content layout

[Vittorio2015]

Courses Admin

"Create nw course"button

• Insufficient horizontal space. Either this button wraps or it would move the tab nav to the right.
• the padding between tabs should be reduced to avoid wrapping

Modals

• Allow for vertical padding to increase the space between rows of information

[Vittorio2015]

Non class meeting tab update

• Table
  • Removed "Offered" column
  • Replaced course title with meeting types
  • Right aligned info buttons
• Modal
  • Removed "Enrolled" rows
  • Added conference room

View prototype

[Vittorio2015]

Global interface update

Visually disassociate "Setting" and "Create *" buttons from tabs interface

• Settings is now below the tab, since it shares the same context. The same can be done with "Create *" buttons in other tabs
• The Tabs interface can now gain horizontal space on the left (beneficial to smaller displays)

  Substitute the left and right arrow buttons next to each term

• The col and colgroup structure of multiple headers hasn't changed but it is now invisible (although accessible by screen readers, including each table cell correspondence with column and row headers)
• The Term dropdown works both as a selection and as an indication of the current data

Non class meetings prototype

[jonseitz]

@Vittorio2015 I like the new style, with the Settings button and Semester drop down below the nav bar. I think it's clearer and easier to take in at a glance. Just a couple small things:

• Personally, I think we should keep the Fall 2019 and Spring 2020 headers in the top row of the table, since that's a much clearer indication of which columns are associated with which semester (thinking especially of the main courses table, when there are multiple column under each)
• I would prefer the dropdown to be flush right, rather than centered. Also, would it be sufficiently accessible to remove the "show" button and just have it change the display when the dropdown changes? It's not a big deal, but I think that's slightly more intuitive.

[chrxr]

I agree with keeping the Fall and Spring table headers as well as the dropdown.

I don't think I agree with having the dropdown flush right. I think it's a key navigational tool, and having it centered makes it more noticable. I think it would be easier to miss flush right.

Also agree that it would be ideal if we could go without the show button on the dropdown. There is a chance that you could select a semester, and think you'd pressed the button when you actually hadn't.

[natalynyu]

@Vittorio2015 This looks great! I agree with the header suggestions. Is the 'show` button necessary for accessibility purposes?

• Also I had a question - what does it mean when you click on the pencil icon for a meeting and the selected meeting time is greyed out? Does this mean that the user can't delete this meeting time, or is this a possibility when you click the grey "Edit" button? Is there a reason why the text is grey in the edit screen?

• Perhaps the "Show Rooms" button on this edit screen could follow our blue mark-one info theme, since green indicates submission/confirmation. Show Rooms seems more like the user getting more information. What do you think?

[Vittorio2015]

Thanks for your feedback! Here are my comments:

• To facilitate accessibility, the "Show" button would be more useful for screen readers. I will look further and hopefully find an accessibility function, like role that would let screen readers know what happens upon each selection.
• Apologies for removing the term headers altogether. Shall I assume that editing table headers will be easier than editing "Rooms for Fall 2019" and "Rooms for Spring 2020?

[Vittorio2015]

@natalynyu , here are my answers for you:

• Firstly, we haven't spend sufficient time to finalize the design of these modals, so your questions are useful because they bring up ambiguities that we need to resolve
• In the following image the already selected time and room can be changed only by the use of the "Edit" button, just to ensure that only one row is active at the time. When a row is active, the drop downs allow only for a selection of time blocks. The "Show" rooms show in the adjacent table the rooms availability for that chosen time block.
• You bring up a good point about the absence of deleting already made selections.
• Your recommendation to label the "Show Rooms" button with the blue mark-one info theme is also very good for the reasons that you mentioned.

[natalynyu]

Thanks for your feedback! Here are my comments:

• To facilitate accessibility, the "Show" button would be more useful for screen readers. I will look further and hopefully find an accessibility function, like role that would let screen readers know what happens upon each selection.
• Apologies for removing the term headers altogether. Shall I assume that editing table headers will be easier than editing "Rooms for Fall 2019" and "Rooms for Spring 2020?

Personally, I think that it would be nice and clear to have the double headers here that say Fall 2019 and Spring 2020, etc. above the 'Room' columns in the same way that we have the year double headers for the Courses and Faculty tables.

[Vittorio2015]

Course tab

• "Returned" term table headers
• Displayed all columns
• Drop downs and input forms in a separate row and accessible, with screen reader description of dynamic functionality, per kanban #224
• Changed "Settings" to "Options"
• Top aligned table content and icons
• Removed submit button from term selection drop down

View gh-pages prototype

[Vittorio2015]

June 6 Course Planner Sprint Review

• Accessibility of table headers as they relate to table cells
• Accessibility of forms in table headers, with long description and not detected by screen readers as table headers
• Selection of term drop down above tables
• Replaced "Settings" with "Options"

View gh-pages prototype

[chrxr]

June 20 Course Planner Review

• All sliders
  • [x] Change "Submit" button below "Customized view" in Course Table to say "Edit views" instead.
  • [x] "Edit views" interface :point_right: Does the view of the table for Non-class meetings needs to be customized?
• All modals
  • Stack all fields
  • [x] Faculty Admin
  • [x] Courses Admin
  • [x] Non-class meeting "Details"
  • [x] Change all modal buttons to "Cancel" and "Save"
• [x] Non-class meeting tab
  • [x] New non-class meetings are scheduled via a new "New meeting" button above the table
  • [x] Already created non-class meetings are edited via the pencil icon in the populated table cells
  • [x] Non-class meetings that are not related to courses have their own title in the Title column
  • [x] The placeholder text of the input form under the Title header shall show "Filter by title"
  • [x] Modal for editing existing meeting, added "Remove" next to "Edit"
  • [x] Modal for scheduling a new meeting, with a choice of an existing course or not :point_right: Let's review the interface for new meeting type (course or non-course meeting) and "Cancel" button just for this interface
  • [x] Modal for "Details", add term dropdown in place of arrow as on the main table
• [x] Courses Admin tab modal, radio buttons for either "selecting an existing area" and "creating a new area" (#229 )
• [x] Courses tab, add checkbox next to "Show Retired Courses"
• [x] Faculty tab, add checkbox next to 'Show "No Longer Active" Faculty'
• [ ] Mark One modals

View ghpages prototype

[Vittorio2015]

July 6 Course Planner Review

Modals

• [x] Recommendations for required fields of modals (aria labels, asterisk, legend, red border on forms, etc.) for #214
  • Resource: ARIA2: Identifying a required field with the aria-required property
  • [ ] Accessibility question: Contrast ratio of the alert message (color: rgb(255, 64, 64);) is not sufficient. A darker color (color: rgb(230, 0, 0);) would have sufficient contrast.
• [x] Edit views (in left slider of Courses tab) modal, same interface as current product, which also allows to edit existing names
  • [x] Interface question: Does Non-class meeting need the left slider?
• Create new non-class meeting modal
  • [x] Just create a master record of a meeting (basically, a new table row), equivalent to creating a new course, add an Area (not required), a Course (not required) and a Title (required)
  • [ ] Usability question: Cancel button with "Are you sure you want to leave?" message, instead of Close button
• Edit non-class meeting modal
  • [x] Match create a new course, but populated with existing course info
  • [ ] Usability question: Let's review an example of the modal for creating new non-class meetings by selecting the edit icon in AC 050b, Spring 2020
  • [ ] Usability question: How could scheduled rooms be edited with the above example?

Non-class meeting table

• [x] Place back in empty cells (i.e.: AC 209c) Edit icons to create additional meeting for that term

[Vittorio2015]

July 20 Course Planner Planning

Accessible modal

• [x] Accessible React modal (createRef and forwardRef?)
  • react-modal documentation
  • How to create an accessible React modal

Accessible styled checkboxes and radio buttons

• [x] gh-pages examples

Feedback from Kathy and Patrick ("essential" items on Google Doc)

gh-pages prototype

Four Year Plan

• [x] Should filter by Course Catalog Prefix rather than Area.
• [x] Area not necessary for this table.

Faculty admin tab modals

• [x] Add comments field to enable Kathy to add notes for individual faculty like, "Likes room x, hates room y" etc.

Courses tab modals, room booking

• [x] Show above faculty notes
• [x] FAS rooms (in addition to Allston and Cambridge)
• [x] Set room booking times from dropdown also edit selected time block
• [x] "Staff meeting" non-class meeting

Feedback from Kathy and Patrick (non-essential items on Google Doc)

gh-pages prototype

Non-class meetings

• [ ] Remove the "Course" column. These non-class meetings will not be associated with a course.
• [x] Customized Views are not required for this interface as the amount of columns is small.

Non-class meetings Time/Room modal

• [ ] "Area" should be a required field for creating a new Non-class meeting. If a meeting is not associated with an area, then the user will select "General" from the list.
• [ ] Add a contact name and details. This will require "Name", "Email", and "Telephone". These three fields will all be displayed in one cell in the frontend. The fields will be on the top-level Non-class meetings, not on individual instances of the meetings.
• [ ] Add notes field to the top-level non-class meetings modal (not individual instances). This is in order for the administrators to add room preferences, requirements, etc.
• [ ] Add the "Expected size" field to top-level non-class meetings model (not individual instances). This is the equivalent of "Enrollment" fo the courses and will help Kathy assign rooms.
• [ ] The contents of the "Notes" field for a non-class meeting should be displayed in the Time/Room modal so that the user can reference these notes when selecting a room.
• [ ] As with the courses, the table needs to display both "Course" for courses and "Title" for Non-class meetings in the "Class" column in the room booking table.

[Vittorio2015]

August 4 Course Planner Sprint planning

• [x] MVP default, black color checkbox prototype for Kanban card https://github.com/seas-computing/course-planner/projects/1#card-42199443
  • [x] Vertical centering of the checkbox with label
• [x] Instance of HTML fieldset and checkboxes, and the error message (Edit views, Create new course)

[Vittorio2015]

August 18 Course Planner Sprint review

Review feedback from Kathy and Patrick for MVP

Review features listed on Google Doc

gh-pages prototype

Courses tab

(Questions and comments in bold)

• [x] Courses table - "Time/Room modal: For each faculty member chosen for a course, include the contents of the "comments" field for that faculty in the modal. This will help them to pick appropriate rooms. For example, a faculty member may have a comment like "likes room x, hates room y" etc. Note that this is not required for the Non-class meetings as they do not have an associated faculty member."
• [x] Courses table - Time/Room modal: For FAS rooms, rather than displaying "Available" in the "Class" column, we should say something like "FAS Room" or "Check FAS availability". If Kathy then selects that room for a class or meeting, then that class should appear in the "Class" column. Rooms will require an IsSEAS flag in the data model.
• [x] Courses table - Time/Room modal: Time selection should allow for selecting from pre-set time blocks in a dropdown. Once selected, these time blocks should populate editable hour/minute fields for beginning and end times in order to allow the user to modify either/both the start and end times. This is in order to facilitate non-FAS courses in the schedule, e.g. courses run with the Business School.
• [x] Courses table - Time/Room modal: If a room is currently scheduled for a Non-class meeting, rather than a course, the "Class" field should display the "title" field for the non-class meeting, rather than "Class" or "Course" which will not exist on the Non-Class meeting model. (See Cambridge Harvard Hall 204 75 Staff meeting)

Non Class Meetings tab

(Questions and comments in bold)

• [x] Non-class meetings - Require the ability to add a contact name and details in. This will require "Name", "Email", and "Telephone". These three fields will all be displayed in one cell in the frontend. The fields will be on the top-level Non-class meetings, not on individual instances of the meetings. DB change: contact_name, contact_email, contact_telephone.
• [x] Non-class meetings - Customized Views are not required for this interface as the number of columns is small.
• [x] Non-class meetings - "Area" should be a required field for creating a new Non-class meeting. If a meeting is not associated with an area, then the user will select "General" from the list. Add in Area column to table, make non-nullable.
• [x] Non-class meetings - Add notes field to the top-level non-class meetings modal (not individual instances). This is in order for the administrators to add in-room preferences, requirements, etc. DB change: add comments field to non-class parents.
• [x] Non-class meetings - Add "Expected size" field to top-level non-class meetings model (not individual instances). This is the equivalent of "Enrollment" for courses and will help Kathy assign rooms. Text string (not only numbers, like TBD, etc.)
• [x] Non-class meetings - Time/Room modal: The contents of the "Notes" field for a non-class meeting should be displayed in the Time/Room modal so that the user can reference these notes when selecting a room. Same as faculty notes. (The instructor really wants a projector.)
• [x] Non-class meetings - Time/Room modal: As with the courses table need to display both "Course" for courses and "Title" for Non-class meetings in the "Class" column in the room booking table. Show either course number or non-class meeting denomination.

[chrxr]

Check with Kathy whether Contact information and expected size would be required fields on the Non-class meetings model.

[Vittorio2015]

August 31 Course Planner Sprint review

gh-pages prototype

Courses tab

(Questions and comments in bold)

Modal for editing an existing meeting

• [x] Add a new column with an "Add" button on the right-hand side of the "Class"
  • [x] UI question 1 - Shall all these "Add" buttons be active? Shall buttons next to unavailable rooms be inactive?
  • [x] Change "Class" column header to "Availablity"
  • [x] Change "Available" to "Yes" and "AC 209a" to "No (AC 209a)"
  • [x] Add boolean filter to the "Availability" header (available or not)
  • [x] Sort this table by room, no sorting headers.
  • [x] No pagination, just scrolling div.
  • [x] Layout - Swap position of notes with "Meeting times..." Move table up to gain vertical space.
  • [x] Change "General" to Non-class meeting name.
  • [x] Split the editable time fields and add a time picker dropdown (like Google calendar).
  • [x] UI question 2 - Shall the time in the drop-downs reflect the set time periods (see the drop-downs for the first meeting) or arbitrary time periods (see the drop-downs for the second meeting?

Courses table

• [x] Add to table three new columns: contact info in three lines within the same table cell, notes (from icon), expected size
  • [x] UI question 3 - Are these three new columns added to each semester?
  • [x] UI question 4 - Is there info and icon of Notes for each term?
  • [x] UI question 5 - Is the "Detail" modal necessary?

Non-class meetings tab

(Questions and comments in bold)

Non-class meetings table

• [x] Add to table three new columns: contact info in three lines within the same table cell, notes (from icon), expected size
  • [x] UI question 6 - Are these three new columns added to each semester?
  • [x] UI question 7 - Is the "Detail" modal necessary?
• [x] Icon in Room column opens a populated modal used for creating a new non-class meeting Friday, August 21, 2020, 11am - 12pm: OHO's Kelly O'Foran presents "Information Architecture Foundations: Defining User Types and Goals"
• [x] UI discussion - Edit each table row, aside from room meeting ("AC 209a" row) or edit each table cell ("General" row).

[Vittorio2015]

September 10 Course Planner Sprint review

gh-pages prototype

(Questions and comments in bold)

Courses tab

Modal for editing an existing meeting

• [x] Only allow one row at the time to be edited; the Edit button works like a toggle button.

• The edited row shows

  • [x] A text string with room and time information (e. e.g, Room: Geological ### at ...)
  • [x] Trash button on the left end of this string, Edit button (pencil) to the right side of the string

• After "Add new time" button is selected, a new row appears

  • [x] Trash button on the left end side
  • [x] Same weekday dropdown
  • [x] The first time dropdown show specific start-end time blocks and the current editable field with the selection
  • [x] The second element is an editable text form populated with the selected end time
  • [x] Existing "Show rooms" button on the right side
  • [x] Additional unedited or partially populated rows have a trash icon on the left (as above) and a disabled "Show rooms" button and an "Edit" button on the right. This button works as a toggle with the other rows. Once this "Edit" button is selected, the "Show rooms" button becomes active.
  • [x] UI Question 1 - Every time the "Add new time" button is selected, shall a time be set by default?

• Show instances of alert messages for

  • [x] Successfully scheduled meeting instance
  • [x] UI Question 2 - What happens once this message appears? Does it remain on the interface until the modal is submitted?
  • [x] Unsuccessful scheduled meeting instance because of a conflict (in case the time of a scheduled instance was changed to an unavailable time)

• [x] Scrollable div for this interface as well (like the table on the right)

• Table with time results

  • [x] "Check FAS availability" without "No"
  • [x] The filter below the "Availability" table header should also show "To be checked" to address the above instance

Courses tab table

• [x] Remove the three extra columns within each term; they only show in the Non-class meeting table.

Non-class meeting tab

Modal for editing existing room meetings

• [x] Same changes as Courses modal

Non-class meeting table

• [x] One set of three new columns outside each term, since it refers to both
• [x] Pencil edit button on the last additional column triggers a copy of the "New meeting" modal that is populated.

Faculty tab

Sabbatical leave modal

• [x] Add option "None" to dropdown. No "Remove" button. Once saved, this selection shows nothing on the table.
• [x] UI Question 3 - Shall the option "None" be added also to the dropdown in the Faculty table?

[Vittorio2015]

September 28 Course Planner Sprint review

gh-pages prototype

(Questions and comments in bold)

Courses tab modal

Modal for editing an existing meeting

Meeting times scrolling div

The interface of the row in edit mode

• [x] Change the "Save" button to "Close". Visually highlight changed row.
• [x] Move room name below time interface, after the label "Room: ", followed (on the same row) by the "Show room" button
• [x] Both weekday and time dropdowns are set to null by default. Neglecting to make a selection or other values, triggers an error message and this information is not retained.
• [x] Add "to" between time forms
• [x] AM/PM time mode in dropdowns

The interface of rows with retained information

• [x] Remove the last row (time must always be selected to retain this information)
• [x] "No room selected" error message on retained rows without selected room
• [x] Text string of retained room and schedule should show (weekday), (time) and in (room name)

Faculty notes

• [x] Text instead of editable forms

Non-class meeting tab modal

Modal for editing an existing meeting

Meeting times scrolling div

• [x] Same changes as Courses tab modal

  Meeting notes

• [x] Text instead of editable forms

Faculty tab

• [x] Sabbatical leave table header dropdown, add "None" as the last option

[Vittorio2015]

Completed prototype update. Scheduling a review meeting with Kathy and Patrick for next week.

[Vittorio2015]

November 6 Course Planner Sprint review

• [x] Scheduler, persistent scroll bar.
• [x] Scheduler and other tabs (Faculty, Non-class Meetings, and Courses), move the content of side nav above table

[Vittorio2015]

November 20 Course Planner Sprint review

• [ ] Match prototype to implementation.
• [x] Scheduler, usability, and accessibility of Jonathan's progress on #273

[Vittorio2015]

December 21 Course Planner Sprint review

• [x] Review color palette of prefixes for accessible contrast with a black font

Prefix	Current prefix color	Accessible prefix color	Recommended color
AC	#da373e	OK	#EB9999
AM	#4eadab	OK	#7CC5C3
AP	#cedb51	OK	same
BE	#f0b643	OK	same
CS	#6797db	OK	#B8CEEF
EPS	#946EB7	OK	#C4A9D6
ES	#f9df57	OK	same
ESE	#75c3d5	OK	same
SEMINAR	#ec8f9c	OK	same
GenEd	#c0c0c0	OK	same
FRSEMR	#c0c0c0	OK	same
General	#95b5df	OK	same

WebAIM Color Contrast Checker was used to check the contrast of the current colors to meet WCAG 2.0 level AA conformance. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Screen capture of current interface (December 8, 2020)

Screen capture of recommended colors (December 9, 2020)