logo

fb tw ins you
 
 

Cuando alguien solicita un proyecto, debemos asumir que es muy importante y que se preocupan profundamente por el producto en el que trabajará. Por lo tanto, es seguro suponer que un cliente está obligado a construir una gran expectativa sobre el producto final y, por eso puede llegar a ser emocional cuando se trata de la entrega.

 

A lo largo del proyecto, un cliente puede sentirse muy emocionado por una función entregada y amarte, y al día siguiente puede descubrir que algo no funciona y el afecto desaparecerá. La mayoría de las veces, es solo una cuestión de comunicación con el cliente que salió mal.

 

Aunque no hay recetas para el éxito cuando se trata de desarrollo de software remoto, creo que hay algunas cosas que se deben evitar para mantener una relación productiva y saludable con clientes que pusieron su confianza en tus manos.

 

No Falles en la Comunicación Básica con los Clientes

 

Imagínese la comunicación con los clientes como lo haría con la comunicación diaria con compañeros de trabajo, amigos o cualquier otra persona a quien extienda su cortesía.

Si un viejo amigo visita su casa y tú aceptas disfrutar de un manjar local “en su hogar” al mediodía, unas semanas más tarde, ¿tan sólo te presentarías allí? ¿Podrían mantenerse en contacto mientras tanto, llamar para confirmar unos días antes? ¿O tal vez asumirías que está demasiado ocupado y no querrías molestarlo sin una buena razón? ¿Esperarías que te avise cuando lleguen?

 

No es probable que sigas chateando todos los días a menos que tenga un montón de información, pero mantendrás algún tipo de comunicación, por cortesía y practicidad: no quieres que la otra persona piense que te olvidaste de ellos, pero definitivamente no quieres conducir a mitad de camino por la ciudad sin una buena razón.

 

Ilustración de comunicación con el cliente: falta de comunicación efectiva con los clientes

 

En algún momento, probablemente hayas experimentado situaciones similares en tu comunicación profesional también, incluso con socios y compañeros de trabajo de larga data. Algunos proyectos se ejecutan con la mínima comunicación, al igual que decir “lo habitual, al mediodía, nos vemos allí” para confirmar un almuerzo ligero. Incluso si surge algo, la otra parte seguramente le informará y aceptará reprogramarlo.

 

Sin embargo, las cosas no son tan simples o lineales en el mundo del desarrollo de software.

 

Si comienzas a trabajar en un proyecto, especialmente cuando estás tratando con un nuevo cliente, si nunca escuchan de ti, comenzarán a tener dudas sobre tu trabajo y compromiso. Incluso si aparece con un producto impecable después de unas semanas, los clientes pueden tener una percepción menos que ideal de usted.

 

Aunque a veces se sienta incómodo, no hace daño hablar con el cliente, incluso si no tienes nada fuera de lo común para informar. ¿Tienes alguna duda sobre un pequeño punto de la historia de un usuario? Si crees que es importante, házselo saber. ¿Estás llegando un poco tarde y no estás seguro si podrás cumplir esa fecha estimada en la que estuviste de acuerdo? ¡Llama al cliente lo antes posible! Es mejor que lo escuchen de inmediato.

 

¿No tienes dudas y el proyecto se ajusta a la perfección, pero el cliente no habla mucho? ¿Por qué no simplemente enviar un correo electrónico describiendo tu progreso cada pocos días? No hará ningún daño porque los correos electrónicos no serán una molestia para nadie, además documentarán tu progreso y mantendrán una comunicación regular con el cliente.

 

La Comunicación Defectuosa del Cliente Fomenta las Expectativas Poco Realistas

 

Al principio mencioné que el cliente seguramente tendrá muchas expectativas sobre el proyecto ¿verdad? Las tendrás. punto.

 

El cliente ya espera mucho del producto. Si no sale como lo imaginaron, los clientes inevitablemente se sentirán frustrados. Entonces, ¿por qué alguien podría prometer más de lo que puede ofrecer, creando así expectativas aún más irreales?

 

Aquí hay un paralelo rápido: Compraste una tableta en línea y nos prometieron una entrega de 10 días. El octavo día, la tienda le informa que hay un problema y demora la entrega por una semana. Para compensar los inconvenientes, las promesas del minorista le otorgan un crédito de $ 75 en la tienda.

 

Probablemente no necesites esa tableta en los próximos días, ¡así que crees que es un buen negocio! Ahora puedes disfrutar de la tableta, además de usar el crédito de la tienda para comprar algo lindo a tus hijos. Pero la tienda llama al día siguiente, diciendo que todo se solucionó de la noche a la mañana.

 

Obtendrás la tableta al día siguiente. Sin extras, sin crédito en la tienda. ¡Ahora estás frustrado!

 

“¿Qué? ¡Solo ayer me dijiste que obtendría un mejor trato! ¡No es justo! Ya se lo dije a los niños …”

 

Rebobina un par de días y todo lo que esperabas era la tableta de todos modos. Si nadie te hubiera prometido un mejor trato, habrías estado satisfecho con tu tableta cuando llegó al día siguiente. Pero ahora, sientes que te estás perdiendo de algo más por una buena razón, aparte de la decisión de la tienda de hacerte saber.

 

Ilustración de comunicación con el cliente: las habilidades de comunicación profesional evitan las expectativas poco realistas

 

¿Cómo pueden los desarrolladores, especialmente los profesionales independientes, evitar situaciones similares en su comunicación con los clientes?

 

Al no enloquecer y decir todo lo que viene a su mente en primer lugar. Las sugerencias no están prohibidas; en realidad, son muy bienvenidos si crees que una característica solicitada en particular no es una muy buena opción para resolver el problema en cuestión. Pero la clave es: “Piensa primero”.

 

  • Escucha al cliente.

  • Analiza su problema.

  • Analiza la solución propuesta.

  • Asegúrate de que esté dentro del presupuesto/cronograma.

  • Finalmente, sigue y presenta tu sugerencia.

 

Esta es la razón por la que las habilidades de comunicación con los clientes pueden ser complicadas, ya que fallar en solo uno de los primeros cuatro pasos significa que podrías terminar perdiendo el tiempo y, lo que es peor, el tiempo de tu cliente.

 

No Asumas que Sabes lo que el Cliente Necesita

 

Parafraseando a Mary Schmich, Señoras y señores de la clase del ‘17: Escuchen al cliente. Si pudiera ofrecerle solo un consejo para el futuro, escuchar al cliente sería eso.

 

Si te llamaron para un proyecto es porque alguien necesita algo. ¿Y quién sabría mejor sobre esa necesidad que tu cliente? Puede parecer obvio, pero a veces, en el mundo real, la gente lo olvida.

 

