search

project-lux / lux-frontend

Web front end of LUX
Apache License 2.0
3 stars 0 forks source link

Optimization of LUX for Mobile Devices #269

Open roamye opened 3 months ago

roamye commented 3 months ago

Problem Description: In the last 30 days site improve has shown ~23 percent of our users are on LUX mobile devices (see here). Mobile usage has gone up in the last two weeks as we have implemented google search, which is expected.

This ticket serves to discuss the optimization of LUX for mobile devices and monitor the trend of growing mobile users.

Note: Site Improve uses screen dimensions to categorize a users device status. https://help.siteimprove.com/support/solutions/articles/80000447954-definition-of-devices-in-analytics

Expected Behavior/Solution: TBD - Describe the solution to the problem or the expected behavior.

Requirements: TBD - List of details required for the completion of the issue or requirements for the feature/bug. This can also include requirements that lie outside of the teams such as new design docs or clarification from an outside source.

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

UAT/LUX Examples:

Dependencies/Blocks:

Related Github Issues:

Related links:

Wireframe/Mockup: Current wireframe from POW - option 1B

kamerynB commented 2 months ago

@roamye This is still waiting a decision on the mobile designs correct?

roamye commented 2 months ago

@kamerynB - Yes

I spoke to @jffcamp and he recently received something from Jimmy today. So we may have a update sometime this week on whether the consensus is to move forward with 1B or if others still need to review.

jffcamp commented 2 months ago

The design will be 1B. I've requested that POW provide an additional wireframe with a more compact results list. Limiting the data in the list to this: Objects, please list:

Title Produced by Categorized As – first followed by … if more than one

Works, please list:

Title Creator Categorized As – first followed by … if more than one

People & Groups - please list:

Name Occupations – first followed by … if more than one Nationalities – first followed by … if more than one

Places - please list:

Name Categorized As – first followed by … if more than one Place Hierarchy – Please list the first two, followed by …, then the last two

Concepts - please list

Name Descriptions – first two lines ending with … Concept hierarchy - … followed by the last two entries

Events - please list:

Name Categorized As – first followed by … if more than one Took Place At

kamerynB commented 1 month ago

This will have to be broken out into several smaller issues and this will be the meta ticket for it. @roamye @prowns

roamye commented 1 month ago

UAT 8/7:

Need to validate with interactions. There are some records with the same name and different identifiers. A user would not be able to differentiate by the title or the Name/Categorized As/Place Hierarchy/etc. However, this is a design exercise to see what it would look like. (Compressing the result cards information)

Next Step: Allow POW to create condensed designs.

roamye commented 3 weeks ago

@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!

roamye commented 1 week ago

Ticket forming 9/18:

kamerynB commented 1 week ago

@roamye @jffcamp @prowns I had a chance to go through the docs listed in Amy's comment here. I had a few questions and comments but overall I really like these layouts and styling. I will have to go through these again and start writing out specifics of what the frontend needs to change.

  1. The Sort By button on results pages does not separate the sorting direction vs the sorting field. Unless we wish to change this functionality, those two options should be separate.
  2. This is something that I've been aware of for some time, but does it make sense to have the About section for each entity page appear above any relationships listed? I know there may be exceptions to this but I wanted to ask.
  3. Should the feedback button always be below the Data Sources, even on desktops? The mobile designs have it below the Data Sources and I kind of like that since all the data grouped together and then a user can say "oh look, feedback button".
  4. I like the tabs to dropdowns when going from desktop to mobile on entity pages HOWEVER (see number 5)
  5. It took me a second to realize the content below the dropdowns was related to the dropdown. A layout similar to the results page dropdown would make more sense and be consistent across all pages. I've included screenshots below of what I am thinking.
  6. Will the IIIF rights description always be a modal that pops up in front of the IIIF viewer?

Number 5 Example: What is shown: Image

What I was thinking: Image

roamye commented 1 week ago

Helpful links for Kams comment above.

  1. Example of Sort By and Sort Direction as one button rather than two
  2. I am unsure which figma links shows this. I reviewed all them and the relationship (if any) is shown above the about section, for example: Mobile - Places and Mobile People & Groups. Is there a link you can provide that lists the about section above the relationships?
  3. Example of feedback button for mobile vs desktop
  4. entity tabs vs tabs
  5. see above links.
  6. Rights description that was chosen vs current desktop

Comments:

  1. I believe the sort by and sort direction are listed separately upon selecting the Sort & Refine button. I am not certain in this as I could not find a figma link that shows how button is displayed once selected. If it is how I believe it is, then this may not be an issue. @jffcamp & @prowns - can we ask Jimmy if there was a mockup for this? or confirm if this is how it functions?
  2. Please see above. I was unsure where it was showing the about section about the relationships in entity pages.
  3. I think this is a good idea. It is also would put the feedback button closer to the contact button on the desktop which could be useful for users.
  4. I cannot remember why there is difference between the results tabs vs entity tabs. At one point, (i'm 99% certain) the original results tabs looked like the current entity tabs. (see here for example) It was then decided to not have these tabs separated so I agree that the entity tabs should also not be separated. They should both have the same layout as you listed in your mockup.
  5. See comment above. (4)
  6. I believe it should be. The current desktop also has it pop up but because the layout is different it shows at the bottom left corner rather than in the middle of the image.
roamye commented 5 days ago

From UX/BA Meeting 9/25:

  1. @prowns will reach out to Jimmy to see if there is a figma link for what the Sort & Refine button looks like when selected. More discussion can be had afterwards.
  2. No discussion was had as it was unclear where the about section was above the relationships on entity pages.
  3. The mobile feedback button was not supposed to be at the bottom, it should be above the Data Sources as it is now in desktop.
  4. From a UX perspective those tabs should match the same layout as the Object/Works/etc tabs so it shows a connection from the tab to the results.
  5. See comment above (4)
  6. Rights description opening in the middle could be an accessibility issues. I will reach out to Kara to follow up on this.
kamerynB commented 4 days ago

@roamye Thank you. I will await further decisions/discussions. 😁