Le Post Infeeny

Les articles des consultants et experts Infeeny

Archives Mensuelles: octobre 2012

Windows Phone 8: In App Purchase & Developer Center

Commençons par quelques affirmations :

Les achats In-App sont utilisés par 93% des plus grosses applications sur iOS.
Les gens préfèrent à 75% acheter du contenu lorsque l’achat utilisant la facture téléphonique est possible. De plus certains pays n’ont pas de carte de crédits.

Les achats In-App sont disponibles dans tous les marchés.

Mais quoi vendre en tant que achat in-app ?

  • Objets de jeu (épées, niveaux, personnages)
  • Fonctionnalités (plus de fonctionnalités, d’autres graphismes, cartes)
  • Aide au jeu (pouvoir spéciaux…)
  • eBooks, magasines
  • Images, vidéos, musiques
  • Virtual Currency
  • Cartes postales de photos prises depuis le téléphone
  • Vidéos filmées et éditées sur le téléphone
  • Services numériques (sauvegarde de données sur le cloud, rent-a-map)

Nous devons fournir l’UX et la gestion de l’utilisation du produit vendu et Mircrosoft fourni l’infrastructure nécessaire à l’achat (outils de gestion, services géo-distribués, interface de paiement, acquittement du paiement).

Il existe deux types de produits In-App :

– Durables (Achetés une fois et valable à vie par exemple achat d’une carte dans un jeu)
– Consommable (Achat unitaire par exemple achat de monnaie virtuelle)

  • Il faut donc gérer la durée de vie du produit

Pour chaque produit identifié il faut un certain nombre de paramètres :

-Un id
-Un prix
-Un type
-Tag
– Metadata

  • Titre
  • Description
  • Icon

Les namespaces et méthodes à utiliser sont les mêmes que dans Windows 8 pour l’achat In-App (Get, Purchase, List). Il faut bien penser à appeler la propriété IsActive de ProductLicence pour avoir les informations les plus à jours.

Reporting

L’interface web du market place a été mise à jour pour offrir de étendre le reporting (actuellement disponible au niveau application) au niveau des produits In-App. De plus la latence du reporting est maintenant de 2 jours au lieu des 6-7 précédents.

On peut tester les achats in-app grâce à un Mock du MarketPlace.

Ils sont aussi disponibles pour les applications venant s’exécutant sur un modèle héritant de WP7 type XNA mais que sur les téléphones Windows Phone 8.

John

Shopping app case studies

Je reprends le relai de cette série sur les apps ecommerce (mcnstore oblige… ^_^) avec une session de retours d’expérience portant sur l’analyse de quelques apps et un témoignage sur l’appli « new egg », première app à faire du paiement totalement intégré.

L’appli « new egg » n’est pas très jolie mais elle est intéressante. Par exemple, le filtrage dans les listes est intelligemment fait depuis les appbars, les transitions et animations sont bien faites et donne une expérience agréable. L’appli est faite en XAML.

News egg s’est lancé dans une appli car cela permet de proposer une meilleure expérience utilisateur.

On voit ensuite l’appli « living social ». D’un point de vue design cette appli est épurée mais cela permet d’aller à l’essentiel en mettant bien en avant les deals proposés par l’appli, et en jouant sur la taille des items pour mettre certains items en avant. L’appli permet de personnaliser les items proposés de façon intelligente, en proposant une action « j’aime ce genre de deal » dans le détail d’un item. L’appli stocke le numéro de Cb en local (encrypté) et permet ensuite de l’achat en un clic. Autre concept intéressant, l’utilisateur peut se faire une wishlist découpée par sections (géographique dans le cas de cette appli). L’appli permet également d’imprimer des vouchers utilisables en magasin. Living social a egalement mis en place un système d’affiliation basé sur le share. Si on partage son panier après le checkout, et que 3 personnes achètent suite au partage, on reçoit des coupons de réduction (par un mécanisme d’url unique crées au partage). L’appli est faite en HTML/javascript.

