Comment relevez-vous le défi de concevoir pour l'immobilier grand écran?
Cette question est un peu plus subjective, mais j'espère avoir une nouvelle perspective. Je suis tellement habitué à concevoir pour une certaine taille d'écran (généralement 1024x768) que je trouve que cette taille n'est pas un problème. L'extension de la taille à 1280x1024 ne vous permet pas d'acheter suffisamment d'écran pour faire une différence appréciable, mais cela me donnera un peu plus de répit. Fondamentalement, je développe simplement ma "taille de grille" et le même design de base pour l'écran légèrement plus petit fonctionne toujours.
Cependant, dans les deux derniers projets, mes clients utilisaient tous des écrans 1080p (1920x1080) et ils voulaient des solutions pour utiliser autant de biens immobiliers que possible. La largeur de 1920 pixels offre un peu moins de deux fois la largeur à laquelle je suis habitué, et le grand écran fait que certaines de mes anciennes approches de conception ne fonctionnent pas aussi bien. Le problème que je rencontre est que lorsqu'on me présente tellement d'espace, je suis confronté à des problèmes majeurs.
- Combien de colonnes dois-je utiliser? Le format large se prête à une division de 3 colonnes avec une division de 2: 1: 1 (c'est-à-dire la colonne de contenu plus grande que les deux autres). Cependant, si je choisis trois colonnes, que dois-je faire avec cette colonne supplémentaire?
- Comment puis-je faire efficace utiliser l'écran immobilier? Il y a une tentation de tout afficher à l'écran en même temps, mais trop d'informations rendent l'application plus difficile à utiliser. L'espace blanc est important pour donner un sens à des informations complexes, mais trop fait que les concepts connexes semblent trop séparés.
- Je travaille généralement avec des applications Web contenant des données complexes, et la visualisation et la présentation sont essentielles pour donner un sens aux données brutes. Lorsque votre utilisateur dispose également d'un grand écran (au moins 24 "), certaines informations sont hors de vue et vous devez déplacer le pointeur sur une longue distance. Comment vous assurer que tout ce qui est nécessaire reste dans les points chauds visuels?
- Les sites simples comme les blogs font mieux quand la largeur est limitée, ce qui entraîne beaucoup de gaspillage immobilier. Je me demande un peu si avoir la zone de texte et l'aperçu du texte côte à côte serait un gros avantage pour le côté administrateur de ce type d'écran? (Division 1: 1 à deux colonnes).
Pour vos réponses, je sais que presque tout dans la conception est "ça dépend". Ce que je recherche c'est:
- Principes généraux que vous utilisez
- Comment votre approche du design a changé
Je constate que je dois me recycler pour travailler avec ce format différent. Chaque bosse dans la résolution sur laquelle j'ai travaillé jusqu'à présent a été d'environ 25%: 640 à 800 (augmentation de 25%), 800 à 1024 (augmentation de 28%) et 1024 à 1280 (augmentation de 25%). Cependant, le saut de 1280 à 1920 est une bonne augmentation de 50% de l'espace - l'équivalent d'un saut de 640 directement à 1024. Il n'y avait pas de taille moyenne couramment utilisée pour aider à apprendre les leçons plus progressivement.
Pour aider à concentrer un peu la question, j'avais un projet qui était quelque peu similaire à Atlassian JIRA, un système de gestion des problèmes. Il y avait environ six types différents de dossiers que le client voulait conserver, tous pouvaient potentiellement être liés les uns aux autres. La collecte de données n'était pas le problème principal, bien qu'elle ait joué un rôle.
Le côté le plus important du problème était la création d'un système qui suggérerait des relations potentielles entre les enregistrements et aiderait les analystes à reconnaître les tendances des incidents signalés.
Il y avait différents types d'analystes qui se concentraient sur les différents domaines problématiques, et en raison de la nature de leur type de travail exploratoire, ils ne savaient pas ce qu'ils voulaient. Ils savaient simplement qu'ils devaient comprendre un grand nombre de données, établir des corrélations et caractériser les classes de problèmes.
(Initialement demandé ici: https://softwareengineering.stackexchange.com/questions/45864/how-do-you-conquer-the-challenge-of-designing-for-large-screen-real-estate =, mais a dit que cela pourrait être plus approprié)
Pour la prime : Étirez un peu vos esprits. La réponse simple "Agrandir tout" a une limite à l'utilité de la réponse. Nous parlons d'utilisateurs qui doivent comprendre un grand nombre de données et trouver des relations entre les enregistrements. Si je monte simplement la taille sur tout, ils vont être très limités dans ce qu'ils peuvent voir à l'écran - en particulier parce que la verticale est tellement contrainte.
La chose la plus importante me semble permettre des vues de plusieurs niveaux de détail à la fois et illustrer les relations entre les vues. Le domaine de l'écran entre vraiment en jeu, c'est quand vous pouvez passer d'un niveau à un autre en regardant simplement une autre partie de l'écran, plutôt qu'en cliquant sur quelque chose.
Donc, tout d'abord, je pense que c'est d'obtenir plusieurs niveaux dans un seul écran, et d'utiliser également le domaine de l'écran pour relier les parties et les mettre à part (et ne pas les rendre trop encombrées ou écrasantes). Les relations peuvent être rendues visibles en mettant en évidence des éléments dans des listes et en dessinant des boîtes sur des images afin que vous sachiez quels détails vous regardez.
Le nombre de colonnes, eh bien, cela dépend vraiment des vues que vous apportez à l'écran à l'époque. Dans des paramètres plus visuels (édition d'images, vues de carte), je pourrais imaginer qu'il s'agit d'un domaine principal et rendre les autres colonnes un peu plus larges que d'habitude, pour rendre les choses comme la vue miniature ou les détails de l'outil (pensez photoshop) moins exigus. Dans les systèmes de suivi des problèmes, je pouvais imaginer que la section `` détails '' de la disposition à trois colonnes soit divisée encore plus (verticalement ou horizontalement) pour inclure des éléments tels que les détails du client, les réponses ou les problèmes connexes.
Il faut également tenir compte du fait que vous avez plus d'espace. C'est une promotion du "rendre plus grand", mais que vous pouvez vraiment utiliser à votre avantage. Avec des écrans plus larges, vous pouvez (par exemple) afficher des vignettes reconnaissables sans repousser les autres détails ou mettre plus d'informations côte à côte. (Sur des écrans plus petits, je ne pouvais jamais ranger les choses que je voulais dans la liste des colonnes de mon application de messagerie, donc je ne voyais que la moitié de la ligne d'objet, ou seulement la première partie du nom.)
De plus, lorsque vous disposez de plus d'écran, vous pouvez utiliser plus de graphiques et d'illustrations. Ils sont ennuyeux lorsque vous devez cliquer pour accéder aux informations, puis les gens préfèrent les données aux images uniquement (c'est mon expérience). Mais si vous pouvez avoir les deux ...
Une autre suggestion consiste à examiner des sujets sur la visualisation des données et la conception du tableau de bord.
Le problème principal de "simplement élargir le tout est les blocs de texte - sauter de la fin de la ligne à l'extrême droite au début de la ligne suivante à l'extrême gauche est douloureux s'il n'est pas assisté visuellement.
Pour la gestion des problèmes, un affichage à trois colonnes semble en fait naturel (désolé, fogbugz):
Une colonne de navigation avec des liens rapides configurés par l'utilisateur (par exemple, des filtres communs), une colonne pour une liste/arborescence/quoi que ce soit des problèmes, qui n'est pas surchargée de colonnes, et des détails pour le problème sélectionné ou les problèmes sélectionnés.
Cela nécessiterait une mise en page 1: 2: 2, pour laquelle 1920 semble encore un peu serré.
==> Un changement rapide pour redistribuer les biens immobiliers entre la liste des problèmes et les détails des problèmes pourrait être utile ici.
Généralement, cette mise en page fonctionne niquement avec un écran large. Pour prendre en charge d'autres résolutions, vous devrez peut-être proposer certains choix de mise en page:
Je recommanderais préparation pour cette possibilité, même si vos clients disent "non, nous avons tous de grands moniteurs". Parfois, vous devez faire avec juste un petit ordinateur portable ou la moitié d'un seul écran.
Conception
Je pense que vous devez abandonner l'idée de une longue page (verticale). Au lieu de cela, considérez le navigateur comme un conteneur de blocs ou un canevas. Sur les écrans larges, les blocs s'alignent principalement horizontalement, sur les écrans moins grands, vous devez faire défiler davantage. Je pense qu'il est important de ne pas tomber dans la conception uniquement pour les grands écrans. De plus, les petits écrans sont de plus en plus utilisés. Au lieu de cela, faites-le fonctionner sur tous les écrans et laissez les informations circuler/trouver leur propre chemin.
J'aime comment par exemple TaskRabbit place leur vidéo explicative. Ils l'ont mis dessus le pli. Ici, je vois une compréhension du navigateur comme une toile plutôt que comme une page.
Gestion de l'information
Je m'inspire également de certains films, comme les interfaces matrice , rapport minoritaire et autres multi-touch . Par exemple, voir le rapport minoritaire, cet écran est bien plus grand que 1920x1080 :-). Ils utilisent le zoom, permettent à l'utilisateur de remplacer les éléments et la distance physique. Ce dernier est cependant plus difficile à utiliser sur le bureau. Mais les deux autres sont intéressants. Surtout si vous concevez une interface dans laquelle les gens doivent gérer et analyser beaucoup d'informations.
Donc, comme vous le dites, la puissance de calcul ne peut pas les aider beaucoup dans leur analyse, je pense que les outils permettant aux utilisateurs de les gérer eux-mêmes deviennent plus importants. Et ces outils, par exemple le zoom et le remplacement, nécessitent beaucoup d'espace. (Et laissez un espace blanc!)
Exemples
Quelques croquis avec ces idées. Je suis sûr que vous pouvez penser à plus et plus pertinent pour votre application.
Navigateur comme conteneur, avec des contrôles d'informations pour l'utilisateur: 
Ou, regroupez les types d'informations ensemble: 
Un écran plus grand est une épée à double tranchant. L'avantage est que vous disposez de plus d'espace pour afficher plus d'informations aux utilisateurs. Mais l'inconvénient est que vous montrez aux utilisateurs plus d'informations, ce qui peut nuire à l'efficacité des utilisateurs si les informations que vous montrez aux utilisateurs ne sont pas pertinentes pour leur tâche et sont plutôt là pour remplir l'espace.
Principe 1: Assurez-vous que les informations dans les trois colonnes sont directement liées les unes aux autres. En d'autres termes, le chemin de navigation pour les trois colonnes doit se connecter les uns aux autres. Les informations s'affichent dans une colonne comme résultat direct d'une action dans une autre colonne.
Principe 2: Naturellement, le début du chemin de navigation doit commencer dans la colonne de gauche. Cela signifie que votre colonne de gauche doit être le menu principal ou l'écran d'accueil où les utilisateurs vont pour commencer leur tâche et sélectionner leurs éléments principaux. Une fois que cela se produit, les colonnes du milieu et de droite devraient s'ouvrir. La colonne du milieu devrait aller plus loin et afficher plus de détails sur les éléments sélectionnés dans la colonne de gauche. La dernière colonne de droite doit afficher le plus d'informations et constitue le principal espace de travail où les utilisateurs effectueront leur tâche.
Principe 3: L'ordre et les tailles de votre colonne doivent être conçus de manière à refléter cette structure d'information. Par conséquent, votre colonne de gauche doit être la plus fine, celle du milieu doit être légèrement plus grasse et la troisième colonne doit être obèse.
Principe 4: La colonne de droite est la colonne dans laquelle vous souhaitez que les utilisateurs effectuent la plupart de leurs tâches. En effet, elle a le plus d'espace, contient le plus d'informations et constitue la dernière colonne de leur chemin de navigation. La colonne du milieu est l'endroit où vous souhaitez afficher un aperçu ou l'état de la tâche que l'utilisateur effectue. La colonne de gauche peut également donner des indices de statut, mais ils devraient être au niveau le plus large.
J'ai fait un wireframe pour aider à mieux illustrer cela (je n'ai pas pu poster l'image ici parce qu'elle ne me le permettrait pas): http://imgur.com/YbVbj?full
Découvrez SmugMug pour quelques idées. Leur site fait un excellent travail d'adaptation à la résolution horizontale et verticale de votre écran. Il ajustera le nombre de vignettes par page, ainsi que la taille de la photo moyenne.
Vous remarquerez également qu'il tend à maintenir quelque chose près d'un partage 50/50 entre les vignettes à gauche et la photo de taille moyenne à droite lorsque vous redimensionnez la fenêtre. De toute évidence, vous ne concevez pas une galerie de photos en ligne, mais peut-être qu'une mise en page similaire pourrait être utilisée.
Vous voudrez peut-être jeter un œil à la page Web "Conception de TV (Google)" de Google - un ensemble général de règles pour les pages Web destinées aux écrans 720p ou 1080p.
Il contient tous les gnaff généraux tels que "assurez-vous que vous pouvez utiliser des flèches pour la navigation", mais les points pertinents sont les choses comme "N'utilisez pas des tailles de police inférieures à 18px pour les écrans 1080p".
Je pense essentiellement qu'il essaie de dire que vous devez le concevoir exactement de la même manière, mais en utilisant des éléments et des tailles de police plus grands. Trop d'informations sur l'écran semblent nulles, et les écrans HD/haute résolution ont toujours besoin de polices plus grosses.
Ok voici un principe d'une étude de 1996:
Lorsqu'un utilisateur passe de travailler avec 1 écran à 2 écrans, la productivité bondit de 40% (en codeurs). C'est donc un argument puissant pour plus de pixels. Maintenant, pourquoi la productivité bondit-elle? car ils gaspillent moins de mémoire et de temps entre les onglets ou les applications (moins changement de contexte ). Changement de contexte coûteux. Donc, si vous voulez utiliser votre nouveau "terrain", utilisez les nouvelles zones de pixels qui vous ont été données pour réduire la fréquence/le risque/la probabilité du "contexte" commutation ". Cela pourrait signifier des choses contre-intuitives comme, rendre la fenêtre de votre application plus petite afin que d'autres applications que votre application fonctionne généralement avec ajustement confortablement ensemble dans le même écran. Vous pouvez voir un exemple de cela avec GMAIL, il y a quelques années, l'éditeur de courrier électronique gmail compose, est devenu plus petit et non plus grand.
rendre votre application plus conviviale aux autres applications (dérivée de 1). Regardez comment votre application peut optimiser l'ensemble, pas seulement votre application
j'espère que cela pourra aider.
PIC: Comme la taille de l'écran a explosé, la fenêtre gmail composer réduite) --- 
Jira (je l'utilise également) résout cette question en agrandissant simplement tous les éléments, donc s'il y a deux colonnes, les éléments des colonnes deviennent simplement plus larges, sur différentes résolutions d'écran. Je pense que ce n'est pas la meilleure solution, car sur un écran très large, il serait vraiment étrange ...
Donc, si j'étais vous, j'essaierais de créer une interface alignée au centre, avec également un espace blanc à gauche et à droite:
De cette façon, vous pouvez jouer avec des espaces blancs:
- 1680: 75% (1260) de l'écran est contenu, 25% est un espace blanc sur les deux côtés
- 1920: la même échelle (1440) peut être appliquée - 75% à 25%
Avec cette soulution, votre contenu n'augmenterait que d'environ 14%, et vous pourriez avoir l'espace blanc des deux côtés. Tous les éléments de contenu au milieu devraient devenir plus grands (avec 14%) pour se conformer aux exigences de visibilité, mais l'alignement des espaces blancs et du centre améliorerait considérablement l'ux!
- votre interface utilisateur ne serait pas trop encombrée
- vous n'avez pas à concevoir l'intégralité de l'interface utilisateur pour différentes résolutions d'écran
- vous devrez appliquer un multiplicateur x1.14
J'utilise 1680 * 1050 - mais je n'excepte aucune application de navigateur pour remplir tout l'écran, car je n'y suis pas habitué ... tous les sites Web, et presque tout est optimisé pour une résolution inférieure. Et j'ai vraiment besoin d'un espace blanc.
Jira n'a pas de véritable espace blanc, en 1680, tous les éléments semblent trop gros, avec seulement quelques contenus. Avec l'application d'un espace blanc, l'interface entière serait plus facile à utiliser!
Principes généraux que vous utilisez
Fragmentation, regroupement des informations, rendre les éléments secondaires moins importants dans la conception, par exemple: la ligne de menu en haut de cette page a un fond sombre. Un autre exemple est ce site qui utilise le plein écran avec des panneaux de chaque côté pour stocker des informations secondaires et la navigation.
Rechercher des moyens d'aplanir la structure des informations afin de réduire le nombre de clics pour accéder à des tâches courantes
Comment utiliser efficacement l'espace d'écran?
Vous pouvez utiliser une barre d'outils ancrable avec des outils d'analyse. Vous pourriez avoir un ou plusieurs minerais qui pourraient être sélectionnés lors de la configuration des données/analyses, puis masqués.
Comment vous assurez-vous que tout ce qui est nécessaire reste dans les points chauds visuels?
Vous pouvez avoir un affichage très grand et afficher une section dans un port de vue que les utilisateurs peuvent parcourir, par exemple: google maps