Dejame darte un ejemplo. Un minorista solicita un “sistema de software” para su negocio. Tan pronto como lo veas, llegas a la conclusión de que lo que quieren es registrar todos los productos disponibles, registrar cada compra realizada, generar recibos para los clientes e informar sobre lo que se vendió periódicamente y sobre qué artículos se están acabando. valores.

 

Por lo tanto en su primera reunión, deseas mostrar que es eficiente y presentarles lo que ha preparado, las características propuestas, un diseño básico para ir con la identidad visual de la tienda y todo. Pero luego el desconcertado cliente dice que, en realidad, lo que necesita es un algoritmo para calcular cómo mostrar mejor los productos en los estantes, con el objetivo de aumentar los ingresos de marcas y productos específicos.

 

El error aquí fue simplemente no identificar qué problema se suponía que debías resolver. Por supuesto en este caso, ya que era muy temprano en el proyecto, habría mucho tiempo para hacerlo bien, pero a veces, este tipo de error ocurre más adelante. Incluso aunque no sea tan drástico como el ejemplo anterior, puede dañar el proyecto y/o su relación con el cliente.

 

Mi sugerencia es la siguiente: habla con sus futuros usuarios, mucho si es posible, y consulte a varias partes interesadas en el proyecto. Ellos son los que tienen una buena visión general de la situación y saben lo que necesitan. Trata de descubrir qué hacen actualmente, en cada paso del camino, y explica cómo el software sería útil. Me gusta decir que, cuando intento entender lo que desea un cliente, mi objetivo es casi poder realizar su trabajo yo mismo. Si te acercas a este punto entonces realmente has descubierto cuáles son sus necesidades.

 

No se Entiende lo que el Cliente está Pidiendo

 

No es raro recibir algún tipo de documentación sobre el problema en cuestión. Algunas veces es solo una descripción de alto nivel, mientras que otras veces es un documento detallado con casos de uso y reglas comerciales. En cualquier caso, no importa cuán claros sean los registros, lo único que no se puede hacer es simplemente asumir que todo lo escrito allí es la verdad absoluta.

 

¿¿¿Qué???

 

Exactamente. Primero, algo puede significar una cosa para alguien, en un cierto contexto, y una cosa completamente diferente para las personas que no pertenecen a esa realidad. Y si hay algo que tú y el cliente no tienen en común, ¡es el contexto!

 

Ejemplo de comunicación con el cliente: falta de comprensión de la tarea en cuestión

 

Segundo, no todos son escritores muy hábiles; intentan decir A pero terminan describiendo a B.

 

Entonces, después de leer todo lo que te han enviado, ¿cómo estarás seguro de que lo que lees es realmente lo que querían decir? Bueno, podrás digerir todo, tomar notas, analizar todo y … llamar a una reunión. (¿Lo ves? ¡Todo se trata de comunicación!) En la reunión, hablarás sobre el problema y describirás lo que has entendido con tus propias palabras. En esta etapa, probablemente podrá identificar cualquier malentendido.

 

“Oh, pero en mi caso, no recibí ningún documento. Simplemente me senté con el cliente y me explicaron todo mientras tomaba algunas notas”.

 

Bueno, todavía no hay garantía de que hayas entendido lo que significan y mi sugerencia sigue en pie: tómate un tiempo con tus notas, piensa en todo el problema, organiza todo, preferiblemente en algún tipo de línea de tiempo de eventos, y luego llama / vuelve a reunirte con el cliente para presentar lo que has entendido. Puede sonar repetitivo para ti, pero a veces incluso el cliente no tiene una visión completa de todos los procesos involucrados para realizar una tarea específica y verás cuán complejo tendrá que ser el software.

 

Al final, debes estar seguro de que no hay ambigüedad ni malentendidos.

 

Porqué no Debes Entregar Todo lo que el Cliente Pide sin Pensar

 

Bien, ahora que sabes que debes escuchar al cliente y confirmar lo que has entendido, puedes seguir adelante y hacer todo lo que te pidieron, ¿no?

 

¡Incorrecto!

 

Ahora es el momento en que finalmente puedes usar toda la experiencia que tienes y preguntarte: ¿Es lo que el cliente te pidió que resolvieras? ¿Es lo que te preguntaron realmente lo que necesitan?

 

Te sorprendería ver cuántas veces la respuesta es “no”.

 

Antes de solo entregar lo que el cliente solicitó, necesitamos analizar el problema y, si no estás de acuerdo con lo que el empleador propuso, entonces es tu trabajo y responsabilidad profesional dejar esto en claro. Por supuesto, deberías explicar por qué crees que su propuesta no es buena y cuál será tu enfoque alternativo para abordar estas deficiencias. Una vez más, la comunicación es la clave.

 

Si tú y el cliente son razonables, entonces procede con tu solución o ten una sesión de lluvia de ideas para encontrar una mejor (en caso de que tu idea no sea aceptable para el cliente por algún motivo).

 

Prototipo — No Escribas una Gran Cantidad de Documentación

 

Ya dije que tú y tu cliente generalmente no tienen la misma perspectiva, ¿verdad? Por lo tanto, así como afecta tu comprensión de su documentación, afectará su comprensión de lo que tú entregarás por escrito. Es una cuestión de contexto.

 

Por lo tanto, estoy de acuerdo en que de alguna manera (en un nivel superior o inferior), tenemos que documentar lo que estamos a punto de desarrollar. Pero entregar varias páginas de texto sin elementos visuales no te servirá de mucho. El cliente se aburrirá de leerlo, dejará de prestarle atención y probablemente no podrá entender lo que quiere decir con esas complejas reglas comerciales, o interpretarán algo completamente diferente de lo que había imaginado.

 

Ten en cuenta que estos malentendidos pueden ser aún peores si el cliente no tiene formación técnica.

 

Ilustración de comunicación con el cliente: importancia de documentar la comunicación con los clientes

 

Todos estos factores pueden dar como resultado el mismo resultado problemático: los clientes se quejarán cuando entregue el producto porque es probable que no sea lo que tenían en mente.

 

Esto es lo que sugiero: Siempre prototipo, incluso si es solo un boceto para dibujar cuál es tu plan. Y cualquiera que sea la definición que tenga que hacer, comienza desde allí. Haz referencias y trate de mantenerlo simple.

 

Deja de Perder el Tiempo Intentando Convencer al Cliente de que Tienes la Razón

 

Casi puedo estar seguro de que cada desarrollador ha pasado por la siguiente situación: al comienzo del proyecto, el cliente dice “Necesito que el color de fondo del software sea amarillo. Ya ha sido acordado por la junta”. Luego, cuando se entrega el software, dicen: “Ah, pero el color de fondo no puede ser amarillo. ¡Te dije que tenía que ser verde!”. Ahora, ¿cómo debes lidiar con esto?

 

