MOVIMIENTO: El nuevo Skeuomorfismo

Como una tendencia de diseño web, el skeuomorfismo pasó de "Woah ... ¡eso se ve increíble!" a "EW ... eso parece anticuado!" aparentemente durante la noche. ( posiblemente, fue la noche en que Apple lanzó iOS 7 ). La tendencia hacia un diseño plano simple basado en CSS, o más específicamente, diseño de interfaz de usuario plano, obligó a los diseñadores a cortar todos los lazos con skeuomorfismo por definición. Básicamente, todos los diseñadores odian el skeuomorfismo ahora. Es tan ... ¡viejo! Sin embargo, hay una nueva forma de skeuomorfismo que surge. Esta versión se reproduce muy bien con el diseño plano. Al igual que su predecesor estético, emula la vida real, pero esta nueva forma de skeuomorfismo emula movimiento y masa en lugar de textura e iluminación. Es MOVIMIENTO DE SKEUOMORFICO , y se refiere específicamente al skeuomorfismo en la animación y las transiciones.

Skeuomorfismo es malo

Con una mentalidad de diseño plano, las texturas son malas. La iluminación y el sombreado también son malos. Sin embargo, estas opiniones están arraigadas en la razón, y no se basan en un diseñador aleatorio o en el gusto estético de la comunidad de diseño. El diseño receptivo fue un gran impulsor del movimiento de diseño plano. A saber, no puede escalar gráficos. Entonces, las texturas, a menos que pueda crearlas con CSS ( , que se está volviendo cada vez más posible ) se verá pixelado en pantallas grandes o será innecesariamente "pesado" para dispositivos con pantallas pequeñas. Sin embargo, no solo la textura basada en imágenes pesa código en pantallas pequeñas. El rendimiento en todos los ámbitos es otro controlador para el diseño plano basado en CSS. Gradientes y sombras, incluso en CSS, tiempo de carga de costos y eficiencia. El diseño plano los elimina para la simplicidad visual y funcional. Afortunadamente, incorporar el movimiento realista en un sitio web o aplicación utilizando CSS está más justificado, porque agrega usabilidad para un pequeño costo de rendimiento. Las transiciones de un estado a otro en un solo objeto o en una página completa ayudan a los humanos a comprender lo que está sucediendo en el mundo "falso" en su pantalla. Pone las cosas en términos mundiales "reales", y de repente, los diseñadores cosechamos los beneficios del contexto, la causa y el efecto, y los objetos con peso. Este tipo de toque skeuomórfico es cualquier cosa menos superfluo.

El movimiento skeuomórfico es grande

Las transiciones y el movimiento no solo son relevantes y generalmente útiles, sino que en realidad son bastante necesarias para ayudar a los cerebros humanos a comprender lo que realmente está sucediendo (y por qué) en un mundo digital. En la vida real, la mayoría de las cosas no aparecen fuera de la nada. Los objetos se mueven dentro y fuera de nuestra vista. O tal vez crecen de algo pequeño en algo grande. Cuando cambiamos el estado de una página web o aplicación de manera antinatural, es confuso (aunque solo es inconscientemente) a los usuarios. Esto incluye actualizaciones de la página completa, pero también se aplica a los estados de desplazamiento, ventanas emergentes, sugerencias de información sobre herramientas, iconos de carga, barras de progreso y más. Cualquier cosa que cambie de estado en la página frente a los ojos del usuario debe tener movimiento y transición. Hay tres consideraciones específicas cuando observamos por qué y cómo obtenemos un movimiento realista en la web.

• Contexto
• Causa y efecto
• Peso

Contexto

= El movimiento, específicamente la transición, le da al usuario contexto. Ayuda a mostrar dónde estamos en un flujo completo. Si una nueva página se "desliza" a la vista, se entiende que es relativamente temporal y en una "capa" sobre la vista actual, que es probablemente el foco principal. (Este concepto también fue una gran parte del iOS 7 rediseño .) Además, cuando agregamos contenido a una página después de que se cargue inicialmente, si no mostramos algún tipo de transición, el nuevo contenido desplazará o reemplazará otro contenido sin contexto. Esto es especialmente evidente si ya se ha desplazado más allá del contenido que se agrega. Lo que estás leyendo de repente desaparece porque se trasladó más abajo en la página. En cambio, "deslice abrir" el área que ocupará el nuevo contenido. O revelar cada línea de arriba a abajo. Incluso si esta transición es rápida, proporciona a los usuarios una idea suficiente para comprender lo que está sucediendo.

