De diseñador web “con buenas intenciones” a diseñador app experto

Queremos ser el experto que realmente sabe resolver problemas a corto, medio y largo plazo, consiguiendo de esta manera clientes satisfechos que vuelven y te recomiendan, mientras tú te sientes satisfecho de tu trabajo.

Si vienes del mundo web o si empiezas tu carrera como diseñador UI, ante un posible proyecto app puedes sentir que estás en aguas pantanosas que no controlas.

Por eso hoy quiero hablar de los cimientos necesarios en el camino a convertirte en el experto que toma las decisiones apropiadas en los proyectos de diseño de app's.

Notas del episodio

Enlaces mencionados en el podcast

Aquí están los  enlaces mencionados en el episodio de hoy:

  • Most Americans download Zero Apps every month: Enlace al artículo sobre las estadísticas de descarga de apps en USA y que muestra una tendencia de los usuarios de ser cada vez más reticentes a ocupar más memoria de su dispositivo móvil con nuevas app’s. 
  • Descubre cómo subir fotos a Instagram desde tu ordenador: Con este mini tutorial te ahorrarás mucho tiempo a la hora de compartir en Instagram imágenes que tengas en tu ordenador y no en tu móvil. Es súper útil para compartir pantallazos de tu trabajo, etc. 

¿Eres de los que prefieren leer?

Transcripción del podcast por si lo tuyo es leer a tu rollo con una buena taza de te/café/mate...

A menudo aprendo mucho de mi trabajo a través de la observación de cosas cotidianas o de experiencias que tengo que no tienen nada que ver con el diseño ni la programación. ¿no te pasa a ti?

Por ejemplo, si hubiera sabido el día que el coche me dejó colgada que las buenas intenciones del conductor de grúa del seguro me meterían en una reparación de más de 700€, le hubiera dicho que no pusiera ni un dedo en el motor de mi coche.

Todo empezó cuando que quedé colgada en medio del autopista, y el buen hombre detectó que el problema era que mi coche se había quedado sin agua. Así que le puso la misma agua que él llevaba para beber.

Esa acción con tan buenas intenciones me sacó del apuro, pero me demostró que más vale que te saque del apuro el experto. Con el tiempo, y no estoy hablando de años y años, todo el circuito se oxidó y tuve que pagar purgas y reparaciones varias.

Como veréis más adelante, más me habría valido la pena que un mecánico experto hubiera visto el coche desde el primer momento.

El caso es que este suceso me hizo pensar en mi carrera profesional. Me di cuenta de que yo no quería ser el que socorre a los clientes con buenas intenciones pero luego les genera problemas, gastos innecesarios e insatisfacción. Seguramente tú tampoco.

Lo que muchos queremos, por no decir todos, es ser el experto que realmente sabe resolver problemas a corto, medio y largo plazo, consiguiendo de esta manera clientes satisfechos que vuelven y te recomiendan, mientras tú te sientes satisfecho de tu trabajo.

Por eso hoy quiero hablar de los cimientos necesarios en el camino a convertirte en el experto que toma las decisiones apropiadas con conocimiento de causa en un proyecto de app.

Los cimientos

Para poder ser expertos en el diseño de app’s primero necesitamos saber qué es una web, una app, y dentro de las apps, qué quiere decir app nativa, web app y Progressive Web App (PWA).

Te preguntarás que por qué tú como diseñador debes saber estos conceptos. Pero como veremos, una opción u otra afectará tu trabajo como diseñador. Y aún va más allá el tema si eres dueño de tu propio estudio o agencia, pues es crucial saber diferenciar bien estos conceptos para ver qué se debe hacer en el caso de cada cliente.

Puede ser que algunos de estos conceptos te suenen súper básicos. Pero hoy descubrirás que entender la diferencia entre ellos, y dónde empieza uno y acaba otro, no es tan sencillo de definir. Y también verás que llegar a entenderlos bien te será fundamental para luego poder evaluar los proyectos y tratarlos con el cliente.

Cuando tengamos estos conceptos claros podremos ya adentrarnos en el diseño para cada caso. Como el tema es muy amplio, lo he dividido en varios episodios. En el de hoy trataremos estos conceptos básicos, y en los siguientes nos centraremos ya en el diseño para cada casos.

Web versus app

