¿Cómo vencer el desafío de diseñar para bienes raíces de pantalla grande? [cerrado]


10

Esta pregunta es un poco más subjetiva, pero espero obtener una nueva perspectiva. Estoy tan acostumbrado a diseñar para un cierto tamaño de pantalla (típicamente 1024x768) que creo que ese tamaño no es un problema. Ampliar el tamaño a 1280x1024 no le compra suficiente espacio en la pantalla para hacer una diferencia apreciable, pero me dará un poco más de espacio para respirar. Básicamente, simplemente amplío mi "tamaño de cuadrícula" y el mismo diseño básico para la pantalla un poco más pequeña todavía funciona.

Sin embargo, en los últimos dos proyectos, todos mis clientes usaban pantallas de 1080p (1920x1080) y querían soluciones para usar la mayor cantidad de bienes inmuebles posible. 1920 píxeles de ancho proporciona menos del doble del ancho al que estoy acostumbrado, y la pantalla panorámica hace que algunos de mis viejos enfoques de diseño no funcionen tan bien. El problema con el que me encuentro es que cuando se me presenta tanto espacio, me enfrento a algunos problemas importantes.

  • ¿Cuántas columnas debo usar? El formato ancho se presta a una división de 3 columnas con una división de 2: 1: 1 (es decir, la columna de contenido más grande que las otras dos). Sin embargo, si voy con tres columnas, ¿qué hago con esa columna adicional?
  • ¿Cómo hago un uso eficiente de la pantalla de bienes raíces? Existe la tentación de poner todo en la pantalla a la vez, pero demasiada información en realidad hace que la aplicación sea más difícil de usar. El espacio en blanco es importante para ayudar a dar sentido a la información compleja, pero demasiado hace que los conceptos relacionados se vean demasiado separados.
  • Por lo general, estoy trabajando con aplicaciones web que tienen datos complejos, y la visualización y presentación es clave para dar sentido a los datos sin procesar. Cuando su usuario también tiene una pantalla grande (al menos 24 "), parte de la información está fuera de la vista y necesita mover el puntero a una gran distancia. ¿Cómo se asegura de que todo lo que se necesita se mantenga dentro de los puntos calientes visuales?
  • Los sitios simples como los blogs realmente funcionan mejor cuando el ancho es limitado, lo que resulta en una gran cantidad de bienes raíces desperdiciados. Me pregunto si tener el cuadro de texto y la vista previa de texto en paralelo sería un gran beneficio para el lado administrador de ese tipo de pantalla. (1: 1 división de dos columnas).

Para sus respuestas, sé que casi todo en diseño es "depende". Lo que estoy buscando es:

  • Principios generales que usas
  • Cómo ha cambiado tu enfoque del diseño

Estoy descubriendo que tengo que volver a entrenarme a mí mismo para trabajar con este formato diferente. Cada aumento en la resolución que he trabajado hasta la fecha ha sido del 25%: 640 a 800 (aumento del 25%), 800 a 1024 (aumento del 28%) y 1024 a 1280 (aumento del 25%). Sin embargo, el salto de 1280 a 1920 es un buen aumento del 50% en el espacio, el equivalente de saltar de 640 directamente a 1024. No había un tamaño medio comúnmente utilizado para ayudar a aprender las lecciones de manera más gradual.


¿Podría hacer que los controles de la IU sean más grandes para llenar los espacios vacíos ...?
FrustratedWithFormsDesigner

@ Frustrado: ¿No sería eso un fracaso para el propósito, a menos que estuvieras diseñando para, por ejemplo, una pantalla táctil?
Michael K

@Michael: bueno, OP no parece querer cambiar la cantidad de controles visibles ya que haría que el programa sea más difícil de usar, y tampoco le gusta tener ningún espacio vacío. Si no hay nuevas características para llenar el espacio, ¿entonces el espacio debe llenarse con ...?
FrustratedWithFormsDesigner

2
Es más una cuestión de intentar expandir mi mente para nuevos controles y formas de interactuar con el sitio. Simplemente hacer que todo sea más grande derrota el propósito. Luego tienes el "síndrome del gran botón rojo brillante" o un texto que parece que estás leyendo un gran encabezado. Cuando se trata de equilibrar las preocupaciones del diseño, realmente es un problema complejo.
Berin Loritsch

1
@Berin: si hicieron una solicitud específica para el tamaño de la interfaz de gran tamaño y ese es el ÚNICO cambio importante, dígales que tiene dudas sobre el diseño y el diseño y pregúnteles si tienen ideas sobre cómo se podría aprovechar mejor el espacio. Después de todo, son los usuarios y deben haber tenido una razón para hacer esta solicitud específica. Tal vez digan "poner un widget de tablero en el espacio vacío" o algo así ... enviar una captura de pantalla de maqueta con un gran espacio en blanco con un texto que diga "¿Qué quieres aquí?" Asegúrese de conocer sus inquietudes sobre este diseño.
FrustratedWithFormsDesigner

Respuestas:


1

Así es como abordaría este problema.

Comenzaría fragmentando mis datos en bloques lógicos. Incluso podría ir tan lejos como para crear un archivo ascx diferente para cada bloque lógico. Cada bloque sabría cómo le gusta que se muestre (ancho mínimo / máximo). Haría esto b / c No me gusta reescribir el código y si existe la posibilidad de que la aplicación deba ampliarse para admitir múltiples tamaños de resolución, esto ayudaría a facilitar el control por control.

A continuación, crearía una nueva hoja de estilo para una resolución más grande. Haz botones y encabezados más grandes. Agregue más espacio en blanco alrededor de los elementos. De esta forma, cambiar entre los dos tipos de resolución es solo un intercambio de hojas de estilo.

Ahora viene la parte difícil, el diseño. Como dijiste, el diseño será muy diferente con esa cantidad de bienes raíces. La respuesta de eliminación sería permitir que el usuario coloque los elementos donde quiera, como una página de iGoogle. El usuario puede elegir 2 o 3 columnas como mejor le parezca. Como no sé qué tipo de pantallas está construyendo, no sé si esto realmente funcionaría para usted.

La segunda respuesta sería eliminar a un experto en IU para que lo ayude a diseñar estas páginas. Después de haber trabajado con un especialista en IU en el pasado, puedo decir que vale la pena al 100% obtener una opinión experta sobre cosas como esta. Pueden identificar problemas y sugerir soluciones incluso antes de que el cliente vea el producto.

Si tuviera que hacerlo por mi cuenta, colocaría artículos fijos a los lados y haría que el área central creciera para llenar el resto del espacio. Haga que cualquier dato que pueda crecer llene la sección central.

No estoy seguro de lo útil que es para usted, pero espero que le dé algunas ideas.


Esta es probablemente la respuesta más razonable que obtuve tanto de la interfaz de usuario como de los programadores para esta pregunta. Es mucho más útil que "hacer que todo sea más grande", que es lo que la gente de UI me dijo. NOTA: aspx es un término específico de la tecnología, pero agrupar la interfaz de usuario en archivos separados es el enfoque adecuado.
Berin Loritsch


2

No soy un experto en UI, pero uso una pantalla de 1920x1080 todos los días con Eclipse. Eclipse tiene una interfaz muy fácil de configurar, y estas son algunas de mis observaciones al cambiar entre 1280 y 1920:

  • En ambas resoluciones, quiero ver la ventana en la que estoy trabajando en el mismo tamaño. En la resolución más pequeña, tiendo a ocultar los paneles adicionales, mientras que en la resolución más alta, saco más paneles.
  • Preferiría botones un poco más grandes. Ocuparían menos espacio proporcionalmente en el monitor más grande y acelerarían las acciones de mi mouse.
  • A menudo amplío las vistas previas para usar toda la pantalla, es decir, el código a la izquierda, la vista previa a la derecha. Eso termina siendo un formato de dos columnas. Aparte de eso, uso 3 columnas con un pie de página:
    1. Izquierda: navegación de archivos
    2. Centro: Código (el más grande, probablemente 2/3 del ancho de la pantalla)
    3. Derecha: código de navegación y tareas
    4. Pie de página: estado (consola, servidores, etc. Bastante corto, tal vez 1 / 5-1 / 6 altura de pantalla)

A veces también pongo vistas y controladores uno al lado del otro en modo de 2 columnas, pero eso es definitivamente específico del programador. :)

Cuando estoy en una pantalla más grande, quiero usar eso para ver tanta información como pueda, sin dejar de ser fácil de encontrar. Más espacio alrededor de los componentes ayuda a diferenciar entre las colecciones de información. Los íconos en las pestañas son una forma de ayudar a llamar la atención sobre lo que significa cada componente.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.