Hello 👋

Comment vas-tu aujourd’hui ? Où en es-tu dans ton projet ? Ton MVP prend vie ?

Aujourd’hui je vais te partager une réflexion que j’ai posté sur LinkedIn la semaine dernière (n’hésite pas à m’ajouter si tu le souhaite 🤝)

Et toi ? Comment te positionnes-tu ? Méfiance avec Bubble : on peut vite tomber amoureux de l’outil et développer des features pour se faire plaisir, sans qu’elles correspondent à un besoin utilisateur 😅

Les tips Bubble

1. Evite certaines actions client-side

Tu en as peut être déjà entendu parlé, mais ça ne te dis rien ? Pour info, ce sont les actions qui ne sont pas exécutées sur les serveurs surpuissants de Bubble, mais “en local” sur ton navigateur.

Sur Bubble, ce sont les paramètres qui commencent par “:” -> :sorted, :filter, :group by… L’action de recherche Do Search est exécutée à distance, mais tu peux ensuite rajouter des actions à exécuter en local.

Tu comprends bien que les performances de ces actions vont alors dépendre de la configuration de matériel de ton visiteur, et que la rapidité variera pour chacun d’eux.

Mais pire : cela fait exploser les risques de sécurité en alerte maximale !

Imagine que tu veuille demander la liste des utilisateurs d’une entreprise. Tu as 2 tables : Entreprise (Nom + logo) et une table User (Nom, Entreprise_liée, mail).

• Cas #1 : tu Do Search les Users sans contrainte + tu rajoute un :filtered et une contrainte à ce niveau (Entreprise_liée = Current Page Entreprise par exemple)

• Cas #2 : tu Do Search les Users en ajoutant la contrainte Entreprise_liée = Current Page Entreprise

▶️ Tu es content car a priori les 2 fonctionnent bien ! Et au départ tu ne verras pas la différence, en effet.

⛔️ Cependant, dans le cas #1 tu as demandé à Bubble de rapatrier tous tes user dans le navigateur de ton client, et ensuite tu lui demande d’en afficher qu’un certain nombre filtré. En attendant, tous (oui oui : TOUS) les users se retrouvent stockés dans le navigateur de ton visiteur. Si il ne peut pas forcément les modifier, il va pouvoir les trouver avec quelques petites manipulations en fouillant dans son navigateur…

✅ Alors que dans le cas #2, tu as demandé à Bubble de t’envoyer juste les Users qui t’intéressaient et personne d’autre. C’est léger, c’est confidentiel, c’est écolo : tu prend uniquement les ressources dont tu as besoin. Bref, c’est ce que tu devras faire dans la majorité des cas.

PS : tu as peut-être vu l’action :count ? C’est la seule qui est exécutée au niveau du serveur donc c’est ok avec elle tu ne télécharge pas les éléments pour les compter après : tu demande juste au serveur de t’envoyer le résultat.

2. “Formaté comme un texte”

Si l’expression n’a pas fait carrière dans le vocabulaire de nos grands-parents, elle est un incontournable de Bubble.

Lorsque tu vas travailler avec des valeurs qui pourront être Oui ou Non, tu auras la possibilité de styliser ton résultat afin que son affichage s’adapte selon la condition.

Le cas d’usage ? Ton compteur de résultats de recherche lorsque ton Repeating Group est chargé, qui devra être au singulier ou au pluriel selon le nombre de résultat chargés.

Tu dois donc commencer par poser une condition qui sera Oui ou Non, ensuite tu affiche le résultat si c’est oui, et si c’est non. 1 seul élément, plusieurs résultats.

Tu vas me dire qu’on aurait très bien pu passer par le Conditional, ce qui est vrai dans ce scénario. Dans d’autres, c’est un gain de temps monstrueux : à toi d’arbitrer.

3. Un champ de caractère

Tu restreins le nombre de caractères d’un champ ? Très bien, mais préviens ton utilisateur du nombre de caractères qu’il lui reste !

C’est simple : tu crées le texte qui affichera le nombre de caractères du compteur et dans sa valeur tu fais référence à l’Input de saisie et tu ajoutes :number of characters à la suite. Et voila, ton champ est compté, sans utiliser de plugin.

Tu peux même le styliser avec des conditions : vert quand le nombre de caractères est inférieur à 10, orange entre 11 et 15 et rouge entre 16 et 20.

