5 conseils pour développer des applications mobiles avec une excellente expérience utilisateur

Passer au contenu principal

5 conseils pour développer des applications mobiles avec une excellente expérience utilisateur

Image d'arrière-plan de publication de blog sur l'interface utilisateur

Lorsque vous développer des applications mobiles avec Mendix, de nombreux clients créent d'abord l'application pour le Web, puis réduisent l'ensemble des fonctionnalités à un sous-ensemble accessible à partir d'une application mobile. Cette approche fonctionne bien pour les applications dont les exigences spécifient qu'il doit y avoir un moyen d'interfacer une application à partir d'un appareil mobile. La plupart des composants logiques et d'interface utilisateur qui ont déjà été développés pour l'application Web peuvent être réutilisés et le développement de l’application mobile devient davantage un exercice de réorganisation des éléments de fonctionnalités existants.

Mais que se passe-t-il si l'on a besoin d'une application entièrement mobile ? Devrions-nous adopter une approche différente ? Mendix développement ? Et si oui, comment ?

Dans un blog récent, mon collègue Eric Tieniber explique que le développement mobile ne doit pas être une réflexion après coup et donne bonnes pratiques pour mettre en œuvre une stratégie multicanal dès le débutCe blog fournit quelques domaines importants à garder à l'esprit lors du développement pour mobile et présente certaines fonctionnalités clés de Mendix pour vous aider à démarrer.

L'expérience avant tout

La pensée la plus importante à garder à l’esprit lors du développement d’applications mobiles avec Mendix C'est l'expérience utilisateur, et non la fonctionnalité, qui détermine l'adoption et le succès d'une application. Si un utilisateur est frustré par votre application parce qu'elle met trop de temps à répondre, qu'elle est peu intuitive ou qu'elle présente un léger problème visuel, il sera immédiatement rebuté. Avec la multitude d'applications esthétiques et riches en fonctionnalités disponibles aujourd'hui, la tolérance aux applications médiocres est plus faible que jamais. Votre application doit être élégante, et cela commence par l'interface utilisateur.

Les applications qui ont des animations et peuvent répondre à plusieurs gestes sont souvent considérées comme ayant des interfaces plus épurées. Pensez à votre application préférée sur votre téléphone mobile. Il y a de fortes chances qu'elle ait des couleurs vives, une police élégante et des animations légères. La question est de savoir comment concevoir et développer la meilleure expérience mobile possible.

5 conseils pour développer avec succès des applications mobiles en Mendix

1. Utilisez des widgets

Nous avons un certain nombre de widgets dans l'App Store qui sont spécifiquement conçus pour les applications mobiles.

Mendix Capture d'écran de l'App Store

Le widget le plus important ici que vous devriez inclure dans n'importe quel Mendix l'application mobile s'appelle Caractéristiques mobiles. Si vous ne l'utilisez pas dans votre Mendix Application mobile : arrêtez tout et installez-la. Ce widget offre à votre application des transitions animées entre les pages, des boîtes de dialogue natives, des indicateurs de chargement, et bien plus encore.

En plus des fonctionnalités mobiles, voici d'autres widgets qui vous aident à créer de belles pages mobiles :

  • Cercle des progrès qui affiche une barre de progression dans un cercle
  • Glissement d'onglet qui permet à vos utilisateurs de glisser entre les onglets par défaut Mendix Conteneur d'onglets

Mendix Exemple de téléphone d'application

Ici, en utilisant un widget de l'App Store, nous créons des onglets animés et glissants pour que l'utilisateur puisse basculer entre deux vues différentes de ses comptes bancaires

Exemple de balayage de style boîte aux lettres

Parcourez de nombreux autres widgets disponibles dans le App Store.

2. Utilisez des modèles de page pour personnaliser facilement les pages mobiles

Mendix propose une variété de modèles de page par défaut prêts à l'emploi, adaptés aux écrans et appareils de toutes tailles et orientations. Les modèles de page mobile constituent un excellent point de départ pour créer de belles pages mobiles. L'insertion d'une grille de mise en page pleine largeur garantit un remplissage du texte à partir des bords de l'écran et une lisibilité optimale. Les modèles mobiles placent les boutons de navigation et d'action principaux en haut de la fenêtre d'affichage, là où ils devraient se trouver sur mobile.

Exemple d'utilisation de modèles de page

Ici, vous voyez un exemple du modèle Phone_TopBottom, qui fournit des espaces réservés en haut pour les boutons principaux (déconnecter et Paramétres) et la navigation en bas pour les sections principales

Même des choses comme s'assurer que votre contenu est correctement aligné dans une vue de liste deviennent de la plus haute importance, car trouver l'équilibre entre afficher trop et pas assez d'informations est quelque chose qui doit toujours être au premier plan.

Capture d'écran d'un exemple d'alignement correct

Un widget de liste affiche des informations sur les transactions sur un compte particulier

Les applications mobiles ont tendance à être plus expressives que les applications de bureau, il est donc utile de varier la façon dont votre contenu est affiché, comme cet écran d'accueil bien agencé :

Des données clairement organisées dans une application mobile

Sur cet écran d'accueil, nous voyons un aperçu de nos comptes, avec différents rendus visuels pour montrer différents détails importants sur ces comptes.

3. Utilisez des extraits pour une réutilisation facile

La conception étant un facteur essentiel dans les applications mobiles, utilisez des extraits/blocs de construction (en grande quantité) pour mettre l'accent sur importance de la réutilisationLes applications mobiles ont également généralement des écrans plus « à l’emporte-pièce » qui se prêtent bien à la réutilisation, alors profitez-en. Des points bonus si vous avez ici des extraits que vous pouvez également utiliser sur la version de bureau/Web de votre application si vous en créez une plus tard.

4. CSS est votre ami

Utilisez l'apparence de votre application pour attirer les utilisateurs. Les propriétés CSS telles que flex, transition, box-shadow, ainsi que les couleurs vives et les dégradés peuvent aider votre application à se démarquer.

5. Utilisez les boutons avec parcimonie et diversifiez-les

Sur le Web, pointer et cliquer sont des gestes naturels. C'est la principale façon dont les utilisateurs interagissent avec les écrans depuis les premiers systèmes d'exploitation graphiques, il y a plusieurs décennies. Sur mobile, le toucher n'est qu'une des façons d'interagir. Tirez parti de la richesse des interactions qu'un utilisateur peut effectuer avec votre application : toucher, glisser, informations de localisation, détails de l'appareil, appareil photo, etc. N'allouez l'espace précieux de l'écran qu'aux actions principales et utilisez des gestes ou des menus d'action.

Étant donné que les interactions et les attentes envers les applications mobiles sont très différentes de celles des applications sur le Web, notre approche de développement doit être davantage axée sur l'expérience en premier lieu. Mendix La plateforme vous permet de concevoir et de créer facilement des applications qui se comportent comme des applications natives sur les appareils Android et iOS avec un large éventail de widgets mobiles, des modèles de page prêts à l'emploi pour mobile, des extraits réutilisables pour organiser votre code et un contrôle total sur l'apparence de votre application avec CSS et des contrôles d'interaction avancés.

Choisissez votre langue