Metodología

50 cosas que [probablemente] olvidó diseñar

Todos los PM: "No estoy enojado, solo estoy decepcionado ..."

Pequeños favores: si te encanta este artículo, compártelo con tus amigos. Si amas a los cachorros, rescata a uno. Si amas la mayonesa, refrigerala.

Mira, todos nos olvidamos de diseñar algo de vez en cuando. ¡Eso es genial!

Bueno, no es genial ... pero como ... está bien. Sucede. Esta lista te hará mejor. O al menos más consciente. O tal vez solo le das un par de aplausos porque reconoces que alguien pasó un tiempo curando esta lista y sigue con tu vida. Nbd. Me encantan esos aplausos y ese bajo. Con una referencia de Meghan Trainor en el primer párrafo, comenzamos con un gran comienzo.

Esta es solo una lista de cosas que quizás haya olvidado diseñar. Cuando piensas en lo simple que es una aplicación como Instagram o Snapchat, es fácil pasar por alto la cantidad de pantallas, estados y demás para crear una experiencia de usuario realmente increíble.

• Cosas de inicio de sesión y registro
• Primera experiencia
• Todas las pequeñas cosas
• Lanzamiento de materiales
• Cosas de perfil
• Flujos locos

Así que lee esto, reflexiona y ... como ... no molestes tu PM.

Iniciar sesión Registrarse

1. La pantalla de bienvenida

La pantalla que aparece cuando inicia una aplicación móvil o cuando inicia sesión en una aplicación web y todo se está cargando.

2. El flujo de contraseña olvidada

¿Fue "abcd1234" o "1234abcd"? Esto es importante. No lo olvides.

3. La página "Gracias por registrarse"

Esta pantalla generalmente aparece después de que un usuario crea una cuenta y le dice que vaya a confirmar su dirección de correo electrónico.

4. El correo electrónico de bienvenida

Esto abarca la línea entre el diseño del producto y el marketing del producto, pero es literalmente LA PRIMERA impresión que tienes en tus usuarios. Hacer que cuente. Es un buen momento para presentar el tono desenfadado de su producto.

5. Los Términos de Servicio y Páginas de Privacidad (ugh)

Solo hazlo por la gente en legal. Solo están tratando de evitar ser demandados.

Primera experiencia

6. La incorporación del usuario

Hay toneladas de métodos diferentes que puede usar. Aquí hay cinco de mis favoritos:

7. Los estados vacíos listos para usar

Es como mudarse a una casa y no se ha mudado con ningún mueble. Parece bastante vacío, ¿eh? Ayude a sus usuarios dándoles un empujoncito en la dirección correcta. "Coloque el sofá aquí".

8. Los documentos de ayuda

Si estás en una gran empresa, probablemente hay un equipo completo dedicado a esto. Pero todavía te van a molestar por ilustraciones y capturas de pantalla. Esto merece tanto (o más) esfuerzo como la página de inicio de sesión o el feed de actividad.

9. La imagen de perfil de usuario / avatar predeterminado

Registrarse con cuentas sociales o servicios como Gravatar realmente nos ha ayudado a mostrar nuestras caras sonrientes, pero aún así conseguirás que ese tipo que nunca llega a subir una foto de perfil. Dale un poco de estilo y presume de marca.

10. El botón Cerrar sesión

Desafortunadamente, DEBE permitir que los usuarios se vayan. Solo finja que están usando su aplicación en una biblioteca pública y necesitan cerrar sesión para que algún extraño no cambie su nombre de cuenta a "Sr. Campo de tiro al blanco". Inapropiado.

Todas las cosas pequeñas

11. El pie de página de la aplicación

La mayoría de las veces supongo que las páginas continúan para siempre, como cuando la gente creía que el mundo era plano y simplemente continuaba. Nota: La Tierra no es plana.

12. El navegador Favicon

Ya sabes ... ese pequeño ícono que aparece en una pestaña del navegador. Sigo perdiendo mis pestañas medianas porque ya no es verde. ¡Pero es bonito!

13. La página 404

14. El predeterminado / Hover / Focus / Presionado / Desactivado / Etc. Estados de entrada

Ugh, muchos estados. "Focus + Hover" podría ser mi favorito / más oscuro. La siguiente captura de pantalla proviene del Sistema de diseño UX Power Tools.

Nota al margen para mi proyecto paralelo, definitivamente deberías echarle un vistazo:

15. El orden de tabulación

El orden de tabulación es una función de accesibilidad que permite a los usuarios navegar por una página usando la tecla Tab. No pude encontrar una imagen para representar esto, así que tomé una captura de pantalla de una especificación que Christian Beck escribió desde 2007, donde definió la posición del orden de tabulación en una tabla para cada control de UI en una tabla (me cansé incluso escribiendo eso ... SnoozeFest 2017 ™). En realidad, puede definir el orden en que se visitan los elementos para garantizar que las acciones primarias se antepongan a las secundarias. Este es un excelente desafío de diseño.

16. El comportamiento de desplazamiento

