1

Suppose a user wants to display a QR code on their screen, but either the screen is dirty, or cracked. I want to allow the user to have the option to split the QR code into sections so it can be scanned.

Technically this means I'll be displaying much less data, increasing the QR error correction rate, and increasing the size of the QR. From an application perspective assume I'll be able to consume these smaller chunks of data.

E.g. "The quick brown fox jumps over the lazy dog" = 1 QR code

If the screen is broken: 

 "The quick brown fox" = 1 QR

 "jumps over the lazy dog" = 1QR

I'm looking for a UX/UI that will allow a user to tell me that the screen is broken... the constraint is that the button my be obscured or not pressable as touch in that section of the screen is broken.

Next, I need a way to move from one QR code to the next with the same constraints as above..

Improve this question
4
  • How would any UX know that the screen is broken?!
    – tohster
    Mar 14, 2015 at 1:39
  • 2
    A user could shake or tap the phone perhaps? Or listen for a fall using the gyroscope.
    – makerofthings7
    Mar 14, 2015 at 1:42
  • Is your example with the broken screen was just a use case? Do you actually just want to know, how to split a QR code?
    – tillinberlin
    Mar 14, 2015 at 10:39
  • @tillinberlin In general, how do I deal with a broken/dirty screen? I'm ok with technical, and splitting it up is just my idea. Never seen it implemented before. If a split, would it automatically rotate between panels?
    – makerofthings7
    Mar 14, 2015 at 13:09

3 Answers 3

Reset to default
1

I'm going to assume that you will take care of the entry point to the app, and this question is about displaying the QR codes.

The question of how to detect and display a broken screen is much too broad.

Observations:

  • High redundancy QR codes are very resilient. The code can still be read with around 30pct of the image occluded.
  • Let's assume you don't know where the screen damage is going to be. So we'll use the intrinsic redundancy of the QR code itself, and render it as large as possible to increase the signal to noise ratio.
  • Given the aspect ratio of mobile screens, this leaves room at the top and the bottom for status indicators.
  • We'll also assume the touchscreen may or may not be usable.
  • This is a specialized app... It doesn't have to look pretty, it has to be effective.

Here's an approach that incorporates these concepts

enter image description here

  • Large QR code rendered for maximum signal-noise.
  • QR codes automatically cycle on a countdown interval, in case phone controls are not operable.
  • Clear labels at both top and bottom for redundancy. Blue countdown timers show user how long before the next code is shown and label indicates how many codes there are and which one is displayed.
  • User can tap the screen, shake the device, or use the volume keys to cycle between QR codes. You may want to add additional cues onscreen, or a preceding tutorial (eg onscreen and read aloud for redundancy) to show the user how to cycle.
Improve this answer
6
  • Would you be interested in work for hire? I have a project I'm working on.
    – makerofthings7
    Mar 14, 2015 at 17:05
  • @makerofthings7 flattering but sorry I am not available for that. I thought this question was interesting because it relates to an interaction between physical design and digital UI
    – tohster
    Mar 14, 2015 at 17:08
  • I'm creating a digital drivers license that people will use in real life and on the web. It's based on advanced cryptography. The interaction of physical design and digital UI will be interesting because it uses: iBeacons, NFC, Bluetooth, Wifi, RIFD readers, proximity detection. E.g. when a woman goes to a bar she shows her driver's license. That contains her address. Suppose the bouncer is flattered by her and stalks her home address. All she needed to prove is that she was older than 21 and a photo. My app provides minimal disclosure so that stalking would have never happened.
    – makerofthings7
    Mar 14, 2015 at 17:12
  • Do you have direction on where I can go if not you ;)? Freelancer? 99 designs, jobs.stackexchange.com... - You can reach me at name at gmail.com
    – makerofthings7
    Mar 14, 2015 at 17:13
  • 1
    Sorry I don't have any particular resource to recommend but there are a lot of sites and services out there aimed at getting UX full or part time help. My one suggestion would be to read up on how to interview a designer and articulate your tasks clearly... Lots of resources on the Web for both those topics. Good luck!
    – tohster
    Mar 14, 2015 at 17:20
1

Instead of splitting the QR Code into multiple lower-resolution QR Codes, each containing a portion of the encoded data, consider turning down the error-correction level and then animating the original QR Code. Have it hop around the screen, staying still after each hop just long enough for a watching camera to attempt to read it.

If any portion of the screen is clean and functional enough to display the image, the image will eventually appear there, allowing the QR Code to be read.

Reducing the error-correction level should keep random spots of dirt from being interpreted as part of the QR Code and could also reduce the size of the image, allowing a smaller area of functional/clear screen to display it fully.

Improve this answer
0

Why not skip the on-screen display of the QR code completely and instead print it out and stick it on the side / back of the screen? There could even be a phone number next to it with "in case screen is brolen please call..". This would even work, if the screen got completely out of order.

Improve this answer
3
  • there is a time sensitive component that requires the code to change...
    – makerofthings7
    Mar 14, 2015 at 12:19
  • IMHO this sounds just a bit too 'tricky': have a screen display something important – but only when it's broken?! So expect it to be broken – but not 'too broken'?! I must admit I just don't get it… Maybe you have even some more details?
    – tillinberlin
    Mar 14, 2015 at 15:06
  • Actually, they need to use Google Authenticator, or Bitcoin on a broken screen... the phone kinda works and they want to remove the bitcoins... that is one scenario
    – makerofthings7
    Mar 14, 2015 at 15:14

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.