3246 sujets

Critiques de vos sites: code et design

Http://omicronlab.net/upic/

Bien le bonjour,

Je travaille à mes minutes perdues sur un script d'upload d'image utilisant les technologies xHTML/CSS/PHP/JS/Flash. Ce script sera distribué librement sous licence GPL dès son arrivée à maturité (v1.0).

J'aimerais recueillir vos impressions principalement concernant l'expérience utilisateur. En sachant que les prochaines étapes seront l'implémentation d'un système de partage de l'image uploadée sur les réseaux sociaux et un travail en profondeur sur l'aspect esthétique, y a t-il selon vous des aspects que j'aurais négligé ? Des fonctionnalités qui mériteraient d'être ajoutées ? Des améliorations ergonomiques à apporter ?

Bref, comment vivez-vous l'expérience front-end ?
(je m'avance peut-être en affirmant ceci mais il me semble qu'aucun site d'upload d'image ne propose à l'heure actuelle du "one click copy to clipboard")

C'est ici que ça se passe : UPic (v0.9.5b)
Exemple d'une image uploadée : http://omicronlab.net/upic/4aeb04b7-ac.jpeg+
Edit : Autre exemple avec une image plus large : http://omicronlab.net/upic/4ae9a13d-43d.jpeg+

(je reste bien entendu ouvert à toute remarque concernant l'accessibilité, le code etc.)

Merci d'avance Smiley cligne
Modifié par Akhilleus (30 Oct 2009 - 16:24)
Bonjour,

Ca à l'air de fonctionner au poil, par contre le fait de devoir cliquer pour copier le code sans pouvoir soit même sélectionner et faire son Ctrl+V risque de perturber quelques utilisateurs ("ça fait pas comme d'habitude, comment je fais ?").
@Mikachu : bon, à part ça ? Smiley ravi

@Laurie-Anne : merci pour ton retour Smiley cligne

Concernant le système de sélection, c'est un choix assumé : dans le domaine des hébergeurs d'images, ils trainent depuis des années les mêmes <input /> crades pour afficher les résultats dans le seul but de permettre une sélection (pas copie, juste sélection) en JS.

Cependant, je vais réfléchir à une façon plus pédagogique de présenter la chose aux utilisateurs.
Mais je pense que c'est comme tout, "on s'y fait" : qui aurait imaginé il y a cinq ans qu'on serait tous à dialoguer au travers de messages de 140 caractères ?

PS. celui qui me répond "Noah Glass et Evan Williams" aura droit à une paire de baffes dans les règles de l'art.
Modifié par Akhilleus (29 Oct 2009 - 15:31)
Re !

Oué bon ben je bossais moi tu crois quoi Smiley murf

A ta question je dirais Yannick Noah et Séréna Williams (demi baffe pour le coup ? ^^)

Pour ton site, ça marche plutôt bien.

Je partage l'avis de Laurie-Anne sur la manière de faire le copier coller, personnellement j'aime pas des masses ayant l'habitude de faire mon copier coller moi même (touches C et V de mon clavier sacrément plus usées que les autres d'ailleurs)

Peut être que laisser le champ textuel et mettre à ses côté un bouton "copier cette adresse", serait mieux pour tout le monde.

Je n'ai pas compris "Vous pouvez à tout moment récupérer les informations reprises sur cette page en ajoutant le symbole « + » après l’adresse de votre image."
Ca signifie quoi ?
Merci pour tes observations Smiley cligne

L'adresse d'une image ressemble à ceci : http://omicronlab.net/upic/4aeb04b7-ac.jpeg

Si tu souhaites retomber sur la page qui contient toutes les infos (les différents codes pour les différentes plateformes) correspondant à ton image (comme la page sur laquelle tu atterris après avoir uploadé une image), il te suffit d'ajouter le symbole "+" après l'adresse de l'image dans ta barre d'url : http://omicronlab.net/upic/4aeb04b7-ac.jpeg+

Tu aurais une reformulation à proposer ? (je vais déjà ajouter "dans la barre d'adresse de votre navigateur")

Pour le bouton, j'ai hésité et hésite encore dans la mesure ou cela m'obligerait à créer plusieurs entités n'ayant aucun sens (juste la fonction de copie quand le CCS et le JS sont activés). Même si je peux faire en sorte qu'elle ne soit pas affichée quand le JS est désactivé, je n'ai aucun contrôle sur elle pour un lecteur d'écran par exemple (dans l'hypothèse où celui-ci fait sauter mes CSS). C'est déjà le cas pour mon paragraphe :
<p id="infor">Lien copié avec succès !</p>

qui n'a aucun sens quand les CSS sont désactivées : http://omicronlab.net/upic/4ae9aed8-3e4.png (et ça me casse les roustons).

PS. c'était limite pour pour les mandales Smiley biggrin
Modifié par Akhilleus (30 Oct 2009 - 16:25)
Oué mais alors si je suis dans la page avec tous les liens, à la limite je m'en fous un peu de ce lien avec le +, car je suis déja sur la page qui m'intéresse.
Il serait plus utile sur la page avec seulement l'image, d'avoir un lien "afficher les adresses de l'images" ou un truc du genre. Sauf que n'importe quelle personne un tant soit peu débrouillarde copiera l'adresse dans la barre de navigation Smiley langue
Donc à la limite autant la supprimer la.

Ton message du lien copié à la limite il serait plus utile de l'afficher à proximité de la barre ou on a copié l'adresse. Je suis en 1920x1080, le message est vraiment super éloigné, et si je fais pas attention quand je clique, je le remarque même pas.
Je viens de penser à un truc, il me suffit tout simplement de passer par DOM pour intégrer les boutons, idem pour le bloc d'info .. ça résout le problème des entités fantômes Smiley smile

Je mets ça en place et vous exposerai le résultat final.

Merci encore pour vos retours Smiley cligne
Modifié par Akhilleus (02 Nov 2009 - 08:44)
Hello

C'est pas mal, même si c'est vrai que le clic-copier est un peu déroutant. Je suis une cliqueuse/sélectionneuse incurable, quand je lis une page, et pour le coup ça m'a fait drôle Smiley biggol . Mais j'aime bien l'idée.

En revanche, si on désactive le javascript, alors il faut repasser par la bonne vieille méthode du sélectionner-ctrl+C. Dans ce cas, le message "New ! Cliquer dans un cadre pour copier le code qu'il contient." devient superflu et source de confusion.

De même pour le message "lien copié avec succès" qui s'affiche.

Dans ce cas, pourquoi ne pas afficher ces deux infos via javascript, plutôt que de les mettre dans le doc HTML et les cacher par JS ? Enfin, j'avoue que je n'ai pas regardé le code, mais je suppose que c'est ce que tu as fait.
Modifié par mistike (06 Nov 2009 - 19:18)
Bonsoir et merci pour ta réponse Smiley cligne

Pour le Ctrl+C obligatoire quand le JS est désactivé, c'est implacable. Il n'existe à ma connaissance aucune méthode qui permettrait de s'affranchir de cette corvée sans utiliser du JS tout en garantissant une accessibilité maximale.

mistike a écrit :
[..] les cacher par JS ?

Oui exactement, c'est la raison pour laquelle j'évoquais la possibilité de passer par DOM (cf. ma précédente réponse). Cela résoudrait le problème de ce que je qualifie "d'entité fantôme" (des entités qui n'ont pas de sens d'un point de vue sémantique quand le JS est désactivé).

Concernant le clic/copié, je vais me résoudre à ajouter dynamiquement un bouton "Copier" après les champs contenant les codes, cela permettra aux adeptes du Ctrl+C d'y trouver leur compte Smiley smile
Modifié par Akhilleus (07 Nov 2009 - 14:16)
Akhilleus a écrit :
Bonsoir et merci pour ta réponse Smiley cligne

Pour le Ctrl+C obligatoire quand le JS est désactivé, c'est implacable. Il n'existe à ma connaissance aucune méthode qui permettrait de s'affranchir de cette corvée sans utiliser du JS tout en garantissant une accessibilité maximale.


Ce n'était pas une critique, au contraire, juste pour dire que même sans JS, on peut récupérer l'adresse.

a écrit :

Oui exactement, c'est la raison pour laquelle j'évoquais la possibilité de passer par DOM (cf. ma précédente réponse). Cela résoudrait le problème de ce que je qualifie "d'entité fantôme" (des entités qui n'ont pas de sens d'un point de vue sémantique quand le JS est désactivé).


Je ne connais pas vraiment JS, donc je ne peux pas aider sur ce point, je sais juste que c'est très facile via JQuery. Qui je suppose aussi utilise le DOM, donc on est d'accord Smiley langue
Bonsoir,
mistike a écrit :
ce n'était pas une critique

Je te rassure, je ne l'ai pas pris comme ça Smiley cligne
Je constatais juste comme toi qu'il était possible de récupérer le lien via Ctrl+C quand le JS est désactivé (et c'est clairement dans cette optique que j'ai implémenté le script Smiley cligne )
mistike a écrit :
je sais juste que c'est très facile via JQuery

Oui oui c'est très simple (avec ou sans JQuery), il ne me manque qu'un peu de temps libre pour modifier tout ça Smiley smile
Modifié par Akhilleus (07 Nov 2009 - 17:48)
Sujet clos
Aller à