10 errores más comunes en diseño de aplicaciones móviles

El mercado de las aplicaciones móviles está saturado de competencia. Las tendencias cambian rápidamente, pero ningún nicho de mercado puede durar mucho tiempo sin que varios competidores entren en juego. Estas condiciones dan lugar a una alta tasa de fracaso en todos los ámbitos para el mercado de las aplicaciones móviles. Sólo el 20% de las aplicaciones descargadas ven regresar a los usuarios después del primer uso, mientras que sólo el 3% de las aplicaciones permanecen en uso después del primer mes.
Si cualquier parte de una aplicación no es deseable, o el proceso de entenderla es lento, los usuarios son más propensos a instalar una nueva, en lugar de esperar hasta el final con el producto imperfecto. El consumidor no pierde nada cuando se deshace de una aplicación - excepto los esfuerzos de los diseñadores y desarrolladores. Así que, ¿por qué fallan tantas aplicaciones? ¿Es un fenómeno predecible que los diseñadores de aplicaciones y desarrolladores deben aceptar? Para los clientes, ¿es aceptable ésta tasa de éxito? ¿Qué se necesita para llevar tus diseños al 3% de las aplicaciones prósperas?
Los errores más comunes van desde no mantener la constancia a lo largo de la vida útil de una aplicación, hasta atraer a los usuarios en primer lugar. ¿Cómo pueden ser diseñadas las aplicaciones con una simplicidad intuitiva, sin llegar a ser repetitivas y aburridas? ¿Cómo puede una aplicación ofrecer todos los detalles agradables, sin perder de vista un propósito mayor? La mayoría de las aplicaciones viven y mueren en los primeros días, así que aquí están los diez errores más comunes que los diseñadores pueden evitar.
Dato: Sólo el 3% de las aplicaciones móviles se mantienen en uso después de ser descargadas. 

Error Común # 1: Una Primer Mala Impresión

A menudo, el primer uso, o el primer día con una aplicación, es el período más crítico para atraer a un potencial usuario. La primera impresión es tan crítica que podría ser un punto de partida para el resto de éste top 10. Si algo no está bien, o parece confuso o aburrido, los usuarios potenciales pierden interés rápidamente; aunque, el equilibrio apropiado para la primera impresión es difícil de lograr. En algunos casos, un largo proceso de integración (onboarding), o un proceso para descubrir características necesarias pueden aburrir a los usuarios.
Sin embargo, una aplicación que sea tentadora instantáneamente puede pasar por alto la necesidad de un tutorial adecuado, y promover la confusión. Se debe encontrar el equilibrio entre una aplicación que es inmediatamente intuitiva, y que también introduzca a los usuarios a las características más divertidas y atractivas con rapidez. Ten en cuenta que cuando los usuarios llegan a tu aplicación, la están viendo por primera vez. Es importante tener un proceso de prueba adecuado para determinar cómo los demás perciben tu aplicación desde el principio. Lo que parece obvio para el equipo de diseño, puede que no lo sea para los recién llegados.

Integración Inadecuada

La integración o incorporación es el proceso paso a paso de la introducción de un usuario a tu aplicación. Aunque puede ser una buena manera de orientar a alguien de forma rápida, la integración también puede ser un proceso prolongado que se interpone en el camino de tus usuarios y su contenido. A menudo, estos tutoriales son demasiado largos, y es probable que los lean por encima.
A veces, los usuarios han visto que tu aplicación es utilizada en público o en algún otro lugar, de tal manera que llegan a entenderla de una vez y quieren usarla a la primera. Por lo tanto, permite una especie de estrategia de salida rápida para evitar por completo el bloqueo de la aplicación a partir de su primer uso. Para asegurarte que el proceso de incorporación es de hecho efectivo, debes tener en cuenta qué valores esto puede comunicar y cómo hacerlo. El proceso de integración debe demostrar el valor de la aplicación con el fin de enganchar un usuario, en lugar de sólo una explicación.

No Sobrecargues la Animación en el Inicio

Algunos diseñadores deciden dar una buena primera impresión con animaciones de entrada, que sean fascinantes y deslumbren a los nuevos usuarios. Sin embargo, ten en cuenta que cada vez que alguien quiere ejecutar la aplicación, va a tener que ver la misma cosa una y otra vez. Si la aplicación tiene una función diaria, entonces esto va a cansar a tus usuarios de forma rápida. Diez segundos del día de alguien para deslizar un logo por la pantalla y tal vez hacerlo girar un par de veces en realidad no vale la pena después de un tiempo.

