Generate a QR code after signing credential

[fields37]

After signing on the "Issue" page, along with the signed credential, allow the user to generate a QR code representation of the signed credential for easy export. Credential can be compressed or uncompressed, although sometimes the credential will be too large to leave uncompressed. The user should be able to choose between compressed and uncompressed if possible.

[fields37]

My thought for how we implement this UX-wise:

[fields37]

@dmitrizagidulin @bmuramatsu In this design there is no extra step required to generate the QR code, it is generated at the same time the credential is signed. If the credential is small enough to be encoded uncompressed, the user can choose between viewing the compressed vs uncompressed version of the QR code in a toggle; if too large, the "raw" option will be disabled in the toggle bar. If it can't be compressed either, show a failure message.

[bmuramatsu]

Gabe, what does the compressed QR code option do? Remove whitespaces? Or what's the value of Raw / uncompressed?

I thought we are limited to 4000 characters regardless in this type of QR code. Why not simplify with the most readable version that can be made a QR code?

Also what happens if the filesize exceeds the capacity of hte QR code?

I'm also tempted to suggest a download icon like the copy to clipboard.

Brandon

On Tue, Nov 1, 2022 at 12:32 AM fields37 @.***> wrote:

@dmitrizagidulin https://github.com/dmitrizagidulin @bmuramatsu https://github.com/bmuramatsu In this design there is no extra step required to generate the QR code, it is generated at the same time the credential is signed. If the credential is small enough to be encoded uncompressed, the user can choose between viewing the compressed vs uncompressed version of the QR code in a toggle; if too large, the "raw" option will be disabled in the toggle bar.

— Reply to this email directly, view it on GitHub https://github.com/digitalcredentials/sandbox/issues/69#issuecomment-1298014598, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFXVRUOBDKLU6P7SPV6OJ3WGCML3ANCNFSM6AAAAAARTWGBF4 . You are receiving this because you were mentioned.Message ID: @.***>

[fields37]

Gabe, what does the compressed QR code option do? Remove whitespaces? Or what's the value of Raw / uncompressed?

I thought we are limited to 4000 characters regardless in this type of QR code. Why not simplify with the most readable version that can be made a QR code?

Hey Brandon, so from what I understand from @dmitrizagidulin, the compression is done via CBOR-LD by the vpqr library. This is a compression standard that is not yet universal, so Dmitri sees showing the two options as an opportunity to educate developers about it and explain the difference. If we decide this is not important, I'm all in favor of simplifying.

Also what happens if the filesize exceeds the capacity of hte QR code?

In this case I would replace that component with a warning message that the credential is too large to encode. Something like this:

I'm also tempted to suggest a download icon like the copy to clipboard.

Agreed.

[dmitrizagidulin]

+1 to what Gabe said about compressed being CBOR-LD compression, and the opportunity to educate. (We could further add to this effect by giving stats under the QR code -- like, 'X bytes size raw JSON', 'Y bytes compressed using CBOR-LD', 'Z bytes over the 4k QR code limit',

[fields37]

Below are some quick mocks of what we discussed above. Switched to toggle from button group, added a download button and information about size.

Interface in narrow aspect ratio, displaying raw QR code:

Interface in wide aspect ratio, displaying compressed QR code and too large for raw option.

[bmuramatsu]

Can we think of a way to further simplify this? Uncompressed if it can be expressed that way, compressed if it can't fit uncompressed.

Then details displayed when selecting the ?: The credential is xxxx characters and is encoded uncompressed in a QR code. The credential is xxxx characters and is encoded in a CBOR-LD encoded QR code as it's too large to fit in an uncompressed QR code. The credential is xxxx characters and is too large to encode in a regular or CBOR-LD encoded QR code.

From a design perspective, I think we're putting too much emphasis on the format selection vs. the outcome that is the QR code. Isn't that the primary thing we want the user of the sandbox to access? I think the UI should focus on the QR code with the other items being secondary. Also, I'd de-emphasize the warning message, I think it's more prominent than it needs to be. Perhaps just colored text on the page background.

Brandon

On Mon, Nov 14, 2022 at 10:17 AM fields37 @.***> wrote:

Below are some quick mocks of what we discussed above. Switched to toggle from button group, added a download button and information about size.

Interface in narrow aspect ratio, displaying raw QR code: [image: Screen Shot 2022-11-14 at 1 14 40 PM] https://user-images.githubusercontent.com/20584379/201735511-24e800c2-3f9d-4485-8d2a-163e9b380cce.png

Interface in wide aspect ratio, displaying compressed QR code and too large for raw option. [image: Screen Shot 2022-11-14 at 1 14 31 PM] https://user-images.githubusercontent.com/20584379/201735758-e2664f10-c45a-4088-8edf-d30de4a94f34.png

— Reply to this email directly, view it on GitHub https://github.com/digitalcredentials/sandbox/issues/69#issuecomment-1314186268, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFXVRT2ZRUI3NVL7IWG3DTWIJ63NANCNFSM6AAAAAARTWGBF4 . You are receiving this because you were mentioned.Message ID: @.***>

[fields37]

From what I understand, the reason to give users an option between raw and compressed is that not all digital credential clients support the CBOR-LD standard. Therefore we want to give it as an option to educate people about this standard we are looking to spread, but also allow export of an uncompressed QR code if needed. Is this correct @dmitrizagidulin ? Personally since this is a developer facing tool and not a user facing one, I'm less worried about having added options as long as there is a clear purpose and it's organized well.

If we are staying with the toggle, I can make it smaller and move it down to the left of the download button, and move the information about compression types and size into the "?" tooltip. This will keep that information and level of control available while emphasizing the QR code more in the design.

[fields37]

Completed in #76 and #78