Causa y efecto

El movimiento también puede mostrar causa y efecto. Por ejemplo, si hace clic en un botón y la etiqueta se desliza para dejar espacio para un icono de carga, los usuarios comprenderán exactamente de dónde proviene ese icono de carga y por qué está allí. Sin ese pequeño movimiento de causa y efecto, los usuarios pueden perder el cambio o no comprender completamente lo que está sucediendo. Para ilustrar los beneficios del movimiento de causa y efecto, tome el menú recientemente común de "cajón deslizante" que vemos mucho en pantallas pequeñas. La esquina superior izquierda de la pantalla es un icono de hamburguesa ||8 hamburger icon (también conocido como icono de menú), y hacer clic o tocarlo revela el menú. A veces, el menú ocupa el ancho completo de la pantalla, y a veces es solo un ancho parcial. En cualquier caso, cuando el menú se abre, se parece mucho a un truco de magia de salto en un mal programa de televisión. Incluso puedes escuchar el * ting * y ver un poco de humo falso o brillo. En cambio, si ese menú se desliza desde la izquierda, subconscientemente tiene mucho más sentido para el usuario. Su cerebro no solo tiene la oportunidad de comprender lo que está sucediendo a medida que sucede, sino que ven una razón por la cual el menú se ve y funciona como lo hace. Solo se escondía fuera de la pantalla, esperando pasar a la vista.

Peso

(intencionalmente ralentizado para fines de ilustración)

El movimiento en sí es importante como el primer paso, pero el movimiento que parece falso en realidad duele la usabilidad. Es lo mismo o peor que simplemente encender las cosas en su lugar. Yo diría que es peor porque el movimiento artificial o robótico es bastante distraído. El movimiento debe verse y sentirse real, lo que significa que debemos considerar las propiedades de la vida real de los objetos y la física en general. Un truco para hacer que el movimiento se sienta real es facilitando . En la vida real, debido a la física, todo lo que se mueve se alza y se alza hasta cierto punto. Nada comienza a moverse a toda velocidad, y nada naturalmente pasa de toda la velocidad a una parada completa sin disminuir primero. Para vender el movimiento aún más, recuerde que los objetos grandes en la vida real son más lentos para ponerse al día y más lento para detenerse. Tienen más masa, por lo que tienen más inercia. Esto incluso puede transmitir jerarquía al permitir que un objeto se sienta pesado e importante. Alternativamente, si un botón es lo más grande en una página, pero se ajusta al movimiento rápido, distraerá y parecerá antinatural. Hay un consejo final para crear un movimiento realista. Esto parece pequeño, pero tiene un gran efecto. Al mover objetos desde fuera de la pantalla a la vista, no alivie el movimiento. Los objetos que aparecen desde la pantalla ya deben estar en movimiento, por lo que ya deben estar a toda velocidad cuando el usuario los ve por primera vez. Invierta ese concepto para deslizar las cosas fuera de la pantalla.

Vamos a recapitular

La animación y las transiciones en la web están recibiendo atención últimamente. Por una buena razón. El movimiento puede mejorar la usabilidad agregando contexto y mostrando causa y efecto. No es natural ver que un objeto se ajuste a una nueva posición sin contexto o insinúe de dónde vino y por qué. Los movimientos y transiciones sutiles, cuando se realizan correctamente, ayudan a explicar ese tipo de cambio para que tenga sentido para los humanos. A medida que el movimiento en el navegador se vuelve más frecuente, es importante hacer que ese movimiento se vea real y natural. Los objetos necesitan peso (los objetos grandes deben moverse más lentamente que los pequeños), el movimiento necesita disminuir (los objetos reales no comienzan a moverse a una velocidad 100%) y, a veces, la inercia de un objeto incluso hará que se aprieta o rebote cuando se trata de una parada repentina. La emulación de la vida real del movimiento es una forma de skeuomorfismo, y es una gran usabilidad. A medida que todos hacemos la transición de nuestro diseño y estilo UI al diseño plano, compensemos la estética plana con un movimiento robusto. Traemos de vuelta al skeuomorfismo.