Error Común # 2: Diseñar una Aplicación sin Propósito

Evita entrar en el proceso de diseño sin intenciones concisas. Las aplicaciones son a menudo diseñadas y desarrolladas con el fin de seguir las tendencias, en lugar de resolver un problema, llenar un nicho, u ofrecer un servicio distintivo. ¿Cuál es la ambición de la aplicación? Para el diseñador y su equipo, el sentido de propósito afectará cada paso de un proyecto. Esta sensibilidad guiará cada decisión de la marca o la comercialización de una aplicación, con el formato de wireframe, y un botón estético. Si el propósito es claro, cada pieza de la aplicación comunicará y funcionará como un todo coherente. Por lo tanto, asegúrate de que el equipo de diseño y desarrollo considere continuamente sus decisiones dentro de un objetivo mayor. A medida que avanza el proyecto, la ambición inicial puede cambiar. Esto está bien, siempre y cuando la visión siga siendo coherente.
Transmitir esta visión a tus usuarios potenciales significa que van a entender qué valor traerá la aplicación a sus vidas. Por lo tanto, esta visión es algo importante que se debe transmitir en la primera impresión. La pregunta es, ¿qué tan rápido puedes convencer a los usuarios de tu visión para la aplicación? Cómo se va a mejorar la vida de una persona, o proporcionar algún tipo de goce o comodidad. Si esta ambición es difundida eficazmente, entonces, siempre y cuando tu aplicación sea en realidad útil, llegará al 3%.
A menudo, unirse a un mercado pre-existente, o una aplicación del nicho de mercado, significa que hay aplicaciones que estudiar, mientras diseñas tu propia aplicación. Por lo tanto, ten cuidado de cómo eliges ‘dar nuevo propósito’ a lo que ya está en el mercado. Estudia el mercado de las aplicaciones existentes en lugar de solo revisar. Entonces, mejora a partir de productos existentes, en lugar de imitar sin pensar.

Error Común # 3: Desaprovechar el Diseño de Mapeo en UX

Ten cuidado de no pasar por alto una planificación cuidadosa de la arquitectura UX de una aplicación antes de comenzar un trabajo de diseño. Incluso antes de llegar a una etapa de wireframing, el flujo y la estructura de una aplicación deben ser mapeados.
Los diseñadores están, a menudo, demasiado emocionados como para producir la estética y detalles. Esto da lugar a una cultura de diseñadores que generalmente no aprecian el UX ni la lógica o la navegación necesaria dentro de una aplicación. Ve más despacio. Esboza el flujo de la aplicación primero antes de preocuparte demasiado por las pinceladas más finas. A menudo, las aplicaciones fallan por una falta general de flujo y organización, en lugar de datos imperfectos. Sin embargo, una vez que el proceso de diseño comienza siempre se debe mantener el objetivo principal en mente. Los detalles y estética deberían entonces evocar claramente el concepto primordial.

Error Común # 4: No Tomar en Cuenta el Presupuesto de Desarrollo de la Aplicación

Tan pronto como se dibuja la base de la aplicación, es un buen momento para obtener un presupuesto del equipo de desarrollo. De esta manera no se llega al final del proyecto y de repente se necesita empezar a eliminar características críticas. A medida que desarrollas tu carrera de diseño, siempre toma nota de los costos regulares de construcción de tus conceptos para que tu pensamiento de diseño corresponda con restricciones económicas. Los presupuestos deben ser las restricciones de diseño útiles dentro de las cuales se puede trabajar.

Error Común # 5: Sobrecarga de Características de Diseño

Con suerte, un riguroso wireframing marcará claramente la diferencia entre las funciones necesarias y las excesivas. La plataforma ya es la “navaja suiza” definitiva, por lo que tu aplicación no tiene que serlo. No sólo el sobrecargar una aplicación con características puede conducir a una probable experiencia de desorientación para el usuario, pero una aplicación sobresaturada también será difícil de comercializar. Si el uso de la aplicación es difícil de explicar de una manera concisa, lo más probable es que esta esté tratando de hacer demasiado. Disminuir características siempre es difícil, pero necesario. A menudo, la mejor estrategia podría ser la de ganar confianza desde el principio con una o algunas funciones, y más adelante en la vida de la aplicación se pueden “probar” las nuevas. De esta manera, las características adicionales son menos propensas a interferir con los cruciales primeros días de vida de una aplicación.

Error Común # 6: Descartar el Contexto de la Aplicación

