Vous le constaterez comme moi, ces exemples sont loin d’êtres tous exploitables dans le cas d’un site web classique mais représentent des prototypes ou des concepts, souvent sources d’inspiration. Pour visiter les sites, il vous suffit de cliquer sur les images

AgencyNet.com

Pour un site en full-flash, je dois dire que cette webagency y ait allé fort : pour naviguer dans leur site et découvrir qu’ils sont, il suffit de se balader dans leurs locaux virtuels redessinés pour l’occasion…

^{AgencyNet.com}

Red-Issue.com

Dans ce site en full-flash, la navigation se fait au clavier (avec les flèches) ou en traçant à la souris le lieu où vous voulez vous rendre( uen flèche « > » pour aller à gauche par exemple). Original, oui c’est sûr… utile ? franchement non !

Red-Issue.com

TapTapTap.com

Ce site nous propose un design soigné avec une navigation basée sur les différentes icônes d’applis iPhone qu’ils développent. Un placement intéressant d’une barre de menu classique

TapTapTap.com

ericj.se

Ce site d’un designer suédois (qui semble aimer aussi le scooter) m’a clairement fait rire avec sa navigation plus qu’originale sous la forme d’un grand scroll horizontal.. à visiter absolument

^ericj.se

JohnnySlack.com

Proposant une interface sur deux niveaux : colonne et ligne, ce site permet de naviguer facilement de contenu en contenu. Cela me fait penser un peu à la Sony PSP (même si je n’en possède pas).. quelqu’un confirme ?

^{JohnnySlack.com}

Mobilux.eu

Ce site a attiré mon attention pour sa galerie photo présentée sous la forme d’une roue (qui tourne ). Simple mais plutôt originale…

^Mobilux.eu

Nickad.com

Vous connaîtrez peut-être déjà ce site que l’on a souvent vu cité comme « innovant » : la navigation se fait ici en laissant le clic droit enfoncé ce qui masque la page actuelle pour faire apparaître un menu où l’on navigue ensuite en glissant la souris.

Nickad.com

Ai interactive Media

Plus complexe à appréhender, ce site porpose une navigation basée sur des disques à drag & droper pour naviguer parmi les contenus. Original mais j’ai rapidement passé mon chemin…

Ai interactive Media

JonathanYuen.com

Ce site est aussi très connu et il y a de quoi ! Si vous ne l’avez jamais visité, je vous invite à le faire sans vous en dire plus afin de vous laisser apprécier le moment !

^{JonathanYuen.com}

MatthiasDittrich.com

Voici une navigation encore différente sur la base d’une colonne d’info où chaque ligne peut être dépliée pour accéder au contenu.

^{MatthiasDittrich.com}

Aigahonolulu.org

Ce site est un bon exemple de ce que l’on voit de plus en plus sur le web : une immense zone de contenue avec une vue zoomée et que l’on peut déplacer. Cela donne l’impression d’être sur un immense site Internet où l’on peut se balader…

Aigahonolulu.org

Sugarrhyme.com

Très belle navigation verticale pour ce site présentant des réalisations de graphismes. L’idée est bonne et la réalisation sympa (être graphiste, ça aide, y a pas de secret..)

^{Sugarrhyme.com}

Media5.ru

Même si la navigation de ce site est plutôt classique : un menu tout bête, les actions qui en découlent (animations, changement d’écrans, etc.) valaient le coup que je cite ce site ici, non ?

^Media5.ru

Merixstudio.com

Pour finir sur un site qui n’est pas en Flash (ben oui, on peut faire original, sans flash !), ce site propose un simple scroll horizontal ( un peu à la Apple) mais où j’ai particulièrement apprécié la bonne interaction avec la souris : à tester pour se rendre compte

^{Merixstudio.com}

La création de diaporama photo est habituellement réalisée par des logiciels dédiés ou des applications de gestions de photos permettant ce genre de création. De plus en plus, des services en ligne permettent ce genre de réalisation souvent sous le forme d’un simple lecteur de photos en flash ou Javascript exportable. Animoto va plus loin… beaucoup plus loin même en réalisant une vraie vidéo de vos photos en les animant en musique et de façon très moderne !

Exemple de diaporama réalisé avec Animoto.com

Plutôt que de vous faire un long discours pour décrire le rendu, je me suis amusé à justemment créer un diaporama avec quelques fonds d’écran Apple… le tout en 10min chrono. Voci le résultat :

^{Plutôt sympa non comme rendu final ?}

Fonctionnement du service

Concrètement, le service vous permet de créer des vidéos/diaporamas de 30 secondes (gratuitement mais payant pour plus long) à partir de photos sur votre ordinateur ou depuis Flickr, Facebook, Picasa, etc., de choisir ensuite une musique (libre de droit) depuis votre ordi ou depuis leur bibliothèque de musiques disponibles et puis vous laissez le service travailler… En quelques minutes, la vidéo est prête et vous pouvez l’exportez sur votre blog (comme ci-dessus), sur Youtube, la télécharger (payant).

