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

More than happy to give a hand with this π
Here is my proposal, consistent with the VR mode icon:

which would render like this:

Let me know if you like and decide to go for it. I will then share the source file (.ai and .svg)
So long as WebXR is mostly applicable to overlay-AR via mobile devices, maybe something like
https://www.iconfinder.com/icons/4143712/ar_augmented_reality_mobile_icon
Sharing rendering also on light bg:

This is design option v2, instead.
Sharing icon + rendering on light and dark bg:



In case it helps, here's some background information and random thoughts.
The buttons get shown conditionally, based on detected capabilities, so a given device may show none, one of them, or both. The "AR" button only appears if the devices indicates that it supports the "immersive-ar" WebXR mode.
The effect of the two buttons is something like this:
"enter VR" - be as immersive as possible, hiding the real world and focusing on the virtual scene which supplies its own background.
"enter AR" - show the virtual objects, but integrate it with the real world. The virtual scene should use a transparent background.
Currently, in Chrome on an Android smartphone, the VR button would launch Cardboard or Daydream View mode, and the AR button (if available) would use ARCore for a handheld AR mode using the phone camera.
A VR headset could choose to support AR mode if it can enable a passthrough camera that shows a 3D view of the environment.
On a see-through AR headset, VR and AR modes may be similar if the headset optics can't draw opaque black to hide the environment. There's still a difference though. In VR mode, the application would draw its own background, while in AR mode it should not try to draw a background, letting the scene merge with the real-world environment.
Since the AR mode supports both headsets and smartphone handheld AR, it seems tricky to express this through an icon that shows what the device looks like, especially since a smartphone isn't a very distinct shape on its own. Would it work to have a split icon, showing half a smartphone on one side and half of an AR headset on the other side?
Alternatively, is there a way to get across the "draw scene background" vs "integrate with environment" aspect in the icon?
Currently there's no standard way to tell if the WebXR "immersive-ar" mode is headset based or handheld before starting a session, and that's largely intentional to avoid splitting the already-small ecosystem even further. I guess it may be possible to use heuristics to choose the most-likely-appropriate icon based on user agent information, and guessing wrong wouldn't be too bad since the button would still do the same thing, but I'm not convinced it would be a good idea to go down that path.
In my opinion, the AR mode icon should be as universal and understandable as possible, within reason. Showing just the demo shapes from A-Frame is showing people something that they would only understand if they worked with A-Frame. Also, if they aren't familiar with certain headsets, like the Hololens, then average users may be perplexed by this second icon.
People are at least moderately accustomed to the VR cardboard icon and get it right away. When I show people prototypes or things in A-Frame they know to click that button.
I think that AR mainly exists in a different context too, where the main place people experience it is through mobile devices. I think that the icon should reflect that via a cube or some sort of 3D figure coming out of a non-descript shape, so it's not limited to just mobile and shows that transition from the screen and into the real world.
Anyways, here is my attempt based upon this reasoning. This can be changed up easily a variety of ways. πΊ


Design option v3: minimal and device-agnostic.



@thedart76 I personally love it, awesome work!
@brendanciccone @thedart76 Thank you! I love how you build on top of each other ideas π I also like the cube a lot. Only problem is when a stylized cube is shown in perspective is hard to identify it as a cube, in particular when small. Maybe not a big issue.
@dmarcos the visibility on, letβs say a smaller device like a phone, is actually my biggest concern with my design. I think the solid filled cube that @thedart76 made makes it clear thereβs two dimensions/realities/whatever even to someone unfamiliar with VR/AR.
The simplest way to indicate AR might be an icon that just says AR. It's not as slick, but I think that might more clear.
Following same concept but the idea might get lost

@brendanciccone Thanks! It's an iteration of your concept π
Design option v4 following on @ngokevin 's feedback and @dmarcos 's sketch:



