Page Comparison

Big picture design

• One search page (the dashboard) with a 1/3 - 2/3 split

  • left hand (1/3) side is for professor detail cards and course detail cards (representing aggregate data about each of those broader groups which will appear when you are filtering for one of those things)

    • QUESTION TO BE RESOLVED: how can the course data be presented in a meaningful a thorough manner in a reasonable size? Do we stick to smaller (in terms of screen space) data points, such as two digit numbers, or is it possible to spread out further without interrupting the course-professor combo cards list area?

  • right hand (2/3) side is for course-professor combo cards (aggregates data about a course taught by a specific professor)

    • course-professor combo cards are what can be added to the Compare page

• Search bar function

  • Based around creating filters by suggesting them when you type something

    • Example: typing “John” would suggest “John Cole” as a professor filter

    • Example: typing “Introduction to” would suggest “Introduction to Machine Learning” as a course name filter

    • This is more advantageous than the current search bar, since that is based around a tree of potential queries, whereas separating it into filters allows us to add more as we see fit without extending the tree into an impossibly large format. We do want to keep it within one search bar for simplicity sake, in comparison to something like CourseBook, which has each filter as a separate dropdown menu

    • Example of React MUI Autocomplete component, which already has a grouping option that could make it clear when a filter is being suggested as a professor or course or etc: https://mui.com/material-ui/react-autocomplete/#grouped, and the option for selected options to be added as tags https://mui.com/material-ui/react-autocomplete/#multiple-values

  • Filters to make (can add more later)

    • Professor name

    • Course name

    • Course number

    • Semester (before, during, after)

      • This would remove semesters that don’t fall within the defined range from the aggregations represented in all the different cards

      • Example: adding the filter “after: Fall 2022” would remove all data from semesters Spring 2022 and before from the aggregates determined with the other filters

        • if course-professor combo cards only include data from outside the time filters, then it would removed

    • QUESTION TO BE RESOLVED: how much do we filter the filters one can add? For example, if the user has some filters already, such as “CS 1200”, do we, or how do we, limit the filters they can add for professors? Do we want to limit this to just the professors for that course/other filters already applied? How do we indicate if certain filters are mutually exclusive?

      • One potential option already provided by the Autocomplete component is the ability to disable options: https://mui.com/material-ui/react-autocomplete/#disabled-options. Would this be enough to let users know that the filter options are being limited based on the already provided filters?

    • QUESTION TO BE RESOLVED: how do we want to handle free text input? if a user types something and doesn’t select a suggested filter, should this string be compared against some or all fields. Another potential option (not necessarily mutually exclusive) is to try to suggest potential filters they might have meant (such as if they typed “Jojn Cole,” likely mistyping “John Cole”)?

  • QUESTION TO BE RESOLVED: how can we show off the filters that are available? Drawing on the design of e-commerce sites like BestBuy, there is often all the filter options off to the left-hand side which can quickly be applied. This may allow us to provide users with faster filter adding and room to grow how many filters we want (such as a minimum score on some metric, like RMP difficulty rating), but we don’t want to split functionality between the search bar and filter area too much. Potentially, the search bar would just be used once as a broad search before going in more detail with this side-bar area. However, this would likely necessitate a somewhat significant shift in design, so currently it would probably be better to just have some way to make it clear to users how the filter adding works (such as a brief explanation and example in a hover)

  • Clear all option (already provided by Autocomplete component)

Examples

• Searching just for a professor (John Cole)

  • left hand side has professor detail card for that prof (John Cole)

  • right hand side has course-professor combo cards for all the courses John Cole has taught

• Searching just for a course (CS 2337)

  • left hand side has professor detail cards for all the profs who teach the course

  • right hand side has course-professor combo cards for all the professors who teach that course

    • QUESTION TO BE RESOLVED: How to show course specific/aggregated details? do we have course-professor combo card just for the course and differentiate it somehow? do we have a course detail card over on the left, but if so how to show off all the data (such as grade distribution)? (pretty much same question as the first question up at the top)

• Searching for both course and professor (John Cole CS 2337)

  • left hand side has professor detail card for John Cole

  • right hand side has one course-professor combo card for the search query (John Cole 2337)

• Searching for multiple professors and a course (John Cole, Scott Dollinger, CS 2337)

  • left hand side has professor detail cards for John Cole and Scott Dollinger

  • right hand side has a course-professor combo card for each pairing (John Cole CS 2337, Scott Dollinger CS 2337)