Feature Request: Add Toggle Display Button to Menu [Desktop view often needed by Mobile users, for Content Pack details/metadata/footnote]

[tim-moody]

On the home page menu add a button to toggle between desktop and mobile layouts:

• Placement: at bottom between Poweroff and trademark
• Function: switches layout of menu items between what is configured for mobile devices and what is configured for desktop devices. This may or may not be between maximum and minimum verbosity depending on the configuration. It does not change the overall layout of the page, only the layout of individual menu items.
• Storage: when the button is clicked it stores display_mode = 'default' or 'override' in localStorage. When the menu is loaded it will check this value to decide whether to display in mobile or desktop layout for a given device.
• Configuration: Fields similar to those for power off will be added to the Admin Console to allow configuration of this feature.

[holta]

I'm overwhelmed with administrative work in coming weeks, so others should be invited to work on this critically needed feature.

@georgejhunt can you consider looking into this?

Additional background is posted at: https://github.com/iiab/iiab/issues/1775

[tim-moody]

@holta no work will begin until you agree to the design. afterwards I will do the work.

[holta]

@tim-moody as far as I understand your above design, it appears excellent. As mentioned to @georgejhunt at https://github.com/iiab/iiab/issues/1775#issuecomment-507039251.

Quick Design Thoughts / Questions:

• The center of the page at the bottom sounds like a great place for this, as many major/online web properties do exactly the same thing (Google, GitHub, Wikipedia, etc) so people around the world are quite attuned and used to looking for a "Desktop view" button right around there. So we're basically forced to follow their lead, from a pragmatic UX perspective. So there isn't too much choice here at the moment. With that in mind, some followup design/tuning questions might be...

• Are there any other questions that need resolving, around making this multilingual? While the words "Desktop view" are perfectly sufficient for me, I know many Spanish-speaking countries last year preferred the button to be labelled "Vista Móvil/PC". And other languages will no doubt follow the Spanish precedent ? Do you need these words translated into French? I can get several native French speakers to do this later today if nec.

• If the button or font could be made quite large for media criticism / media literacy classes, that would be great. But if that's unfortunately not possible: as long as it's easily findable/clickable/pressable on most mobile phones that's what matters. For these 2 kinds of users especially:

  • "Librarians", "Implementers" and "Operators" (loosely, TLC's = Technology Learning Coordinators) who want this on all the time, and so want to find this button very quickly & easily every time they use IIAB.
  • "Student" / "Patients" who use this more occasionally, and do not understand it. As these folks tend to be a lot younger (and certainly needing more hand-holding) around the background / provenance / details of particular Content Packs (in the age of Fake News especially, metadata / sourcing details are becoming more important than ever...) e.g. for media criticism / media literacy / information science / library science education as mentioned above.

• ASIDE / related: everyday users in the developing world struggle to find these 2 features in the top-right of their mobile browsers, that can often help force a Desktop view, among the cognoscenti:

  • Chrome on Android > 3 vertical dots in top-right of browser > Desktop site [ ]
  • Firefox on Android > 3 vertical dots in top-right of browser > Request desktop site [ ]

  (We can only hope that in future years grassroots populations will be treated with more respect by the large companies, that sometimes hide essential "1st world" features from them :/)

[avni]

Some 2 cent thoughts: There is a concern that with the amount of content on the page, finding the button at the bottom of the page is not as discoverable as needed from a UX perspective. Another possibility is placing it above/below the Feedback button. It may be worth getting input/testing with 4-5 "TLCs" to get their viewpoints.

[tim-moody]

@avni if you see a feedback button you may be looking at the wrong repo

[tim-moody]

Are there any other questions that need resolving, around making this multilingual? While the words "Desktop view" are perfectly sufficient for me, I know many Spanish-speaking countries last year preferred the button to be labelled "Vista Móvil/PC". And other languages will no doubt follow the Spanish precedent ? Do you need these words translated into French? I can get several native French speakers to do this later today if nec.

Configuration: Fields similar to those for power off will be added to the Admin Console to allow configuration of this feature.

includes the prompt

Storage: when the button is clicked it stores display_mode = 'default' or 'override' in localStorage. When the menu is loaded it will check this value to decide whether to display in mobile or desktop layout for a given device.

means you only have to set it once

[tim-moody]

I'll begin once there is signoff

[holta]

"Vista Móvil/PC". And other languages will no doubt follow the Spanish precedent ? Do you need these words translated into French? I can get several native French speakers to do this later today if nec.

Configuration: Fields similar to those for power off will be added to the Admin Console to allow configuration of this feature.

includes the prompt

Great news.

Storage: when the button is clicked it stores display_mode = 'default' or 'override' in localStorage. When the menu is loaded it will check this value to decide whether to display in mobile or desktop layout for a given device.

means you only have to set it once

Until cookies are deleted?

Does this affect all/other users?

Can you clarify a bit?

[tim-moody]

uses browser permanent local storage, not cookie. no other users involved. visit the vertical ellipsis and select a language to see it. this (in the ellipsis) is where I originally planned to put the layout selection btw.

[holta]

uses browser permanent local storage, not cookie. no other users involved. visit the vertical ellipsis and select a language to see it. this (in the ellipsis) is where I originally planned to put the layout selection btw.

Sounds perfect, thanks @tim-moody.

Some 2 cent thoughts: There is a concern that with the amount of content on the page, finding the button at the bottom of the page is not as discoverable as needed from a UX perspective. Another possibility is placing it above/below the Feedback button. It may be worth getting input/testing with 4-5 "TLCs" to get their viewpoints.

@avni you're right that several teachers/implementers legitimately prefer this "Desktop view" button on top ( of IIAB home pages like http://box, perhaps replacing the old "Feedback" button in the top-right, or positioned in the center on top as with http://iiab.me/nigeria and http://iiab.me/peru, so that it is far more discoverable ) however I don't think we have time to interview 4-5 TLC's at this point in time.

As such I'd prefer that we get this working first, absolutely anywhere on the main page (a visually prominent button if possible?) and then iterate the graphical design placement issues in a later release, should that prove necessary.

[tim-moody]

I now prefer the button in the ellipsis menu rather than bottom of page.

[tim-moody]

done