1.2 : Escenario central: ayude al usuario a centrarse en lo que es importante

Una tarea importante para usted como diseñador es ayudar al usuario a realizar las tareas de la manera más eficiente posible. Empresas de software como Adobe y Microsoft son expertas en esto. Con frecuencia utilizan un patrón de diseño llamado “centro del escenario” para ayudar al usuario a concentrarse en lo que es importante. El escenario central es uno de los elementos de diseño que intervienen en el establecimiento de la jerarquía visual; por lo tanto, consulte este patrón de diseño de interfaz de usuario para ver cómo puede ayudar al usuario con el diseño general de su pantalla gráfica. Los beneficios serán evidentes a medida que aumente el compromiso.

El problema del diseño

La información, el panel, la ventana o el conjunto de herramientas más importantes deben representarse como tales en la interfaz de usuario. Cuando los usuarios están realizando una tarea, necesitan un área central para llevar a cabo acciones y operaciones , mientras que otros paneles subsidiarios, conjuntos de herramientas, etc. deben ser instantáneamente accesibles. Nuestros ojos (y mentes) tienen una tendencia natural a buscar un punto focal en elementos o diseños útiles (o hermosos) que elegimos examinar. Tome el sitio web noruego que se muestra a continuación, por ejemplo. En esta tienda web, una tarea principal sería seleccionar o incluso comprar un producto. Sin embargo, como la interfaz de usuario no coloca ninguna categoría de producto en el centro del escenario, los usuarios son muyEs probable que se distraiga con las muchas opciones que desbordan la página. Naturalmente, este es un ejemplo extremo, pero lo mismo ocurre con las páginas más apagadas. Al mirar esta imagen, es posible que sus ojos se cierren ligeramente sobre la bicicleta en el cuadro amarillo-blanco que está un poco en el medio.

Sin embargo, está lejos de la noción de centro del escenario: en lugar de inspirarlo a deducir qué hacer a continuación de una manera intuitiva, está ahogado por un carnaval de imágenes y texto. Sin ser desagradable con el diseñador involucrado, podríamos imaginar que alguien hizo un volante (no especialmente bueno) para esta tienda, lo dejó en un escáner de la empresa y la imagen apareció accidentalmente donde debería haber estado la página web real. En lugar de ser un recurso para guiar a los usuarios cómodamente hacia un resultado deseado al mostrar información cuidadosamente considerada, es solo un mar de datos, remendados con una legión de imágenes inconexas. Lo triste es que, si bien esta compañía probablemente tiene grandes ofertas en exhibición, no hay nada en el camino de una historia inteligible que suceda aquí.

Esta tienda web noruega no soporta la tarea principal de un usuario de manera óptima: seleccionar o comprar un producto. La gente se distrae fácilmente con las muchas opciones que desbordan la página. Los elementos que se muestran arriba no nos llaman la atención; más bien, tenemos que mirar detenidamente este diseño para poder elegir qué es qué y cuánto cuesta. Eso es un trabajo duro, no una buena experiencia de usuario.

La solución de diseño

Evite ‘salpicaduras’ como esta, primero determinando la jerarquía de lo que desea presentar. Coloque el elemento más importante de la interfaz gráfica de usuario en la subsección más grande y coloque las herramientas de apoyo, conjuntos de acciones, etc. en otros paneles menos prominentes. Al poner la información más importante o el panel de uso frecuente en el centro del escenario, atrae la atención de los usuarios hacia ella y les permite mantener la atención en ella cuando realizan sus tareas. El escenario central es un patrón de diseño de interfaz de usuario común, que aparece en la mayoría de las aplicaciones, como sitios web, hojas de cálculo y paquetes de software (por ejemplo, MS Paint y Gimp).

MS Paint utiliza el centro del escenario como patrón de diseño para llamar la atención sobre la tarea principal de un usuario: manipular elementos en el lienzo. Aquí, no tenemos ninguna excusa real para no poder deducir lo que podríamos hacer a continuación.

¿Por qué elegir un patrón de diseño de escenario central?

La disposición de la interfaz de usuario debe ofrecer a los usuarios pistas visuales sólidas sobre qué es importante y qué elementos están relacionados con su objetivo principal. Al usar el tamaño para resaltar el elemento más importante en la interfaz de usuario, puede asegurarse de que la atención de los usuarios sea inmediata.dibujado a la región más relevante y significativa de la pantalla. A continuación, pueden determinar instantáneamente que todos los demás paneles realizan funciones auxiliares y están relacionados con el panel central. En otras palabras, pueden detectar de un vistazo que estos otros paneles ofrecen funciones de apoyo que le ofrecen la capacidad de manipular lo que sucede en el panel principal en el centro del escenario. Si tiene este concepto en mente a medida que avanza, para cuando haya creado su primer prototipo, habrá facilitado una configuración efectiva que los usuarios deberían poder tomar de forma natural e intuir lo que sucede a continuación en su “ historia ” de experiencia de usuario.