Aunque las condiciones de la mayoría de las oficinas de diseño prácticamente operan en un vacío, los diseñadores de aplicaciones deben estar al tanto de contextos más amplios. Aunque el propósito y la ambición son importantes, se vuelven irrelevantes si no se dirigen en el contexto adecuado. Recuerda que aunque tú y tu equipo de diseño conocen la aplicación muy bien, y les parezca evidente la interfaz del usuario, esto puede no ser el caso para los nuevos usuarios, o diferentes grupos demográficos.
Ten en cuenta el contexto inmediato o situación en la que se pretende utilizar la aplicación. Teniendo en cuenta la situación social, ¿cuánto tiempo puede la persona considerar utilizar la aplicación? ¿Qué otra cosa podría ser útil para ellos encontrar dada la circunstancia? Por ejemplo, la interfaz UBER sobresale ya que se utiliza con mucha rapidez. Esto significa que en su mayor parte, no hay mucho espacio para otro tipo de contenido. Esto es perfecto porque cuando un usuario está fuera con sus amigos y necesita reservar un viaje, su conversación es poco interrumpida en el proceso. UBER esconde una gran cantidad de contenido de soporte dentro de la aplicación, pero sólo aparece una vez que el escenario lo requiere.
¿Quién es el público objetivo de la aplicación? ¿Cómo podría el tipo de usuario influir cómo es el diseño de la aplicación? Tal vez, debes considerar que una aplicación específica para un usuario más joven puede ser capaz de tomar más libertades asumiendo un cierto nivel de intuición por parte del usuario. Considerando que muchas funciones pueden necesitar ser señaladas específicamente para un usuario menos conocedor de la tecnología. ¿Tu aplicación está destinada a ser visitada de forma rápida y por un corto período de tiempo? O, ¿es una aplicación con una gran cantidad de contenido que permite a los usuarios quedarse en ella un tiempo? ¿Cómo será el diseño para transmitir este tipo de uso?

Error Común # 7: La Subestimación del Cross-Platform

A menudo, las aplicaciones se desarrollan rápidamente como respuesta a los cambios del mercado o competidores que avanzan. Esto suele resultar en contenido web siendo arrastrado a la plataforma móvil. Un tema constante, lo que se podría pensar sería ampliamente entendido ahora, sucede tan a menudo que las aplicaciones y otros contenidos para móviles hacen transiciones pobres entre el escritorio, o plataformas móviles. Ya no es posible que el diseño móvil haga reducción gradual de contenido web sin consecuencias con la esperanza de conseguir rápido un negocio en el mercado móvil. La transición de web a móvil no sólo significa reducir todo, sino también ser capaz de trabajar con menos. Las funciones, navegación y el contenido deben ser transportados con mínima estrategia.
Otro problema común aparece cuando un equipo de desarrollo de aplicación aspira a lanzar un producto al mismo tiempo en todas las plataformas, y través de diferentes tiendas de aplicaciones. Esto a menudo resulta en una compatibilidad pobre, o en general, una aplicación con errores y sin pulir. La gimnasia que implica un equilibrio de múltiples plataformas puede ser demasiado para sumarse al lanzamiento de una aplicación. Sin embargo, a veces no hace daño llevarlo lentamente con un sistema operativo a la vez y corregir los problemas principales, antes de preocuparse por la compatibilidad entre plataformas.

Error Común # 8: El Diseño de la Aplicación es Demasiado Complicado

El famoso arquitecto Mies Van der Rohe dijo una vez: “Es mejor ser bueno que ser único”. Asegúrate de que tu diseño esté cumpliendo con lo acordado antes de empezar a romper la caja o agregar adornos. Cuando un diseñador se encuentra a sí mismo añadiendo detalles a fin de hacer una composición más atractiva o emocionante, estas opciones, es probable, que carezcan de mucho valor. Seguir preguntando a lo largo del proceso de diseño, ¿cuánto puedo quitar? En lugar de diseñar de forma aditiva, diseña de forma reductora. ¿Qué no se necesita? Este método está dirigido tanto hacia el contenido, el concepto y la función, como a la estética.
La complejidad excesiva es a menudo el resultado de un diseño que innecesariamente rompe convenciones. Varios símbolos e interfaces son estándar dentro de nuestro lenguaje visual y táctil. ¿Tu producto realmente podrá beneficiarse de la reelaboración de estos estándares? Iconos Estándar han demostrado ser universalmente intuitivos. Por lo tanto, a menudo son la forma más rápida de proporcionar indicaciones visuales sin llenar innecesariamente una pantalla. No dejes que tus detalles de diseño interrumpan el contenido real ni el funcionamiento de la aplicación. A menudo, a las aplicaciones no se les da suficiente espacio en blanco. La necesidad de espacio en blanco es un concepto gráfico que ha trascendido tanto lo digital como lo impreso, por lo que no debe subestimarse. Mantén un espacio entre los elementos en la pantalla, de modo que todo el trabajo que pusiste en la navegación y UX se pueda sentir.

