fuente: shutterstock

Sí, rediseño (parte 2)

Cómo abordar el rediseño en el mundo móvil

Establecer objetivo de rediseño

Las discusiones con diferentes equipos nos permiten recopilar necesidades específicas de todos los interesados, asegurándonos de que cada uno reciba la debida consideración durante el proceso de rediseño y que el producto final alcance todo su potencial. La parte clave de este proceso incluye la participación temprana de gerentes de producto, diseñadores e ingenieros. Esto reducirá significativamente las posibilidades de sorpresa cuando comencemos el siguiente paso, la ejecución. Estas discusiones ayudan a reforzar nuestro enfoque, establecer una visión clara y un objetivo para el rediseño. Desarrolla una comprensión común de cómo debe verse, sentirse y funcionar el producto final; el diálogo pinta una imagen verbal del diseño y ayuda en el desarrollo de un marco real (pautas y kit de herramientas UX / UI). ¡Y se asegura de que todos estén alineados en la aplicación de las mejores prácticas de diseño que transformarán Sing! en una plataforma simple, accesible, agradable y deseable para nuestros usuarios.

fuente: shutterstock

Plan de lanzamiento

Cambios incrementales de características

Antes de comenzar el rediseño, necesitábamos determinar una estrategia de lanzamiento que asegure el éxito del rediseño. En la discusión anterior, encontramos Sing! necesita cambiar su navegación global para mejorar la capacidad de detección de características. Eso significa cambiar de la navegación de hamburguesas estándar de la industria a la navegación inferior. Este es un cambio significativo en el nivel central del producto. Tenemos que volver al tablero de dibujo y reconsiderar: cuáles son las características principales y cuál es la jerarquía razonable, funcional y de navegación. La primera pregunta es si el cambio de navegación debe ser una versión separada del rediseño o si se debe incluir en la versión de rediseño. Sabemos por pruebas anteriores y una revisión exhaustiva de los estudios de caso existentes de la industria, ambos cambios tendrán un impacto significativo en el rendimiento del producto. Históricamente, cuando Smule ha introducido una nueva característica o diseño, el proceso ha funcionado así:

1. Crea una hipótesis
2. Diseñe y cree la característica
3. Libere la función para los usuarios.
4. Mida y analice el rendimiento de la nueva característica
5. Evaluar si la característica logró el objetivo o validó la hipótesis
6. Validar la hipótesis original.

Usando esta metodología, siempre es mejor lanzar cambios de diseño y características uno a la vez. Aísla los cambios que pueden ser un resultado involuntario del rediseño o causar una medición de datos incorrecta. Más importante aún, da tiempo para comprender completamente el impacto cualitativo de cada uno de los cambios (navegación y rediseño) desde la perspectiva de los usuarios.

Elija la plataforma y bloquee los recursos

Después de tomar la primera decisión importante de lanzar estos cambios secuencialmente en dos versiones separadas, la siguiente pregunta era si lanzar en iOS o Android primero dados los siguientes factores: (1) Todos estos cambios de diseño en sí mismos son de alto riesgo; (2) No podemos permitirnos hacer una prueba A / B para validar la hipótesis; (3) Tenemos recursos muy limitados de diseño e ingeniería. Con base en estos factores dados, acordamos que implementar estos cambios en una plataforma es la mejor opción para minimizar el riesgo. ¿Pero qué plataforma primero? En comparación con cantar! iOS, ¡canta! Android tenía menos funciones y peores números de interacción y retención que Sing iOS. Esto significa que es menos arriesgado aplicar el cambio de diseño de navegación y rediseñar a Sing! Android primero. Esta decisión ayudó a localizar y bloquear los recursos necesarios de diseño e ingeniería. Tenemos una estructura muy esbelta y un equipo pequeño. Somos afortunados de tener un diseñador visual y cuatro ingenieros que se unen a mí para trabajar en las dos fases Sing! Proyecto de rediseño de Android. Uno de los desafíos en este punto es asegurarnos de que comprendamos completamente y alcancemos el trabajo de diseño necesario. Esto se discutirá en la siguiente sección de ejecución del diseño.

