Un kit de herramientas para implementar sitios web y aplicaciones

Paso uno: Decide una ruta de producto

Las dos rutas de producto principales que una empresa puede seguir son crear un sitio web o una aplicación móvil. Si una empresa necesita satisfacer varios o diferentes casos prácticos, puede ser necesario crear tanto un sitio web como una aplicación móvil como propuestas diferentes (los productos no son excluyentes). A continuación, se indican los puntos destacados a la hora de explorar las diferentes rutas de producto:

Piensa en el cliente en todo momento

• La decisión de la ruta de producto se debe basar en los problemas de los clientes que intentas solucionar. Para ello, necesitas interactuar con el cliente empatizando con sus problemas y contextos, que tendrá como objetivo satisfacer la ruta de producto

Reflexiona sobre la propuesta para las capacidades únicas de cada producto

• Confirma que cada producto tiene capacidades únicas y juega un papel diferente en el ciclo de vida del cliente, es decir, un sitio web para ordenadores no es lo mismo que un sitio web para móviles, que tampoco es lo mismo que una aplicación

Decide si tu objetivo es la cobertura o las funciones

• Si tu objetivo es la cobertura, un sitio web aprovechará la amplia cobertura que ofrece Internet y te permitirá conseguir la mayoría de ventas casuales procedentes de la búsqueda y de las redes sociales
  • Para ampliar más tu sitio web, puedes añadir componentes web básicos de Polymer de Google que mejoran la conversión y aumentan la interacción
• Si tu objetivo son las funciones, una aplicación nativa aprovechará los últimos sensores y servicios y te permitirá conseguir la mayoría de ventas repetidas y una amplia interacción
  • Puedes volver a interactuar con los clientes de forma proactiva en los smartphones (y no utilizar tu propia aplicación) con contenido de notificaciones o widgets puntuales y relevantes

Si tu objetivo es una combinación de cobertura y funciones, puedes elegir la ruta de aplicación web

• Puedes añadir diferentes componentes web a tu sitio web para que tenga una apariencia más similar a una aplicación (o crear una aplicación web personalizada) como, por ejemplo, el funcionamiento sin conexión, las notificaciones push o la posibilidad de añadir el sitio web a la pantalla de inicio.

Paso dos: Decide una ruta de diseño

La proliferación de dispositivos y la creciente fragmentación de pantalla hacen que el diseño digital sea más complejo que nunca. Además de las nuevas plataformas, como las smart TV y los smartwatches, existe una necesidad de compatibilidad con nuevos tipos de entrada y contextos. Los usuarios ven y tocan plataformas a diferentes distancias y en diferentes posturas, mientras que las dimensiones y las orientaciones de pantalla ofrecen combinaciones casi ilimitadas. A continuación, se indican los puntos destacados a la hora de explorar las diferentes rutas de diseño:

La complejidad y la fragmentación del dispositivo y el comportamiento del usuario es un problema de diseño

• Existe fragmentación en las plataformas (por ejemplo, ordenadores, smartphones y smartwatches), los dispositivos (por ejemplo, iOS y smartphones Android), los tamaños, las orientaciones y las resoluciones de pantalla, los métodos de introducción (por ejemplo, ratón, táctil y voz) y las posturas (por ejemplo, diferentes formas de sujetar un smartphone o de interactuar con él), etc.
• Los usuarios utilizan diferentes dispositivos y pantallas para cualquier tarea y esperan una experiencia coherente
• La complejidad es la nueva y difícil realidad a tener cuenta para que el diseño se adapte al comportamiento del consumidor

Un diseño adaptativo o adaptable es la ruta de diseño de sitio web más flexible y sostenible

• Un diseño adaptable es un enfoque flexible y sostenible que utiliza tablas de flujo para dar un nuevo formato a elementos, como imágenes, contenido multimedia y no multimedia, y posicionarlos según el dispositivo del usuario. Los sitios web adaptables detectan cada dispositivo y se adaptan a ellos y son un sistema de experiencia de usuario con relativa garantía de futuro
  • Una ruta intermedia para aquellas empresas que no quieran adoptar un diseño que se adapte a todos los dispositivos a la vez es diseñar de forma adaptable un sitio web específico para móviles y adaptarlo a tablets y ordenadores una vez que la experiencia y el porcentaje de conversiones se estabilicen
• Un diseño adaptativo ofrece una mayor capacidad de adaptación para proporcionar la experiencia de usuario definitiva en cada dispositivo. Utiliza tablas de flujo y puntos de interrupción para adaptarse a cada dispositivo, pantalla y resolución, lo que permite ofrecer contenido diferente cuando un dispositivo necesite ser compatible con un caso práctico diferente

Material design es una ruta de IU que unifica experiencias en todos los dispositivos, Internet y todas las aplicaciones nativas

• La fragmentación de smartphones también afecta al diseño de aplicaciones nativas y varias plataformas nativas contribuyen a que la complejidad sea mayor. La solución son los principios de diseño adaptable y adaptativo
• El lenguaje visual de material design permite que cada dispositivo refleje una visión diferente del mismo sistema subyacente para unificar de forma coherente la interfaz de usuario en todos los dispositivos, sitios web y aplicaciones nativas