Se puede hacer una diferenciación a nivel técnico, como podrás encontrar en muchas comparativas por Internet. Sin embargo, esta diferenciación no aporta la información de negocio que necesitará tu cliente, y además esa misma diferenciación se hace muy confusa con la aparición de las web apps.

Desde mi opinión, al final es una cuestión de perspectiva. Así que como diseñadores creo que os puede ser más útil la diferenciación desde la perspectiva del objetivo que tiene una web y el que tiene una app. Y es que el objetivo de cada uno es crucial porque afecta al uso y funcionalidad que ofrecen cada una.

Así pues, mi opinión (insisto: es mi opinión) es que:

  • una web es informativa
  • una aplicación (app) es interactiva y añade funcionalidades extra

Debido a esto, se puede entender la web como el punto de comunicación con un público objetivo para dar información sobre una compañía y sus productos o servicios, o dar información sobre un tema como el caso de un blog o un site de noticias.

Como puedes ver, en el caso de una web los usuarios acceden a ella a través de un navegador en busca de información, el servidor obtiene los datos a mostrar de la base de datos, construye la página y se la envía al navegador del usuario.

En el caso de una web estática el escenario es aún más simple: el servidor se saltará el paso de la base de datos y construir la web, y servirá la página estática en Html y Javascript.

Una app en cambio ofrece más funcionalidades, y a menudo de más complejidad, como por ejemplo permitir a los usuarios crearse listas de música, compartir imágenes y vídeos, e incluso recibir notificaciones en el móvil cuando pasan ciertos eventos. Por lo tanto, aquí el servidor ya no se limita a obtener datos de una base de datos y mostrarlo. Ahora tiene una lógica de negocio con funcionalidades más complejas.

Fronteras difusas

Y ahora, con esta simple clasificación, qué dirías qué es una tienda online?

Piensa que aún no te lo he dicho, pero existen apps que no necesitan descarga, por lo que no puedes tomar esto como indicador. En un momento te hablaré más sobre esto. Pero antes, respondo a la pregunta.

Desde mi opinión, yo diría que una ecommerce va más allá de informar, enviar comentarios para compartir aún más iformación ante una noticia u opinión, o enviar un formaulrio de contacto. Estas son funcionalidades menores ligadas al objetivo de dar información y estarían aceptadas como parte de una web. Así pues, para mi una ecommerce tiene una funcionalidad más extensa y de más nivel y ya es un tipo de aplicación.

De todas manera, si alguien llamara web a una e-commerce tampoco estaría mal. Todo es cuestión de perspectiva, como te decía antes.

Pero, en líneas generales, si un cliente necesita ser encontrado por internet por sus clientes objetivos para explicarles sus servicios y que contacten con él, por ejemplo, lo que necesitaría es una web y no una app.

App versus web app versus PWA

Sigamos hablando ahora más en detalle de las app’s viendo qué opciones tenemos en este campo. Para hacerlo usaremos una diferenciación más bien técnica que nos permitirá entender mejor, en los próximos capítulos, cómo afecta cada opción al aspecto visual y la experiencia de usuario.

En el mundo de las apps se identifican las apps nativas, las web apps y las Progressive Web Apps (WPA).

App’s nativas

En líneas generales, una app nativa es un código o programa informático que se descarga desde una tienda de aplicaciones en el dispositivo móvil del usuario. Estas tiendas o stores son Google Play para Android y App Store para iOS.

En el caso de una app nativa, estamos hablando de una aplicación desarrollada especialmente para una plataforma en concreto (iOS, Android o Windows). En este caso se requiere un código diferente para cada plataforma. Un ejemplo de app sería la app de Instagram que te descargas en tu móvil o tablet.

Tanto apple como Android definen aspectos relacionados con el user interface y con la experiencia de usuario, y da recomendaciones al respecto. Además, cada plataforma tiene ciertos elementos e interacciones ya predefinidos.

Para ser expertos en diseño app deberemos conocer más a fondo estas recomendaciones específicas a la hora de hacer nuestros diseños. Pero como os decía, estos temas son tan amplios que los trataremos en los próximos episodios.

Web app’s

Por otro lado, una aplicación web o web app es como una app pero el usuario accede a ellas a través del navegador, sin tener que descargarse nada. Por este motivo te decía antes que el hecho de que haya descarga o no, no es un indicador de si es una app o una web.

