Développeurs,

Améliorez votre UX simplement !

Julien Deniau

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

Ouibounce

Ciblez vos annonces

Meilleur taux de clic, meilleur taux de rebond

Développeurs

Abonnez-vous a vos newsletters

Téléchargez vos applications mobiles

Montrez-nous des boobs

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

Consentement explicite

Clic sur un lien ou sur un bouton

Sourceforge aujourd'hui

Consentement tacite

Vous n'êtes pas d'accord ? C'est facile, c'est la petite croix en haut à droite

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 ?

© anoldent @ Flickr

Que veut-on ?

© anoldent @ Flickr

PHP

github.com/stojg/crop

ex: placehogs.com


  $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.org

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

Mapado recrute: julien@mapado.com