LifeDesign Learning Zone

Communication

De wikiducamp
Sauter à la navigation Sauter à la recherche

Cette page a démarré sur iwc:communication et migrera sur iwc:communication-fr pour façonner un premier essai de carte de visite en ligne.



La communication dans le contexte de l'indieweb fait référence à l'utilisation de votre site personnel comme un point de départ et un moyen potentiel pour que les personnes vous contactent.

Comment

Faites de votre page d'accueil un écran d'accueil amical

Ajoutez un icône pour votre site personnel afin que les autres puissent ajouter votre site à leurs écrans d'accueil sur leurs appareils.

Ajouter une carte de contact

Placez une h-card sur votre page d'accueil avec des liens vers les moyens avec lesquels vous souhaitez être contacté.e, dans votre ordre de préférence.

Ajouter une interface de contact

Posez cette h-card sur une page /contact séparée sur votre site Web, par exemple sur vous.exemple.com/contact avec :

  1. des icônes facilement reconnaissables/cliquables pour chaque lien vers un moyen de vous contacter.
  2. En option : montrer conditionnellement/cacher les moyens de vous contacter en fonction de :
  3. * le navigateur du terminal / OS
  4. * Votre heure de la journée / interruptibilité

Pour avoir des instructions de balisage détaillées, voir :

Pour des exemples, voir en-dessous.

Pourquoi

Voir :

Exemples IndieWeb

Les membres de la communauté IndieWeb faisant ça

Tantek