No solo dónde y cómo se desplaza, sino qué se desplaza realmente. ¿Es fijo el encabezado? El pie de página?

17. El botón del intercomunicador

Quiero decir que lo menos que puedes hacer es hacer que coincida con los colores de tu aplicación. Vamos amigos. No es una cirugía de cohetes.

18. Los botones de paginación

Asumiendo que no optó por el desplazamiento infinito, sus usuarios necesitarán una forma de llegar a la página 27. ¡Déjenlos!

19. Los cursores

Los botones deben tener un puntero. Las cosas no interactivas deben tener un cursor predeterminado. El texto debe tener un cursor de texto. Los desarrolladores no siempre saben esto. Acabo de marcar una pantalla de aplicación el otro día donde un desarrollador tenía un cursor de texto para el estado de un botón. Misericordia.

20. El mecanismo de clasificación / filtro / búsqueda de tablas

Tiene que haber una forma más rápida de llegar a ZZ Top en esa tabla de datos "Bandas con barbas" ...

21. Los estados vacíos "Sin resultados"

A veces buscará algo o agregará demasiados filtros, y no hay ningún resultado. Qué triste. Anima a tus usuarios con una ilustración descarada. O su cuenta bancaria y números de ruta.

22. Los estados de error

Mala entrada Contraseña incorrecta. Cuenta existente. Demasiadas cosas seleccionadas. Hay todo tipo de formas en que las cosas pueden salir mal, especialmente si eres mi abuela y tienes un iPad para Navidad. Eso fue un error.

23. Las notificaciones del sistema

El sistema siempre está haciendo algo detrás de la cortina, y a veces es bueno saber cuándo las cosas terminan con éxito (o no). Definitivamente deberías dejar que el usuario lo sepa.

24. El menú desplegable Autocompletar vacío

Autocompletar es increíble para ayudarlo a encontrar objetos en el sistema, pero a veces no hay ningún resultado. En este caso, no solo quieres una caja vacía. Muestre un pequeño mensaje o permita que tomen algún tipo de acción.

25. El estado de carga

Claro, las personas probablemente estarán haciendo Tindering en sus teléfonos mientras se carga la página, pero en el caso de que realmente levanten la vista de su deslizamiento sexy, probablemente debería haber alguna indicación visual de que las cosas aún se están cargando.

Lanzamiento de materiales

26. El icono de la aplicación Friggin

Sí, probablemente sea mejor que no te olvides de esto.

27. Las imágenes de la tienda de aplicaciones

28. El gráfico abierto / Imágenes sociales

Esta es la imagen que aparece cuando tuiteas un enlace en Twitter, haces una publicación en Facebook, publicas un enlace en Medium, etc.

Así es como se ve en Medio:

29. Las imágenes de marketing del sitio web

Tampoco se olvide, probablemente querrán hacer que el sitio web se vea como Stripe, así que simplemente copie esto exactamente:

30. Las imágenes del mazo de ventas

Probablemente seas bueno si manejas el anterior. Pero en este caso, probablemente necesitará eliminar el contenido para que coincida con la marca de cualquier acuerdo de 6 cifras en el que esté trabajando su brillante equipo de ventas.

31. The Pitch Deck Images

Como una imagen del Deck de Ventas pero un poco más visionaria. Quiero decir ... estás tratando de recaudar dinero. Descubrirás cómo hacerlo posible más adelante.

32. Las imágenes de búsqueda de productos

¡Hola, acaban de actualizar las páginas de perfil también!

33. Las imágenes de anuncios de Facebook / Twitter

"¡Pero no publicamos anuncios de Facebook!" Ja, hasta que tú lo estés. Y entonces nadie te lo dice. Solo hazlos ya y estarás a salvo.

34. Imágenes de perfil de redes sociales

Sí, tienes que hacer uno para las 938 redes sociales. Afortunadamente, creamos una herramienta Sketch para acelerar eso para usted. Bienvenidos, kiddos.

35. El banner de lanzamiento de correo electrónico

^ por cierto, este es el boletín de mi agencia y mis compañeros de trabajo escriben contenido realmente sobresaliente. ¡Nos encantaría que te suscribieras!

Aquí hay algunos favoritos recientes:

Cosas de perfil

36. Preferencias de notificación

Es increíble cuando las aplicaciones te notifican cuando suceden cosas, e incluso más genial cuando suena una trompeta. Pero después de la decimonovena vez, te cansas mucho de las trompetas. Probablemente debería dejar que el usuario decida cuándo suenan las trompetas.

37. La página de facturación

No olvide que las personas necesitan obtener copias de sus facturas para gastar el producto por el que le están pagando miles de dólares. Y algunas personas conforman el departamento de TI idiota de su agencia y no pueden soportar lo difícil que es localizar esto. cada. soltero. mes. No es amargo.

38. La opción "Eliminar mi cuenta"

Bien, lo se. Nadie hará esto. Pero bueno, ¡quizás algún día vuelvan a abrir una cuenta nueva! Al igual que las personas que pasan un quiosco en el centro comercial y dicen "¡Regresaré más tarde y compraré tres!"

