Perdón por tus ojos sangrantes, pero estos son importantes.

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.

Aquí hay uno hermoso de James Jackson

2. El flujo de contraseña olvidada

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

Majo Puterka no deja a sus usuarios encerrados fuera de la casa bajo la lluvia.

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.

¿Que sigue? Pregúntale a Hayley Cattlin.

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.

realmente me gusta esto. Por Brian Golatka.

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.

Realmente aprecio cómo Marko Prljic intentó hacer que los Términos y Condiciones fueran más accesibles.

Primera experiencia

6. La incorporación del usuario

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

Deliciosamente útil, por MuNa.

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í".

Tengo la sensación de que a Veli-Johan Veromann le gustan los superhéroes.

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.

Maya Gao es muy útil. Sé más como Maya.

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.

Hermes Strange hace cosas lindas. Estos son lindos AF.

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.

Supongo que Kristofer probablemente robó el dinero del almuerzo de Henrik. Deje que cierre sesión y huya de la escena.

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.

Ash Schweitzer podría estar perdido en algún lugar del bosque. Alguien que la ayude.

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!

Michael Flarup creó una increíble plantilla de favicon que puedes descargar.

13. La página 404

Rizvan está atrapado en ese agujero. Ve a ayudarla.

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.

Ahhh, los días de escribir especificaciones de 80 páginas y desarrollo de cascada.

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?

Oh hombre, Peter Blazej, esto se siente suave. ¡Agradable!

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.

Esto es más fácil que hacer un tazón de cereal.

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!

Borunda hizo un buen trabajo. Me encanta ese amarillo, Borunda!

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.

Jeff Broderick AMA hacer clic en cosas. También hizo un obsequio.

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" ...

Eugen Esanu tiene un ojo excepcional para los mecanismos de filtrado y los combos púrpura / amarillo. Agradable.

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.

Reiner Wendland cubrió casi todo para Zendesk.

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.

Mike Stezycki realmente me hizo pensar que ese correo electrónico fue enviado. Entonces él fue todo:

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.

Esto es de Google Inbox. El

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.

Al parecer, Jurriaan van Drunen ya no tenía

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.

No es la mejor forma de voltear pan, XPLAI. Sigue practicando. Pero esto sigue siendo dolorosamente adorable.

Lanzamiento de materiales

26. El icono de la aplicación Friggin

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

Estoy dispuesto a apostar que Eddie Lobanovskiy cambió todos sus íconos a alimentos para el desayuno. Delicioso.

27. Las imágenes de la tienda de aplicaciones

Daniel Beere no olvidó las imágenes de la tienda de aplicaciones para su aplicación. Choca esos cinco, amigo.

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.

Kristy T está oficialmente sin automóvil. SF te hará eso.

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:

Y si eres diseñador en Redkix, deberás asegurarte de que la imagen funcione en carmesí.

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.

Ah, y las ventas probablemente cubrirán todas tus maquetas con otras cosas, así que prepárate para eso.

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.

Aquí hay un secreto comercial, siempre coloque paneles en su plataforma de lanzamiento.  Esto no es una broma.

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

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

Todavía extraño Medium 2.0 pero cada  I  get  ayuda a  me seguir .

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.

Me llevó un poco de tiempo encontrar un anuncio que NO FUE para un colchón Casper. Todos ustedes están matando el juego, Casper.

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

Puntos triples si lo haces una ilustración. Corriente.

^ 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.

¡Slack no se convirtió en una compañía de $ 8 mil millones al aflojar la configuración de notificaciones! Dado en el clavo.

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.

No sé qué significa todo esto, ¡pero fue fácil llegar hasta aquí!

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.

Pssst, señor presidente, puede desactivar su cuenta aquí.

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é.

Ni siquiera pudo pasar esta pantalla para mostrar cómo recortaba una foto. 2 de 10 estrellas. No le pondría un anillo.

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 ?!

Buffer tiene un elemento de menú para actualizar y luego una forma bastante simple. Bam Tienes mi dinero. Así se hace, Buffer.

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?

Dhaval S. Gandhi quiere asegurarse de que su Aloe Vera se envíe al lugar correcto.

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.

Esto parece demasiado real, Carlos Medina. Sin relación, acabo de comprar unos zapatos nuevos y ¡no me costó ni un centavo!

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.

Por favor señor, ¿puedo tener un poco más?

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.

Oykun Yilmaz podría llevar esto un paso más allá al permitir que el usuario guarde este filtro. ¡Hazlo, Oykun!

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.

Aparentemente, Alberto Conti necesitaba 4 sillas y 4 mesas auxiliares. Debe ser una casa grande ...

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.

Tomek Kwiatkowski realmente sabe cómo socializar.

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.

Kyle Johnston está escribiendo MUCHOS guiones. ¿Quizás en secreto Christopher Nolan?

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!

Creo que Paula Pintaric y Christine van a tomar un vuelo. O están trabajando en un proyecto y viendo volar a otras personas. Eso es peor.

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.

Matt Shwery, por otro lado ... mucho menos tonto que Greg.

50. El flujo "Eliminar y recuperar"

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

Eric Tsai entiende que todos cometemos errores.

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