Considérations relatives à la conception d'applications mobiles pour les concepteurs Web
Partout où vous tournez, les gens parlent des applications mobiles . Apps pour cela, des applications pour cela.
Les statistiques aussi ont été un peu ahurissantes. Une étude récente de Rafale, ont montré que les consommateurs passaient 81 minutes par jour à utiliser des applications mobiles, contre 74 minutes de navigation sur le Web.
Alors que de plus en plus de gens commencent à utiliser des appms comparés à Internet, vous vous demandez peut-être si vous devez commencer à explorer la conception d'applications mobiles et à quel point vos compétences en conception Web sont transférables.
Dans cet article, nous nous sommes entretenus avec un certain nombre d’experts dans le domaine pour obtenir leurs points de vue. Nous accueillons Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark et JD Biersdorfer.
Robin Nixon
Robin Nixon est auteur technique et développeur web et est l'auteur du nouveau livre HTML5 pour iOS et Android: Guide du débutant .
sQuels conseils donneriez-vous aux concepteurs Web qui envisagent d'entrer dans le domaine de la conception et du développement d'applications mobiles?
À mon avis, le moyen le plus rapide de développer des applications est de vous assurer que vous êtes à jour avec les dernières normes HTML (version 5) et CSS (version 3) et que vous utilisez JavaScript aussi facilement que possible. Il existe probablement des solutions pour écrire une seule application Web pouvant être transformée en applications natives pour tous les systèmes d'exploitation iOS, Android, Web OS, Windows Phone, etc. Cela vous évitera d’avoir à apprendre plusieurs langages complexes et des environnements de développement tels que Java, Objective C, .NET, etc., et le temps nécessaire pour transférer un projet sur plusieurs périphériques différents.
Par exemple, avec des bases solides en HTML, CSS et JavaScript, vous pouvez facilement assembler de superbes applications Web que vous pouvez également transformer en applications autonomes en utilisant les informations de mon livre HTML5 pour iOS et Android. aider à rationaliser le processus.
Microsoft déclarant maintenant que les applications Windows 8 seront créées en HTML et en JavaScript, il y a encore plus de raisons de vous assurer que vous avez une connaissance approfondie de ces technologies, en particulier depuis que Microsoft est en passe de celle vue maintenant dans Windows Phone 7 - et surtout sa prochaine mise à jour de Mango.
Dans quelle mesure les compétences Web sont-elles transférables?
Les compétences Web sont hautement transférables pour le développement d'applications, si vous utilisez les trois technologies HTML, CSS et JavaScript pour les construire. Mais si vous envisagez de prendre l'itinéraire natif et d'écrire vos applications en Objective C (pour iOS) ou Java (pour Android), vous aurez besoin d'un environnement de programmation plus élaboré que celui du développement Web. .
Heureusement, pour la grande majorité des applications, il est possible d'utiliser des technologies Web pour obtenir des résultats similaires à ceux de l'écriture de code natif. Ce n'est que lorsque vous atteignez des fonctions critiques, telles que les exigences de fréquence d'images élevées des jeux d'action rapide, que vous devez revenir au langage natif d'un périphérique ou d'un système d'exploitation.
Selon vous, quelles applications pensez-vous qu’il s’agit d’une application bien conçue?
Je n'aime pas vraiment mentionner des applications en particulier car elles sont nombreuses, mais depuis que vous avez posé la question, une application remarquable est sans doute Theodore Gray Les éléments , qui est une exploration 3D interactive de tous les éléments, dans laquelle vous pouvez presque imaginer les toucher car vous pouvez faire pivoter chaque échantillon, les déplacer avec vos doigts et même les visualiser en 3D. Pour moi, ceci est un exemple où un livre électronique (ce que c'est vraiment) devient beaucoup plus qu'un simple livre à la traduction de livres électroniques (ce que sont la plupart des autres livres électroniques), amenant les livres à un tout autre niveau.
Les éléments
Comment voyez-vous cette fois dans la conception de sites Web?
Robin Nixon: Je pense que c'est le moment le plus excitant pour les programmeurs et les développeurs depuis le début des années 1980, lorsque les micro-ordinateurs ont commencé à fleurir. Une fois que le PC a pris le trône de l'informatique, seuls les Mac et le système d'exploitation Linux offraient une réelle concurrence (et très peu à ce niveau). Mais maintenant, les guerres du système d’exploitation sont à nouveau activées, cette fois-ci alimentées par l’adoption exponentielle d’appareils mobiles tels que les téléphones et les tablettes, et le téléchargement phénoménal d’applications pour eux, ce qui signifie A mon avis, "il y a de l'or dans les collines".
Aaron Maxwell
Aaron Maxwell est le fondateur de Mobile Web Up, un conception web mobile agence.
Que devraient penser les concepteurs Web lorsqu'ils se lancent dans le domaine des applications Web?
Beaucoup des mêmes concepts s'appliquent toujours. En tant que concepteur, réfléchissez aux actions que vous souhaitez que l’utilisateur soit capable de réaliser. Cet objectif est souvent le meilleur endroit pour commencer.
Les menus sont plus efficaces quand ils ne sont pas submergés par trop de choix. Organisez-vous dans une structure hiérarchique et détaillée, avec pas plus d'une douzaine de choix à chaque niveau. Déterminez si l'utilisation d'une navigation par onglets aidera l'utilisateur à prendre rapidement les différentes mesures dont il a besoin.
L'espacement des éléments est délicat sur les mobiles. Le remplissage supplémentaire est une technique très utile sur le bureau pour le regroupement sémantique; Vous pouvez regrouper un groupe de widgets, d'images ou de zones de texte liés et les distinguer d'un groupe différent en séparant uniquement l'espace vertical et horizontal.
Mais sur un écran mobile, vous avez juste beaucoup de biens immobiliers à travailler. Le concepteur doit donc être plus économique en ce qui concerne la séparation spatiale des éléments et le remplissage de quelques pixels plutôt que de dizaines. Cela peut fonctionner en incluant d'autres indices. Les coins arrondis autour d’un périmètre impliquent un regroupement. Et différentes couleurs de fond peuvent également communiquer un changement de contexte.
Ce que vous omettez est au moins aussi important que ce que vous avez mis. Pensez à ceci: chaque élément ajouté au menu des paramètres, par exemple, a un coût en complexité, en temps et en attention pour l'utilisateur. Examinez avec soin si une fonctionnalité ou un élément en vaut la peine, en particulier compte tenu du type d’environnements à forte distraction que les applications mobiles ont tendance à utiliser.
Selon vous, quelles applications illustrent un bon design?
Il est important d'étudier d'autres applications mobiles très performantes pour trouver ce qui est efficace. Regardez les noms célèbres: Facebook, Skype, quel que soit le client Twitter le plus populaire cette semaine. Demandez à vos amis et à votre famille quelles applications ils utilisent le plus et essayez de comprendre pourquoi. (Indice: ils peuvent ne pas savoir consciemment pourquoi, alors leur demander directement n’aidera pas beaucoup.) Modèles d'interface utilisateur mobile.
Sarah Lynn
Sarah Lynn est un concepteur web et créatif et le propriétaire de Sarah Lynn Design.
Comment suggérez-vous aux concepteurs de se lancer dans l'apprentissage de la conception d'applications mobiles?
J'ai trouvé certaines des meilleures façons d'apprendre à concevoir des applications en faisant des recherches sur le marché. Examinez certaines des applications, analysez leurs fonctionnalités, quels éléments elles utilisent déjà, et comment elles peuvent être améliorées pour être plus faciles à utiliser. Étudiez les interactions de différents éléments et comparez les différentes applications. De nombreuses entreprises ont déjà pris le temps d'effectuer des tests approfondis auprès des utilisateurs. Apprenez de ce qu'ils ont déjà développé et trouvez des moyens de les développer et de les améliorer.
Il y a beaucoup de bons livres là-bas pour vous aider à démarrer. Je recommande vivement un livre de Suzanne Ginsburg intitulé Concevoir l'expérience utilisateur iPhone . Si, bien sûr, vous êtes intéressé par le marché iOS. Il parle des tests utilisateur et de la planification d'une conception d'application. Un bon point de départ lorsque vous ne savez pas comment procéder pour concevoir une application.
Apprendre à obtenir des commentaires des utilisateurs et à planifier sur papier avant de se rendre à l’ordinateur est une excellente compétence pour tout concepteur d’applications (ou concepteur interactif en général). Une autre excellente façon d'apprendre est de contacter un concepteur d'applications qui produit déjà un excellent travail. Demandez-leur d'être un mentor et de vous donner les conseils qu'ils sont prêts à offrir. La plupart des concepteurs sont prêts à passer quelques instants si vous le leur demandez. Obtenez des commentaires de vos amis et d'autres concepteurs que vous connaissez peut-être. Montrez-leur vos prototypes et obtenez leurs commentaires.
À votre avis, à quel point les compétences en conception Web pour la conception d'applications sont-elles transférables?
Quelque peu transférable. Je dirais que cela relève davantage du design d'interaction dans son ensemble. Ce qui les englobe tous les deux.
En raison de la taille des appareils, des exigences des différentes plates-formes et de la manière dont les utilisateurs interagissent avec les applications par rapport à un site Web, vous devez tenir compte de plusieurs facteurs. Les profils d’utilisateurs mobiles peuvent varier considérablement, de l’utilisateur mobile classique, à l’utilisateur mobile qui est tout simplement trop paresseux pour saisir son ordinateur portable et utiliser ses applications tout en restant à la maison (y compris moi-même). Les modèles et la conception pour s'adapter à différents styles de vie peuvent être similaires dans un sens à la conception d'un site Web. Quel que soit le support, vous cherchez toujours à le concevoir en fonction de votre public cible.
Apprendre à penser dans un format plus petit et souvent moins flexible peut être difficile. Il en va de même pour la réflexion sur le paysage par rapport à la verticale et comment vous pouvez adapter votre application pour qu'elle fonctionne dans les deux sens. Exploiter les outils intégrés de l'appareil mobile est une autre raison pour laquelle la recherche est si importante lorsqu'il s'agit de concevoir des applications. Il vaut mieux choisir une plate-forme et en apprendre les tenants et les aboutissants, plutôt que d'essayer de les apprendre tous. Si vous essayez de tout apprendre en même temps, cela peut être intimidant et accablant.
Tout comme tout nouveau média, il nécessite la volonté d'apprendre et de se tenir au courant du marché en évolution rapide pour réussir.
Mike Gualtieri
Mike Gualtieri, est analyste principal chez Forrester Research et auteur du nouveau rapport, Meilleures pratiques pour la conception d'applications mobiles .
À quoi un concepteur d'applications doit-il accorder une attention particulière lors de la conception d'une bonne expérience utilisateur?
Les attentes des utilisateurs sont plus élevées pour les applications mobiles que pour les sites Web. Les applications iPhone d'Apple ont apporté un cachet de conception aux applications mobiles. De plus, les fonctionnalités tactiles et gestuelles offrent de nouvelles façons d'interagir avec les applications. La première étape pour concevoir de superbes applications consiste à mieux comprendre vos utilisateurs qu’ils ne les comprennent eux-mêmes. La recherche quantitative et qualitative traditionnelle est importante pour créer des personas (personnes fictives qui représentent vos utilisateurs). Un design génial vient de l'imagination du concepteur en imaginant ce que l'utilisateur trouverait utile, utilisable et souhaitable dans le contexte de l'application.
Pour les applications mobiles en particulier, les concepteurs doivent tenir compte des cinq dimensions du contexte de la conception mobile: emplacement, locomotion, immédiateté, intimité et périphérique.
Source: Forrester Research, Inc.
Quels conseils donneriez-vous aux concepteurs de sites Web qui envisagent d'aller dans cette direction?
Fais le. La conception d'applications mobiles pour smartphones et tablettes représente une opportunité croissante. Tout le monde a besoin d'un grand design. Il existe trois chemins vers le développement d'applications mobiles:
- Applications natives. Si vous avez des compétences en Javascript, vous avez des compétences en programmation. Ne soyez pas intimidé par Objective C pour iPhone ou Java pour Android. Feuilletez un livre sur l’un et l’autre et vous pourrez vous faire une idée rapide si vous pouvez vous en occuper. Tous les concepteurs Web ne seront pas en mesure de suivre une formation complémentaire.
- HTML5. applications
- Hybride. Est une application native qui rend HTML5 à l'intérieur.
Tous ces chemins de développement nécessitent une conception.
Josh Clark
Josh Clark est un concepteur, développeur et auteur de Tapworthy: Concevoir de grandes applications iPhone et Meilleures applications iPhone: le guide de discrimination des téléchargeurs .
Quels conseils donneriez-vous aux concepteurs Web intéressés par la conception et le développement d'applications? De quoi ont-ils besoin pour apprendre?
En ce qui concerne les technologies de conception actuelles, il n'est peut-être même pas nécessaire d'apprendre beaucoup plus. Vous pouvez créer des interfaces d'application impressionnantes en utilisant nos amis HTML, CSS et JavaScript éprouvés. Je ne parle pas seulement des applications Web traditionnelles ici, mais aussi des "applications hybrides". Ce sont des applications dont les interfaces sont conçues avec du code HTML, mais livrées en tant qu'applications natives dans les différents app stores. C'est comme distribuer votre application Web via l'App Store. Pour les concepteurs Web, il s'agit d'un moyen accessible de commencer à concevoir des applications Web sans apprendre un langage de programmation.
Jonathan Stark a écrit deux excellents livres qui donnent un aperçu de la façon de procéder, en utilisant un projet open-source appelé PhoneGap, qui regroupe votre application Web dans son propre navigateur en tant qu'application native: Création d'applications iPhone avec HTML, CSS et JavaScript et Création d'applications Android avec HTML, CSS et JavaScript .
Voici le truc: Bien que vous puissiez faire des choses remarquables avec HTML5 et CSS3, ces technologies ne peuvent tout simplement pas correspondre à la perfection des applications Real McCoy, un logiciel conçu avec la langue native de l'appareil. Si vous voulez créer des applications avec des graphiques, des animations, des widgets natifs et un accès complet à l’ensemble de l’appareil, vous feriez mieux d’être natif. Cela signifie que vous devez coder les applications iPhone dans Objective-C, les applications Android en Java, etc. Ce ne sont pas des langages de programmation amusants et ils peuvent représenter une montée en flèche pour les concepteurs de sites Web. Si vous optez pour cette voie, vous pouvez vous associer à un codeur plus expérimenté pour vous aider à donner vie à vos créations. En attendant, expérimenter la conception d'applications avec HTML, CSS et Javascript peut être un excellent moyen de se familiariser avec la plateforme et même de créer des prototypes rapides pour les applications natives.
En ce qui concerne le processus de conception proprement dit, la conception des expériences mobiles diffère de manière importante de la conception de postes de travail. Les deux pièges pour les nouveaux venus sont l'ergonomie et le contexte.
Pour les appareils à écran tactile, vous devez affronter des problèmes d’ergonomie honnêtes. Vous concevez une interface pour les doigts et les pouces, ce qui signifie que vous devez prendre en compte les problèmes de confort où votre pouce se pose naturellement sur l'écran? Plus que cela, il y a des problèmes de visibilité. Lorsque vous travaillez une interface à la main, vous êtes en train de masquer l'écran. Cela signifie que vous devez concevoir vos contrôles pour qu'ils n'interfèrent pas avec le contenu. Ces deux considérations (confort et visibilité) expliquent pourquoi la plupart des smartphones à écran tactile affichent leurs commandes principales et leur navigation en bas de l'écran. C'est là que votre pouce s'immobilise lorsque vous utilisez le téléphone d'une seule main, ce qui signifie également que vous pouvez utiliser les commandes sans gêner le contenu. C'est exactement le contraire de ce que nous avons l'habitude d'utiliser sur le bureau où les menus principaux et les commandes vont en haut de l'écran.
L'autre domaine nouveau à considérer est le contexte. Comment et où les gens vont-ils utiliser cette application? Comment cela affecte-t-il leurs priorités et les fonctionnalités à privilégier? Vous devez faire attention ici. Un mythe a évolué: il n’existe qu’un seul type d’utilisateur mobile: pressé, pressé, distrait. C'est certainement le cas parfois, mais pas tout le temps. Le mobile n’est pas que sur le pouce: il est sur le canapé, dans la cuisine, en attente à l’aéroport pour un vol retardé. Toutes ces situations sont des moments où votre public a beaucoup d’attention et peut vraiment passer du temps avec votre application. Dans le même temps, les appareils mobiles peuvent également faire plus que les ordinateurs de bureau, car ils sont dotés de tous ces capteurs qui leur permettent de disposer de super pouvoirs: GPS, microphone, appareil photo, tactile, gyroscope, boussole. Ce contexte de périphérique définit la manière dont votre public utilise son téléphone et s'attend à utiliser votre application.
Tout cela signifie que vous devez considérer la manière dont le contexte de périphérique affecte les priorités des utilisateurs, et ces priorités seront probablement différentes des priorités des postes de travail. Mais il y a une tournure délicate à cela: vous ne pouvez pas confondre ce contexte avec l'intention de l'utilisateur. Il y a un instinct commun à simplifier à outrance les applications mobiles, pour en faire des ordinateurs de bureau. C'est faux. Nous faisons tout sur nos téléphones ces jours-ci, et chaque fois que vous dites: «Les gens ne veulent pas faire ça sur mobile», vous vous trompez. Nous avons tous eu cette expérience où vous allez sur un site Web sur votre smartphone, et vous êtes tombé sur la version mobile du site, où ils ont dépouillé exactement la fonctionnalité ou le contenu que vous recherchez. Juste parce que vous êtes sur un petit écran signifie rarement que vous voulez faire moins. C'est comme dire que parce que le livre de poche est plus petit, nous devrions supprimer les chapitres. Ne confondez pas le contenu du périphérique avec l'intention.
Ce que je dis, c'est que je crois que dans la plupart des cas, les applications mobiles et les sites Web doivent avoir un contenu et des fonctionnalités similaires à ceux de leurs cousins de bureau. La présentation et la priorité peuvent très bien changer pour s’adapter aux mentalités mobiles, mais le contenu devrait presque toujours être le même. En fait, dans de nombreux cas, les versions mobiles devraient faire plus, car les appareils sont capables de plus. C'est pourquoi l'application mobile d'Amazon peut faire des choses que le site Web ne peut pas faire: numériser des codes-barres, par exemple, pour rechercher des éléments.
Pour les concepteurs Web, cela signifie que vous devez commencer à réfléchir de manière plus flexible à la création de sites Web. Nous nous trompons depuis plus de 15 ans, construisant des sites Web uniquement pour la navigation sur les postes de travail. Ce n'est pas ce à quoi le web a été conçu. Il a été conçu pour être neutre sur la plate-forme, pour être affiché sur tout type d'écran ou de périphérique. Vous ne savez tout simplement pas comment votre site Web sera vu maintenant. Il y a un million d'appareils avec des facteurs de forme différents qui peuvent accéder à votre site Web maintenant, ce qui signifie qu'il est important de créer des sites Web pouvant s'adapter à n'importe quel périphérique. Pour la plupart d'entre nous, il s'agit d'une nouvelle façon de concevoir des sites Web. Il ne s'agit pas de générer un site Web mobile distinct et un site Web distinct. Au lieu de cela, cela signifie créer un site Web unique qui s'adapte gracieusement aux contraintes et aux capacités de chaque périphérique.
Nous sommes très chanceux ici sur la planète terre que nous vivions aux côtés du gars le plus intelligent de l'univers sur la façon de concevoir ce type de site Web réactif, et il s'appelle Ethan Marcotte. Ethan vient d'écrire un nouveau livre intitulé Site Web adaptatif qui décrit comment procéder pour créer des sites qui adaptent leur conception et leurs fonctionnalités à tout appareil. Il est un génie et vous pouvez être un génie en lisant son livre. Ce genre de chose est aussi important pour la santé et l’avenir de notre métier que la campagne des normes Web de la dernière décennie. Chaque concepteur Web devrait mettre de côté quelques heures pour repousser ce livre.
JD Biersdorfer
JD Biersdorfer est un journaliste technologique et auteur de plusieurs livres sur les gadgets, y compris Meilleures applications iPhone .
À votre avis, qu'est-ce qui fait une application bien conçue et une bonne expérience utilisateur?
Après avoir examiné 400 à 500 applications pour le livre Best iPhone Apps, je pense que les applications qui fonctionnent le mieux sont celles sur lesquelles l’interface utilisateur a été spécialement conçue pour l’écran du petit téléphone et non les applications prenant en charge des icônes et des menus) et essayer de trop rentrer dans l’espace. Une bonne application est également une application stable bien testée et relativement sans incident.
Y a-t-il des applications particulières qui vous viennent à l'esprit pour être de bons exemples de conception?
Bien que je ne l'aie pas inclus dans le livre à ce moment-là parce que je l'ai trouvé encombré et accidenté, "AccuWeather" a redessiné son application iPhone en un programme météo vraiment superbe avec de gros graphiques colorés et une interface assez intuitive. devoir fouiller plusieurs écrans pour voir à quel point il fait chaud - et à quel point il fera chaud. Les applications gratuites et payantes diffèrent légèrement dans la conception, mais les deux utilisent les mêmes éléments visuels pour transmettre rapidement les conditions météorologiques.
AccuWeather
J'aime aussi l'application "Kayak" pour les trucs que les développeurs y ont mis à part la partie habituelle de réservation de vols et d'hôtels. Par exemple, il existe une section sur laquelle vous pouvez appuyer pour savoir combien chaque compagnie aérienne vous demande de vérifier vos bagages, une autre pour savoir quels magasins et restaurants se trouvent dans l’aéroport où vous vous trouvez, un convertisseur de devises et même une liste de contrôle il s'agit d'une application de voyage pratique bien conçue, facile à naviguer.
En ce qui concerne les nouvelles, je pense toujours que l'application "BBC News" est géniale pour les amateurs de titres. Les créateurs de l'application parviennent à trouver un moyen lisible de placer neuf articles (avec des titres et de petites images) sur l'écran d'accueil, une bannière Breaking News et un bouton pour écouter la diffusion en direct de BBC Radio. Il est très facile d'éditer les catégories de nouvelles que vous souhaitez suivre et il existe des liens vers des clips vidéo et audio préenregistrés populaires que vous pouvez diffuser, comme la brève vidéo de World News Summary.
Ce post vous a été apporté par la compensation impression de brochure société, Flyers du lendemain.
Quelles sont vos expériences avec la conception d'applications mobiles? Selon vous, quelles applications présentent de bons principes de conception et d’interface utilisateur? Faites-nous savoir dans les commentaires ci-dessous.