Categorías
Profesionales web

La Agencia Española de Protección de Datos publica una Guía sobre el uso de las cookies

La Agencia Española de Protección de Datos (AEPD) y las asociaciones ADIGITAL, Anunciantes, Autocontrol e IAB Spain han presentado la Guía sobre el uso de las cookies, actualización a la nueva normativa de la primera guía en Europa sobre esta materia elaborada conjuntamente por la autoridad de protección de datos y los representantes de la industria.

La Guía […] recoge las orientaciones, garantías y obligaciones que la industria debe aplicar para utilizar tanto cookies como tecnologías similares (fingerprinting y otras) cumpliendo la legislación vigente. El papel esencial que juegan las cookies para la prestación de numerosos servicios en Internet y, a la vez, las implicaciones que tienen en la privacidad de los usuarios ha determinado la necesidad de implantar un sistema en el que el usuario sea consciente de quién, cómo y para qué utiliza sus datos personales.

El documento analiza la necesidad de obtener el consentimiento informado del usuario antes de instalar las cookies, recogiendo tanto la obligación de transparencia en la información como el consentimiento en sí mismo, teniendo en cuenta que la nueva normativa de protección de datos establece unos requisitos más estrictos. Además, la Guía se complementa con ejemplos prácticos de fórmulas válidas para recabar el consentimiento de los usuarios.

La AEPD presenta una guía sobre el uso de cookies adaptada a la nueva normativa

Categorías
Desarrollo web Profesionales web

Web Almanac 2019 by HTTP Archive: Estado de la web en el 2019

HTTP Archive ha publicado los resulados de un análisis de 5.790.700 sitios web. No es algo habitual —recuerdo hace muchos años algo similar que publicó Opera—. En todos esos sitios web ha ido analizando su código y el resultado es una serie de artículos que, podríamos decir, sirve como muestra de las características de los sitios web en la actualidad.

Aquí está la tabla de contenidos, y creo que es necesario que los profesionales relacionados con la web lo tengamos muy en cuenta. Es un recurso de referencia y consulta. Un recurso valioso e imprescindible.

Part I. Page Content

Part II. User Experience

Part III. Content Publishing

Part IV. Content Distribution

Appendix

Web Almanac 2019 by HTTP Archive

Categorías
Citas Desarrollo web Diseño Profesionales web

El botón de los 300 millones de dólares. Diseñar un botón como ejercicio

El botón de los 300 millones de dólares

¿Conocéis la vieja historia del botón de los 300 millones de dólares que contó Jared M. Spool en el 2009 (The $300 Million Button)? Es interesante. Cómo al cambiar, entre otras cosas, el texto de un botón, mejoró en 300 millones de dólares las ventas anuales en una web de comercio electrónico.

¿Qué ocurrió? ¿cómo pudo afectar tanto a las ventas el cambio de un botón?
Contexto: en una web de comercio electrónico, al comenzar el proceso de compra tras tener el carro con la compra deseada, aparecía un formulario en el que se pedía el usuario, la contraseña, y la posibilidad de entrar en la página web (para confirmar la dirección de entrega y el medio de pago) o la de darse de alta. Ah, y también el enlace de olvido de contraseña.

Es decir, algo como:

Campo de usuario, contraseña, botón de acceso y vínculos de olvidé mi contraseña y darme de alta.
Recreación libre del formulario del carro de la compra.

¿Qué problemas podían haber (recordemos, año 2009)? De todo tipo:

  • Usuarios que no quieren registrarse en la web (sólo querían comprar).
  • Usuarios dados de alta que dudan cuál es la dirección de correo electrónico que tienen como usuario.
  • Usuarios que se habían dado de alta con varias direcciones de correo electrónicas diferentes.
  • Usuarios que no recuerdan la contraseña.

La consecuencia: en esa página se producía un cuello de botella que impedía finalizar la compra.

La solución: tras realizar pruebas con usuarios, pasa por cambiar el literal de un botón (de «darse de alta» a «continuar»), e incluir un texto indicando que se puede comprar sin darse de alta.

El resultado: 15 millones más de ventas en un mes, y 300 millones en un año (de ahí el sugerente título del artículo para los que se excitan con dólares).

Diseñando un botón: un elemento fundamental

Siempre me ha intrigado el proceso que está detrás de la toma de decisiones en un diseño. El porqué.

