Lección 1 de 0
En Progreso

1.3 : Cómo utilizar piezas móviles para respaldar la multitarea

30 septiembre, 2023

Ahora, nuestra conjetura es que eres un usuario de computadoras bastante experimentado. Quizás Linux sea un puente demasiado lejos, pero usar Windows o Mac OS X ya no tendrá muchos secretos. Podemos imaginar que está realizando múltiples tareas en este momento, leyendo este artículo y, al mismo tiempo, vigilando su correo electrónico entrante. Desde una perspectiva de diseño, es un usuario experto, experto en organizar la información en su pantalla para satisfacer sus necesidades. La multitarea con documentos de Photoshop, correo electrónico y Word sería imposible sin el patrón de diseño que se explica aquí: piezas móviles.

El problema del diseño

Los usuarios están trabajando con diferentes aplicaciones a la vez. Las aplicaciones no necesitan estar organizadas en una configuración específica, y los usuarios se beneficiarían de poder cambiar la posición de una o más de las ventanas o paneles. Imaginemos una escena, por ejemplo, en la que un usuario está a punto de sentarse a ver una película en streaming, mientras vuelve a poner en venta sus artículos de eBay a nuevos precios, mientras redacta un correo electrónico bien redactado para su tía Mildred, que vive en otro país y para a quien le ha llevado tres meses encontrar tiempo para escribir.

Está decidido a enviarle el correo electrónico esa noche, pero debe intentar promocionar sus artículos no deseados en eBay (incluidos algunos suéteres que le regaló su tía) y, como es de noche y ha tenido un día duro en el trabajo, quiere para relajarse con una película. Quiere que la película se reproduzca en una pequeña ventana hacia la derecha de la pantalla de su computadora portátil. Mientras tanto, a la izquierda, querrá tener un navegador abierto con tres ventanas (Yahoo, Facebook y eBay). Al mismo tiempo, necesitará Word abierto, ya que quiere escribir un buen correo electrónico y, como su tía es muy “correcta”, querrá corregir la ortografía del documento antes de siquiera pensar en cortarlo y pegarlo en un correo electrónico.

Tendrá que alternar entre el documento de Word y la página de eBay de forma intermitente, ya que se le ocurre una idea para la carta y se le ocurre otra sobre su estrategia de precios. De repente, recuerda que su tía no usa Instagram ni Facebook, por lo que tendrá que cargarle algunas fotos de su nuevo apartamento desde una tarjeta de memoria, y necesitará otra mini ventana para pasar por eso . Para que nuestro usuario pueda hacer las cosas mientras se las arregla para relajarse al mismo tiempo, necesitará tener el control de lo que puede examinar a la vez y ajustar las minipantallas para que no invadan su película. mientras juega. Para nosotros como diseñadores, esta es la realidad íntima del mundo de nuestros usuarios; tenemos que dejarles tener sus propias formas de ver y hacer las cosas, dentro de lo razonable.

La solución de diseño

Cuando corresponda, permita a los usuarios cambiar el tamaño y mover paneles por la interfaz de usuario. Si es probable que quieran o necesiten realizar múltiples tareas, deles la oportunidad de cambiar los paneles para que se adapten a su comodidad y cambiar los más pequeños para hacerlos más grandes. Deben poder ajustar el tamaño de las pantallas de forma libre, arrastrando los bordes a los lados o encogiendo / expandiendo los paneles desde las esquinas. El nombre del juego es dar rienda suelta a los usuarios para que puedan interactuar con sitios y pantallas de una manera que los mantenga felices.

¿Por qué elegir un patrón de diseño de piezas móviles?

La capacidad de personalizar las pantallas puede ayudar a los usuarios a mejorar su productividad. Con el tiempo, los usuarios se vuelven cada vez más expertos en organizar la información y los elementos de la interfaz gráfica de usuario para satisfacer mejor sus necesidades. Es probable que cada persona tenga un arreglo ideal, o uno al que simplemente se haya acostumbrado; por lo tanto, imponerles restricciones, como paneles fijos e inamovibles, limita la posibilidad de que organicen la interfaz de usuario para respaldar las tareas que realizan con frecuencia. Por ejemplo, nuestro usuario en el escenario está acostumbrado a concentrar su atención hacia la izquierda (una práctica reforzada por la posición de su puesto de trabajo en la oficina); por lo tanto, la película que se reproduce a la derecha de la pantalla estará allí más como un punto de comodidad. Ya ha visto la película en numerosas ocasiones; solo la quiere como telón de fondo o para hacerle ‘compañía’.

Con la práctica, el usuario aprende dónde están los elementos y cómo llegar a ellos en el menor tiempo posible. Incluso cuando las herramientas necesarias para una tarea se encuentran en diferentes paneles, la memoria espacial del usuario le permite cambiar de una pieza a otra con rapidez y sin problemas. Una cosa importante para recordar aquí es que, aunque el objetivo es facilitar la multitarea, los usuarios construirán sus arreglos abriendo y ajustando elementos (por ejemplo, una pantalla de YouTube) panel por panel; por lo tanto, deben centrarse en personalizar una disposición cómoda de paneles personalizando primero el tamaño y la posición de cada panel.

“El hombre que persigue dos conejos no atrapa a ninguno”.
—Confucio, antiguo profesor, editor, político y filósofo de chino