Hay razones legítimas para esto que son positivas. He eliminado cuentas cuando me fusioné en una licencia de equipo más grande. Eliminé cuentas antiguas que acumulaban polvo y quería comenzar de nuevo. En cualquier caso, también es un buen servicio al cliente hacer de esta una buena experiencia.

39. La herramienta para recortar fotos de perfil

Bueno, este es un escenario de pesadilla de incendio de basurero para la mayoría de las aplicaciones y no es necesario que lo sea. Christian me envió una captura de pantalla de cuando estaba cambiando su foto de perfil a Beyoncé.

40. La opción / flujo "Actualizar mi cuenta"

Me sorprende lo difícil que es para muchos productos SaaS. Cállate y toma mi dinero. ¿No debería ser esto fácil? Como ... ¡¿EL MÁS FÁCIL ?!

Flujos locos

Eventualmente, habrás terminado todas las cosas anteriores y pensarás que estás en casa libre, entonces, literalmente, comenzarás a ir a casa por el día orgulloso de lo bien que estás.

Luego, a mitad de camino en su fixie, bebiendo kombucha de su camelbak, ¡recuerda que el desarrollo aún no ha comenzado! PS

Una vez que comience el desarrollo, comenzará a darse cuenta de que simplemente burlarse de una pantalla no cuenta realmente la historia (es genial, todos tratamos de ser flojos). Los desarrolladores necesitan que desgloses cómo fluye una experiencia de usuario de pantalla a pantalla.

41. El flujo "Cambiar mi dirección"

¿Sabes cuándo obtienes un elegante apartamento nuevo en el centro y tienes que cambiar tu dirección en CADA TARJETA DE CRÉDITO QUE HAS TENIDO?

42. El flujo "Agregar una tarjeta de crédito"

A algunas personas (ejem, a mí) les gusta mantener como un centenar de tarjetas de crédito / débito en el archivo para que los ladrones tengan muchas cuentas para elegir. Así que facilite agregar tarjetas. Eso es realmente todo lo que tengo que decir al respecto.

43. El flujo "Bulk Add"

Una cosa es hacer que agregar un objeto al sistema sea rápido, pero es algo completamente diferente agregar un MANOJO DE OBJETOS al sistema rápidamente.

44. El flujo "Crear un filtro personalizado"

Si permite un filtrado sofisticado, sería bueno agregar la capacidad de guardar este filtro complicado para más adelante. De esa manera no tendrá que hacer clic un millón de veces de nuevo.

45. El flujo "Agregar al carrito de compras"

Es divertido pensar que la gente se olvida de este flujo, pero ya sabes ... soy una de esas personas. Cállate.

46. ​​El flujo "Compartir esto"

Compartir se ha vuelto bastante ubicuo en línea, pero eso no significa que ya esté diseñado para ti. Razón de más para pasar un tiempo en este.

47. El flujo "Crear a partir de existente"

Esto es algo así como "Duplicar + Editar" todo en una sola acción. Básicamente, el usuario puede comenzar desde un objeto existente y actualizarlo según sea necesario.

48. El flujo "Invitar a alguien"

No hay mejor manera de agregar algo de "viralidad" a su producto que a través de invitaciones y compartir. Mirándote Dribbble. ¡Asegúrate de que sea fácil, rápido y divertido!

49. El flujo "Cambiar permisos de usuario"

¿Conoces a ese tipo Greg? ¿Sabes cómo arruina todo lo que toca? Sí, es posible que desee revocar algunos de los privilegios de Greg para que no elimine la totalidad de Internet. El tonto Greg.

50. El flujo "Eliminar y recuperar"

¿Sabes cuándo eliminas algo SUPER importante y necesitas recuperarlo de inmediato? ¿No? Bien.

BONO # 51. Animaciones

Revelación completa, de hecho me olvidé de estos. Mire, me encantan las animaciones, pero tengo suerte si tenemos el lujo de construirlas cuando las ventas quieren un prototipo hecho ayer, y el desarrollo está señalando algo que me perdí por completo en mi octava iteración de la página de destino. Y honestamente, si llegamos a las animaciones, solo leo Dribbble o CodePen y envío algo que me gusta dev y digo: "¡Hazlo así!" Soy yo?

No soy.

Resumen

Probablemente estés escribiendo furiosamente una lista de todo lo que olvidé para este artículo. Siéntase libre de recordarme amablemente en los comentarios. Los diseñadores tienen cerca de un millón de cosas para recordar cuando diseñan productos MVP, o grandes características para una plataforma de software empresarial. Con suerte, esto puede ser al menos una referencia útil para ayudarlo a recordar su próximo proyecto.

Cuando no estoy tratando de recordar cada pequeña cosa (lo que ella hace es magia), estoy trabajando en las herramientas de diseño de Sketch en UX Power Tools para hacerte un diseñador mejor y más eficiente. Puedes aprender más aqui:

Sigue a UX Power Tools en Twitter
Sigueme en Twitter