De hecho de nada servirá, en cualquier caso, insistir en que tenías razón y estaban equivocados. En todo caso, solo les dará a ti y al cliente un momento difícil.

 

Siempre es bueno tener un buen registro de comunicación con el cliente, solo para asegurarse de estar en la misma página y dejar un rastro escrito. La mayoría de las veces, si es algo simple, puede enviar un correo electrónico al cliente diciendo: “Como acordamos en esa reunión, el fondo del sistema será amarillo”. Y si, en el futuro, el cliente cambia su tenga en cuenta que puede argumentar que lo hizo por esa reunión mencionada en el correo electrónico, pero si realmente necesita hacerse esa modificación, puedes ejecutarla, por un extra de x horas (y en ocasiones, x dólares extra).

 

Pero si no hay nada que demuestre que tú tenías razón, entonces probablemente tengas que tomar una decisión (además de aprender una lección): ¿El cambio es tan grande que requerirá un cambio en la arquitectura actual o afectará otras características? De lo contrario, probablemente sea mejor seguir adelante, hacerlo y tener al cliente a tu lado (pero con los ojos bien abiertos para que no vuelva a suceder). Si lo hace, una conversación con el cliente será la mejor solución; no uno que se centre en “cómo estaba en lo cierto”, sino en “cómo podemos solucionar el problema actual”.

 

En cualquier caso, la mejor manera de evitar tener que hacer grandes modificaciones es entregar nuevas breves características en cortos períodos de tiempo. Por lo tanto, si algo tiene que cambiarse, probablemente no será una transformación importante de lo que ya existe.

 

Aprender a Cuándo Comprometerte con los Plazos de Entrega

Por último, pero no menos importante, uno de los mayores errores que puedes cometer es darle a tu cliente una fecha límite para que termine el proyecto. ¡Y te suplicarán que cometas ese error!

 

Por supuesto, como cliente, quieres saber cuándo podrás usar todas esas características interesantes que has estado discutiendo en las últimas semanas (¿meses?). Pero dado que un proyecto no es un producto definido, pueden pasar muchas cosas desde que comienza el desarrollo hasta que el software está listo para usar.

 

En primer lugar, no se puede predecir lo impredecible. Es muy probable que tengas que lidiar con algo que no estabas esperando. Podría ser una licencia que el cliente prometió que no se compró a tiempo, o algún otro software interno que necesites usar, pero que no fue lanzado cuando debería haber sido, o el entorno fue diferente al acordado al principio, o el cliente cambió de opinión sobre unas (pocas) características y tuvo que volver a hacer algunas cosas.

 

Nada de eso es realmente culpa de un desarrollador y puede afectar profundamente el plazo del proyecto. Pero si tú, dispuesto a complacer al cliente, le prometiste que entregarías todo para una fecha determinada y terminarías no pudiendo por la razón que sea, una cosa que puedo garantizar es que el cliente estará al menos un poco frustrado. Si eres un profesional independiente, debes administrar su tiempo de manera eficiente, como lo explica el artículo del Blog de Desarrollo de Toptal. No olvides que la gestión de relaciones con el cliente también es tu trabajo.

 

Por lo tanto, hazte a tí y a quien depende del proyecto un favor, y al menos bríndales una estimación de cuánto tiempo llevará desarrollarlo todo, pero siempre deja en claro que sólo es una estimación y no una fecha límite.

 

Además, sugiero fuertemente (especialmente si ya has dado una estimación) que siempre le digas al cliente cuando algo tardará más de lo esperado para que puedan actuar para ayudarte.

 

Artículo vía Toptal

 

El gran diseño tiene la habilidad de guiarnos perfectamente a un resultado encantador. Abarca toda una experiencia cuando interactuamos con un producto o servicio. El gran diseño parece simple, pero es solo a través de una profunda comprensión de las personas y la decisión de desafiar la complejidad que se logra un gran diseño.

 

ser un diseñador de clase mundial

 

Los viajes nos ayudan a desentrañar esa complejidad al dar una nueva perspectiva a las ideas, así como a ayudarnos a experimentar problemas que afectan el mundo a escala global, o incluso esos pequeños detalles que podríamos perder mientras estamos sentados en una oficina normal. Un vuelo retrasado o cómo se rocía el chocolate en el café en esa nueva ciudad revela mucho acerca de la excelente experiencia del usuario y cómo diseñar la emoción. Los viajes ayudan a comprender ecosistemas completos y brindan una visión general completa de cómo estos toques a menudo pasados ​​por alto pueden cambiar por completo un estado de ánimo, crear una sonrisa y construir una marca. Las mejores marcas son las que tienen empatía y saben exactamente para quién existen y cómo ofrecer algo que a esas personas les importa.

 

Toma Airbnb, por ejemplo. Diseñaron un ecosistema de experiencia completo para satisfacer la alegría al comprender el recorrido del usuario desde todas las perspectivas, superando las expectativas desde el principio al agregar detalles como la fotografía profesional gratuita; y durante los primeros días, literalmente se sumergieron en la experiencia del usuario durmiendo en los pisos de sus primeros adoptantes para comprender el problema que les apasionaba resolver desde todos los ángulos. Los diseñadores deben experimentar los puntos débiles, así como el placer de la solución final para entregar realmente un trabajo de primer nivel, y eso es lo que el viaje hace por usted.

 

Experimentar el mundo y aplicar nuevas ideas

 

Ver el mundo puede hacernos diseñadores más productivos. Estar en el camino significa que no siempre podemos estar en línea. Esta desconexión periódica forzada ayuda a mantener el foco, porque simplemente no hay tiempo para las distracciones en línea cuando cada segundo cuenta. Recordando momentos en los que la productividad se intensificó, me llevo a los momentos intermedios cuando repentinamente me sentí entusiasmado por sacar mi portátil al aire, debido a la forma en que el sol golpeó el monitor frente a mí durante mi vuelo y me había recordado este optimismo futurista que se prestaba perfectamente al cambio de marca en el que estaba trabajando. Con productividad adicional, obtenemos soluciones más rápido y con menos estrés. Estamos haciendo nuestras propias mentes y los productos de nuestros clientes un favor. Además, se ha descubierto que viajar realmente puede hacernos más felices y más saludables.

 

Las soluciones de diseño mejoran a medida que comprendemos más sobre las personas, el mundo y cómo interactuamos con la tecnología. A veces son las pequeñas cosas en las ciudades que nos dan grandes ideas y nuevos enfoques para la resolución de problemas. Por lo general, cuanto más oscuro es el desafío, más emocionante es el aprendizaje y la aplicación del insight. Estar en ciudades nuevas y ver cómo las personas usan la tecnología para facilitar sus vidas nos ayuda a diseñar soluciones de diseño cultural y contextualmente relevantes. Fue solo después de vivir en Berlín por un tiempo que nuestro equipo entendió cómo los locales usaban la tecnología, así como su actitud hacia ella. En ese momento, estábamos diseñando una alarma interactiva que lo despertaba con contenido de audio en vivo y reproducía su música favorita.

 

