Evolution du design de l’application iPhone Convert (vidéo)


En attendant mon long billet sur les applications iPhone, je vous invite à  regarder cette vidéo des Tap Tap Tap.

Découverte sur bbxdesign.com, ces images dévoilent les différentes étapes d’itérations du design d’interface de l’application Convert.

Grâce à  cette vidéo nous constatons l’intérêt de l’optimisation pour ces designers. Que ce soit la couleur, la taille des boutons ou leurs positions, chaque détail a son degré d’importance, surtout dans un format restreint de 320x480px.

Merci à  Pierre Ammeloot pour ce lien 🙂

A lire aussi :

Evolution du design de l’application iPhone Convert (vidéo)

Outils pour concevoir des wireframes iPhone

iPhone Mockup

Actuellement en Alpha, iPhone Mockup risque de devenir un service indispensable dans les versions à  venir.
Ce service est gratuit, simple et rapide d’utilisation (drag & drop) pour :

  • Concevoir des prototypes sous 2 styles graphiques différents
  • Télécharger des images ou éditer du texte directement dans votre maquette
  • Travailler en collaboration avec différents utilisateurs vos prototypes via l’URL (synchronisation des modifications grâce à  sa conception en Ajax)

Malheureusement, vous ne pouvez pas encore enregistrer les prototypes sous différents formats… Bientà´t, peut-être ? !

Un service similaire mais payant : Pidoco .
Pidoco est un outil Web qui vous permet de créer des prototypes et collaborer avec des utilisateurs distants sur différents projets.


Toolkit iPhone pour Fireworks, Photoshop, Omnigraffle, PowerPoint ou Keynote.

Pour Fireworks & Photoshop

Un « Toolkit » d’éléments vector/png de l’interface d’iPhone pour Fireworks CS3 et CS4.

Un « Toolkit » pour Photoshop CS4 :

Source : blog.metaspark.com


Pour Fireworks CS4

Ce plug-in vous permet d’avoir un prototype interactif : non seulement vous pouvez interagir mais vous pouvez consulter directement sur votre iPhone votre prototype comme si cela était une véritable application.
Tutorial : Unitid.nl


Pour Omnigraffle

Une collection d’éléments pour prototyper votre idée dans Omnigraffle : Graffletopia.com


Pour PowerPoint ou Keynot

MockApp est un ensemble de modèle pour une utilisation dans PowerPoint ou Keynote.

A lire aussi sur iPhone :

Outils pour concevoir des wireframes iPhone

Ergospeed #20 : Converbot (application iPhone)

converbot_iphone
Grande découverte du weekend : L’application iPhone Converbot !
Ce convertisseur est à  la fois efficace, personnalisable et beau, que demander de plus ?

Il permet de convertir la monnaie, les unités de mesure, le temps… grâce à  une interface graphique de qualité et des effets sonores qui accentuent son interactivité.

Orienter l’utilisateur

La première fois que vous ouvrez Converbot, un tips vous invite à  visionner la démonstration qui permet de comprendre en un coup d’Å“il l’usage quotidien de ce convertisseur. Cette démo est vraiment bien réussie et tellement simple qu’elle ne peut être qu’efficace.

converbot

Navigation circulaire ou radiale

converbot ipod

En un coup de pouce vous sélectionnez votre unité grâce à  une navigation radiale. Cette approche assez attractive entre l’utilisateur et l’interaction qui en résulte peut rappeler la navigation de l’iPod. Grâce à  sa rapidité, l’utilisateur comprend directement le sens de lecture circulaire et son fonctionnement avec les différents paliers de sélection.

Sur cette vidéo ci-dessous, vous constaterez la fluidité de cette application dans son utilisation. La proximité et l’interactivité de chaque élément permet une meilleure utilisabilité et un confort d’utilisation provenant aussi de son graphisme et de ses retours sonores.

A tester et vite 🙂

Billets similaires à  une navigation circulaire ou radiale :
converbot_telecharger

Ergospeed #20 : Converbot (application iPhone)

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

Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)


Il y a quelques jours de cela, j’assistai au FanDay Gameloft qui avait pour but de présenter 3 nouveaux jeux de leur gamme sur iPhone et iTouch. Développeur, designer et marketeux étaient présents pour nous faire une démonstration de Asphalt 4, Real Football 2009 et Block Breaker Deluxe 2. Un grand remerciement à  Doudou qui m’a permis d’assister à  cet évènement et à  Cyrille de Gameloft pour toutes ces explications.

