Create prototypes for Load more button layouts.

[lbelmore]

Conduct user testing to determine:
• Does a load more button make it more likely for a user to abandon the table before seeing all results or identifying their product?
• Does the load more button cause users to be less likely to use the filter options?
• Does the load more work for the image+affected product table only or all responsive tables (if it works).

[lbelmore]

3 prototypes to be created using the image table layout:
o Load 5 more
o Regular pagination
o Show all

assigning to @Tom-Preston

[lbelmore]

Hey @Tom-Preston - just checking in since our last chat. Can you post an update? Do you need anything from my end?

[Tom-Preston]

Hi @lbelmore
Using the Filtering without a table does not provide pagination. Unless there is a solution someone has I will use table formatting and filtering, then work on adding the More and All buttons.

[lbelmore]

Thanks @Tom-Preston!

Add the links to what you have here when you're ready, and maybe @Borges-Porteous can share some insights :)

[Tom-Preston]

Hi @lbelmore / @Borges-Porteous

Files so far
Main Content template for consistancy
https://hc-sc.github.io/rsa-renewal/examples/content-template-en.html

File used to isolate Gallery item in progress by Natalia
https://hc-sc.github.io/rsa-renewal/examples/Carousel_Natalia_edit.html

File used to isolate filtered tables requirments
https://hc-sc.github.io/rsa-renewal/examples/Table.html

Template being used to adapt the table filter modified on git hub
to allow for a More and All buttons, Any insite would be appreciated
https://hc-sc.github.io/rsa-renewal/examples/recal-table-en.html

[Borges-Porteous]

Sorry... I had been drafting a reply and then completely forgot about this because of other things.

The main comment I had was around the images in the modified template (4th link): I'd suggest:

• defaulting the rows to a certain minimum height
• centering the images within the white space available to them, rather than aligning them top-left
• top aligning the text in the right hand column

For the image slider (2nd link), great work on updating it, but it still needs work to be mobile friendly:

• adding some kind of touch area around the next and backward arrows (option 1 would be a shaded bar all along the height of the frame, option 2 would be a shaded circle around the arrow)
• adding some kind of visual indication that there is a next and previous, and that it is swipeable. This was previously done with the main image shrunk within the frame and the borders of the next and previous images. If this isn't possible, The material.io style guide has some guidance on gestures and affordances that might be of interest: https://material.io/design/interaction/gestures.html#properties

For the main template (1st link), it looks good. I noticed a couple small details, not sure if unintentional:

• the image should be at least partly visible above the fold on mobile view. I think the design update increased the spacing between bullets in the summary and size of font, so cutting down the space between bullets, at least, might be helpful.
• the image itself is not responsive. I assume it's just because it was a placeholder in the mockup, but these will have to shrink down in mobile so as to avoid the horizontal scroll being necessary to see the page.

Hope that helps! Glad to see all the templates and progress!

[lbelmore]

Thanks @Borges-Porteous !

Tom will be making some updates today and will share the once these have been updated.

[Tom-Preston]

@lbelmore @Borges-Porteous
I have been viewing documentation on the Table filtering and so far I can manipulate the position or inclusion of the different element of the filter. We can add a view all to the drop down list (value is -1)

I am so far unable to figure out how to add the buttons for more and to inject the functionality for these buttons.

Any new Ideas would be greatly appreciated.

Thanks

Tom Preston

[Borges-Porteous]

Hi @Tom-Preston @lbelmore

I've also been looking through some of the code and documentation.

Was able to find paramaters that can be passed in the table initialising code that can change column widths, disable sorting and other such things.

Here is a list of options: https://datatables.net/reference/option/

They just get added to this bit of script, in a json syntax (for example, for ordering and column sizes):

<script> $.noConflict(); $('#myTable3').dataTable( { "dom": '<"wrapper"fitlp>', "ordering": false, "columnDefs": [ { "width": "500%", "targets": 0 } ] }); </script>

There seem to be options directly relating to the pagination https://datatables.net/reference/option/paging

Although I can't seem to find an option specific for changing pagination into load more in the jquery datatables documentation, I have found a 3rd party plugin that does exactly this. You can read about it here:
https://www.gyrocode.com/articles/jquery-datatables-load-more-button/

I don't know how that works in terms of us using it... or the whole responsive table for that matter. I was intending to raise this further with PP in terms of getting it into WET, so perhaps we can go as a group to talk with Pierre, maybe next Tuesday?

I hope that helps to get started with the updated show more prototype though!

[Tom-Preston]

Hi @Borges-Porteous

Thank you, I am going to try and replicate the examples locally before trying in the templates.
I will let you know how it works out.

Tom Preston

[lbelmore]

Adding the updates on the load more prototype to keep progress in github:

Miguel created an initial version https://hc-sc.github.io/rsa-renewal/examples/chargers-various.html

Tom is working on the additional adjustments:

• There’s an animation both on a) page load and b) load more that scrolls the screen down (too far). This should either be fully removed or at least not trigger on page load & not scroll so far.

• The column widths are 50-50, but should be more like 25-75

• Update font sizes on mobile need to be adjusted. Listing titles and details should be smaller. (we'll likely have to test out variations of the image and font sizes to see what works)

• The borders on the bottom of each cell in the mobile view in the mockup was much bolder. This might need to be added if the current card pattern doesn’t distinguish the items enough

• The table is populated by a JSON file and I’ve put HTML tags into that JSON. It’s not very clean from a backend perspective, so might be worth editing the javascript to populate the HTML tags instead, so the JSON file can be managed more easily by publishers (or in the CMS)

• update the number of results to 5 displayed at a time (currently using 10)

• update the entries to be unique, repeating duplicate content is confusing to test this kind of functionality

• Add the text box filter to the top of this table

• also a second version with image on top of text may be a good test

@Tom-Preston – as discussed let’s keep all updates and issues within this github ticket.