Un regard à l’intérieur Design Patterns Mobile. Enfin … euh… plus tôt :
comment ca fonctionne le design mobile, chef ?

Les modèles de conception pour mobile sont en train de devenir incontournable.  La plate-forme mobile arrive à maturité et Theresa Neil  dans son nouveau livre « mobile Gallery Design Pattern » nous fournit des solutions pour réussir nos conceptions mobile.
En voici un extrait traduit librement en français.

« Nous avons eu récemment un nouveau projet mobile et l’ensemble de nos concepteurs expérimentés ont été mis sur le pied de guerre. Nous savons concevoir les applications pour l’entreprise et des outils de productivité. Mais dans notre groupe, tout les développeurs n’ont pas ou ne savent pas utiliser un smartphone, a partir de ce constat créer une applications mobiles pour notre client allait devenir une grande aventure.

J’ai donc fait un rapide tutoriel avec beaucoup, beaucoup de captures d’écran.
Peu à peu, un ensemble de lignes directrices pour la conception spécifiques  des OS, a émergé. Ces 70 modèles, illustré avec des centaines d’exemples de iOS, BlackBerry, Android, Symbian, Windows et les applications webOS, sera publié ce mois-ci à partir de O’Reilly Media en tant que « Galerie Design Pattern Mobile » en voici un extrait :

Invitations

Vous souvenez-vous la première fois que vous avez utilisé Photoshop? Je me souviens d’ouvrir l’application et de voir une page blanche et une vaste gamme d’outils puissants.

Eh bien, fasse a ses outils puissants, mais je ne savais pas comment commencer. J’ai donc acheté un « Teach Yourself Photoshop in 24 hours » pour commencer à apprendre.

De même aujourd’hui, il y a des centaines de milliers d’applications mobiles, facilement disponibles sur le marché. Dans une catégorie on retrouve des dizaines d’applications pour le même but. Beaucoup d’entre elles sont gratuites, ce qui en fait tout aussi pratique pour les télécharger et les essayer.

Considérons l’expérience initiale avec  le navigateur Layar Reality, un logiciel de réalité augmentée.

Qu’est-ce qui peut m’aider à obtenir à partir de cet écran gris à la réalité augmentée?
Une invitation.

Les invitations sont des conseils utiles qui sont affichés la première fois qu’un utilisateur ouvre une application ou arrive à un nouvel endroit. Ils suggèrent des actions et guide l’utilisateur vers la fonctionnalité prévue. Une invitation est simple et peut transformer une expérience dans le temps ou décourager l’utilisateur.

Modèles d’invitation mobiles comprennent:

Dialogue	Pointe	Tournée	Démo
Transparence	Embedded	Persistant	Découvrable

Dialogue

Une simple boîte de dialogue avec des instructions est le type le plus commun d’invitation dans les applications mobiles, sans doute parce qu’il est le plus facile à programmer.
Il est également plus susceptible d’être rejetée et ignorée.

Gardez le contenu de dialogue à court, et assurez-vous il ya une autre façon d’accéder à des instructions dans l’application.

Pointe

Une astuce peut être mis en œuvre partout dans l’application, le rendant plus pertinente au contexte d’un dialogue. Et quelques conseils qui peuvent être utilisés sur n’importe quel écran, et pas seulement l’écran d’accueil.

Dans l’application d’eBay, une pointe est utilisée pour attirer l’attention sur la fonction « enregistrer une recherche » fonction, ce qui pourrait autrement être négligés car il est où le titre de la page est normalement affichée.
Le système d’exploitation Android affiche une pointe de Clippy qui rappelle la fenêtre, le trombone utile, pour expliquer comment personnaliser l’écran d’accueil.

ShoppingList révèle progressivement plus de conseils tout au long de l’application.

Conseils Place à proximité de la fonction qu’ils appellent, garder le contenu court, et retirer l’embout une fois l’interaction commence (c.-à-lorsque l’écran est touché).

Tournée

