Les utilisateurs devraient-ils être contraints à une conception réactive (sans possibilité de retrait)?
Il n'y a rien de pire que d'être redirigé automatiquement vers une version mobile d'un site, et de ne pas avoir (ou de ne pas trouver facilement) un lien "voir le site normal". Ce n'est pas seulement que le site mobile est une version réduite du site normal, c'est la méconnaissance - la soudaine 1-dimensionnalité de ce qui était autrefois une page en 2 dimensions et la quantité obscène de défilement requise. La carte mentale précédente du site n'est plus exacte.
Sur le site du Boston Globe (l'exemple brillant souvent cité de conception réactive), je trouve la quantité de défilement extrêmement douloureuse si je ne cherche pas à lire de manière linéaire. Avec l'affichage de la rétine sur un iPhone, la version de bureau serait discernable et immédiatement navigable avec un tap-zoom rapide à n'importe quel emplacement de la page. Comme pour la plupart des conceptions réactives, l'option "Afficher le site normal" n'est pas disponible.
Les utilisateurs devraient-ils être contraints à une conception réactive? Devraient-ils pouvoir basculer s'ils sont désactivés pour "afficher le site normal"?
Vous trouverez ci-dessous les superpositions de fenêtres estimées d'un iPhone sur le site du Boston Globe à chaque vue:
=== Mise à jour 2012-09-12 ===
Certains prototypes ont émergé récemment:
Oui, vous devez autoriser les utilisateurs à y échapper.
La refonte du Boston Globe a été gérée par Ethan Marcotte, qui a écrit le livre sur le responsive design. Combiné avec la nature CMS du site, il est parfait pour les problèmes de déployabilité, d'utilisabilité et de flexibilité avec des conceptions réactives.
Chaque fenêtre d'affichage doit transformer le contenu pour promouvoir, rétrograder et généralement réorganiser le contenu. Si vous le concevez (et le testez) correctement, vous pourriez répondre aux besoins de la majorité de vos utilisateurs. Pour tout le monde, je suggère de passer des requêtes médiatiques à une plus grande (quelque part entre min-width: 1000px et 1200px). Ne pas activer cette option revient à supposer que vous offrez tout ce que votre site normal a dans un format plus petit et dans des conceptions réactives la plupart, ce n'est vraiment pas le cas.
Pour les utilisateurs de bureau visitant sur mobile, ils sont absolument verrouillés dans la fenêtre sans recours; cela peut être intrinsèquement frustrant pour certains utilisateurs. Il peut y avoir d'autres problèmes tels que les appareils plus récents qui affichent la mauvaise fenêtre ou qui n'ont généralement pas été couverts par les requêtes multimédias, ce qui rend la conception sous-optimale - dans ce cas, revenez au rendu de la page par l'appareil natif.
Modifier (13/08/2012)
J'ai parlé avec Ethan de cette question, et je pense que nous étions d'accord. De bonnes conceptions réactives ne doivent pas couper les fonctionnalités ou le contenu de la fenêtre "de bureau". Avec l'introduction de frameworks tels que Bootstrap, je pense que le problème que nous voyons concerne les sites réactifs très mal réalisés qui cachent certaines fonctionnalités (comme les menus de navigation) parce que les concepteurs/développeurs n'ont pas abordé la conception réactive de la manière idéale.
De plus, de nouveaux appareils, navigateurs et même PPI/hautes résolutions peuvent rendre un site Web réactif de manières étranges. Ces instances devraient être rares, car les meilleurs sites réactifs ne sont pas conçus pour les appareils/points d'arrêt mais plutôt N'IMPORTE QUEL canevas, mais permettre aux utilisateurs de passer à 960 pixels ou plus est une bonne solution de rechange.
Jacob Neilson recommande spécifiquement d'autoriser les utilisateurs mobiles à désactiver la version mobile quand ils en ont besoin.
Mais il est également important de noter qu'il s'agit d'un exemple d'une adaptation incorrecte du site à un appareil. Votre téléphone mobile n'est pas le même que tous les autres téléphones mobiles, et si suffisamment d'efforts ont été dépensés, il est probable qu'une mise en page intermédiaire ... pas le site complet, pas le simple site mobile, mais quelque chose qui mélange les deux .. offrirait une meilleure expérience. Le problème est que les mises en page coûtent de l'argent, et à un moment donné la valeur reçue ne vaut pas l'investissement.
Le marché mobile évolue à un rythme si rapide qu'il est impossible de concevoir pour toutes les différentes configurations. Il y a simplement trop de variables en jeu pour construire une matrice de conception pour répondre à toutes les combinaisons éventuellement différentes.
Pendant que vous utilisez un iPhone avec un écran de 3,5 ", un autre visiteur peut avoir un 4,6" avec un écran 720p. Sont-ils mobiles ou de bureau? En fonction de la résolution de l'écran, il s'agit d'un ordinateur de bureau, mais en fonction de la taille de l'écran, ils sont mobiles. C'est juste aujourd'hui, et demain? Le Samsung Note a un écran de 5,7 "à 720p, alors nous pourrions regarder l'évolution du marché des tablettes. Microsoft Windows 8 présentera également toute une gamme d'ordinateurs portables avec écrans tactiles.
Voyons d'abord ce qu'est une mise en page réactive. C'est un moyen de réduire une mise en page de sa forme prévue pour mieux afficher le contenu sans avoir besoin de zoomer, et de le faire sans que le concepteur n'ait à trop compenser pendant la phase de conception. Il fait suite à l'histoire du "build it once, run it partout" du développement logiciel.
Le problème avec la conception réactive est qu'elle est basée sur les hypothèses suivantes.
- les propriétés des supports (taille d'écran, orientations) peuvent être généralisées sur plusieurs appareils.
- la pratique d'empiler des éléments pour les réorganiser sera suffisante.
- l'objectif principal de la conception était le bureau, la mise en page mobile étant automatisée après coup.
Donc, avec tout cela dit. La conception réactive n'est qu'un outil et peut fonctionner dans certains cas, mais pas dans tous. Il est là, pour changer la disposition pour accueillir un appareil qui ne présente pas la conception originale de manière efficace. Ce n'est pas une norme et vous ne devez pas supposer que l'appareil mobile a besoin d'aide pour rendre la page.
Pourquoi pas juste une simple bascule pour ajouter, supprimer ou changer des feuilles de style, même si je suis sûr qu'il pourrait y avoir des inconvénients à cette approche.
Essayez de redimensionner la fenêtre du navigateur et cliquez sur les boutons bascule de cette démo.
Oui, vous ne devez jamais forcer un utilisateur à concevoir des modèles réactifs. Surtout, l'industrie du commerce électronique le sait assez bien. De nombreux utilisateurs qui ont constaté que les sites Web mobiles qu'ils utilisaient contenaient moins de fonctionnalités que celui avec la version de bureau étaient très scandalisés. En conséquence, de nombreux sites Web de commerce électronique offrent un moyen de revenir aux anciennes versions de bureau.
Il est également utile de mentionner ici que je trouve les sites Web réactifs incroyables, surtout lorsque je suis en déplacement. Parce qu'ils sont si clairs et il y a tellement moins d'encombrement, grâce auquel je peux tout voir si clairement sur mon combiné mobile tremblant.
Source: http://www.sitepoint.com/disable-responsive-design-option/
J'espère que cela deviendra une réponse plutôt que de me balader dans ma tête ... mais je vais essayer ...
L'iPhone était vraiment le premier appareil mobile (au moins, un appareil largement distribué) conçu avec l'intention de voir `` le Web normal '' plutôt que le WAP simplifié et d'autres mini sites Web de type mobile.
Steve Jobs a conçu un appareil qui facilite considérablement le zoom avant et arrière sur un document plus grand pour voir tout ce que vous voulez voir. C'était super!
Mais ... d'autres appareils n'offraient pas presque ce type de flexibilité (appareils Nokia, BlackBerry, etc.) et beaucoup de concepteurs n'étaient tout simplement pas d'accord avec cela.
C'est ainsi qu'est venu le design réactif. Ce qui est génial, car il vous permet de concevoir un site Web unique et de le faire fonctionner comme il se doit sur toutes sortes d'appareils.
Hélas, comme vous le faites remarquer, ce n'est pas toujours l'expérience que souhaite l'utilisateur final. J'ai tendance à être d'accord.
Je pense que deux choses en font vraiment une question importante:
- écran rétine (et écrans haute densité similaires)
- ces appareils entre un téléphone et une tablette/pad (les petits pads/gros téléphones)
Dans les deux cas, il est tout à fait plausible qu'une personne veuille exploiter les pixels supplémentaires dont elle dispose et voir le "site complet" comme un document zoomable plutôt que comme un document linéaire de grande taille.
Alors, euh ... une réponse ... euh: OUI! Les utilisateurs devraient pouvoir basculer entre les deux.
Bien sûr, cela peut encore être accompli avec votre site Web réactif unique. La clé est de permettre à un utilisateur de dire au site que même s'il le visualise sur un écran de x pixels, il aimerait voir la mise en page pleine pixels.
Je pense que cela n'est pas nécessaire si le contenu du site est présenté entièrement et correctement à l'utilisateur. Il s'agit d'être centré sur le contenu et de l'afficher correctement pour chaque vue. Si le contenu et/ou l'organisation du site ne s'y prête pas bien, une conception entièrement réactive n'est certainement pas le bon choix en premier lieu. Une approche complète ou éventuellement hybride serait alors la plus applicable.
Pour info, voici un exemple de mise en place d'une vue en taille réelle pour un site RWD par Chris Morata.
2 points.
1) Si je suis designer et que je conçois un site spécifiquement pour un appareil mobile, vous l'acceptez. Si je crée un site spécifiquement pour un appareil de 7 "ou 15", vous l'acceptez. Pourquoi est-ce mauvais si je conçois toutes ces situations sur un seul site?
2) Les gens surfent sur leur téléphone lorsqu'ils sont en déplacement, généralement occupés, souvent entre deux choses. Si je vais sur le site du Boston Globe sur mon téléphone, je veux moins de contenu que tout cela. Je veux voir les meilleures histoires, dans une seule colonne. Le zoom à deux doigts est un cauchemar UX. Oui, je devrais pouvoir accéder au site complet - si je le souhaite. C'est un site mobile - j'ai du mal à trouver une raison de ne pas cibler des moniteurs de 7 "ou 50" avec un design réactif, même s'il n'y a aucun moyen de voir le "site complet" qui, comme indiqué précédemment, ne le fait vraiment pas Veut dire n `importe quoi.
Question très intéressante. Mais je voudrais tourner la question à l'envers: quand un aperçu général, non lisible et zoomable serait-il une aide à la navigation dans le contenu?
C'est exactement comme le zoom cognitif dans Windows 8, où vous pouvez faire un zoom arrière sur la vue des tuiles Metro pour réorganiser vos tuiles. C'est ne vidéo d'une démo ici (recherchez-le vers 4h05). Si les utilisateurs obtiennent suffisamment d'informations à partir d'un aperçu aussi réduit pour prendre des décisions judicieuses, cela pourrait être le cas.
En tant que tel, je pense que ce problème va plus loin qu'une simple discussion de conception réactive oui/non. Je pense que nous devrions expérimenter davantage avec ces capacités de zoom afin de découvrir ce qui fonctionne et quand.
J'ai bult un prototype site réactif qui a fourni la fonctionnalité "aller au site complet". Malheureusement, je ne peux pas le partager mais je peux partager les principes généraux.
Le CSS est construit en utilisant Less, ce qui signifie que le contenu des requêtes multimédias peut facilement être analysé dans une deuxième feuille de style qui applique efficacement les mêmes règles que la requête multimédia la plus large. Cette deuxième feuille de style définit également des largeurs fixes pour certains des éléments d'emballage pour épingler le site à une présentation "de bureau".
Le bouton "aller au site complet" déclenche la définition d'un cookie de session qui est ensuite lu par le code côté serveur qui supprime la balise de la fenêtre d'affichage, échange la source du CSS réactif au CSS de largeur fixe et ajoute une classe supplémentaire de "large" à l'étiquette du corps pour fournir un crochet pour certains ajustements de style. Le bouton `` revenir au site optimisé '' déclenche la suppression du cookie et rétablit la fenêtre d'affichage et la feuille de style réactive.
Fonctionnellement, cela fonctionne bien, mais jusqu'à présent, dans tous nos tests utilisateurs, personne ne l'a utilisé. Il sera intéressant de voir l'analyse à ce sujet lorsqu'elle sera rendue publique.
Cela devient de plus en plus problématique au fil des années. Une conception et des décisions scandaleusement mauvaises persistent. De nombreux développeurs de moins de 30 ans ne réalisent pas ce que cela fait pour les personnes atteintes de dégénérescence maculaire. Si les gens se plaignent, oui, vous devez agir, sinon des poursuites pourraient suivre. La solution de contournement standard consiste à utiliser RDP/VNC sur un bureau (réel ou VM) et à naviguer sur le bureau, en fenêtrant l'écran du bureau. Je ne veux jamais voir un site mobile sauf s'il est très très simple ou s'il s'agit d'une application. La gestion de la couche de présentation est la tâche de l'appareil. Zoomer sur un menu pour le faire disparaître est très frustrant. Il ne doit jamais apparaître que vous agissez délibérément pour empêcher des personnes d'exercer leur droit de ne pas vous payer par exemple.