Un regard à l’intérieur Design Patterns Mobile

Modèles pour la conception d’applications mobiles

Les modèles de conception pour mobile sont en train de devenir la plate-forme arrive à maturité. Theresa Neil nouveau livre mobile Gallery Design Pattern fournit des solutions aux défis de conception communs. Lire un extrait de chapitre sur les invitations et d’apprendre à engager immédiatement vos clients avec votre demande.

Nous avons eu récemment un nouveau projet à partir mobiles et l’ensemble de nos concepteurs expérimentés mobiles ont été comptabilisés. Depuis que nous avons d’abord concevoir les applications d’entreprise et des outils de productivité, et non pas tout le monde dans notre groupe était bien versé dans la conception d’applications mobiles. J’ai donc fait un rapide tutoriel avec beaucoup, beaucoup de captures d’écran. Peu à peu, un ensemble de motifs, à un niveau plus élevé que les lignes directrices de conception spécifiques 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 ». Voici un de mes préférés chapitres, Invitations. Les commentaires constructifs et d’autres exemples d’applications mobiles sont les bienvenus.

* Bien que ces modèles sont fondés sur les meilleures pratiques dans la conception d’applications mobiles, ils peuvent aussi être source d’inspiration pour la conception web mobile.

Invitations

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

Phototshop 5,5

Eh bien, je suppose des outils puissants, mais ne savons pas avec certitude. En fait, je ne savais pas comment commencer du tout. Mais j’ai eu un peu d’argent investi dans le logiciel et nécessaire de l’apprendre pour le travail. J’ai donc acheté un « Teach Yourself Photoshop en 24 heures » du livre et commencé à apprendre.

Rapide transmettre une dizaine d’années. Il ya des centaines de milliers d’applications mobiles, facilement disponibles sur le marché. Dans une catégorie quelconque il ya des dizaines d’applications pour le même but. Beaucoup d’entre eux sont gratuits, ce qui en fait tout aussi pratique de télécharger et essayer une autre application comme il est de lutter pour 5 minutes avec une interface peu intuitive.

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

Layar Reality Browser (version préliminaire)

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 de guider l’utilisateur de la fonctionnalité prévue. Une invitation simple peut transformer une expérience de temps en décourageant la première dans un satisfaisant.

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.

Dialogues sur TargetWeight et ActionMethod

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 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.

Conseils sur eBay et Andoid OS

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é).

Conseils sur liste d’achats

Tournée

Une visite fournit une véritable invitation en proposant une exploration écran par écran, fonction par fonction-de l’application. Le Nike GPS tournée est un excellent exemple de ce modèle. La visite est optimisé pour les mobiles avec une copie concise, des graphismes éclatants, une navigation simple et une sortie clairement marqués. Le 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 tournée.

Une tournée 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.

Invitation Tour de Nike

Invitation Visite du CalcBot

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 spécifiques et interactions, car elle dé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 et d’exploration. Google Goggles a un démo dans leur tournée 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.

Roambi de Démo

Google Goggles « Démo

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. Pulse et Phoster fois utiliser 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é).

Transparents sur Pulse et Phoster

Embedded

Contrairement aux autres invitations, invitations embarqués ne précèdent pas l’écran, ils se réfèrent. Invitations embarqués sont intégrés dans le design de l’écran. Ils restent dans l’interface jusqu’à ce qu’ils soient écrasés par le contenu. Beaucoup font remarquer en prenant les applications, comme Diary Mini et PageOnce, utilisez invitations embarqués à s’engager immédiatement à l’utilisateur d’ajouter du contenu.

Plusieurs invitations embarqués 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).

Invitations incorporés dans Diary Mini Android et PageOnce

Persistant

Invitations persistants sont intégrés dans l’écran et reste visible. Cet exemple de Recettes Jamie Oliver vous suggérons de passer en mode paysage pour découvrir une fonctionnalité supplémentaire. Montabilité c’est votre première fois sur cet écran, ou 10e fois, le message est toujours affiché. Printemps Pad utilise un intégré, l’invitation persistante à 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).

La persistance des invites dans Recettes de Jamie Oliver et Springpad

Découvrable

Une invitation détectable peut sembler un oxymoron, mais il 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.

Invitations en soi dans eBay et TweetBot

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