Error Común # 9: Inconsistencias de Diseño

En cuanto a la simplicidad, si un diseño va a introducir nuevos estándares, deben ser por lo menos equilibrados en toda la aplicación. Cada nueva función o parte del contenido no necesariamente tiene que ser una oportunidad para introducir un nuevo concepto de diseño. ¿Los textos están formateados de manera uniforme? ¿Los elementos de la interfaz se comportan de manera predecible, pero agradable a lo largo de la aplicación?
La coherencia del diseño debe encontrar el equilibrio entre la existente dentro del lenguaje visual común, así como evitar estar estéticamente estancada. El equilibrio entre la consistencia intuitiva y el aburrimiento es una línea muy fina.

Error Común # 10: Desaprovechar App Beta Testings

Todos los diseñadores deben analizar el uso de sus aplicaciones con algún tipo de ciclo de retroalimentación con el fin de aprender lo que está y no está funcionando. Un error común en las pruebas es que un equipo haga sus pruebas beta con sus propios miembros. Es necesario traer ojos frescos con el fin de excavar realmente en los borradores de la aplicación.
Envía un anuncio buscando probadores beta y trabaja con un grupo selecto antes de anunciarlo al público. Esto puede ser una gran manera de limar detalles, editar características, y encontrar lo que falta. A pesar de que las pruebas beta pueden llevar mucho tiempo, puede ser una mejor alternativa que desarrollar una aplicación que fracase. Anticipa que las pruebas a menudo toman 8 semanas para algunos desarrolladores para poder hacerlo correctamente. Evita el uso de amigos o compañeros de trabajo como probadores, ya que no pueden criticar la aplicación con la honestidad que necesitas. El uso de los blogs de aplicación o páginas web para revisar tu aplicación es otra manera de probar la aplicación en un lugar público sin un lanzamiento completo. Si estás teniendo dificultades al disminuir características para tu aplicación, esta es una buena oportunidad para ver qué elementos importan o no.
El mercado de diseño de aplicaciones es un campo de batalla, por lo que el diseño de productos que son sólo adecuados simplemente no es suficiente. Encuentra una manera de conectar a los usuarios desde el principio - comunicar y demostrar los valores críticos y características tan pronto como sea posible. Para poder hacer esto, el equipo de diseño debe tener una visión coherente de lo que la aplicación desea lograr. Para establecer esta ambición, un proceso de story-boarding riguroso puede limar lo que es y no es imprescindible. Considera qué tipos de usuarios encajarían mejor con la aplicación. Y luego, refina y perfecciona hasta que absolutamente nada más puede ser eliminado del proyecto sin que éste se caiga a pedazos.
BY KENT MUNDLE - TECHNICAL EDITOR @ TOPTAL (TRANSLATED BY MARISELA ORDAZ)

Convierte los errores en oportunidades con estas Páginas de error 404 de manera muy creativa

Diseñadores necesitan asegurarse que los usuarios estén conectados, el contenido esté bien presentado, la navegación sea consistente y la interfaz esté perfecta. Sin importar que tanto estén nuestros proyectos a prueba de balas, es muy probable que los usuarios terminen encontrándose con un link roto enlace.
Este puede que no sea el fin del mundo y puede parecer bastante trivial, ¿pero qué pasaría si utilizamos este momento para darle a los usuarios mejores experiencias e incluso dedicarse a que ellos emprendan nuevas acciones?
Aunque las páginas de error 404 no son generalmente agradables y analizadas únicamente por empresas que piensan que no deberían de ocurrir, es mejor tratar la página 404 como otra oportunidad para sorprender y deleitar a tu audiencia.
Espero que esta colección te inspire para diseñar una hermosa página 404 y que te de algunas ideas de cosas que puedes hacer para reforzar tu marca cuando golpee la pared de 404.

Usa Ilustraciones

404



Esta 404 muestra caracteres perdidos en la ilustración. Funciona bien porque es divertida, y la paleta de colores y el estilo consistente te hacen sentir como que si no estuvieras perdido en lo absoluto.

Dile A Los Usuarios A Dónde Ir

404
Credit: Airbnb 



