🧬 1.3 - Caractéristiques des appareils mobiles

Module 335 – Réaliser une application pour mobile

🎯 Objectif d'apprentissage

À la fin de ce chapitre, vous serez capables de :

  • Identifier les caractéristiques physiques et logicielles des principaux appareils mobiles
  • Comprendre l'impact des tailles d'écran, résolutions et orientations sur le design
  • Adapter vos interfaces aux modes de saisie et aux contextes d’usages

🖼️ 1.3.1 Panorama des appareils mobiles

Les appareils mobiles regroupent les dispositifs portables qui intègrent :

  • un écran
  • une connexion réseau
  • une capacité d'interaction tactile ou vocale

🖼️ 1.3.1 🔍 Typologie des appareils

  • Smartphones
    → appareils les plus courants, orientés communication et polyvalence

  • Tablettes
    → écrans plus grands, lecture, vidéo, bureautique, création

  • Montres connectées (smartwatches)
    → interactions limitées, santé, suivi d’activité, notifications rapides

  • Objets connectés (IoT)
    → assistants vocaux, capteurs de maison, écrans embarqués, etc.

  • Appareils hybrides
    → pliables, double écran (Samsung Galaxy Fold, Microsoft Surface Duo…)

🖼️ 1.3.1 💡 Exemples concrets

Une application de messagerie ne se comporte pas pareil selon l’appareil :

  • Sur une smartwatch
    → affiche surtout des notifications ; réponses rapides (messages prédéfinis, dictée vocale, écriture manuscrite selon le modèle)

  • Sur un smartphone
    → permet de rédiger, envoyer, gérer des conversations complètes

  • Sur une tablette
    → peut afficher la liste des conversations et la conversation active en même temps (mode “split view”)

🖼️ 1.3.1 🔀 Diversité des formats

La multiplication des formats impose de penser adaptabilité :

  • L’interface doit rester claire et utilisable
  • … quel que soit l’appareil ou la taille d’écran

C’est ce qu’on appelle :

  • le design adaptatif
  • ou le responsive design

🎯 Objectif :

Une application bien conçue doit “respirer” sur un grand écran
et rester claire sur un petit écran.

🖥️ 1.3.2 Affichage, tailles et résolutions

Un des défis majeurs du développement mobile :
👉 la variété des écrans.

Deux téléphones peuvent avoir :

  • la même taille physique
  • mais des densités de pixels très différentes

Cela impacte :

  • la netteté
  • la lisibilité
  • la perception visuelle de l’interface

🖥️ 1.3.2 📐 Notions essentielles

  • Taille d'écran (en pouces)
    → distance diagonale de l'affichage (ex : 6.1" ≈ 15.5 cm)

  • Résolution (en pixels)
    → nombre de points affichés (ex : 2532 × 1170 px)

  • Densité (ppi / dpi)
    → pixels par pouce, influence la netteté (ex : 460 ppi)

  • Pixel ratio
    → rapport entre pixels physiques et pixels logiques (ex : iPhone Retina : 2x ou 3x)

🖥️ 1.3.2 📘 Pourquoi c’est important ?

Une interface conçue pour un écran basse densité peut paraître :

  • trop petite
  • ou floue

… sur un écran Retina ou AMOLED.

✅ Les développeurs doivent donc concevoir leurs éléments :

  • de manière proportionnelle
  • et scalable (adaptable)

🖥️ 1.3.2 📊 Exemple comparatif

Appareil Taille écran Résolution Densité Système
iPhone 13 6.1" 2532×1170 460 ppi iOS
Galaxy S23 6.6" 2340×1080 393 ppi Android
iPad 10.9" 10.9" 2360×1640 264 ppi iPadOS

💡 Observation :
Le texte et les boutons apparaîtront plus petits sur un iPhone 13 que sur un iPad,
à cause de la densité plus élevée, malgré un écran physique plus petit.

🖥️ 1.3.2 🧠 Bonnes pratiques de conception

  • Utiliser des valeurs relatives
    → em, rem, dp, sp, % plutôt que des pixels fixes

  • Privilégier les icônes vectorielles
    → SVG, Material Icons, SF Symbols

  • Tester l’interface sur plusieurs densités d’écran

  • Choisir des tailles de texte lisibles
    → en général 14–16 px minimum sur mobile

  • Vérifier marges et espacements
    → trop petits = erreurs de saisie

💬 Conseil :
Dans Android Studio ou Xcode, utilisez les simulateurs d’appareils pour vérifier le rendu sur plusieurs modèles.

🔃 1.3.3 Orientation et adaptation de l'affichage

Les appareils mobiles proposent généralement deux orientations :

  • Portrait (vertical)
    → lecture, navigation, messagerie

  • Paysage (horizontal)
    → vidéo, tableaux de bord, jeux, saisie avec clavier large

L’application doit pouvoir s’adapter à ces changements d’orientation.

🔃 1.3.3 🔄️ Rotation automatique

Quand l'utilisateur fait pivoter l’appareil :

  • le système réorganise l’affichage
  • selon les règles définies par l’app (layouts, contraintes, etc.)

Les développeurs peuvent :

  • verrouiller l’orientation
    → utile pour certains jeux ou expériences vidéo

  • autoriser l’adaptation dynamique
    → utile pour la lecture, les formulaires, les listes d’éléments

🔃 1.3.3 💡 Exemples concrets

  • YouTube
    → la vidéo passe en plein écran en paysage

  • Google Maps
    → l’interface s’adapte, mais le menu principal reste accessible

  • Jeux mobiles
    → orientation fixe pour la jouabilité :

    • Clash Royale : portrait
    • PUBG Mobile : paysage

🔃 1.3.3 🎨 Bonnes pratiques

  • Concevoir des écrans avec des zones flexibles qui se redimensionnent
  • Éviter les éléments placés en coordonnées absolues
  • Tester la continuité visuelle lors du passage portrait ↔ paysage
  • Utiliser des layouts responsives :
    • Flexbox / Grid (web, Ionic…)
    • ConstraintLayout (Android)

💡 Exemple :
Dans une app de calendrier :

  • en portrait → liste des événements
  • en paysage → vue mensuelle complète

👆 1.3.4 Méthodes de saisie et interactions

Les appareils mobiles offrent une diversité de modes d’interaction :

  • toucher (tactile)
  • voix
  • gestes
  • stylet
  • mouvements physiques (secousses, inclinaison…)

Chaque mode a un impact sur la conception de l’interface.

👆 1.3.4 ✋ Le tactile : la norme dominante

L’écran tactile est l’interface principale :

  • interaction directe avec les éléments visuels
  • pas de souris ni de clavier physique (dans la plupart des cas)

Gestes les plus courants :

  • Tap → toucher bref pour sélectionner
  • Double-tap → zoomer ou valider
  • Swipe → faire glisser un contenu, naviguer entre des vues
  • Long press → afficher un menu contextuel / options supplémentaires
  • Pinch / spread → zoom avant / zoom arrière

👆 1.3.4 💡 Exemples de gestes

Exemple : application de cartes (Maps)

  • Pinch → zoomer / dézoomer sur la carte
  • Swipe → déplacer la vue dans différentes directions

🎯 Objectif :

Une bonne application reconnaît plusieurs gestes sans confusion
et fournit un feedback clair (animation, vibration, son).

👆 1.3.4 🎙️ Saisie vocale et assistants

Les interfaces vocales se développent grâce aux assistants :

  • Siri
  • Google Assistant
  • Alexa, etc.

Elles permettent :

  • la dictée vocale (écrire un message sans taper)
  • les commandes vocales (“ouvre YouTube”, “mets un minuteur”)
  • des interactions en langage naturel

👆 1.3.4 🎙️ Exemples & limites

💡 Exemple :
Dans Google Maps, vous pouvez dire :

“Itinéraire vers la maison”
sans toucher l’écran.

⚠️ Limites de la voix :

  • peu adaptée aux environnements bruyants
  • manque de précision pour certaines actions
  • pose des questions de confidentialité selon le contexte

👆 1.3.4 ✒️ Stylet et entrées manuscrites

Certains appareils intègrent un stylet (ex : Samsung Galaxy Note, iPad Pro).

Le stylet permet :

  • une saisie manuscrite plus naturelle
  • le dessin et la retouche photo
  • une interaction très précise (sélection, surlignage, annotation)

💡 Exemple :
Dans une app de prise de notes, l’écriture manuscrite peut être convertie en texte numérique.

👆 1.3.4 🤳 Autres méthodes d’interaction

  • Gestes aériens
    → reconnaissance de mouvements sans contact (ex : passer la main pour faire défiler)

  • Capteurs de proximité
    → déclencher une action selon la distance (ex : éteindre l’écran proche de l’oreille)

  • Retour haptique
    → petites vibrations pour confirmer une action
    (ex : vibration quand on bascule le téléphone en mode silencieux)

💡 Ces interactions rendent l’expérience plus naturelle,
mais demandent une conception rigoureuse pour éviter les actions involontaires.

🚨 1.3.5 Capteurs et contextes d'utilisation

Les appareils mobiles sont de véritables boîtes à capteurs :

  • mouvement
  • lumière
  • localisation
  • biométrie

Ces capteurs permettent des expériences :

  • contextuelles
  • personnalisées

🚨 1.3.5 📍 Capteurs courants

Type de capteur Fonction Exemple d'utilisation
GPS Localiser l’utilisateur Navigation, météo, livraison
Accéléromètre Détecter inclinaison et mouvement Compteur de pas, rotation d’écran
Gyroscope Mesurer la rotation Jeux de course, réalité augmentée
Capteur de proximité Détecter une présence proche Éteindre l’écran pendant un appel
Capteur de lumière Mesurer la luminosité ambiante Ajuster la luminosité, économie d’énergie
Microphone / caméra Capturer son et image Appels, scan QR, reconnaissance vocale
Capteurs biométriques Authentification Empreinte digitale, reconnaissance faciale

🚨 1.3.5 ⚙️ Combiner les capteurs

Certaines applications combinent plusieurs capteurs pour une expérience plus riche.

💡 Exemple : Pokémon GO

  • GPS → localiser le joueur
  • Accéléromètre → détecter les mouvements (marcher / courir)
  • Caméra → afficher les Pokémon en réalité augmentée
  • Gyroscope → ajuster l’affichage selon l’orientation du téléphone

🛑 1.3.6 Contraintes et contextes d'usage

Une application mobile n’est jamais utilisée dans un environnement idéal.

Les concepteurs doivent anticiper :

  • le contexte réel
  • les limites techniques
  • les facteurs humains

🛑 1.3.6 🌻 Contexte environnemental

  • Lumière variable
    → l’écran doit rester lisible en plein soleil

  • Bruit ambiant
    → la saisie vocale peut échouer

  • Mouvements
    → l’utilisateur peut marcher, être dans les transports, etc.

💡 Exemple :
Une application GPS doit être utilisable d’une seule main, même en mouvement.

🛑 1.3.6 🪫 Contraintes techniques

  • Autonomie limitée
    → une app trop énergivore sera désinstallée rapidement

  • Performances variables
    → certains appareils anciens supportent mal les animations complexes

  • Connectivité
    → prévoir des modes hors-ligne ou des sauvegardes locales

💡 Exemple :
Une app de prise de notes doit fonctionner sans connexion
et se synchroniser ensuite quand le réseau revient.

🛑 1.3.6 🤓 Facteurs humains

  • Fatigue visuelle
    → éviter les interfaces trop lumineuses ou surchargées

  • Taille / précision du doigt
    → prévoir des zones tactiles d’au moins 48 × 48 px

  • Interruptions fréquentes
    → prévoir la sauvegarde automatique de l’état de l’application

🥇 Règle d'or :

Une application mobile doit s'adapter à l'utilisateur,
pas l'inverse.

🧩 1.3.7 Activités pédagogiques

📝 Exercice 1 – Analyse d’appareils

Comparez deux modèles de smartphone récents (ex : iPhone 17 vs Galaxy S25).

Questions :

  • Quelles différences techniques (écran, densité, capteurs) ?
  • Comment ces différences influencent-elles le design d’une même application ?

🧩 1.3.7 🎨 Exercice 2 – Orientation et mise en page

Créez une maquette simple d’un écran d’application.

Questions :

  • Comment les éléments se réorganisent-ils entre portrait et paysage ?
  • Quels éléments doivent rester visibles en priorité dans chaque orientation ?

🔗 1.3.8 Références et ressources

📗 Ressource complémentaire (lecture) :
https://uxdesign.cc/three-simple-rules-of-good-touch-design-4590e0dd1979