Porque se supone que detrás de una decisión de diseño (particularizando en una página web: fuente, tamaño, color, posición, rejilla,…) debería haber motivos que fundamentan esa decisión. ¿Cómo ejercitar esa habilidad o conocimiento?

What if, instead of trying to design an entire page with dozens of elements (nav, text, input controls, a logo, etc.), we consciously started by designing the simplest thing possible? We deliberately limit the playing field to one, tiny thing and see what we learn? Let’s try.

What is the simplest possible element? I vote that it’s a button.

The King vs. Pawn Game of UI Design — Erik D. Kennedy

Enumeremos algunas características de un simple botón:

  • tamaño
  • texto
  • fuente
  • tamaño y efecto de la fuente
  • color de fondo (¿gradiente de colores?)
  • color del texto
  • acompañar o no de un icono
  • padding (separación del texto y el borde)
  • margen (separación entre el botón y el resto de los elementos)
  • forma (esquinas cuadradas, redondeadas, radio de la redondez)
  • tipo de acción que realiza (continuar un proceso, acción «peligrosa», acción neutra, acción principal, acción secundaria,…)

Podemos delegar varias características al estilo por defecto que tenga el navegador (en el caso de una página web), o a algún framework con posibles síntomas de vigorexia.

O podemos diseñar un simple botón. Con el objetivo de cumplir los requisitos del proyecto (real o ficticio). Intentando argumentar cada característica. Me parece un ejercicio muy saludable.

Categorías
Diseño Profesionales web

Imagen institucional del Gobierno de España. Mejoras necesarias.

Dramatización lúdica

La introducción de este artículo es una dramatización lúdica inspirada vagamente en Twilight Struggle.

Junio del año 2018.

Pedro Sánchez mira su mano de cartas y decide jugar el evento «Moción de censura» contra su contrincante Mariano Rajoy. Suma sus puntos de aliados, y compara su valor con los aliados del rival. Si saca un cinco o un seis, gana la moción de censura. Tira el dado, parece que va a salir un tres, pero en el último momento, sale un seis.

Como consecuencia, gana la moción de censura, dos puntos de victoria y el gobierno de la nación. Tendrá que asumir el Presupuesto del Estado, y tal vez el rival tenga una carta de evento que devuelva el control político. La gestión de las manos de cartas y el azar decidirá el resultado de la partida.

Fin de la prescindible dramatización.

Cambios, coste y resultado final de un cambio de nomenclatura ministerial

Con cada cambio de Gobierno, hay cambios ministeriales: de ministros y ministerios (nuevos, que desaparecen y que cambian de nombre).

Otra consecuencia adicional que se vive muy intensamente en los ministerios ya que un cambio de nombre implica la sustitución de textos e imágenes en muchos lugares:

  • Los cambios «digitales» van desde la firma en los correos electrónicos, literales en incontables páginas, las plantilla en los documentos de ofimática y los nuevos imagotipos en las diferentes webs públicas y privadas y otras externas pero que están obligadas a incluir el imagotipo.
  • Los cambios «físicos» incluyen señales, carteles, tarjetas de visita, trípticos, pegatinas, pendrives, felpudos, e incluso letras en metal fundido. Por decir algos ejemplos posibles.

¿Cuándo tienen que estar esos cambios? Lo antes posible.

¿Durante cuánto tiempo serán válidos? Depende: Hay nombres de Ministerios, como los de Justicia o el de Defensa, que suelen ser inmutables. Unos ministerios cambian cada legislatura, y otros tienen una duración efímera de tan solo una legislatura.

Como os podéis imaginar, todos estos cambios tienen un coste, ya sea en horas de trabajo, o en material. Hay cambios que se pueden realizar con relativa facilidad ya que su coste en tiempo-dinero-esfuerzo es residual. Otros, por diversos motivos, pueden eternizarse en una lista de tareas pendientes durante mucho tiempo. Con suerte, lo que hace dos etapas ministeriales era correcto, tal vez vuelva a serlo en una o dos legislaturas.

Hablando sólo de imágenes: Sobra decir que lo habitual es tener el logo, isotipo o imagotipo de cualquier entidad en diferentes tamaños repartidos por infinidad de sitios. Si se tiene un buen original en formato vectorial, puede ser sencillo obtener las diferentes imágenes bitmap en los tamaños que se necesiten (efecto pixel perfect aparte). La otra opción es redimensionar una imagen bitmap (jpg, gif, png) de incierto origen y hacer un apaño rápido con un programa de edición gráfica como el paint, que para eso está en todos los ordenadores con Windows.