@thedart76 Thanks for the quick turn around. I think your cube idea is much sleeker. The AR button likely convey functionality better. Maybe centering A and R letters in the boxes makes the icon cleaner but the original idea gets lost a bit.
@dmarcos We can give it a shot, I will share this new version soon π
My only concern is that, by centering the A and the R letters in the boxes, the AR acronym might get split up making the button look like a toggle for 2 different A / R states. Let's see...
That is my concern as well about using the βAR' rather than the cube. I think that new users may think it is something totally different than AR. Could always get user feedback though and see what someone brand new to AR/VR thinks. π€·ββοΈ
On Nov 23, 2019, at 11:44 AM, Danilo Pasquariello notifications@github.com wrote:
@dmarcos https://github.com/dmarcos We can give it a shot, I will share this new version soon π
My only concern is that, by centering the A and the R letters in the boxes, the AR acronym might get split up making the button look like a toggle for 2 different A / R states. Let's see...β
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=AJMP44UTAAI2KC5MK3SHGODQVFMVDA5CNFSM4JQIUZA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE7Y4EQ#issuecomment-557813266, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJMP44WW2E5OLKYYB7JU77LQVFMVDANCNFSM4JQIUZAQ.
We can do a twitter poll with the cube and AR versions to collect some opinions
@dmarcos Here is the updated AR version:



This is an updated Cube version for better readability:



Thanks! Yeah itβs see what you meant. The AR button now it looks like a toggle.
Let me try to tweak the first version of the AR icon, maybe I can improve the readability while preserving the design concept.
@dmarcos I have finished doing the final tweaking to all the icons.
Sharing below the 3 design options we could use for the Twitter poll.
Option 1: 3D Cube v1

Option 2: 3D Cube v2

Option 3: AR Letters

PS: You may want to create a 4-tweet thread so people will not get confused with "which is which". I mean something like this (unless you already have in mind something else):
----- Thread Start -----
Poll Text
Lorem Ipsum...
Vote:
β’ Option 1
β’ Option 2
β’ Option 3
1/4
-------- Tweet 2 --------
Title
Option 1: 3D Cube v1
(image Option 1)
2/4
-------- Tweet 3 --------
Title
Option 2: 3D Cube v2
(image Option 2)
3/4
-------- Tweet 4 --------
Title
Option 3: AR Letters
(image Option 3)
4/4
----- Thread End -----
@dmarcos I forgot to mention that I deliberately scaled down the above icons to test and show their (approximate) readability when being displayed on mobile devices.
I'm sharing the ones at standard size as well should you prefer to use them in the Twitter poll (average Desktop monitors are not as good as mobile phones' displays):
Option 1: 3D Cube v1 (normal size)

Option 2: 3D Cube v2 (normal size)

Option 3: AR Letters (normal size)