soluciones de diseño global

 

Después de extensas investigaciones y pruebas realizadas por los usuarios, descubrimos que las personas tendían a apagar sus teléfonos inteligentes y su wifi durante la noche, lo que obviamente significaba que nuestro enfoque del desafío había cambiado significativamente. Comenzamos a construir una experiencia que ya no dependía de una conexión a Internet para funcionar. En San Francisco, es fácil olvidar que no todos tienen el último teléfono inteligente en sus bolsillos y que solo el 42.3% del mundo está en línea. Pero también en San Francisco o Seúl podemos ver un futuro perfectamente conectado, donde el contenido es contextual y relevante e incluso desbloquear un nuevo espacio de oficina apenas accesible. Es tan importante sumergirse en lo último en tendencias de diseño e interacción como experimentar sistemas completamente fuera de línea. Toma mPesa, lo cual permite a los africanos enviar y recibir dinero con solo un teléfono móvil básico. No se requiere una cuenta bancaria, conexión o transacciones en papel.

 

Es una perspectiva global que nos da una visión local.

 

Mejorando la experiencia global del usuario con su perspectiva personal

Sentarse en el metro en Melbourne es toda una experiencia. Es lo opuesto al sistema de transporte altamente eficiente y compacto en Taipei, donde todo se sentía automatizado y puntual. En Melbourne, la infraestructura en expansión de la ciudad hace que los viajes sean largos, y además el estilo de vida relajado hace que el metro sea una experiencia social. No es raro entablar una conversación con la persona sentada a tu lado.

 

En ciudades rápidas como Taipei, Londres y Nueva York, la socialización parece invasiva. Los viajeros se absorben en sus auriculares e interfaces y usan su tecnología para crear su propia barrera personal. Comprender las diferencias regionales mejora nuestro proceso de diseño ayudándonos a comprender qué tecnología utilizan las personas y nos hace conscientes de sus comportamientos existentes. Una aplicación que entrega alimentos a pedido funcionaría perfectamente en un lugar donde la conveniencia, la salud y la eficiencia son importantes, como en Palo Alto o San Francisco. Sin embargo, puede ser un fracaso total en ciudades como Taipei, donde comer es una experiencia social y comunitaria, impulsada por streetfood y la disponibilidad local.

 

experiencias sociales y comunitarias

 

Paul Graham articula la manera mágica en que las ciudades afectan nuestros cada momento:

 

“Una ciudad te habla principalmente por accidente, en cosas que ves a través de las ventanas, en las conversaciones que escuchas. No es algo que tienes que buscar, sino algo que no puedes apagar”.

 

Es la forma en que las nuevas experiencias dan forma a lo que somos como humanos y como diseñadores que viajan facilita. Los viajes ofrecen un rico intercambio cultural y contaminación cruzada de ideas para conectarnos con la diversidad. Estar en un lugar nuevo es como ser un lienzo en blanco para la experiencia, y tener una mente abierta generalmente conduce a generar las mejores ideas y ejecutar los diseños más frescos. Pensar en nuestros pies sacándonos de nuestras zonas de confort nos da nuevos conocimientos.

 

Un diseñador puede aprender mucho de la publicidad

Una vez, se encontró una perspectiva completamente nueva, aparentemente de la nada. Me desperté especialmente temprano una mañana para tomar un vuelo de Santiago a Atlanta, y me había encontrado en el aeropuerto mucho antes de que partiera el vuelo. Con tiempo para matar, terminé hablando con una mujer amable que estaba en un viaje por el mundo. Ella me contó sobre su fascinación con la publicidad que estaba en los metros en cada ciudad que visitó. Ella había dicho que aprendió más sobre las ciudades a través de la forma en que se anunciaban los productos.

“Hay mucho por descubrir sobre los roles de género, las aspiraciones y los sueños con solo mirar los anuncios en el metro. En Santiago, por ejemplo, hay anuncios de lencería de diosas latinas vestidas escasamente junto a avisos sobre dietas”.

 

Ella decía cómo estos afectan esa voz de las ciudades que pareciera gritar de forma silenciosa y nos ayudan a entender qué motiva a las personas.

 

De hecho, la publicidad puede proporcionar pistas culturales que ayuden a los diseñadores a mantenerse al día con las últimas tendencias, así como a proporcionar información sobre lo que motiva a una ciudad. Me senté en la parte posterior de un Uber y conté las vallas publicitarias que se alzaban orgullosas y altas a lo largo de la desolada autopista durante el viaje de El Valle a San Francisco. Visualmente escaso, noté una campaña publicitaria que tenía una sola línea: “pregúntale a su desarrollador”, con un pequeño logotipo rojo Twillio en la parte inferior. La implicación fue clara. Los no desarrolladores tendrían que pedirle a alguien más “conocedor” que ellos que entienda la cartelera.

 

publicidad y pistas culturales

 

Este es solo un ejemplo de lo que revela una campaña sobre lo que impulsa a San Francisco. Los desarrolladores son claramente respetados y están en una posición de influencia, y la ubicación y el contenido de la cartelera muestran que hay un claro grupo demográfico que habita la ciudad, que consiste en negocios y tecnología. Ciertamente, nunca había visto una valla publicitaria que anunciara algo nuevo o relacionado con la tecnología en Santiago, donde el contenido estaba impulsado por aspiraciones bastante diferentes. A menudo veía anuncios de Becks o Corona que representaban hombres jóvenes y atados con una botella en la mano y algunas mujeres hermosas de fondo disfrutando de una cerveza en la “Playa”. Fue la actitud despreocupada que reveló mucho sobre las aspiraciones de estilo de vida de la cultura, haciendo hincapié en la amistad, la belleza y la calidad de vida. La dirección artística del anuncio mostraba un destello de lente soleado, una tendencia actualmente evidente en la publicidad y el cine.

 

Manteniéndose al tanto de las tendencias de diseño fresco

El diseño plano ha sido otra tendencia de larga data en diseño de interfaz, superando el eskeumorfismo (popularizado por Apple), y lentamente se ha estado infiltrando en la publicidad clásica de maneras interesantes . Especialmente en ciudades como Londres, París y Nueva York, donde las estrategias de campaña integradas digitales son primordiales para el éxito de una campaña.

 

