Ergospeed #18 : iPhone – SMS, le Ping-Pong visuel

Il y a environ 4 mois, j’ai commencé un Ergotest sur l’iPhone et n’ayant jamais eu le temps de le finir, je me permet de publier la première partie consacrée à  l’application SMS (Testé sur firmware 2.0). Comme vous avez pu le constater, Ergophile tourne un peu au ralenti depuis quelques mois. Effectivement, j’ai consacré pas mal de temps à  un projet qui me tient particulièrement à  cÅ“ur tKaap.com. Mais ne vous inquiétez pas, en 2009, Ergophile reprendra son activité normal.

Une Application simple et efficace

sms-iphone.png
sms iphone iconSans partir dans un débat sur l’innovation apporter par Apple dans le monde du mobile, ici, la petite pomme a su métamorphoser l’utilisation du SMS en un Chat. C’est-à -dire, que les réponses se traduisent visuellement et graphiquement par des échanges en ping-pong.

Les sms crééent des discussions qui se réunissent dans une seule et unique page. Un gain de temps énorme pour accéder à  l’historique des textos en un coup de scroll (ou de doigt).


Ecrire un SMS – Accès par la page d’accueil

iphone_ecrire_sms
La plus grande prouesse d’Apple est d’avoir réussi à  réaliser une application simple. Son action principale est l’envoi et la réception de sms. Cette application est réduite à  son usage premier en quelques écrans et manipulations.

Notons l’absence de menu traditionnel qui permet généralement d’organiser et de classifier les différentes actions. Ici, il n’y a pas de dossier « rédiger un nouveau message », « boîte de réception », « brouillons », « messages envoyés », « messages enregistrés »… La page d’accueil et les pages de discussion se suffisent à  elle-même.

La page d’accueil comprend l’historique des différentes conversations et un pictogramme permet l’écriture d’un message.


Ajout de destinataire

L’ajout d’un contact est assez facile : votre répertoire apparait dès que vous tapez les premiers caractères.

iphone sms contact

Ou bien, la deuxième alternative est la présence de l’icone + qui permet de chercher directement un contact dans son répertoire. Plus vous ajoutez de contact et plus le champ s’agrandit pour visualiser l’ensemble de vos destinataires. Par la suite, le champ se rétracte pour se substituer à  une information succinte  »1 contact et 3 de plus… »

Un champ texte minuscule pour rédiger un sms… bon courage !

iphone texte

Le champ textuel est ridicule et restreint l’utilisateur à  une relecture difficile de son message. N’oublions pas le frein majeur qui agace lors de la rédaction d’un texto : la CORRECTION AUTOMATIQUE. Grâce à  Apple, finit le langage SMS qui vous permettait de faire des écrits phonétique avec une réduction économique des caractères. Cette correction automatique est tout simplement un frein à  la liberté d’imagination littéraire ! (j’y v 1 pe for, me bon)

Heureusement qu’avec la version du firmware 2.2, la correction automatique est désactivable. Youpi !
Notons aussi la difficulté d’écrire rapidement un sms avec une ou deux mains. Impossibilité d’avoir le clavier au format paysage.

Suppression d’un SMS

iphone_effacer_sms

Une des incohérence dans cette application est l’effacement d’un SMS : sur le screenshot ci-dessous vous pouvez apercevoir le bouton effacer, ce dernier n’effacera que les échanges mais conservera la discussion ouverte avec votre interlocuteur. De plus, vous ne pouvez pas effacer un texto parmi un feed.

Pour supprimer une discussion, l’utilisateur doit retourner sur la page d’accueil :
iphone effacer discussion

01Utiliser le bouton « modifier » (pas très logique), puis l’apparition de l’icone « sens interdit » signale à  l’utilisateur une action qui sera irréversible. Puis, lors de la validation de l’icone, le bouton supprimer apparait.

02Ou bien, un simple glissement de votre index sur le nom du contact et le bouton « supprimer » apparait.

Conclusion


Malgré les trolls qui peuvent tourner autour de l’iPhone, nous ne pouvons pas nier les innovations de certaines applications ainsi que le nouvel usage de cet objet qui ont changé la donne du marché. A consulter aussi le blog iPhon.fr et la timeline de l’évolution de l’iPhone depuis 1999.

iPhone Timeline

A lire aussi :

Ergospeed #18 : iPhone – SMS, le Ping-Pong visuel

Ergospeed #17 : Barre de défilement sur apple.com