La capacidad de personalizar la interfaz de usuario de esta manera también permite a los usuarios priorizarsus tareas y acciones. Por ejemplo, muchos usuarios querrán tener un video reproduciéndose en segundo plano mientras escriben un documento, por lo que reducen la ventana de video pero hacen que la ventana del documento sea más grande. Por supuesto, los correos electrónicos y las actualizaciones de las redes sociales entrarán en la imagen en algún momento, por lo que el usuario querrá hacer clic entre las pantallas para ver qué está sucediendo. Si es algo realmente digno de mención, por ejemplo, un amigo le envía un mensaje instantáneo, el usuario querrá mantener esa ventana abierta, tal vez en la parte inferior derecha de la pantalla. Un punto clave aquí es recordar que debemos mantener alto el nivel de conveniencia, para que el usuario nunca tenga que recurrir a un dispositivo secundario. Después de todo, ese teléfono inteligente o tableta puede estar recargándose en otra habitación.

Las piezas móviles permiten a los usuarios priorizar sus propias tareas y acciones. Por ejemplo, esta conveniencia permite al usuario reproducir un video en segundo plano mientras escribe un documento.

Práctica recomendada: cómo implementar piezas móviles

  1. Proporcione a los usuarios pequeños indicadores que les informen de la oportunidad de cambiar el tamaño de los paneles. Por lo general, el cursor cambia a una flecha horizontal bidireccional cuando se desplaza sobre los bordes exteriores de un panel.
  2. Además, proporcione un cuadrado ‘maximizar’ en la esquina superior derecha o izquierda del panel, para que el usuario pueda ver rápidamente un panel en modo de pantalla completa.
  3. Cuando el panel está en modo de pantalla completa, permita que el usuario vuelva a la disposición anterior , cambiando el ícono de ‘maximizar’ a un ícono de ‘restaurar hacia abajo’. Asegúrese de que el estado anterior se guarde automáticamente; de lo contrario, ‘restaurar hacia abajo’ cambiará la disposición personalizada.
  4. Si solo desea permitir un cierto nivel de personalización, como limitar qué tan lejos se pueden mover los paneles de la pantalla o qué tan pequeños se pueden reducir, entonces debe establecer ciertos parámetros . Del mismo modo, si no desea que el usuario superponga los paneles, debe establecer algún tipo de cuadrícula en la que todos los paneles se puedan mover o cambiar de tamaño.
  5. Para permitir un movimiento rápido y fácil, debe implementar un asa en algún lugar de los paneles, de modo que el usuario pueda agarrar uno y colocarlo en otro lugar de la pantalla.
  6. Si los usuarios deciden que ya no quieren o necesitan el diseño personalizado, se beneficiarían de una acción de “volver a los valores predeterminados” . Agregue esta opción para que sea visible dentro de los paneles actuales o en una posición claramente etiquetada y de fácil acceso más profunda en la interfaz de usuario. Entonces, con un clic, los usuarios pueden regresar a la forma en que encontraron las cosas.

Adobe proporciona la acción ‘volver a los valores predeterminados’ en su suite creativa. Los usuarios expertos a menudo reorganizan sus paneles para adaptarse mejor a su flujo de trabajo. Cuando deciden que ya no se beneficiarán de la vista personalizada, la opción de restablecimiento les ayuda.

Problemas potenciales con piezas móviles

Los paneles móviles son generalmente un patrón de diseño de interfaz de usuario sin problemas; el único problema potencial es si el usuario cambia el diseño y no sabe cómo cambiar a la disposición original o predeterminada. Como se indicó anteriormente, una simple opción ‘volver a los valores predeterminados’ permitiría al usuario ordenar la interfaz de usuario con un clic del mouse.

Además, organizar varias pantallas para admitir la multitarea puede llevar demasiado tiempo, especialmente cuando desea ver varias aplicaciones una al lado de la otra, mientras utiliza la cantidad máxima de espacio en su pantalla para la visibilidad. Aquí es donde las aplicaciones pequeñas y simples como Spectacle (que se muestra en el ejemplo a continuación) pueden ayudar. Por lo tanto, los usuarios tienen orientación sobre cómo optimizar las vistas sin comprometer ni tener que dedicar tiempo a ajustar los paneles manualmente.

Sobre todo, recuerde que la línea entre el entretenimiento y “conseguir cosas por hacer” es borrosa en el 21 stsiglo, al menos en términos de lo que sucede en una pantalla en un momento dado. Con el advenimiento de la transmisión y el predominio de YouTube, un número cada vez mayor de usuarios obtienen sus ‘arreglos’ de TV, películas y otros audiovisuales en la misma pantalla y al mismo tiempo que conversan con amigos, pagan facturas, investigan para ensayos, escribir poesía, lo que sea. Para ellos, esto es más cómodo, por no mencionar económico, que tener la televisión encendida y tener que levantar la vista de lo que están haciendo cada cierto tiempo. Para nosotros, como diseñadores, eso significa que tenemos aún menos espacio para ofrecerles flexibilidad con los paneles que están usando para interactuar o trabajar. Por lo tanto, profundizar en este fenómeno debería ayudarnos a ayudar a los usuarios a ayudarse a sí mismos.

La aplicación Spectacle admite el patrón de diseño de piezas móviles al brindar al usuario atajos para cambiar el tamaño y posicionar ventanas en la pantalla rápidamente.