A propos

Logo Gameloft


MAJ : 16 janvier 2009 – Selon une étude menée par le site PocketGamer.biz, Gameloft a été le meilleur éditeur de jeux mobiles en 2008 pour la qualité de ses jeux. Les jeux Gameloft sont en tête des classements des sites spécialisés depuis 2003.
Lire le communiqué de presse

Petite sÅ“ur d’Ubisoft, depuis 1999, Gameloft édite et développe des jeux vidéos sur mobiles et consoles. En 2001, elle se voit cotée en Bourse et se positionne comme une entreprise innovante dans son domaine. Aujourd’hui, Gameloft vend en moyenne 3 jeux par seconde dans le monde et comprend environ 4000 employés basés dans une vingtaine de villes telle que New York, Mexico, Bogota, Paris, Londres, Copenhague… Plus d’infos

Asphalt 4 Elite Racing (v1.2.0)

Asphalt

Les critères d’utilisabilité d’un jeu-vidéo ne sont pas si différents d’une interface web. D’autres facteurs viennent se greffer et prennent en considération des émotions typiquement liées au jeu : immersion, joie, challenge, nervosité, fierté… Le jeu a pour vocation d’être ludique et l’expérience utilisateur entraine un apprentissage du jeu différent dans son utilisation et son approche.

Introduction & Chargement

Une vidéo fait office d’introduction (40s.) et se joue à  chaque lancement de l’application. Malgré sa magnifique réalisation, elle devient répétitive. Heureusement, l’utilisateur peut la zapper… Nombreux sont les jeux qui obligent l’utilisateur à  visionner une introduction inlassablement longue. Ici, Gameloft nous laisse le choix. Ouf !

Asphalt Loading Lors d’un chargement, chaque fin de loading doit être validé par l’utilisateur par un « Touche l’écran pour continuer ». Nous pouvons avoir deux points de vue différents sur cette action :

  • L’application demande l’autorisation à  l’utilisateur de passer à  une étape suivante. Donc, le joueur contrà´le ses actions.
  • Cela peut-être aussi freinant car l’application implique une action d’interaction en plus qui peut ralentir l’utilisateur dans son usage et son enthousiasme.

Pendant le chargement, notons la présence de tips (accompagnés, bien sûr, d’une fille à  forte poitrine. Forcément, nous sommes dans un jeu de course, donc qui dit Auto dit GrolOlO). Ces astuces didactiques permettent de faciliter l’apprentissage du jeu au joueur.


Graphisme & Interface

D’un point de vue esthétique, Asphalt est assez bien conçu : les décors et véhicules sont réalistes et l’authenticité du jeu se concrétise grâce à  la présence des licences telles que Mini, BMW, Mercedes, Ducati… La satisfaction du joueur provient des récompenses qu’il acquiert au fur à  mesure des étapes franchies. Grâce à  l’acquisition de ces licences, Gameloft offre à  ses joueur des récompenses gratifiantes avec des nouveaux modèles de véhicules customisables, mais aussi des circuits, des accessoires, des filles, etc.

Attention de ne pas systématiquement récompenser le joueur avec des gains non-appropriées à  ses compétences. Cela pourrait affaiblir sa motivation face au challenge. Le jeu se doit d’évoluer avec le joueur avec des paliers de difficultés de telle sorte que le challenge soit maintenu tout du long.

En ce qui concerne les pictogrammes et leurs agencements, il y a certaines incohérences qui peuvent nuire à  la compréhension de l’interface :

Gameloft Asphat icon

Dans les entêtes des rubriques, chaque picto est trop éloigné de leur intitulé et ne permette pas une reconnaissance visuelle. Surtout quand le « bouton retour » s’intercale entre les deux. De plus, ce dernier n’est pas visible au premier coup d’Å“il et l’absence d’intitulé le rend incompréhensible. Son graphisme est inadapté car il est trop ancrée dans notre quotidien pour un usage ayant l’action « Repeat » d’une musique ou « re-chargement » d’une page web.

Compréhension de l’interface

L’absence de flèches directionnelles dans certaines rubriques (aide, choix des filles, à  propos, tuning…) occasionne parfois des incompréhensions du joueur. Même si cela va de soi pour les utilisateurs d’iPhone que toute la navigation se fait avec le Touch, un petit indicateur de direction ne fait jamais de mal 😉