De hecho, esta campaña para McDonalds muestra tanto el diseño plano como los efectos de destello de la lente. Un simple anuncio impreso ya no lo corta, y la ideación de una campaña creativa ahora se denomina con ternura como “#hashtagthinking”, donde se deben tener en cuenta las estrategias completas en y fuera de línea. Son estas ciudades donde a menudo se establecen tendencias creativas, inspirándose en el arte, la moda y la cultura. Una vez que las tendencias creativas alcanzan la popularidad de la corriente principal, generalmente provocada por su ingreso al hogar gracias a las industrias de publicidad y cinematografía, cuentan una historia visual de lo que es importante para una cultura.

 

Mantenernos en contacto con las tendencias publicitarias nos convierte en mejores diseñadores porque:

 

  • Somos capaces de identificar tendencias en diseños y productos
  • Podemos entender mejor lo que motiva una cultura
  • Podemos aprender de la claridad de la voz en campañas efectivas
  • Somos capaces de entender estrategias claras en la comunicación

 

Estéticamente hablando, hay un montón de valor que los viajes pueden agregar a su trabajo de diseño simplemente experimentando nuevos lugares. Creo que estar en una nueva ubicación puede ayudar a terminar con el estancamiento que incluso los mejores diseñadores enfrentan ocasionalmente. Al intercambiar lo familiar con nuevas imágenes, sonidos, sabores y olores, nos volvemos más receptivos al mundo que nos rodea, encendemos y percibimos las cosas con ojos y mentes nuevos. Al usar nuevas partes de nuestros cerebros y el hecho de que estamos a la expectativa, también es más probable que abordemos los problemas de forma diferente o que lleguemos a conclusiones alternativas simplemente porque estamos más conectados con el mundo en ese momento. A veces está en los detalles de nuestro nuevo entorno: la forma en que la arquitectura en Melbourne te hace soñar con la geometría y te anima a reconsiderar la cuadrícula del último diseño del sitio web, o la forma en que el cabello negro de esa chica brilló al sol con tonos azulados recordándole agregar profundidad a su trabajo.

 

La exploración es una gran parte del diseño y nos ayuda a obtener resultados innovadores y breves. Del mismo modo, explorar el mundo significa que, al comprender los problemas mundiales, las culturas y sentirse inspirado por las nuevas ubicaciones, podemos traducir efectivamente esas nuevas ideas en diseños que deleiten a los clientes y a las personas que utilizan su solución.

 

 

Incluso después de todos estos años, parece que “UX” sigue siendo una palabra de moda en muchas compañías: “No solo necesitamos un diseñador”, declara el VP de Producto, “¡Necesitamos un Diseñador UX!”. Se escucha un grito audible en la habitación; todos en la reunión asienten mientras navegan clandestinamente “¿Qué es el diseño UX?” y “¿Qué hace un Diseñador UX ?”

 

Por ahora, la mayoría de la gente sabe que UX significa experiencia del usuario. Pero saber lo que representa no es lo mismo que comprender realmente los detalles que lo componen y hacerlo funcionar. De hecho, a la mayoría de la gente le resultaría difícil explicar qué significa el diseño para la experiencia del usuario, o lo que realmente hace el diseñador de UX.

 

UX — en resumen — es todos los aspectos de un sistema (sitio web, aplicación, producto, servicio, comunidad, etc.) según lo experimentado por los usuarios. Las empresas se esfuerzan por crear resultados positivos, consistentes, predecibles y deseables con UX, que pueden incluir interfaz, diseño industrial, interacciones físicas y más.

 

El diseño de la experiencia del usuario es la disciplina de lo que hacen los diseñadores de UX y el diseño centrado en el usuario (UCD) es el proceso de UX. Pensamiento de Diseño o Design Thinking es otro término ampliamente utilizado. Esta práctica generalmente incluye la investigación del usuario, bocetos, wireframing, diseño de interacción, diseño visual, creación de prototipos, pruebas de usuario y iteración continua en los diseños.

 

Design thinking, Tim Brown IDEO

 

Comprender el diseño de UX, lo que es y lo que no es — ayudará a todos los involucrados a crear excelentes productos con un gran UX. Con ese fin, aquí hay algunos conceptos erróneos comunes y mitos sobre el diseño de UX:

 

UX No Es UI

 

La interfaz no es la solución. El diseño de la interfaz de usuario generalmente juega un papel importante en el trabajo de un diseñador de UX, pero no es la única parte. Piénsalo de esta manera: el diseño de UX es el viaje y la UI es el destino.

 

El diseño de UX es un proceso de diseño estratégico de varios pasos que tiene como objetivo crear un producto o sitio que los clientes/usuarios se sienten atraídos, encuentren fácil de usar y comprendan rápidamente. Y a través del proceso de diseño de UX, llegamos a la solución de interfaz de usuario correcta.

 

Hay al menos diez pasos en el proceso de diseño UX de pila completa que deben tomarse antes de llegar a la interfaz de usuario final como se describe en un artículo anterior “El uso de los 10 mejores diseñadores de entrega de UX.”

 

  1. Análisis de objetivos comerciales y especificaciones técnicas

  2. Informes de análisis competitivos

  3. Elaboración de personajes e investigación de UX

  4. Mapa del sitio y arquitectura de la información

  5. Mapas de experiencia, viajes de usuarios y flujos de usuarios

  6. Bocetos y wireframes

  7. Maquetas y diseño de interacción

  8. Prototipos interactivos

  9. Prueba de usabilidad

  10. Diseño visual

 

Al final, llegando al diseño final de UI — el destino.

 

UX no es UI, la diferencia entre UX y UI

 

Illustración porShane Rounce
 

UX Design no es solo acerca de la estética

 

La estética por sí sola no brindará gran facilidad de uso; solo se refieren a cómo se ve algo. El diseño de UX se trata de cómo algo se ve, se siente y funciona.

 

Las grandes experiencias de usuario son imprescindibles para que el diseño de un producto digital tenga éxito. Sin duda, los grandes diseños y la estética en general son importantes, pero son simplemente el toque final que complementa un producto utilizable que también es un placer usar. Algunos lo llaman “la capa de pintura” que se aplica una vez que todo está construido. Luchar por la perfección estética mientras se abandona la usabilidad es, en última instancia, un juego perdedor.

 

Si UX fuera solo estética, la usabilidad del producto tendría que quedar relegada. La usabilidad es un atributo de calidad crucial que determina qué tan fácil es usar un producto. Es poco probable que un cliente se preocupe por cómo se ve un producto si no puede usarlo.

 

Si un producto es útil se define en términos de utilidad así como de usabilidad. La utilidad proporciona las características que las personas necesitan; la facilidad de uso es lo fácil y agradable que son esas funciones para usar. Los diseños que se centran únicamente en la estética e ignoran los principios básicos de la usabilidad terminan siendo inútiles por definición.

 