El 404 de Airbnb comunica el error de manera humorística y ofrece al usuario enlaces útiles a otras áreas del sitio, ayudándoles a encontrar su camino de vuelta.

Deja Que Los Usuarios Encuentren Su Camino

Credit: MailChimp



MailChimp mantiene su 404 simple. Tiene una funcionalidad similar a Airbnb pero ofrece un campo de búsqueda en su lugar, de modo que los usuarios pueden seguir intentando encontrar qué les hizo perderse en el primer lugar.

Mantén La Experiencia Absorbente

Credit: Red Bull TV



Si alguien se pierde en tu transmisión de deportes extremos, ¿por qué no mostrarles videos cortos?

Ríete De La Situación

Credit: Bluegg 



La creatividad y el humor están a menudo conectados, por lo que el uso de un video viral gracioso es perfecto para una empresa creativa.

Ríete De Ti Mismo


Burlarse de sí mismo es una gran manera de asegurarse que los usuarios se sientan bien acerca de haber cometido errores propios. Además, la forma en la que invita al usuario a ser voluntario le da un propósito adicional

Usa Momentum

Credit: Alex Deruette 



Este 404 utiliza un meme de tendencias para comunicar el mensaje de manera muy creativa. Es un buen ejemplo del uso de un meme con momentum pero esto significa que la idea puede llegar a ser obsoleta después de un corto tiempo y que necesite actualizaciones.

Usa La Cultura Pop

Credit: Dennis Kramer



El uso de elementos icónicos puede ser atrayente para un grupo grande de personas y hacer la experiencia divertida.

Usa Variación

Credit: Shirley Wong



Tener varias opciones es una forma de hacer la experiencia lúdica. Las distintas experiencias pueden involucrar al usuario para cazar otros mensajes ocultos o huevos de pascua en el sitio.

Se Simple Y Conciso

Credit: Braden Kowitz



Todavía puedes ser creativo, incluso si la marca es demasiado corporativa para bromas. El público puede estar muy maduro para ilustraciones o quizás el humor no se aplique al contexto pero eso no debe impedirte crear tu propia experiencia agradable.

Convierte Errores En Oportunidades Con Tus 404.

Que los usuarios terminen en un 404 nunca es ideal, pero ocurre. Así que no lo percibas como una pérdida. Cada compromiso que tienes con los usuarios es una oportunidad para impresionarlos a ellos y los 404 no son diferentes.
Los ejemplos anteriores demuestran que los 404 pueden convertirse en una oportunidad para fortalecer tu impresión de sitio de los usuarios. Dependiendo de las necesidades de tu sitio web, puedes diseñar tu 404 para expresar el sentido de humor de una marca, redirigir a los usuarios de una manera específica o entretenlos con contenido sorpresa.

BY JÔNATAS VIEIRA - FREELANCE DESIGNER @ TOPTAL(TRANSLATED BY ISABELLA ROLZ)
Fuente:

Por Qué Los Startups Necesitan Una Guía De Estilo

Incluso para un diseñador con experiencia, crear una nueva guía de estilo para un producto es difícil—hay muchas direcciones de diseño posible, y el proceso puede rápidamente convertirse en algo abrumador. La vida del startup es bastante agitada, rápida, y llena de clichés como “la perfección es la enemiga de tener algo hecho”, “muévete rápido y rompe cosas”, o “lancemos ahora, arreglemoslo después”.
Crear una guía de estilo bajo dichos eslóganes y prioridades fluctuantes es desafiante, pero es necesario si queremos que el diseño de un producto tenga éxito a largo plazo.
Sistema de diseño de UX, guía de estilo, y librería de componentes de BBC
En años recientes, hemos escuchado mucho sobre sistemas de diseño, guías de estilo, librerías de patrones, y diseño atómico. Y si bien estas herramientas son muy útiles, usarlas puede sentirse como un exceso cuando lo único que quieres es crear un par de pantallas para un MVP o demo de una app. Sin embargo, tener una guía de estilo no sólo mejorará tu proceso de diseño en general, sino que también hará de tu app algo más sólido y consistente.
Hablemos primero sobre los principales beneficios de las guías de estilo, y después enfoquémonos sobre los desafíos en un ambiente de startup. Finalmente, hablaremos sobre cómo una guía de estilo siempre evolucionan como un documento viviente.

Las 5 Principales Razones De Por Qué Una Guía De Estilo Es Una Buena Idea

1. Una Guía De Estilo Hace De los Diseños Algo Concreto Y Del Branding Algo Claro

