{"id":27218,"date":"2018-01-17T12:00:45","date_gmt":"2018-01-17T12:00:45","guid":{"rendered":"http:\/\/comunidad.iebschool.com\/iebs\/?p=1231"},"modified":"2023-02-15T15:19:17","modified_gmt":"2023-02-15T15:19:17","slug":"mobile-first-nueva-filosofia-del-diseno-web-analitica-usabilidad","status":"publish","type":"post","link":"https:\/\/www.qschool.io\/blog\/mobile-first-nueva-filosofia-del-diseno-web-analitica-usabilidad\/","title":{"rendered":"Qu\u00e9 es el Mobile First y c\u00f3mo funciona"},"content":{"rendered":"\n

Actualmente el m\u00f3vil supera al ordenador como dispositivo principal de acceso a Internet en Espa\u00f1a. El 40% de los usuarios utilizan el m\u00f3vil para acceder a internet y el 32% el ordenador. Es evidente que los dispositivos m\u00f3viles han modificado tanto los h\u00e1bitos de consumo de contenidos online como el modo en que \u00e9stos contenidos son dise\u00f1ados por marcas, empresas y entidades. Tanto es as\u00ed que ha surgido el concepto del Mobile First, una evoluci\u00f3n del Responsive Web Design en el cual se prioriza la gesti\u00f3n del contenido en m\u00f3viles antes que en el resto de dispositivos electr\u00f3nicos. \u00bfA\u00fan no est\u00e1s familiarizado con estos conceptos? \u00a1Pues sigue leyendo ya que es algo que como profesional necesitas dominar! Vayamos paso a paso.<\/span><\/p>\n\n\n\n

El impacto de los cambios en los h\u00e1bitos de consumo<\/span><\/h2>\n\n\n\n

Gracias a las nuevas tecnolog\u00edas de la informaci\u00f3n y la comunicaci\u00f3n, el consumidor se ha transformado en <\/span>prosumer, <\/span><\/i>ya que ahora no solo consume sino que tambi\u00e9n produce contenido.<\/span><\/p>\n\n\n\n

Ya no se establece una comunicaci\u00f3n unidireccional entre marca \u2013 consumidor sino que el <\/span>prosumer<\/span><\/i> lejos de quedarse impasible ante el contenido y la informaci\u00f3n a los que est\u00e1 expuesto; los comenta, los modifica, los cura (ejerce de Content Curator)<\/a><\/strong> o crea de nuevos por s\u00ed mismo.<\/span><\/p>\n\n\n\n

Adem\u00e1s el prosumer ya lleva en su ADN el hecho de ser un usuario multitasking y multipantalla; es decir, que tiene la capacidad de focalizar la atenci\u00f3n en dos fuentes informativas aunque el impacto eficiente del input del contenido de los diferentes medios no existe como tal, ya que el ser humano solo puede focalizar una escucha y atenci\u00f3n a un \u00fanico input, por tanto tiene la necesidad de ir turnando su atenci\u00f3n (por ejemplo mirar un programa de televisi\u00f3n mientras lo comentas por <\/span>whatsapp <\/span><\/i>con un amigo). En el momento de redactar un mensaje es muy probable que se pierda informaci\u00f3n procedente de la pantalla del televisor.<\/span><\/p>\n\n\n\n

Si atendemos a la evoluci\u00f3n sobre cu\u00e1l es el dispositivo que los usuarios emplean con mayor frecuencia para acceder a contenido web, nos podemos ayudar con esta infograf\u00eda de SmartTravel.news que hace una comparativa de c\u00f3mo ha cambiado la manera de consumir contenido web, entre los a\u00f1os 2015-2017.<\/span><\/p>\n\n\n\n

\"consumo<\/figure>\n\n\n\n

Adem\u00e1s, si nos fijamos en esta infograf\u00eda del informe Ditrendia Mobile 2017, vemos que la media de consumo de los dispositivos m\u00f3viles es de 170 minutos al d\u00eda, el ordenador 120 minutos y las tabletas 75 minutos. <\/span><\/p>\n\n\n\n

\"m\u00f3vil<\/figure><\/div>\n\n\n\n

Esta tendencia no es de extra\u00f1ar ya que el m\u00f3vil es el medio social por excelencia: se estima que <\/span>el 91% del acceso a internet desde el m\u00f3vil es para llevar a cabo actividades en diferentes redes sociales<\/b> mientras que en el resto de \u201cpantallas\u201d la cifra desciende al 79%. Esta modificaci\u00f3n de los cambios de h\u00e1bito ha supuesto una evoluci\u00f3n del planteamiento de la experiencia de usuario desarrollada por las marcas.<\/span><\/p>\n\n\n\n

Mobile First para mejorar la experiencia del usuario<\/span><\/h2>\n\n\n\n

A medida que el panorama digital se hace m\u00e1s complejo, es necesario cambiar las estrategias para poder dise\u00f1ar experiencias que se adapten y funcionen en toda la gama de dispositivos digitales, y con los conceptos de Responsive Design y Mobile First se puede innovar en muchos sentidos.<\/span><\/p>\n\n\n\n

Lo m\u00e1s habitual en una marca o empresa es llevar a cabo el procedimiento del <\/span>Responsive Web design<\/b><\/a> (dise\u00f1o web adaptativo) que consiste en adaptar la arqueolog\u00eda del contenido de una p\u00e1gina web tal y como la puedes visionar desde un ordenador, a dispositivos electr\u00f3nicos de menores dimensiones como <\/span>tablets<\/span><\/i> o m\u00f3viles.<\/span><\/p>\n\n\n\n

Aunque Luke Wroblewski dio un paso m\u00e1s all\u00e1 y desarroll\u00f3 la filosof\u00eda del Mobile First en la cual se prioriza la experiencia m\u00f3vil del usuario. Primero se realiza el prototipo de dise\u00f1o web para los m\u00f3viles y luego se extrapola a los dem\u00e1s dispositivos adoptando la cultura de trabajo <\/span>agile<\/span><\/i>, ya que se optimizan tiempos de adaptaci\u00f3n debido a que se parte de una arqueolog\u00eda de informaci\u00f3n simple hacia otra m\u00e1s compleja y se focaliza la atenci\u00f3n en el contenido relevante (con lo que la web para formato ordenador tambi\u00e9n sale ganando).<\/span><\/p>\n\n\n\n

Con esta filosof\u00eda se trata de llegar a m\u00e1s personas, y tambi\u00e9n tiene como uno de sus objetivos centrar el contenido del dise\u00f1o en algo b\u00e1sico y funcional, ya que cuando perdemos el 80% de la superficie de pantalla aquello que debemos priorizar y optimizar es el contenido relevante. Adem\u00e1s piensa que la simplicidad es una macrotendencia que se extiende a los \u00e1mbitos del dise\u00f1o gr\u00e1fico y del Marketing Online.<\/span><\/p>\n\n\n\n

Este desarrollo no va solo encaminado hacia la simplificaci\u00f3n del trabajo del dise\u00f1ador, sino que la intencionalidad es la mejora de la experiencia del usuario.<\/span><\/p>\n\n\n\n

Si tienes una marca, una empresa o simplemente generas contenido propio por placer, tienes que conseguir captar la atenci\u00f3n de tu audiencia \u00a1Y \u00e9sta se encuentra mirando un peque\u00f1o dispositivo m\u00f3vil que adem\u00e1s se utiliza en un contexto <\/span>on-the-go! <\/span><\/i>Es decir;<\/span> mientras la persona se est\u00e1 desplazando o realizando alguna actividad fuera del hogar o el trabajo: comprando, en el metro, en el tren o andando. <\/span><\/p>\n\n\n\n

Mobile First, \u00bfc\u00f3mo mejorar el posicionamiento?<\/span><\/h3>\n\n\n\n

Otro factor muy importante y que debemos tener en cuenta es el posicionamiento. Actualmente Google considerar\u00e1 siempre, como primera opci\u00f3n, la versi\u00f3n m\u00f3vil de un sitio a la hora de posicionarla. Esto quiere decir que si la parte m\u00f3vil est\u00e1 bien optimizada, ambas partes, saldr\u00e1n ganando en posicionamiento. <\/span><\/p>\n\n\n\n

Tener un sitio web mobile friendly<\/em>, es decir, adaptado a dispositivos m\u00f3viles, puede significar una gran diferencia en tener buen posicionamiento y ser top en SERPs. De esta manera, todas las tareas que hagamos para mejorar ese aspecto, estar\u00e1n afectando directamente a nuestro posicionamiento.<\/span><\/p>\n\n\n\n

El mobile friendly nos da las claves para mejorar nuestro sitio web. <\/span><\/p>\n\n\n\n

#1. Optimizaci\u00f3n del contenido para m\u00f3viles<\/span><\/h4>\n\n\n\n

Esto hace referencia a los tiempos de carga, la experiencia de la navegaci\u00f3n, el tama\u00f1o de las im\u00e1genes y el contenido, etc. <\/span><\/p>\n\n\n\n

#2. Usar im\u00e1genes de alta calidad<\/span><\/h4>\n\n\n\n

Cada vez los m\u00f3viles poseen resoluciones m\u00e1s altas, y tener im\u00e1genes de mala calidad y que no sean de alta definici\u00f3n pueden verse borrosas. <\/span><\/p>\n\n\n\n

#3. Tama\u00f1o fuentes y botones<\/span><\/h4>\n\n\n\n

El tama\u00f1o de las fuentes y los botones tienen que ser de un tama\u00f1o considerable, para que el usuario puede leerlo sin necesidad de hacer zoom. <\/span><\/p>\n\n\n\n

#4. Evitar software poco com\u00fan como flash<\/span><\/h4>\n\n\n\n

Existen algunas tecnolog\u00edas que en cuanto a SEO no son muy recomendables y generan diferentes problemas a la hora del posicionamiento de la web. <\/span><\/p>\n\n\n\n

#5. Reducir el tama\u00f1o o peso de todo el contenido web<\/span><\/h4>\n\n\n\n

Para Google la velocidad es un factor muy importante, pero tambi\u00e9n para los usuarios. En este <\/span>enlace<\/span><\/a> puedes ver c\u00f3mo comprimir el contenido de tu web. <\/span><\/p>\n\n\n\n

#6. Ten en cuenta los formularios<\/span><\/h4>\n\n\n\n

Si tu web dispone de formularios, aseg\u00farate que pueden rellenarse de forma sencilla sin tener que hacer zoom o clickar otro bot\u00f3n sin querer. <\/span><\/p>\n\n\n\n

#7. Pop ups, cuidado con su uso<\/span><\/h4>\n\n\n\n

Hace un tiempo que Google ha empezado a penalizar todas aquellas webs que utilizan <\/span>pop ups<\/span><\/a> demasiado grandes en navegaci\u00f3n m\u00f3vil que interfieren con la visualizaci\u00f3n normal del contenido. <\/span><\/p>\n\n\n\n

#8. Contenido adaptable a cualquier dispositivo<\/span><\/h4>\n\n\n\n

El contenido de tu web, debe poder adaptarse a los distintos dispositivos y plataformas, para mejorar nuestro posicionamiento y aumentar la experiencia del usuario. <\/span><\/p>\n\n\n\n

\u00bfQuieres crear un prototipo dise\u00f1ado de forma \u00e1gil centrado en la experiencia del usuario y saber optimizarlo en base a el an\u00e1lisis y sucesivas iteracciones?, te recomendamos el Master en Marketing Digital y Publicidad en Redes Sociales<\/a> <\/strong> donde aprender\u00e1s a controlar, medir y mejorar las inversiones de la empresa.<\/span><\/p>\n\n\n\n

Art\u00edculos relacionados que te pueden interesar:<\/b><\/p>\n\n\n\n