logo apple
Depuis la keynote de septembre, Apple.com a bien entendu fait des mises à  jour de leur site en présentant leur nouvelle gamme de produits. Ils ont intégré plusieurs modules dont cette barre de défilement horizontale dans la rubrique « iPod + iTunes ». Cette scrollbar est particulièrement bien exploitée pour une présentation de leur produits le tout en CSS et Javascript.

Classification & Organisation visuelle

apple scrollbar

1/ Utilisation habituelle de la scrollbar

Chaque produit est juxtaposé avec une régularité graphique et proportionnelle. Tous sont détourés sur un fond gris uni afin de faire ressortir aux mieux chaque couleur. Bien sûr, leurs intitulés sont situés juste en dessous et permettent une identification plus précise. Cette première zone de lecture permet à  l’utilisateur de consulter la gamme entière d’Apple avec un usage unique et habituelle d’une scrollbar.

2/ Une barre de défilement qui classifie

Le deuxième sens de lecture se situe dans l’utilisation de la scrollbar. A l’intérieure de celle-ci se trouve des sous-catégories qui permettent de hiérarchiser en 1 seul clic les différents produits selon leur gamme. Le défilement et le positionnement des produits permettent à  l’utilisateur de comprendre la délimitation de chaque produits. La scrollbar n’est pas surchargée de catégorie car seulement 3 existes (« produits », « iTunes plus » et « accessoires ») et le curseur reste de taille identique afin de « souligner » et d’indiquer le choix de l’utilisateur.

Une utilisation efficace et simple qui n’empêche pas une utilisation habituelle pour des utilisateurs moins avertis.

A lire aussi :

Derniers Ergospeeds :

Ergospeed #17 : Barre de défilement sur apple.com

Ergospeed #16 : Widget FnacMusic.com

Il y a seulement deux jours que je viens de découvrir le widget de la FnacMusic, « mieux vaut tard que jamais ». Ce widget de bureau permet d’avoir en temps réel les différentes actualités musicales telles que les dernières sorties, les meilleurs ventes d’albums, les coup de coeur de la Fnac…

Navigation circulaire

Ce widget, nommé « Caroussel 3D » par ses créateurs l’agence Nosibay, a une approche assez attractive entre l’utilisateur et l’interaction qui en résulte. Grâce à  son ouverture dynamique qui se déploie progressivement l’utilisateur comprend directement le sens de lecture circulaire de ce widget et son fonctionnement.


Sur ce screencast, vous pouvez apercevoir comme la fluidité et la circulation dans ce widget se fait assez instinctivement. Le rollover d’un élément graphique se manifeste par le zoom avant de ce dernier et le retrait en profondeur des autres. Nous pouvons y mentionner la loi de Fitts qui résume dans ce cas présent la taille et la proximité de chaque élément permettant une meilleure utilisabilité.

Loi de Fitts
Le temps que l’on met pour atteindre une cible est proportionnel à  la distance à  laquelle elle se trouve, ainsi qu’à  sa taille. Plus précisément, une cible est d’autant plus rapide à  atteindre qu’elle est proche et grande.
Amélie Boucher

Schéma widget Fnac Music

Malheureusement, quelques regrets apparaissent sur les fenêtres de navigation qui permettent d’accéder à  l’information :

  • L’esthétisme est décevant et n’est pas homogène à  celui du widget
  • La consultation du contenu se fait en utilisant 2 boutons « haut/bas » pour passer d’une page à  l’autre. Un scroll est sans doute suffisant et plus rapide dans son utilisation
  • Les boutons situés dans la barre de navigation sont illisibles à  cause de leur petites tailles. Cela entraine une incompréhension de leur fonctionnalité
  • Le widget est seulement disponible pour Windows. Tchao les Macs !

Billets similaires à  une navigation circulaire :

Derniers Ergospeeds :

Ergospeed #16 : Widget FnacMusic.com

Ergospeed #15 : Typesql.com

Logo Typesql
Il y a fort longtemps, mais longtemps… le 12 mai dernier, Galdric Pons a posté un billet sur son blog HebiFlux à  propos du site TypeSql.com réalisé en AS3 et Papervision. Au passage, je vous conseille de vous abonner à  Hebiflux qui est un très bon blog consacré à  la 3D sur le web o๠Galdric n’arrête pas de posté jour et nuit… 🙂

Un historique omniprésent

typsql helveticaProvenant d’une formation de graphiste, forcément ce site ne m’a pas laissé indifférente : TypeSql permet de consulter des informations sur l’origine d’une quarantaine de typographie. On peut y trouver l’auteur d’une police, sa catégorie, sa naissance, un exemple d’utilisation, etc.

