[Feature Request] [Tracking Bug] [Help Wanted] UI Overhaul for version 3.x.x

[mebjas]

Considering UI overhaul for version 3.x.x, user experience requirements?

• [P1] Intuitive UI to select camera, switch camera while scan is running
• [P1] Support for internalization
• Ability for developers to select supported scan types.
• Remove redundant status, only show when relevant.

Notes:

• The UI should scale for different form factors
• The UI should scale for scenarios with both qr box & without it.

Note for contributors/ users

Looking for someone with UX/UXR experience to help make the user experience better for this library.

[mebjas]

Some pure UI thoughts: https://www.figma.com/file/SdXeVf1pBoE9lcfjhYtFcd/Html5Qrcode?node-id=0%3A1

[ROBERT-MCDOWELL]

if we let the user to choose an UI it's ok since the UI link above is not compatible with browser older than 2 years.

[mebjas]

Latest ideas: https://www.figma.com/file/fDSUBEwfxmfVOpHF5sU9I0/html-qrcode-v3?node-id=3%3A310

[ROBERT-MCDOWELL]

I suggest to keep standard UI for html5QrcodeScanner compatible with old browser if possible.

[nikowuesti]

Hey, since we had a national holiday today I put together a layout and design for the new UI, I hope you like it :)
https://www.figma.com/file/C9yJci7jZZkRC9ayDIuBbO/html5-qrcode-UI?node-id=0%3A1

There are a few things I'd like to point out:

• The icon for more options is not in there (yet). What options will come up there? Do we need more options?
• The zoom slider is not in there, because I think the interaction should be with gestures or mouse events
• All Icons are SVGs that I designed myself in Affinity Designer, so they can be used without any licence stuff to be taken care of. Let me know if you wanna use them and where I can upload them. We can also strip them from all unnecessary meta information.
• There are some CSS ideas within the figma board if it helps
• One general thing I came up with: They layout does not change between portrait and landscape, only the icons and text are rotated in place by 90°. Of course this event needs to be separated from a wrapper that - let's say - changes from width < height to width > height. In this case we need a 2nd base layout unless we don't want to make use of a CSS3 transform or something and stick with one layout...
• Font is just for display, this is really up to the developer and so should be everything else :)

edit:

• I will update the figma board now and then, just added a better overview over the icons
• Idea: maybe it would be good if the dev can choose, if the buttons appear at the top or the bottom

edit2:

• also see this JSfiddle: https://jsfiddle.net/pg45L9kq/. It is also linked in the figma board with some explanation.

[ROBERT-MCDOWELL]

the problem is it can be opened by only most recent browsers...

[nikowuesti]

the problem is it can be opened by only most recent browsers...

What are you referring to? The SVGs?

edit: If you are referring to figma and its prototyping, I think we just use it here to scribble some ideas and quickly put together a layout and not use it any further than that. The whole UI needs to be written from scratch in the end I believe.

[ROBERT-MCDOWELL]

figma website blocks all browsers not updated.

[mebjas]

@nikowuesti
This is fantastic, thanks!!

The icon for more options is not in there (yet). What options will come up there? Do we need more options?
It looks fairly exhaustive. I was wondering overall if there was scope for an icon representative of this library overall and if it has a position in the UI.

The zoom slider is not in there, because I think the interaction should be with gestures or mouse events

Gesture or mouse event definitely helps - but I suppose it'd be useful to eventually support a slider for those who want it. I am thinking more from users perspective who may not intuitively know if pinch to zoom gesture is supported. I also don't know the accessibility standpoint on that.

@mominpasha: What do you think about A11y aspect overall in the mocks @nikowuesti has proposed?

There are some CSS ideas within the figma board if it helps

Super helpful!

One general thing I came up with: They layout does not change between portrait and landscape, only the icons and text are rotated in place by 90°. Of course this event needs to be separated from a wrapper that - let's say - changes from width < height to width > height. In this case we need a 2nd base layout unless we don't want to make use of a CSS3 transform or something and stick with one layout...

This is very interesting idea!

Idea: maybe it would be good if the dev can choose, if the buttons appear at the top or the bottom

yeah this sounds good too, I'd probably setup a board for the whole engineering effort and priortise components differently. One thing that could be added along with the button position could be the offset of QR box - it doesn't always need to be at center. Also need to think of the API design to keep things powerful yet simple.

[mebjas]

@nikowuesti Also, I added some comments on figma.

@ROBERT-MCDOWELL

figma website blocks all browsers not updated.

That is unfortunately out of our hand, it's any way used for white-boarding and shouldn't impact how the Html5QrcodeScanner results will look on old browsers.

here is a screenshot of nice mocks by @nikowuesti for those who cannot access

[ROBERT-MCDOWELL]

looks nice indeed!

[nikowuesti]

This is fantastic, thanks!!

Happy you like it!! :)

It looks fairly exhaustive. I was wondering overall if there was scope for an icon representative of this library overall and if it has a position in the UI.

If you let me know what exactly you have in mind, maybe we can find a way to integrate it. I guess it could be an info-Button or something like that?

Gesture or mouse event definitely helps - but I suppose it'd be useful to eventually support a slider for those who want it. I am thinking more from users perspective who may not intuitively know if pinch to zoom gesture is supported. I also don't know the accessibility standpoint on that.

Yes I agree. It is good if there is a fallback for that feature. I will prepare a UI for that.

Also need to think of the API design to keep things powerful yet simple.

From a dev standpoint I always prefered a lot of options to finetune the UI to my needs. If they have a solid default value it is even better. Right now I would think of these:

• button-position: top/bottom (if they appear over or under the scan area)
• button-offset: 10px (how much space is between the button group and their predecessor element)
• button-disabled: hide/grayed (if unsupported buttons are hidden or grayed out)
• qr-size-x: 80% (width of the scan area)
• qr-size-y: auto (height of the scan area)
• multiple options for the white frame (border radius, dash array, and so on, but I need to work it out how this effect is done in the first place so that it can be easily customized)

I added a few layouts for the gallery mode to my figma board and I replied to the comments you gave @mebjas.

[patogordo]

What you guys think about using this platform for internationalization contributing: https://weblate.org