En quoi l'architecture des informations mobiles est-elle différente du bureau?
J'ai essayé de trouver des exemples sur le Web de techniques d'architecture de l'information spécifiquement pour les appareils mobiles. Je me rends compte que les étapes pour obtenir une IA pour n'importe quel outil mobile/ordinateur de bureau sont le tri des cartes, le personnage, le profil utilisateur, le diagramme d'affinité, le plan du site, etc. application de plate-forme. En d'autres termes, si mon application doit fonctionner sur ordinateur de bureau, mobile et tablette, quels sont les points qu'un IA doit garder à l'esprit?
Les principales méthodes d'exploration et de création de l'IA pour mobile ne sont pas différentes d'un projet de bureau. L'IA elle-même (le contenu et son agencement) est différente, principalement en raison de la taille d'écran (beaucoup) plus petite:
- Uniquement ce qui est important sur mobile - L'application/le site mobile ne doit contenir que ce qui est important pour l'utilisateur lorsqu'il utilise son téléphone portable. Cela ne signifie pas nécessairement qu'il est dans la rue! Certaines applications/sites sont davantage utilisés en déplacement (cartes, répertoires téléphoniques) et d'autres sont davantage utilisés à l'intérieur de la maison (émission de télévision/info film). Vous devez rechercher vos utilisateurs cibles pour comprendre le contexte dans lequel ils utiliseront votre service mobile, et inclure uniquement le contenu pertinent pour ce contexte.
Contenu plus simple et plus petit - Recherche montre que les utilisateurs lisent moins et comprennent moins sur mobile. Cela signifie que vous devez réécrire le contenu long et compliqué du site de bureau pour le rendre plus court et plus compréhensible. Cela signifie également que tout contenu secondaire (c'est-à-dire des éléments qui ne sont pas absolument importants pour l'écran actuel de l'utilisateur) doit être différent vers les écrans de niveau inférieur.
Menus de navigation plus simples - Les menus ne peuvent pas avoir trop d'options. Les menus à onglets contiennent généralement 5 onglets au maximum (par exemple application native de foursquare ). site mobile de MSNBC s'en est sorti avec " plus", qui fait défiler le site vers le haut, révélant la zone de navigation, avec 21 sections et un champ de recherche.
Un bon exemple de tout ce que j'ai écrit ici est le site Web de Gap sur le burea et sur mobile .
Comme sur tout projet UX, la recherche d'utilisateurs et les tests d'utilisabilité vont très loin.
Je ne connais aucune technique spécifique au mobile. Cependant, de nombreuses contraintes devraient guider votre choix d'interface utilisateur pour une application mobile:
Votre utilisation du réseau est limitée. Évitez d'utiliser un accès réseau constant. L'utilisation du réseau doit être explicite (action de l'utilisateur demandée) ou très petite (recherche de nouveaux en-têtes de courrier). Vous ne pouvez pas dépendre d'un accès réseau constant et votre application doit échouer de manière élégante et silencieuse en l'absence de connexion réseau.
Votre espace d'écran est limité. Affinez votre cas d'utilisation au plus commun et utile à l'utilisateur. Définissez l'interface utilisateur minimale nécessaire pour accomplir ces cas d'utilisation. Ensuite, réduisez encore la liste, car vous ne simplifiez probablement pas encore assez. Les grandes polices compensent la taille extrêmement petite des points de nombreux écrans. Et les dispositions flexibles vous permettent de fournir une disposition optimale sur plusieurs appareils, à n'importe quelle orientation.
Votre mémoire est limitée. Charger des jeux de données dans RAM peut ne pas être une option. Faites attention aux choix que vous faites entre des algorithmes efficaces en termes de données et efficaces pour les processeurs, car sur un appareil mobile, ces choix sont vraiment importants.
Votre temps d'exécution est limité. Votre application peut être suspendue à tout moment. La batterie peut mourir à tout moment. Ne laissez jamais vos données dans un état incohérent, même au milieu d'une tâche. Vous pouvez être jeté à l'arrière-plan à tout moment par un appel ou les caprices de l'utilisateur.
Votre stockage est limité. Le stockage est mesuré en mégaoctets sur un appareil mobile, pas en gigaoctets. Réduisez autant que possible l'empreinte de votre application. L'un des avantages du fétiche des icônes plates est une augmentation significative de la compressibilité graphique.
Votre saisie est limitée. Les interfaces tactiles sont imprécises et la saisie est une corvée. Ne faites pas rédiger un essai par vos utilisateurs, sauf si cela est absolument nécessaire. Ne vous attendez pas à ce qu'ils atteignent exactement un objectif de clic. Ceci, bien sûr, est lié à la contrainte d'affichage ci-dessus sur la façon dont vous concevez et disposez l'écran.
Et bien sûr, votre CPU est contraint. Comme ci-dessus, faites attention à l'efficacité de votre algorithme. Déchargez les tâches de traitement lourdes vers le cloud si nécessaire (l'avertissement de `` échouer gracieusement lorsque le réseau n'est pas disponible ''). En affaires, temps = argent; en mobile, cpu = batterie. Évitez une utilisation inutile du processeur qui ne profite pas de manière tangible et directe à l'utilisateur. Connaissez votre plate-forme et travaillez à utiliser les API disponibles pour éviter de réinventer mal la roue; les fonctions intégrées fonctionneront presque toujours mieux et seront plus efficaces que le vôtre.
Concevoir pour l'espace mobile, c'est être conscient de vos contraintes et concevoir votre application en tenant compte de ces contraintes. Faites vos valeurs par défaut bon afin que les utilisateurs n'aient pas besoin de jouer avec une tonne de paramètres. Faites votre interface utilisateur anticiper les besoins des utilisateurs et avoir le cas d'utilisation le plus courant nécessitent le moins d'actions. Si vous avez plus de 10 boutons sur l'écran, vous faites probablement quelque chose de mal; limiter la complexité.
J'espère que ça aide.
Il y a deux implications principales pour l'IA que je peux considérer (en dehors des implications purement techniques):
- L'écran est beaucoup plus étroit, ce qui signifie limiter les catégories/options de navigation les plus élevées et peut-être encourager la navigation d'abord par recherche (en particulier sur les grands sites)
- L'utilisateur a une probabilité beaucoup plus élevée d'être mobile/loin de chez lui lorsqu'il accède à votre site à partir d'un appareil mobile. Cela signifie donner la priorité aux choses qui apportent de la valeur à quelqu'un sur la route, comme vos coordonnées et vos coordonnées.
Je pense qu'il serait utile de faire la distinction entre la " macro architecture de l'information" (c'est-à-dire la structure du domaine informatif) et " micro architecture de l'information ", c'est-à-dire comment représenter l'information sur une page (ou, en parlant de mobile, sur une vue).
Il ne fait aucun doute que l'architecture de micro-informations pour le mobile devrait être en quelque sorte différente de celle pour le bureau. L'approche de la conception réactive est la tentative d'adapter la mise en page côté client, et c'est souvent une solution acceptable. Il existe cependant des circonstances où la conception de vues ad hoc serait préférable (approche mobile et native).
En ce qui concerne l'architecture de l'information macro, en revanche, il n'est pas si évident qu'elle devrait passer du bureau au mobile. Quand j'ai fait un bref benchmark pour voir comment certains joueurs ont résolu le problème, j'ai découvert que certains d'entre eux (par exemple, BBC, New York Times) ont tendance à simplifier , et aplatir, la structure de la hiérarchie de l'information, tandis que d'autres (Amazon, Ebay) ont tendance à conserver sa profondeur.
Personnellement, j'ai tendance à être d'accord avec cette dernière solution, car je suppose que la macro architecture devrait être davantage basée sur les modèles mentaux des utilisateurs , ce qui devrait être principalement indépendant de l'appareil : je serais très surpris si les résultats d'un tri de cartes pour une application mobile étaient si différents de ceux d'un site de bureau.
Si la structure de la macro IA était très complexe, cependant, le concepteur devrait faire très attention à la représenter à l'utilisateur, lui permettant de naviguer dans les hiérarchies. , filtres, tri, facettes, navigation latérale, etc. Et le modèle de navigation doit être adapté à l'appareil.
Je crois que c'est ce que OP avait demandé à l'origine.
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
Extrait sans graphisme:
ARCHITECTURE D'INFORMATION MOBILE
Les appareils mobiles ont également leur propre ensemble de modèles d'architecture de l'information. Alors que la structure d'un site réactif peut suivre des modèles plus "standard", les applications natives, par exemple, utilisent souvent des structures de navigation basées sur des onglets. Encore une fois, il n’existe pas de "bonne" manière d’architecturer un site ou une application mobile. À la place, examinons certains des modèles les plus populaires: hiérarchie, moyeu et rayon, poupée imbriquée, vue à onglets, boîte à bento et vue filtrée:
Hiérarchie
Le modèle de hiérarchie est une structure de site standard avec une page d'index et une série de sous-pages. Si vous concevez un site réactif, vous pouvez être limité à cela, mais l'introduction de modèles supplémentaires pourrait vous permettre de personnaliser l'expérience pour mobile.
L'approche Mobile First de Luke Wroblewski nous aide à nous concentrer d'abord sur les choses importantes: les fonctionnalités et les parcours des utilisateurs qui nous aideront à créer de superbes expériences utilisateur.
Bon pour
Organiser des structures de site complexes qui doivent suivre la structure d'un site de bureau.
Surveiller
La navigation. Les structures de navigation à multiples facettes peuvent poser un problème aux personnes utilisant de petits écrans.
Moyeu et rayon
Un modèle de hub et de rayons vous donne un index central à partir duquel les utilisateurs navigueront. C'est le modèle par défaut sur l'iPhone d'Apple. Les utilisateurs ne peuvent pas naviguer entre les rayons, mais doivent plutôt revenir au concentrateur. Historiquement, cela a été utilisé sur le bureau où un flux de travail est limité (généralement en raison de restrictions techniques telles qu'un formulaire ou un processus d'achat), mais cela devient plus répandu dans le paysage mobile en raison du fait que les utilisateurs se concentrent sur une tâche, ainsi que sur le formulaire. facteur de l'appareil, ce qui rend une navigation globale plus difficile à utiliser.
Bon pour
Outils multifonctionnels, chacun avec une navigation et un objectif internes distincts.
Surveiller
Utilisateurs souhaitant effectuer plusieurs tâches.
Poupée imbriquée
Le motif de poupée imbriquée conduit les utilisateurs de manière linéaire vers un contenu plus détaillé. Lorsque les utilisateurs sont dans des conditions difficiles, il s'agit d'une méthode de navigation simple et rapide. Cela donne également à l'utilisateur une forte impression de sa position dans la structure du contenu en raison de la perception d'avancer puis de reculer.
Bon pour
Applications ou sites avec des sujets singuliers ou étroitement liés. Cela peut également être utilisé comme motif de sous-section à l'intérieur d'autres motifs parents, tels que le motif de hiérarchie standard ou le moyeu et les rayons.
Surveiller
Les utilisateurs ne seront pas en mesure de basculer rapidement entre les sections. Demandez-vous donc si cela conviendra, plutôt qu'un obstacle à l'exploration de contenu.
Vue à onglets
Il s'agit d'un modèle que les utilisateurs réguliers d'applications connaissent bien. Il s'agit d'une collection de sections liées entre elles par un menu de barre d'outils. Cela permet à l'utilisateur de numériser rapidement et de comprendre toutes les fonctionnalités de l'application lors de sa première ouverture.
Bon pour
Applications basées sur des outils avec un thème similaire. Multi-tâches.
Surveiller
Complexité. Ce modèle est mieux adapté aux structures de contenu très simples.
Bento Box/Dashboard
La boîte à bento ou le modèle de tableau de bord apporte un contenu plus détaillé directement à l'écran d'index en utilisant des composants pour afficher des parties d'outils ou de contenu associés. Ce modèle est plus adapté à la tablette qu'au mobile en raison de sa complexité. Il peut être vraiment puissant car il permet à l'utilisateur de comprendre les informations clés en un coup d'œil, mais il repose fortement sur une interface bien conçue avec des informations clairement présentées.
Bon pour
Outils multifonctionnels et applications pour tablettes basées sur le contenu qui ont un thème similaire.
Surveiller
L'écran de la tablette vous donne plus d'espace pour bien utiliser ce modèle, mais il devient particulièrement important de comprendre comment un utilisateur interagira avec et entre chaque élément de contenu, pour garantir que l'application est facile, efficace et agréable à utiliser.
Vue filtrée
Enfin, un modèle de vue filtrée permet à l'utilisateur de naviguer dans un ensemble de données en sélectionnant des options de filtre pour créer une autre vue. Le filtrage, ainsi que l'utilisation de méthodes de recherche à facettes, peuvent être un excellent moyen pour permettre aux utilisateurs d'explorer le contenu d'une manière qui leur convient.
Bon pour
Applications ou sites avec de grandes quantités de contenu, tels que des articles, des images et des vidéos. Peut être une bonne base pour des applications ou des sites de style magazine, ou comme sous-modèle dans un autre modèle de navigation.
Surveiller
Mobile. Les filtres et la recherche à facettes peuvent être difficiles à afficher sur un écran plus petit en raison de leur complexité.
Je vais probablement décrire cela très mal.
Mis à part les suggestions déjà ici. Le mobile est un appareil plus personnel. L'utilisateur accède à l'appareil presque exclusivement et change la vue de sorte qu'il soit plus individuel pour eux est plus important.
Alors, où votre site Web peut être considéré comme ayant un grand site Web avec des zones qui sont personnelles à l'utilisateur. Le mobile est mieux pensé comme ayant une vue personnelle avec le site Web qui dessert cette vue. Je pense qu'un bon exemple de cela est ebay. Regardez le site et c'est un grand "centre commercial" où vous pouvez acheter n'importe quoi et une petite partie de celui-ci est pour vous. Regardez l'application et tout est conçu autour de vous et de ce que vous avez fait en dernier et de l'exception que vous souhaitez reprendre là où vous vous étiez arrêté. Il se concentre sur cette petite zone et vous donne accès au "centre commercial".
En remarque, c'est potentiellement là où le design réactif ne gère pas très bien le changement de médium. Cela améliorera l'interface utilisateur mais pas nécessairement l'expérience utilisateur.
Tout d'abord, nous devons définir IA. Vous posez des questions spécifiques sur l'architecture de l'information ou sur l'expérience utilisateur en général?
IA est un peu un terme flou. Certains l'utilisent pour se référer au plan du site et à la matrice de contenu. D'autres l'utilisent comme synonyme d'expérience utilisateur.
En termes de structure de contenu, être sur mobile ne sera probablement pas très différent de celui sur ordinateur. Vous pouvez segmenter un peu plus les choses, mais les objectifs des utilisateurs vont souvent se chevaucher un peu.
Si nous parlions de l'intégralité de l'expérience utilisateur, la réponse de Myrddin est bonne.
En plus des autres réponses sur les mises en page, il peut être utile de considérer les stratégies de recherche/navigation utilisées par l'utilisateur mobile. Certains utilisateurs naviguent pour tomber par hasard sur des éléments tandis que d'autres recherchent un élément spécifique. L'IA doit tenir compte des deux extrémités du spectre de comportement de l'utilisateur en permettant à l'utilisateur de basculer entre les deux modes. Par exemple, dans les écrans de navigation, vous pouvez avoir une fonction "épingler" pour enregistrer les éléments qu'un utilisateur pourra plus tard trouver rapidement dans la liste des articles les plus fréquemment achetés.