Comment relevez-vous le défi de concevoir pour l'immobilier grand écran? [fermé]


10

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 l'écran large 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 utiliser efficacement l'espace d'écran? 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 à deux colonnes 1: 1).

Pour vos réponses, je sais que presque tout dans le design 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 de résolution à 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.


Pourriez-vous simplement agrandir les contrôles de l'interface utilisateur pour remplir les espaces vides ...?
FrustratedWithFormsDesigner

@Frustré: cela ne serait-il pas contraire à l'objectif, à moins que vous ne conceviez, disons, un écran tactile?
Michael K

@Michael: eh bien, OP ne semble pas vouloir changer le nombre de contrôles visibles car cela rendrait le programme plus difficile à utiliser, et n'aime pas non plus avoir de l'espace vide. S'il n'y a pas de nouvelles fonctionnalités pour remplir l'espace, alors l'espace doit être rempli avec ...?
FrustratedWithFormsDesigner

2
Il s'agit plus d'essayer d'élargir mon esprit pour de nouveaux contrôles et façons d'interagir avec le site. Le fait de tout faire plus gros défait le but. Ensuite, vous avez le «syndrome du gros bouton rouge brillant» ou un texte qui donne l'impression de lire une grande rubrique. Lorsque vous essayez d'équilibrer les préoccupations de conception, c'est vraiment un problème complexe.
Berin Loritsch

1
@Berin: S'ils ont fait une demande spécifique pour la taille de l'interface Super-taille et que c'est le SEUL changement majeur, dites-leur que vous avez des préoccupations concernant la mise en page et la conception et demandez-leur s'ils ont des idées sur la meilleure façon d'utiliser l'espace. Après tout, ce sont les utilisateurs et ils doivent avoir eu une raison pour faire cette demande spécifique. Peut-être qu'ils diront "mettez un widget de tableau de bord dans l'espace vide" ou quelque chose comme ça ... envoyez une capture d'écran de la maquette avec un immense espace vide un texte disant "Que voulez-vous ici?" Assurez-vous que vos préoccupations concernant cette conception sont connues.
FrustratedWithFormsDesigner

Réponses:


1

C'est ainsi que j'aborderais cette question.

Je commencerais par découper mes données en blocs logiques. Je pourrais même aller jusqu'à créer un fichier ascx différent pour chaque bloc logique. Chaque bloc saurait comment il aime être affiché (largeurs min / max). Je ferais cela b / c, je n'aime pas réécrire le code et s'il y a une chance que l'application ait besoin d'être étendue pour prendre en charge plusieurs tailles de résolution, alors cela faciliterait la tâche, contrôle par contrôle.

Ensuite, je créerais une nouvelle feuille de style pour la plus grande résolution. Faites des boutons et un cap plus gros. Ajoutez plus d'espace blanc autour des éléments. De cette façon, le basculement entre les deux types de résolution est juste un changement de feuille de style.

Vient maintenant la partie difficile, la mise en page. Comme vous l'avez dit, la disposition sera très différente avec cette quantité de biens immobiliers. La réponse indirecte serait de permettre à l'utilisateur de placer les éléments où il le souhaite, comme une page iGoogle. L'utilisateur peut choisir 2 ou 3 colonnes comme bon lui semble. Comme je ne sais pas quels types d'écrans vous construisez, je ne sais pas si cela fonctionnerait vraiment pour vous.

La deuxième réponse indirecte serait d'engager un expert en interface utilisateur pour vous aider à concevoir ces pages. Ayant travaillé avec un spécialiste de l'interface utilisateur dans le passé, je peux dire que cela en vaut la peine à 100% d'avoir un avis d'expert sur des choses comme ça. Ils peuvent identifier les problèmes et suggérer des solutions avant même que le client ne voie le produit.

Si je devais le faire moi-même, je placerais des éléments fixes sur les côtés et ferais grandir la zone centrale pour remplir le reste de l'espace. Ayez des données qui peuvent croître remplir la section du milieu.

Je ne sais pas à quel point cela vous est utile, mais j'espère que cela vous donnera quelques idées.


C'est probablement la réponse la plus raisonnable que j'ai obtenue à travers l'interface utilisateur et les programmeurs pour cette question. C'est beaucoup plus utile que "agrandir tout", c'est ce que les gens de l'interface utilisateur m'ont dit. REMARQUE: aspx est un terme spécifique à la technologie, mais la segmentation de l'interface utilisateur dans des fichiers séparés est la bonne approche.
Berin Loritsch


2

Je ne suis pas un expert de l'interface utilisateur, mais j'utilise un écran 1920x1080 tous les jours avec Eclipse. Eclipse a une interface très facilement configurable, et voici certaines de mes observations lors du basculement entre 1280 et 1920:

  • Aux deux résolutions, je veux voir la fenêtre sur laquelle je travaille dans la même taille. Sur la résolution plus petite, j'ai tendance à masquer les panneaux supplémentaires, tandis que sur la résolution plus élevée, je mets plus de panneaux.
  • Je préférerais des boutons légèrement plus gros. Ils prendraient moins d'espace proportionnellement sur le plus grand moniteur et rendraient les actions de ma souris plus rapides.
  • J'élargis souvent les aperçus pour utiliser tout l'écran, c'est-à-dire le code à gauche, l'aperçu à droite. Cela finit par être un format à deux colonnes. En dehors de cela, j'utilise 3 colonnes avec un pied de page:
    1. Gauche: navigation dans les fichiers
    2. Centre: Code (le plus grand, probablement 2/3 de la largeur de l'écran)
    3. Droite: navigation dans le code et tâches
    4. Pied de page: état (console, serveurs, etc. Assez court, peut-être 1 / 5-1 / 6 de hauteur d'écran)

Parfois, je mets également des vues et des contrôleurs les uns à côté des autres en mode 2 colonnes, mais cela est définitivement spécifique au programmeur. :)

Sur un écran plus grand, je veux l'utiliser pour voir autant d'informations que possible, tout en étant facile à trouver. Plus d'espace autour des composants permet de différencier les collections d'informations. Les icônes sur les onglets sont un moyen d'attirer l'attention sur la signification de chaque composant.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.