Dès l’ouverture du site, rien ne prédit à  l’utilisateur qu’il va être confronté à  une nouvelle navigation dans un espace tridimensionnel : un design sobre, une grille typographie faisant office de fond, un menu principal positionné à  l’emplacement du pied de page permettant un espace plus important pour le contenu.

La particularité de ce site est la possibilité de voir les étapes et l’historique de ses recherches tout en utilisant le positionnement du contenu dans une interface 3D.

Notons que la recherche d’une typo s’affiche à  l’aide de « l’auto-complétion » (ou complètement automatique)

Cela impose au site de prévoir le mot ou la phrase que l’utilisateur est susceptible de taper, avant que celui-ci ne l’ait entièrement saisi. Le « complètement » est donc disponible dans les cas o๠il est possible de prévoir le ou les prochains mots qui seront saisis… Suite sur Wikipédia

Pour la sélection des sous-catégories d’une typo, la transition du contenu se fait par une animation des éléments qui se déplacent grâce à  une rotation en perspective. Cette animation peut dérouter et surprendre la première fois mais la lecture du contenu est assez rapide et claire grâce à  une structure en colonne.

Par contre, La superposition des recherches permet de voir visuellement son historique mais malheureusement elle occasionne un surplus d’information et entraine une gêne pour la lisibilité du contenu en cours de lecture.

Beaucoup de lacunes ralentissent la consultation et la satisfaction de se site telle que :

  • Ouverture d’une popup pour consulter le site… bizarre
  • Aucune possibilité de revenir sur une police déjà  consultée
  • Impossible de naviguer à  l’intérieur du contenu avec la souris, la roulette (de la souris) ou les flèches du clavier : étant dans un espace 3D, l’utilisateur a surement envie de se balader dans son historique
  • La superposition du contenu entraine une surcharge visuelle ce qui empêche la lisibilité et porte à  confusion
  • Mauvaise gestion des fermeture des popups : Absence de bouton « fermer ». Lorsque l’utilisateur clic sur l’extérieur d’une popup, cette dernière ne disparait pas.
  • etc.

Conclusion

Ce site est purement expérimental. Vous me direz qu’il n’est pas du tout fonctionnel et pratique à  utiliser. Un simple site en HTML aurait suffit avec une bonne ergonomie. Peut-être bien et surement que oui ! Ce site peut ne pas satisfaire l’utilisabilité d’un utilisateur mais permet de découvrir de nouveau mode de navigation. Même si cela nous perturbe, nous chagrine dans nos habitudes, ces nouveaux modes de navigation vont voir le jour de plus en plus vite avec l’arrivée du Flash Player 10 et vont bien sûr s’améliorer avec le temps. Ils s’adapteront aux besoins des utilisateurs tout en apaisant nos réticences au changement.

A lire aussi :

Derniers Ergospeeds :


Ergospeed #15 : Typesql.com

Ergospeed #14 : Samsung NV24HD

Ayant déjà  écrit un billet sur le mobile Samsung F490, l’agence Heaven m’a convié, le 17 mai dernier, cette fois-ci à  un FanDay pour découvrir le nouvel appareil photo NV24HD de Samsung et son concours ShootTheSofa.com. Ce concours ludique vous permet de gagner un appareil photo chaque semaine juste en délirant sur votre canapé 😉

Nos habitudes peuvent-elle nous déstabiliser ?

Nikon Lumix Samsung
Je souhaite faire un aparté sur nos habitudes d’utilisation lorsque nous sommes confronté à  un nouvel objet : J’ai longtemps pratiqué la photographie argentique avec un Nikon Reflex F601 (objectif 28-300mm), aujourd’hui je possède un Lumix TZ1. Lorsque je suis passée d’un reflex à  un compact numérique, mes habitudes ont été bouleversées et un temps d’adaptation fut nécessaire.

Lors de ce FanDay, qui réunissait une trentaine de personne, les remarques que j’ai pu entendre étaient : « pourquoi la molette du zoom est à  cet emplacement ? », « le déclencheur est mal positionné », etc… En discutant avec ces personnes, je me suis vite rendue compte qu’elles comparaient ce nouvel objet à  leur propre compact numérique et leurs habitudes qui vont avec.

Le temps d’adaptation à  un nouvel appareil (composé de nombreuses fonctionnalités) n’est pas forcément évident pour tous et nous avons souvent besoin d’un référant existant pour nous rassurer ou pour le comparer avant de l’apprivoiser.

La Smart Touch attitude