Siendo un sólo diseñador en un startup—lo cual suele ser el caso—no hay muchas oportunidades para revisar y desafiar decisiones de diseño muchas veces tomadas por otras personas en el equipo. Aunque muchos podrían estar trabajando en colaboración, los diseños no necesariamente son compartidos con otros. Esto significa que hay sólo una persona validando diseños finales.
Una guía de estilo proveerá a un startup una guía y documentación para referencia. Desafiará algunas de las decisiones de diseño hechas por el diseñador o por el equipo porque tendrán que validarlas en el contexto global de la app. Diseñar un componente de UI porque funciona bien en una pantalla no alcanzará; un diseño bien pensado debería resolver un sólo problema de diseño en una situación, al igual que un problema generalizado que se pueda encontrar en otras pantallas de la app.
Componentes repetidos de un UI merecen estar en una guía de estilo
Una guía de estilo hace que todo el estilo del diseño en general, guías de marca, especificaciones, y reglas disponibles para todos en tu compañía, y tan sólo a un click de distancia. Pueden ir a una URL para fácilmente acceder a ella o descargarla en PDF. El diseño se convierte en el trabajo de todos—no es sólamente la responsabilidad del equipo de diseño. Es una aproximamiento más prudente que mejorará el UI de tu producto.
Guía de lenguaje de IBM en la web

2. Una Guía De Estilo Hará De Tu Diseño Algo Más Consistente

Provee una suerte de diccionario para tu lenguaje de diseño de UI. Puedes usar la misma terminología cuando quieres comunicar algo que ya has expresado. Imagina si tuvieramos diferentes palabras para expresar la misma cosa:
  1. “Está lloviendo, necesito mi paragüas.”
  2. “Está lloviendo, necesito mi paragüüüass”
  3. “Está lloviendo, necesito mi paragüaaass”
Hará del lenguaje algo poético, pero es difícil de entender. Fundamentalmente, es la misma idea con el UI de un sitio o una app. Para que sea fácil de usar, deberías inventar sólo una nueva “palabra” cuando realmente estés creando algo nuevo. De esta forma, estarás atado a una estricta regla que dice, “Sólo componentes que resuelvan un problema repetido de diseño a través del producto serán permitidos en el producto y subsecuentemente en la guía de estilo.”
La consistencia hace de tu producto algo más amigable para el usuario; un producto altamente usable se traduce en ventas y más compromiso de marketing.
Pantallas del proceso de onboarding de una app

3. Reusar El Mismo Sistema De Componentes Hace Que Tu App Sea Fácil De Usar

Como en el ejemplo del lenguaje, tener consistencia es clave. Cada vez que cada componente es entendido por el usuario, cuando se utilice de nuevo y en un contexto distinto, las personas ya estarán familiarizadas con el comportamiento anterior. En lo que respecta a interacciones de usuario, esta consistencia mejora en general la usabilidad del producto.
El UI de Eventbritte reutiliza componentes comunes.
Trabajando con un sistema de diseño basado en componentes ahorra tiempo y también hace de un producto algo fácil de actualizar. Si hay un problema de usabilidad con un componente en una cierta situación, se puede arreglar una vez que todos los otros posibles problemas con ese componente sean actualizados.

4. Una Guía De Estilo Hace De Tu App Algo Fácil De Desarrollar En El Largo Plazo

Cuando tu equipo está desarrollando un componente común para una pantalla, están desarrollando una solución que usarán también en otro lado. Esto ahorra tiempo de desarrollo—mucho, de hecho. Cuando tu compañía crece, esto significaría, quizás, ahorrar 10 veces horas de trabajo requeridas para crear una pantalla nueva.

5. Una Guía De Estilo Facilita La Eficiencia De Producción E Innovación

Crear una guiía de estilo hace que los diseños sean más accesibles y estén disponibles para el resto de la compañía. Los desarrolladores y diseñadores pueden prototipar una idea más rápido y fácilmente. Bootstrap es por lo general alagado por hacerle la vida fácil a los desarrolladores para crear un prototipo que funcione—tu guía de estilo sirve el mismo propósito. Provee una referencia base para un nuevo UI que puede ser creado por desarrolladores, sin que el equipo de diseño esté creando primero la pantalla (aunque el equipo de diseño debería hacer el QA o test de calidad de las pantallas finales).

Los Desafíos De Un Startup, Una Guía De Estilo En Cambio Constante

