3

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

enter image description here Profile view

The aim is to provide a unified experience across different viewport options:

enter image description here 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:)

enter image description here

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:

enter image description here

4
  • The idea is that the QR Code is a link to that specific tab (Teacher History, Teacher Dashboard, Teacher Reminders, etc.)?
    – Alvaro
    Mar 1, 2017 at 17:17
  • On that specific example the links are top-level states, @Alvaro - they point to the current signed-in user's History, Reminders and Dashboard. But a given teacher may offer class notes under #/faculty/{teacher}/{class}/{date}/notes, for example.
    – OnoSendai
    Mar 1, 2017 at 17:22
  • I assume when you click on the link the content on the right hand also changes?
    – Mervin
    Mar 3, 2017 at 22:30
  • @MervinJohnsingh Yes, that's a correct assumption. The animated GIF show the left menu area only - the content on the main workspace changes, as well as the URL indicating the current scope.
    – OnoSendai
    Mar 3, 2017 at 23:35

3 Answers 3

2
+50

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/

enter image description here

enter image description here

1
  • First, thanks for the (comprehensive) answer! The reason why I ask this in connection with MD is that it was the paradigm of choice for the multi-viewport approach. To clarify, I added an image showing a state as shown in different viewports. All in all, good points - I appreciate the time you took in each aspect, and I'll get a channel open for user feedback right away.
    – OnoSendai
    Mar 6, 2017 at 14:43
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.

1
  • I agree on both aspects, Tin: Is is a share function - so it should reside within the 'share' context, and not within the nav drawer. About MD being a guideline, yes, I'm still struggling with its soft nature.
    – OnoSendai
    Mar 6, 2017 at 15:07
2

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

3
  • Glad I'm not alone in not finding a spec for that. =) You got the use case right, but I had a slightly different focus in mind - imagine a student showing another student a specific page (from my example, #/class/chem101/syllabus): The idea was to allow quick sharing even with the limited interface of the mobile device. Student A shows the QR Code pointing to the current page, Student A scans it, and opens exactly the same page.
    – OnoSendai
    Mar 6, 2017 at 15:04
  • Err, meant "Student B scans it".
    – OnoSendai
    Mar 6, 2017 at 15:55
  • @OnoSendai, got it. But it will be faster and easier for Student A to share the link with contacts, where you can limit the sharing to a one-by-one basis (for example, A sends the link via messaging) or a more global approach, like social media sharing. In your user case, they're together already, so chances are they have some level of close relationship. But relationships aside, the most likely case is they won't be together, hence they need to be in remote contact
    – Devin
    Mar 6, 2017 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.