Autre idée intéressante, les api de geoloc peuvent être utilisées pour localiser la personne si on doit avoir des frais de port ou des taxes différentes selon son adresse.

La session part ensuite en question / réponse, difficiles ou peu intéressantes à transcrire.

Guillaume

How to Leverage your Code across WP8 and Windows 8

Le but de la session est de voir des techniques pour partager du code entre windows 8 et windows phone 8.

Les apis :

Avec W7 : .NET C# /VB

Maintenant on dispose en plus de:

  • Windows Phone Runtime en C#, VB, C++
  • Api accessible en C++ : Direct3D, XAudio, …

Strategies utilisables pour partager du code :

  • Séparer UI et logic (MVVM par exemple)
  • Portable library
  • Utilisation de windows runtime

Au niveau de l’utilisation des portable classe library il est possible de mettre :

  • Les modèles
  • Les viewmodel
  • Une couche d’abstraction pour les fonctionnalités spécifiques de la plateforme

Le  but est d’essayer de limité le portage aux vues qui elles sont spécifique de la plateforme.

Dans l’exemple  présenté, une application charge des phtotos et des albums. Le chargement est spécifique à la plateforme : une technique utilisable est de mettre le code specifique dans les projets W8 / WP8 et d’utiliser l’injection de dépendance pour utiliser le code dans la portable library.

Dans l’exemple présenté le constructeur du viewmodel prend en paramètre une interface fournie par le code spécifique.

Sur WP8 les API Windows Phone Runtime ont été introduits : il s’agit d’api spécifiques à WP8 et d’un sous ensemble des apis Windows Runtime (W8) : il est donc possible d’avoir une partie du code en commun.

Ex : Windows.Networking.Proximity

Par contre à ce niveau la compatibilité est uniquement au niveau du code source : il faut donc lié le code source dans chaque projet spécifique.

La session continue avec les Composants Windows Runtime : Une démo montre qu’il est possible de partager le même code C++ (au niveau source) et de l’utiliser dans une appli W8 ou WP8 en créant un composant Windows Runtime (attention ici il faudra bien sur créer un projet pour le composant W8 et un pour WP8).

La session n’auras pas présenté de nouveautés « révolutionnaires » mais a au moins le mérite de rappeler certaines bonnes pratiques pour le partage du code.

Roch

Tips on self-evaluating the UX of your app

Petite session design/UX pour varier les plaisirs.

Les guidelines de design sont dispos sur http://design.windows.com et sur http://windowsstore.com et constituent un bon point de départ.

Le design d’une app est un cycle en 4 étapes :

  • Early sight review (concepts, scope)
  • Design review (prototype, vérif / guidelines)
  • App review (conformité avec les planches et le prototype, animations et interactions, wack)
  • Final review (telemetrie, ratings, commentaires)

Identifier les scénarios utilisateurs, se demander si le design et l’expérience sont homogènes et cohérentes, si la description de l’application dans le store reflète bien le ou les scénarios.

Il faut également anticiper sur les impacts sur certains concepts comme les live tiles, ou la facon dont les contenus seront présentés en vue snap.

Le layout des applications est basé sur une grille de 20px, et sur un layout horizontal (y compris en mode portrait), sauf en vue snap. Eviter absolument d’avoir du scrolling dans plusieurs directions dans un même écran.

Il est important de bien réfléchir au hub de l’application (la page principale). Elle présente une vue de la structure et des infos importantes de l’application, généralement découpées en section. Eviter les éléments de chrome type « voir plus » pour les sections, utiliser plutôt le titre de la section (comme dans l’appli du store).

Penser à l’utilisation des contrats et des talismans pour étendre l’utilisation de l’application, et fournir de la valeur par rapport au site internet ou aux applis concurrentes.

Guillaume

Key technologies for shopping apps

C’est la suite de la session vue par Guillaume tout à l’heure, mais avec un point de vue implémentation et non plus conception.

