Automatic Systems · Configurateur AR Automatic Systems · AR Configurator

Tester la démo, comprendre les choix.

Testing the demo, understanding the choices.

Ce document tient en deux temps : d'abord installer la démo dans les meilleures conditions, ensuite comprendre pourquoi chaque écran est construit comme il l'est, avec à chaque fois les références sur lesquelles on s'appuie.

This document covers two things. First, installing the demo under the best conditions. Second, understanding why each screen is built the way it is, with the references behind each choice, every time.

20 juillet 2026

July 20, 2026

Commencer

Getting started

Installer la démo en 30 secondes

Install the demo in 30 seconds

Pour vivre l'expérience dans des conditions proches de l'application finale (plein écran, sans barre de navigateur), trois étapes suffisent.

To experience it under conditions close to the final application (full screen, no browser bar), three steps are all it takes.

QR code

as-app-ui.adjust.digital/demo

1

Scanner

Scan

Ouvrez l'appareil photo natif de votre téléphone et visez le QR code. Aucune application tierce n'est nécessaire, iPhone comme Android le reconnaissent nativement.

Open your phone's native camera app and point it at the QR code. No third-party app is needed: both iPhone and Android recognise it natively.

2

Essayer

Try it

Le lien ouvre directement le configurateur AR, sans passer par un menu ou un écran de connexion.

The link opens the AR configurator directly, with no menu or login screen in between.

3

Installer sur l'écran d'accueil

Add it to your Home Screen

C'est l'étape qui change tout : elle seule fait passer d'un onglet de navigateur à une application plein écran, sans barre d'adresse. La démo vous le rappelle d'elle-même à l'ouverture : voici exactement ce que vous verrez :

This is the step that changes everything. It's the only thing that turns a browser tab into a full-screen app with no address bar. The demo reminds you to do it as soon as it opens. Here's exactly what you'll see:

Install prompt

« Mode plein écran indispensable »

“Full-screen mode is essential”

Sur iPhone : appuyez sur l'icône Partager de Safari, puis « Sur l'écran d'accueil ». Sur Android : menu ⋮ de Chrome, puis « Ajouter à l'écran d'accueil ». Une fois l'icône ajoutée, relancez la démo depuis celle-ci plutôt que depuis Safari ou Chrome.

On iPhone: tap Safari's Share icon, then “Add to Home Screen.” On Android: Chrome's ⋮ menu, then “Add to Home screen.” Once the icon is added, relaunch the demo from there instead of from Safari or Chrome.

Avant de commencer

Before you start

Deux points à garder en tête

Two things to keep in mind

Cette démo valide une navigation, pas un rendu final. Deux choses méritent d'être clarifiées pour ne pas se méprendre sur ce que vous allez voir. On préfère vous le dire avant plutôt qu'après.

This demo validates a navigation flow, not a final render. Two things are worth clarifying so there's no misunderstanding about what you're about to see. We'd rather tell you now than after.

1. Les produits sont simulés, pas modélisés en 3D

1. The products are simulated, not modelled in 3D

Dans cette démo, chaque produit affiché est une image, pas un modèle 3D. La rotation, la symétrie et le placement sont donc des animations préprogrammées et non une vraie transformation dans l'espace. Il est donc normal, et attendu, que la perspective du produit ne corresponde pas exactement au fond choisi (caméra ou image d'ambiance), et qu'il puisse même sembler mal positionné ou « flotter » au milieu du décor sur certaines captures de ce rapport : un comportement volontaire de cette démo, pas un défaut d'intégration.

In this demo, every product shown is an image, not a 3D model. Rotation, mirroring and placement are therefore pre-programmed animations, not a real transformation in space. It's expected, and normal, that the product's perspective won't exactly match the chosen background (camera or ambiance image), and that it may even look poorly positioned or seem to “float” in the middle of the scene in some screenshots in this report: intentional demo behaviour, not an integration flaw.

Le véritable moteur 3D, prévu pour la prochaine livraison, détectera lui-même les surfaces et la perspective de la caméra pour positionner, orienter et dimensionner le produit automatiquement, avec une précision que cette démo ne cherche pas à simuler. Aujourd'hui, on valide l'ergonomie et la navigation : ne vous attardez pas sur l'aspect ou le positionnement des produits eux-mêmes.