fuente: shutterstock

¡Vamos a diseñar!

Alcance del esfuerzo de diseño

Cambiar la navegación y el proyecto de rediseño fueron dos grandes proyectos impulsados ​​por el diseño. Al determinar los requisitos de tiempo de diseño, es fundamental contar con el tiempo suficiente para investigar, explorar y encontrar las soluciones de diseño adecuadas mientras se ejecuta en un proceso ágil y ágil. Como líder de diseño y proyecto, esta fase fue muy útil. Me dio la oportunidad de dar un paso atrás y ver el panorama general mientras planificaba el camino por delante. Era evidente que hay dos pasos para ejecutar los cambios de rediseño:

(1) Cree e incorpore un nuevo paradigma de navegación sin cambiar el diseño visual actual.

(2) Cree un nuevo diseño que despliegue las nuevas reglas UX / UI, con nuevos colores, fuentes e íconos.

El segundo paso requiere investigación de diseño, definir nuevas reglas de diseño y determinar cómo aplicar las reglas a ambas plataformas. Se necesitan pensamientos y decisiones en profundidad para: ¿Cuál es el color principal de Sing! Cuáles son las nuevas fuentes correctas, cuáles son los nuevos iconos y cómo probamos estos conceptos de diseño. El examen de la miríada de decisiones necesarias para concluir cada paso en el nuevo diseño me ayudó a encontrar una línea de tiempo aproximada para este lanzamiento futuro.

Crear nuevo diseño de navegación

Como primer paso, comenzamos a explorar opciones para el nuevo diseño de navegación, estableciendo una base para el rediseño futuro. La complejidad del nuevo diseño de navegación es en sí misma digna de un artículo separado. Dado que el rediseño es el objetivo de este artículo, no cubriré detalles detallados sobre cómo abordamos el nuevo diseño de navegación. En cambio, me gustaría compartir algo del pensamiento estratégico que entró en este desafío de rediseño.

1. Encuentre la estructura de navegación adecuada que se adapte al propósito de su producto.

El impacto del tamaño del dispositivo, como por ejemplo: dispositivos móviles versus computadora portátil versus computadora de escritorio versus iPad, obliga a una decisión temprana crítica sobre el "formulario" que se utilizará en el proceso de diseño. Lo que complica aún más esta decisión es la variación del tamaño del dispositivo móvil. Los dispositivos móviles tienen varios tamaños de pantalla que pueden ser tan pequeños como 3.5 pulgadas o tan grandes como 13 pulgadas. Crear un paradigma de navegación simple pero escalable para que se ajuste primero a la pantalla más pequeña es la clave del éxito. Cuando exploramos los diseños de navegación con aplicaciones existentes en 2014, descubrimos que había tres tipos básicos. (1) estándar de iOS (navegación de la pantalla principal), (2) estándar de Android (navegación de hamburguesas) y (3) Personalizado, según las necesidades del desarrollador. Nos dimos cuenta de que la decisión sobre el paradigma de navegación no debería tomarse en función de la plataforma, sino que debería ser el paradigma que mejor se alinee con la naturaleza o el uso del producto. Por ejemplo, si el producto se centra en una experiencia de creación, como Instagram y Sing !, la navegación en la pantalla principal es una excelente opción; si el producto se centra en una experiencia de navegación, como correo electrónico o noticias, entonces la navegación de hamburguesas es más adecuada para esa experiencia; y, por último, si el producto tiene un propósito clave para el uso, como Uber y Snapchat, es aplicable crear un diseño de navegación personalizado para satisfacer las necesidades de ese producto singular.

2. Organice las características en torno a los temas.

