Acknowledged
1 month ago
CIQQA-3046

"Connect IQ Devices Reference" is just one gigantic static page: no partial loading, no dynamic nav element

This causes several usability issues:

- the page can be slow to load/render on mobile or even crash the browser

- the list of devices has anchor links to the detailed section for each device, which is good, but once you are in a detailed section, there it's easy to lose track of where you are, which is bad.

For example, the url fragment does not change no matter how much you scroll, so if you initially clicked on the link for fr955, the url fragment will continue to reflect that device no matter where you move in the document. As another example, if you scroll or search for fr955 then scroll down to the field layouts or part numbers, there will be no indication that you're currently in the fr955 section

Feature requests:

- implement lazy / partial loading for this page

- implement a dynamic nav element which floats on the unused left side of the page (currently just a blank dark grey slate). This nav element should clearly show the user where they are in the hierarchical page structure at all times: e.g. Forerunner 955 > Part Number > Part Number 006-B4024–00 > Languages > Kor

- dynamically change the url fragment as the user scrolls from section to section

Bonus feature request:

- There are currently 2 versions of the name of this page. In the sidebar and url, it's called "Devices Reference". On the page itself, the title is "Device Reference". It would be nice to pick just one version of the page name

FlowState
  • 1 month ago

    Lazy loading will make this a lot worse, since then you won't be able to search on the page anymore (with ctlr+f), and your suggested anchors won't work since they won't be loaded yet. And you still have the issue on mobile since it's still one massive page.

    To be clear, by "lazy loading" I didn't mean simply still having one huge page, but it loads gradually (even though that's what it sounded like haha). Maybe not the best choice of words. Probably should have said "infinite scrolling" or something. I meant a comprehensive solution where:

    - the UX is good on mobile and desktop

    - parts of the page are both loaded *and* unloaded as necessary

    - clicking on an anchor/nav link would serve to load the relevant part of the page instantly

    - infinite scrolling is handled in a *nice* way - it works quickly and has a custom scrubber/scrollbar control to allow the user to jump to any point in the page (just as if it was a static page, but without all the issues of a huge static page.

    - The issue with CTRL-F is valid, and this usually solved by having the page provide its own search function. This can be seen on this very forum - when you press CTRL-F, the forum handles it, instead of the browser (at one point, most of the forum was configured with poorly implemented infinite scroll, so it was necessary - and comments in the bug report section are still loaded progressively, when there's a certain number of comments).

    I think "modern" forum platforms like nodebb and discourse are great examples of most of this stuff. They can display very long threads (e.g. with 10,000 replies) with:

    - good mobile UX

    - parts of the page are loaded/unloaded on demand depending on what the user is looking at

    - fast infinite scroll, with custom scrubber/scrollbar that works on both desktop and mobile

    - custom search function which is also accessible on mobile (i.e. it can't just be a keyboard shortcut)

    The only thing they don't really have is a hierarchical nav element, since it's not relevant for a forum thread.

    Splitting the device reference into multiple pages is also a good solution but it penalizes those of us who are addicted to scrolling T_T.

  • 1 month ago

    Better would be if every watch has its own page instead of one massive page with everything. Lazy loading will make this a lot worse, since then you won't be able to search on the page anymore (with ctlr+f), and your suggested anchors won't work since they won't be loaded yet. And you still have the issue on mobile since it's still one massive page.

    Simply one page with overview of the devices, click on a device to go to the detailed section on a separate page with only the info for that device might work a lot better.