Alternative UX à Modal Windows sur un appareil mobile
Je recherche l'alternative UX recommandée à Windows modal sur un appareil mobile.
Les fenêtres modales sont utiles dans des environnements d'écran plus grands, car elles permettent à l'utilisateur d'interagir avec le programme sans interrompre le flux de travail dans la fenêtre principale. La fenêtre principale peut être grisée ou grisée, mais elle est toujours visible.
De toute évidence, les fenêtres modales simples sont toujours utilisables sur un appareil mobile tant que le contenu du modal est très petit (peu de texte, généralement pas plus de 2 boutons). Cependant, des modaux plus grands ou des modaux avec un contenu dynamique peuvent entraîner des problèmes sur les petits écrans des appareils mobiles.
Je recherche un bon modèle de conception pour remplacer Modal Windows sur les appareils mobiles qui est destiné à être utilisé sur une plate-forme orientée Web. Ainsi, par exemple, une bonne alternative aux bootstrap modals sur mobiles. Idéalement, un modèle qui, espérons-le, ne perd aucun des avantages d'une fenêtre modale sur un écran plus grand.
L'affichage d'une fenêtre modale pleine page sur les appareils mobiles signifie que les utilisateurs peuvent penser à tort qu'ils ont été redirigés vers une nouvelle page .
Les fenêtres modales sont généralement des boîtes qui contiennent des informations pertinentes pour la page actuelle, mais qui n'obligent pas l'utilisateur à quitter la page sur laquelle il se trouve pour afficher ces informations.
Compte tenu de ces faits, je pense qu'il serait préférable de remplacer les fenêtres modales par des fenêtres de légende sur les mobiles car une fenêtre modale se trouve au-dessus d'une autre fenêtre, la les informations affichées sont déjà plus petites - sur un écran mobile de 3 pouces, cela ne fonctionne tout simplement pas.
Quelque chose que je suis allé dans le passé est de reprendre tout l'écran pour les modaux. Nous avons construit un modal réactif de sorte que sur le bureau, vous voyez le modal dans une superposition plus traditionnelle, mais sur des fenêtres plus petites, le contenu du modal prend la place de tout l'écran.
Quelque chose comme l'exemple 'JUST ME' ici: https://tympanus.net/Development/ModalWindowEffects/
Voici une maquette rapide pour illustrer. Page Web à gauche, vue modale à droite. Vous voyez, il est pris en charge sur l'ensemble du site, la navigation et tout. L'utilisateur doit sélectionner "continuer" pour ignorer le modal (ou tout ce que vous demandez à l'utilisateur d'en faire).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le but d'un modal est de verrouiller l'utilisateur hors de la page derrière afin qu'il doive interagir avec le modal pour continuer. Il n'y a pas d'exigence pour ce type de modaux pour que l'utilisateur puisse toujours voir le contenu sur la page derrière, donc en gardant cela à l'esprit, pourquoi aurait-il besoin de le voir? Si vous introduisez un effet de transition/animation pour illustrer que l'utilisateur n'a pas été réellement retiré de cette page, cette approche devrait bien fonctionner.
Quelle quantité de contenu un modal devrait-il vraiment avoir?
Je pense que les gens s'emballent un peu avec leur utilisation, car ils sont si faciles, mais ils ne remplacent pas une bonne stratégie de contenu et une bonne architecture de l'information. Quel type de contenu mettez-vous dans les modaux? Peut-être que le contenu doit être réexaminé et intégré à l'application d'une autre manière. Si vous avez trop de contenu pour aller dans un modal, décomposez le contenu et livrez-le à l'utilisateur en morceaux.
Il existe cependant de bonnes utilisations pour les modaux - pour de petits contenus pertinents. Sur mobile, j'ai trouvé au moins en relation avec le Web (pas les applications/natives) entrant/sortant des modaux, les modaux déclenchant des barres de défilement ou un défilement invisible quand ils ne devraient pas, etc. peuvent causer de graves problèmes de convivialité.
Un panneau en expansion qui pousse vers le haut ou vers le bas pour révéler plus de contenu en ligne pourrait être une autre façon d'afficher du contenu de taille modale à la demande. Ils peuvent être pleine largeur ou simplement prendre la largeur du conteneur.
Il semble que vous ayez des fenêtres modales assez complexes sur votre bureau.
Étant donné que vous ne pouvez fournir autant d'informations à l'écran qu'à un moment donné, vous pouvez envisager steppers verticaux .
Comme décrit dans cet article
https://medium.com/@jivanshr/drawer-new-way-to-reveal-content-e3b32722b21d
Modals définit un contexte/environnement complètement nouveau dans lequel l'utilisateur a des chances de faire face à une charge plus congénitale pour s'adapter et craint également de perdre le contexte précédent. L'idée est très similaire à celle du tiroir de navigation de Android juste sans superpositions. Ici, vous pouvez voir le contenu précédent être déplacé. Un autre avantage de l'interface utilisateur du tiroir est une expérience cohérente sur mobile et sur ordinateur.
Je ne dis pas que le modal doit mourir, je veux juste que tout le monde utilise le modal pour un petit morceau de contenu. C'est tout.