The real 3D engine, planned for the next delivery, will detect surfaces and camera perspective itself to position, orient and scale the product automatically, with a precision this demo isn't trying to simulate. Today, we're validating the ergonomics and the navigation: don't dwell on how the products look or where they sit in the scene.

2. L'orientation ne se bloque pas hors du mode AR

2. Orientation doesn't lock outside AR mode

Un site web ne peut pas forcer un téléphone à rester en portrait, contrairement à une application native. Si vous quittez le mode AR pendant que le téléphone est en paysage, la démo vous le signale clairement plutôt que d'afficher un écran cassé. C'est une limitation du web, pas de l'application. Dans la version native, l'orientation se verrouillera automatiquement, sans qu'aucun message ne soit nécessaire.

A website can't force a phone to stay in portrait the way a native app can. If you exit AR mode while the phone is in landscape, the demo tells you clearly rather than showing a broken screen. This is a limitation of the web, not of the application. In the native version, orientation will lock automatically, with no message needed at all.

Sous le capot

Under the hood

Pourquoi la navigation est pensée ainsi

Why the navigation is designed this way

Chaque choix ci-dessous s'appuie sur ce qui se pratique dans les applications de référence, pas sur une préférence esthétique. Les sources sont indiquées à chaque fois.

Every choice below draws on what reference applications actually do, not on aesthetic preference. Sources are listed each time.

Une scène qui respire, un habillage qui flotte au-dessus

A scene that breathes, chrome that floats above it

Le produit occupe 100% de l'écran ; les rails d'outils et les contrôles flottent par-dessus, en semi-transparence. C'est le principe de base des applications AR de référence : la caméra ne se redimensionne jamais, et la scène reste entièrement contemplable à tout moment, sans qu'aucun rail opaque ne vienne grignoter la vue.

The product fills 100% of the screen; tool rails and controls float above it, semi-transparent. This is the baseline principle of reference AR applications: the camera never resizes, and the scene stays fully viewable at all times, with no opaque rail ever cutting into the view.

Sources : Apple · Human Interface Guidelines, Augmented Reality · Google ARCore · Design Guidelines

Sources: Apple · Human Interface Guidelines, Augmented Reality · Google ARCore · Design Guidelines

Full-screen AR scene with floating tool rails on both sides

Produit volontairement non calé à la perspective du décor : voir limite 1.

Product intentionally not matched to the scene's perspective: see limitation 1.

Deux façons de regarder : configurer, ou juste observer

Two ways to look: configure, or just watch

Un tap sur le décor bascule entre mode Configuration (outils visibles) et mode Immersion (écran entièrement dégagé, deux poignées discrètes rappellent les outils). C'est exactement le geste utilisé pour afficher ou masquer les commandes d'un lecteur vidéo. Sans interaction, les commandes se retirent automatiquement après 5 secondes : c'est littéralement le délai par défaut du lecteur vidéo intégré à Android, celui qui fait tourner YouTube.

Tapping the scene toggles between Configuration mode (tools visible) and Immersion mode (screen fully clear, two discreet handles recall the tools). It's exactly the gesture used to show or hide a video player's controls. Left alone, the controls retract automatically after 5 seconds: that's literally the default timeout of Android's built-in video player, the one that runs YouTube.

Sources : Apple HIG · Going full screen · Android Developers · PlayerControlView (5000 ms par défaut) · NN/g · Progressive Disclosure

Sources: Apple HIG · Going full screen · Android Developers · PlayerControlView (5000 ms default) · NN/g · Progressive Disclosure

Immersion mode: chrome hidden, discreet handles on the edges

Produit volontairement non calé à la perspective du décor : voir limite 1.

Product intentionally not matched to the scene's perspective: see limitation 1.

Tout ce qui compte, à portée de pouce

Everything that matters, within thumb's reach

En paysage, les outils sont répartis aux deux bords de l'écran, jamais au centre, jamais en haut. Ce n'est pas arbitraire : l'étude de référence sur ce sujet, menée sur plus de 1300 utilisateurs, montre qu'environ 75% des interactions tactiles se font au pouce, et que les coins hauts de l'écran sont la zone la moins confortable à atteindre à une main.

