Design a prettier icon for AR mode.

[dmarcos]

We know have an awesome AR mode for Chrome and ARCore devices thanks to @klausw I personally like the icon he made but some think it could prettier. If there are designers out there interested in contributing one to the community it will be greatly appreciated. Current icon below and inkscape svg and optimized svg files for reference

[thedart76]

@ngokevin Empirical data from user testing is the best feedback we could receive 👌

[dmarcos]

@thedart76 @brendanciccone Thanks for all the work and feedback. I think we can go ahead and open a PR replacing current button

[hiyakake]

I am very interest in this discussion.

I asked to my friends what they think about the AR icon I suggested to them. Then my friend says, “I don't understand why AR is a cube.”

We know the object displayed in 3DCG software is a cube because we are creators. For this reason we don’t see the AR like a cube.

Probably, the best icon we can create is using letters.

Who voted for A-frame's official Twitter because they are all developer. So, that's not useful.

[dmarcos]

@LavP thanks for contributing. It seems we’re in agreement 🙂 We settled on the letters version. In the poll the shaded cube and the letters were almost even with 40%

[thedart76]

@dmarcos @ngokevin Here are the 2 .svg files for the selected AR + VR letters option: enter-ar-mode.svg enter-vr-mode.svg Thank you to everyone who gave their contribute, it's been great working together on this! 🙂

[thedart76]

PS: if they don't render as we expect, feel free to ping me over Slack or DM me on Twitter.

[dmarcos]

@thedart76 Thanks! Applied the new icon treatment to the CSS and this is what I got. What do you think? Something feels off but maybe it's just my eyes that are so used to the old icon.

[brendanciccone]

It’s probably because the border and bolding seems to make them visually off-balance.

The border on the AR icon should probably mimic the VR icon and be around the border, rather than be a border inside the icon. Also, it looks like the AR letters are not as bold as the VR letters.

On Nov 29, 2019, at 11:07 PM, Diego Marcos notifications@github.com wrote:

@thedart76 https://github.com/thedart76 Thanks! Applied the new icon treatment to the CSS and this is what I got. What do you think? Something looks weird to me but maybe it's my eyes that are so used to the old icon.

https://camo.githubusercontent.com/c4a760855eed30dbff6a65f7d140e53b43d77cab/68747470733a2f2f646563776170387a74677272792e636c6f756466726f6e742e6e65742f6974656d732f3248326b3244326732463243317933613347327a2f496d616765253230323031392d31312d3239253230617425323031312e30352e3337253230504d2e706e673f582d436c6f75644170702d56697369746f722d49643d323232393230 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aframevr/aframe/issues/4326?email_source=notifications&email_token=AJMP44TGEWN5EWBK7S6DKA3QWHRIJA5CNFSM4JQIUZA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFPY5BI#issuecomment-559910533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJMP44TVRBFHOULDRQBFZB3QWHRIJANCNFSM4JQIUZAQ.

[dmarcos]

I realized the icons have a small border in photoshop. Probably better to eliminate and can add padding border with CSS

[dmarcos]

@brendanciccone Thanks! Take 2️⃣

[thedart76]

@dmarcos That border is not supposed to be there, and using padding should be the only way for you to set any extra space around the icons indeed.

If you drop the .SVGs in a browser window and change the page background color using the Developers Tools, you will see that the border is not there; you're right, though, as a border actually shows up in Photoshop and also once the icons are implemented.

I suspect this was caused by the Asset Export panel in Illustrator. I'll look into this and share the new .SVG without border soon.

About the icons themselves: are you keeping them that big?

@brendanciccone The VR letters are deliberately bolder than the AR letters. Once you scale the 2 icons down, the white background (being much brighter than the transparent background) will make them less readable as you can see in the above mockups.

Of course, the AR letters' weight is something we might have to adjust as we see how the 2 icons render at their final and actual size.

[thedart76]

@dmarcos Sorted, the border is gone 🙂 I had to use "Export As..." and untick the "responsive" option in Illustrator instead of exporting the assets from the Asset Export panel.

I also tweaked both the tracking and the weight of the AR letters.

You can download the 2 new icons from here: Enter AR Mode (no border) Enter VR Mode (no border)

Matching the size and the padding of the current VR mode button (VR goggles), here is how the 2 icons should render on Desktop and Mobile:

Button: 80x56px Padding: 12px (so icon would be: 56x32px)

Button: 48x32px Padding: 6px (so icon would be: 36x20px)

LMK if you are going to use different size/padding for the new buttons. If so, more than happy to make any further adjustments accordingly 👍

[dmarcos]

Thanks! Two options. Which one do you prefer?

Big Buttons:

Centered icons:

[brendanciccone]

Big buttons feel more like buttons IMO.