¡Canta! conecta a las personas a través de la música, lo que significa que la interacción social y la creación de música son dos temas centrales para organizar las características del producto. El primer paso que tomamos en el rediseño de la navegación fue colocar todas las funciones ofrecidas en el cubo de "interacción social" o "creando música". Descubrimos que algunas características no cabían en ninguno de los grupos y algunas características podían caber en ambos. Para las funciones, como el registro, que no cabían en ninguno de los grupos, se nos ocurrió un tercer grupo marcado como "otro". Para las características que podrían caber en cualquiera de las categorías, las colocamos en ambas categorías para su consideración futura. El siguiente paso es clasificar las características de cada segmento en función de los datos, los objetivos del producto y la investigación del usuario. En última instancia, necesitábamos determinar en qué estaban interesados ​​nuestros usuarios, qué características quisiéramos que nuestros usuarios interactuaran y cómo podríamos guiarlos mejor allí. A través de este ejercicio de clasificación, tuvimos una idea bastante buena de cómo debemos organizar estas características en función de su categoría y su importancia relativa.

3. Establecer una jerarquía de información clara para la navegación

En el diseño web tradicional hay tres niveles de sistemas de navegación: navegación global, navegación local y navegación contextual. El propósito de estas tres navegaciones es proporcionar contexto y flexibilidad a los usuarios. Ayudan a los usuarios a saber dónde están y hacia dónde pueden ir. En nuestra versión de este paso, seleccionamos las 5 funciones mejor clasificadas del ejercicio anterior y las incluimos como el paradigma de navegación global. Las características restantes se convirtieron en parte del paradigma de navegación local. Finalmente, dado que las pantallas móviles no permitirán a los usuarios saltar entre pantallas tan fácilmente como una pantalla de computadora de escritorio o portátil, es importante desarrollar una regla clara sobre cómo apilar pantallas y cuándo borrar las pantallas apiladas para evitar la confusión del usuario.

Después de rondas de iteraciones de diseño, el nuevo Android Sing! el diseño de navegación se lanzó en el cuarto trimestre de 2014. De la investigación cuantitativa y cualitativa, descubrimos que el nuevo diseño de navegación mejoró drásticamente la capacidad de detección tanto de las funciones de "creación musical" como de "interacción social". Como resultado, nuestra retención de usuarios se incrementó de manera dramática y estadísticamente significativa.

fuente: shutterstock

Comienza el rediseño

Estrategia de rediseño

Al abordar el rediseño de una aplicación móvil, una pregunta central es qué guía de diseño de plataforma (iOS y Android) debe seguir y aplicar el equipo de diseño. Algunas compañías comenzaron creando el estilo de IU de iOS primero, y luego llevaron el estilo de diseño de iOS a su producto Android. Este es un enfoque muy eficiente para diseñar y construir características para una segunda plataforma. Algunas compañías tomaron diferentes lenguajes de diseño para cada una de las plataformas. El propósito de este método es cumplir con el estándar de diseño plano (iOS) y diseño de materiales (Android) en cada plataforma. Hay ventajas y desventajas de cada enfoque. El primer método ahorra mucho tiempo para el equipo de desarrollo al tiempo que ignora el hecho de que los usuarios de Android y los usuarios de iOS pueden usar e interactuar con aplicaciones de manera diferente. El segundo enfoque es más amigable para el usuario y la plataforma, pero puede generar inconsistencias en el diseño, confundiendo a los usuarios si cambian de plataforma y también ralentizando el proceso de desarrollo. Para el rediseño de Sing !, decidimos desarrollar nuestra propia guía de estilo que integra el diseño plano con el diseño del material, manteniendo las diferencias menores pero únicas para cada plataforma. En este caso, el rediseño se alineó con el personaje original de Sing!, Que atrajo con éxito a millones de usuarios. Según los datos cuantitativos y la investigación cualitativa, los usuarios de iOS y Android tienen diferencias en el uso del producto. Mantener la diferencia de plataforma en nuestra guía de estilo respeta el comportamiento de nuestros usuarios y nos permitió mantener nuestros altos niveles de retención de usuarios.