In landscape, tools sit at both edges of the screen, never in the centre, never at the top. That's not arbitrary: the reference study on the subject, covering more than 1,300 users, shows that around 75% of touch interactions are made with the thumb, and that the top corners of the screen are the hardest area to reach one-handed.

Sources : UXmatters · Steven Hoober, « How Do Users Really Hold Mobile Devices? » · Smashing Magazine · The Thumb Zone

Sources: UXmatters · Steven Hoober, “How Do Users Really Hold Mobile Devices?” · Smashing Magazine · The Thumb Zone

Les tiroirs sortent de leur outil, ils n'apparaissent pas d'un coup

Drawers slide out of their tool, they don't just appear

Ouvrir « Matériaux » fait glisser un panneau depuis l'icône elle-même, dans la continuité du geste. Jamais un panneau qui surgit sans lien visuel avec ce qui l'a déclenché. Ce panneau occupe la quasi-totalité de la hauteur disponible, du bord supérieur au bord inférieur, pour ne jamais gâcher d'espace vertical avec une marge inutile.

Opening “Materials” slides a panel out from the icon itself, continuing the gesture. Never a panel that pops up with no visual link to what triggered it. This panel runs almost the full available height, top edge to bottom edge, so no vertical space is ever wasted on an unnecessary margin.

Materials drawer open, taking up almost the full screen height

Produit volontairement non calé à la perspective du décor : voir limite 1.

Product intentionally not matched to the scene's perspective: see limitation 1.

En portrait : la même philosophie, adaptée à l'orientation

In portrait: the same philosophy, adapted to the orientation

Toute l'interface est pensée d'abord pour le mode paysage (« landscape-first ») : c'est l'orientation qui laisse le plus de place à la scène et le plus de contrôle, tenue à deux mains. Tourner le téléphone ne casse rien pour autant : la même philosophie s'applique, adaptée à l'orientation plutôt que réinventée, en s'inspirant de ce qui se fait aujourd'hui dans les applications mobiles de référence. Les mêmes outils se retrouvent dans une barre basse, à portée de pouce, et un tiroir s'ouvre par-dessus sans jamais fermer la scène ni interrompre le placement en cours.

The whole interface is designed landscape-first: that's the orientation that leaves the most room for the scene and gives the most control, held with both hands. Rotating the phone still breaks nothing: the same philosophy applies, adapted to the orientation rather than reinvented, drawing on what today's reference mobile applications do. The same tools reappear in a bottom bar, within thumb's reach, and a drawer opens on top without ever closing the scene or interrupting the placement in progress.

Portrait mode: bottom tool bar Portrait mode: Materials panel open over the scene

Produit volontairement non calé à la perspective du décor : voir limite 1.

Product intentionally not matched to the scene's perspective: see limitation 1.

Un retour visuel qui ne laisse pas de doute

Visual feedback that leaves no doubt

Enregistrer affiche une confirmation claire et temporaire, sans bloquer l'écran ni exiger un clic pour la faire disparaître. C'est le comportement recommandé pour ce type de message de confirmation ponctuel.

Saving shows a clear, temporary confirmation, without blocking the screen or requiring a click to dismiss it. This is the recommended behaviour for this kind of one-off confirmation message.

Source : Material Design 3 · Snackbar guidelines

Source: Material Design 3 · Snackbar guidelines

“Project saved” confirmation shown temporarily

Produit volontairement non calé à la perspective du décor : voir limite 1.

Product intentionally not matched to the scene's perspective: see limitation 1.

Des icônes lisibles, jamais ambiguës

Icons that read clearly, never ambiguously

Chaque icône de la scène AR est accompagnée d'un label texte visible en permanence : jamais caché derrière un survol ou une pression longue, un réflexe qui n'a de toute façon aucun sens sur un écran tactile. C'est vrai pour les outils (Ajouter, Tourner, Symétrie…) comme pour l'action de retour, qui porte le mot « Retour » sous son icône plutôt que de s'en remettre à la seule forme d'un X.