Cita de Jonathan Ive de Apple sobre diseño de producto

 

El Diseño de UX No Es Un Paso Más En El Proceso

 

El diseño de UX no es una casilla de verificación. Necesita integrarse en todo lo que hace una empresa.

 

“La mayoría de los clientes esperan que la experiencia de diseño a ser una actividad discreta, la solución de todos sus problemas con una única especificación funcional o un único estudio de investigación. Debe ser un esfuerzo continuo, un proceso de aprendizaje continuo acerca de los usuarios, respondiendo a sus comportamientos, y evolucionando el producto o servicio.”

 

 

En lugar de ser solo un paso en el proceso de diseño, el diseño de UX es un compromiso iterativo y continuo de pensamiento de diseño alrededor de un cliente. interacciones con los servicios y productos de una compañía. Nunca termina.

 

Por ejemplo, la Interaction Design Foundation define el diseño de UX como: “El proceso de creación de productos que brindan experiencias significativas y personalmente relevantes. Esto implica el diseño cuidadoso tanto de la usabilidad del producto y el placer que los consumidores obtendrán al usarlo. También le preocupa todo el proceso de adquisición e integración del producto, incluidos los aspectos de desarrollo de marca, diseño, usabilidad y funcionalidad “.

 

Cita de Ralph Caplan: Pensando en el diseño

 

El Diseño UX No Se Trata Sólo Del Diseño De Un Producto Digital

 

El diseño de UX no termina en los bordes de la pantalla de un usuario. Tampoco es una capa o componente de un producto o servicio; es toda la experiencia trabajando en todos los niveles contextualmente como un todo interconectado.

 

El diseño de UX considera los momentos humanos en contexto e incorpora todos los aspectos del ecosistema en el que se emplea un producto. Se trata de diseñar una experiencia holística cuando “el todo se considera más que la suma de sus partes” y mantener este sesgo a lo largo del ciclo de vida del consumidor, junto con todos los puntos de contacto donde un usuario interactúa con un producto.

 

Como dice Don Norman: “La experiencia del usuario abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos”.

 

“El diseño UX no se limita a los confines de la computadora. Ni siquiera necesita una pantalla… La experiencia del usuario es cualquier interacción con cualquier producto, cualquier artefacto, cualquier sistema”.

 

  • Bill DeRouchey, Director de diseño de interacción en Ziba Design.

 

img alt tag: Cita de Steve Jobs sobre la importancia del diseño UX

 

El Diseño UX No Se Trata Sólo De Usabilidad

 

Sin lugar a dudas, la facilidad de uso es de suma importancia para que la experiencia del usuario sea un éxito. Sin embargo, muchas cosas conforman lo que está bajo el paraguas de la experiencia del usuario, y la usabilidad es solo un aspecto del mismo. Una interfaz de usuario puede diseñarse para ser extremadamente útil, pero se queda corto cuando se trata de entregar las cosas correctas, en el momento correcto y de la manera correcta.

 

Como se mencionó anteriormente, una UI puede ser estéticamente agradable y un placer de usar, pero falla miserablemente cuando se analiza bajo el microscopio de análisis heurístico donde se verifican todas las cajas que conforman una buena usabilidad.

 

Evaluación heurística de la usabilidad del diseño de UI y UX

 

Una evaluación heurística revela mala usabilidad. Un ejemplo de un evaluador heurístico que identifica problemas de usabilidad (panel de control por Corey Haggard).
 

Un gran producto debería satisfacer a los usuarios en muchos niveles. Debería ser:

 

Útil ¿Hay alguna razón por la que debería usar esto? ¿Sirve un propósito? Satisface las necesidades?

 

Usable ¿Es intuitivo? ¿Es fácil de usar? ¿Es accesible?

 

Deseable ¿Es estéticamente agradable? ¿Está diferenciado? ¿Es memorable?

 

Sostenible ¿Se puede mantener? ¿Puede evolucionar? ¿Puede ser soportado? ¿Se puede escalar?

 

Social ¿Facilita la conversación? ¿Es compatible con compartir? ¿Alienta a la comunidad?

 

“Inutilizable” significa “me estoy moviendo”, y no importa cuán atractivo sea el diseño visual — qué tan elegante es la micro-animación — si estropeas el diseño de UX y tu experiencia de usuario morirá. Hazlo bien y estarás en camino hacia un UX mucho mejor. El producto tendrá una mayor posibilidad de éxito, lo que a su vez contribuirá al resultado final.

 

“Si bien la usabilidad es importante, su enfoque en la eficiencia y la efectividad parece difuminar los otros factores importantes en UX, que incluyen la capacidad de aprendizaje y las respuestas emocionales viscerales y conductuales a los productos y servicios que utilizamos”.

 

– David Malouf, Professor of interaction design Savannah College of Art & Design

 

Cita por Jacob Nielsen

 

El Diseño UX No Es Sólo Sobre El Usuario

 

El diseño UX también debe cumplir con los objetivos y las metas del negocio. Todo comienza con una comprensión de la visión del producto, es decir, la razón de la existencia del producto desde una perspectiva comercial. El mercado objetivo debe ser considerado, el problema debe ser abordado y una solución viable diseñada.

 

Si un diseñador UX solo se enfoca en crear experiencias óptimas para los usuarios mientras se descuidan los objetivos de negocio, fallarán. Muchos especialistas UX novatos cometen este error y proponen recomendaciones que no son realistas. Las empresas deben ser rentables para existir.

 

Usando el Framework S.M.A.R.T. al definir los objetivos de negocio para un proyecto UX es una forma de ver las necesidades del negocio. INTELIGENTE. significa: específico, medible, procesable, realista y basado en el tiempo. Los diseñadores necesitan ver su trabajo desde una perspectiva comercial, pensar estratégicamente, considerar los objetivos principales y el diseño para los usuarios y los objetivos comerciales.

 

“Simplemente no siempre podemos hacer lo mejor para los usuarios. Hay un conjunto de objetivos comerciales que deben cumplirse, y también estamos diseñando para eso.”

 

  • Russ Unger, Director de planificación de la experiencia, DraftFCB

 

Cita de Diseño UX de Susan Weinschenk

 

El Diseño UX No Es Caro

Es cierto que uno podría gastar mucho, “ir a todo o nada”, utilizando todo el espectro de métodos y herramientas que componen todo el proceso de UX. En realidad, nadie realmente hace esto. La mayoría de las empresas usan la excusa de los altos gastos (un mito) y no tienen tiempo suficiente para renunciar a la implementación de las actividades de diseño de UX más vitales, como la investigación del usuario y las pruebas de los usuarios. De hecho, especialmente cuando se trata de investigación de usuarios, las empresas no pueden permitirse nohacerlo.

 