# Comment réutiliser des composants existants sur votre site web ?

On peut toujours embarquer son site web dans une web view dans son application, mais :

  • on mélange les principes de navigation et surtout ces principes peuvent être contradictoires
  • on mélange les concepts sur une même page : command, search, navigation…
  • on risque d’avoir des problèmes de performances
  • on peut faire communiquer l’application avec le contenu de la web view, mais ce n’est pas si simple et surtout dans plusieurs cas ça crash !

Il est donc plus intéressant de faire un développement natif qui réutilisera le contenu web, et ceci afin de pour profiter des contrôles natifs (performance, touch first…), d’avoir une expérience utilisateur consistante avec le reste de la plateforme (navigation, contrats…).

# Comment afficher et naviguer dans des grandes listes de données ?

Il ne faut pas bloquer l’application, donc on utilisera toujours les appels asynchrones.

On peut aussi s’appuyer sur les listes virtuelles, qui vont se charger au fur et au mesure du parcours de la liste.

Attention à utiliser un template simple pour le rendu des items car il va être répété de nombreuses fois.

Penser à utiliser du cache local et/ou des filtres pour limiter les échanges avec le serveur.

# Comment sécuriser la phase d’identification ?

Windows 8 propose un mécanisme pour sécuriser cette phase : le Web authentication broker.

  • Il isole l’application et le service d’authentification en échangeant des tokens et non pas les credentials directement
  • Il permet le SSO avec OAuth et OpenID

Comme annoncé ce matin, PayPal va livrer un SDK pour faire du paiement au sein de son application, un représentant de PayPal nous en fait une démo toute simple. Ce SDK se sur le web auth broker pour se connecter ET payer !

# Comment ramener un utilisateur dans son application ?

On utilise la Live Tile pour adresser du contenu à l’utilisateur et l’inciter à cliquer sur la tuile pour lancer l’application.

On peut aussi « pousser » différents types de notifications (texte, toast…) via le Windows Push Notification Service (avec un joli slide pour expliquer le processus d’inscription et de notification entre son app, son backend et WNS)

# Comment augmenter l’engagement de l’utilisateur avec son service ?

La réponse est bien sûr le Share !

On n’a pas besoin de se poser la question « quel réseaux sociaux implémenter ? » puisque le système va nous les proposer tous. On va donc se concentrer sur le contenu à partager, et inciter l’utilisateur à échanger.

On peut aussi penser son application en tant que cible pour récupérer une liste (mes livres préférés, ma liste au père noël…).

Encore un slide intéressant pour bien comprendre le mécanisme de partage la source, le ShareBroker et la cible !

# Impression

Pour ce qui se le demanderait, l’impression se lance via le charm Devices.

Il n’y a plus beaucoup de temps, alors on a juste droit à un rappel sur le faire que son application doit proposer sa vue imprimable, et qu’il est possible d’étendre les options d’impression par défaut.

En conclusion, une session intéressante qui aborde les points essentiels pour réussir une application e-commerce, et notamment le Web Authentication Broker !

Pierre-Yves

Designing awesome XAML apps in Visual Studio and Blend for Windows 8 and Windows Phone 8

Il nous a d’abord été présenté quelques bonnes pratiques, certaines pour débuter un projet d’autres à appliquer n’importe quand. Il nous a été conseillé de partir des templates Visual Studio car ces templates implémentent un certain nombre de fonctionnalités telles qu’une gestion du cycle de vie où du mode design intéressantes, utiliser une portable library pour partager du code entre WP8 et WIN8 (en particulier la class BindableBase).

Il nous a aussi été présenté que Blend et Visual Studio sont complémentaires et que certaines fonctionnalités se recouvrent dans les deux outils tels que l’édition de code C# ou de templates. Globalement Blend est plus fait pour éditer les animations et styles tandis que Visual Studio serait plus orienté code. Là encore rien de bien nouveau si ce n’est que Visual Studio a gagné en fonctionnalités par rapport à la version précédente en permettant d’éditer de manière plus poussée les templates (gestion du clic droit Edit Template comme dans Blend).