Or maybe you could use both the sizes for each design option in the poll like this (with reference to the Twitter thread structure above):
...
1/4
-------- Tweet 2 --------
Option 1: 3D Cube v1
(image Option 1 normal)
(image Option 1 small)
2/4
-------- Tweet 3 --------
Option 2: 3D Cube v2
(image Option 2 normal)
(image Option 2 small)
3/4
...
This looks awesome. Thanks for all the work. Iβll tweet from the A-Frame account on Monday. We would get less feedback during the weekend.
Thanks. Yeah, wise choice. Let's see what people say. You can count on my availability should we need to further iterate and make any adjustments.
Retweets appreciated: https://twitter.com/aframevr/status/1199031334674554880
Thanks everybody for helping with this π
I'd like to differentiate modes a bit more with a finger or hand on the AR icon. It's hard to know which difference it'd make for the user already viewing the scene on a phone as it's already 3D.
I like all of the suggested options, thank you for all the contributions.
One part I'm wondering about is that in the "AR" text, it looks as if the "R" directly continues the left half's white rectangle, with no visible left edge to the "R", and while that may be intentional, I find it a bit visually confusing. Have you tried slightly adjusting the position of the "R" to leave just a bit of transparent border on its left? (I agree that the centered letters look too much like an "A vs R" toggle.) Or maybe make the letter colors a bit less intense, i.e. dark/light gray instead of black/white?
@klausw Yes, representing the "R" letter that way was intended for 2 reasons:
1) Readability: leaving a small gap between the left half's white background and the "R" letter creates "noise" especially when the icon is scaled down.
2) Concept: extending the "R" letter from the left half's white background represents the AR content overlapping the real-world layer.
I sort of agree the R the way it is makes it slightly more difficult to read, although it's cool. I'd slightly prioritize readability over sleek.
A good gauge is to put the two VR & AR icons next to each other and ask a friend or random person to tell you what the two icons mean. I'd think about giving your text treatment to the VR icon as well!
Happy and available to iterate on the R letter, will share the updated version soon π
@ngokevin can you elaborate more on _"giving your text treatment to the VR icon as well"_?
Do you mean using the "VR" letters for that button instead of the current goggles icon?
If so, what about the background and how do you imagine it?
Yeah, I feel certain just "AR" and "VR" text is the most clear. Those goggles I am pretty sure people outside WebVR won't know what it is. At least for English, though I think the acronym has transcended several languages.
For the background, I don't think the black/white represent anything. We could just have black text on white, or trasparent text on white, although I know that doesn't sound the most exciting and wastes some of your artistic vision. Perhaps we can get something interesting still (maybe the text is a bit 3D?). Thanks for being so rapid.
Thanks for your confirmation on the "AR" and "VR" text.
I agree with you about the background: the 2 halves wouldn't represent anything VR-related. I would use transparent "VR" letters on white background, because the other way around (fully white 'VR" letters on transparent background) sounds more appropriate for AR, where the content overlaps the real-world layer (no problem with creating and showing both the versions for us to make a decision, though).
About my artistic vision being wasted... Too many people are outside WebXR/XR yet, so I am here to help with some effective design favouring the icon's usefulness over its aesthetic; if we manage to include that factor as well then it will be even better, but I am ready to keep the Fine Art for my spare time π
Yeah, using some perspective and 3Dness on the letters, while trying to ensure the same level of readability, might be an idea worth exploring.
Let's give it a shot. 'm okay just going simple and ignoring the 3D text idea.
So, to make both the options meaningful I followed the principle behind the XR acronym: given the "X" as the variable, the "R"eality is what both the buttons will share; hence the "R" letters' styling should be consistent, whereas the only letter highlighting the difference between AR and VR mode is going to be the "A".
Enough with the theory.
New versions below showing the buttons on a 3D background to stress the icon readability:
Option 1: "A" letter on transparent background

Option 2: "A" letter on white background

As usual, feedback is very welcome.
PS: in the enter AR button, to make the "R" letter readable and cancel any "noise" I had to move it away from the "A" as much as possible. That is, IMO, the maximum distance acceptable between the 2 letters before ending up with the "A/B toggle" effect we already discussed yesterday.
@dmarcos In the next Twitter poll it might be useful to specify something like:
"Once you click on the images, make sure to do Right-Click > View Image to see the icons at 100% scale and avoid any blurring."
What are your thoughts?
Awesome work! Only issue I see is that people are used to the VR icon. Not sure if itβs worth changing
About twitter poll. FWIW, on mobile image quality is good enough to evaluate. Is there a way to make them look better without extra action? I guess is a twitter thing.
If we are going to do text. VR button with white background and AR button with all transparent background are perhaps the most representative. AR is like VR but with video feed as background
My concern with the text is that unlike an icon, it is only letters and is representative of anything with that abbreviation. For those not in this industry, VR and AR could stand for a variety of things.
For example, AR could refer to everything from annual returns to rifles. VR isn't too bad though as it is most commonly used to refer to virtual reality.
Also, visually they look perhaps too similar when they're both text-based and could cause people to misclick.
I think at this point when users see that cardboard icon they think goggles, virtual reality, headsets, etc. I think that the cube with added depth presents something different enough than the VR icon, but within context makes enough sense.
@dmarcos About the Twitter poll: yeah, I can increase the canvas size, so the images will not be scaled up. Twitter should display the magnifying-glass icon at that point, which will allow the user to simply click on the images and toggle between zoom-in and zoom-out (both the icon and the zooming action are surely more established patterns on Desktop).
About the icons: I like the idea of using all transparent background for the AR icon. You mean just like the VR button in today's new Option 2, right?
If so, we will have apparently filtered and selected the 3 new options:
1) All letters ("AR" on transparent background and "VR" on white background)
2) New AR button + current VR goggles icon (BTW, here still both the "AR" letters on transparent background or just the "A" letter on transparent background like in today's new Option 1?)
3) Shaded cube + current VR goggles icon (this option is leading the current poll)
I will work on them when I am back home later on tonight or maybe tomorrow, now I am about to go to a machine learning meetup.
@thedart76 Yeah the AR button would be like the VR in Option 2. Your other designs are much much prettier. Letters are boring but more clear perhaps. Not sure if we need another poll. The decision is between turning both icons into letters or change the AR one to either letters or the shaded cube that is winning the poll.
@brendanciccone Yeah, I hear you. It's also hard to interpret functionality from icons. AR / VR acronyms are getting more popular and spread by Apple, Google and other new entrants. We can piggyback on the industry to evangelize over time vs having something custom for us.
@dmarcos Thanks for your confirmation. I believe you are right: considering the minor adjustments we have made, another poll wouldn't add that much to help make a decision.
Here are the new updated versions.
Option 1: AR + VR letters

