0
L’importance des interface Pierre Lechelle Développeur Web Chez You-Exist http://blog.ntrm.net
Ce que nous allons voir <ul><li>Types d’interface </li></ul><ul><ul><li>Riche </li></ul></ul><ul><ul><li>Simple </li></ul>...
Types d’interface <ul><li>Nous pouvons distinguer deux types d’interface : </li></ul><ul><ul><li>Interfaces Simples : Aucu...
Voici un exemple d’interface simple. On voit que le lecteur n’a pas du tout d’intéraction avec le lecteur.
La boutique de Teroforma vous propose grâce a une interface riche de choisir les éléments que vous désirez acheter sous fo...
Interaction avec le visiteur <ul><li>Vous devez vous concentrer sur votre utilisateur. </li></ul><ul><li>Vous devez vous p...
<ul><li>Voila les contraintes qui déterminent les interfaces riches. Vous voyez que l’utilisateur doit se placer au dessus...
<ul><li>Lors de votre invention d’interface riche vous devrez vous informer sur votre cible : </li></ul><ul><ul><li>Age </...
Pourquoi les utiliser ? <ul><li>Utiliser les applications riches permettent indéniablement d’augmenter son chiffre d’affai...
Avantages des interfaces riches <ul><li>Plus de visibilité car vos utilisateurs parlent de vous. </li></ul><ul><li>Plus de...
Inconvénient des interfaces riches <ul><li>Cout de mise en place </li></ul><ul><li>Cout de l’hébergement quand a la bande ...
Bilan <ul><li>Les interfaces riches présente des inconvénient et des avantages comme toutes choses. </li></ul><ul><li>Les ...
 
 
 
Ou et comment les utiliser ? <ul><li>On peut différencier deux classes d’interface riche : </li></ul><ul><ul><li>Tout le s...
Interfaces Riches : Tout le site <ul><li>Si tout votre site est développer intégralement grâce aux interfaces riches, méfi...
 
 
 
Interface Riche : Application <ul><li>Le but état d’intégrer des interfaces riches à l’intérieur du contenu pour augmenter...
<ul><li>Gardez en tête que vous ne devez pas agacer l’utilisateur, par exemple en affichant des effets graphique a chaque ...
Contentez vous du minimum <ul><li>Faites des applications simple et sans imposer trop de fonctionnalité a l’utilisateur, p...
<ul><li>Intégrer les fonctionnalités minimale et permettez à l’utilisateur d’utiliser une version plus complète de votre a...
<ul><li>Vous avez trois clics pour convaincre l’utilisateur : </li></ul><ul><ul><li>de continuer a utiliser votre service ...
Pour convaincre l’utilisateur <ul><li>Nous appellerons ici l’utilisateur « le marché ». Le marché regroupe toutes les pers...
Les applications RDA sont les applications que les utilisateurs peuvent installer chez eux, sur leur ordinateur, et qui pe...
Notifiez <ul><li>Les notifications doivent être intégrer à votre application RDA pour permettre à l’utilisateur de travail...
 
Apprenez de vos concurrents <ul><li>Avant de réaliser votre application, cherchez vos concurrents afin de regarder la mani...
Ne cherchez pas la complexité <ul><li>Oubliez toutes notions de complexité dans les applications riches pour vous baser su...
Soyez ergonomique <ul><li>Pour créer une bonne application riche il faut que vous soyez ergonomique. Pensez à vos utilisat...
Agrandissez les fonctions importantes <ul><li>Les fonctions importantes sont les fonctions principales de votre applicatio...
<ul><li>…  Agrandissez donc vos boutons d’actions déclenchant les fonctions principales pour permettre aux utilisateurs de...
Tester l’application <ul><li>Toutes les applications internet ou native doivent être tester. </li></ul><ul><li>Vous ne pou...
<ul><li>…  Ensuite faire tester votre application par un ou plusieurs beta testeur professionnel qui vous expliqueront les...
Ecouter vos clients <ul><li>Le but d’une application riche est qu’elle convienne à vos clients, c’est pour ça qu’il faut v...
Nos conseils <ul><li>Vous trouverez dans les diapositives suivantes nos conseils pour améliorer vos interfaces riches </li...
Soyez à l’écoute
Soyez toujours évolutifs et le meilleur
Soyez Ergonomique
Pensez a vos utilisateurs
Pensez aux évolutions
Crédits <ul><li>Présentation par Pierre Lechelle pour  http://blog.ntrm.net </li></ul><ul><li>Je suis développeur internet...
Upcoming SlideShare
Loading in...5
×