Le but d’un jeu est de captiver l’utilisateur en l’immergeant dans un univers. Le jeu se doit de le tenir en haleine tout au long d’un fil conducteur sans perturber sa perception du jeu et l’interactivité qui lui offre. Les menus, options, éléments graphiques de l’interface doivent être suffisamment compréhensibles et facile d’utilisation pour laisser au joueur une totale attention au jeu. Le moindre obstacle peut être fatale.

Ici, par exemple, le volume et les 4 modes de visualisations :

Asphalt Volume Option du son
Sur chaque option du son, il manque un bouton on/off qui permettrait au joueur d’être plus rapide dans ses actions de configuration. Ces boutons sont des raccourcies qui amélioreraient l’usage du volume de la musique et des effets sonores.

Quatre mode de visualisation possible
L’absence de prévisualisation des 4 modes de caméras lors de leur sélection est un énorme frein pendant une partie. Cela ralenti et déstabilise le joueur lors de son changement de caméra en plein course. Absence de raccourcies sur l’écran du jeu.

3 modes de navigation lors du jeu

Grâce à  l’interface de l’iPhone, les concepteurs de jeu peuvent envisager de nouveaux modes de navigation et d’interactions. Ici, Asphalt en comporte trois :
Asphalt Navigation

Le coup du volant : Difficile à  manipuler car seul le pouce gauche doit interagir sur le volant afin de diriger au mieux l’auto. Il rappelle la manette d’une console avec son stick analogique.

Touch My Screen : L’interaction se fait en touchant le coté gauche et droit de l’écran. Personnellement, je n’y arrive pas du tout mais des amis n’utilisent que ce mode… donc…

Sans les doigts : L’utilisateur manipule directement l’iPhone grâce à  l’accéléromètre pour guider le véhicule. Le mode que j’utilise le plus et même dans le métro j’y arrive !


Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design réaliste et adapté à  la cible
– Icà´nes compréhensibles
– Interaction facile avec des boutons de dimensions adapté au Touch
– La typographie de l’interface est parfois difficile à  lire 4/5
2. Efficacité
[pertinence de l’information]
– Accès à  l’info rarement insatisfaisant
– Hiérarchisation des rubriques compréhensible
– Absence d’accueil (icon course = HP : incompréhensible)
– Mode de visualisation
– Option volume
3/5
3. Efficience
[rapidité de navigation]
– Accès aux rubriques/option facile
– Les 3 modes fonctionnent assez bien en format portrait ou paysage
– Le jeu saccade souvent et rame au début de la course
– Le temps de chargement est assez long et doit être validé à  chaque fois
– Absence de repère visuel directionnel pour certaine rubrique
2/5
4. Satisfaction – Immersion dans le jeu grâce aux graphisme et difficultés des courses
– Récompenses gratifiantes
– Mode multi-joueur fonctionnant assez bien en wifi
– Saccadement du jeu
– Interface qui freine le joueur lorsqu’il décide de changer de configuration
4/5

Conclusion

13/20

Asphalt est un jeu au graphisme et réalisme assez bien réussi o๠le challenge est évolutif (circuits et voiture à  débloquer, fille à  GrolOlO et des kit de Tunning à  gagner). Grâce à  ce jeu, je redécouvre le plaisir de la conduite et le cà´té grande poursuite à  l’américaine avec hélicoptère. Asphalt me permet tous les jours, d’exploser des taxis, des voitures et d’abuser de la nitro dans le métro. Depuis que j’ai récupéré un iPhone, je me suis remise à  jouer et je n’arrête plus. L’AppStore est tout de même une très bonne plateforme de distribution d’applications/de jeux qui permet aux développeurs d’innover et de contribuer à  la communauté. Ma conclusion ne finit pas par des questions sur l’avenir de l’iphone comme console car dernièrement j’ai eu une forte discussion avec des amis qui considèrent l’iPhone comme un objet de consommation ostentatoire qui ne pourra jamais concurrencer une DS ou PSP.

Donc… 🙂

Les éditeurs de jeux devraient-ils commencer à  se méfier du pouvoir de la Pomme ? L’iPhone ne va-t-il pas de devenir l’objet unique qui risque de faire de l’ombre au console portable d’ici quelques années ?

Ergotests précédent :

Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)

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