“Así como la oración principal en un artículo de noticias establece el tema y el propósito del artículo, la entidad en el centro del escenario establece el propósito de la interfaz de usuario”.
—Jenifer Tidwell, consultora web y autora

Práctica recomendada: cómo implementar Center Stage

1. Primero, debe determinar qué panel, conjunto de herramientas o ventana es la parte más importante de la interfaz de usuario . Por lo general, esto será obvio desde el principio, ya que generalmente es el panel operativo central del usuario, como el panel que contiene el documento de texto, la hoja de cálculo o el “lienzo” del usuario.
2. Haga que este panel sea el más grande de la interfaz de usuario y asegúrese de que todos los demás sean más pequeños. Algunos expertos en diseño de interfaces de usuario recomiendan que el panel central del escenario sea al menos dos veces más grande que el siguiente elemento más grande de la interfaz de usuario, como una barra de herramientas.
3. Utilice el color para distinguir el contenido del panel del panel en sí . Normalmente, el área central del panel más grande es blanca y las regiones circundantes son grises.
4. Utilice titulares para ayudar a distinguir los paneles entre sí y para ayudar al usuario a identificar conjuntos de herramientas específicos, grupos de acciones y cualquier otro panel auxiliar.
5. Ordene los diferentes elementos de acuerdo con las expectativas de los usuarios. Es importante colocar el panel principal en el centro del escenario, pero también es una consideración vital organizar los otros paneles para ayudar a los usuarios a realizar las acciones deseadas de la manera más rápida y precisa posible. Por lo tanto, aunque los otros paneles y conjuntos de herramientas cumplen una función de apoyo, no deben ocultarse a la vista; ni deben ocluir la vista del usuario del panel principal.

Este ejemplo de la aplicación de maquetas Balsamiq muestra cómo se puede implementar en el centro del escenario. El panel más importante es el más grande. El color y los titulares se utilizan para distinguir el panel principal de los demás, y los paneles se colocan alrededor del escenario principal de acuerdo con las tareas del usuario. En muy poco tiempo, puede deducir dónde encontrar las herramientas que necesita y qué funciones realizan los distintos paneles y botones.

Problemas potenciales con Center Stage (Escenario central)

¿Cómo sabe cuál es la mejor disposición posible de paneles en el centro del escenario? La respuesta simple es esta: no es así . Todos los usuarios son diferentes y, por lo tanto, tendrán diferentes objetivos y métodos para completar sus tareas.Por ejemplo, cuando se utiliza un paquete de software de pintura, el usuario puede estar concentrado en un segmento particular de la imagen en cuestión; por lo tanto, los paneles secundarios no deben colocarse en esta región, ya que hacerlo podría restringir la vista del usuario. Otro punto es tener muy en cuenta las funciones más necesarias para que pueda permitir que los usuarios las encuentren fácilmente, en comparación con funciones más avanzadas o de interés especial a las que solo los usuarios expertos normalmente querrían acceder. Independientemente de lo bien que crea que conoce las tendencias de sus usuarios objetivo como grupo, solo en su estudio de diseño, simplemente no podrá hacer mucho más que adivinar cómo cada uno como individuo tomará su concepto de diseño inicial. de forma exacta. Por supuesto, la única forma de obtener alguna indicación de si lo hizo bien es recibir comentariosde los usuarios. Por lo tanto, no tenga miedo de probar, ¡y prepárese para aprender e iterar! Sin embargo, antes de llegar a esa etapa, puede ayudarse a sí mismo recordando una regla de oro: nunca permita que un usuario se congele confundido ante cualquier cosa que diseñe; busque siempre elementos que puedan llamar la atención o “¿Cómo hago X o Y en ¿esta?” preguntas que surgirán si la ejecución de una acción no es obvia. Esa vacilación será el primer paso en el camino (corto) hacia la total frustración del usuario con su oferta.

Realmente, la única forma de saber con certeza si colocó los paneles en el centro del escenario de la manera correcta es probar con los usuarios. Si lo hace en una etapa inicial de diseño, mediante la creación de prototipos en papel, puede iterar rápidamente … y ahorrarse mucha angustia más adelante.