L’Importance Des Interface

1,706

Published on

Ce slide vous présente les différent types d'interface.

Published in: Economy & Finance, Travel
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,706
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://www.you-exist.com http://blog.ntrm.net 02/04/2008
  • Transcript of "L’Importance Des Interface"

    1. 1. L’importance des interface Pierre Lechelle Développeur Web Chez You-Exist http://blog.ntrm.net
    2. 2. Ce que nous allons voir <ul><li>Types d’interface </li></ul><ul><ul><li>Riche </li></ul></ul><ul><ul><li>Simple </li></ul></ul><ul><li>Interaction avec le lecteur </li></ul><ul><li>Pourquoi les utiliser ? </li></ul><ul><li>Avantages des interfaces riches </li></ul><ul><li>Inconvénient des interfaces riches </li></ul><ul><li>Quelques exemples </li></ul><ul><li>Ou et Comment les utiliser ? </li></ul><ul><li>Comment gagner le marché </li></ul><ul><li>Apprenez de vos concurrents </li></ul><ul><li>Ne cherchez pas le complexité </li></ul><ul><li>Faite tester votre application </li></ul><ul><li>Ecouter les clients </li></ul><ul><li>Nos conseils </li></ul>
    3. 3. Types d’interface <ul><li>Nous pouvons distinguer deux types d’interface : </li></ul><ul><ul><li>Interfaces Simples : Aucune ou très peu d’intéraction avec le lecteur. </li></ul></ul><ul><ul><li>Interface Riche : Basé sur l’interaction avec le lecteur. </li></ul></ul><ul><li>La seule donnée qui change c’est l’intéraction avec le lecteur. Nous allons voir pourquoi cela est important. </li></ul>
    4. 4. Voici un exemple d’interface simple. On voit que le lecteur n’a pas du tout d’intéraction avec le lecteur.
    5. 5. La boutique de Teroforma vous propose grâce a une interface riche de choisir les éléments que vous désirez acheter sous forme de liste. Vous devrez cliquer sur l’objet puis le déplacer sur l’espace de travail pour l’acheter.
    6. 6. Interaction avec le visiteur <ul><li>Vous devez vous concentrer sur votre utilisateur. </li></ul><ul><li>Vous devez vous préoccuper de ses besoins </li></ul><ul><li>Vous devez créer quelque chose d’ergnomique </li></ul><ul><li>Vous devez prendre la place du consomateur </li></ul><ul><li>Vous devez être clair </li></ul><ul><li>Voici les contraintes de votre application… (riche). Les interfaces simple n’ont pas ces contraintes ou les ont moins en tête. </li></ul>
    7. 7. <ul><li>Voila les contraintes qui déterminent les interfaces riches. Vous voyez que l’utilisateur doit se placer au dessus de l’application. L’application doit dépendre de l’utilisateur. </li></ul><ul><li>Votre application doit servir à l’utilisateur dans le but d’améliorer sa navigation et son expérience utilisateur. </li></ul>
    8. 8. <ul><li>Lors de votre invention d’interface riche vous devrez vous informer sur votre cible : </li></ul><ul><ul><li>Age </li></ul></ul><ul><ul><li>Profession (possible) </li></ul></ul><ul><ul><li>Habitude de Navigation </li></ul></ul><ul><li>… dans le but de créer la meilleur application pour la cible prévue. </li></ul><ul><li>Consultez aussi les sondages concernant votre cible et établissez un sondage pour leur poser directement les questions. </li></ul><ul><li>Une fois cette étape passer, créer des personas, c’est sur cet outil que vous devez baser votre interface. </li></ul><ul><li>Car les personnas sont vos utilisateurs, vous devez les définit au mieux. </li></ul>
    9. 9. Pourquoi les utiliser ? <ul><li>Utiliser les applications riches permettent indéniablement d’augmenter son chiffre d’affaire. Votre site sera plus agréable à regarder et de naviguer dessus. </li></ul>
    10. 10. Avantages des interfaces riches <ul><li>Plus de visibilité car vos utilisateurs parlent de vous. </li></ul><ul><li>Plus de CA </li></ul><ul><li>Meilleur interactivité avec le visiteur </li></ul>
    11. 11. Inconvénient des interfaces riches <ul><li>Cout de mise en place </li></ul><ul><li>Cout de l’hébergement quand a la bande passante </li></ul><ul><li>Cout de développement </li></ul><ul><li>Processus de développement et d’initialisation long </li></ul><ul><li>Moins de référencement sur les moteurs de recherches quant au contenu inexistant de votre page remplacer par l’interface riche non indexer actuellement sur les différents moteur de recherche. </li></ul><ul><li>Flash non disponible chez tout le monde </li></ul>
    12. 12. Bilan <ul><li>Les interfaces riches présente des inconvénient et des avantages comme toutes choses. </li></ul><ul><li>Les cout sont existant, mais pas si cher que ca si vous développez l’application vous-même. </li></ul>
    13. 16. Ou et comment les utiliser ? <ul><li>On peut différencier deux classes d’interface riche : </li></ul><ul><ul><li>Tout le site : ca veut dire que tout le site est présenter sous interface riche </li></ul></ul><ul><ul><li>Une partie du site, habituellement le contenu utilise les interfaces riches </li></ul></ul>
    14. 17. Interfaces Riches : Tout le site <ul><li>Si tout votre site est développer intégralement grâce aux interfaces riches, méfiez vous, des moteurs de recherche. </li></ul><ul><li>Réaliser une grosse campagne de référencement car votre site ne contient pas de contenu hormis votre interface riche qui n’est pas encore référencer sur les différents moteur de recherche </li></ul>
    15. 21. Interface Riche : Application <ul><li>Le but état d’intégrer des interfaces riches à l’intérieur du contenu pour augmenter le degré d’interactivité </li></ul><ul><li>Faites la aussi attention aux moteurs de rechercher, préparer du contenu texte pour expliquer ce que vous présentez. </li></ul>
    16. 22. <ul><li>Gardez en tête que vous ne devez pas agacer l’utilisateur, par exemple en affichant des effets graphique a chaque clic qui dure 3 secondes. </li></ul><ul><li>Si vous voulez ajouter des effets graphique faite le en toute transparence sans supprimer la facilité d’utilisation que votre application s’est (doit) se fixer. </li></ul>
    17. 23. Contentez vous du minimum <ul><li>Faites des applications simple et sans imposer trop de fonctionnalité a l’utilisateur, proposez lui le minimum et créer par exemple un menu supplémentaire pour lui en présenter d’autre. </li></ul><ul><li>Je me souviens d’une vidéos d’interview du fondateur de Twitter qui disait « pour créer Twitter nous avons choisi le minimum » et ca à très bien marcher. </li></ul>
    18. 24. <ul><li>Intégrer les fonctionnalités minimale et permettez à l’utilisateur d’utiliser une version plus complète de votre application. </li></ul><ul><li>Plus votre applications comportera de fonctions moins elle sera ergonomique et plus elle sera dur à manier pour l’utilisateur. Contentez vous donc du minimum. </li></ul><ul><li>Le but de l’interface riche est de faire participez l’utilisateur, faite donc en sorte qu’il puisse faire ce qu’il désire (les besoins) le plus rapidement possible. </li></ul>
    19. 25. <ul><li>Vous avez trois clics pour convaincre l’utilisateur : </li></ul><ul><ul><li>de continuer a utiliser votre service </li></ul></ul><ul><ul><li>Que son utilisation est simple et qu’il peut faire tout ce qu’il veut avec </li></ul></ul><ul><li>… profitez en pour tester, dans l’informatique, il faut toujours tester son programme auprès du consommateur pour être sur qu’il convient bien aux attentes. Une fois les retours reçu il faudra améliorer l’application en prenant compte des retours utilisateurs. </li></ul>
    20. 26. Pour convaincre l’utilisateur <ul><li>Nous appellerons ici l’utilisateur « le marché ». Le marché regroupe toutes les personnes susceptibles d’utiliser votre application. </li></ul><ul><li>Vous devez vous importer chez le client pour qu’il puisse toujours avoir votre application à porter de main </li></ul>
    21. 27. Les applications RDA sont les applications que les utilisateurs peuvent installer chez eux, sur leur ordinateur, et qui peuvent être utiliser hors connexion (ou avec). Les applications RDA doivent leur permettre d’utiliser votre application chez eux. C’est la aussi une source d’utilisateur puisque l’application va permettre a tout les utilisateurs n’ayant pas forcement le temps de se connecter d’avoir tout un tas de mise a jour de votre service directement sur leurs bureaux.
    22. 28. Notifiez <ul><li>Les notifications doivent être intégrer à votre application RDA pour permettre à l’utilisateur de travailler sur son ordinateur et de voir en même temps ce qui se passe sur votre réseau sans avoir à se connecter à votre site. </li></ul><ul><li>Les notifications sont présente partout, les utilisateurs sont fans de « Stay Connected » afin de ne rien rater de leurs sites préféré. (Exemple : Les flux RSS, twhirl : client twitter) </li></ul>
    23. 30. Apprenez de vos concurrents <ul><li>Avant de réaliser votre application, cherchez vos concurrents afin de regarder la manière dont leur site est construit et si leurs fonctionnalités sont intéressantes pourquoi ne pas les intégrer. </li></ul><ul><li>Allez souvent sur leur site pour vous tenir au courant de leurs évolutions. </li></ul><ul><li>Faites mieux que vos concurrents, si vous faîtes moins bien, vous aurez forcement moins de visiteur sauf si vos concurrents ne sont pas très connu, si ils sont connu dépêchez vous sans vous précipiter </li></ul>
    24. 31. Ne cherchez pas la complexité <ul><li>Oubliez toutes notions de complexité dans les applications riches pour vous baser sur la simplicité. </li></ul><ul><li>Si votre application est compliquer, l’utilisateur ne sera pas interpeler par votre application, il pensera aux applications de base comme Photoshop qui ne sont pas très ergonomique . </li></ul>
    25. 32. Soyez ergonomique <ul><li>Pour créer une bonne application riche il faut que vous soyez ergonomique. Pensez à vos utilisateurs. </li></ul><ul><li>Toutes les fonctionnalités doivent être accessible le plus facilement possible, prenez en compte dans cet étape de la nécessité de chaque fonctionnalités. </li></ul>
    26. 33. Agrandissez les fonctions importantes <ul><li>Les fonctions importantes sont les fonctions principales de votre application. </li></ul><ul><li>Ne faites pas de tout petit bouton pour actionner ces actions. </li></ul><ul><li>Vos utilisateurs sont la pour utiliser ces fonctions principales, si ils ne les trouvent pas, ils risquent de se lacer et de partir blaser (il ne reviendra pas). </li></ul>
    27. 34. <ul><li>… Agrandissez donc vos boutons d’actions déclenchant les fonctions principales pour permettre aux utilisateurs de les utiliser le plus facilement possible. </li></ul><ul><li>Imaginez que votre application ait comme fonctions principales de lire les RSS et que le boutons RSS soit un tout petit carré de 19x19px, l’utilisateur aura du mal a cliquer dessus puisque la cible sera petite, plus la cible est grande plus c’est simple pour l’utilisateur. </li></ul><ul><li>Loi de Fitz </li></ul>
    28. 35. Tester l’application <ul><li>Toutes les applications internet ou native doivent être tester. </li></ul><ul><li>Vous ne pouvez pas mettre en production une application non tester sous peine de perdre tout vos utilisateurs car ils ne seront pas satisfait. </li></ul><ul><li>Vous devez en premier lieux réaliser un test vous-même pour voir si le développement est bon. </li></ul>
    29. 36. <ul><li>… Ensuite faire tester votre application par un ou plusieurs beta testeur professionnel qui vous expliqueront les bug (et parfois comment les résoudre). </li></ul><ul><li>Et enfin, mettre en ligne l’application en notant les retours des utilisateurs dans l’optique d’améliorer l’application pour qu’elle colle aux utilisateurs et qu’elle leur devienne indispensable. </li></ul><ul><li>Ne proposez pas d’applications non terminer. Ne vous précipitez pas pour vos applications sous peine de bâcler l’application et de mettre à l’eau tout votre travail, ou alors préciser que ce n’est qu’une bêta. </li></ul>
    30. 37. Ecouter vos clients <ul><li>Le but d’une application riche est qu’elle convienne à vos clients, c’est pour ça qu’il faut vraiment les écouter. </li></ul><ul><li>Utiliser les commentaires de votre application dans le but de l’améliorer. </li></ul><ul><li>Etudier tout les commentaires en cherchant toutes les possibilités inexploré que vous offre ce commentaire. </li></ul>
    31. 38. Nos conseils <ul><li>Vous trouverez dans les diapositives suivantes nos conseils pour améliorer vos interfaces riches </li></ul>
    32. 39. Soyez à l’écoute
    33. 40. Soyez toujours évolutifs et le meilleur
    34. 41. Soyez Ergonomique
    35. 42. Pensez a vos utilisateurs
    36. 43. Pensez aux évolutions
    37. 44. Crédits <ul><li>Présentation par Pierre Lechelle pour http://blog.ntrm.net </li></ul><ul><li>Je suis développeur internet depuis maintenant 5 ans (PHP, MySQL, Flex, CSS, (x)HTML , JavaScript, Ajax). Je propose maintenant mes services ainsi que mon expertise grâce à la société You-Exist ( http://www.you-exist.com ) </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×