Como ejemplo de web app, piensa en cuando accedes a tu cuenta de Instagram vía navegador para ver imágenes de otros o responder comentarios. (Cuando haces esto) Estás accediendo a la web app de Instagram desde el navegador de tu ordenador.

Una web app se desarrolla con lenguajes de programación web (html, css y javascript). Existen frameworks para ello, como Ionic Angular con el que mi equipo y yo trabajamos, por ejemplo, u otros como React sobre los que también igual has oído hablar a programadores.

Un aspecto muy interesante para tus clientes sobre este tipo de frameworks como Ionic Angular, es que permite desarrollar un único código y luego deployarlo para web, iOS o Android. Dicho en nuestro idioma, el equipo de desarrolladores sólo debe escribir un único código, y luego ese framework ofrece unas herramientas para traducirlo y obtener el código para iOS por un lado y el código para Android por otro, creando así: la web app, la app para iOS y la app para Android. Se desarrolla un único código, pero se obtienen tres códigos distintos como resultado. De esta manera, el coste de desarrollo es menor, factor súper interesante para tus clientes.

Para ti como diseñador esto es importante porque quiere decir que si trabajas en un proyecto con un framework así y el cliente quiere la app para cada plataforma y la web app, no podrás limitarte a saber cómo deben ser las interfaces para iOS, por ejemplo, sino que tendrás que estudiar las opciones de cada plataforma.

Por último, para complicar un poco más el panorama, tenemos las Progressive Web Apps, que se encuentran a medio camino entre las Web apps y las apps nativas.

Progressive Web App’s

Con más detalle, una Progressive Web App (PWA) es una web app construida con un framework Javascript. Las PWA’s aportan en muchos aspectos una experiencia de app para el usuario porque pueden añadirse a la home del dispositivo móvil con un icono (un acceso directo) para permitir así acceder a ellas con sólo hacer tap en su icono como si fuera una app. Es decir, el usuario no tiene que abrir primero el navegador para  acceder a  una Progressive Web App, como sí sucede en el caso de una web app. Ahora bien, se siguen abriendo en el navegador como una web app.

Además, al igual que las apps, las PWA’s ofrecen una experiencia full screen para animar a los usuarios a usarlas.
Tienen grandes beneficios porque, a diferencia de las web apps, las Progressive Web Apps, pese a que no permiten acceder a todo el hardware del móvil o tablet como una app, sí que permiten acceder a gran parte de él (cámara, etc). Y también permiten ofrecer funcionalidades como notificaciones en el móvil, como las apps, pero sin requerir ser descargadas.

Este último dato es muy importante porque la mayoría de nosotros tiene ya el móvil saturado de apps y datos, por lo que cada vez somos más reacios a descargarnos nuevas apps. Como muestra de ello, según Business Insider, el 65,5% de los usuarios no descargan nuevas apps. Puedes acceder al artículo en las notas del episodio.

Otra diferencia importante de las PWA en comparación con las web apps, es que las web apps requieren conexión a internet. En cambio, las PWA, no. No es que puedan funcionar completamente sin acceso a internet porque lo necesitarán para ciertas funcionalidades. El truco de las PWA es que utilizan datos en caché para todo lo que pueden, de manera que el usuario ve que puede abrir la PWA sin tener acceso a internet y hacer ciertas acciones. cuando el móvil tiene acceso de nuevo, se conectan al el servidor y completan las acciones hechas por el usuario que han guardado en cola (actualización de información en la cuenta, etc) y sincronizan todos los datos que haga falta. Precisamente por esto se llaman Progressive.

En realidad la lista de diferencias entre PWA y web app y app es mucho más extensa y muy técnica. Para nuestro trabajo como diseñadores app debemos quedamos con el hecho de que diseñar para cada plataforma tendrá algunos aspectos diferentes a tener en cuenta y que veremos el episodio que viene. También debemos tener en cuenta que dependiendo de cómo se implemente la app, podemos encontrarnos con el caso de que sólo nos importe una plataforma en concreto.

¿¿Y si un cliente te pregunta qué le conviene más: web, web app, app nativa o progressive web app??

Como dueños de nuestro negocio, no sólo nos importan las diferencias que pueda haber a nivel de diseñador. También nos importa este tema desde el punto de vista de poder hablar con el cliente sobre el proyecto, sin temblar de miedo por si nos habla de la app o la PWA, nos suena todo a chino y no sabemos qué decirle. Después de lo hablado hoy, esto ya no sucederá.