En realidad, los mejores diseñadores de UX tienen una caja de herramientas de opciones, seleccionando y eligiendo métodos que tengan sentido para el proyecto y presupuesto en particular. Por ejemplo, sin gastar mucho, se pueden descubrir grandes oportunidades de diseño y obtener mucha información de la investigación de usuarios con tan solo cinco usuarios. Del mismo modo, armar un prototipo de producto simple y probarlo con cinco usuarios es barato, revelará la mayoría de los problemas de usabilidad y mostrará al equipo del producto lo que funciona y lo que no.

 

Otro método es análisis heurístico. Con tan solo cinco evaluadores expertos, es una forma rentable de detectar más del 80% de los problemas de usabilidad con el diseño de un producto — y no es costoso, especialmente cuando uno considera el costo de no hacer pruebas de usabilidad .

 

“El mal diseño crea fricción”.

 

El mal UX es más costoso que el bueno. Las consecuencias de un UX pobre siempre se suman a una gran fricción para el usuario. La fricción conduce a la frustración y cuando se produce una frustración extrema, las personas simplemente abandonan el producto.

 

El Retorno de la Inversión del Diseño de UX

 

El Diseño UX No es Sólo El Papel de Una Persona o Departamento

 

Centrarse en la experiencia del cliente debe ser responsabilidad de toda la empresa. Cuando las empresas no adoptan una metodología de diseño centrada en el cliente en torno a sus productos y servicios, están seguros de que ser superado por un competidor que lo haga. Relegar a los profesionales del diseño de UX para que trabajen de forma aislada y las “cosas bonitas” después de que un producto ya está construido es un gran error.

 

Integrar el diseño centrado en el usuario (UCD) en la visión, misión y cultura de una empresa es vital. Todas las compañías más exitosas lo hacen. El diseño de UX tiene una variedad de definiciones diferentes; algunos lo llaman “diseño centrado en el cliente”, como lo hace Amazon, o experiencia del cliente (CX), o “diseño del servicio”.

 

El UX es responsabilidad de toda la empresa

 

 

El Diseño UX No Es Una Sola Disciplina 

Un diseñador de UX es un practicante de pensamiento de diseño, un “jinete de todas las disciplinas UX” cuyo enfoque es la satisfacción del cliente con un producto . Muchas disciplinas diferentes conforman diseño de UX, que es un término general para un vasto universo de disciplinas, enfoques, metodologías y herramientas. Algunos de estos son: análisis de objetivos comerciales, análisis competitivo, desarrollo personal, investigación del usuario, mapeo de empatía, viajes de usuario, arquitectura de la información, estrategia de contenido, diseño de interacción, diseño de interfaz, diseño visual, prototipadoanálisis heurístico, y pruebas de usuario … por mencionar solo algunas.

 

El modelo de experiencia del usuario

 

El modelo de experiencia del usuario (por Corey Stern, cubiux.com)

 

UX Design is Not Optional

En el diseño UX del mundo de hoy no puede ser una idea de último momento. Es equivocado pensar que es un “complemento” y algo que las empresas hacen después de que se hace “cosas importantes”, como definir objetivos comerciales, estudios de mercado, documentos de requisitos del producto (PRD), ingeniería, ventas y marketing. En estos días, integrar el diseño de UX en todo lo que hace una empresa es crucial.

 

Los productos no son sobre características y funcionalidad. Los sitios web, aplicaciones o productos B2B SaaS no son solo utilidades. Las empresas no obtienen el máximo rendimiento de su inversión si el resultado es solo una respuesta emocional momentánea de los clientes, ya que los esfuerzos de diseño se basaron solo en la utilidad y la estética. Cualquier respuesta emocional positiva a largo plazo tiene que tener un fuerte componente de valor y debe estar intrincadamente diseñada en el producto para complacer y deleitar a los usuarios de manera constante. Entonces, el diseño de UX no es simplemente una opción. Es una necesidad absoluta para que las empresas tengan éxito a largo plazo.

 

Cita de Tim Cook sobre excelentes productos y cómo debería funcionar el diseño de UX

 

Resumen

El diseño UX se trata esencialmente de mejorar la satisfacción del cliente y la lealtad al brindar una experiencia positiva en todos los puntos de contacto que experimenta un cliente cuando interactúa con una marca o empresa.

 

Un estudio reciente de Forrester Research muestra que una interfaz bien diseñada podría elevar la tasa de conversión de un sitio web hasta en un 200%, y un mejor diseño de UX podría generar tasas de conversión de hasta 400%. No hay discusión con los números — las métricas hablan por sí mismas.

 

Una vez que se eliminan los mitos y se corrigen las creencias erróneas sobre el diseño UX, se hace evidente que el efecto del diseño UX es extenso (como lo son sus beneficios) y que un proceso de UX debe integrarse en todo una compañía lo hace.

 

 Articulo via Toptal

 

Cualquier ingeniero de front-end que valga la pena es consciente de los desafíos que conlleva el ecosistema fragmentado de dispositivos. Diferentes tamaños de pantalla, resoluciones y relaciones de aspecto hacen que sea difícil ofrecer una experiencia coherente. Más aún para aquellos que quieren ofrecer una experiencia perfecta en píxeles.

 

Los gráficos vectoriales escalables (SVG) ayudan a resolver una parte de ese problema y lo hacen muy bien. A pesar de que tienen sus limitaciones, los SVG pueden ser muy útiles para ciertas ocasiones y, si tienes un buen equipo de diseño, también puedes crear una experiencia más visualmente impactante sin cargar indebidamente el navegador web ni obstaculizar los tiempos de carga.

 

web browser with SVGs

 

Durante los últimos meses, he estado trabajando en un proyecto que está haciendo un uso extensivo de SVG y sus capacidades de animación y efecto. En este artículo, compartiré cómo puedes usar SVG y sus técnicas de animación para dar nueva vida a tu trabajo de front-end web.

 

Gráficos vectoriales escalables

 

SVG es un formato de imagen basado en XML, muy parecido al funcionamiento del HTML. Define diferentes elementos para varias formas geométricas familiares que se pueden combinar en el markup para producir gráficos bidimensionales.

 

La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) en 1999.

 

Todos los principales navegadores web han tenido soporte de renderizado SVG desde hace un tiempo.

 

Como los gráficos SVG son documentos XML, los navegadores web proporcionan API basadas en nodos DOM que se pueden usar para interactuar con las imágenes. ¡Hablando sobre cómo dar vida a las imágenes!

 

Caminos de SVG

 

Si hay un elemento sobrecargado en SVG, ese sería el elemento <ruta>.

 

El elemento ruta es una forma básica que se puede usar para crear casi cualquier forma 2D avanzada que puedas imaginar.

 