Une visite fournit une véritable invitation en proposant une exploration écran par écran, fonction par fonction de l’application.
Le GPS de NiKE est un excellent exemple de ce système.
La visite est optimisé pour les mobiles avec une copie concise, des graphismes éclatants, une navigation simple et une sortie clairement marqués.
Un tour est offert sur l’écran d’accueil, et une fois lancé, vous pouvez taper dans chacun des sept conseils. Nike et CalcBot utiliser « des indicateurs page » et un décompte (2 sur 7) pour marquer clairement l’étape actuelle de la boucle.

Une boucle devrait ressortir les principales caractéristiques de l’application, de préférence à partir d’un point de vue objectif (l’utilisateur).
Il doit être court et visuellement attrayant.

Démo vidéo

Une vidéo de démonstration peut être la meilleure forme d’invitation pour les applications qui reposent sur des actions  et interactions spécifiques. Elle montre l’application en action.

Roambi utilise une démo personnalisée pour mettre en valeur son vaste choix de visualisations de données et l’utilisation de certains gestes pour une navigation optimale. Google a une démo qui peut être ouvert et affiché dans YouTube.

Les démonstrations doivent présenter les caractéristiques clés ou montrer comment utiliser l’application à partir d’un point de vue de workflow standard. Caractéristiques communes (vidéo arrêt, pause, réglage du volume …) doivent être fournis.

Transparence

Alors que le reste de ces modèles existent sur le web, la transparence est unique aux appareils à écran tactile (jusqu’à présent). Typiquement vu sur les écrans d’accueil, une transparence est une couche de voir-à travers un schéma d’utilisation positionné sur le contenu réel à l’écran. Ce modèle invitation à rapidement et visuellement expliquer comment naviguer dans le contenu dans les applications.

Les transparents doivent être utilisés judicieusement, et ne sont pas destinées à compenser pour les conceptions d’écran pauvres. Retirez la transparence une fois l’interaction commence (c.-à-lorsque l’écran est touché).

Embedded

Une invitation embarquée est intégrées dans le design de l’écran. Il reste dans l’interface jusqu’à ce que l’information soit écrasée par du contenu. Utilisez une invitation embarquée, c’est engager immédiatement l’utilisateur à ajouter du contenu.

Plusieurs invitations embarquées peuvent exister dans un seul écran. Différencier clairement l’invitation du reste du contenu avec des images ou d’autres indices visuels (c’est à dire ne pas utiliser la même couleur et la taille du texte de l’invitation que celle utilisée pour le contenu régulier).

Persistant

Une invitation persistante reste visible à l’écran au cours de la navigation.

Par exemple Jamie Oliver nous suggère de passer en mode paysage pour découvrir une fonctionnalité supplémentaire.
Si c’est votre première fois sur cet écran, ou 10e fois, le message est toujours affiché. Printemps Pad utilise une invitation persistante pour montrer que plus de notes peuvent être ajoutées en appuyant sur le «+».

Il doit être court. Différencier clairement l’invitation du reste du contenu avec des images ou d’autres indices visuels (c’est à dire ne pas utiliser la même couleur et la taille du texte de l’invitation que celle utilisée pour le contenu régulier).

Découvrable

Une invitation détectable ressemble a un oxymore, mais c’ est un moyen efficace d’encourager les interactions spécifiques sans pour autant encombrer l’écran.
Ces invitations sont destinées à être découvert lors de l’exécution d’un geste commun, comme agitation ou glisser.

Utilisez invitations découvrables avec parcimonie. L’exemple le plus commun de ce modèle est utilisé pour inviter de rafraîchissement et de charger plus de résultats.

Mobile Réservez Galerie Design Pattern et du site

Les invitations sont tout simplement l’un des types de modèles dans la galerie de Design Pattern Mobile. Obtenez le prochain livre O’Reilly, « Galerie mobile Design Pattern », pour en apprendre davantage sur les habitudes de mobiles pour:

• Navigation
• Formulaires
• Tableaux
• Recherche, Trier et filtrer
• Outils
• Graphiques
• Feedback & Affordance
• Aider

et un chapitre bonus sur Anti-Patterns.

Consultez également la galerie Mobile Design Pattern:

• site Web
• Galerie motif
• Blog
• Flickr

Ressources modèle plus

Patrons pour Android: AndroidPatterns

Patrons pour iPhone OS: Patterns mobiles , les Pttrns

General Mobile Patterns l’interface utilisateur: 4ourth