Global functionality placement on Material Design

Question

^{(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:

^{Profile view}

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:

Answer 1

I was trying to understand your question and linkage to material design principles. I really struggled to link both, as material design doesn't really provide direct answer to your question, but it rather guides thru some core design principles.

Your solution is not bad at all, but it could be improved a bit and would require proper user testing and assumption validation. Also, please do not forget that not every user will be familiar with material design principles, especially the ones who're not android or google apps users. Think about ios users https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

Based on the material design for desktop principles I could only suggest following improvements for the end user.

• Try moving navigation to the primary or secondary toolbar area. In my provided sketch, primary one uses logo and account details, and secondary toolbar holds horizontal navigation.
• QR code area could be defined and kept within consistent canvas area. It should also have some sort of explanation telling what it's and how to use this feature. Please test it with your users, I'm sure you'll be surprised how many people will be struggling to use it. Also, do not forget about user who do not use smartphones and do not have ability to scan QR code. There must be a way to help those users as well.
• Try improving your navigation IA, not sure if it's me , but it looks a bit random at the moment (perhaps not finalised) If in doubt try utilising Card Sorting technique.
• There's much more to improve, but it's been asked in this question. :)

Some info about QA codes and how to use them.

QR Code Principles

#1: Tell users why they should scan the code.

It better be a compelling reason. Mobile phone users are compulsive, but they still don’t like to waste their time. Tell them why they should invest time scanning your code and how pleased they’ll be once they have done so

If you’re in a country where QR codes are still new, along with the QR Code itself include some basic instructions such as “Scan this QR code with your camera phone. Go to your phone’s application store to get a free QR code reader.” This is cumbersome but necessary, unless your target audience is already familiar with the codes. Even then, give them a reason to scan it.

#2: Take the user to a mobile-friendly website.

A website can look wonderful on a desktop and terrible on a phone. It must be designed specifically for reading by mobile devices. At the very least, it has to be run through a software “mobilizer” which, once the server recognizes that a mobile device is knocking on the door, instantly converts all of the information on the desktop website into a format readable by the mobile device. If the data is presented only in desktop mode, the website’s owner has wasted time and money and lost—maybe even angered—a potential customer, client, or supporter.

Keep in mind that the information should be readable on all smartphones, not just the very newest models. And don’t forget the so-called “dumb” or feature phones. Most of them can’t read QR codes but that doesn’t mean their owners, who number in the very many millions, don’t matter. Don’t make them feel excluded. Whenever possible, provide an alternative to QR codes. Give a URL or phone number as well.

http://uxpamagazine.org/qr-codes/
https://www.nngroup.com/articles/wechat-qr-shake/

Answer 2

If I understand correctly, this feature is a way to share the current screen with students, right? In that case, since it's just another way to share content, the placement for this feature should be the same as it would be for a standard "Share" button, which resides either in the toolbar as an icon or in the action overflow (the three-dot menu at the end of a toolbar). In fact, ideally, the QR code feature would be inside a share menu (along with the other sharing options, if there are any), using the standard share icon.

As for why the navigation drawer at the side, I'd recommend against putting this feature there. As its name suggests, that drawer is intended to hold navigation items. Not only is this feature NOT a navigation item, but unlike other items in the sidebar, it's context-sensitive.

It's important to add that the material guidelines are just guidelines, not hard rules, and they don't guarantee a great experience. You still need to conduct user testing to find out if your app is usable.

Answer 3

There's no guidelines in Material for QR codes. And there will never be

And as we're at it, no mobile framework or guideline will ever have it either!

See, QR codes are meant as an easy way to transmit information from real, physical world to a virtual dimension. Basically, a bridge that joins the information gap between the physical world and its binary representation as data. It's just a type of barcode that started in Japan to transmit information from car parts to computers without the need of inputting lots of info. I'm explaining this so you can visualize it:

car part(physical) --> database (virtual/computational)
magazine ad (physical) --> mobile app (virtual/computational)
business card (physical) --> website (virtual/computational)

However, you're already in virtual world, and the info you want to transmit is in the same virtual plane or dimension. Just picture a common QR user flow:

user sees QR code --> takes picture --> phone scans the information and acts accordingly --> user gets output 

Now your user case:

user is using your app --> user sees QR code --> user has the QR code in her phone, so she doesn't know how to scan that code --> ??

Additionally, the teachers will need an additional step for something that quite probably could be easily automated. Even if the idea is to add the QR code just in case the teacher want to print it for her classes, there's no need to display it in the app. As human beings, we can't get any info from that code, so it will only add friction and nothing else

In short

No need to overcomplicate something as easy as this: just show a link or button (maybe a FAB?) and problem solved