Open mebjas opened 3 years ago
Some pure UI thoughts: https://www.figma.com/file/SdXeVf1pBoE9lcfjhYtFcd/Html5Qrcode?node-id=0%3A1
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.
I suggest to keep standard UI for html5QrcodeScanner compatible with old browser if possible.
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:
edit:
edit2:
the problem is it can be opened by only most recent browsers...
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.
figma website blocks all browsers not updated.
@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.
@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
looks nice indeed!
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:
I added a few layouts for the gallery mode to my figma board and I replied to the comments you gave @mebjas.
What you guys think about using this platform for internationalization contributing: https://weblate.org
Considering UI overhaul for version 3.x.x, user experience requirements?
Notes:
Note for contributors/ users
Looking for someone with UX/UXR experience to help make the user experience better for this library.