Si se hace bien (imagen vectorial, exportar a diferentes tamaños, usar el timpo de fichero adecuado, seguir las normas de imagen institucional en el caso del Gobierno de España), estará bien durante una temporada (hasta el próximo cambio de gobierno). Si no es así, bueno. Nos lo imaginamos todos.

Un inciso, me ha tocado vivir desde dentro dos cambios de nombres de ministerios.

Imagen Institucional del Gobierno de España

En España, la imagen institucional se empieza a regular en el año 1999 (Real Decreto 1465/1999, del 17 de septiembre), pocos días después se aprueba el primer Manual de la Administración General del estado (Orden del 27 de septiembre de 1999).

Desde entonces, ha habido revisiones , que paso por alto, pero los últimos cambios a día de hoy son del año 2017 (Resolución de 3 de abril de 2017, de la Secretaría de Estado de Función Pública), en el que se actualiza el Manual de Imagen Institucional, en su presente denominación. Con respecto a los contenidos, se actualiza además con los cambios ministeriales.

Toda la documentación de la Imagen Institucional, está alojada en https://imagen.funciona.es. ¿Y qué característica tiene el dominio? Que sólo es accesible a través de una red interna de las administraciones públicas, SARA.

La Red SARA (Sistemas de Aplicaciones y Redes para las Administraciones) es un conjunto de infraestructuras de comunicaciones y servicios básicos que conecta las redes de las Administraciones Públicas Españolas e Instituciones Europeas facilitando el intercambio de información y el acceso a los servicios.

Red SARA

Dentro de https://imagen.funciona.es (accesible sólo desde la red SARA), están alojados los siguientes recursos entre otros:

  • Manual de Imagen Institucional, (aquí puedes ver la portada). Se trata de un documento en formato pdf de 146 páginas sobre la imagen institucional (escudo, fuente, colores, dimensiones, imagotipos ministeriales), normativa para material impreso, publicaciones, señalización, etcétera.
  • Imágenes en formato vectorial (fh11 y ai) y mapa de imágenes en dos tamaños (jpg y gif) del Escudo de España, y los imagotipos de los diferentes ministerios. Me sorprende que todavía se use el formato de Freehand 11 (la última versión del programa es del año 2004, hace 14 años), y que no esté disponible en formato svg (lo que permitiría utilizarlos sin problemas en inkscape, el programa de software libre de edición de imágenes vectoriales).

Algunos aspectos concretos de la Imagen Institucional del Gobierno de España

Un elemento básico de la Imagen Institucional, es el escudo. La descripción oficial está publicada en la Ley 33/1981 del 5 de Octubre. Cito, porque me parece un texto hermoso, aunque con un complejo vocabulario heráldico:

Artículo primero

El Escudo de España es cuartelado y entado en punta. En el primer cuartel, de gules o rojo, un castillo de oro, almenado, aclarado de azur o azul y mazonado de sable o negro. En el segundo, de plata, un león rampante, de púrpura, linguado, uñado, armado de gules o rojo y coronado de oro. En el tercero, de oro, cuatro palos, de gules o rojo. En el cuarto, de gules o rojo, una cadena de oro, puesta en cruz, aspa y orla, cargada en el centro de una esmeralda de su color. Entado de plata, una granada al natural, rajada de gules o rojo, tallada y hojada de dos hojas, de sinople o verde.

Acompañado de dos columnas, de plata, con base y capitel, de oro, sobre ondas de azur o azul y plata, superada de corona imperial, la diestra, y de una corona real, la siniestra, ambas de oro, y rodeando las columnas, una cinta de gules o rojo, cargada de letras de oro, en la diestra «Plus» y en la siniestra «Ultra».

Al timbre, corona real, cerrada, que es un círculo de oro, engastado de piedras preciosas, compuesto de ocho florones de hojas de acanto, visibles cinco, interpoladas de perlas, y de cuyas hojas salen sendas diademas sumadas de perlas, que convergen en un mundo de azur o azul, con el semimeridiano y el ecuador de oro, sumado de cruz de oro. La corona, forrada de gules o rojo.