Tantek Çelik expérimente un prototype sur tantek.com/contact depuis le 2014-11-18 (et précédemment contact.html depuis 2014-06 lors de l'IndieWebCamp 2014)
  • affichage conditionnel du bouton Facetime seulement pour iOS et MacOS (en date du 2014-10-11 à IndieWebCamp Cambridge)
  • instruction menu déroulant "Add to Homescreen" lors du premier chargement (en date du 2014-10-29 à W3C TPAC - vérifiée sur l'iPad d'Modèle:Hober). Beaucoup de violon, mais voici le code utilisant la bibliothèque "Add to Home Screen" de Matteo qui fonctionnait :

    <script src="/addtohome.min.js"></script> <script> var addtohome = addToHomescreen({ maxDisplayCount: 1, detectHomescreen: "hash" }); </script>

Tim Owens

Tim Owens a réglé une belle page de comm indie sur http://timowens.io/contact/ depuis le 2014-10-11 (à IndieWebCamp Cambridge) :

  • affiche une instruction animée "Add to Homescreen" en menu déroulant lors du premier chargement.

Précédents exemples

Ben Werdmuller

Ben Werdmuller utilisait des icônes pour faire un lien vers un petit ensemble pratique de moyens de contacts sur sa page d'accueil werd.io. (2014-...-...?)

Projets

Lets Talk

Let's Talk est un script utilisateur qui affiche les h-cards dans un format standard. Quand vous allez sur le site web de quelqu'un, Let’s Talk vous présente en un coup d'oeil comment les contacter et quelles méthodes de contact ils préfèrent. Voir https://snarfed.org/2014-03-10_lets-talk-userscript pour plus de détails.

Brainstorming

UI trois boutons

Idéalement une UI de contact indieweb (par ex. la page /contact de quelqu'un) devrait avoir trois boutons :

[txt] [call] [video]

(screenshot/maquette demandée !)

Peut-être activée/désactivée selon la connexion, l'heure de la journée, le statut du sommeil, etc.

Les trois boutons se comporteraient comme suit :

bouton Txt

[txt] button -> révèle une UI d'entrée de message texte

(Connexion) (s'il n'est pas déjà connecté avec indieauth)
[ aire de message texte ]
(Envoyer)

(screenshot/maquette demandés !)

Cliquer le bouton (Envoyer) devrait :

Au minimum :

    1. Soumettre le message au serveur Indie Web du destinataire
    2. Le serveur IndieWeb du destinataire enverrait un notification push vers les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).

Mieux (avantage : le site de l'expéditeur conserve une copie du message)

    1. webaction pour envoyer un message direct
    2. géré par le gestionnaire indie-config de l'expéditeur déjà enregistré
    3. le propre site de l'expéditeur affiche une UI de confirmation en popup pour envoyer ce message au destinataire
    4. Le site de l'expéditeur enregistre le message à un permalien privé
    5. Et envoie un message privé IndieWeb à partir de son site vers le site du destinataire
    6. Le site web du destinataire enregistre une copie du message privé sur un permalien privé
    7. Le serveur IndieWeb du destinataire envoie une notification push sur les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).

Même mieux (avantage : pas besoin d'UI de confirmation supplémentaire en popup)

    1. ont déjà obtenu l’autorisation Micropub de l'expéditeur lors de la connexion dans le temps
    2. utilise Micropub pour publier en privé le message comme un message sortant privé sur le site Web de l'expéditeur
    3. le site de l'expéditeur enregistre le message sur un permalien privé
    4. et envoie un message privé IndieWeb de son site vers le site du destinataire
    5. le site Web du destinataire enregistre une copie du message privé sur un permalien privé
    6. le serveur de IndieWeb du destinataire envoie une notification push vers les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).

Par conséquent on peut vous texted sans même quitter le web, ou selon le site/intermédiaire/service/système d’adressage tiers.

Repli :

  • Sans IndieAuth connectez-vous, repliez vers une page de services existants
    • SMS, FB Messenger, Gtalk, email, Twitter DM

Boutons appel et vidéo

[call] + [video] -> initier un appel WebRTC (par ex. Firefox Hello) avec de la voix seule ou vidéo + voix selon

  • supposant que le navigateur de votre client supporte ça
    • si non, il peut se replier vers une page de services existants
      • FaceTime, Skype, etc.

Idéalement, le mécanisme pour un appel audio pourrait permettre à l'appelant et/ou l’appelé à faire un opt-in pour permettre la vidéo, et si les deux ont fait, l'appel audio serait mis à niveau vers audio + vidéo.

URLs de redirection

Ce pourrait être pratique de configurer quelques URLs de redirection (peut-être même sous forme de bloc de construction des 3 boutons d’UI)


  • /txt et/ou /sms - redirige vers un SMS : URL pour vous, ou fournit une UI simple de SMS text (similaire aux UIs équivalentes sur des apps mobiles comme iMessage, Google Hangouts etc.)
  • /call - redirige vers une URL FaceTime (audio), ou tel : URL, ou fournit une UI d’appel de départ WebRTC.
  • /facetime - redirige vers URL FaceTime (vidéo) pour produire un appel vidéo.

Maquettes

page accueil iOS7

Voici quelques maquettes sur la façon dont vous pourriez présenter une barre de haut niveau pour la communication, la collaboration et d'autres options familières à un utilisateur iOS 7 iPhone / iPod :

Fichier:Mobile-personal-home-icons-folders-ios7.jpg
Fichier:2013-346-tantek-home-posts.jpg


Contact élargi

Quand un lecteur tape l’icône du dossier Contact elle se dilate comme suit, puis le lecteur peut exploiter le mode de messagerie/communication qu'il souhaite utiliser pour me contacter ce qui ouvre immédiatement un nouveau message (txt, FB Messenger, G + Hangouts, AIM IM), ou lance un nouvel appel (FaceTime, Skype), ou une nouvelle fenêtre Twitter de message direct. Directement vers la communication - en contournant tous les distracteurs des apps de communication page d'accueil / d'activité.

Le seul changement que je ferais sur ces maquettes sont quelques-unes des étiquettes. Toutes les étiquettes doivent être des verbes, pas des noms, indiquant l'action que l'utilisateur veut produire et renforçant ainsi son intention.

Par exemple. "Messages" devraient être « texter un message", "Messenger" devrait être "message FB", "Hangouts" devrait être "GTalk", et le reste semble bien se lire sous forme de verbes.

Fichier:Mobile-personal-home-contact-ios7.jpg
Fichier:2013-346-tantek-home-posts.jpg


Maquettes iOS6

Les prototypes originaux faits dans iOS6, ne valant probablement pas la peine d’être mis en oeuvre, mais pouvant contenir des idées d'interface intéressantes :

Fichier:Mobile-personal-home-icons-folders-mockup.jpg
Fichier:2013-346-tantek-home-posts.jpg



Fichier:Mobile-personal-home-contact.jpg
Fichier:2013-346-tantek-home-posts.jpg


Améliorer Installer Expérience

Actuellement les sites doivent utiliser un script alambiqué pour tenter de demander à l'utilisateur d'ajouter sa page comms à l'écran d'accueil à savoir l’installer.

"Web App installer des bannières" peut être un moyen d'améliorer cette UX, mais il faut que votre page de comms soit/ait :


Limites :

  • L'utilisateur doit visiter votre site "deux fois sur deux jours séparés au cours des deux semaines.» [3]
    • Cela ne répond pas au cas d'utilisation de rencontrer en personne et d’échanger des adresses de contact (web) et à s’attendre à être "installable" en un clic lors du chargement de la page.

Cas d'Usages Supplémentaires

Authentification

Au moment de communiquer d'un utilisateur indieweb à un autre, comment authentifiez-vous que la personne avec qui vous communiquez est effectivement la bonne personne à laquelle vous pensez ? Ceci s'applique à la messagerie en général.

(Ce cas d'usage est une ébauche et devrait être développé)

Articles

Articles sur quelques-uns des défis de communication basée sur les personnes :

Articles concernant la recherche et la résolution de communication personnelle basée sur indieweb :

Voir aussi