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]

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)

[dyarosla]

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

[thedart76]

Sharing rendering also on light bg:

[thedart76]

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

[klausw]

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.

[brendanciccone]

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. 🕺

[thedart76]

Design option v3: minimal and device-agnostic.

[brendanciccone]

@thedart76 I personally love it, awesome work!

[dmarcos]

@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.

[brendanciccone]

@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.

[ngokevin]

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.

[dmarcos]

Following same concept but the idea might get lost

[thedart76]

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

[dmarcos]

@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.

[thedart76]

@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...

[brendanciccone]

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.

[dmarcos]

We can do a twitter poll with the cube and AR versions to collect some opinions

[thedart76]

@dmarcos Here is the updated AR version:

[thedart76]

This is an updated Cube version for better readability:

[dmarcos]

Thanks! Yeah it’s see what you meant. The AR button now it looks like a toggle.

[thedart76]

Let me try to tweak the first version of the AR icon, maybe I can improve the readability while preserving the design concept.

[thedart76]

@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

[thedart76]

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 -----

[thedart76]

@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)

[thedart76]

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 ...

[dmarcos]

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.

[thedart76]

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.

[dmarcos]

Retweets appreciated: https://twitter.com/aframevr/status/1199031334674554880 Thanks everybody for helping with this 🙇

[alfa256]

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.

[klausw]

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?

[thedart76]

@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.

[ngokevin]

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!

[thedart76]

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?

[ngokevin]

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.

[thedart76]

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.

[ngokevin]

Let's give it a shot. 'm okay just going simple and ignoring the 3D text idea.

[thedart76]

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.

[thedart76]

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.

[thedart76]

@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?

[dmarcos]

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.

[dmarcos]

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

[brendanciccone]

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.

[thedart76]

@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.

[dmarcos]

@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.

[thedart76]

@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.

[dmarcos]

@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 🙂)

[thedart76]

@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.)

[dmarcos]

Twitter poll results with 243 votes are:

• Option 1 - Cube 18%
• Option 2 - Shaded Cube 43%
• Option 3 - AR Letters 39%

It seems decision comes down to abstract slick vs. letter icons

[ngokevin]

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

[brendanciccone]

@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.