(Disclaimer - I'm not a UX/UI specialist, but rather a fullstack dev that also need to cover for the UX aspect of an application framework. So apologies in advance for any faux pas.)
Preamble
We are currently developing a institution-wide application framework whose UI follows (or at least attempts to follow) the Material Design spec:
The aim is to provide a unified experience across different viewport options:
Master/Detail structure in desktop, tablet and mobile viewports
Additionally, all content have its own route:
- A person's profile can always be found at #/profile/{person}
;
- A given message can be accessed at #/message/{messageid}
;
- If you're the message's author or a moderator, you can enter edit mode at #/message/{messageid}/edit
;
And so forth.
Situation
A feature was introduced to allow state link sharing via QR Code.
Since all content have its own state, it allows for some interesting use cases. A teacher may, for example, show a QR code pointing to #/class/chem101/syllabus
, and interested students can get the URL on their mobile devices.
The feature itself looks like this (please try not to cringe, its current placement is only for testing purposes:)
I went through the spec itself, looking for layout structure hints for placement of such a feature. To be clear, it's a global feature that may be available at any given time, and that may be turned on or off according to the user's preferences. Alas, I failed miserably to identify a guideline for that, so I've tried a few approaches:
- A top bar menu icon that toggled the visualization of a panel containing the code image;
- A left bar menu entry that expanded the left menu entry itself and showed the code there;
- A feature that would switch the user card on top of the left bar with the current page's correspondent QR code.
But they didn't felt quite right, and I lack the specialized knowledge to translate that feeling into technical terms.
Question
Are there, from the Material Design specification perspective, any guidelines that I may follow regarding the implementation of such a feature?
Failing that - are there, from a general UX/UI POV (and keeping in mind that this framework is also available to mobile devides,) any usage guidelines that I may obey regarding the placement of visual cues referring to this functionality that'll avoid interface saturation?
Edit: Post-mortem
We followed through with Mindaugas' advice. The feature is now available under a 'share' pull-down item in the primary toolbar area:
#/faculty/{teacher}/{class}/{date}/notes
, for example.