Sostenibilidad en el diseño web: propuesta de mejora sostenible para el sitio web de GoodNews Coffee

1 TRABAJO FIN DE GRADO Dirigido por: Dra. Marina Ramos Serrano Celia González Muñoz Autora: GRADO EN PUBLICIDAD Y RELACIONES PÚBLICAS AÑO ACADÉMICO 2023/24 Sostenibilidad en el diseño web: propuesta de mejora sostenible para el sitio web de GoodNews Coffee 2 3 Dedicado a todo aquel que se levanta cada día queriendo mejorar el mundo. Also, I want to mention the year I spent living and studying in The Netherlands, since it inspired me to make this project. 4 5 Resumen Abstract Palabras Clave Keywords Diseño Web Web Design Sostenibilidad Sustainability Diseño UI/UX UI/UX Design Inclusividad Inclusiveness Impacto Medioambiental environmental impact El presente trabajo tiene como objetivo principal la explicación del concepto de sostenibilidad digital en su conjunto, y más concretamente, de la sostenibilidad de las páginas web mediante la creación de una propuesta de mejora sostenible de la web de la empresa GoodNews Coffee. Para ello, investigamos todo el contexto que rodea al concepto de sostenibilidad digital y los conocimientos y herramientas necesarios para poder diseñar una página web sostenible, además de analizar el sitio web de GoodNews Coffee en términos de sostenibilidad. Tras ello, elaboramos un prototipo como propuesta de mejora para ofrecer una versión del sitio web más sostenible. The aim of this thesis is to explain the concept of digital sustainability as a whole, and more specifically, the web sustainability through the elaboration of a sustainable improvement proposal for GoodNews Coffee company website. For that purpose, we do research of all the context related to the concept of digital sustainability and the theory and tools needed to design a sustainable website, as we also analyze GoodNews Coffee’s website in terms of sustainability. Subsequently, we create a web prototype as an improvement proposal in order to offer a more sustainable version of the website. 6 7 Índice de contenidos 1. CAPÍTULO I: Introducción a la sostenibilidad en la Web...................................8 1.1. Diseño UI/UX y accesibilidad web.............................................................................9 1.2. Nuevas tendencias en el diseño web......................................................................13 1.3. ¿Qué es la sostenibilidad en la Web?....................................................................20 1.4. Diseño UI/UX: sostenible vs. tradicional...............................................................22 1.5. Diseño web inclusivo.....................................................................................................24 2. CAPÍTULO II: Prácticas para el diseño web sostenible y sus consecuencias en la sociedad..........................................................................................28 2.1. Prácticas para un diseño web sostenible..............................................................29 2.2. Beneficios de la Web sostenible para las marcas.............................................35 2.3. Contribución a los ODS..............................................................................................39 2.4. El futuro de la sostenibilidad en el ámbito digital...........................................43 3. CAPÍTULO III: Caso GoodNews Coffee, una marca sostenible con una página web contaminante......................................................................................................46 3.1. Análisis de la marca de GoodNews Coffee..........................................................47 3.2. Trayectoria de la marca en relación con la sostenibilidad. ..........................49 4. OBJETIVOS..........................................................................................................................51 5. METODOLOGÍA.................................................................................................................52 6. RESULTADOS.....................................................................................................................59 7. CONCLUSIONES................................................................................................................86 8. REFERENCIAS.....................................................................................................................91 9. ANEXO..................................................................................................................................97 8 CAPÍTULO I Introducción a la sostenibilidad en la Web 1.1 1.2 1.3 1.4 1.5 Diseño UI/UX y accesibilidad web Nuevas tendencias en el diseño web ¿Qué es la sostenibilidad en la Web? Diseño UI/UX: sostenible vs. tradicional Diseño web inclusivo El presente capitulo servirá como introducción a los diferentes conceptos y puntos necesarios para poder establecer una base teórica que servirá para el desarrollo del resto del proyecto. De esta forma, dentro del enfoque del diseño web, el capítulo abarcará aspecto más generales hasta llegar a aspectos más específicos que explican el desarrollo web sostenible como un conjunto. 9 1.1. Diseño UI/UX y accesibilidad web Naturalmente, el mundo digital tiene cada vez más peso en todos los aspectos de la sociedad, desde su presencia en el sistema económico hasta en la forma en como nos comunicamos. Una parte crucial que permite que desempeñemos todas esas acciones en el mundo digital, es la interfaz de usuario (UI). Desde una perspectiva más teórica, entendemos el diseño UI como: “visual elements of a digital product. It focuses mostly on looks and style, and not the overall experience. […] You can think of it as a ‘surface’ of a digital product” (Filipiuk, 2021, p. 2). Una buena interfaz de usuario supone la suma de múltiples cuestiones, ya sean los colores, la cuadrícula, la tipografía, etc. 1Un buen diseño es innovador. La innovación es algo positivo, pero que nuestro diseño no puede estar completamente basado en ello. Lo más innovador que podemos hacer en el diseño debe ser a través de pequeñas interacciones. 2Un buen diseño convierte un producto en algo útil. La usabilidad es la base de la experiencia de usuario. Se trata de buscar claridad en el diseño. 3Un buen diseño es estético. La estética es algo subjetivo y cómo la percibimos cambia constantemente. Lo que no cambia es la estética que viene de la armonía interna, conseguida a través de la cuadrícula, tipografía, los espacios en blanco, etc. 4Un buen diseño es atemporal. Si se consigue diseñar una Introducción a la sostenibilidad en la Web 16 La siguiente página web fue creada por Wix ADI, la IA creada por la plataforma CMS Wix. Esta IA pregunta al usuario cómo quiere que sea su página web visualmente y genera una propuesta en cuestión de minutos. Ilustración 2. Interfaz de usuario de la página web de Castoret Pollux Fuente: Página web de Castoret Pollux Inteligencia artificial (IA) La inteligencia artificial (IA) es una herramienta digital de carácter revolucionario que brinda la oportunidad a las empresas y sus respectivas marcas de construir relaciones con sus clientes a otro nivel, haciendo uso de algoritmos que hacen el proceso más eficiente e innovador (Tiautrakul et al., 2019). En el ámbito del diseño web, esta herramienta puede ofrecer una mejora sin precedentes al diseño de experiencia de usuario (UX): “Artificial Intelligence opens up new possibilities for personalization, and the way to design a friendlier, more human-like product is to mimic human expression” (Huang y Yang, 2022, p. 537) Estos autores afirman que el futuro del diseño web se regirá principalmente por una constante colaboración entre la persona y la IA. Introducción a la sostenibilidad en la Web 17 Actualmente, algunas empresas han adoptado la IA en sus programas de diseño como herramienta de ayuda al diseñador. Entre ellas, encontramos a Adobe o Wix (Huang y Yang, 2022). Se puede afirmar, por tanto, que la inteligencia artificial ha llegado para quedarse y que está revolucionando el modelo de diseño web tradicional conocido hasta el momento. La siguiente página web fue creada por Wix ADI, la IA creada por la plataforma CMS Wix. Esta IA pregunta al usuario cómo quiere que sea su página web visualmente y genera una propuesta en cuestión de minutos. Ilustración 3. Interfaz de usuario de la página web de Adams Construction Group Fuente: Página web de Adams Construction Group Inteligencia artificial (IA) La inspiración del diseño bento box viene de la cultura japonesa. Son contenedores para organizar comida. De esta forma, varias características de esta forma de almacenamiento se han extrapolado al diseño web: eficiencia, compartimentalización y una presentación estética de la interfaz (Sathasivam, 2023). Introducción a la sostenibilidad en la Web 18 En el diseño web, la información se dispone en bloques de diferentes tamaños organizados en cuadrículas. Un ejemplo es la página de Necati. Aunque no puedan ser clasificadas como corrientes por sí mismas, existen recursos en el diseño web que podemos ver que se utilizan repetidamente en el diseño UI/UX. El 66% del tráfico mundial de Internet se realiza a través de los dispositivos móviles (Semrush, 2022). Es por eso que es lógico que muchas de las tendencias en la web que vemos hoy día estén enfocadas a la experiencia a través del smartphone. Un ejemplo de ello es el interruptor o toggle switch: “A toggle switch implies that the user must choose between two mutually exclusive options. Toggles are the digital equivalent of an actual switch. When the user presses the switch, there’s a brief interaction, with the chosen option taking immediate effect” (Costa, 2020, en línea). Ilustración 4. Interfaz de usuario de la página web de Necati Fuente: Página web de Necatikcl Otros elementos en tendencia Introducción a la sostenibilidad en la Web 19 Este recurso fue creado inicialmente para interfaces de smartphone, pero hoy vemos como se usan en el diseño UI/UX de webs de escritorio. Los botones grandes son otro recurso que ha migrado a la web de escritorio. Debido a las dimensiones de los dispositivos móviles, el utilizar botones grandes en el diseño web es imprescindible para asegurar una buena experiencia de usuario. Al aportar ese toque estético, también encontramos botones grandes en las versiones de escritorio. Las tendencias en diseño web cambian constantemente. Los diseñadores UI/ UX deben estar siempre al día de las tendencias para adaptarse a la demanda de los usuarios, y ofrecerles así la mejor experiencia. Los diseñadores web deben realizar un diseño adaptado a las nuevas tendencias sin olvidar la funcionalidad estudiada a través de UI. Un buen diseño de interfaz de usuario no es muy flexible en sus normas o regulaciones. Si se le da demasiada libertad artística, esto puede desviarse considerablemente de especificaciones de carácter más funcional, haciendo que el producto final no sea sencillo de usar (Malewicz, 2021), afectando a la experiencia de usuario. Ilustración 5. Interfaz de usuario de la página web Webflow Fuente: Página web de Webflow Introducción a la sostenibilidad en la Web 20 1.3. ¿Qué es la sostenibilidad en la Web? Desde una perspectiva más general, entendemos la sostenibilidad o el desarrollo sostenible como “la satisfacción de las necesidades de la generación presente sin comprometer la capacidad de las generaciones futuras para satisfacer sus propias necesidades” (ONU, 1987). Cuando hablamos de sostenibilidad, nos referimos a la búsqueda del equilibrio entre la acción del ser humano y la naturaleza. Dentro de ello, incluimos factores como el ambiente y la cultura, el patrimonio cultural y su papel dentro del paisaje biocultural. En definitiva, el ambiente y la cultura son dos factores que están constantemente interrelacionados (Blanco-Uribe Quintero, 2023). Dentro de la búsqueda de esta sostenibilidad, uno de los mayores retos al que nos enfrentamos como sociedad es la reducción de gases de efecto invernadero, y más concretamente, la reducción de CO2 en la atmósfera. Este tipo de gas es responsable de alrededor de tres cuartas partes de las emisiones totales, pudiendo permanecer en la atmósfera durante miles de años (Nunez, 2023). Entre las consecuencias de la emisión de estos gases, podemos destacar: “los gases de efecto invernadero tienen efectos de gran alcance sobre el medio ambiente y la salud. Provocan el cambio climático al atrapar el calor y también contribuyen a las enfermedades respiratorias causadas por el smog y la contaminación atmosférica. El clima extremo, las alteraciones del suministro de alimentos y el aumento de los incendios forestales son otros efectos del cambio climático provocado por los gases de efecto invernadero. Los patrones meteorológicos típicos a los que estamos acostumbrados cambiarán; algunas especies desaparecerán; otras emigrarán o crecerán” (Nunez, 2023, en prensa). Introducción a la sostenibilidad en la Web 21 La organización Our World in Data, impulsada por la Universidad de Oxford, elaboró un gráfico el porcentaje de emisiones de gases de efecto invernadero por sector. En este gráfico, que podemos encontrar en el anexo, observamos que el sector energético es el más contaminante, con un 73.2%. Dentro de este sector se incluye el uso de internet. En este sentido, introducimos el concepto de contaminación digital, entendida como “las emisiones de carbono detrás de nuestra actividad digital: desde el consumo de los centros de datos hasta el de las redes de transmisión y el de los dispositivos que tenemos en nuestras manos durante horas todos los días”, y que se encuentra dentro del sector energético (Iberdrola, s.f., en prensa). Como consecuencia, simples acciones que realizamos cada día con nuestros dispositivos como compartir una foto en redes sociales, enviar un mensaje o ver un capítulo de una serie en Netflix emite CO2 a la atmósfera en mayor o menor medida. Además, este problema no hace más que crecer, ya que la contaminación digital está causada en gran medida por el consumo de electricidad del sector de las tecnologías de la información (TIC), cuyo cálculo ronda el 7% del consumo mundial. Además, la UE prevé que este porcentaje aumente hasta alcanzar el 13% en 2030 (Iberdrola, s.f., en línea). Por ello, nace la búsqueda de la sostenibilidad en la web, que persigue reducir las emisiones de CO2 mediante acciones que supongan un menor gasto de energía para ser ejecutadas. Desde acciones pensadas para el usuario final, como apagar los dispositivos cuando no estén siendo usados, no enviar correos innecesarios o limitar el uso de redes sociales, hasta acciones que radiquen en el producto, dirigidas a diseñadores y desarrolladores, como crear productos que consuman la menor cantidad de energía posible o asegurarse que la fuente de energía que utilizan para sus productos digitales sea renovable. Introducción a la sostenibilidad en la Web 22 Aunque esto puede ser aplicado a todos los productos digitales, este trabajo estará centrado en el diseño de páginas web más sostenibles. Entendemos diseño web sostenible como “an approach to designing web services that prioritizes the health of our home planet. At its core is a focus on reducing carbon emissions and energy consumption” (Greenwood, 2021, p. 5). Dentro de este concepto, definimos el concepto de Green UX: “enfoque de diseño centrado en la sostenibilidad ambiental en el desarrollo de experiencias de usuario” (Doonamis, 2023, en línea). De esta forma, un diseñador que trabaja bajo este enfoque crea productos digitales pensando de qué formas puede reducir esas emisiones. Greenwood, junto a otros profesionales del sector digital, elaboró seis principios por los que se debe guiar un diseñador web para que su producto digital sea sostenible: 1.4. Diseño UI/UX: sostenible vs. tradicional 1Limpio: asegura que para que los proyectos sean limpios debemos asegurarnos de que el hosting que vayamos a utilizar tenga un completo compromiso de uso de energía renovable en sus centros de datos. 2Eficiente: afirma que, aunque lo fácil es asumir que el aumento del consumo de datos es culpa de que los usuarios consumen cada vez más y más internet, la realidad es que las páginas web y aplicaciones son cada vez menos eficientes. Introducción a la sostenibilidad en la Web 23 3Abierto: para reducir la contaminación, es necesario que muchos profesionales sean conscientes de esta realidad y apliquen las prácticas que ayudan a crear productos digitales más sostenibles. Además, se debe normalizar la sostenibilidad digital como un proceso más en la creación de proyectos digitales, como ya se hace con el SEO o la experiencia de usuario. 4Honesto: muchas marcas practican greenwashing (una mala práctica de las marcas para vender la sostenibilidad como uno de sus valores cuando no es real) para generar una buena imagen, y que no hace una aportación sustancial a la búsqueda de la sostenibilidad en la Web. 5Regenerativo: se ha ignorado el problema tanto tiempo que ya no es suficiente con no causar daño para alcanzar la sostenibilidad, sino que hay que llevar a cabo acciones que regenerativas. 6Resiliente: se considera una web resiliente aquella en la que su información clave y servicios ofrecidos en ella son accesibles incluso si hay muy poca cobertura, en cualquier dispositivo, bajo cualquier condición (Greenwood, 2021). De esta forma, si el sistema falla, el usuario podrá acceder a los servicios mínimos igualmente. Tanto el diseño UI/UX sostenible como el diseñador web “tradicional” buscan satisfacer las necesidades del cliente creando experiencias únicas y diseños innovadores, pero mientras que el diseñador web tradicional solo tiene en cuenta estos aspectos, el diseñador UI/UX sostenible va más allá y plantea un diseño que loga el equilibrio entre una experiencia e interfaz de usuario exitosas con una baja emisión de CO2, y que, además, sea inclusivo. Introducción a la sostenibilidad en la Web 24 1.5. Diseño web inclusivo Si rescatamos la definición de sostenibilidad dada por la ONU en 1987, podemos afirmar que para que un producto digital pueda ser considerado “sostenible”, no solo basta con que esté concienciado con el medio ambiente, sino que debe ir más allá, y asumir responsabilidades a nivel social. Cada decisión tomada en torno a la elaboración de un producto digital, como puede ser una página web, conlleva el incluir o excluir usuarios. “Inclusive design is a methodology that draws on and allows for the full range of human diversity in various digital environments. […] It allows designers to creative products that the widest range of users find user-friendly” (Rónay, 2023, en línea). La multinacional tecnológica Microsoft cuenta con un apartado en su página web donde habla de este concepto, afirmando que la exclusión se da cuando intentamos resolver problemas utilizando exclusivamente nuestra propia experiencia. Además, enuncia tres principios que se deben tener en cuenta para que un diseño sea inclusivo: 1Reconocer la exclusión: reconocemos el sesgo y las exclusiones que ocurren por desconexiones entre las personas y la experiencia. 2Aprender de la diversidad: el diseño inclusivo prioriza a las personas a lo largo del proceso. Las perspectivas innovadoras y diversas que aporten son la clave para una percepción fiel de la situación. Introducción a la sostenibilidad en la Web 25 3Soluciónalo para uno, y que abarque a varios: todo el mundo tiene capacidades y límites. El crear productos para personas con discapacidades permanentes crea resultados que benefician a todo el mundo. Gráfica 2. Esquema de tipos de discapacidades Fuente: Manual Inclusive Microsoft Design Además, se debe aclarar que el diseño inclusivo, al hablar de discapacidades, no se refiere a la situación de salud concreta de las personas. Puede ser que sea una discapacidad permanente, como tener un solo brazo, o una temporal. Un ejemplo muy acertado es que el que aporta Microsoft en su manual Inclusive Microsoft Design (véase gráfica 2). Introducción a la sostenibilidad en la Web 32 Por ello, lo óptimo es limitar el uso de imágenes y vídeos en nuestra página web. No obstante, si deben ser obligatoriamente incluidas, existen diferentes alternativas para reducir su aportación de emisiones de carbono: Se puede reducir su peso usando formatos más eficientes y herramientas de compresión para optimizarlas. El formato más eficiente para las fotografías es WEBP. No obstante, en el caso de que la imagen use pocos bloques de colores, como pueden ser iconos o logos, los formatos más eficientes son PNG o GIF. En el caso de los vídeos, el formato MP4 es el más eficiente, incluso más que el formato GIF. Además, el MP4 es más inclusivo y accesible ya que permite la descripción de audio. Incluso eligiendo el formato correcto de ambos tipos de archivos, puede ser que éste sea más grande de lo que necesita. Por eso, también es importante usar herramientas de compresión, como Shortpixel o ImageOptim, para reducir su tamaño sin que afecte a su calidad. El tamaño de una imagen es proporcional a los detalles que tiene. En el caso de imágenes en JPEG, desenfocar ciertas zonas de la imagen hará que se reduzca el número de variaciones entre los pixeles y como consecuencia pese menos. Un ejemplo podría ser en el caso de que fuera un retrato o quisiéramos mostrar un objeto o personaje central, se pueden difuminar los bordes. De esta forma, el usuario seguirá recibiendo la información y el archivo pesará mucho menos. 1Su tamaño 2Desenfoque de fotografías Prácticas para el diseño web sostenible 33 Una buena alternativa a las fotografías es el uso de imágenes vectoriales (formato SVG). Es importante que a la hora de usar archivos SVG en las páginas web, eliminemos las capas innecesarias en Adobe Illustrator para que así el archivo pese menos. En los últimos años, la tecnología más usada para las pantallas es OLED, que ilumina cada pixel individualmente. Por ello, son los colores más oscuros los que gastan menos energía. De hecho, el color negro es el más eficiente, ya que supone que un gran número de píxeles estén apagados. En cuanto al formato RGB, es el azul el que más consume, más concretamente, un 25% más que el rojo o el verde. Por ello, a la hora de pensar en una paleta de colores para nuestro diseño web, debemos intentar evitar los azules y priorizar los colores oscuros. Los archivos imágenes con muchos colores suelen pesar bastante, por ello, también es recomendable que, dentro de lo posible, las imágenes sean monocromáticas o limiten la variación de colores. La mejor opción es convertir las imágenes en blanco y negro. Aunque el motion es necesario para una buena experiencia de usuario y que la página web tenga vida, el abuso de éste puede provocar el efecto contrario. Además, usan una gran cantidad de energía. Por ello, a la hora de diseñar una página web sostenible, debemos limitar su uso. Otra opción es darle ese poder al usuario, creando un modo motions off para ahorrar esa energía. 3Imágenes vectoriales Color Motion Prácticas para el diseño web sostenible 34 En términos de emisiones de carbono, los vídeos online son de lejos los que más emiten. Además, esto está creciendo ya que cada vez estamos más acostumbrados a consumir la información en formato de vídeo. De hecho, un informe de Statista afirma que en 2024 ya hay más de 3 billones de usuarios consumiendo vídeos en streaming (The Social Shepherd, 2024). Debido a su alto consumo de energía, la mejor opción es evitarlos si es posible a la hora de diseñar nuestra página web. Aun así, si el uso de vídeo es necesario, existen ciertas pautas para reducir su consumo de energía: Vídeos online 1Evitar vídeos de auto reproducción (como, por ejemplo, usarlos como fondo y que se reproduzcan constantemente). No solo emiten una gran cantidad de CO2, sino que también pueden afectar a aquellos usuarios con trastornos sensoriales o sensibilidad al movimiento, afectando así a la experiencia de usuario. Además, es contraproducente con el diseño inclusivo y la accesibilidad. La mejor opción es incluir un botón de reproducción para que quien realmente quiera consumir el vídeo pueda hacerlo. 2Optimizar el vídeo, reduciendo su calidad de forma que no sea perceptible por parte del usuario pero que se haya reducido considerablemente su tamaño. 3Acortar el vídeo. Evitar el dejar segundos innecesarios o que el vídeo sea innecesariamente largo. Prácticas para el diseño web sostenible 35 Este tipo de formato es muy ineficiente, ya que guarda cada fotograma como una imagen GIF diferente y los junta en un archivo que es demasiado grande. Por eso, si necesitamos añadir una animación de este tipo, la mejor opción es utilizar el formato WEBP, que también soporta animaciones. La opción más eficiente es usar tipografías que ya están pre-instaladas en el servidor, como Arial o Times New Roman. Éstas no necesitan realizar ninguna petición al servidor y por tanto no tienen que transferir datos. En contraposición, puede limitar la creatividad y generar diseños muy parecidos a otras páginas web. Otra recomendación es no utilizar tipografías que vengan de licencias, como, por ejemplo, Adobe Fonts, ya que el servidor tendrá que realizar varias peticiones para que se muestre en la página web. A nivel diseño, debemos limitar el uso de variantes de tipografía en nuestra página web. En vez de utilizar una negrita, semi-negrita, estándar, fina, etc., se debe limitar a tres variantes. Animaciones GIF Tipografías 2.2. Beneficios de la Web sostenible para las marcas La expansión a gran escala del calentamiento global, las inundaciones, los incendios forestales, la contaminación de los océanos, el derretimiento de los glaciares, la destrucción de la capa de ozono y la disminución de la biodiversidad han transformado los problemas medioambientales locales en una crisis mundial. Este panorama ha generado una creciente demanda de productos respetuosos con el medio ambiente en la sociedad, es decir, productos ecológicos (Astakhova et al., 2020). Prácticas para el diseño web sostenible 36 Por esta razón, hay una mayor preocupación en la sociedad por llevar a cabo prácticas que respeten el medio ambiente y contribuyan a la erradicación de la crisis climática. Son muchas las empresas que han comenzado a tener en cuenta los aspectos ambientales, incluso poniendo la sostenibilidad como su principal pilar en sus modelos de negocio para asegurar que son viables, pero hay muchas otras que aprovechan la tendencia, “disfrazándose” de sostenibles para explotar a su beneficio esta conciencia ambiental que no para de crecer en nuestra sociedad (Vizcaíno, 2022). A partir de aquí, es necesario mencionar el concepto de greenwashing: “(from English green and whitewash - whitening, or green camouflage) is a form of ecological marketing related to the environmental positioning of enterprises, when they spend significant resources on convincing customers of their eco-friendliness, rather than concentrating on real environmental initiatives” (Astakhova et al., 2020, p. 1). El greenwashing no supone, en ningún aspecto, algo positivo para la empresa. Desde el punto de vista de los consumidores, podemos afirmar que cada vez tienen acceso a más información en un mercado completamente globalizado. Esto produce que sea muy fácil y rápido para ellos el descubrir cuando una empresa lo está practicando. La difusión de afirmaciones “verdes” que son engañosas hace que las características medioambientales de un producto pierdan importancia. Esto crea escepticismo y falta de confianza, lo que dificulta que los consumidores identifiquen qué productos son realmente sostenibles. A un mayor nivel, esto afecta directamente al medio ambiente, ya que las personas podrían descartar de entrada cualquier producto que realmente sea sostenible. Como resultado, no podrán ajustar sus hábitos de consumo de manera que sean menos perjudiciales para el medio ambiente. Prácticas para el diseño web sostenible 37 Es por eso que las empresas deben comprometerse a llevar a cabo prácticas de sostenibilidad que sean honestas y transparentes, porque además, estas les aportarán muchos beneficios, como por ejemplo, económicos: aunque a corto plazo supone un gasto, está demostrado que a largo plazo supone un gran ahorro en los costes de producción y una gran diferenciación en el mercado, además de una notable mejora de la percepción pública de la empresa y sus respectivas marcas y de las relaciones con sus stakeholders (Alejos, 2013). Si hablamos de la implementación de productos digitales sostenibles por parte de las empresas, podemos seguir afirmando que tendrá un impacto positivo tanto en su imagen como en sus beneficios. Comenzando por aspectos más técnicos, las páginas web sostenibles son mucho más eficientes. Por ello, las posibilidades de que la página tarde en cargar o directamente no cargue se reducen considerablemente. Hay varios estudios que afirman que una página que tarda mucho en cargar hace que se pierda una gran cantidad de visitas por parte de los usuarios. Además, los consumidores podrán acceder a la información de la empresa o el producto incluso teniendo una conexión débil. Esto es un aspecto muy ventajoso para la experiencia de usuario: “Many website owners are aware of the importance of good UX in delivering high conversion rates, high customer satisfaction, and positive brand perception. By prioritizing streamlined, intuitive user journeys, fast load times, and offline functionality, we can create great experiences for our users no matter where they are. This leads to better commercial outcomes for the website owner and reduces carbon emissions in the process” (Greenwood, 2021, p. 94). Prácticas para el diseño web sostenible 38 Además, el hecho de que la página pese mucho menos que una que no es sostenible, permite a la empresa contratar menos espacio en el servidor para almacenar los datos de sus productos digitales, generando así menos costes. Como ya hemos mencionado en el capítulo anterior, una web sostenible también supone que sea accesible e inclusiva. Estas dos características permiten que los sitios web sean accesibles en diversos dispositivos, ya sean móviles, relojes inteligentes, smart TVs u otros dispositivos con diferentes configuraciones, pantallas reducidas, etc. (Díaz et al., 2020). Usar la sostenibilidad como motor de los proyectos ayudará a crear productos accesibles para una mayor cantidad de grupos. Otra ventaja de construir una página web sostenible es que ayuda a posicionarse en el ranking de las búsquedas orgánicas de los motores de búsqueda (SEO). Un ejemplo es la rapidez con la que carga la página, que como ya hemos mencionado en párrafos anteriores, es una ventaja de las páginas que emiten menor cantidad de CO2. Además, las páginas sostenibles cuentan con más seguridad, ya que son estáticas y hacen uso de firewalls para evitar troyanos o bots, que a la vez que reduce esas emisiones, hace la página más difícil de jaquear. Por último, el uso de alojamientos o hostings que funcionen con energía renovable. Aunque no beneficie directamente a la empresa, en términos económicos, sí que puede contribuir a su imagen ya que tienen la posibilidad de poner en su página web que el hosting con el que está funcionando utiliza energía renovable. Este widget se consigue a través herramientas como Ecograder, Website Carbon Calculator o The Green Web Foundation database (Greenwood, 2021). Prácticas para el diseño web sostenible 39 En definitiva, a priori, a las empresas les puede parecer que pensar en la sostenibilidad como un pilar en sus productos digitales puede ser un gasto, pero la realidad es que aporta grandes beneficios en diferentes áreas, contribuyendo además a una buena imagen para sus stakeholders. Otra de las ventajas de tener conciencia sostenible en el diseño de productos digitales, es que contribuye a los Objetivos de Desarrollo Sostenible elaborados por la ONU. Para alcanzar las metas que proponen estos objetivos, las empresas juegan un papel principal. Es obvio que la contaminación causa importantes estragos en el planeta en el que vivimos, y que si no se toman medidas solo irá a peor. Junto a ello, las notables injusticias sociales y económicas que se viven, y que muchas de ellas impiden que se alcance el objetivo de la sostenibilidad. Por ello, en 2015, 193 países aprobaron lo que se conoce como La Agenda 2030. En ella, se recogen acciones guiadas por los Objetivos de Desarrollo Sostenible (ODS). “Los Objetivos de Desarrollo Sostenible (ODS), también conocidos como Objetivos Globales, fueron adoptados por las Naciones Unidas en 2015 como un llamamiento universal para poner fin a la pobreza, proteger el planeta y garantizar que para el 2030 todas las personas disfruten de paz y prosperidad” (UNDP, s. f.). Son 17 los objetivos que intentan abarcar todas las dimensiones ambientales y sociales en relación con el desarrollo sostenible. En este capítulo nos centraremos en aquellos que impactan directamente en el desarrollo de páginas web sostenibles. Estos son el 7, 11, 12 y 13. 2.3. Contribución a los ODS Prácticas para el diseño web sostenible 40 La necesidad de acceder a energía no ha hecho más que crecer a lo largo de los años, ya que está estrechamente ligado al crecimiento de la población y al desarrollo de tecnologías que requieren el uso de energías para funcionar. Por ello, todas las partes del mundo deben tener acceso a energía para mejorar su calidad de vida y sus condiciones socioeconómicas (Belge et al., 2022). Esa es la meta central del objetivo siete: “El Objetivo 7 pretende garantizar el acceso a una energía limpia y asequible, clave para el desarrollo de la agricultura, las empresas, las comunicaciones, la educación, la sanidad y el transporte” (ONU, s.f.). Las páginas web sostenibles juegan un papel clave en la persecución de este objetivo, al tener como uno de sus principios el elegir alojamientos web con energía sostenible para almacenar sus datos. Como se mencionó en el primer capítulo de este marco teórico, Internet supone el 2% del gasto de energía a nivel global. Si la sociedad comienza a tener en cuenta los principios de los productos digitales sostenibles a la hora de crearlos, contribuirá directamente a la meta de conseguir una energía asequible y no contaminante. En relación con este objetivo, es necesario destacar el siguiente texto: “Los problemas que enfrentan las ciudades se pueden vencer de manera que les permita seguir prosperando y creciendo, y al mismo tiempo aprovechar mejor los recursos y reducir la contaminación y la pobreza. El futuro que queremos incluye a ciudades de oportunidades, con acceso a servicios básicos, energía, vivienda, transporte y más facilidades para todos” (Naciones Unidas, 2018, p.51). Energía asequible y no contaminante (ODS 7) Ciudades y comunidades sostenibles (ODS 11) Prácticas para el diseño web sostenible 41 Y es que las páginas web sostenibles juegan un papel fundamental en la consecución de este objetivo. Como se ha mencionado en el epígrafe “prácticas para un diseño web sostenible”, los sitios web con una baja emisión de CO2 permiten que sus elementos se carguen a mayor velocidad y que se pueda acceder a ellas incluso con una baja señal. Consecuentemente, da acceso a una mayor parte de la población a información y recursos que dan vía a servicios básicos y otras facilidades. También es necesario hablar del papel que juegan la accesibilidad y el diseño inclusivo, ya que ambas prácticas tienen en cuenta el que estos servicios puedan ser accesibles para cualquier usuario, independientemente de sus situación temporal o permanente. Las páginas web sostenibles juegan un papel principal en este objetivo, ya que la máxima de crear productos digitales bajos en emisiones está en la reducción de recursos para crear sitios web eficientes y poco contaminantes. “El objetivo del consumo y la producción sostenibles es hacer más y mejores cosas con menos recursos, incrementando las ganancias netas de bienestar de las actividades económicas mediante la reducción de la utilización de los recursos, la degradación y la contaminación durante todo el ciclo de vida, logrando al mismo tiempo una mejor calidad de vida. En ese proceso participan distintos interesados, entre ellos empresas, consumidores, encargados de la formulación de políticas, investigadores, científicos, minoristas, medios de comunicación y organismos de cooperación para el desarrollo” (Naciones Unidas, 2018). Es necesario recordar por ello que el Green UX se centra reducir el impacto en el medio ambiente de los productos digitales, desde la concepción de su Producción y consumo responsables (ODS 12) Prácticas para el diseño web sostenible 48 Sin embargo, no solo se centran en vender café, sino que también es marca de ropa, es soporte publicitario y otras muchas veces cumple la función de una agencia creativa (Reason Why, 2023, en línea). “GoodNews nació en septiembre de 2020 con la aspiración de revivir los quioscos de barrio, pero en un contexto económico y social marcado por el impacto de la pandemia y caracterizado por una atmósfera de incertidumbre y desazón” (Reason Why, 2023, en línea). La misión de GoodNews Coffee se centra en generar un buen ambiente, o como ellos lo llaman, good vibes, a través de un café que está éticamente cultivado y es de alta calidad. Su pretensión ha sido, desde sus inicios, llevar el buen rollo a todos los barrios (GoodNews, s.f., online). En cuanto a la visión, se centra en el poder extender esta filosofía a todos los puntos posibles. Hasta ahora, están presentes Barcelona, Madrid y París, pero pretenden seguir creciendo. Además, intentan hacer llegar su filosofía al mayor número de público posible a través de colaboración con marcas, que van desde el sector de moda, como Nude Project, hasta marcas como Bumble o Uber. Por último, en su página web (https://goodnews.coffee/) señalan cuatro valores que marcan su cultura empresarial, a los que han llamado good values: Filosofía de marca 1Good coffee: Para ellos es imprescindible que el produc- to que ofrecen sea de alta calidad y que esté éticamente cultivado. Caso GoodNews Coffee 49 2Good vibes: el buen rollo es su principal razón de ser, e intentan promover una cultura en la que este buen rollo defina cada una de las experiencias de GoodNews. 3Good health: apuestan en cada una de sus decisiones por transmitir un estilo de vida saludable creando productos de carácter funcional que transformen el ritual de café del público de la marca. 4Good planet: GoodNews se encuentra dentro de la categoría B Corp, que, entre otras cuestiones, persigue el consumo responsable y el movimiento de zero waste. Es por todo ello que se puede afirmar que GoodNews es una marca que tiene claramente definidos sus valores, y que saben transmitirlos a través de su comunicación y gestión empresarial, bridándole ese éxito que ya es palpable. GoodNews Coffee es una empresa cuyo origen es reciente, y debido al público al que se dirige, que es también joven, debe estar al tanto de aquello que demandan las nuevas generaciones para poder cumplir sus expectativas. Si nos centramos en la generación Z, podemos hablar de que ha habido una evolución respecto a las generaciones anteriores en cuanto al consumismo: se ha pasado de autocompasión a la autocomprensión. En este sentido, encontramos una generación que ha vivido crisis y momentos críticos y piensan que la sostenibilidad, aunque está llena de tensiones, supone también un crecimiento personal hacia una mejor versión de ellos mismos (Mazinn y 21gramos, 2021). 3.2. Trayectoria de la marca en relación con la sostenibilidad Caso GoodNews Coffee 50 Esto es precisamente en lo que se centra GoodNews, en lanzar un mensaje positivo e inspirador a través de la idea de ofrecer un producto y una experiencia que hace bien al cliente y al planeta. Es por eso mismo que decidieron volverse una empresa B Corp, de mano de B Lab, una asociación sin ánimo de lucro que promueve el movimiento a través del que las empresas se comprometen con la sostenibilidad en todos los aspectos de su negocio. “Para lograr esta visión, crea estándares, políticas, herramientas y programas para las empresas, y verifica aquellas compañías que, conocidas como Empresas B Corp, lideran la transformación hacia un nuevo paradigma económico” (B Corp Spain, 2024). Entre las diferentes acciones que llevan a cabo para alcanzar este sello distintivo de sostenibilidad, se puede destacar su acción a través de plantaciones y caficultores que usan procesos de carácter sostenible, centrándose en el planeta, el trabajo infantil y las comunidades locales (Restauración News, 2023). En definitiva, GoodNews Coffee es una empresa que se ha comprometido con el medio ambiente desde sus orígenes. Esto lo puede demostrar a través de la etiqueta B Corp, que pocas empresas consiguen. Ya que esta filosofía está muy alineada con la del público a la que se dirige, que es elementalmente joven, no dudan en transmitirlo como uno de sus principales valores de marca para reforzar su filosofía y cultura empresariales. No obstante, en el ámbito que nos concierne en este trabajo, que es el de sostenibilidad digital, la marca no cumple con esas expectativas de zero waste. Caso GoodNews Coffee 51 4 OBJETIVOS OB1 Analizar el diseño de la página web de GoodNews Coffee en términos de sostenibilidad digital. OB1.1 Identificar y clasificar las diferentes estructuras y elementos desde la perspectiva de contaminación energética en el diseño de la web de GoodNews. OB1.2 Identificar y analizar las características desde la perspectiva del diseño inclusivo. OB2 Realizar una propuesta de mejora para la página web de GoodNews Coffee desde la perspectiva del diseño web sostenible. 52 5 METODOLOGÍA El procedimiento para hacer un análisis de la sostenibilidad del sitio web de GoodNews Coffee y su posterior propuesta de mejora se llevará a cabo a partir de la siguiente metodología: Primero, se analizará la sostenibilidad de la página web actual de GoodNews Coffee mediante tres calculadoras de emisiones de CO2 que determinen los siguientes descritos en la tabla 1. La razón por la que se medirá en tres calculadoras diferentes será para asegurar que el resultado sea lo más fiable posible. Estas calculadoras son: Website Carbon Calculator, Beacon y Ecograde. Los datos que extraeremos de estas calculadoras en formato de tabla estarán dispuestos de la siguiente forma: Tabla 1. Comparación de datos de emisión de gases de las calculadoras Website Carbon Calculator, Beacon y Ecograde Fuente: Elaboración propia 53 Teniendo en cuenta esta información, se realizará a continuación una auditoría basada en tests heurísticos dispuestos en forma de fichas de análisis para clasificar y medir los diferentes elementos que se disponen en el sitio web y aquellas características que sean relevantes para medir su grado de sostenibilidad. La auditoría de sostenibilidad se dividirá en dos bloques principales: contaminación energética (centrándonos en la cantidad de emisión de CO2 a la atmósfera) e inclusividad (centrándonos en las características de accesibilidad), ya que, de acuerdo con la ONU, para que un producto digital sea considerado “sostenible” no solo basta con que esté concienciado con el medio ambiente, sino que también asuma responsabilidades a nivel social. Estos tests heurísticos estarán dispuestos en forma de tablas divididas por categorías. En cada categoría, se describirán ciertas características para poder recoger y medir toda la información necesaria. Estas tablas se utilizarán una primera vez para analizar el MODELO A (página original de GoodNews Coffee) y de nuevo para comparar esos datos con los nuevos sacados del prototipado (MODELO B). Las categorías, divididas en los bloques cantidad de emisión de gases e inclusividad, serán las siguientes: Metodología 54 Las categorías de este bloque están basadas en aquellos elementos que contaminan en los sitios web y sus respectivas características descritas por Greenwood (2021). Es necesario señalar que aquellas características que tengan estricta relación con el código del sitio web estarán escritas en azul. Tabla 2. Tabla de clasificación de imágenes Fuente: Elaboración propia Bloque I: contaminación energética Metodología 55 Tabla 4. Tabla de clasificación de vídeos Fuente: Elaboración propia Tabla 3. Tabla de clasificación de colores Fuente: Elaboración propia Metodología 56 Tabla 6. Tabla de clasificación de tipografías Fuente: Elaboración propia Tabla 5. Tabla de clasificación de animaciones Fuente: Elaboración propia Metodología 57 Como no existe un test heurístico que evalúe la inclusividad de los sitios web, he elaborado uno propio basado en los requisitos para elaborar un diseño inclusivo y sostenible de Harari y colaboradores (2020): Bloque II: Inclusividad Tabla 7. Tabla heurística de inclusividad y accesibilidad web Fuente: Elaboración propia Metodología 64 Ilustraciones 8,9 y 10. Imágenes de producto de GoodNews Coffee Fuente: Sitio web de GoodNews Coffee Por otro lado, un 71,24% de las fotografías son JPG, frente a otros formatos que son mucho menos contaminantes, como el formato WEBP o GIF, que presentan un 2,61% y un 0% del total de las imágenes respectivamente. Por último, como se ha comentado en las observaciones de la ficha de datos, hay varias imágenes en formato PNG que podrían ser vectoriales y por lo tanto presentarse en formato SVG, que es mucho más eficiente en términos de energía. Resultados 65 De acuerdo con Greenwood (2021), el color más contaminante en las pantallas OLED es el azul, seguido del verde. En este caso, observamos como el color más presente del sistema RGB en el sitio web es el rojo (82,75% de media), seguido del verde (78,69%) y del azul (65,75%). No obstante, no son datos que podamos utilizar para medir el nivel de contaminación de los colores ya que en aquellos que tienen más presencia en la página (colores #1 y #2) tienen un alto porcentaje de todos los colores, sobre todo el color principal (#2) que se acerca al 100% en los tres colores. Esto provoca que el gasto de energía sea muy alto. Tabla 11. Tabla de clasificación de colores del sitio web de GoodNews Coffee Ilustración 11. Pantalla Principal del sitio web de GoodNews Coffe. Fuente: sitio web de GoodNews Coffee Fuente: Elaboración propia Resultados 66 Como se ha realizado en el caso de las imágenes, se ha vuelto a elaborar una hoja de cálculos a modo de base de datos para recoger diferentes datos respecto a los vídeos (ver en el anexo). A partir de ésta, se ha elaborado la siguiente ficha de datos: Los vídeos también son un recurso muy frecuente en el sitio web de Good- News, apareciendo en la gran mayoría de sus secciones. Aunque sí es cier- to que aporta dinamismo al diseño, de acuerdo con Greenwood (2021) este formato supone un gran gasto de energía. Otro de los grandes problemas sumados al formato es que todos los vídeos están en modo “reproducción automática”, por lo que su gasto de energía es aún mayor. Tabla 12. Tabla de clasificación de vídeos del sitio web de GoodNews Coffee Fuente: Elaboración propia Resultados 67 Otro factor que produce que estos archivos pesen más de lo necesario es, al igual que las imágenes, la diferencia entre su tamaño intrínseco y su tamaño renderizado. Por ello, estos archivos ocupan un espacio que realmente no se está utilizando. Además, aunque el formato GIF solo se utiliza en un 9,52% frente al total de vídeos, es mucho más contaminante, ya que, de acuerdo con Greenwood (2021), este tipo de formato es muy ineficiente, ya que guarda cada fotograma como una imagen GIF diferente y los junta en un archivo que es bastante grande. Es por ello que si necesitamos añadir una animación de este tipo, la mejor opción es utilizar el formato WEBP, que también soporta animaciones. Tabla 13. Tabla de clasificación de animaciones del sitio web de GoodNews Coffee Fuente: Elaboración propia Resultados 68 El sitio web no abusa de las animaciones, lo que es un aspecto muy positivo en cuanto a sostenibilidad. No obstante, el hecho de que la mayoría no puedan ser controladas por el usuario (es decir, que éste tenga el poder de desactivarlas) hace que no sea tan inclusivo, aunque eso lo discutiremos más en profundidad en el siguiente bloque de la auditoría. Aun así, El hecho de que el sitio web sea principalmente estático (en términos de estructura) mejora su eficiencia energética, aumentando su velocidad de carga considerablemente. En la página web encontramos únicamente dos tipografías, lo que aporta coherencia visual. Por otro lado, el uso de variantes es correcto, ya que de acuerdo con GreenWood (2021), debemos limitar las variantes tipográficas a tres para poder considerarlo sostenible. En cambio, ambas fuentes provienen de licencias y no están preinstaladas en el servidor, por lo que éste tiene que hacer varias peticiones para que cargue, añadiendo ese gasto de energía. En definitiva, el sitio web abusa de elementos y recursos que son altamente contaminantes: colores demasiado brillantes, frecuente uso de imágenes y vídeos o tipografías que no están preinstaladas en el servidor. Todo esto confirma el resultado inicial por parte de las tres calculadoras de que el sitio web de GoodNews Coffee tiene un alto nivel de emisión de CO2. Tabla 14. Tabla de clasificación de tipografías del sitio web de GoodNews Coffee Fuente: Elaboración propia Resultados 69 Bloque II: Inclusividad Tabla 15. Tabla heurística de inclusividad y accesibilidad del sitio web de GoodNews Coffee Fuente. Elaboración propia Resultados 70 En términos generales, la accesibilidad que presenta el sitio web es buena, y por lo tanto su inclusividad. Sin embargo, podrían aplicarse bastantes mejoras. El hecho de que las descripciones de las fotografías y vídeos no sean fieles al contenido provoca gran confusión al usuario. Esto es de gran importancia teniendo en cuenta la alta frecuencia en la que encontramos este recurso en el sitio web. Otro factor importante para considerar el sitio web como inclusivo es la capacidad que éste tiene de darle poder al usuario para poder personalizar el sitio web a su gusto. En este caso, el usuario no puede desactivar las animaciones ni pausar los vídeos. Tampoco existe la opción de cambiar la interfaz en modo “oscuro” para reducir el consumo de energía. Como conclusión, no se puede considerar la página web como inclusiva, ya que incumple los principios HE1, HE2, HE3, HE7, HE8, HE9, HE10, HE11 y HE17, por lo tanto, deben aplicarse cambios en la accesibilidad respecto a estos para poder mejorar la inclusividad del sitio web. A partir de este análisis, se procede a elaborar y analizar la propuesta de mejora del sitio web de GoodNews Coffee desde la perspectiva de la sostenibilidad. Con el fin de mejorar todos los elementos analizados en la auditoría, se presenta una propuesta de mejora en términos de sostenibilidad mediante el diseño de un prototipo (véase ilustración 12). Se debe tener en cuenta que al ser un prototipo puede que algunas funciones del sitio web no funcionen o no estén activadas. Este prototipo no está pensado para ser una sustitución de la página web original, sino para añadirla como opción sostenible (es decir, que el propio usuario pueda decidir navegar en la página web original o en el modelo de bajo impacto). Resultados 71 Ilustración 12. Código QR del prototipo para la propuesta de mejora del sitio web de GoodNews Coffee Fuente. Elaboración propia A partir de esta propuesta de diseño web de bajo impacto para GoodNews Coffee, podemos establecer la página web original de la marca como “MODELO A” y la propuesta de mejora como “MODELO B”. Por tanto, compararemos los datos de ambos modelos haciendo uso de nuevo de las fichas de análisis, a la vez que se mostrarán aquellos cambios significativos del nuevo diseño. Todos los recursos visuales creados para este prototipo se encuentran en el anexo de este trabajo. Resultados 72 Bloque I: Contaminación energética No ha habido ningún cambio de peso en el uso de los colores de la página, ya que al ser el azul el color más contaminante y no estar muy presente en el diseño web, no ha sido necesario cambiar los colores. Aunque el uso de colores más oscuros habría contribuido a bajar el impacto de la página, el hecho de aplicar cambios más significantes como el uso de imágenes o la tipografía permite que se puedan mantener la misma gama de colores que en el MODE- Tabla 16. Tabla de clasificación de colores del sitio web de GoodNews Coffe y su propuesta de mejora. Fuente. Elaboración propia Resultados 73 LO A y contribuir así a mantener la identidad visual de la marca. No obstante, sí que se ha reducido considerablemente el uso del color #9, ya que actuaba como color contraste del #2, y al ser tan similares, suponía una barrera para aquellas personas con discapacidad en la vista. Por ello, ha sido sustituido (en su mayoría) por el color #6. Un ejemplo de sustitución ha sido en aquellos cuadros de información cuyo contraste no era notorio. En el nuevo diseño observamos ese contraste: De acuerdo con Greenwood (2021), las imágenes están en el pódium de los formatos que más contaminan en los sitios web. Al ser una página web muy visual y que vende productos, es difícil reducir radicalmente el número de imágenes. Por ello, la propuesta consiste en convertir la gran mayoría de imágenes en formato SVG, es decir, ilustraciones vectoriales. De esta forma, nos encontramos en esta versión del sitio web de GoodNews todos los productos en formato de ilustración vectorial y la sustución de algunas imágenes por ilustraciones. Ilustración 13. Sección “Our Story” de la propuesta del sitio web de GoodNews Coffee. Fuente. Elaboración propia Resultados 80 En la siguiente ilustración observamos como se dispondría en el sitio web: Ilustración 22. Pasos para usar el producto Focus Coffee Bost en la propuesta de mejora del sitio web de GoodNews Coffee. Fuente. Elaboración propia Las animaciones, aunque en el caso del MODELO A no son muchas, consumen energía si están en bucle. Además, al no darle el poder al usuario de decidir si las quiere desactivadas o no, empeora la inclusividad de ésta. También, las animaciones que presentaba el sitio web no aportaban mucho valor a la comunicación de la información. Por lo tanto, para la versión sostenible han sido eliminadas y en algunos casos cambiadas por otras con menor impacto. Por ello, sí que se pueden observar pequeñas animaciones en cuanto a cambio de colores o descubrimiento de fotos con la función hover, de forma que el usuario decide si quiere activarlas o no pasando el cursor por encima. Resultados 81 Tabla 19. Tabla de clasificación de animaciones del sitio web de GoodNews Coffe y su propuesta de mejora. Fuente. Elaboración propia Una de las animaciones incluidas consiste en disponer cuadros de información con texto y que si pasas el cursor por encima te muestra la imagen, para ahorrar de esta forma el gasto energético que supone que esté la imagen estática en todo momento. Resultados 82 Ilustración 23. Sección “Good Collabs” de la propuesta del sitio web de GoodNews Coffee. Fuente. Elaboración propia Similar a esta animación, se ha aplicado el poner a color aquellas imágenes por las que pasa el cursor, como se puede observar en la ilustración 19. En el caso de las tipografías, ambas han sido sustituidas por fuentes muy similares que dispone Google Fonts, para las que no se necesita realizar una petición al servidor. No obstante, es comprensible que se necesite utilizar Recoleta, ya que es la fuente principal de la marca. En cambio, sugiero cambiar Azo Sans por Lato, ya que es prácticamente igual en términos visuales, pero mucho más sostenible. Tabla 20. Tabla de clasificación de tipografías del sitio web de GoodNews Coffe y su propuesta de mejora. Fuente. Elaboración propia Resultados 83 Respecto al número de variantes, se han mantenido, ya que, según Greenwood (2021), un número aceptable de variantes se encuentra entre 1 y 3. En la siguiente imagen, observamos el uso de las diferentes tipografías y sus variantes: Ilustración 24. Sección “GoodNews En Tu Oficina” de la propuesta del sitio web de GoodNews Coffee. Fuente. Elaboración propia Ilustración 25. Sección “Good Tea” de la propuesta del sitio web de GoodNews Coffee. Fuente. Elaboración propia Resultados 84 Bloque II: Inclusividad Tabla 21. Tabla heurística de inclusividad y accesibilidad del sitio web de GoodNews Coffee y su propuesta de mejora. Fuente. Elaboración propia Resultados 85 De las nueve heurísticas que no cumplía el modelo A (HE1, HE2, HE3, HE7, HE8, HE9, HE10, HE11 y HE17), en el MODELO B se han solucionado cinco (HE1, HE2, HE3, HE7 y HE17). Como se ha señalado en los comentarios de la ficha de análisis, aquellas heurísticas que siguen sin cumplirse son debido a la imposibilidad de hacer cambios en un modelo de prototipado. En cuanto a los botones, aquellos enlaces que eran más complicados de identificar, se les ha añadido contraste para que se vean más fácilmente. Aun así, se recomienda añadir descripciones tanto a las imágenes como a los vídeos para mejorar la inclusividad del sitio web, así como añadir pantallas de confirmación para evitar errores por parte del cliente que puede conducir a una mala experiencia de usuario. Ilustración 26. Sección “Good Tea” de la propuesta del sitio web de GoodNews Coffee. Fuente. Elaboración propia Resultados 86 7 CONCLUSIONES Tras haber recogido información sobre el diseño web sostenible y sus diferentes ámbitos, herramientas, principios y métodos, y haberlo aplicado en un caso práctico mediante el prototipado de una página web que es, en principio, contaminante, se han elaborado una serie de conclusiones. 7.1 7.2 Conclusiones Recomendaciones 7.3 7.4 Debilidades del estudio Futuras líneas de investigación 87 Conclusiones Las páginas sostenibles contribuyen a una mejor experiencia de usuario. En el marco teórico, autores como Greenwood (2021) o Rónay (2023) aseguran que un diseño sostenible de los productos digitales mejora la experiencia de usuario, entre otras cuestiones, por la rapidez de carga y el fácil acceso a la información. En este caso, concuerdo con ellos, ya que aquellas páginas más eficientes de energía disponen su información de manera más clara y es capaz de cargarse incluso en lugares con baja cobertura, por lo que se asegura que la experiencia de usuario va a ser buena. El futuro que esperan aquellos que estudian el diseño web sostenible no coincide con las tendencias de diseño web. En principio, todo apunta a que la sostenibilidad digital marcará las decisiones frente a Internet en el futuro, entre otras razones, porque contribuye a más de un objetivo de Desarrollo Sostenible y su respectiva Agenda 2030. No obstante, cada vez hay más tendencias a consumo de plataformas altamente contaminantes, como, por ejemplo, TikTok, como asegura Ríos (2022). Por ello, aunque Oghia (2022) asegura que el futuro está en las páginas web sostenibles, no se puede asegurar completamente. Efectivamente, esto se puede observar en el sitio web de GoodNews Coffee, que hace un amplio uso de vídeos en bucle en formato vertical, el formato favorito de la Generación Z, que es el target al que se dirige. La sostenibilidad digital no tiene la suficiente importancia en nuestra sociedad. Como hemos analizado en el marco teórico, los productos digitales sostenibles contribuyen a varios Objetivos de Desarrollo Sostenible. No obstante, se les da prioridad a muchas otras acciones respecto a la inclusividad y la eficiencia energética. Además, la mayoría de los productos digitales son altamente contaminantes, y el debate sobre los productos digitales sostenible todavía no está extendido en un mundo cada vez más digitalizado. Conclusiones 88 La mayoría de las empresas no están comprometidas con la sostenibilidad digital, pero esto es, porque los propios consumidores no le dan importancia o incluso no tienen conocimientos sobre el tema. Además, como afirmaba Ríos (2022), la reproducción de vídeos en streaming supone ya el 1% de la contaminación mundial, potenciado, sobre todo, por el consumo creciente de plataformas cuyo formato estrella es el vídeo, como TikTok o Twitch. La gran mayoría de las empresas, a pesar de considerarse ecológicas y/o sosteibles, no tienen en cuenta el diseño digital sostenible. Una vez más, las acciones sostenibles, como hemos podido comprobar a través de los ODS, se centran en aspectos materiales y no tanto en la contaminación digital, por lo que muchas empresas que se consideran socialmente como “sostenibles” no lo son en términos digitales, cuando, de acuerdo con Iberdrola (s.f.), las TIC suponen el 7% del consumo mundial de la energía. Dentro del mundo de la sostenibilidad digital, se habla mayoritariamente de la eficiencia energética, y no tanto del diseño inclusivo, cuando ambas partes son igual de importantes para desarrollar un producto digital sostenible, tal y como afirma Hariri y colaboradores (2020). A partir de estos aprendizajes, se recomienda respecto al caso práctico, el aplicar los diferentes cambios o utilizarlos como inspiración para otras páginas web u otro tipo de producto digital con el fin de mejorar la eficiencia energética y la inclusividad. Se recomienda hacer uso de las tablas, especialmente de la del bloque de diseño inclusivo, ya que recoge las principales heurísticas para considerar un producto digital como inclusivo. Recomendaciones Conclusiones 89 A la hora de llevar a cabo el caso práctico, han surgido ciertas barreras que han supuesto debilidades en el estudio: Al ser un estudio muy introductorio sobre el diseño web sostenible, se plantean las siguientes cuestiones para poder continuar con el estudio de este ámbito: Debilidades del estudio Futuras líneas de investigación 1Falta de información y recursos: al no poder acceder a los recursos del sitio web de GoodNews Coffee de manera interna, hay ciertos que han tenido que conseguirse externamente. Por tanto, los datos están sesgados de cierta manera. 1¿Qué papel jugará la inteligencia artificial en el diseño web sostenible? La IA está cada vez más presente en todos los procesos digitales. Es interesante analizar qué rol cumplirá en el mundo digital sostenible y si se convertirá en una herramienta útil para crear productos de bajo impacto. 2El prototipo no puede ser publicado en la Web: al no poder ser alojado en un hosting o alojamiento web, no es posible medir exactamente cuánto pesa, por lo que no se pueden ofrecer datos exactos de las mejoras en la sostenibilidad del diseño. Conclusiones 96 Söderström, U., Carlsson, L., & Mejtoft, T. (2019). Comparing millennials view on minimalism and maximalism in web design. ECCE 2019. https://doi.org/10.1145/3335082.3335104 Tendencias de diseño web que dominarán las pantallas en 2024. (2024, 11 enero). Wix. Recuperado 29 de marzo de 2024, de https://es.wix. com/blog/2021/01/tendencias-diseno-web Tiautrakul, J., & Jindakul, J. (2019). The Artificial Intelligence (AI) with the Future of Digital Marketing. Social Science Research Network. https:// doi.org/10.2139/ssrn.3405184 Toggle switch design: the full run through. (s. f.). Copyright © Justinmind 2024. All Rights Reserved. https://www.justinmind.com/ui-design/to ggle-patterns-examples United Nations. (s. f.). Sostenibilidad | Naciones Unidas. Recuperado 29 de marzo de 2024, de https://lc.cx/HHthv2 Vizcaíno, A. V. (2022). Greenwashing, mentiras verdes para vender más. Ecologista, 112. https://lc.cx/aSMRkO Wholegrain Digital. (2024). Informe del impacto ambiental de la página web de GoodNews Coffee. En The Website Carbon Calculator. Recuperado 2 de junio de 2024, de https://www.websitecarbon.com/website/ goodnews-coffee/ Referencias L o r e m i p s u m d o l o r s i t a m fffff f f f f e t , c o n s e c t e t u e r a d i p i s c i n g 9. ANEXO Ilustraciones vectoriales Productos Ilustración 27: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 32: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 33: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 37: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 42: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 43: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 44: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 45: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 46: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 38: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 39: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 40: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 41: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 34: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 35: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 36: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 28: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 29: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 30: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 31: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 47: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 50: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 51: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 52: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 48: ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 53: ilustración de kiosko de GoodNews Coffe. Fuente: elaboración propia. Ilustración 56: ilustración de vaso de GoodNews Coffe. Fuente: elaboración propia. Ilustración 57: ilustración de foto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 58: bola del Mundo. Fuente: elaboración propia. Ilustración 54: ilustración de pizarra de GoodNews Coffe. Fuente: elaboración propia. Ilustración 55: ilustración de colaboración de GoodNews Coffe. Fuente: elaboración propia. Ilustración 49 ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 49 ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Ilustración 49 ilustración de producto de GoodNews Coffe. Fuente: elaboración propia. Otras ilustraciones Ilustración 57: ilustración pasos para el consumo de coffee boost de GoodNews Coffee Fuente: elaboración propia. Ilustración 58: ilustración pasos para el consumo de coffee boost de GoodNews Coffee Fuente: elaboración propia. Ilustración 59: ilustración pasos para el consumo de coffee boost de GoodNews Coffee Fuente: elaboración propia. Ilustración 60: ilustración pasos para el consumo de coffee boost de GoodNews Coffee Fuente: elaboración propia. Bases de datos Base de datos de los archivos en formato de imagen del sitio web de GoodNews Coffee. Fuente: elaboración propia. https://docs.google.com/spreadsheets/d/11wrXXUbYsdV2XRnesj6legRIcMHXR T1GE3R6Y4nn0fE/edit?usp=sharing Base de datos de los archivos en formato de vídeo del sitio web de GoodNews Coffee. Fuente: elaboración propia. https://docs.google.com/spreadsheets/d/1U2fbclf1bcbR1y4RkD82xUCDLzaQar 19f_EwUsXK_f8/edit?usp=sharing