10 idées pour des interfaces utilisateurs originales

Voici une petite sélection d’Interfaces Utilisateurs originales qui peuvent vous aider dans votre inspiration de designer, de décisionnaire ou même de curieux !

Imaginons que vous ou votre équipe planchiez sur la réalisation d’une nouvelle App mobile, d’un nouveau site web ou encore d’une nouvelle fonctionnalité. Le processus de réalisation comprend la création de la charte graphique et la description des fonctionnalités. Cette étape intègre la réalisation de l’interface qu’utilisera l’utilisateur final. Ci-dessous je vous propose quelques inspirations et concepts.

Vous pouvez retrouver de nouvelles inspirations jour par jour sur l’excellent site UI Movement.

 

Carte Cadeau en ligne – par David Khourshid [lien codepen]

giftcard

 

Widget Calendrier – par Ciprian Ionescu [lien codepen]

calendar_m66z7Yt

 

Animation des Réglages – par Aurélien Salomon [lien dribbble]

setnav

 

Tableau de Bord – par Sam Thibault [lien dribbble]

grapheditor

 

Formulaire à un seul champ – par Colin Garven [lien dribbble]

form

 

NOW UI Kit – par Anton Aheichanka [lien dribble]

now

 

Uploader de Chat – par Javin Ladish [lien dribbble]

cat-uploader

 

Ajout d’image récente – par Srikant Shetty [lien dribbble]

addrecent

App pour Email – par Jona Dinges [lien dribbble]

mail

 

App pour une Galerie d’Arts – par Tubik Studio [lien dribbble]

art_gallery_app

 

 

Source de l’UI en fond du titre de l’article : Tools – par Sanjay Patel [lien dribbble]

Comment booster les conversions du site d’un restaurant ?

Aujourd’hui, vous êtes dans la situation suivante : vous avez un restaurant (ou un client qui a un restaurant) avec un site web qui lui est dédié. Et vous voudriez bien améliorer vos taux de conversion : améliorer le taux de réservation, le taux d’appel, etc. pour avoir comme finalité une croissance de votre clientèle.

Voici donc 9 conseils, destinés autant pour le site de la boulangerie du coin que pour le restaurant cinq étoiles, pour devenir le Gordon Ramsay ramsay_smiley de votre site web : améliorer sa visibilité , faire baisser son taux de rebond et enfin faire plaisir à de nouvelles bouches :

1- Embaucher un photographe professionnel

Et oui, il faut savoir que si un visiteur visite votre site, c’est en premier lieu pour avoir plus d’informations. Le site web d’un restaurant est la devanture virtuelle qui permet l’accès à l’information pour ceux qui ne sont pas physiquement sur place, devant le restaurant. Et ici, l’information principale est votre produit. C’est un des facteurs qui permet de vous différencier d’un restaurant concurrent, en mettant en avant votre unicité et votre talent.
Prenons par exemple un internaute qui visite votre site, il n’a peut-être pas encore faim (probablement digère-t-il le clafoutis aux courgettes du midi). Vous avez peu de photos sur votre site ou alors vous en avez mais de mauvaise qualité ou réalisées dans l’amateurisme total. Le visiteur a donc peu envie de se déplacer à votre restaurant, puisque les photos de vos produits ne sont pas flatteuses.


La vache, ça donne pas envie… [Source]

C’est le but des photos : donner envie au client de se déplacer chez vous. Elles sont capitales pour un site de cette thématique et la tendance de cette même thématique depuis quelques années est aux sites fullscreens, avec de belles photos en quantité. Il est donc important d’utiliser les talents d’un photographe professionnel pour mettre en valeur vos produits et donner ainsi l’eau à la bouche aux visiteurs.

max-blog-post5-2
Là, tout de suite, ça donne faim ! [Source]

La recette est donc simple ici : faites faire de belles photos de vos beaux produits pour déclencher un sentiment d’envie et d’appétit chez le visiteur. Voici quelques exemples de sites Awwward winners dans la catégorie « Restaurant » et qui donnent faim :

max-blog-post5-5
max-blog-post5-4
max-blog-post5-3

2- Fournir plus de détails sur votre Menu

Lorsqu’un potentiel client visite votre site, fournissez avant tout un menu mis à jour, avec les plats actuels, les promos en cours et aussi plus de détails sur les plats. Vous avez la possibilité de fournir plus d’informations dans cette partie sur votre site que sur votre menu papier en restaurant, donc profitez-en !

