- 08/03/2017 17:11
[ATTACH=CONFIG]222376[/ATTACH]
La visibilidad del estado del sistema es una de las reglas más importantes del diseño de la interfaz de usuario. El objetivo detrás de esta regla es bastante obvio: para minimizar la tensión del usuario, debe proporcionar retroalimentación al usuario sobre lo que está sucediendo con la aplicación dentro de un tiempo razonable. No mantenga a los usuarios adivinando - decirle al usuario lo que está sucediendo. Y una de las formas más comunes de tal retroalimentación es un indicador de progreso.
En este artículo, vamos a ver los principales tipos de indicadores de progreso y casos de uso para ellos.
Un buen diseño de interacción proporciona comentarios.
Si bien la respuesta de la aplicación instantánea es la mejor, hay momentos en los que la aplicación no podrá cumplir con las directrices de velocidad. Los retrasos son generalmente causados por tiempos de carga lentos y problemas de latencia. En estos casos, debe asegurar a los usuarios que la aplicación está trabajando en su solicitud y que se está realizando el progreso real.
Esencialmente, la retroalimentación responde a las preguntas en tres categorías:
Estado Actual: ¿Qué está pasando?
Resultados: ¿Qué sucedió?
Situacción futura: ¿Qué pasará después?
¿Qué es un buen indicador de progreso?
Los buenos indicadores de progreso siempre dan algún tipo de retroalimentación inmediata. Notifican a los usuarios que la aplicación necesita más tiempo para procesar la acción del usuario y decir (aproximadamente) cuánto tiempo tomará. Tienen dos ventajas principales:
- Reducir la incertidumbre del usuario (la aplicación asegura al usuario que está funcionando).
- Ofrezca una razón para esperar y reducir la percepción de los usuarios sobre el tiempo (la aplicación le da al usuario algo que ver mientras espera, por lo que hace que los usuarios presten menos atención a la espera).
El tiempo de espera de un usuario empieza en el momento en que ella pulsa la pantalla (inicia una acción). Inmediatamente, el sistema debe dar alguna retroalimentación visual para comunicar que ha recibido la solicitud.
Utilice un indicador de progreso para cualquier acción que tarde más de un segundo. Para cualquier cosa qué tome menos de 1 segundo para cargar, es una distracción utilizar una animación.
Tipos de Indicadores.
Los indicadores de progreso podrían ser determinados o indeterminados:
- Cuando los indicadores son determinados indican cuánto tiempo una operación tomará cuando el porcentaje completo es detectable.
- Cuando los indicadores son indeterminados, solicitan que el usuario espere mientras algo termina cuando no es necesario indicar cuánto tiempo tomará.
- Animación de progreso indeterminado.
- También podría haber combinaciones de estos dos tipos de indicadores.
Animación en bucle.
Mostrando un gráfico animado en bucle ofrece retroalimentación que el sistema está funcionando, pero normalmente no da suficiente información sobre cuánto tiempo el usuario tendrá que esperar.
Como regla general, debe usar animación en bucle sólo para acciones rápidas (2-10 segundos). Hacer que el usuario mire una rueda giratoria más tiempo puede aumentar las tasas de rebote.
También puede ser útil agregar claridad adicional al usuario incluyendo texto que explique por qué el usuario está esperando (por ejemplo, Cargando comentarios.).
Expectativas de los Usuarios.
Los iconos de carga predeterminados (como el hilador iOS de líneas grises que irradian desde un punto central) tienden a tener connotaciones negativas. Sirven para una variedad de funciones del sistema operativo, que indican el estado de todo, desde arranque del dispositivo hasta problemas de conexión a la red o de carga de datos. Debido a eso, a la gente no le gusta ver sólo un hilandero de carga sin indicación de progreso o tiempo.
Integración de animación en bucle.
Puede integrar la animación en bucle con los controles existentes, especialmente los botones. Para la aplicación de Android, un cargador circular puede ser integrado con un botón de acción flotante.
El proceso de reflexión aquí es para confirmar que la presentación fue completa no necesariamente el progreso. Eso se muestra a través de la terminación del círculo.
Sistema o animación en bucle personalizada.
La aplicación de Facebook tiene una experiencia muy interesante con la animación en bucle.
Animación Lineal.
Un indicador de progreso lineal determinado debe llenar siempre de 0% a 100% y nunca disminuir en valor. Para múltiples operación que ocurren en secuencia, debe utilizar el indicador para representar el progreso en su conjunto, y no cada operación individual.
Animación Porcentual.
Las esperas inciertas son más largas que las esperas finitas conocidas. Los indicadores de progreso por ciento-hechos son el tipo más informativo de retroalimentación de la espera-animación. Muestran el progreso actual, cuánto ya se ha logrado, y cuánto queda. Un indicador de porcentaje hecho muestra a los usuarios la rapidez con la que se procesa la acción. Como regla general, debe usar la animación por ciento para las acciones que tardan 10 segundos o más.
Proporcione un horario general.
Estimar no trate de ser exacto, un simple, Esto podría tomar un minuto puede ser suficiente para informar al usuario y animarlos a esperarlo.
Animación progresiva.
Las barras de progreso indican a los usuarios cuánto tiempo toma una acción, pero no siempre son correctas. Puede disimular pequeños retrasos en su barra de progreso iniciando la animación progresiva más lentamente y permitir que se mueva más rápido a medida qué se acerca al final. La barra de progreso nunca debe detenerse, de lo contrario los usuarios piensan que la aplicación se congeló.
Mostrando pasos.
En lugar de mostrar un número de porcentaje, considere mostrar el número de pasos. Los usuarios pueden no saber cuánto dura cada paso, pero saber el número de pasos al menos les ayuda a formar una estimación.
Pantallas de esqueleto.
Siempre debe tratar de hacer la espera más agradable si no puede acortar la línea. Y el tiempo de espera es el momento adecuando para las pantallas de esqueleto (contenedores de información temporal). Las pantallas esqueléticas son otra manera de centrarse en el progreso en lugar de esperar tiempos. Una pantalla de esqueleto es esencialmente una versión en blanco de una página en la que la información se carga gradualmente. Esta acción crea la sensación de que las cosas están ocurriendo de inmediato a medida qué la información se muestra de forma incremental en la pantalla.
Medium usa este truco, mostrando un wireframe simple como marcador de posición, mientras que el contenido real se carga. Con una pantalla tal, el foco está en el contenido que se carga no el hecho de que su carga.
No utilice indicadores estáticos de progreso.
Este grupo de indicadores está representado por no mover la imagen o texto como Cargando. o Por favor espere. para indicar que la solicitud ha sido recibida. Si bien cualquier retroalimentación es mejor que ninguna, los indicadores estáticos no ofrecen suficiente información sobre lo que está sucediendo y deben reemplazarse con un tipo de indicador más significativo.
.
Evite el uso de indicadores estáticos de progreso.
Para asegurar que la gente no se aburra mientras espera qué algo suceda, ofrezca alguna distracción. Esto puede ser algo divertido, algo inesperado o cualquier otra cosa qué capte la atención de sus usuarios lo suficiente para qué su aplicación se cargue. Las animaciones finas pueden distraer a sus visitantes y hacerlos ignorar tiempos de carga largos.
Conclusión.
Proporcionar retroalimentación es fundamental para una experiencia positiva del usuario. La retroalimentación puede reducir la incertidumbre para los usuarios y aumentar el tiempo que están dispuestos a esperar.
Recuerda siempre contar con iconos de gran valor para darle una buena ampliación a tu proyecto.
La visibilidad del estado del sistema es una de las reglas más importantes del diseño de la interfaz de usuario. El objetivo detrás de esta regla es bastante obvio: para minimizar la tensión del usuario, debe proporcionar retroalimentación al usuario sobre lo que está sucediendo con la aplicación dentro de un tiempo razonable. No mantenga a los usuarios adivinando - decirle al usuario lo que está sucediendo. Y una de las formas más comunes de tal retroalimentación es un indicador de progreso.
En este artículo, vamos a ver los principales tipos de indicadores de progreso y casos de uso para ellos.
Un buen diseño de interacción proporciona comentarios.
Si bien la respuesta de la aplicación instantánea es la mejor, hay momentos en los que la aplicación no podrá cumplir con las directrices de velocidad. Los retrasos son generalmente causados por tiempos de carga lentos y problemas de latencia. En estos casos, debe asegurar a los usuarios que la aplicación está trabajando en su solicitud y que se está realizando el progreso real.
Esencialmente, la retroalimentación responde a las preguntas en tres categorías:
Estado Actual: ¿Qué está pasando?
Resultados: ¿Qué sucedió?
Situacción futura: ¿Qué pasará después?
¿Qué es un buen indicador de progreso?
Los buenos indicadores de progreso siempre dan algún tipo de retroalimentación inmediata. Notifican a los usuarios que la aplicación necesita más tiempo para procesar la acción del usuario y decir (aproximadamente) cuánto tiempo tomará. Tienen dos ventajas principales:
- Reducir la incertidumbre del usuario (la aplicación asegura al usuario que está funcionando).
- Ofrezca una razón para esperar y reducir la percepción de los usuarios sobre el tiempo (la aplicación le da al usuario algo que ver mientras espera, por lo que hace que los usuarios presten menos atención a la espera).
El tiempo de espera de un usuario empieza en el momento en que ella pulsa la pantalla (inicia una acción). Inmediatamente, el sistema debe dar alguna retroalimentación visual para comunicar que ha recibido la solicitud.
Utilice un indicador de progreso para cualquier acción que tarde más de un segundo. Para cualquier cosa qué tome menos de 1 segundo para cargar, es una distracción utilizar una animación.
Tipos de Indicadores.
Los indicadores de progreso podrían ser determinados o indeterminados:
- Cuando los indicadores son determinados indican cuánto tiempo una operación tomará cuando el porcentaje completo es detectable.
- Cuando los indicadores son indeterminados, solicitan que el usuario espere mientras algo termina cuando no es necesario indicar cuánto tiempo tomará.
- Animación de progreso indeterminado.
- También podría haber combinaciones de estos dos tipos de indicadores.
Animación en bucle.
Mostrando un gráfico animado en bucle ofrece retroalimentación que el sistema está funcionando, pero normalmente no da suficiente información sobre cuánto tiempo el usuario tendrá que esperar.
Como regla general, debe usar animación en bucle sólo para acciones rápidas (2-10 segundos). Hacer que el usuario mire una rueda giratoria más tiempo puede aumentar las tasas de rebote.
También puede ser útil agregar claridad adicional al usuario incluyendo texto que explique por qué el usuario está esperando (por ejemplo, Cargando comentarios.).
Expectativas de los Usuarios.
Los iconos de carga predeterminados (como el hilador iOS de líneas grises que irradian desde un punto central) tienden a tener connotaciones negativas. Sirven para una variedad de funciones del sistema operativo, que indican el estado de todo, desde arranque del dispositivo hasta problemas de conexión a la red o de carga de datos. Debido a eso, a la gente no le gusta ver sólo un hilandero de carga sin indicación de progreso o tiempo.
Integración de animación en bucle.
Puede integrar la animación en bucle con los controles existentes, especialmente los botones. Para la aplicación de Android, un cargador circular puede ser integrado con un botón de acción flotante.
El proceso de reflexión aquí es para confirmar que la presentación fue completa no necesariamente el progreso. Eso se muestra a través de la terminación del círculo.
Sistema o animación en bucle personalizada.
La aplicación de Facebook tiene una experiencia muy interesante con la animación en bucle.
Animación Lineal.
Un indicador de progreso lineal determinado debe llenar siempre de 0% a 100% y nunca disminuir en valor. Para múltiples operación que ocurren en secuencia, debe utilizar el indicador para representar el progreso en su conjunto, y no cada operación individual.
Animación Porcentual.
Las esperas inciertas son más largas que las esperas finitas conocidas. Los indicadores de progreso por ciento-hechos son el tipo más informativo de retroalimentación de la espera-animación. Muestran el progreso actual, cuánto ya se ha logrado, y cuánto queda. Un indicador de porcentaje hecho muestra a los usuarios la rapidez con la que se procesa la acción. Como regla general, debe usar la animación por ciento para las acciones que tardan 10 segundos o más.
Proporcione un horario general.
Estimar no trate de ser exacto, un simple, Esto podría tomar un minuto puede ser suficiente para informar al usuario y animarlos a esperarlo.
Animación progresiva.
Las barras de progreso indican a los usuarios cuánto tiempo toma una acción, pero no siempre son correctas. Puede disimular pequeños retrasos en su barra de progreso iniciando la animación progresiva más lentamente y permitir que se mueva más rápido a medida qué se acerca al final. La barra de progreso nunca debe detenerse, de lo contrario los usuarios piensan que la aplicación se congeló.
Mostrando pasos.
En lugar de mostrar un número de porcentaje, considere mostrar el número de pasos. Los usuarios pueden no saber cuánto dura cada paso, pero saber el número de pasos al menos les ayuda a formar una estimación.
Pantallas de esqueleto.
Siempre debe tratar de hacer la espera más agradable si no puede acortar la línea. Y el tiempo de espera es el momento adecuando para las pantallas de esqueleto (contenedores de información temporal). Las pantallas esqueléticas son otra manera de centrarse en el progreso en lugar de esperar tiempos. Una pantalla de esqueleto es esencialmente una versión en blanco de una página en la que la información se carga gradualmente. Esta acción crea la sensación de que las cosas están ocurriendo de inmediato a medida qué la información se muestra de forma incremental en la pantalla.
Medium usa este truco, mostrando un wireframe simple como marcador de posición, mientras que el contenido real se carga. Con una pantalla tal, el foco está en el contenido que se carga no el hecho de que su carga.
No utilice indicadores estáticos de progreso.
Este grupo de indicadores está representado por no mover la imagen o texto como Cargando. o Por favor espere. para indicar que la solicitud ha sido recibida. Si bien cualquier retroalimentación es mejor que ninguna, los indicadores estáticos no ofrecen suficiente información sobre lo que está sucediendo y deben reemplazarse con un tipo de indicador más significativo.
.
Evite el uso de indicadores estáticos de progreso.
Para asegurar que la gente no se aburra mientras espera qué algo suceda, ofrezca alguna distracción. Esto puede ser algo divertido, algo inesperado o cualquier otra cosa qué capte la atención de sus usuarios lo suficiente para qué su aplicación se cargue. Las animaciones finas pueden distraer a sus visitantes y hacerlos ignorar tiempos de carga largos.
Conclusión.
Proporcionar retroalimentación es fundamental para una experiencia positiva del usuario. La retroalimentación puede reducir la incertidumbre para los usuarios y aumentar el tiempo que están dispuestos a esperar.
Recuerda siempre contar con iconos de gran valor para darle una buena ampliación a tu proyecto.