Option 2: AR letters + VR goggles

Option 3: Shaded cube + VR goggles

Sharing my thoughts:
1) AR + VR letters is the clearest option perhaps, and I appreciate its consistency. However, I am not a big fan of it because it denies all that the VR goggles icon has meant for A-Frame so far. It also reminds me of the "primary + ghost" buttons pattern, typical of the standard 2D web.
2) AR letters + VR goggles seems to be a good compromise. For this reason, though, it looks to me like a hybrid with the AR button doomed to stating the obvious once the user learns about its functionality after the first few interactions.
3) Shaded cube + VR goggles is probably my favourite option, even though it might require some users who have never heard of XR to find out what those 2 icons are for. On the other hand, I guess they will have to get familiar with the device itself before they can even think about how to enter and enjoy any XR experience.
@thedart76 Thanks again π Totally agree with your points. I really love your cube icons. At the moment, I only have a slight preference towards letters. it feels more clear, consistent and future looking (future headsets wonβt look like cardboard viewers, or I so hope π)
@dmarcos It's a pleasure and an honor to help you guys with this, as you already know π
Future form factors is something I hadn't considered, and I agree with you on the AR + VR letters option being device-agnostic. Ironically, on new cutting-edge hardware designs, this might also be the sleekest and most minimal option possible.
Let me know when you feel that all the different assets look ok, and I will share them either in .ai (Illustrator vector graphics) or .svg file format depending on your preferences.
Should you guys want to make any further changes or adjustments*, even in the future, you can count on me π
*(for example, using different fonts for the AR and VR letters, which you can preview and select yourself on the Google fonts website. I will then create the corresponding pixel-perfect icons.)
Twitter poll results with 243 votes are:
It seems decision comes down to abstract slick vs. letter icons
We just got an issue report from maybe one of the most used WebVR sites by users, requesting text on the button because they didn't know what the VR goggles icon while they were wearing an Oculus Quest. https://github.com/supermedium/moonrider/issues/85
@ngokevin well, considering that now, I'm all for text.
It also visually seems to be most clear on any background as well, from the mockups.
@ngokevin Empirical data from user testing is the best feedback we could receive π
@thedart76 @brendanciccone Thanks for all the work and feedback. I think we can go ahead and open a PR replacing current button
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.
@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%
@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! π
PS: if they don't render as we expect, feel free to ping me over Slack or DM me on Twitter.
@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.

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.
I realized the icons have a small border in photoshop. Probably better to eliminate and can add padding border with CSS

@brendanciccone Thanks! Take 2οΈβ£

@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.
@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 π
Thanks! Two options. Which one do you prefer?
Big Buttons:

Centered icons:

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.
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?
PS: if they currently are 80px width, can you try and bring them down to 64px?
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.
I usually prefer larger icons but can make them smaller. I can put a version online so you can try on device.
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 π
@dmarcos I transferred your image to my iPad and had a look at it: you are right, that's perfect.
You can try on device here: https://lyrical-khaan.glitch.me/
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?
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.
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)

Yeah 2nd looks better. Thank you. Super appreciated
I agree with you. A pleasure giving a hand. New downloadable assets here:
AR Mode (reduced tracking)
VR Mode (reduced tracking)
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 π
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.
Screenshot with latest icons iterations and a busier scene.

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?
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.
Excuse me, I'm looking for the project with the car at the top of this page. Could someone please send me a link?
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
.
Thank you ! ^^
Most helpful comment
This is design option v2, instead.
Sharing icon + rendering on light and dark bg: