🧬 1.3 - Caractéristiques des appareils mobiles
🎯 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 d'une application.
- Adapter vos interfaces aux modes de saisie et aux contextes d'usages
🖼️ 1.3.1 Panorama des appareils mobiles
Les appareils mobiles regroupent l'ensemble des dispositifs portables intégrant un écran, une connexion réseau et une capacité d'interaction tactile ou vocale
🔍 Typologie des appareils
- Smartphones : appareils les plus courants, orientés vers la communication et la polyvalence.
- Tablettes : écrans plus grands, utilisés pour la lecture, la vidéo, la bureautique et la création.
- Montres connectées (smartwatches) : interactions limitées, orientées vers la santé et les notifications rapides.
- Objets connectés (IoT) : assistants vocaux, capteurs de maison, écrans embarqués, etc.
- Appareils hybrides : pliables ou à double écran(ex. Samsung Galaxy Fold, Microsoft Surface Duo).
💡 Exemples concrets
Une application de messagerie n'aura pas le même comportement :
- Sur une smartwatch, elle affiche simplement les notifications. Sur certaines, l'utilisateur peur répondre par message prédéfini, par transcription textuelle via la voix ou par écriture manuscrite.
- Sur un smartphone, elle permet de rédiger et d'envoyer des messages.
- Sur une tablette, elle affiche la conversation et la liste des contacts en même temps.
🔀 Diversité des formats
La multiplication des formats impose aux concepteurs d'applications de penser adaptabilité. L'interface doit rester claire et utilisable quel que soit l'appareil. C'est ce qu'on appelle le design adaptatif ou responsive design.
🎯 Objectif : une application bien conçue doit "respirer" sur un grand écran et rester claires sur un petit.
🖥️ 1.3.2 Affichage, tailles et résolutions
L'un des défis majeurs du développement mobile résisde dans la variété des écrans. Deux téléphones peuvent avoir la même taille physique mais une densité de pixels très différente, ce qui modifie la netteté, la lisibilité et la perception visuelle.
📐 Les 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 lumineux affichés ( ex. 2532 x 1 170 pixels).
- Densité (ppi ou dpi) : nombre de pixels par pouce, influençant la netteté. (ex. 460 ppi).
- Pixel ratio : rapport entre pixels physique et pixels logiques utilisés par le système. (ex. iPhone Retina : 2x ou 3x).
📘 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 graphiques de manière proportionnelle et scalable.
📊 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, même avec une taille d'écran plus petite, à cause de la densité plus élevée.
🧠 Bonnes pratiques de conception
- Utiliser des valeurs relatives (ex:
em,dp,sp,%) plutôt que des pixels fixes. - Privilégiez les icônes vectorielles (SVG, Material Icons).
- Tester vos interfaces sur plusieurs densités d'écran.
- Préférez des textes lisibles : minimum 14-16px sur mobile
- Vérifiez les marges et espacements : trop petits = erreurs de saisie.
💬 Conseil : dans Android Studio ou Xcode, utilisez les simulateurs d'appareils pour vérifier la cohérence du rendu.
🔃 1.3.3 Orientation et adaptation de l'affichage
Les appareils mobiles permettent généralement deux orientations principales :
- Portrait (vertical) : lecture, navigation, messagerie.
- Paysage (horizontal) : vidéo, saisie de texte, tableaux de bord, jeux (majoritairement, bien qu'une tendance verticale existe aussi pour les smartphones). L'application doit être capable de s'adapter automatiquement à ces changements d'orientation.
🔄️ Rotation automatique
Lorsque l'utilisateur fait pivoter l'appareil, le système d'exploitation réorganise automatiquement les éléments selon les règles définies dans le design. Les développeurs peuvent choisir de :
- Verrouiller l'orientation (utile pour un jeu ou une vidéo).
- Autoriser l'adaptation dynamique (utile pour la lecture, les formulaires, etc.)
💡 Exemples concrets :
- YouTube : la vidéo bascule en plein écran lors de la rotation en paysage.
- Google Maps : l'interface s'adapte, mais conserve la position du menu principal.
- Jeux mobiles : orientation fixe pour garantir la jouabilité et le confort. Clash Royale est en portrait, PUBG Mobile en paysage.
🎨 Bonnes pratiques
- Concevez vos écrans avec des zones flexibles qui se redimensionnent automatiquement.
- Évitez les éléments fixes (coordonnées absolues).
- Testez la continuité visuelle lors du passage portrait ↔️ paysage.
- Utilisez des layouts responsives (ex:
Flexbox,Grid,ConstraintLayout).
💬 Exemple : Dans une application de calendrier, le mode portrait affiche la liste des événements, tandis que le mode paysage affiche la vue mensuelle complète.
👆 1.3.4 Méthodes de saisie et interactions
L'une des grandes particularités des appareils mobiles réside dans la diversité des modes d'interaction. Contrairement à un ordinateur, le mobile offre des moyens variés de communiquer avec le système : toucher, voix, gestes, stylet, et parfois même mouvements physiques.
✋ Le tactile : la norme dominante
L'écran tactile ets l'interface principale des appareils mobiles. Il permet à l'utilisateur d'interagir directement avec les éléments visuels, sans périphérique intermédiaire.
Les gestes les plus courants :
- Tap ➡️ toucher bref pour sélectionner.
- Double-tap ➡️ zoomer ou valider.
- Swipe ➡️ faire glisser un contenu (ex. galerie d'images ou naviguer)
- Long press ➡️ afficher des options supplémentaires / menu contextuel.
- Pinch / spread ➡️ zoomer en avant ou en arrière.
💡 Exemples concrets :
Dans une application de cartes, le "pinch" permet de zoomer tandis qu'un "swipe" déplace la vue.
🎯 Une bonne application reconnaît plusieurs gestes sans confusions et offre un feedback clair (vibration, son, animation)
🎙️ La saisie vocale et les assistants
Les interfaces vocales se développent grâce aux assistants intelligents comme Siri, Google Assistant ou Alexa. Elles permettent :
- La dictée vocale (ex. écrire un message sans taper).
- Les commandes vocales (ex. "ouvre YouTube", "mets un minuteur").
- L'analyse du langage naturel pour interagir plus naturellement
💡 Exemples concrets :
Dans google Maps, vous pouvez dire "itinéraire vers la maison" sans toucher l'écran.
⚠️ Limites
la voix est utile pour la rapidité, mais moins adapté aux environnements bruyants ou aux interactions nécessitant de la précision.
✒️ Le stylet et les entrées manuscrites
Certains appareils comme le Samsung Galaxy Note ou l'iPad Pro, intègrent un stylet. Le stylet permet
- Une saisie manuscrite précise.
- Le dessin et la retouche photo.
- Une interaction plus fine (sélection d'un texte, surlignage, annotation).
💡 Exemples concrets :
Dans une application de prise de notes, le stylet peut transformer une écriture manuscrite en texte numérique.
🤳 Autres méthodes d'interaction
- Gestes aériens : reconnaissance des mouvements sans contact (utilisé dans certains Samsung). ex : passer la main pour faire défiler.
- Capteurs de proximité : activation automatique d'actions en fonction de la distance (ex. éteindre l'écran lorsqu'on approche le téléphone de l'oreille).
- Retour haptique : vibrations subtile qui confirme une action. (ex. vibration lorsqu'on met le téléphone en mode silencieux via le bouton latéral).
💬 Ces interactions rendent l'expérience plus naturelle, mais nécessitent une conception rigoureuse pour éviter les erreurs de manipulation.
🚨 1.3.5 Capteurs et contextes d'utilisation
Les appareils mobiles sont de véritables *boîtes à capteurs, capables de détecter le mouvement, la lumière, la localisation, et même les signes biométriques. Ces capteurs enrichissent les applications et permettent des expériences contextuelles et personnalisées.
📍 Capteurs courants
| Type de capteur | Fonction | Exemple d’utilisation |
|---|---|---|
| GPS | Localiser l’utilisateur | Applications de navigation, météo, livraison |
| Accéléromètre | Détecter l’inclinaison et le mouvement | Compteur de pas, rotation d’écran |
| Gyroscope | Mesurer la rotation | Jeux de course, réalité augmentée |
| Capteur de proximité | Détecter la présence | Éteindre l’écran pendant un appel |
| Capteur de lumière | Ajuster la luminosité | Économie d’énergie, confort visuel |
| Microphone / caméra | Capturer son et image | Appels, reconnaissance vocale, scan QR |
| Capteurs biométriques | Authentification | Empreinte digitale, reconnaissance faciale |
⚙️ Combiner les capteurs
Certaines applications utilisent plusieurs capteurs pour offrir une expérience plus riche et plus fluide.
💡 Exemple concret :
Si on prend l'exemple de Pokemon Go, l'application utilise le GPS pour localiser le joueur, l'accéléromètre pour détecter les mouvements et s'assurer que le joueur est en train de marcher, la caméra pour afficher les Pokémon en réalité augmentée et le gyroscope pour ajuster l'affichage en fonction de 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 les situations réelles dans lesquelles les utilisateurs interagiront avec leur appareil.
🌻 Contexte environnemental
- Lumière variable : l'écran doit rester lisible au soleil.
- Bruit ambiant : la saisie vocale peut échouer.
- Mouvements : l'utilisateur peut marcher, conduire (👀) ou être dans les transports.
💬 Exemple : une application GPS doit rester utilisable d'une seule main, même en mouvement.
🪫 Contraintes techniques
- Autonomie limitée : une app énergivore sera vite désinstallée.
- Performance : 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.
🤓 Facteurs humains
- Fatigue visuelle : éviter les interfaces trop lumineuses et surchargées
- Taille et précision du doigt : prévoir de grandes zones tactiles (minimum 48x48 pixels).
- 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 Samsung Galaxy S25).
➡️ Quelles différences techniques (écran, densité, capteurs) influencent le design d'une même application ?
🎨 Exercice 2 - Orientation et mise en page
Créer une maquette simple d'un écran d'application
➡️ Comment les éléments se réorganisent-ils entre portrait et paysage ?
🔗 1.3.8 Références et ressources
📗 Ressource complémentaire :
https://uxdesign.cc/three-simple-rules-of-good-touch-design-4590e0dd1979