Repenser la fonctionnalité de "vol stationnaire" en pensant aux écrans tactiles
Prenons la page suivante comme exemple (éventuellement dans Firefox uniquement):
Lorsque vous survolez chaque résultat de recherche, un bouton "+ Ajouter à Firefox" apparaît.
Cependant, cette idée du bouton apparaissant lors du survol ne s'applique pas aux utilisateurs d'écran tactile. Comment cette fonctionnalité pourrait-elle être retravaillée pour l'écran tactile?
Le bouton peut toujours être affiché, quel que soit le survol. Cependant, vous auriez alors une longue file de boutons identiques "+ Ajouter à Firefox" le long de la page.
Luke Wroblewski couvre ce sujet dans son livre Mobile First
Il souligne l'importance de la transition de vos menus en survol vers le mobile en utilisant la solution la plus appropriée pour votre site:
... toutes les actions qui reposent sur le survol de la souris dans nos expériences Web de bureau doivent être repensées - et c'est une bonne chose. De nombreuses utilisations des actions de survol sur le Web supposent trop.
Remplacer par des actions directes
... prendre des actions et des informations à partir des menus en survol et les placer directement sur l'écran pourrait être la bonne approche. Il s'agit de la solution utilisée par Twitter pour leur expérience Web mobile d'origine.
Ici, il fait référence au favori, au retweet et à la réponse qui sont visibles à tout moment via un bouton iconique au lieu d'un bouton survolé.
Remplacer par des menus à la pression
... ils pourraient être transformés en menus à la demande par défaut. Cela peut être utile si les actions ou le contenu du menu survol sont une prochaine étape logique pour les utilisateurs. Mais cela pourrait être ennuyeux si le contenu du menu survol introduit une étape supplémentaire inutile qui gêne le progrès des gens.
Remplacer par une page séparée
Si le contenu d'un survol est étendu, il peut être préférable de déplacer ce qui se trouve dans le menu du survol vers un écran séparé sur mobile. C'est l'approche utilisée par Barnes & Noble
Ici, il fait référence à un panneau de survol avec des informations sur le produit et un bouton d'ajout au panier qui se déplace vers une page distincte sur la version mobile (et qui permet l'ajout d'options supplémentaires dans le processus)
Assurez-vous d'être couvert par le survol
Quelle que soit l'approche qui vous convient, assurez-vous simplement que lorsque vous passez en mode mobile, vos survols sont couverts.
Faites diviser l'élément de liste. Quelque chose comme une étiquette à gauche et un bouton à droite.
C'est essentiellement ce que vous avez déjà proposé. Voici un exemple à quoi cela pourrait ressembler.
Il n'y a tout simplement pas de remplacement en vol stationnaire pour les appareils tactiles. Du moins pas pour tous les types d'appareils tactiles.
Le client Twitter que j'utilise sur Android s'appelle Plume. Il gère très bien le remplacement du survol:
Dans une liste de choses (tweets ou addons Firefox, peu importe), l'élément de liste entier invite à taper. Appuyer sur fait glisser vers le bas un menu avec des actions qui peuvent être prises sur l'entrée sélectionnée. Simple et il fait bon usage de l'écran immobilier.
Strictement en tant qu'utilisateur, les personnes qui ont remplacé "planer" par "appui long" m'ont rendu la vie plus facile.
Lorsqu'il est présenté avec un élément d'action sur un écran tactile, j'ai essentiellement un choix par défaut (tap) qui fonctionne comme le font habituellement les liens, ou une action non par défaut (appui long). Cela me semble intuitif parce que lorsque j'appuie longuement sur des choses, je pense généralement à ce que je vais faire, de sorte que 600 ms de temps me permettent de me préparer à ce que je sais venir.
Supposons que vous ayez une liste d'objets sur lesquels vous pouvez effectuer un ensemble d'actions. Une façon d'effectuer ces actions est via le modèle nom-verbe (c'est-à-dire que vous sélectionnez d'abord quoi pour exécuter l'action, puis quoi action à effectuer). C'est ce qui se fait dans l'exemple lié: vous sélectionnez d'abord le module complémentaire (via le survol), puis l'action (installer).
Une façon d'obtenir une assistance tactile est d'imiter ce que, par exemple. phpMyAdmin fait: rendre les objets sélectionnables et fournir un ensemble de boutons (un pour chaque action):
(Les actions sont disponibles après le texte "Avec sélectionné:". On pourrait utiliser des boutons radio si un seul objet peut être sélectionné.)
Une autre solution consiste à utiliser drag'n'drop car cela fonctionne à la fois avec une souris et un écran tactile (avec la restriction évidente de l'interaction clavier uniquement - devinez vous ne pouvez pas tout avoir.)
Afin de préserver l'interaction nom-verbe, un nom (objet) doit être déplaçable (largable sur un verbe (une action)):
[List item 1] +-------------------+
[List item 2] | Drag onto action: |
[List item 3] | [Install] |
[List item 4] | [Other action] |
[List item 5] +-------------------+
[List item …]
[List item N]
Les cibles de dépôt (la case "Glisser sur l'action") doivent conserver leur position sur la page pendant le défilement (position: fixed). C'est à peu près comment canv.as a implémenté la fonctionnalité "stickers" (nom = autocollant, verbe = message cible upvote):
Vous pouvez afficher le bouton "+ Ajouter à Firefox" en gris clair, et lorsque vous appuyez dessus, coloriez-le et passez à la page suivante.
Ou vous pouvez travailler avec deux robinets. Lorsque vous appuyez sur un élément de la liste (n'importe où dans la zone de liste), le bouton "+ Ajouter à Firefox" prend sa couleur, puis vous pouvez le tabuler une deuxième fois pour passer à la page suivante.
De nos jours, vous pouvez utiliser des requêtes multimédias pour changer de style à la volée lorsque la fenêtre change. Exemple de site régulier:
<style>
a { color: #ffffff; /*Blends into the background for this example*/ }
a:hover { color: #000000; /*Shows up on Hover*/
</style>
Bien sûr, cela n'apparaîtra jamais à l'utilisateur mobile mais ...
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)
{
a { color: #000000; text-decoration: underline; }
}
Désormais, lorsque la fenêtre est petite, les liens s'affichent et sont soulignés pour que l'utilisateur puisse les voir.
J'utilise ceci sur un site où je n'ai que de petites parties du menu visibles pour économiser de l'espace. En survol, les liens s'affichent. Pour les utilisateurs mobiles, cela ne fonctionne pas, j'utilise donc des requêtes multimédias pour les modifier tous afin de bloquer les éléments et les mettre en haut de l'écran.
Pour les éléments de menu enfant, je m'assure toujours que les éléments de niveau supérieur vont à une page et ne sont pas des éléments factices. C'est là que beaucoup de gens ont des problèmes parce qu'ils voulaient tous suivre une tendance à ce que leurs liens parent ne soient que des espaces réservés. ils avaient l'habitude de combattre le: hover psuedo pour IE6 juste pour que leurs espaces réservés flottent correctement. Maintenant, ils doivent tous repenser cela. Il vous suffit donc de transformer vos éléments de niveau supérieur en pages de portail pour qu'un utilisateur puisse accéder aux enfants une fois arrivés. C'est une page supplémentaire à télécharger pour l'utilisateur, mais si vous avez des centaines de pages, cela pourrait être votre seule option.