El elemento funciona al tomar una secuencia de comandos de dibujo. Se parece mucho al lenguaje de programación Logo de 1967, solo modernizado y diseñado para gráficos sofisticados. El elemento toma esta secuencia de comandos de dibujo a través del atributo d.

<!-- Un triángulo rectángulo -->
<path d="M10 10 L75 10 L75 75 Z" />

Puedes pensar en un bolígrafo virtual que se dibuja en la pantalla, y los comentarios de dibujo en el elemento de ruta simplemente controlan el bolígrafo. En el ejemplo anterior, se le indica al bolígrafo que se mueva a la posición (10, 10) (M10 10), para dibujar una línea a (75, 10) (L75 10), para dibujar un línea a (75, 75) L75 75 y luego cerrar la ruta volviendo al punto inicial (Z).

 

Usando otros comandos de dibujo, como arcos (A), curvas de bezier cuadráticas (Q), curvas de bezier cúbicas (C), etc., puede crear formas y gráficos mucho más complejos en SVG.

 

Puede aprender mucho más sobre el elemento de ruta aquí.

 

Caminos SVG y CSS

 

“Está bien Juan, lo entiendo. Los caminos o paths son poderosos, pero ¿cómo los animo?” Dices.

 

Para nuestra primera técnica, vamos a aprovechar dos atributos de SVG: stroke-dasharray y stroke-dashoffset.

 

dash and gaps

 

El atributo stroke-dasharray controla el patrón de rayas y lagunas utilizadas para trazar el camino. Si deseas dibujar sus líneas como un grupo de guiones y espacios en lugar de un trazo continuo de tinta, este es el atributo que usaría.

 

Como las imágenes SVG son parte del DOM del navegador web y stroke-dasharray es un elemento de presentación, el atributo también se puede configurar mediante CSS.

 

Del mismo modo, el atributo stroke-dashoffset (que especifica qué tan lejos está en el patrón del tablero para comenzar el guión) también se puede controlar usando CSS.

 

Estos dos atributos SVG, juntos, se pueden usar para animar rutas SVG, dando al espectador la ilusión de que las rutas se están dibujando gradualmente.

 

Toma esta curva bezier cuadrática, por ejemplo:

<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Para animar esta ruta como si se dibujara de forma gradual y sin problemas en la pantalla, tendremos que establecer las longitudes del guión (y la brecha), utilizando el atributo stroke-dasharray, igual a la longitud de la ruta. Esto es para que la longitud de cada trazo y espacio en la curva discontinua sea igual a la longitud de la ruta completa.

 

A continuación, estableceremos el desplazamiento del tablero, utilizando el atributo stroke-dashoffset, en 0. Esto hará que la ruta aparezca en la pantalla como una curva sólida (estamos mirando esencialmente el primer trazo, y ya hicimos que cada tramo abarque todo el longitud de la curva). Al establecer el desplazamiento del tablero igual a la longitud de la curva, terminaremos con una curva invisible (ahora estamos viendo la curva que se representa como un espacio completo, la parte que sigue inmediatamente a un guión).

 

Animar objetos a lo largo de rutas SVG

 

Con SVG y CSS, otra cosa interesante que puedes hacer es animar objetos o elementos siguiendo un camino.

 

Hay dos atributos SVG que vamos a usar para la animación:

 

  • offset-path: la propiedad CSS de ruta de desplazamiento especifica la ruta de desplazamiento donde se posiciona el elemento.

  • distancia de compensación: la propiedad de CSS de distancia de desplazamiento especifica una posición a lo largo de una ruta de desplazamiento.

 

Este elemento puede ser cualquier cosa, un div, una imagen, texto, lo que sea. La idea en este ejemplo es que con el uso de offset-path y offset-distance puede darle al elemento un camino para seguir y animar la distancia y el elemento se moverá a través de la ruta.

 

SVG Animations Uso de JavaScript

 

Si todos estos no son lo suficientemente sofisticados, siempre puede recurrir a JavaScript.

 

Animar elementos SVG con JavaScript puede ser muy similar a animar elementos DOM. Sin embargo, con JavaScript, puede lograr las técnicas de animación que hemos comprobado anteriormente, pero más fácilmente.

 

Anteriormente, tuvimos que codificar las longitudes de ruta en nuestro CSS. Con la ayuda de la función JavaScript path.getTotalLength (), es posible calcular la longitud de la ruta sobre la marcha y usarla según sea necesario. Puede obtener más información al respecto aquí.

 

Además, ya hay varias bibliotecas a su disposición que pueden hacer que las animaciones SVG sean mucho más fáciles de lo que ya son.

 

Snap.svg no solo hace que sea fácil dibujar imágenes SVG usando JavaScript, sino que las hace tan simples como llamar a .animate ({}).

 

Otra biblioteca, anime.js, le permite hacer que un elemento div siga una ruta SVG con solo unas pocas líneas de código.

 

Si estás buscando una biblioteca que hace más por sí misma pero hace que los resultados parezcan impresionantes, entonces Vivus es lo que está buscando. Se necesitas un enfoque diferente, más orientado a la configuración para la animación de ruta SVG. Con esta biblioteca, solo tiene que agregar una ID al elemento SVG que desea dibujar y definir un objeto Vivus con esa ID. Vivus se encargará del resto.

 

Otras lecturas

A continuación, encontrará una lista de recursos que puede resultarle útil al tratar con imágenes SVG y animarlas:

 

Para profundizar en la animación SVG, puede leer este breve artículo sobre las tres formas de animar SVGimágenes y ver el video screencast por CSS Tricks.

 

Una cosa que este artículo no cubrió es animando imágenes SVG con el Lenguaje de Integración Multimedia Sincronizado (SMIL). Si bien usar CSV para SVG le da la ventaja de trabajar con algo con lo que ya está familiarizado, SMIL lleva las cosas al siguiente nivel.

 

Con SMIL, puede implementar efectos de animación avanzados como el cambio de forma utilizando solo SVG. Una guía breve pero efectiva para usar SMIL para tales efectos está disponible aquí.

 

Aunque, el soporte para SMIL es un poco inquietante en este momento (sin juego de palabras).

 

Animaciones sin compromiso para la Web

 

En este artículo, ha pasado por varias formas en que puede animar elementos SVG utilizando elementos CSS o HTML en rutas SVG.

 

SVG es liviano y se puede usar para producir gráficos nítidos independientemente del tamaño de la pantalla, el nivel de zoom y la resolución de la pantalla. Con SVG, ofrecer una experiencia moderna y vívida ahora es más fácil que nunca, al mismo tiempo que cosecha los beneficios del uso de tecnologías web estándar.

 

¡Y eso es! Espero que hayas encontrado útil este tutorial de animación SVG y hayas disfrutado de su lectura.

 

Ariculo via Toptal