max-blog-post5-6

Il peut ainsi s’agir de détails tels que la composition des plats, la méthode de réalisation, une vidéo de making-of, la présence ou non d’allergènes, un tri des plats (un tri autre que Entrées, Plats, Desserts), des photos descriptives.

3- Utiliser les Réservations en ligne

Même si notre ère actuel favorise toujours les réservations par appel téléphonique, les réservations en ligne vous permettent d’offrir un autre moyen de réservation pour les clients.
Si vous me dites que de tels systèmes sont très chers ou réservés à de gros restaurants, et bien je vous dis que vous vous trompez, petit coquin ! lignac_smiley

max-blog-post5-7
Exemple avec Opentable

Si vous êtes ou disposez de développeur compétent, un système basique de réservation en ligne est relativement simple à développer : il ne s’agit ni plus ni moins que d’un formulaire avec certains champs, qui enregistre l’envoi dans la BDD et l’affiche dans le Back-Office du site, qui déclenchera alors une alerte email par exemple sur le smartphone ou l’ordinateur du restaurateur.
Et si vous êtes sur WordPress, vous avez de nombreux plugins tels que Bookings, easyReservations, Restaurant Reservation, Restaurant Manager

4- Indiquez toutes les informations pratiques possibles

Personnellement, il m’est déjà arrivé de ne pas aller à un restaurant car le site web ne m’indiquait pas comment le trouver (ça peut sembler dingue un tel oubli) ou pas assez précisément. Donc en plus de votre localisation, ne soyez pas avare de détails pratiques, tels que les horaires d’ouvertures, les jours de promotion, un plan Google Maps voir Street View, la prise en charge des différents moyens de paiement…
Mettre autant de détails est une chose que sûrement peu de vos concurrents locaux font et vous avez donc une chance de vous démarquer des autres. Évidemment, ces détails doivent être inscrits sur les autres sites où votre site est inscrit, tels que Google Local, Facebook, TripAdvisor, LaFourchette…

5- Faites du Community Management

Si votre restaurant s’y prête, faites du community management, n’hésitez pas à vous inscrire sur les principaux réseaux sociaux : Facebook, Twitter et Google+. Non seulement cela renforce votre visibilité, mais aussi vous rapproche de vos clients. Faites des promotions pour Facebook uniquement par exemple, pour favoriser le partage de votre actualité. De plus, n’hésitez pas à intégrer ces réseaux sociaux dans votre site (par exemple, une page dédiée aux promotions sur Facebook ou encore les dernières actus de votre fil Twitter).
Pour ouvrir votre restaurant au monde, ne faites pas l’autruche et adaptez-vous. Cela inclut donc les réseaux sociaux, incontournables aujourd’hui.

6- Une Newsletter pour rappeler que vous existez

L’axe de la newsletter permet de marquer des points dans la fidélisation, autant que pour les réseaux sociaux. Cela vous permet d’avoir une base de clients majoritairement fidèles et intéressés par votre restaurant. Pour avoir une base de cette qualité, il ne faut surtout pas forcer les visiteurs à s’inscrire sur votre liste. Encouragez-les, via l’obtention d’une promotion sur l’addition par exemple dans le cas d’une inscription. Vous pouvez également profiter de votre présence physique (votre restaurant donc) pour mettre à disposition des clients un moyen de s’inscrire à la newsletter à la fin du repas (une tablette vers le comptoir par exemple). Cela vous offre ainsi un second point de conversion pour votre newsletter.

max-blog-post5-8

Au niveau des moyens concrets, vous avez de nombreuses solutions comme MailChimp ou MailPoet (pour WordPress).

7- Renforcez votre visibilité avec les sites thématiques

En plus de renforcer votre visibilité, la présence de votre site dans les nombreux sites thématiques dédiés au restaurant (tels que la Fourchette, TripAdvisor, Linternaute.com…) ajoute de nouveaux moyens d’expression de vos clients (les avis notamment). C’est équivalent à la multiplication virtuelle de votre devanture dans tous les coins de la ville.

8- Inscrivez-vous à Google Local My Business

Cela renforce de nouveau votre visibilité. Google Local permet de diffuser vos informations pratiques, vos photos de plats ou intérieures… liées à votre localisation sur Google Maps. Et si vous avez un compte Google+, c’est le bingo thatsabingo_smiley puisque vous pouvez associer les posts de votre page Google+ avec votre page Google Local.