^{Interface de création d’un diaporama}

Conclusion : un service à tester

Oui animoto.com est clairement un service à tester. Il est simple à utiliser (interface en full flash bien pensée), donne un résultat vraiment sympa (même dans sa version gratuite) et utilisable facilement. A cela s’ajoute une version iPhone pour faire vos vidéos depuis votre mobile (!!) et une version facebook. Enfin, la version payante permet encore plus de libertés avec la possibilité de télécharger le résultat final, de l’utiliser à des fins commerciales, ou d’utiliser le service en marque blanche et donc sans le logo d’animoto..

Vous en connaissez d’autres dans le même style ? Je suis preneur ^_^

je vous invite à découvrir ici un article de WebDesignerWall qui y compile une quizaine d'exemples de galeries photos en Flash plutôt bien pensées que ce soit d'un point de vue ergonomique, d'un point de vue graphique ou encore au niveau des animations… du plaisir pour les yeux…

Description du site : At Best Web Gallery, I occasionally come across good Flash sites. In this post, I want to feature the best photographer sites (with amazing photos …

Voir le site

Sur le conseil de Bastien (exotech.biz), j'ai découvert cette liste d'exemples de sites Internet proposant une navigation originale. Par originale, comprenez navogation qui sort de l'ordinaire et des classiques menus gauche ou haut. Une vraie mine d'or pour les graphistes, les ergonomes ou les simples curieux comme moi

Description du site : Navigation is the single most important part of web design. … Inspired in (Web Design) by Chad on April 7, 2009 … Designers are always looking to better …

Voir le site

Une page d’accueil riche

A peine arrivé sur le site, j’ai vite compris la démarche entreprise par Axa : proposer à ses visiteurs une ergonomie et une interactivité innovantes sous la forme d’une interface riche.
La prise de parti est importante pour un acteur d’ordinaire non-web : menu en 3D, effet de transparence, recherche prédictive à la Google (en même plus intelligent !),
carrousels d’images, des champs de recherche prédictifs, etc. Le plus marquant est certainement la page d’accueil où la mise en oeuvre de ces changements donne de la profondeur au site.

Des pages intérieures plus classiques

Au fil des pages, je découvre la baseline de l’assureur : «réinventons notre métier» qui je trouve colle plutôt bien avec cette nouvelle interface (si ce n’est pas l’inverse ).
Les pages intérieures sont plus classiques, l’information est plutôt bien structurée et le contenu est proposé de manière organisée.
Pour palier au grand nombre de pages de contenus existantes, les concepteurs du site ont choisi de mettre en place un menu qui s’affiche au survol et qui prend une place énorme sur le site (ce que l’on voit de plus en plus sur le web en ce moment et que je n’aime pas du tout !). Cela apporte une bonne visibilité de toutes les entrées disponibles pour le sous-menu mais occupe une place quasiment aussi grande que le site en lui-même. Dommage je trouve.

Des services encore limités

Mis à part les contenus froids (texte de fiches produits, contenu légaux, etc.), le site propose quelques services comme l’adhésion en ligne ou la génération d’attestation d’assurance en ligne. Une gestion de l’espace client est également présente mais je n’ai pu la tester n’étant pas client personnellement. On trouve donc les services de bases que l’on attend de ce genre de site. Il est regrettable qu’Axa n’ait pas poussé l’innovation plus loin en proposant par exemple un comparateur riche (flash ou autre). De même, certains problèmes persistent comme les résultats de recherche qui s’affichent avec des problèmes d’encodage de caractères, etc.

Une démarche au final innovante mais sans excès

Quid d’un tel changement sur un site à l’origine ciblant des internautes classiques et donc peu expérimentés ? Je dois dire que même si le changement est marqué et que l’interface riche apporte beaucoup (plus d’un point de vue graphique que fonctionnel), cette mise en oeuvre se fait sans excès : avec la retenue nécessaire pour ne pas perdre les internautes classiques et l’innovation suffisante pour se démarquer.
J’en retiens toutefois un beau pas avant pour un acteur dont le coeur de métier n’est pas le web mais qui considère visiblement ce canal avec de plus en plus d’attention…

article rédigé à la demande de Blogrider

Certains le savent sans doute, j’apprécie particulièrement toutes les interfaces web riches. Je trouve qu’elles apportent une dimension nouvelle dans l’approche d’Internet et dans l’interaction qu’un utilisateur peut avoir avec un site Internet. Bien loin des sites full-flash d’il y a 4 ou 5 ans, ces nouvelles interfaces sont moins lourdes, conçues sur des technos plus robustes (Flex en tête) et permettent une maintenabilité presque supérieure à des technos plus classiques.

En 2007, j’avais consacré un dossier sur le thème des RIA en 3 parties : présentation et définition des RIA, technologie et exemples de RIA, et enfin une partie sur l’avenir des RIA. Aujourd’hui c’est une présentation SlideShare que je souhaite vous faire découvrir. Camille Roux a en effet donné un cours de 2 h en décembre dans une école d’ingénieur de Nice et partage ces quelques 135 slides sur le thème des RIA et de Flex. Merci à lui

La présentation se décompose en deux parties :

1. Présentation et définition des clients riches.
2. Présentation de la technologie d’Adobe : Flex / Air.

Voici les slides :

Pour les curieux, n’hésitez pas à faire un retour sur le catalogue d’exemples d’applications Flex !

Avec l’arrivée de l’Ajax ou plutôt la généralisation de son utilisation dans les sites Internet d’aujourd’hui, il devient facile de charger ou de vérifier du contenu à la volée et donc sans rafraîchissement de page. On peut mettre à jour du contenu à la volée, envoyer les données d’un formulaire directement sans changer de page, etc.

Il y a pourtant un composant des interfaces web qui n’évolue pas beaucoup avec les années je trouve : le formulaire d’authentification. Point d’entrée principal à un compte sur un site, ce formulaire est très souvent en haut à droite, très souvent composé d’un champ login/pseudo/email, d’un champ password et d’un bouton OK/Se connecter… Amis webdevelopper ne serait-ce t-il pas temps de penser aussi à faire évoluer ce composant ? à innover aussi un peu de ce côté là ?

Faut-il par exemple toujours rafraîchir la page pour indiquer que le mot de passe est mauvais ? ne peut-on pas l’indiquer immédiatement à l’utilisateur, gagner ainsi quelques clics et rendre la navigation toujours plus simple et intuitive ?

Je pense par exemple au formulaire d’authentification présente sur Mac OS X Leopard. Certes ce n’est pas du web mais pourquoi ne pas s’en inspirer :

Au lieu de mettre un message d’erreur, Apple se contente de faire « secouer » la fenêtre ! simple, intuitif et immédiat…

Certains me répondront que les interfaces riches (Flex ou Silverlight) permettent de se libérer des contraintes du web classique (xHTML) et c’est bien vrai… Mais pourquoi ne pas chercher non plus un peu à innover sur ce composant là en xHTML ?

Qu’est-ce que Rabbitcast ?

Rabbicast est un service mobile basée sur Java et donc compatible avec de très nombreux terminaux. Cet applet vous donne accès à tout un ensemble de fil d’actualité lisible facilement sur votre téléphone. Plus de 150 sites d’informations sont déjà répertoriés , adaptés au service et répartis sous la forme de kiosque. Gratuit, vous pouvez donc naviguer de site d’actu en site d’actu et même interagir avec certains d’entre eux comme poster des commentaires sur les blogs (bientôt disponible) ! La déportation est totale en s’adaptant en plein écran à votre téléphone. Gratuit le service ne nécessite même pas d’installation

Le point fort : l’interface

L’aspect qui m’a le plus séduit est sans aucun doute l’interface proposée par le service. En plein écran, le service ne nécessite quasiment aucune saisie de donnée mais permet d’être complètement contrôlé avec les flèches du clavier ou avec un écran tactile.

L’interactivité créée grâce à l’utilisation de Java permet d’obtenir un service très réactif et qui – même s’il doit charger pas mal de données – répond très rapidement. Une fois un kiosque sélectionné, vous arrivez sur la partir la plus sympa avec une interface sous la forme d’un carrousel 3D qui vous affiche l’ensemble des contenus disponibles.

Un début de monétisation

Les services mobiles commencent à se démocratiser, on l’a dit, mais très peu commencent à imaginer des modèles économiques viables et permettant de rentabiliser le service. Rabbitcast bien que gratuit pour l’utilisateur final, a mis en place un système d’affichage de publicité lors des écrans d’attente de chargement. En lieu et place d’afficher une simple barre de chargement quand vous changez de contenu, le service de Rabbitcast vous affiche une image publicitaire cliquable. Même si cela peut paraître intrusif au début, on se rend vite compte que cela n’apparaît que lors des chargements des contenus. Je trouve l’idée intéressante et je ne semble pas être le seul puisque les fondateurs du service viennent de signer un accord avec Nokia qui va se charger de vendre ses espaces…

En conclusion

Il est difficile de décrire un service mobile avec un simple article et quelques screenshots. Le plus simple est toujours d’essayer Rabbicast qui est gratuit et ne requiert pas d’inscription rappelons-le. Il vous suffit de vous rendre sur mptw.fr depuis votre mobile et de vous laisser guider. Je m’intéresse de plus en plus à ces services qui démocratisent les usages connectés des mobiles et j’ai hâte de voir dans les mois qui viennent les prochaines évolutions des interfaces adaptées à nos petits écrans…

Article sponsorisé par la société FORECOMM

Retrouvez les URL de tous les services montrés dans cette vidéo dans l’article de Galdric.