Cet appareil photo est doté d’une navigation dite Smart Touch permettant un accès direct aux options grâce à  deux rangées de boutons et une interface rappelant celle du mobile F490 : la navigation en croix. Après avoir reçu la récompense du prix international du design iF 2007 pour celle-ci, Samsung a été aussi récompensé pour l’interface Smart Tocuh par le prix de « la meilleur innovation Photo 2007 » par la Technical Image Press Association (TIPA).
schema_samsung_nv24hd.jpg
Samsung a sans doute voulu homogénéiser sa gamme de produit avec ce système de navigation en croix pour habituer sa clientèle et la fidéliser. Cette navigation devient une identité pour eux. Le Smart Touch est étonnant et à  la fois confus lors de sa première prise en main. L’utilisateur peut être effrayé lorsqu’il aperçoit tous ses boutons. Mais lors d’une utilisation quotidienne, cela permet d’être rapide grâce à  la sensibilité des boutons et l’usage devient assez instinctif grâce à  des pictos identifiables avec ou sans leur intitulé. A tester au moins une fois dans sa vie.

Conclusion

Durant le prêt de cette appareil, je n’ai pas été déçu de la qualité des photos, du double système du stabilisateur, de la macro… Cette appareil photo est un très bon rapport/qualité prix. Dommage, j’ai déjà  un Lumix et aujourd’hui si je devais investir dans un compact photo je serai tentée par une interface tactile. Je suis trop habituée maintenant à  mon LG Wiewty (qui me dépanne bien au quotidien) et à  mon iPod Touch.

Caractéristiques du NV24HD :

  • 10 mégapixels
  • Un objectif Ultra Grand Angle 24mm avec zoom optique 3.6x
  • Ecran Amoled
  • Un double système de stabilisation (optique et numérique)
  • Correction automatique du contraste et une sensibilité de l’appareil qui atteint 3200 ISO
  • Plus de détails…

Derniers Ergospeeds :

Ergospeed #14 : Samsung NV24HD

Ergospeed #13 : MoMa.com – Design and the Elastic Mind

Il y a environ 2 semaines, en revenant du Wif, j’ai rencontré Alexandre Tonneau, designer d’intéraction, qui m’a gentiment recommandé d’aller jeter un coup d’Å“il au site Design and the Elastic Mind du musée MoMA de New York. Alexandre ne m’a rien dit de plus, juste que je serais sûrement impressionnée.

A propos

Logo Moma
Le 24 février dernier, ce célèbre musée d’art moderne et contemporain New Yorkais inaugure l’exposition Design and the Elastic Mind. Cette exposition aborde le design contemporain sous toutes ses formes et permet aux visiteurs ne pouvant faire le voyage d’accéder à  une exposition virtuelle grâce à  un site web détaillé et une navigation inhabituelle.

Une navigation en étoile

A première vue, le site n’a rien d’exceptionnel : un design sobre, une organisation visuelle stricte et froide, une abondance d’information structurée sur plusieurs niveaux, une surcharge visuelle provenant de l’absence d’image, un sens de lecture à  la fois verticalement et horizontalement.

Toutefois, ce site avertit l’utilisateur d’une navigation nouvelle et non-commune grâce à  une animation qui se joue dès l’ouverture. L’utilisateur peut constater qu’il visite un site vivant avec un contenu diversifié à  l’aide de cette animation fluide et visuelle.

Lorsque l’internaute a sélectionné une information, l’animation s’ouvre telle une « étoile câblée ». L’information principale s’affiche visuellement au cÅ“ur et s’entoure de plusieurs lignes qui signalent à  l’utilisateur des directions différentes afin d’accéder à  des informations similaires à  sa sélection. Ces lignes sont la métaphore de câblage accentué par un son lors de leurs sélections. Bien sûr, ces possibilités restent au second plan et n’apparaissent qu’en contenu textuel et non visuel. Cela évite de polluer le site d’images inutiles qui risque de perturber la lisibilité du contenu. Si ce dernier valide cette information une fenêtre de type Lightbox apparait en superposition au site.

Pagination et niveau de lecture

L’importance des détails graphiques

Si nous nous intéressons aux détails visuels, notons l’importance de ces derniers qui permettent à  l’internaute d’être orienté :