google-plus-local1

9- Rendez votre site Responsive

C’est peut-être l’un des points les plus importants. Un site responsive est obligatoire dans ce secteur aujourd’hui. Selon un sondage Nielsen (1500 participants), un site non compatible mobile vous prive d’une grande partie de conversion potentielle.
Ce sondage indique ceci, dans le cadre d’une recherche de restaurant :

  • 64% des utilisateurs de smartphone sont convertis dans l’heure, 44% pour les utilisateurs de tablette.
  • +75% de l’accès aux informations du restaurant se font sur le chemin (50% de cette activité dans la voiture).
  • Les utilisateurs de tablette sont plus enclins à regarder les avis et les menus, tandis que les utilisateurs de smartphone tendent à regarder plus souvent la localisation et les informations pratiques.
  • 95% des utilisateurs de smartphone ont au moins une fois utilisé ce dernier pour une recherche de restaurant.

Et encore, ce sondage date d’octobre 2012 ! Avec l’engouement croissant des smartphones qu’il y a eu depuis jusqu’à aujourd’hui, on comprends qu’avoir un site qui accueille les smartphones est une chose indispensable si vous souhaitez améliorer vos taux de conversion.

max-blog-post5-9bis

Conclusion

Pour booster son taux de conversion, il faut en résumé être actif sur le suivi des réseaux sociaux et des sites thématiques, tout en optimisant son site web et l’accès à l’information. Aujourd’hui, encore 64% des sites français ne sont pas du tout compatibles mobiles. Bien que le Google Mobile Update du 21 avril a fait plus de peur que de mal, ne pas avoir un site web adapté aux mobiles pour son restaurant aujourd’hui laisse l’occasion à vos concurrents de vous dépasser. C’est comme si vous agitiez un panneau clignotant de 7x7m signalant « Vous pouvez faire mieux que moi ». On va éviter, non ? spears_smiley3

 

Sources : webmarketingToday, HFR (smileys), Awwwards

Comment optimiser son référencement mobile

Il faut savoir distinguer les SERPs de Google, qui sont divisés en deux parties : les sites desktop et les sites « mobile-friendly ». En effet, le positionnement de votre site peut varier selon que l’on utilise un ordinateur ou un smartphone. Sachant qu’aujourd’hui le web mobile représente 72% et le web desktop 27% du partage total du trafic web, et qu’en plus Google va mettre à jour son algorithme de Search mobile le 21 avril prochain, il devient de plus en plus nécessaire d’optimiser son site pour une compatibilité mobile au top si l’on souhaite être visible sur mobile.

blog-max-post1-2

Mais tout d’abord, commençons par le début : il existe trois façons de rendre son site compatible mobile : Responsive, Diffusion dynamique (Site Dynamic Serving) et les URLs distinctes.