Crear un sistema de diseño en un ambiente de startup no es tan lineal como parece ser en una compañía madura donde están acostumbrados a un proceso más simplificado. En una compañía más tradicional, el equipo de diseño desarrolla una investigación de UX, ideación, y experimentación, y después elaboran una guía de estilo de marca final. Este proceso no es para todas las compañías, ya que los startups funcionan en un ambiente donde su visión y requerimientos de producto no siempre están en constante cambio. Trabajan con MVPs (productos mínimos viables), versiones incompletas de sus apps que son usadas para probar sus ideas y mostrarlo a usuarios potenciales.
En lo que a crear un estilo de guía se refiere, esto puede convertirse en un problema.
En un ambiente donde siempre se está evolucionando, un diseñador está usualmente en apuros para crear un estilo de guía que supuestamente será algo “fijo”. Un diseñador no tendrá el tiempo para realmente pensar a través de todos los componentes que están siendo creados, aunque pueden aparecer en el último release de la app. Facebook famosamente cambió su menú “hamburger” por una navegación en tabs cuando maduraron un poco. ¿Crees que quien haya puesto el menú hamburger ahí también lo añadió a la guía de estilo de Facebook?
También podrías considerar que no es aún el momento para crear una guía de estilo. Podrías darte cuenta que a largo plazo vas a necesitar una, pero que ahora es más importante producir pantallas en serie. Lo que es más, necesitarás unas páginas de marketing para promover tu app. De repente, tu diseño necesita redoblar la apuesta, y mientras estás creando pantallas, empiezas a ver el valor de tener una guía de estilo que pueda mantener la marca de tu compañía y diseños consistentes.
El problema es que no sabes exactamente cuando es el momento adecuado para intercambiar flexibilidad por estabilidad. Tienes que decidir cuándo deberías comenzar a enfocarte en la guía de estilo y cuándo deberías concentrarte en crear pantallas. Un aproximamiento óptimo podría ser producir una guía de estilo al mismo tiempo que estás entregando pantallas–de esta forma podrás tener lo mejor de ambos mundos.

Comienza Con Algo de Inspiración UI

Una buena forma de comenzar, especialmente si no eres un diseñador, es coleccionar ejemplos de estilos de diseños que te gustan, o algo más importante, a lo que crees que los usuarios van a responder. Colecciona cuantos ejemplos puedas, y ponlos en una carpeta o tablón de InVision/Niice, etc. Pueden ser usados como referencia e inspiración en conjunto con tu sensibilidad de diseño. Puedes construir sobre ellos luego para crear una librería de patrones.
Por ejemplo, cuando estaba trabajando en una guía de estilo para una compañía promoviendo artistas en la industria del entretenimiento, nos preguntamos si los fondos claros u oscuros tendrían un gran impacto en nuestros usuarios. Miré cientos de sitios web diferentes en juegos/películas/producciones visuales para ver cómo usaban fondos claros y oscuros.
Guía de estilo de color del sitio web del video juego Star Wars Battlefront 2
Hice una hoja de referencia donde resalté los patrones más comunes. Un patrón que identifiqué fue que las compañías en la industria tienden a usar fondos más oscuros cuando presentan sus productos, pero usan fondos blancos en sus esfuerzos de marketing, eCommerce, y tiendas.
No tienes que ir en tal profundidad, pero me di cuenta que tener referencias visuales ayuda, no sólo en crear una guía de estilo, pero también en recordar algunos de los casos de uso que podrías necesitar diseñar. Una vez que te sientes bien con respecto a las referencias que coleccionaste, puedes comenzar a trabajar en el diseño visual

Diseña Componentes Sólidos De UI