Utiliza un enfoque de diseño en el que el móvil sea el protagonista

• Aprovecha las limitaciones inherentes a los smartphones, como el espacio de la pantalla, para priorizar y mostrar el contenido principal y no incluir el contenido secundario (o quitarlo)
• Primero diseña y programa para los dispositivos más pequeños para convertir a los smartphones en la experiencia de referencia antes de adaptar el diseño a plataformas más grandes (es más fácil añadir que quitar)

Paso tres: Decide una ruta de desarrollo

El desarrollo se reduce a dos rutas fundamentales: la tecnología web (programación con HTML; CSS y JavaScript) y el código nativo (programación con Java, Objective C, etc.). Los sitios web y las aplicaciones web que son accesibles desde navegadores utilizan tecnologías web, mientras que las aplicaciones móviles que se pueden instalar desde tiendas de aplicaciones pueden utilizar tanto código nativo (para aplicaciones nativas) como tecnologías web (para aplicaciones híbridas). A continuación, se indican los puntos destacados a la hora de explorar las diferentes rutas de desarrollo:

Optimiza el rendimiento técnico del sitio web con las últimas herramientas de desarrollo

• El desarrollo web es un actividad consolidada, por lo que ya existe una amplia población de desarrolladores que contribuyen a que esta ruta de desarrollo sea relativamente sencilla
• Mientras la mayoría de las empresas se centran en la optimización de la IU y la experiencia de usuario, es fundamental centrarse en el rendimiento técnico para mejorar más si cabe la experiencia de usuario y aumentar las conversiones (y solucionar los retos de rendimiento heredados). Las herramientas de rendimiento web de Google te ayudan a optimizar el inicio y el rendimiento de carga, entre otros elementos.
• Para ampliar un sitio web y aumentar las conversiones, prueba a añadir componentes web y elementos básicos de Polymer de Google, como la opción para optimizar la entrada de formulario o la función de autocompletar

Adopta herramientas para desarrolladores web modernas, como Polymer de Google, para hacer que tu sitio web tenga una apariencia más similar a una aplicación o crear aplicaciones web personalizadas

• Para mejorar la riqueza y la interacción de un sitio web, los desarrolladores pueden implementar funciones parecidas a las de las aplicaciones como, por ejemplo, el funcionamiento sin conexión, las pantallas de bienvenida, la sincronización en segundo plano, las notificaciones push y la posibilidad de añadir el sitio web a la pantalla de inicio del usuario
• Polymer de Google es una herramienta para desarrollar aplicaciones web que unifica la experiencia de usuario en todos los dispositivos y todas las pantallas. Utiliza elementos modulares y reutilizables basados en estándares y componentes web de reducido tamaño y rápidos que funcionan en todos los navegadores web modernos
• El catálogo de elementos de Polymer es extenso y está en expansión. Aunque algunos elementos tienen estilos Material Design, se pueden personalizar para adaptarse a cualquier marca
• Los elementos se pueden añadir a un sitio web de forma incremental o se pueden utilizar para desarrollar una nueva aplicación web

Aprovecha la extensa población de desarrolladores y las herramientas consolidadas para desarrollar aplicaciones nativas completas

• Si tenemos en cuenta que las prioridades de los desarrolladores son el código nativo y las plataformas Android y iOS, solo necesitas desarrollar dos aplicaciones para llegar a la mayoría del mercado
• Si el objetivo de la empresa es conseguir un conjunto de funciones y un rendimiento óptimos, la solución son las aplicaciones nativas. Al utilizar código nativo para ejecutar el sistema operativo, estas aplicaciones pueden proporcionar la experiencia más adaptable y sólida, la interfaz de usuario más completa y acceso a los últimos sensores y servicios y a las últimas API

Evita la ruta de aplicaciones híbridas a menos que solo necesites desarrollar aplicaciones sencillas

• Si la empresa prioriza la velocidad y el coste por encima de la experiencia de usuario, o si solo necesitas desarrollar prototipos o aplicaciones de consumidor/empleado sencillos, la ruta de desarrollo de aplicaciones híbridas puede ser más adecuada que las aplicaciones nativas
• No obstante, las aplicaciones híbridas conllevan más compromisos y son inferiores a las nativas en el rendimiento técnico (la tecnología web se inserta en una aplicación de apariencia nativa), la experiencia de usuario (las IU de Android y iOS varían visualmente), la complejidad de las pruebas (fragmentación de WebView) y la posibilidad de bloqueo del proveedor

Resumen: selecciona las rutas con cuidado

• Una vez que elijas una ruta, es probable que te comprometas con ella durante una serie de años
• Ten en cuenta los requisitos de cobertura o las funciones a largo y corto plazo
• Ten en cuenta el esfuerzo y los costes iniciales (hasta el lanzamiento) y continuos (el negocio habitual)
• Comprueba que has combinado de forma adecuada las capacidades de diseño, desarrollo y pruebas

En las tres fases de decisión (producto, diseño y desarrollo), se identifican las rutas fundamentales, las consideraciones y las ventajas relativas, y se proporcionan recomendaciones claras.