Artículo segundo

El Escudo de España, tal como se describe en el artículo anterior, lleva escusón de azur o azul, tres lises de oro, puestas dos y una, la bordura lisa, de gules o rojo, propio de la dinastía reinante.

BOE: Ley 33/1981, de 5 de octubre, del Escudo de España.

Hay una interesante evolución histórica del Escudo de España en la wikipedia. Los cuatro cuarteles hacen referencia a los reinos de Castilla, León, Aragón, Navarra además del reino de Granada en la parte inferior. En el centro las tres flores de lis que se corresponde a la dinastía de Borbón-Anjou. Las dos columnas son las de Hércules, y tienen sobre su capitel la corona del Sacro Imperio y la corona española. Flipante.

Imagotipos ministeriales

Los imagotipos del Gobierno y los Ministerios en la web (puedes encontrarlos todos en Wikipedia: Ministerios de España), incluyen una columna con parte de la bandera de la Unión Europea (con tres estrellas), otra barra con la bandera de España, el escudo, el texto Gobierno de España (con la fuente Gill Sans Regular, de origen británico), una delgada columna de separación y el nombre del ministerio en cuestión (en la misma fuente Gill Sans Regular, pero un punto menor). Hay dos unidades básicas, que sirven para definir los tamaños y separación de los diferentes elementos y son:

  • El ancho del escudo, ya que un cuarto de esa medida, se utiliza para separar horizontal (a la izquierda) y verticalmente el escudo con la banda envolvente.
  • La altura de la fuente del texto «Gobierno de España», siendo el ancho del texto, la anchura del escudo. El doble de esa medida, se utiliza en el ancho de la columna de las banderas de Europa y España, la separación entre el escudo y el texto «Gobierno de España», y de separación del texto Gobierno de España y el texto con la denominación del ministerio de la delgada columna amarilla que los separa.

Si no te has enterado del todo, tal vez la siguiente imagen te ayude (hay un enlace para ver la imagen a tamaño completo):

Medidas usadas en la imagen institucional de los Ministerios de España

Un poco más de información: a continuación dos tablas, una con los colores oficiales del escudo y otra con los de los imagotipos.

Tabla con los colores institucionales del Gobierno de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Amarillo envolvente Pantone 116 rgb(255,219,0) #FFDB00
Azul Europa Pantone Reflex Blue rgb(0,51,153) #003399
Amarillo Europa Pantone Yellow rgb(255,204,0) #FFCC00
Rojo Bandera rgb(173,21,25) #AD1519
Gualda Bandera rgb(250,189,0) #FABD00
Amarillo separador Pantone 116 rgb(245,227,38) #F5E326
Tabla con los colores institucionales del Escudo de España
Color Denominación Pantone RGB numérico RBG hexadecimal
Negro rgb(0,0,0) #000000
Rojo Pantone 186 rgb(181,0,39) #B50027
Plata Pantone 887 rgb(178,178,178) #B2B2B2
Oro Pantone 872 rgb(159,126,0) #9F7E00
Verde Pantone 3415 rgb(0,111,70) #006F46
Azul Pantone 2935 rgb(0,68,173) #0044AD
Púrpura Pantone 218 rgb(216,90,174) #DB5AAE
Granada Pantone 1345 rgb(243,203,126) #F3CB7E

Observación: no siempre se utilizan los colores correctos. Sugiero el ejercicio de ver todas las páginas de los ministerios y comparar los imagotipos oficiales (lo único que está especificado). Luego ya si eso, comparar las webs, e intentad adivinar si hay algún objetivo más allá de servir de fuente de noticias ministeriales.

Guía de Comunicación Digital del Gobierno de España

Tras hablar extensamente (perdón si ha sido demasiado) sobre el Manual y la Imagen Institucional, toca ahora hablar de otro documento: la Guía de Comunicación Digital para la Administración General del Estado. Se trata de un documento en formato pdf bastante extenso (365 páginas, en la última versión publicada a día de hoy, en el 2014), y a diferencia del ya mencionado manual, está disponible para su consulta y descarga.

Guía de Comunicación Digital para la Administración General del Estado.