fuente: shutterstock

La importancia de la selección de colores.

Hay muchas maneras en que un diseñador puede elegir un color tanto para una marca como para un producto. A través del rediseño de Sing !, descubrimos que los siguientes tres pasos nos funcionaron bien.

Paso 1: encontrar un color primario para representar la identidad de su marca

Comenzamos el proceso de elegir un nuevo color entendiendo quién es nuestra comunidad de usuarios actual y quién es nuestro público objetivo futuro. ¡Canta! es una aplicación divertida, caprichosa y encantadora. La comunidad es acogedora, alentadora y apasionada por crear música. Atrae a personas que creen en la autoexpresión, el optimismo y disfrutan creando música individualmente y en colaboración. Como una de las aplicaciones de Smule, la personalidad de Sing! es inclusivo, genuino, optimista, refrescante y cautivador. Con estos rasgos de carácter en mente, exploramos los paneles de ánimo que creíamos que podían representar esos sentimientos y seleccionamos un color primario para representar a Sing! Este no fue el final del proceso. La elección del color es muy subjetiva. Sabiendo que esta gama de colores primarios iba a ser una presencia permanente en pantalla tras pantalla, queríamos tener un alto nivel de confianza de que nuestros usuarios lo encontrarían atractivo y que "funcionaba" correctamente en cada pantalla antes de que se finalizara. Realizamos pruebas cualitativas en nuevos usuarios y usuarios avanzados existentes para comprender cómo reaccionaron al nuevo color cuando se aplicaron al diseño existente. Estos comentarios nos ayudaron a tener una mejor idea de lo que les gusta y no les gusta y por qué. Nos dio una dirección clara para la próxima ronda de iteraciones de diseño.

Paso 2: crear una paleta de colores a partir del color primario

El segundo paso es construir una paleta de colores a partir del color primario. El objetivo es crear un conjunto de colores desde el color primario escalado de claro a oscuro. Hay un par de formas de generar esta paleta de colores. Nuestro enfoque fue crear dos conjuntos de mezclas de colores: del color primario al blanco y del color primario al negro. Para Sing !, decidimos establecer 8 pasos entre esas dos mezclas. El resultado final fue una paleta de colores que consta de 19 colores, incluido el primario. Esto nos dio una gama suficientemente amplia de colores para la gama completa de usos anticipados, es decir: color de acento, color de texto, color de icono, colores de divisor y color de fondo. El color de acento debe funcionar en armonía con el color primario y al mismo tiempo sobresalir por sí solo. Bloquear el color primario y el acento establece la base para elegir el color del texto. El color del texto desempeña un papel fundamental en todo el diseño de la interfaz de usuario. Afecta la legibilidad del contenido y cómo los usuarios pueden responder a las llamadas a acciones. Para el color del texto, sabemos que tenemos que lograr un equilibrio de trabajo en armonía con nuestro color primario y, al mismo tiempo, proporcionar suficiente contraste para que se destaque. La solución más fácil y segura es elegir blanco y negro, los dos colores más dominantes para el texto. Sin embargo sabiendo Sing! es bienvenido y divertido, y nuestros usuarios son creativos y apasionados, sentimos que usar el blanco y negro podría ser un poco aburrido. Entonces, utilizamos nuestra paleta de colores primarios para localizar el color del texto. A través de varias rondas de exploración y prueba, elegimos tres colores para rotar entre títulos, copia del cuerpo, el CTA (llamado a la acción) y el texto contextual.

