web-dev-qa-db-fra.com

La meilleure façon de présenter les bascules pour le partage sur d'autres réseaux sociaux?

J'essaie de trouver un moyen d'afficher les bascules pour savoir si vous souhaitez partager votre statut sur Facebook, Twitter ou Tumblr. Ceci est destiné à une application Web.

J'ai regardé quelques autres sites pour voir comment ils le font:

Foursquare toggles
L'application iPhone de Foursquare a une astucieuse petite icône qui se désactive quand on clique dessus et active quand on clique de nouveau.

Hoot Suite social toggles
Hoot Suite affiche les avatars de tous mes réseaux sociaux, puis me permet de cliquer dessus pour activer ou désactiver le partage. C'est assez clair à utiliser, mais prend trop de place pour être implémenté dans ma conception.

LinkedIn social toggles
LinkedIn utilise des icônes modifiées pour les réseaux sociaux. Ainsi, au lieu d'utiliser les icônes carrées aux coins arrondis, il utilise un oiseau bleu pour Twitter par exemple et met une case à côté,

Social toggles mockup

Il s'agit d'un faux modèle de profil sur lequel je travaille. Ce site Web permet aux utilisateurs de se connecter à différents réseaux sociaux, puis les affiche sous forme d'icônes sur le profil de l'utilisateur. Disons que si je visite le profil de quelqu'un, je peux cliquer sur l'icône Facebook pour être redirigé vers son profil Facebook.

J'essaie également de mettre en œuvre la possibilité de partager ou de ne pas partager en utilisant ces réseaux sociaux. J'avais auparavant des cases à cocher, avec du texte comme "Partager sur Facebook" juste à côté. Mais ce serait trop de monde si je veux mettre en 3 options.

Si j'utilise les icônes carrées pour basculer, elles ressembleront trop aux icônes à côté de l'avatar et dérouteront les utilisateurs, d'où l'idée des icônes circulaires. Mais est-ce encore trop déroutant? Existe-t-il un meilleur moyen de mettre en œuvre cela qui sera plus intuitif?

3
hidrees

Vous avez peut-être été d'accord avec les cases à cocher, mais vous n'avez pas besoin de longues étiquettes à côté de chacune - peut-être juste une étiquette qui s'applique à tous - ainsi que des info-bulles sur les logos (et sur le partage Word pour faire bonne mesure!).

Par exemple, l'image ci-dessous est une maquette d'une façon de le faire.

enter image description here

1
Roger Attrill

Ce sont deux excellents exemples. J'aime l'exécution de Foursquare (en général), mais ce n'est pas très intuitif. De nombreux utilisateurs ignorent que le fait de cliquer sur l'icône "Amis" coupe complètement le chèque.

Le traitement de HootSuite est simple et extrêmement intuitif. Le message d'erreur qui s'affiche lorsqu'aucun réseau n'est vérifié est également très utile et n'est pas condescendant. Si vous pouvez utiliser la méthode LinkedIn (en termes de taille), mais la fonctionnalité HootSuite ou LinkedIn, je pense que vous aurez un gagnant.

En tenant compte de votre défi d'espacement et en essayant d'éviter toute confusion, je me souviens de certaines exécutions sur iPad (je ne me souviens pas des applications à part) où le ou les réseaux sélectionnés s'affichent différemment lorsqu'ils sont sélectionnés. C'est comme la dernière image que vous avez présentée. Une fois que quelqu'un clique sur l'icône, il indique visuellement qu'elle est active et soutient les efforts d'apprentissage. Je pense que cela peut résoudre les problèmes de confusion et d'espacement.

Lorsque je me souviendrai des applications auxquelles je fais référence, je vous le ferai savoir.

J'espère que ça aide.

1
darrenhood