Développeurs,
Améliorez votre UX simplement !
Julien Deniau
-
Développeur web
Améliorez votre UX simplement
Qu'est-ce que l'UX ?
Téléchargement d'applications mobiles
Information sur les cookies
Crop d'image
Filtres de recherche
Affichage de date
Refonte de site
UX ?
UX = Expérience Utilisateur
Mauvaise UX
Un peu dur d'utilisation à deux.
Bonne UX
Pas besoin d'explication précisant "tirer" ou "pousser"
L'UX, c'est le design, non ?
Pourquoi ?
Développeurs
Améliorez votre UX simplement !
Abonnez-vous a vos newsletters
Acceptez vos cookies
Croppez vos images
Filtrez des résultats vide
Videz vos paniers d'achat
Hérissons > chats
Trouvez les bonnes dates
Améliorez votre SEO
Refondez votre site
Téléchargez vos applications mobiles
Marketing + UX, c'est possible ?
Exit intend popup
Ciblez vos annonces
Meilleur taux de clic, meilleur taux de rebond
“(...), les internautes doivent être informés et donner leur consentement préalablement à l'insertion de traceurs. Ils doivent disposer d'une possibilité de choisir de ne pas être tracés lorsqu'ils visitent un site ou utilisent une application. (...)”
Sourceforge aujourd'hui
Bonjour, j'aimerais le menu s'il vous plaît !
#alerte_tracking {
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 0 1px 1px;
- left: 0;
padding: 5px;
- position: fixed;
- top: 0;
- width: 660px;
- z-index: 1;
}
.croix_grise:after, .croix_blanche:after {
+ position: fixed;
+ top: 5px;
+ right: 5px;
}Il y a un plugin jQuery pour ça
$(function(){
$.cookieBar({ message: "J'aime les cookies", /* ... */ });
});Développeurs
Abonnez-vous a vos newsletters
Téléchargez vos applications mobiles
Filtrez des résultats vide
Videz vos paniers d'achat
Hérissons > chats
Trouvez les bonnes dates
Améliorez votre SEO
Refondez votre site
Améliorez votre UX simplement !
Acceptez vos cookies
Croppez vos images
“Chéri, qu'est-ce qu'on regarde à la télé ?”
Madame michu
Qui est-ce ?
tf1.fr
Mimi Mathy
tf1.fr
À chaque page son crop
tf1.fr
Que veut-on ?
Que veut-on ?
PHP
➙
$crop = new \stojg\crop\CropEntropy('/home/image/plop.jpg');
$imagick = $crop->resizeAndCrop($width, $height);
$image->writeImage('/home/image/plop-cropped.jpg');
JS: smartcrop.js
https://github.com/jwagner/smartcrop.js
SmartCrop.crop(image, {width: 100, height: 100},
function(result){console.log(result);}
);
// {topCrop: {x: 300, y: 200, height: 200, width: 200}}
Python: thumbor.
Serveur d'image complet
https://github.com/thumbor/thumbor
http://thumbor-server/hmac/trim/AxB:CxD/fit-in/-Ex-F/HALIGN/VALIGN/smart[...]
/filters:FILTERNAME(ARGUMENT):FILTERNAME(ARGUMENT)/image-uri
Utilisez du code existant
ou croppez vos images à la main
Développeurs
Abonnez-vous a vos newsletters
Téléchargez vos applications mobiles
Videz vos paniers d'achat
Hérissons > chats
Trouvez les bonnes dates
Améliorez votre SEO
Refondez votre site
Améliorez votre UX simplement !
Acceptez vos cookies
Croppez vos images
Filtrez des résultats vide
“Bonjour, je voudrais un Réflex Nikon avec une optique à moins de 700 €”
Les gens qui achetent sur internet
“Heu... j'aurais bien voulu une tablette Android 8" 64Go”
Les gens qui cherchent à acheter sur internet
Recherche à facettes
ElasticSearch
Requête
{
"aggs": {
"animal": {
"terms": { "field": "animal" }
},
"couleur": {
"terms": { "field": "couleur" }
},
"taille": {
"terms": { "field": "taille" }
}
}
}ElasticSearch
Réponse
"aggregations" : {
"animal" : {
"buckets" : [
{ "key" : "chat", "doc_count" : 25 },
{ "key" : "hérisson", "doc_count" : 24 }
]
},
"couleur" : {
"buckets" : [
{ "key" : "bleu", "doc_count" : 42 },
{ "key" : "orange", "doc_count" : 23 },
{ "key" : "vert", "doc_count" : 21 },
]
},
"taille" : {
"buckets" : [
{ "key" : "M", "doc_count" : 31 },
{ "key" : "XL", "doc_count" : 24 },
{ "key" : "S", "doc_count" : 17 },
{ "key" : "XXL", "doc_count" : 8 },
]
}
}Ne proposez pas ce que vous n'avez pas
Filtrez vos filtres (!) de recherche en AJAX !
Développeurs
Abonnez-vous a vos newsletters
Téléchargez vos applications mobiles
Videz vos paniers d'achat
Hérissons > chats
Améliorez votre SEO
Refondez votre site
Améliorez votre UX simplement !
Acceptez vos cookies
Croppez vos images
Filtrez des résultats vide
Trouvez les bonnes dates
Actualité de la veille ?
29 octobre 2014 à 13:11
Actualité de la veille !
hier à 16:07
En fonction de la recherche
Il y a une lib pour faire ça
Python: babel
from datetime import timedelta
from babel.dates import format_timedelta
d = timedelta(days=2)
format_timedelta(d)
# Out: "2 jours"
PHP: Carbon
use Carbon\Carbon;
$c = new Carbon('yesterday');
echo $c->diffForHumans(Carbon::now());
// Out: 1 day before
Javascript/Node: Moment.js
var moment = require('moment');
moment("2012-06-20", "YYYY-MM-DD").fromNow();
//Out: il y a 2 ans
Développeurs
Abonnez-vous a vos newsletters
Téléchargez vos applications mobiles
Videz vos paniers d'achat
Hérissons > chats
Améliorez votre SEO
Améliorez votre UX simplement !
Acceptez vos cookies
Croppez vos images
Filtrez des résultats vide
Trouvez les bonnes dates
Refondez votre site
“On vient de changer de logiciel il n'y a pas longtemps,
ça ne marche pas”
Mon banquier et mon assureur
A chaque fois que je vais les voir
Téléportation
Refonte de clubic.com en 2010
→
Les moins contents râlent
“ Tu as sacrifié l'ergonomie au profit du design. J'aurais préféré [...] l'inverse.
[...]Si quelqu'un connait un [autre site], j'apprécierais grandement qu'il me le fasse savoir.[...] ”
armycreator.net
“ [...] La nouvelle version du site et digne d'une page Skyblog d'un gosse de 15ans! [...] ”
jeuxvideo.fr
“ C'est juste moche, [...] banal et stérile[...]
Adios originalité, bonjour rentabilité stérile [...] ”
jeuxvideo.com
“ Nouveau logo d'Airbnb : entre moqueries et accusations de plagiat[...] ”
airbnb.com
Refonte de leboncoin.fr en ????
→
Évitez les refontes globales
Soyez agiles : Soyez en constante mini-refonte
“ Ne restez pas simple spectateur développeur ”
- Utilisez votre produit
- Corrigez ce qui vous dérange
Julien Deniau
j_deniau