S’ensuit ensuit une démo complète montrant comme effectuer un maximum d’éditions de styles et templates dans Visual Studio et passage dans Blend pour les animations.

Cette session ne s’est pas avérée être ce que j’attendais. Je pensais avoir des trucs et astuces sous Blend pour l’éditions de styles un peu compliqués mais au final c’était plutôt tourné sur comment éditer un maximum de choses dans Visual Studio 2012 avec plus des ¾ du temps sous forme de démo continue.

John

Windows Phone 8: Native C/C++ Game Development

Le but lors du développement de Windows Phone 8 était de conserver le support des jeux existants fonctionnant avec XNA tout en réduisant le coût nécessaire aux développeurs de jeux vidéo pour cibler Windows Phone. Afin que cela soit possible la création d’un accès au code natif et à Direct3D a été faite. En effet, un certain nombre de jeux existant sur les plateformes concurrentes sont développée en utilisant des bibliothèques C++ open sources très répandues. L’impossibilité d’utiliser C++ sur WP7 limitait fortement l’adoption de la plateforme. L’adoption de C++ permet aussi l’interaction avec des middlewares existants.

La plateforme de développement de jeux-vidéos pour WP8 est alignée avec celle de Windows 8. On y retrouve la même API, le support de D3D11.1 de XAudio etc…

Le support des achats In-App est aussi de la partie.

Lors de cette session on a eu le droit à une démonstration de Havok depuis l’édition d’un niveau sur le PC jusqu’au déploiement

Il existe deux modes de développement utilisant Direct3D. Le premier est intégré est du Direct3C C++ pur, le second consiste à intégrer Direct3D dans XAML.

D3D Application Model :

  • C++ seulement
  • Accès l’API WP8 Direct3D
  • Réutilisation de code C++ aisée
  • Supporte les évènements liés au cycle de vie de l’application WP8

XAML Application Model :

– DrawingSurface

  • Utilise un swap chain ce qui pose des problèmes de performances
  • Peut-être utilisés partout dans l’application

–  DrawingSurfaceBackgroundGrid

  • Doit être l’élément racine de la page
  • Pas de swap chain.

Comment choisir entre les deux modèles ?

XAML App si on a besoin d’accéder aux live tiles, notifications, background agents et au XAML. Direct3D si on a besoin d’une performance absolue et qu’on n’a pas besoin de tout ce qu’offre XAML.

L’API Direct3D supportée est la version 11.1 et tous les appareils supportent un niveau de fonctionnalités Direct3D de 9.3.