ConfigurationEst-ce que mon URL reste la même ?Est-ce que mon code HTML reste le même ?
Responsive Web Designblog-max-post1-yblog-max-post1-y
Site Dynamic Servingblog-max-post1-yblog-max-post1-n
URLs distinctesblog-max-post1-nblog-max-post1-n

 

  1. Responsive Web Design: on a un code HTML identique affiché sur la même URL, pour n’importe quel type d’appareil (ordinateur, tablette, téléphone mobile, etc.). Le Responsive Design s’adapte selon la taille de l’écran. C’est la méthode number one aujourd’hui, et à raisons. D’ailleurs, Google recommande cette méthode pour plusieurs avantages :
    – Moins de temps de développement général, comparé aux 2 autres méthodes ci-dessous
    – Probabilité moindre d’erreurs de développement
    – Sauvegarde de ressource lors du crawl de Googlebot, rendant le crawl plus efficace et améliorant indirectement l’indexation de Google
    – Moins de temps de suivi de développement et de maintenance sur le long terme
    – Meilleure visibilité puisqu’il n’y a qu’une seule URL à communiquer
    – Meilleure expérience utilisateur
  2. Site Dynamic Serving: on a la même URL quel que soit l’appareil utilisé mais le code HTML est différent selon le support du visiteur. On fait de multiples conditions pour afficher un contenu sur-mesure (est-ce que le visiteur est sur iPhone, sur quelle version, etc.). C’est une méthode très lourde qui demande de tester toutes les situations possibles.
  3. URLs distinctes: une URL pour le site desktop et une URL pour le site mobile (les fameuses URLs du type http://mobi.site.com par exemple). Il s’agit d’une méthode souvent peu ou pas pensée pour l’expérience utilisateur.

 

Eviter le contenu dépendant

On aurait tendance à l’oublier, mais il suffit de peu de choses :

  • Privilégier l’utilisation de l’HTML5 pour les animations qui seront ainsi visibles sur mobile, légères et fluides. C’est une technologie moderne en évolution constante et qui compte bien renverser Flash un jour ou l’autre (on prend les paris ? blog-max-post1-smiley1). Flash est néanmoins toujours supporté sur Android.
  • Utiliser des technologies de remplacement au cas où la première ne fonctionnerait pas ou ne serait pas compatible avec le support de l’internaute. Par exemple, un contenu texte qui retranscrit la vidéo si le javascript ne fonctionne pas ou encore prévoir une image PNG si le SVG n’est pas supporté…
  • Enfin, une recommandation qui serait valable même si vous décidez de vous passer du responsive : l’Accessibilité. Un site accessible avec des éléments ou des cas de figures prévus pour ceux qui visitent un site différemment n’apporte que des bénéfices (expérience utilisateur, meilleur accès au contenu, etc.) et peut-être même des points aux yeux de Google.

blog-max-post1-1
Saviez-vous que la Wii U ne supporte pas le Flash mais le HTML5 ? Et que la cravate est déconseillée pour le confort de jeux ?

Faire crawler votre site et vos redirections

Lors de la phase de test en fin de développement de votre site, n’hésitez pas à utiliser des outils de crawl (tels que XENU, Screaming Frog SEO Spider, etc.) pour vérifier si toutes les pages sont bien redirigées dans les situations que vous avez prévues. Il n’y a pas d’erreurs de redirection ? Le robots.txt a bien été testé ? Les balises canonical sont bien retrouvées et non dupliquées ? Du moment que Googlebot arrive à accéder là où vous voulez, vous êtes bon. Enfin, il y a toujours Google Webmaster Tools qui permet d’afficher des avertissements relatifs à des erreurs de crawl sur votre site.

blog-max-post1-4
Screaming Frog SEO Spider est très complet pour vérifier les possibilités d’accès à son site.

Rediriger vos erreurs 404 mobiles

En dissociant le contenu desktop et le contenu mobile, il peut arriver qu’un contenu desktop ne soit pas prévu pour le contenu mobile, et dans ce cas erreur 404. Dans ce cas, il vaut mieux montrer le contenu desktop sur la partie mobile, plutôt qu’une redirection sur la page d’accueil ou une erreur 404. Cela permet au Googlebot mobile de quand même crawler un contenu.

Accélérer et optimiser votre site grâce à Google PageSpeed Insights

PageSpeedGoogle PageSpeed Insights est un outil très intéressant et performant que vous pouvez utiliser en ligne, en tant que plugin Chrome, via API ou même sur votre serveur Apache ou Nginx. Cependant, Google PageSpeed n’est pas le seul outil qui vous aide à améliorer et optimiser votre site, il existe aussi de très bons outils comme Webpagetest.org, Pingdom, YSlow, GTMetrix, etc. Suivez les différents conseils listés par ces outils pour avoir tout ce qu’il faut afin d’avoir un site optimisé mobile.

Prévoir certaines balises

Certaines balises sont recommandées dans l’utilisation d’un site mobile :

  • Rel=Alternate Media: Cette balise permet de mapper les URLs desktop et mobiles, si vous décidez de séparer le contenu. Pas besoin de spécifier cet attribut sur la version mobile.
    Exemple :

     <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
  • Rel=Canonical : Cette balise, très utile en SEO, permet de spécifier l’unicité de la page et de son contenu. C’est très utile pour éviter les duplicate content si vous avez des pages qui rappellent le contenu d’une autre (comme le listing d’articles, des catégories, etc.). De plus, cela signale que le contenu desktop et mobile est présent sur la page spécifiée (donc utile dans le cas d’un site responsive à URL unique)
    Exemple :

    <link rel="canonical" href="http://example.com/mon-article" />
  • Rel=Next/Prev : Cette balise est conseillée dans le cas de contenu avec pagination. Par exemple pour l’article de blog suivant ou précédent. Cependant, si le nombre de posts listé par page est différent entre la version desktop et mobile, vous ne pourrez pas utiliser Rel=alternate en association avec Rel=Next/Prev puisque l’association entre les pages ne pointera pas correctement.
    Exemple :

    <link rel="next" href="http://www.mylittlepony.fr/article-2" />
  • http Header « Vary : User-Agent » : Ce type de Header permet de spécifier quelle version de la page est à mettre en cache. S’agit-il de la version mobile ? Ou de la version Desktop ? Enfin, cela permet à Google de comprendre le site et de visualiser les versions correctes des pages du site, pour qu’il le mette en cache à son tour. Ce header n’est pas à utiliser si vous êtes dans le cas d’un site responsive avec le même contenu, que ce soit mobile ou desktop.
    Exemple dans le .htaccess (Apache) :

    Header append Vary User-Agent

    Exemple (Nginx) (nécessite ngx_headers_more) :

    more_set_headers –s 200 "Vary:" "Accept-Encoding, User-Agent";

    Exemple (via PHP) :

    <?php header("Vary : User-Agent, Accept"); ?>

Un Design pour les mobiles

L’influence des smartphones sur les sites en ligne est importante puisque l’ergonomie et l’expérience utilisateur sont des attributs qui peuvent à eux seuls apporter un lead ou au contraire faire fuir le visiteur. C’est ainsi qu’une bonne ergonomie d’interface (boutons bien placés, pensés pour les gros doigts, etc.) et une bonne expérience utilisateur (pas de pop-ups, éviter les interstices, etc.) peuvent sensiblement changer la donne aux niveaux des statistiques d’acquisition, et faire chuter le taux de bounce (ou le rebond, c’est-à-dire quand un visiteur arrive puis repart rapidement pour diverses raisons (temps de chargement, expérience utilisateurs, pop-ups, etc.)

blog-max-post1-3
Un utilisateur lambda qui navigue sur un site non optimisé pour mobile, provoquant une imposante duckface.

Autres astuces

Compresser le PNG et le JPG

Une façon efficace d’améliorer la vitesse de chargement des pages tout en sauvant de la data à vos visiteurs est de compresser vos fichiers PNG et JPG, avec compression sans perte de qualité qui ne touche pas à l’image visuelle. Il y a donc le très efficace tinypng.com pour les fichiers PNG en ligne et le logiciel JPEG Reducer pour la compression sans perte de fichiers JPG en masse.

Utiliser un CDN

Un CDN (Content Delivery Network) est constitué d’un ensemble de serveurs dans le monde pour redistribuer localement la version cache de votre site. C’est très utile si vous avez un site multi-langue ou destiné à l’international. Par exemple, au lieu qu’un internaute australien fasse une requête à votre site sur un serveur basé à Paris, le CDN permet de réduire cette distance entre l’utilisateur et le serveur à un endroit près de cet utilisateur, comme Canberra dans notre exemple. Et en plus, cela protège mieux des attaques DDOS et des spams. Vous avez de nombreux prestataires sur le marché tels que Cloudflare, Amazon Cloudfront, Akamai, OVH… Allié à un hébergement performant, ça fait le café !

Créer un Sitemap pour le site mobile

Dans le cas d’un site distinguant le contenu desktop du contenu mobile, il est alors utile d’envoyer un sitemap XML consacré à votre site mobile à destination de Google, dans les Google Webmaster Tools. Si vous avez bien effectué ce qu’on a énoncé plus haut, notamment au niveau des balises, Google saura automatiquement qu’il s’agit de votre version mobile lors du crawl.

Conclusion

Au final, Google souhaite surtout tirer par le haut la qualité des sites internet sur mobile. D’une manière logique, les mieux réalisés sortent du lot, sachant qu’un site est réalisé pour être visité par des humains. On se retrouverait donc avec un site aux nombreux avantages : Plus de trafic ; Meilleure Expérience Utilisateur ; Plus de conversions ; Plus de temps de lecture ; Taux de bounce réduit ; Temps de chargement réduit ; Avantage compétitif ; Plus d’engagement et de fidélité et enfin une meilleure présence dans les SERPs.

Et on oublie pas l’objectif :

blog-max-post1-6

Sources : InstantShift, Thinkstock, Aquitem