Una vez que se configuraron nuestros colores de texto, comenzamos a elegir el color del divisor, el color de navegación y el color de fondo de la misma paleta de colores. Dado que los colores del texto deben destacarse en todos los contextos diferentes, para garantizar la legibilidad, sabemos que necesitamos contraste. E invertir un texto de color de texto oscuro fuera de un fondo hace que la legibilidad sea deficiente. Por lo tanto, el color del divisor, el color de navegación y el color de fondo, todos deben ser más claros que el color del texto.

Paso 3: las reglas: aplicar las opciones de color a las pantallas

Lo que quiero decir al establecer la regla de uso del color es que necesitamos establecer las aplicaciones de color primario, las aplicaciones de color de acento, las aplicaciones de color de texto y otras aplicaciones de color de elementos de diseño. Finalizar su paleta de colores no significa que el trabajo esté hecho. Deben desarrollarse reglas sobre cómo se pueden aplicar estos colores a cada elemento de la interfaz de usuario en la aplicación mientras se logra una clara jerarquía de información. Si los colores elegidos en los pasos uno y dos funcionan o no realmente depende de dos partes: cómo definimos los estándares de aplicación (las reglas) y cómo funcionan de manera integral en cada pantalla. Tuvimos una idea aproximada de los Pasos 1 y 2 de lo que estas reglas podrían abarcar. Ahora es el momento de agregar detalles y finalizar las reglas. Esto también significa comprender cómo el color puede presentar información del producto cuando está alineado con la intención del producto y crear una jerarquía de aplicación. Una vez que establecemos la norma de color, es bastante importante probarla y obtener comentarios reales y medibles de los usuarios. Las pruebas del mundo real, es decir, la aplicación de los cambios de color al diseño existente nos permitieron leer si la regla de color funciona según lo previsto o no. Los resultados también nos permiten saber si necesitábamos ajustar y ajustar las reglas y bajo qué uso. Para acelerar el proceso de prueba, no probamos las reglas de color en cada pantalla. En su lugar, elegimos las pantallas que generaban más tráfico o que tenían los patrones de UX y UI más complejos para ejecutar la prueba de color. Dos cosas necesitaban ser probadas en esta etapa. Hacer que el diseño funcione en la computadora no significa que funcione bien en dispositivos móviles, esto es especialmente cierto para los teléfonos Android. También queremos probar cómo se muestra el color del CTA y la legibilidad del texto en los dispositivos móviles. La segunda prueba que hicimos fue una prueba de daltonismo. Queríamos asegurarnos de que todos pudieran leer la escala de grises del nuevo diseño, y que nuestras elecciones de color no se vieran negativamente afectadas por el daltonismo de cualquier usuario.

Configurar una guía de estilo y reglas de aplicación

Uno de los propósitos y consecuencias del rediseño es establecer un sistema de diseño escalable que muestre cómo se aplican el color, las fuentes y los íconos según la jerarquía de información y el contexto de la característica. Este sistema se convierte en la biblia para futuros esfuerzos de diseño haciéndolos más eficientes y menos engorrosos. La definición de las reglas de la aplicación es un paso crítico en todo este proceso. Si nos preguntamos qué aspecto tiene un estándar de diseño exitoso, las reglas deberían mantenernos bajo control como si un recipiente no permitiera que el agua se derramara, si se usa correctamente. Las reglas deben ser lo suficientemente generales como para abarcar todos los diferentes casos de IU, pero también lo suficientemente restrictivas como para guiar a los diseñadores a tomar decisiones correctas. Deberían proporcionar un marco coherente y modular, pero aún así dar espacio para que brille la creatividad. Actúan como un set de lego. Puede construir casi cualquier cosa menos dentro de las pautas de interconexión y bloques interdependientes. Todavía puedes construir nuevos juguetes con tus legos y agregar reglas a tu guía. Mientras continúe utilizando bloques de plástico interconectados y su conjunto de pautas escritas, puede llevarlos a la mayoría de los lugares. Tanto las pautas de interacción humana de Apple como las pautas de diseño de materiales de Google son excelentes marcos de diseño que sirven para este propósito. En lugar de aplicar diferentes reglas a las diferentes plataformas, como discutimos en las partes anteriores, decidimos desarrollar nuestra propia guía de estilo que integre el diseño plano y el diseño de materiales.