C’est un subset de Windows 8 et donc les composants Windows Imaging Components (WIC), Direct2D et DWrite sont absents de Windows Phone 8 que l’on peut essayer de remplacer avec DirectXTex (http://codeplex.com/directxtext).

Certaines fonctionnalités historiques ont été supprimées mais peuvent pour la plupart être remplacées par le DirextX Toolkit (http://codeplex.com/directxtk) :

  • GDI
  • D3DX
  • Fixed Function
  • Runtime Shader Compilation

Vidéo et son

Pour la gestion du son le moteur IMFMediaEngine a été présenté, il est basé sur COM et supporte les opérations Play, Pause, Stop, Loop et Seek. Ce même moteur est utilisé pour la gestion des rendus vidéo coupés (Cut Scene Rendering). Il supporte les formats RGB et NV12.

Réseau

Pour la partie réseau on retrouve les Sockets TCP (SSL supporté) et UDP. Le Peer Finder qui permet de retrouver des devices/applications proches en Bluetooth ou NFC est aussi présent. XmlHttpWebRequest2 est lui aussi de la partie. En plus de tout ça on retrouve WinSock qui a été inclus afin de permettre aux développeurs d’utiliser les nombreuses bibliothèques open source qui en font usage.

Launcher et choosers supportés

  • MarketPlace Details Page
  • Application Review Page
  • MarketPlace Search
  • Launch Browser
  • Launch Connection Settings
  • Lauch Email Compose
  • Sharing : Social Networks, Email, Sms
  • Choose a photo

Session très intéressante et parfois un peu haut niveau. Il faut s’accrocher 🙂

John

Delivering Applications with RemoteFX in Windows Server 2012

Après la keynote et une première session très intéressante sur Windows Phone 8 (Compte rendu à venir : il faut qu’on consolide  nos notes avec John), on a décidé de se séparer. Donc pour moi je vais à une session sur RemoteFX. Pas grand monde dans la salle 20 minutes avant le début.

Speaker :  Shanmugam Kulandaivel.

NB : On parle bien du protocole RDP qui a été étendu dans la version Windows Server 2012.

1 minute avant le début : la salle est remplie à 80%

La session  commence par un historique de l’évolution de RDP :

–   Windows 7 :

  • Multi moniteurs
  • Media redirection
  • ..

–  Windows 8 :

  • Même expérience quand l’utilisateur est sur le LAN
    • Rich media
    • Utilisation du GPU
    • Multi touch …
  • En WAN : Multi-touch / WAN Acceleration

Le but de RemoteFX est d’avoir une expérience identique au local mais en remote

La session continue maintenant avec une démo du client métro remote desktop. Après identification, l’application liste :

–  Les remote desktop accessibles (machines)

–  Les remote app

Lors du lancement d’une remote app, il n’y a aucune différence visible entre une remote app et une application installée localement. Tout fonctionne (ex : intégration dans la barre des tâches, copier/coller, accès au système de fichier local …)

Il est possible de se déconnecter / reconnecter à une remote app exactement comme pour une session remote desktop.

Pour avoir accès à une application, un utilisateur doit seulement fournir son email. L’authentification est en mode intégré (dans le cas d’une intégration avec le domaine).

Les applications sont administrées en central.

Les remotes app sont une bonne solution pour les tablettes Windows RT (elles restent exécutées sur un serveur)

RemoteFX a été conçu (dans sa dernière version) pour être fluide et supporté le multitouch et également le rendu  graphique.

RemoteFX du point de vue graphique intègre les techniques :

–  Caching

–  Rendu progressif & adaptatif

–  Codec optimisés

–  …

RemoteFX utilise plusieurs types de codec en fonction du contenu (text / image / video & &animation)

Le rendu progressif est intelligent : il s’applique aux images mais pas au texte (sur une page mixant les deux)

Les paramètres de rdp (partage de ressource, …) peuvent être définis par une policy par l’administrateur : l’utilisateur n’a pas besoin de s’en soucier.

Quelques démos sympas, notamment Fruit Ninja en remoteApp !

RemoteFX a pris en charge la qualité du réseau :

–  Latence

–  Perte de packets

–  Bande passante

-> Peux notamment switcher entre TCP et UDP

->Détecte aussi en fonction du contenu, de la connection (3G/4G) … et adapte les codecs utilisés (exemple codecs tolérants à la perte de packets)

Media streaming avec remoteFX :

–  Au niveau serveur, il détecte le type de ressource (flash, html5, …) et est capable d’adapter les flux : permet de limiter la consommation en bande passante.

-> Démos lecture de 2 vidéos identiques en rdp et remotefx (W7 et W8) : total 54Mbps de bande passante. Une fois W7 arreter : 5-7 Mbps

S’en suit plusieurs démos comparatives W7 et W8 avec une très nette différence de perf et de fluidité.

RemoteFX vGPU : pour les applications qui nécessite l’utilisation de la GPU il est possible de profiter d’une GPU Virtuel (gérer par le serveur) à vive les pixel shader même si on a pas de super carte graphique !

La session finie sur du lync et sur la redirection des médias puis la redirection USB avec une petite démo (lance missile usb 😉

En bref RemoteFX dans sa dernière version c’est du RDP sous stéroides et semble bien être une très bonne solution pour les applications d’entreprise que ce soit du métro ou du desktop.

Roch

Guidance for shopping apps

Cette session présente guidelines et best practices pour les applications e-commerce pour le Windows store.
Après s’être fait jeté 2 fois manque de place pour la session précédente, je suis surpris du peu de monde présent à cette session.

Faire une application plutôt qu’un site permet de mettre en place une relation plus étroite avec l’utilisateur, et permet des ergonomies plus riches. On peut aussi proposer des processus d’achat  plus directs.

Dans ce genre d’application, la page d’accueil doit être particulièrement soignée. Elle donne un premier aperçu des produits proposés. Les éléments à prendre en compte sont la priorisation du contenu et la mise en avant du contenu.

La mise en place de la recherche est également un point qui peut être important.

Le produit doit être mis en avant, facile à acheter. Les actions qui ne sont pas liées directement au processus d’achat pourront tirer parti des appbars pour laisse le focus sur le produit.

Pour le processus d’achat, il est intéressant de profiter du roaming pour le panier, et de réduire au maximum le nombre d’étapes du processus de commande. Proposer du share après le checkout du panier est aussi un bon moyen de faire partager l’intérêt pour un produit.

Les features intéressantes pour ce genre d’appli :

  • Share source (marketing viral)
  • Share target (pour rechercher un produit, pour une appli de comparateur de prix)
  • Activation de protocole (par ex pour pointer sur un produit dans l’application)
  • Search (attention au filtrage des résultats, et aux temps de réponse, proposer des catégories pour affiner la recherche)
  • Settings (login, personnalisation, options de paiement)
  • Live tiles (la mise en avant des produits de l’application n’est pas considérée comme de la pub, et est donc valide avec les règles du windows store)
  • Notifications (statut de commande, etc )
  • Roaming des données (favoris, panier, préférences, items récents)

Pour le processus d’achat, il est préférable d’avoir quelque chose de totalement intégré (moins de pertes de panier). Il est possible de recourir à des webviews mais l’ergonomie peut être restrictive (touch, navigation, …).

L’application peut également être une option marketing pour mettre en avant la marque, ou améliorer la relation client.

Il faut penser également a soigner les captures d’écran et les autres éléments dans le windows store, pour donner envie aux utilisateurs d’installer son application.

Guillaume

The Microsoft design language

Session animée par Will Tschumy, User experience advisor

Microsoft a beaucoup misé et continue de miser sur le design.
Depuis le ruban Office, en passant par Windows Phone, et maintenant XBox et Windows 8

Tim détaille ensuite les 5 principes fondamentaux du design des applications Windows Store

  • pride in craftmanship :

Porter attention aux détails
Sûr et fiable
Géométrie, symétrie, hiérarchie

  • be fast and fluid

Concevoir pour une expérience tactile + clavier/souris
Feedback visuel sur les interactions
Interactions avec le contenu
Donner vie à travers le mouvement (transitions, …)

  • do more with less

Cibler l’application sur un domaine ou une tâche
Focaliser l’attention sur le contenu
Contenu comme mode de navigation

  • authentically digital

Epuré et basé sur la typographie
Eviter les métaphores au réel (ombre portées, …)
Limiter les décorations
Faire abstraction des barrières physiques pour tirer partie de l’expérience numérique

  • win as one

Guider l’utilisateur sur une action à la fois
Eviter la duplication des modes d’action
Homogénéiser le comportement (contrats, …)

2 points intéressants :

  • On peut vraiment sortir des archétypes mais il faut le faire consciemment !
  • Il faut repenser ou imaginer la manière dont on accède à son application via les contrats Search ou Share (ex. utiliser le share pour trouver une définition dans Wikipedia depuis IE10)

Ressources :
http://design.windows.com
http://windowsuserexperiencetraining.com

Pierre-Yves