Le vrai potentiel de l’app hybride

Introduction

La définition des concepts informatiques évoluent intrinsèquement avec le progrès ; l’invention et l’innovation naissent par brainstorming ou sérendipité, dans une maturation balbutiante et muette ; viennent ensuite, avec un léger décalage, la verbalisation et la vulgarisation de cette nouveauté.
C’est ainsi qu’est apparu le terme d’app hybride : il fallait donner une définition à cette application native efficiente, celle qui savait intelligemment dispenser le contenu Web là où il le fallait et quand il le fallait, là ou la mutualisation entre les différents contenus apportait un bénéfice immense, tant en productivité qu’en terme de coût.

Avantages

Pendant longtemps il fallait choisir entre WebApp et AppNative, en fonction de critères plutôt variés (lire l’excellent article de Wilfried MPANDOU sur ce sujet : Native ou Web App, que choisir ?).
l’app hybride combine  les avantages de ces deux mondes :

• Coût de développement réduit
• Maintenance applicative allégée
• Accès total aux fonctionnalités de l’appareil
• Mise à jour instantanée pour le contenu web
• Promotion via les stores (App Store, Google Play…)
• Monétisation élargie (iAd, purchase Apple et Google Play)
• Responsivité et impact émotionnel peu impacté

« Out of the box » ou « sur-mesure »

L’app hybride se décline en deux familles :

« Out of the box »

C’est le « prêt-à-porter » de l’app hybride ; l’analogie avec le textile est pertinente : de nombreuses boutiques font parfois de belles choses, et pour pas toujours très cher !
Voici une liste des principales solutions permettant rapidement de mettre en place un produit de ce type ; solutions DIY – pour Do It Yourself, à part peut-être les deux dernières qui sont à laisser aux mains des développeurs :
Mobile Conduit, InfiniteMonkeys, knack, appery.io, iBuildApp, appcelerator, PhoneGap
On obtient alors des applications natives, qui disposent d’un contenu essentiellement web ; « trop de web », dirons-nous pour les solutions « Out of the box » ; c’est ainsi qu’intervient le « sur-mesure ».

« Sur-mesure »

Une connaissance manifeste du métier de l’ergonomie web mobile et une étude approfondie du cahier des charge va nous orienter vers les fonctionnalités hybrides à implémenter ; la question qui va se poser est  la suivante : quels écrans vont pouvoir être réalisés en web – et donc mutualisés pour les multiples plateformes (iOS, Android, Blackberry, Web online…) – et ce sans (trop) impacter l’experience utilisateur ?

Typiquement cela concerne :

• Les formulaires complexes (contacts, questionnaires, quiz…)
• Les écrans statiques riches composés d’images, de couleurs, de polices différentes  (page d’aide, mentions…)
• Les concepts nativement web (nuage de mots, graphiques, wordmap…)

L’interactivité entre les pages web et l’app native est assurée par la remontée d’événement « attrapés » par l’application.
Ex : je clique sur un bouton de formulaire web, c’est détecté par l’application, qui prend la main et agit sur l’écran natif).

Cas pratiques

1. L’app Euler Hermes (EH Research)

Dans le cadre de la réalisation iPhone / iPad  que nous a confié Euler Hermes, concernant la carte des risques pays, nous nous sommes naturellement posé la question sur la faisabilité technique et la possibilité de mutualiser le développement d’une telle fonctionnalité ; Après reflexion, une worldmap HTML5 SVG, combiné à un écran détail natif semblait le plus pertinent et le moins coûteux, pour un résultat très propre.

Ainsi nous avons pu porter sans réelle difficulté d’intégration la map sur du multi-device, le plus délicat ayant été développé dans une techno nativement web pour cette fonctionnalité précise.

En terme de chiffrage, considération décisive pour un bon nombre des décideurs :
> si on définit la charge de réalisation de la map HTML5 à N jours, on peut dire que la charge additionnelle de portage est de N x 20% jours, alors qu’elle serait de N x 80% jours pour une techno non hybride ; un peu de Pareto dans la boucle illustre bien les avantages en terme de rentabilité.

2. L’app Natixis PCA (iOS & Blackberry)

Dans cette application, réalisé pour le groupe Natixis, le challenge était d’apporter un mode offline sur un produit de gestion de crise, où fortuitement (et malheureusement) un incident peut endommager la diffusion des informations des serveurs centraux.
Il fallait également pouvoir créer du contenu à la volée (nouveaux écrans).

C’est ainsi que l’idée d’un mini-site web mobile est venue, avec une aspiration de contenu dès le démarrage : Tous les écrans (page) webs sont ainsi téléchargés dans l’app pour stockage ultérieur sans réseau, et ceci quelque soit le device concerné :

Intégration web mobile en offline

Conclusion

L’app hybride, tout comme les sites web traditionnels, couvre un large spectre en termes de qualité et de coût ; avec une particularité commune : une augmentation de la productivité mobile.

Si vous voulez en savoir davantage, n’hésitez pas à nous contacter.

—
Maxime PITOT
Owner NUBYtouch
Formateur en mobilité au SAE Institute

Présence sur mobile : par où commencer ?

La présence sur mobile est devenue incontournable de nos jours.

L’heure n’est plus à l’innovation où certaines sociétés, aussi peu étaient-elles, décidaient d’anticiper ce mouvement de fond et de porter leur identité sur les appareils de l’information de demain.

Un peu comme le monde du Web il y a plus de dix ans, les entreprises aujourd’hui doivent être présentes sur tactile, et être disponibles aux utilisateurs nomades en demande d’informations, n’importe où, n’importe quand.