Moma exemple

  • Les flèches de pagination de couleur blanche et de taille importante signalent leurs fonctions grâce à  leur positionnement et leurs omniprésences.
  • Les flèches de direction qui soutiennent le regard de l’internaute afin de le guider dans le bon sens de lecture
  • Le code couleur des intitulés (des « lignes directrices ») qui permet de classifier mais aussi d’apporter un peu de gaité à  ce site.
  • Les points d’intersections qui changent de couleurs selon le nombre de croisement ce qui indique un taux d’importance similaire sur l’information
  • Lors du rollover d’une direction, cette dernière reste visible à  la différence du site qui s’assombrit afin de laisser une meilleur lisibilité à  cette dernière.
  • La barre de défilement est personnalisée à  l’image du site afin d’homogénéiser l’ensemble.

Conclusion

Même si l’internaute risque de trouver ce site assez déroutant, au point de se perdre, l’accès aux informations complémentaires reste néanmoins instinctives malgré un afflux de contenu qui montre la richesse de cette exposition. Ce genre d’initiative et d’expérimentation sont importants pour faire avancer les recherches dans le domaine du web et des interfaces innovantes. Bien sûr, cela permet au musée de renforcer son image de marque avec une reconnaissance du public positive.
Et vous, qu’en pensez-vous ?

A lire aussi :

Derniers Ergospeeds :

Ergospeed #13 : MoMa.com – Design and the Elastic Mind

Ergospeed #12 : Mobile Samsung Player F490

Depuis longtemps, je souhaitais faire un Ergospeed sur un téléphone mobile mais je n’avais pas envie de le faire sur l’iPhone ni sur le LG Viewty. Grace à  l’agence Heaven, le 27 mars dernier, j’ai pu assister à  une démonstration du dernier téléphone Samsung en compagnie de l’équipe française technique et marketing. Je remercie Damien et François de leur accueil et de m’avoir invité à  cette présentation qui fut très sympathique et enrichissante.

A Propos

Logo Samsung
menuLa marque sud-coréenne domine le marché du téléphone mobile français et en deuxième position mondiale après Nokia. Samsung sort environ une cinquantaine de téléphone par an en France et à  reçu en 2007 la récompense du prix international du design iF 2007 pour son interface en « croix » que l’on retrouve dans le F490 (vendu exclusivement en France).

Une navigation à  la carte

Le cà´té chic et raffiné du F490 est accentué grâce à  son interface fine, tactile et son grand écran de 3.2 pouces (240×432 pixels) laissant une place importante à  l’image. Sa nouveauté vient de sa navigation dites en « croix » rappelant l’utilisation du repérage cartographiquee. Chaque action de l’utilisateur est validée par une légère et douce vibration du téléphone provenant de la technologie « VibeTonz ».

Cette navigation est intéressante surtout pour l’utilisation du player audio et vidéo :

  • Instinctive et compréhensible grâce aux indicateurs visuels qui indiquent dès l’ouverture d’un média les fonctionnalités de la « croix » : play, pause, réglage du volume, de la durée (voir schéma ci-dessous)
  • Cette « croix » permet de guider et d’orienter l’utilisateur sur ses actions et l’accompagne dans ses mouvements.
  • Ce qui est dommage pour le player vidéo, c’est l’apparition de la croix qui peut obstruer la lecture en cours. Toutefois, cette dernière disparait très rapidement après action de l’utilisateur.
  • (Une alternative au scroll manuel pour régler le volume : des boutons sont présents sur le cà´té du mobile et permettent de régler le son)

Schéma Samsung

Sinon…

dossier

  • Ce mobile a de nombreux atouts dont l’optimisation des fonctionnalités avec un menu condensé et des pictos explicites.
  • Chaque rubrique sélectionnée dans le menu s’affiche avec un volet o๠l’utilisateur parcourt son contenu classé et le nombre de fichier qu’il contient. Cette solution permet une rapidité de navigation sans avoir besoin de passer par des écrans intermédiaires pour accéder au contenu.
  • La sélection en surbrillance et le copier-coller sont là . L’iPhone pourrait vite devenir jaloux !
  • La sensibilité aussi bien au doigt que à  l’ongle (très important pour une nana) ralenti parfois la prise en main.
  • Pas de clavier Azerty et Qwerty. Pas de wifi.
  • Niveau design, les boutons du pavé numérique sont assez strictes et marqués par des ombres accentuées. Les message d’alertes et les sous-menus ne sont pas homogènes par rapport à  l’interface spacieuse du téléphone.

Conclusion

3 mobiles

Qui dit téléphone tactile, dit iPhone. La comparaison se fera forcément. Néanmoins, ce téléphone ne sera pas un iPhoneKiller car sa sensibilité et sa navigation reste quand même assez difficile. Il reste néanmoins un très bel objet qui saura satisfaire le grand public.

A lire aussi :

Ergospeed #12 : Mobile Samsung Player F490