Mientras se trabaja en startups, es más difícil crear componentes que crear páginas–al menos al principio. Cuando diseñas una página, por lo general tienes una idea de cómo será usada. Eso no es necesariamente el caso cuando diseñas un componente; estás intentando diseñar para un caso de uso específico, pero quieres que sea parte de un sistema de diseño universal, y debes abordarlo de esa forma. Por ejemplo, podrías querer crear un componente para una sub-navegación con tres botones. También podrías querer trabajar con cuatro, cinco, o diez botones, y necesitarán funcionar en mobile, tablet y desktop. Deberás pensar más allá.
Quieres un cierto nivel de persistencia o poder fijo en un componente. Componentes comunes no deberían cambiar demasiado, y deberían ser reutilizables en muchos lugares a través de tu producto. Por ejemplo, si estás sólo interesado en una app de iOS, entonces querrás testear tus componentes basados en el número de opciones o longitud de contenido, no necesariamente el tamaño de pantalla. La idea es que si es viable en el UI en muchos lugares de tu app, entonces sabes que es un componente que tiene el potencial de ser parte de tu guía de estilo.
Sistema de diseño de Salesforce con componentes comunes y sus usos
Un startup necesita empezar desde prácticamente la nada misma y moverse rápidamente. Tu jefe podría querer una pantalla diseñada para el final del día, y eso significa que no podrás realmente desarrollar una guía de estilo y luego diseñar la pantalla. Lo que es aún peor, podrías estar diseñando una guía de estilo con componentes que nunca verán la luz del día porque la visión de la compañía ha cambiado. Como suelen decir, es mejor lanzar ahora.
Crear una buena guía de estilo lleva tiempo, y porque se convertirá en en la base de tu sistema de diseño, querrás hacerlo bien. En un ambiente de startup, necesitarás trabajar en tu guía de estilo con todo en mente. ## La Guía De Estilo Como Un Documento Viviente
Deberías pensar de tu guía de estilo como un trabajo en progreso. Como un startup que intenta descifrar su estrategia, vas a tener que resolver tu guía de estilo en el camino. La editarás y ajustarás a lo largo del tiempo hasta que se convierta en la base de tu UI. Un aproximamiento útil es comenzar con el primer mockup al mismo tiempo de que comienzas con tu guía de estilo. Abre dos archivos con tu software favorito (en mi caso, Sketch); uno llamado nombre de página y otro guía de estilo. Mientras trabajas en el diseño de una pantalla, puedes comenzar a poner semillas en tu guía de estilo con elementos que forman tu diseño.
Trabajando en una guía de estilo simultánea en Sketch
Un ejemplo de proyecto de startup con dos archivos abiertos. La guía de estilo en la izquierda y la pantalla mobile a la derecha.
Mientras más trabajas en más de estas guías, te darás cuenta casi de inmediato que hay algunos componentes que son importantes que se incluyan en la guía de estilo. Por ejemplo, si te has decidido por un estilo de icono, entonces todos tus íconos pueden ir en la guía desde el comienzo.
Usualmente creo una sección llamada “iconos hasta ahora”. Y si en algún punto alguien necesita un ícono, primero tienen que revisar esta sección antes de crear uno nuevo.
Librerías de iconos en guías de estilo y librerías de componentes comunes
SalesforceYelp y Mapbox todos tienen extensivas librerías de iconos para sus apps. Tu gúia de estilo debería también contener elementos de UI que se usen a través de toda tu app.
Otros items obvios para considerar son colores, selectores, títulos, encabezados, textos de cuerpo, etc. Si estás usando un estilo especial para marketing, puedes considerar ponerlo en tu guía de estilo y etiquetarlo apropiadamente. Está bien si no estás completamente seguro de un item en particular, puedes refinar los elementos de UI en tu sistema de diseño después cuando la oportunidad llegue, y actualizar la guía correctamente. No te olvides, la guía de estilo es un documento viviente, especialmente en un startup.Elementos de formularios web en la guía de estilo
Eventualmente, cuando comienzo a poner layouts en la guía, sé que estoy comenzando a alcanzar un punto donde todos los componentes deberían estar cerca de su estado final. Esta parte marca el momento crítico del proceso de creación de la guía de estilo–¡ahora puedes celebrar! Una buena forma de celebrar semejante logro es crear un logo o icono (considera ponerle un nombre) para la versión 1.0 de la guía.
Algunas personas hasta imprimen el logo/icono como un sticker para que el equipo tenga algo similar a un trofeo. Ese también es el punto donde usualmente voy hacia la forma más tradicional de trabajar con la guía la cual es abrir dicha guía primero, y luego crear un nuevo archivo para cualquier interfaz sea necesaria.

Conclusión

Como diseñador, al crear una guía de estilo tan temprano sea posible, te estarás asegurando de que tu startup se adhiera a un estándar bastante alto de calidad. Podrá ser desafiante, pero vale la pena todo el esfuerzo puesto en ella. Una guía sólida y bien hecha no sólo te ayudará a tener un buen producto, sino que también reducirá el costo desarrollo.
Hay una forma de haxer esto posible en un ambiente acelerado donde se toman decisiones rápidas y donde a veces los diseños deben cambiar rápidamente. Con suerte, el proceso descrito anteriormente ayudará a diseñadores en cualquier startup a lidiar con los desafíos de complejidad y velocidad y al mismo tiempo crear una guía de estilo fuerte para el beneficio del producto.

Fuente:
BY BENOÎT CHABERT - DESIGNER @ TOPTAL (TRANSLATED BY YESICA DANDERFER)

Seguidores