Ante la típica pregunta de muchos clientes que vengan a ti, a tu estudio o agencia, sobre si necesitan una web o una app, siempre puedes implicar al desarrollador app senior para acabar de dar los detalles. Pero a partir de lo visto hoy, ahora ya puedes iniciar la conversación y resolver parte de estas dudas.

Lo primero que deberás hacer es determinar con el cliente el objetivo del proyecto. Si sólo es dar a conocer a su empresa o producto deberá hacer una web. Esto es aún más vital si hacen campañas en Facebook ads, inbound marketing, etc. Porque con una web podrá disponer de herramientas analíticas para poder hacer el seguimiento de visitas, conversiones, etc. Con una app sólo podrá saber el número de descargas que ha tenido y poco más.

Si las dudas del cliente ya son sólo a nivel de web app, app nativa o PWA porque ya está claro que no es una simple web, puedes explicarle las diferencias principales. Ahora bien, las diferencias entre estas opciones y sus implicaciones económicas requieren ya una conversación mucho más técnica, por lo que te aconsejo que aquí sí que impliques al experto app de tu equipo para poder aconsejarle.

En cualquier caso, con el capítulo de hoy ya estás empezando a empoderarte para poder responder parte de las preguntas tú y para seguir las explicaciones del desarrollador senior.

En caso de cualquier duda, mi recomendación es que siempre lo consultes o corrobores con tu equipo técnico.

Así tú estarás tranquilo sintiendo más control en las conversaciones iniciales de valoración del proyecto, entendiendo mejor el alcance para poder presupuestarlo, y el cliente se sentirá bien asesorado por ti y tu equipo. Así que podrá tomar con mejor conocimiento de causa la opción que más le convenga sin gastos ni esfuerzos extras.

¡Ojalá yo hubiera ido al experto!

Como os decía al principio del capítulo, cuando mi coche me dejó tirada, más me habría valido la pena que lo hubiera tratado un mecánico experto desde el principio. De haber sido así, el experto hubiera sabido que no se debe poner el mismo agua que bebemos en el circuito de refrigeración del coche. Habría puesto la que tocaba y hubiera hecho una pequeña reparación para solucionar la pérdida, pagando por todo mucho menos de lo que me tocó pagar al final. Y además, yo habría quedado mucho más satisfecha.

Así pues, con los conocimientos de hoy y los de los próximos episodios, dejaremos de quedarnos en buenas intenciones en los proyectos app que se nos presenten. Estamos, pues, en el camino de convertirnos en el equivalente a ese mecánico experto, es decir, el que controla la materia a tratar y soluciona bien el proyecto consiguiendo la satisfacción de sus clientes.

En el episodio de hoy hemos presentado estos conocimientos base para que tú ahora puedas aposentarlos. Y así podremos hablar de las recomendaciones para diseñar en cada plataforma en los siguientes episodios de lecciones UI para Creativos.

Y ahora, después de todo lo explicado hoy, llegamos al final. Si este contenido te ha parecido interesante, puedes subscribirte a mi newsletter para no perderte los próximos capítulos.

¡Muchas gracias por leerme y hasta muy, muy pronto!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descubre cómo aumentar tu productividad y eficiencia en tu negocio con Lecciones UI para creativos

Breves podcast semanales en las que comparto contigo cómo mejorar los procesos tanto de gestión como de producción UI.

Lecciones UI
para Creativos

Subscríbete para descargar los contenidos. Si ya estás suscrito, puedes acceder a ellos a través del enlace que recibiste en el email de bienvenida.

GDPR - Acción requerida

Tus datos me importan y quiero que estén seguros. Sólo usaré la información que nos proporciones en este formulario (nombre y correo electrónico) para enviarte únicamente información relacionada con el podcast Lecciones UI para Creativos. Confirma explícitamente tu permiso para enviarte información a través de la siguiente casilla:

Términos y condiciones

Puedes cambiar de opinión en cualquier momento haciendo clic en el enlace "dar de baja" que hay en el pie de página de cualquier correo electrónico que recibas de nuestra parte, o poniéndote en contacto conmigo en info@maria-pascual.es Trataré tu información con sumo respeto y cuidado. Para obtener más información acerca de nuestras prácticas de privacidad, visita nuestro sitio web.