En algún lugar dentro de la aplicación Yandex.Money, el botón "Sugerir una idea" está oculto. Las personas hacen clic en él y escriben sobre su dolor, ofrecen ayuda o piden dinero para nuevas oportunidades increíbles que ya se les ocurrieron, solo queda pagarles cien mil.
A menudo, los chicos con este botón pidieron cambiar el diseño, en su totalidad o en parte, para mejorarlo. Leemos estas cartas (estoy en la mañana a tomar un café) y vemos que se pregunta un tema oscuro con más frecuencia que un desbloqueo personalizado, pero con menos frecuencia que una foto de su gato favorito en la pantalla principal.
Y una vez que decidimos involucrarnos en el rediseño, debido a la navegación desactualizada, las dificultades con la escala y por el bien de aquellos que nos enviaron comentarios, por supuesto.
Una publicación sobre esto, y también sobre cómo hicimos nuestro CSS en Swift.
- ¿Por qué necesitas un nuevo diseño? ¿Era normal?
Las personas usan Yandex.Money de diferentes maneras: compran juegos en Steam, eligen descuentos o pagan una vez al mes con un código QR para servicios de vivienda. Y antes de que todos estos botones tuvieran que buscarse durante mucho tiempo.
La navegación se ha convertido en la razón principal para el rediseño: resultó que es difícil integrar nuevos elementos. Hace unos años, el equipo diseñó la aplicación y no pensó en una docena de productos disponibles desde el interior, así como en muchas vitrinas, promociones y varios otros artilugios. La tarea principal era predecir los posibles puntos de crecimiento del producto y hacerlo bien en esos lugares.
Bueno, de alguna manera podrían agregarse nuevos productos en alguna parte, pero es difícil de promocionar porque no había un sistema de información del usuario que no sea notificaciones push.
Bueno, por cierto, ahora puede parecer extraño, pero el saldo y la información sobre la billetera no siempre estaban en la pantalla principal. En Android, esta sección vivía en el menú lateral, y en iOS, en la sección con información en la segunda pestaña. Los usuarios abrieron la aplicación, no entendían cuánto dinero tenían y estaban molestos.
Esto también fue demostrado por los estudios de UX, por lo que ahora puede tomar tres acciones de uso común en la pantalla principal y poner un par de tapas a sus padres por teléfono.
Grado de placer
- ¿Qué son estos estudios de UX?
Las nuevas soluciones de diseño no deben desarrollarse desde la cabeza, porque las hipótesis del producto deben probarse en usuarios reales. Es importante que estas no sean las mismas personas que trabajan en la aplicación, independientemente del rol.
Entonces, los primeros enfoques para la nueva interfaz se veían
Comenzamos con pequeñas pruebas de usabilidad para 6-8 personas, aún en la etapa de diseño de prototipos. Esto hace posible probar rápidamente nuevas soluciones sin involucrar a los desarrolladores en el proceso. Por lo tanto, las soluciones se descartan o mejoran y llegan a la versión beta; en esta etapa, mostramos la aplicación a un gran número de personas y solicitamos compartir comentarios.
Esto es importante porque un grupo pequeño a veces omite algunos escenarios o no comprende los términos internos que nos parecen obvios. Ahora que la aplicación actualizada está disponible para todos, estamos completando escenarios de prioridad para el usuario y recolectando aún más comentarios: el botón con ideas funciona, las revisiones en las historias también.
- ¿Cuál es la dificultad de rediseñar una aplicación móvil en 2018?
Los microservicios salvan el universo, los componentes se vuelven más tecnológicos, aparecen Swift y Kotlin. Pero una cosa no cambia: si la aplicación grande tiene siete años, entonces hay un código antiguo que es difícil de mantener. Además, la dificultad siempre es que necesita hacer muchos componentes en poco tiempo. E incluso al comienzo del rediseño, los recién llegados aparecieron en nuestro equipo: pueden entender durante mucho tiempo cómo funciona todo.
Por lo tanto, el rediseño también afectó los procesos en los equipos. Las bibliotecas de componentes aparecieron en Android e iOS, cada una de ellas tiene un diseñador y desarrollador responsable. Estos dos preparan los elementos y los transfieren a la biblioteca compartida, y de allí todo el resto toma algo para sus proyectos. Este enfoque no ofrece a los desarrolladores y diseñadores margen para la iniciativa: todo ya se ha inventado antes que ellos. Después de completar el proyecto de diseño para Android, el diseñador lo pasa al colega responsable de iOS. Realiza una revisión, agrega un componente a la biblioteca y se sincroniza con el desarrollador principal.
Así es como se ve la biblioteca desde lejos. Para aquellos que quieren echar un vistazo más de cerca - enlace .
La analogía más simple aquí es el constructor, en el que no puedes agregar tus propios cubos y esperar que puedas jugar normalmente con ellos.
Todavía en la aplicación hay varias pantallas del pasado. Planeamos actualizarlos gradualmente y lograr una imagen completa, y rehacer elementos que funcionen mal desde cero. Por ejemplo, los usuarios a menudo carecen de información sobre operaciones en el historial, estados de billetera o cómo funciona Favoritos.
Todo esto es mucho trabajo y, a menudo, el rediseño de algunos elementos de la biblioteca afecta en gran medida a otros componentes de la aplicación, por lo que tomamos pequeños pasos y tratamos de dedicar más tiempo a desarrollar y probar tales cosas ahora.
- Y cuéntanos más sobre la biblioteca, muy interesante
Nos estábamos preparando para un rediseño para todo el trimestre, dividiendo implacablemente la aplicación en botones, listas, bloques y sus estados. Y después de eso, hicieron una biblioteca de los componentes principales, describieron sus estados y comportamiento, dieron ejemplos de uso. En el camino, encontramos varias pantallas que se necesitaban para la misma cosa, pero que se hicieron en diferentes momentos y en diferentes estilos, y nos deshicimos de ellas.
Aplicación de demostración, ni más ni menos
Verificamos todos los componentes nuevos en una aplicación de demostración; de esta forma, puede considerar todo, tocarlo y luego meditar en él sin realizar cambios en la aplicación principal. Recopilamos los estados de todos los elementos, su configuración y los nombres exactos para que el diseñador y el desarrollador lo vean en un solo lugar y vean lo mismo. Ayuda a hablar el mismo idioma y a encontrar los errores más rápido.
- ¿Realmente has hecho tu CSS para Swift?
Los chicos con el navegador tienen BEM, CSS y todo el resto de la magia verstal. Quería algo similar, solo de forma nativa y en iPhones. Porque cada pionero sabe que en el desarrollo móvil primero dibujas un botón rojo y luego dibujas el mismo botón, pero verde, en otra pantalla.
Como resultado, desarrollamos un sistema de hojas de estilo en cascada para componentes para que todo sea flexiblemente personalizable. Ahora el botón no es un elemento sólido, sino un conjunto de bloques: el texto y su estilo, forma y tamaño, color, y en la parte superior también hay un conjunto de estados. Toda la aplicación ahora consta de elementos que se pueden personalizar para cualquier tarea.
El mismo bloque, que se emitió de diferentes maneras.
Si de repente está familiarizado con gamedev, sobre todo es como prefabricados en Unity: si es necesario, cambie el diseño de un botón, y el resto cambiará a sí mismos durante todo el proyecto.
- Y, sin embargo, ¿por qué no puedes poner una foto de la galería del teléfono? Este es un par de líneas de código.
En resumen, es porque es imposible predecir qué imagen elegirá el usuario. En un universo de diseño perfecto, los botones, iconos y textos deben teñirse automáticamente, según el color de la foto. El usuario puede cargar solo un fondo blanco, y luego será así:
El ajuste de color correcto durante mucho tiempo y aún más tiempo para probar, y realmente no queríamos arriesgar la aparición de la aplicación inmediatamente después del lanzamiento. Es mejor usar un pequeño conjunto de imágenes después del inicio (por cierto, nuestros diseñadores tomaron parte de esa belleza), recopilar comentarios y complementar la función con la automatización. Tal plan.
Los elementos personalizables ayudarán a todo esto: es bastante fácil colorear elementos en colores adecuados, lo principal es determinar los pares de colores necesarios en función de una imagen personalizada. Y se pueden incrustar diferentes bloques de aplicación en nuestros socios y pintarlos fácilmente en colores corporativos.
Breve conclusión
Creemos que todas las decisiones tomadas son el primer paso que nos ayudará a escalar y cambiar rápidamente el producto, de acuerdo con lo que los usuarios y las empresas necesitan.
Los usuarios no notarán muchos cambios, pero en esta etapa del rediseño preparamos las herramientas, los componentes y el equipo para cambiar rápidamente la funcionalidad y el estilo visual, si es necesario. Estamos listos para resolver rápidamente los problemas de los usuarios, lanzar nuevos productos y hacer aún más bien.