4. Tips invité : changer selon que tu sois sur ta version-test ou ta version-live

Le tips vient de @NigelGodfrey sur Twitter.

Tu auras besoin parfois de mettre une condition selon que tu sois sur ta version de test ou sur ton site en live (par exemple tu t’es calé des petits boutons pour débugger que tu ne veux pas montrer à tout le monde en live).

Tu peux mettre un conditional pour afficher un groupe sur ta version live en utilisant la condition {app-version} en précisant is live. Comme tu le sais sûrement, ton site Bubble est aussi accessible par monsite.com/version-live.

Tout change avec le versioning, disponible sur les offres Bubble plus avancées et qui te permet d’avoir plusieurs version différentes de ta plateforme. En plus de /version-test et de /version-live, tu peux avoir d’autres versions “test” que tu nommeras comme tu le souhaites.

Dans ces conditions :

• soit tu choisis app-version is “live” ou “test” ou “v2” mais tu devras être précis car si tu travailles sur la “v2” la condition pour app-version is “test” ne fonctionnera pas

• soit tu choisis Isn’t live version is “yes/no” : c’est live, ou pas. Point barre.

Merci @NigelGodfrey pour m’avoir permis de partager ton tips ici 🙏

Le mini-tuto : la différence entre un wireframe, un mockup et un prototype

Ce vendredi, c’est @konstantinzhuck qui nous fait un petit rappel sur la différence entre ces 3 termes.

Le wireframe est le plan du futur design. C’est la structure de la page et des écrans, fait à partir de blocs et sans aucun graphisme.

C’est une des étapes cruciales pour designer ton UX : tu dois bien placer tes éléments pour garantir une expérience utilisateur maximale.

Mon conseil : l’absence de couleur et de visuel te permet d’être focus sur ta proposition de valeur. Est-ce que toutes les données pertinentes sont présentes sur la page ? Faut-il scinder cette page riche en éléments ? Pour réaliser ce wireframe, utilise Google Slide qui te permettra d’aller vite, de façon collaborative.

Le mockup est la version finale du design UI. Le terme signifie aussi le périphérique ou l’endroit que tu aschoisi pour présenter ce design en situation “réelle”. Par exemple : iPhone XS mockup ou iMac mockup. Utilise le terme “design mockup” pour parler de ton design UI, et pas de la mise en situation.

Le prototype : ce n’est pas un wireframe ! Le prototype montre comment l’application fonctionne, comme une simulation ou un produit réel.

Il peut être animé ou être juste construit avec InVision, Marvel ou Figma (le top) pour avoir des éléments interactifs simulant le vrai projet.

Merci Konstantin pour ce rappel.

👉 J’ajouterai en étape 4 le MVP qui va venir tester en situation réelle le produit. Il peut être réalisé avec plusieurs outils, ou avec Bubble directement. Grâce au MVP, tu passes des maquettes aux données réelles et tu intègres toutes les fonctionnalités avancées comme le paiement ou les connexions API.

L’inspiration Bureau

Par @Dandesigns

Un design très épuré pour ton site e-commerce.

➕ une information très visuelle, avec les informations essentielles

➕ le produit mis en avant

➕ des couleurs neutres qui fonctionnent quelle que soit le produit

➕ des blocs arrangeables en responsive

➖ attention à la couleur des icônes en haut à droite (comme rappelé dans la newsletter de vendredi dernier) : sur une image foncée, on ne les verra plus !

L’inspiration Mobile

Par @Dudalima

Un dashboard très clair pour tes applications d’annonces.

➕ une information clairement présentée, avec différentes hiérarchisations

➕ un jeu de couleurs efficace pour mettre en avant le statut d’un élément (tâche, mission, candidature…)

➖ ta version Bureau risque de faire un peu vide…

Le mot de la fin

Comment as-tu trouvé ce numéro ? J’espère qu’il t’a appris quelques tips…

💬 N’hésite pas à m’ajouter sur LinkedIN pour me parler de ton projet de MVP, c’est toujours un plaisir d’échanger.

Si tu penses avoir des tips à partager, tu as mon adresse en retour de mail : je serai ravi de te lire et de les partager la semaine prochaine.

Bon développement, à la semaine prochaine.

Charles

Dev Bubble & formateur

Réussir votre MVP avec Bubble : coachmvp.fr