Este enfoque nos dio mucho espacio para incluir nuestra identidad de marca en el rediseño y desarrollar los patrones de UX y UI que se adapten a ambas plataformas, respetando los distintos comportamientos de los usuarios de cada plataforma. Un ejemplo: el diseño de material iOS y Android tiene diferentes idiomas en el uso de gráficos de iconos. En Sing !, la mitad de nuestros usuarios activos diarios provienen de países internacionales. Esto significa que confiamos en los gráficos de iconos para comunicar las funciones del producto para reducir posibles errores de la interfaz de usuario de texto. Como equipo pequeño, crear y producir un ícono para una sola plataforma consumió mucho tiempo y energía del diseñador visual. Tener una iconografía uniforme nos ayudó a mantenernos enfocados en el caso discutido anteriormente mientras reducimos nuestro tiempo de diseño y desarrollo.

fuente: shutterstock

Diseñar módulos y construir pantallas

Crea nuevas pantallas

Este es el momento de la verdad. Este es el paso que los diseñadores han estado esperando, muchas cosas emocionantes y creativas surgen de este paso. Los cambios visuales, la apariencia con una jerarquía clara realmente hacen que todo el producto se vea emocionante y nuevo. Utilizamos Flinto para crear un prototipo y lo compartimos con nuestro equipo de productos y diseño, así como con nuestros usuarios avanzados, y recopilamos comentarios de todos ellos. Compartir el prototipo de Flinto permitió a todos usar e interactuar con el nuevo diseño en su dispositivo. Ayuda a los usuarios reales a ver e interactuar con el nuevo diseño, desarrollando un conjunto de preguntas y comentarios que deben abordarse antes de que comience el desarrollo.

Colaborar con ingenieros para construir el diseño.

Uno de los objetivos de rediseño era proporcionar una solución escalable para que los diseñadores e ingenieros de front-end desarrollen en colaboración características. Para lograr este objetivo, creamos módulos de IU estandarizados, especificaciones y trabajamos con ingenieros para definir los nombres de modelos y sus aplicaciones juntos. También nos asociamos con ingenieros para construir la biblioteca de idiomas UX / UI a partir del kit de herramientas UI en código. Esta iniciativa compartida no solo ahorró una gran cantidad de tiempo para los diseñadores e ingenieros, sino que también creó una base sólida para futuras colaboraciones.

QA el diseño

No importa cuán buenos sean sus ingenieros, existe la posibilidad de que no hayan ejecutado algo como lo habían planeado los diseñadores. El secreto para construir un diseño completo y holístico a partir de un archivo de boceto es interponer un QA de diseño claramente definido y acordado en el proceso de construcción final. La forma más eficiente de comunicar la intención del diseño era sentarse con ingenieros y actuar como un programador de pares. El simulador con Xcode puede ayudar al diseñador a ver pantallas individuales con datos reales en diferentes dispositivos, como iPhone 5, iPhone 6, iPhone 7 y iPad al mismo tiempo. Mientras tanto, los ingenieros también pueden ver las pantallas en diferentes idiomas a la vez. Proporcionar la configuración correcta de diferentes idiomas también reducirá aún más el riesgo de errores de IU causados ​​por la localización.

En esta etapa, el nuevo diseño está listo para ser enviado. Y todo el equipo está listo para escuchar a nuestros usuarios sobre cuánto les gusta la experiencia nueva, fresca y encantadora de nuestra reconstrucción y rediseño.

Pero espera ... Esto no significa que hayamos terminado. En la siguiente parte, compartiré algunos pasos de seguimiento, entendimientos posteriores al lanzamiento y actualizaciones adicionales de esta iniciativa de rediseño.

fuente: shutterstock