Le deux principaux freins à l’adoption du m-marketing résident dans les éléments suivants :

1. la méconnaissance de la culture mobile
2. la méconnaissance des solutions techniques possibles (site Responsive, WebApp, appli natives)
3. le coût de réalisation

Effectivement, avant de se lancer dans le mobile, il faut s’informer sur ces différents points. Vous trouverez dans cet article ce qu’il me semble important de savoir.

1. Habitude et culture mobile

On est bien loin de la souris qui pointe son curseur sur une zone de deux millimètres carrés ; ici, on utilise les doigts ; on ne clique pas, on fait du multi-touch ; la surface de l’écran est petite, ce qui nécessite de repenser et de simplifier drastiquement l’interface ; et comme si cela ne suffisait pas, on y ajoute de multiples nouveautés comme la géolocalisation (regardez où se trouve mon siège social sur la carte), la prise de vue (je scanne un code-barre), la dématérialisation (je signe le contrat sur iPad), etc…

Bref, mon conseil est tout simple, pour se familiariser avec le tactile, téléchargez 1001 applications, analysez-les, observez ce qu’elles vous apportent, et lancez-vous dans le cahier des charges !

2. Solutions techniques

Là encore, il y a des choses à savoir ; on peut distinguer trois orientations :

1/ Site Responsive : c’est une extension de votre site Internet, qui va « automatiquement » s’adapter à la taille du terminal – smartphone ou tablette ; pour illustration, si vous avez trois colonnes sur votre page d’accueil, vous en aurez deux sur tablettes, et une sur mobile (c’est intentionnellement simplifié, sachez que vous pouvez, via une détection du navigateur, rediriger l’utilisateur vers des pages mobiles davantage personnalisées).

2/ WebApp : une webApp n’est pas intégrée au site Internet ; par définition c’est une application au sens thématique du terme, qui va apporter une utilisation bien définie, et bien souvent utiliser les possibilités de l’appareil (géolocalisation, player vidéo, envoi SMS…)

3/ Appli native : alors que la webApp accède au contenu distant sur le Web, l’application native est, elle, téléchargée sur votre appareil, assurant une réactivité incomparable ; de là réside l’essentiel du « Whaou effect » : l’interface réagit instantanément au toucher, il n’y a aucun temps de latence !
Bien évidemment, la réactivité  est nécessaire mais pas suffisante  ; le chemin vers la killer app nécessite de respecter les bonnes pratiques du développement mobile, cela va de soi !

3. Coût de réalisation

La case départ est de rendre votre site Internet disponible sur mobile ; attention, quand je dis disponible, j’entends par là LISIBLE, car oui votre site Internet est accessible via le navigateur mobile, mais il faut alors une bonne dose de courage et de zoom pour lire l’écran, un peu comme si vous étiez à 20 centimètres d’un écran de cinéma !

Faire évoluer un site Internet pour qu’il s’adapte sur les différents écrans nécessite généralement de simples connaissances Web (HTML, CSS), et représente un coût relativement peu important ; c’est ce qu’on appelle un site Responsive : qui répond aux différentes tailles d’écrans.

Conseil No1 : Rendre votre site Responsive

Ensuite, les deux questions qui se posent sont les suivantes :

A quel public vous adressez-vous ?

A titre d’exemple, un parti politique (ou la grande distribution) va chercher à atteindre en « marketing direct » tous les terminaux possibles, c’est-à-dire les utilisateurs iPhone, Android, Blackberry, WindowsPhone etc….
Cela implique donc de lancer une réalisation multi-cible ; on optera donc davantage vers une webApp, où la technologie est unique (techno web) et les coûts logiquement moins élevés.

Quel est votre budget ?

Suivant vos capacités de financement, vous pouvez envisager de réaliser des applis natives sur les principales plateformes (iOS et Android) ; On imagine bien qu’un coût distribué  est plus onéreux qu’un coût unique de WebApp ; Cela est plutôt vrai ; cependant, gardez à l’esprit que le coût n’est pas proportionnel au nombre de plateformes cibles : il faut distinguer la 1ère réalisation du PORTAGE, qui est nettement moins chère (il suffit de « convertir » le code, les principales questions existentielles du projet ont été réglées à ce stade).

Conseil No2 : Optez pour une webApp si vous avez peu de moyen et une cible large

Si par la suite vous avez davantage de budget, ou bien une idée marketing thématique particulière, lancez un développement sur app native en allant chercher le buzz ; par exemple, toujours dans notre exemple de parti politique, on imagine une app Android « Mon Bayrou 2017 » (n’y voyez surtout pas un militantisme politique :)), où le ludique et fun seraient mis en avant.

Conseil No3 : Offrez-vous une présence native sur une thématique précise en allant chercher le buzz

En résumé :

Ces conseils doivent être des éléments structurants à votre raisonnement de stratégie marketing ; vous allez, logiquement et je l’espère, combiner ces conseils pour créer votre propre solution : par exemple l’entreprise « Booking.com » a d’abord créé son site Web Mobile, avant de décliner de multiples applications natives sur les stores ; la dernière, nommée « Tonight », a une thématique particulière et ciblée : les meilleurs hôtels pour ce soir ; simple, et efficace.

D’autres variables rentrent en ligne de compte, par exemple la maturité de votre plateforme de Web Services, élément fondamental dans l’Emission de données ; mais on rentre dans des considérations techniques, cela fera l’objet d’un autre article.

—
Maxime PITOT
Owner NUBYtouch
Formateur en mobilité au SAE Institute