Every icon in the AR scene comes with a text label that's visible at all times: never hidden behind a hover or a long press, a reflex that doesn't make sense on a touchscreen anyway. That's true for the tools (Add, Rotate, Mirror…) and for the back action, which carries the word “Back” under its icon rather than relying on the shape of an X alone.

La couleur, elle, sert à signaler la gravité d'une action, pas à décorer un bouton : le rouge reste réservé aux actions destructrices. Revenir à la sélection de produit n'en est pas une, donc ce bouton reste neutre ; un X neutre associé au mot « Retour » signale sans ambiguïté la fermeture d'un écran plein écran, exactement la distinction que font les systèmes de conception de référence entre un X (fermer, sans conséquence) et une flèche de retour (navigation avec état sauvegardé).

Colour, meanwhile, signals how serious an action is, not decoration: red stays reserved for destructive actions. Returning to product selection isn't one, so that button stays neutral; a neutral X paired with the word “Back” unambiguously signals the closing of a full-screen view, exactly the distinction reference design systems make between an X (close, no consequence) and a back arrow (navigation with saved state).

Sources : NN/g · Icon Usability · Material Design 3 · Dialogs guidelines

Sources: NN/g · Icon Usability · Material Design 3 · Dialogs guidelines

Neutral Back button at the bottom of the tool rail

Un choix assumé

A deliberate choice

Pourquoi pas de bouton « + » directement sur le produit ?

Why isn't there a “+” button directly on the product?

C'est une idée qui revient souvent en AR (ajouter un accessoire en contexte, au clic sur l'objet), et on comprend l'intuition, d'autant qu'elle avait déjà été proposée. Mais c'est aussi une idée que les guidelines officielles de Google pour l'AR déconseillent explicitement : un bouton ancré au monde 3D tourne avec l'objet, change de taille avec la distance de la caméra, et finit par se recouvrir lui-même dès qu'on empile plusieurs éléments. Ce sont trois défauts que la première version de l'application AR d'Automatic Systems avait déjà, et qu'on ne voulait pas reproduire.

It's an idea that comes up often in AR (adding an accessory in context, by tapping the object), and we understand the instinct, especially since it had already been proposed. But it's also an idea that Google's official AR guidelines explicitly advise against: a button anchored to the 3D world rotates with the object, changes size with camera distance, and ends up overlapping itself as soon as several elements are stacked. Those are three flaws that the first version of the Automatic Systems AR app already had, and that we didn't want to repeat.

Le même type de problème a été documenté sur IKEA Place, référence du secteur : la manipulation d'éléments ancrés au monde par geste à deux doigts y produit un mouvement « saccadé » d'après les premiers tests utilisateurs publiés. La fonction reste identique (ajouter un accessoire au produit placé), mais elle vit dans le rail d'outils, toujours à la même position, jamais cachée par l'objet lui-même.

The same type of problem has been documented on IKEA Place, the sector's reference app: two-finger manipulation of world-anchored elements produces “jerky” motion according to early published user tests. The function stays identical (adding an accessory to the placed product), but it lives in the tool rail, always in the same spot, never hidden by the object itself.

Sources : Google ARCore · UI elements · Android Police · test IKEA Place

Sources: Google ARCore · UI elements · Android Police · IKEA Place hands-on

Et en bref : les autres décisions

And in brief: the other decisions

Échelle verrouillée à 1:1

Scale locked at 1:1

Pincer ne zoome pas : les produits Automatic Systems ont une taille réelle, c'est un argument commercial. Apple recommande justement de ne pas permettre le redimensionnement d'objets à taille intrinsèque réelle.

Pinching doesn't zoom: Automatic Systems products have a real-world size, and that's a commercial argument. Apple specifically recommends against allowing resizing for objects with a genuine intrinsic size.

Apple Developer · Placing objects & 3D interaction

Apple Developer · Placing objects & 3D interaction

Tourner / Symétrie à bouton, pas au geste

Rotate / Mirror by button, not by gesture

Le geste à deux doigts pour orienter un objet est un point de friction connu des apps AR grand public. Un bouton à cran est plus fiable, pour un geste qu'on ne fait de toute façon qu'une ou deux fois par session.

