Pour interagir avec notre ordinateur, on utilise le combo inévitable : clavier + souris. Ca fait plus de 25 ans que ça existe et depuis, cette interface basique mais riche et accessible n’a peu ou pas évolué.
Interface tactile : bureau versus mobile
Depuis quelques années, des interfaces tacticles ont fait leur apparition dans le grand public. Je pense notamment à l’ordinateur HP avec écran tactile. Et puis il y a aussi l’iPhone qui, malgré son nom, ressemble davantage à un mini pc qu’à un téléphone portable.
D’ailleurs le côté tactile de l’iPhone est excellent, que ce soit au niveau technique qu’à celui de l’interface. Par contre, au niveau bureau, on est loin du compte.
Problèmes physiques des interfaces tactiles de bureau
Il y a plusieurs problèmes aux interfaces actuelles :
avoir à tendre le bras en continu pour utiliser l’écran face à nous
garder la tête penchée en bas pour utiliser un écran posé sur la table
les mains masquent l’écran
Problèmes de l’interface graphique
Graphiquement, et sans que ce soit lié au côté tactile, l’interface basée sur des fenêtres disposées en vrac sur un plan 2D pose problème. Certaines interfaces ont essayé l’approche 3D, sans grand succès.
On fait comment alors ?
10/Gui (alias Clayton Miller) propose une solution innovante et claire : écran + tablette tactile (10 doigts) + disposition horizontale des fenêtres (con10uum).
Le processus de création de l’interface d’une application peut passer par de nombreuses itérations. Même si au départ, le résultat était selon moi déjà très satisfaisant, il ne l’était a priori pas pour tout le monde. La vidéo Convert Design Evolution présente l’évolution de l’appli Convert par les excellents tap tap tap (le site est superbe, les applis aussi).
iPhone Mockup est à l’iPhone ce que Balsamiq est au web : une appli web pour faire des croquis d’interface. (D’ailleurs, Balsamiq inclut depuis peu des éléments d’iPhone).
Attention : l’appli est en version alpha et peut disparaître à tout moment (c’est ce que dit l’auteur ).
Ca se passe en 2004. Il s’agit d’un redesign très léger dans le processus d’achat d’un site de e-commerce. Les deux acteurs sont Best Buy et Luke Wroblewski (Interface Designer dont le blog est excellent).
Un problème de formulaire
Le problème : beaucoup d’internautes ont du mal à finaliser leurs achast à cause du formulaire qui apparaît en début de processus. Ce formulaire consiste en 5 éléments:
2 champs : Email et Mot de passe
2 boutons : Se connecter et S’inscrire
1 lien : Mot de passe oublié
Tout le monde avait des problèmes :
les nouveaux arrivants étaient réticents quant à l’idée d’avoir à s’inscrire avant de faire quoique ce soit
certains nouveaux arrivants ne savaient pas si ils étaient déjà venus auparavant et tentaient de se connecter avec leur adresse mail
même les habitués avaient du mal à se souvenir de leurs informations
Le formulaire, qui était là pour aider les gens (parce qu’il permettait de garder ses infos si on revenait régulièrement), était au final un obstacle à l’achat.
Une solution toute simple
La solution s’est avérée être particulièrement simple (du moins, dans son application) : le bouton “S’inscrire” a été remplacé par un bouton “Continuer” suivi d’un message.
Vous n’avez pas besoin de créer un compte pour faire des achats sur notre site. Cliquez simplement sur “Continuer” pour accéder au paiement. Pour accélérer vos achats futurs, vous pouvez créer un compte pendant le processus de paiement.
Si vous comptez développer une application pour iPhone et que vous voulez créer des ébauches de l’interface, utilisez donc ce PSD de l’interface de l’iPhone. Quasiment tout y est : boutons, clavier, liste déroulante, barre de progression, liste alphabétique… et bien sûr, l’iPhone lui-même avec plusieurs écrans déjà prédéfinis.
C’est très pratique car on se rend compte au pixel près de l’espace dont l’on dispose. Par exemple, si l’on décide de faire afficher le clavier, quel espace reste-t-il pour l’application ?
Non seulement, ce psd est complet, il est aussi graphiquement très proche de la réalité, et le fait que la plupart des éléments soient en vectoriel est un plus non négligeable. Gardez bien ce lien dans vos favoris car le psd sera régulièrement mis à jour par leurs auteurs.
).