La Guía trata sobre la imagen institucional, documentos electrónicos y ofimáticos, accesibilidad,… se puede descargar como un documento completo, o bien por fascículos. Yo destaco para el tema que nos ocupa el Fascículo 1: Aspectos generales y el Fascículo 2: Imagen institucional. En el primero (de ochenta páginas), nos encontramos con una serie de requisitos técnicos básicos y legales sobre los sitios webs. Os invito a ojearlo.

Desde mi punto de vista tiene al menos dos problemas:

  • Se queda algo anticuada en algunos aspectos —recordemos, cuatro años sin modificarse—.
  • El alcance propuesto es muy limitado. Comparando con…

GOV.UK Design System: tomemos nota

De vez en cuando he seguido las novedades del gobierno británico con respecto a su estrategia web. La última noticia, muy reciente: Introducing the GOV.UK Design System, en la que presentan GOV.UK Design System. Un sistema de diseño para las webs institucionales. Junto con GOV.UK Prototype Kit y GOV.UK Frontend.
El proceso detrás del resultado, se puede consultar en A GDS Story. Porque no se trata únicamente de usar cajas y colores.

The Design System and all of its contents are now fully supported by a dedicated team at the Government Digital Service (GDS).

Un equipo que centraliza el diseño y que desarrolla de forma abierta y público una sistema de diseño, plantillas, patrones,… para crear sitios y aplicaciones web con componentes reutilizables, aportando una imagen coherente y poniendo el foco en la accesibilidad.

¿Cómo se podría mejorar? Problemas.

Vemos el ejemplo británico, y por otro lado, aquí en España, tenemos algunos documentos muy completos en ciertos aspectos (imagen institucional, papelería y documentos ofimáticos,…), pero que flojea a la hora de ofrecer pautas para tener unas webs de la Administración General del Estado que tengan en común mucho más que unas guías para los imagotipos (y que no siempre se cumplen).

Entiendo las dificultades y desafíos de una propuesta similar a la británica, dada la situación actual:

  • Equipos de desarrollo, presupuestos y jerarquías independientes.
  • Diversidad en las aplicaciones webs desarrolladas: gestores de contenidos, lenguajes de programación, empresas proveedoras,…
  • La cantidad de trabajo que ya está hecho, y la dificultad para actualizarlo. No me hago una idea del presupuesto y el tiempo necesario para hacer algo así.
  • Inercias.
  • Encontrar un equipo capaz de gestionar un departamento así, dejarles trabajar, y que su trabajo no quede en un limbo administrativo.

Puestos a sugerir…

Crear un equipo independiente, transversal, con experiencia en diseño, experiencia de usuario, accesibilidad y tecnología. Los objetivos serían:

  • Mentalizar a quien haga falta, que el cambio es necesario, y beneficioso.
  • Crear una nueva versión de la imagen institucional web (creo que los imagotipos actuales no son los más adecuados, el texto suele ser ilegible). Pero ir más allá de los imagotipos.
  • Desarrollar un sistema de diseño que incluya los componentes necesarios en las webs institucionales, de acceso público y revisado periódicamente. Implica, obviamente, un rediseño de las webs, poniendo siempre el foco en los ciudadanos y sus necesidades. El Gobierno de Aragon ya lo ha hecho: DESY, el primer sistema de diseño en abierto de una comunidad autónoma en España.
  • Buscar algún sistema para que una URL siempre tenga el destino original, independientemente de los cambios en nomenclaturas. Las URLs molonas no cambian, que decía Tim.
  • Facilitar, y no entorpecer, el trabajo de los profesionales.
  • Etcétera

¿Es fácil? En absoluto. ¿Es posible? Debería serlo. ¿Es necesario? Creo que sí.

Categorías
Diseño de interacción Profesionales web

Cómo explicar de forma clara el SEO, la usabilidad, comercio electrónico,…

Me entero de este video por un mensaje en twitter de txarly (18 junio 2013 — 4:08), una charla de Ricardo Lop en el evento InspirationDay 2013. Y me parece imprescindible, para no olvidar.

Nunca hasta ahora he oído hablar forma tan clara hablar de SEO, usabilidad, comercio electrónico, atención al cliente,… y de manos de un labrador de Teruel que sin tener ni idea de ordenadores, ni de internet, decide montar una tienda de comercio electrónico.

Nunca hasta ahora había incluído un video en el blog. Pero de verdad, hay que verlo 🙂

La url del video: IV – #InspirationDay 2013 – Ricardo Lop.