Share
Los estados vacíos son a menudo una idea tardía para la mayoría de los diseñadores.
La página de inicio y el carrito de pago, por ejemplo, pueden ser la función más priorizada en su cartera de pedidos, pero ¿qué pasa con los estados vacíos de estas funciones? ¿Cómo deben ser abordados??
El siguiente artículo no es exhaustivo, o un "debe hacer" por cualquier medio. En su lugar, describe tres tipos comunes de estado vacío:
Veremos un buen ejemplo de cada uno, discutiremos por qué funciona y cómo podría implementar ideas similares, o ampliarlo en función de su situación particular..
La siguiente pantalla es de la aplicación BBCNews. Es un ejemplo de una pantalla donde el usuario está utilizando la aplicación por primera vez y necesita alguna dirección para "comenzar".
Es efectivo en un par de niveles:
Ofrece una explicación clara.. Este estado vacío explica qué hace la función actual y le da un botón, que indica cómo comenzar. En este caso, el usuario debe agregar temas para crear su propio servicio de noticias personal.
Proporciona un enlace para rellenar esa característica.. El botón, que lleva al usuario a la página donde puede llenar la pantalla dada, es una característica útil. Le ahorra al usuario tener que navegar a casa e intentar encontrar la pantalla por otros medios.
Entonces, ¿cómo podrías implementar algo similar a ti mismo??
Proporcionar una secuencia de embarque. Si el usuario está utilizando su aplicación web por primera vez, puede considerar un recorrido para ayudarlo a ponerse al día. Sin embargo, tenga en cuenta que esto puede frustrar al experto y al usuario intermedio. Considere solo mostrarlo una vez y luego difundir la información en su sección de ayuda.
La siguiente página es la Lista de deseos de la tienda Apple iTunes. Es un ejemplo de una página donde el usuario no tiene nada o lo ha borrado todo de su lista.
¿Qué hace que esta página vacía sea efectiva??
Algo es mejor que nada. Esta lista de deseos no es solo dar salida a nada. Le da al usuario una indicación de que necesita agregar un elemento a la lista. El icono es grande y audaz, pero sutil. Tu estado vacío debería llamar la atención de los usuarios, ¡aquí no tienes nada! -Pero también es indicativo de vacío, por ejemplo. utilizando colores apagados, etc..
Directo y directo al punto.. Es tentador poner un poco de texto en su estado vacío ... quizás una cita de alguien. Sin embargo, la mayoría de las veces, la mejor opción es ser directo y directo al punto como se muestra en el ejemplo anterior "No ha agregado nada a su lista de deseos".
Esta página de la lista de deseos podría haber sido mejorada, entonces, ¿qué deberíamos aprender de ella??
Dar un ejemplo. También puede pensar en agregar un ejemplo de cómo se vería un estado lleno. Probablemente esto sea más relevante para las interfaces de escritorio que para las móviles, ya que tiene un poco más de espacio en pantalla para trabajar.
La siguiente página de error es parte del navegador Google Chrome. Es un ejemplo de una situación en la que el usuario está obteniendo algo más que su estado deseado. En este caso no pueden conectarse a internet..
Este gráfico se ha vuelto familiar para millones de personas, pero lo que lo hace funcionar?
Es apropiado para la situación.. Funciona porque el icono es sutil y apropiado para la gravedad del problema. Es común ir por una cruz o una "X" y eso está bien; es una buena manera de llamar la atención de alguien, pero aquí solo quiere informar al usuario que algo anda mal. No necesitas gritar al respecto con un ícono o mensaje en la parte superior.
Ofrece mas informacion. Nunca debe dejar a sus usuarios inseguros sobre qué hacer a continuación. En este caso, Chrome ha proporcionado una Más botón para ayudar a solucionar el problema. En la mayoría de los casos, el usuario probablemente estará al tanto de que necesita encender su wifi, reiniciar su módem o llamar a su proveedor de Internet, pero esto agrega valor a aquellos usuarios que necesitan más información.
¿Qué tal si aplicas esto tú mismo??
Considere cuán críticos son sus mensajes de error. ¿Qué tan malo es el error? Si es fundamental para el usuario, tendrá que llamar su atención con colores fuertes y una jerarquía clara. Considere el lenguaje utilizado y empatice con la posición del usuario. Un ícono divertido que evita una situación frustrante podría empeorar las cosas.!
Este artículo le ha dado un buen marco de inicio que debe considerar al mirar los estados vacíos. Considere para qué tipo de estado vacío está diseñando y las formas más adecuadas de diseñar la página según la situación de sus usuarios y sus objetivos.
Algunas buenas reglas de oro incluyen:
Accentsconagua