META: Implementing POW Re-Designs for Tabs and Facets on Results page

[roamye]

Problem Description: User testing findings from February 2024 shows users face confusion with understanding:

• facets only apply to the specific scope rather than apply to all scopes (Objects, works, concepts, etc)
• scope tabs have different results than one another. (are NOT non-mutually exclusive)

POW was given the task of reviewing our current layout and modifying it to solve these issues. From the new designs, the May/June user testing findings has given feedback for it be implemented.

This ticket will serve as the implementation of the re-designs for tabs and facets in advanced and simple search.

Expected Behavior/Solution:

• Re-design the front end layout to include all the approved changes from the POW redesigns pdf. (link below)

Requirements: Simple Search:

• Tabs will be connected to the search results box.

Advanced Search:

• Tabs will connect to and appear above the search query box.
• Search results will be a separate box displayed under the search query.

Simple Search/Advanced Search:

• Icons will display within the tab on the right hand side of the scope name.
• The facets will no longer display the label Refine.
• Facets will live within the search results page on the left-hand side and under the blue line.
• Information text icon (?) will display at the end of the text "X results"
• Selected Filters, Grid View, Sort By and Desc/Asc will continue to work the same.

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [x] Wireframe/Mockup - Mike
• [ ] Committee discussions - Sarah
• [ ] Feasibility/Team discussion - Sarah
• [ ] Backend requirements - TBD
• [ ] Frontend requirements- TBD
• [ ] Are new regression tests required for QA - Amy
• [x] Questions
• List of questions for discussions. Answers should be documented within the issue.

UAT/LUX Examples:

• TBD
• TST SS: https://lux-front-tst.collections.yale.edu/view/results/objects?q=%7B%22AND%22%3A%5B%7B%22text%22%3A%22andy%22%2C%22_lang%22%3A%22en%22%7D%2C%7B%22text%22%3A%22warhol%22%2C%22_lang%22%3A%22en%22%7D%5D%7D&sq=andy+warhol&ip=1&facetRequest=true
• TST AS: https://lux-front-tst.collections.yale.edu/view/results/objects?q=%7B%22AND%22%3A%5B%7B%22text%22%3A%22andy%22%2C%22_lang%22%3A%22en%22%7D%2C%7B%22text%22%3A%22warhol%22%2C%22_lang%22%3A%22en%22%7D%5D%7D&ip=1&facetRequest=true

Dependencies/Blocks:

• Blocked By: Issues that are blocking the completion of the current issue.
• Blocking: Issues being blocked by the completion of the current issue.

Related Github Issues:

• Issues that contain similar work but are not blocking or being blocked by the current issue.

Related links: Presentation Design walkthrough Prototype

Wireframe/Mockup: Desktop Mockups can be found here: FINAL_Approved_Changes_LUX-Yale-Screens for User Testing-2024_05_10.pdf ** Page 7-9 have been labeled as DO NOT USE as we will not be implementing those changes.

Mobile designs - complete, coming (7/23/24)

[kamerynB]

Update 6/14: This issue requires POW designs for the mobile view and a design that includes the correct label for the "People and Group" tag. The label should say "People & Groups".

cc: @prowns @roamye @jffcamp

[prowns]

POW has been contacted; next meeting on 6/17.

[kamerynB]

@roamye What is left to do in order to move this forward? Based on the number of changes, I would say this can be a meta ticket for "Frontend Design Changes" with all additional/individual changes in their own issues and linked to this one. I will map out the specifics but just wondering how this issue should be handled.

[roamye]

@kamerynB - I agree this should be a META ticket. Before moving this to prioritization review the other sub tickets should be listed.

The sub-tickets need to be focused on the requirements listed above. Do you think two issues would suffice? One focused on Simple Search and another focused on Advanced Search? Or would it be better to split them on each feature? (Ex: one ticket for AS/SS tab redesign, another for the facet redesign... etc) or as you mentioned have a different issue for each individual change?

Let me know what works best for you.

[kamerynB]

@roamye @jffcamp @prowns I have 3 questions that I wanted to confirm with you all before breaking this out into smaller issues.

1. Looking at the user testing, the designs used are not ones that we implemented at all. I'm confused as to why that was the case. Unless I'm missing some documentation. Were they POW designs we were considering at one point? Edit: I'm not sure where Design A originated from but Design B was an old design.

2. I've noticed some changes in the font weight/color/family in the POW designs, such as the advanced search dropdown button text being a black rather than gray. Another example is the help text header "Help" appears to be bolded. Are these also changes that should be made in addition to the layout?

Example of what POW has:

What we currently show:

3. What is the additional collapse button next to the "Add Row" button in the advanced search? Is this something that was requested?

Example from POW designs:

[roamye]

@kamerynB -

FYI: my answers may be incorrect and replies are based off my current knowledge of this topic

1/2) I do not think font weight/class is being considered to be changed. I think POW could not replicate our old font and used a font solely for mockup purposes which is why design A differs from design B. 3) I am not sure why that is there.

Overall I think the main changes to be considered are those of the tabs and facets and not other changes which differ from our current version (such as fonts, or that expanded/collapsed button).

@jffcamp @prowns - can you confirm or provide a more accurate answer for Kam?

It may be best to bring this to #agenda for a small discussion.

[roamye]

@kamerynB - this ticket should be on hold. Per @prowns we are still waiting on final designs. Once we have those a meeting with you @dcheather and Jimmy will take place to sort out the details.

[kamerynB]

Can this be a quick agenda topic? @prowns @roamye

[roamye]

@kamerynB - Yes, its added to today's agenda.

[roamye]

From IT Team Meeting 08/07: We are awaiting for the figma files to be completed. However, @kamerynB can start mapping out tickets.

There will need to be a deskptop/mobile discussion with Jimmy, Heather and Kam after figma files have been finalized.

[roamye]

@kamerynB - as of 9/9 the following links contain the finalized version for the mobile/desktop updates: Presentation Design walkthrough Prototype

I have also linked these in the related links section of this issue. Would a PDF copy of the finalized figmas be helpful?

If you would like, I can create some initial requirements based on what I have seen in the figma. We can then map out tickets based on what is needed.

Please let me know if you have any questions, or would like my help mapping out the issues.

Thank you!

(I have also left the same comment on #269)