The two-finger gesture for orienting an object is a well-known friction point in consumer AR apps. A stepped button is more reliable, for a gesture you'd only make once or twice per session anyway.

Android Police · test IKEA Place

Android Police · IKEA Place hands-on

Pas de tutoriel pas-à-pas

No step-by-step tutorial

Plutôt qu'une séquence d'écrans à traverser avant de commencer, les outils sont visibles et étiquetés dès l'arrivée : on apprend en faisant. Les tutoriels de ce type sont vite oubliés et interrompent plus qu'ils n'aident.

Rather than a sequence of screens to click through before starting, the tools are visible and labelled the moment you arrive: you learn by doing. Tutorials of that kind are quickly forgotten and interrupt more than they help.

NN/g · Onboarding Tutorials vs. Contextual Help

NN/g · Onboarding Tutorials vs. Contextual Help

Caméra réelle, avec repli

Real camera, with a fallback

La demande de permission caméra est la vraie boîte de dialogue du navigateur, pas une simulation. Si la caméra est refusée ou indisponible, un décor plausible prend le relais plutôt qu'un écran vide.

The camera permission request is the browser's real dialog, not a simulation. If the camera is denied or unavailable, a plausible backdrop takes over instead of an empty screen.

Questions fréquentes

FAQ

Ce que vous vous demandez peut-être déjà

What you might already be wondering

Le produit ne suit pas bien la caméra, l'angle paraît décalé : c'est un bug ?

Non. Voir « Avant de commencer » plus haut : les produits sont des images, pas des modèles 3D, dans cette démo. Le vrai moteur 3D arrive à la prochaine étape et gérera la perspective automatiquement.

The product doesn't track the camera well, the angle looks off: is that a bug?

No. See “Before you start” above: the products are images, not 3D models, in this demo. The real 3D engine arrives at the next stage and will handle perspective automatically.

On ne retrouve pas le bouton « + » directement sur le produit qu'on avait imaginé ?

C'est un choix assumé, pas un oubli. Voir l'encadré « Un choix assumé » ci-dessus pour le détail et les sources.

We don't see the “+” button directly on the product the way we'd imagined it?

That's a deliberate choice, not an oversight. See the “A deliberate choice” box above for the detail and the sources.

Le portrait n'est-il qu'une version compressée du paysage ?

Non : l'interface est pensée landscape-first, mais le portrait applique la même philosophie adaptée à l'orientation (barre basse à portée de pouce, tiroir qui s'ouvre par-dessus), pas un simple rétrécissement. Voir « En portrait » plus haut.

Is portrait just a squeezed-down version of landscape?

No: the interface is designed landscape-first, but portrait applies the same philosophy adapted to the orientation (a bottom bar within thumb's reach, a drawer that opens on top), not a simple shrink. See “In portrait” above.

Pourquoi pas un tutoriel pas-à-pas à l'ouverture ?

Voir la fiche « Pas de tutoriel pas-à-pas » dans « Et en bref » ci-dessus : l'aide contextuelle est préférée à un parcours imposé, sources à l'appui.

Why isn't there a step-by-step tutorial on opening?

See the “No step-by-step tutorial” card in “And in brief” above: contextual help is preferred over a forced walkthrough, sources included.

L'appli s'affiche mal quand je tourne le téléphone hors du mode AR ?

Normal en démo web. Voir « Avant de commencer » en haut de ce document. La démo vous prévient elle-même ; l'application native ne connaîtra pas cette limitation.

The app displays badly when I rotate the phone outside AR mode?

Normal for a web demo. See “Before you start” at the top of this document. The demo warns you itself; the native application won't have this limitation.

Le style visuel ne correspond pas exactement à ce qu'on avait dessiné ?

Ce document couvre le module AR, qu'on souhaite garder proche de cette version pour les raisons détaillées plus haut. Le reste de l'application (catalogue, fiches produits, navigation générale) reste ouvert à vos retours et évoluera davantage dans les prochaines itérations.

The visual style doesn't exactly match what we'd drawn?

This document covers the AR module, which we'd like to keep close to this version for the reasons detailed above. The rest of the application (catalogue, product pages, general navigation) stays open to your feedback and will evolve further in upcoming iterations.

Sources

Sources

Références citées

Cited references