On Nov 30, 2019, at 7:34 PM, Diego Marcos notifications@github.com wrote:

 Thanks! Two options. Which one do you prefer?

Big Buttons:

Centered icons:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[thedart76]

Options 2 made sense with the VR goggles. With the new icons displaying the letters, I believe Option 1 is more appropriate. Are you going to leave the buttons that size? They seem a bit too big IMO. What are your thoughts?

[thedart76]

PS: if they currently are 80px width, can you try and bring them down to 64px?

[thedart76]

Actually, I just realised that we are testing them on a very basic and almost empty scene. On more crowded backgrounds with many objects and different colors it might be not so easy and immediate to spot them... I guess the only way to find that out is to give it a try.

[dmarcos]

I usually prefer larger icons but can make them smaller. I can put a version online so you can try on device.

[thedart76]

No need to, Diego, also because you have more XR devices than I do, so you will have the chance to see and judge better than me 🙂

[thedart76]

@dmarcos I transferred your image to my iPad and had a look at it: you are right, that's perfect.

[dmarcos]

You can try on device here: https://lyrical-khaan.glitch.me/

[thedart76]

Their size is different from the 1:1 scale in your mockup, so now I can see how they actually render. I like them a lot! Here is how I see them at actual scale:

MacBook Pro (1680x1050px)

iPad Pro (2048x1536px - scaled down to 1024x768px for Desktop resolution):

What do you guys think about them?

[thedart76]

If we want to do some final pixel-pushing, I would try to bring the tracking down just a bit and place the letters closer to each other. I'm curious to see if they look even better that way. With exact rendering references now I can create accurate mockups. I will share for all of us to see later on today.

[thedart76]

So, I exported the SVGs, uploaded them to Glitch, and then updated the url(s) of the buttons' icons in the Inspector (Developer Tools). Therefore what you see is not a mockup, but the icons being rendered in the browser using the CSS values that you set on the 2 buttons.

The below image is a section of a screenshot I took with my MacBook, so the icons are at 100% scale. (BTW, thanks for uploading that scene to Glitch!)

Which version do you prefer? Up (currently online) or Down (reduced tracking)

[dmarcos]

Yeah 2nd looks better. Thank you. Super appreciated

[thedart76]

I agree with you. A pleasure giving a hand. New downloadable assets here: AR Mode (reduced tracking) VR Mode (reduced tracking)

[dmarcos]

Great! Thanks. I’m looking at the icons after a night of sleep. I really like them but thought that the distinction between AR and VR might not be 100% clear. In the screenshot above with white background the AR button looks solid and the transparent background idea gets lost. I admit that this might be a moot point in the average scene and I’m possibly overthinking this 😋

[thedart76]

Yeah, this is true for plain and desaturated backgrounds, so the whole range from white to black. When overlapping plain and colored backgrounds, instead, the transparency of the AR button would be noticeable. Fortunately, we can rely on the AR and VR letters being extremely explicit.

The point is that "from the moment you know enough to talk about a product, you know too much to tell if that product would be usable for someone who doesn't know it." (from a user testing book I read years ago)

So, the only way for us to find that out is to put the icons to test 🙂 This way, the users would also tell us why the distinction between the 2 might not be clear.

[dmarcos]

Screenshot with latest icons iterations and a busier scene.

[thedart76]

The letter-spacing in the 2 buttons looks better indeed. I like them more than I expected.

About the transparency: that's true, the AR mode button's background seems a dark solid grey in this case. Unfortunately, in some circumstances that "lack of transparency" effect will be unavoidable. For example, the same is happening in this scene to the rightmost UI element (the rectangle reading 20MS), even though its background has 0% opacity.

What are your thoughts?

[thedart76]

PS: We could lower the background transparency just a bit... Not too much or, as you can imagine, it would compromise readability when the AR letters overlap white or light backgrounds.

[AkiroXR]

Excuse me, I'm looking for the project with the car at the top of this page. Could someone please send me a link?

[klausw]

https://klausw.github.io/a-frame-car-sample/index.html

On Wed, Apr 29, 2020, 22:51 AkiroXR notifications@github.com wrote:

Excuse me, I'm looking for the project with the car at the top of this page. Could someone please send me a link?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aframevr/aframe/issues/4326#issuecomment-621627265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKT5X6VBYSM434O2X4KVSDRPEGXJANCNFSM4JQIUZAQ .

[AkiroXR]

Thank you ! ^^

[djamel2288]

please, can I change VR button position?

[dmarcos]

@djamel2288 You can specify your own enter VR / AR buttons: https://aframe.io/docs/1.1.0/components/vr-mode-ui.html#specifying-a-custom-enter-vr-button

[djamel2288]

Thank you :D