100 puntos a saber sobre...
Desarrollo de una web de diseño eco

Analicemos la estrategia de contenidos utilizada por los creadores del siguiente sitio web: https://a-k-apart.com/.

El objetivo del sitio web You Are @ 10K Apart (a-k-apart.com) es crear una experiencia web atractiva que pueda ofrecerse en 10 KB y que funcione sin JavaScript. Se trata de optimizar cada pequeño byte para asegurarse de que el sitio funciona, pase lo que pase. El reto de crear una aplicación web con menos de 10 KB se anunció en forma de concurso.

Para ello se construyó una página de concurso de interoperabilidad, accesibilidad y mejora progresiva en menos de 10 KB.

No nos centraremos en todos los detalles técnicos de cómo lo consiguieron, ya que aún quedan muchos conceptos por desvelar de este módulo (los que tienen que ver con imágenes, vídeos, fuentes, código, etc.). Más bien, nos fijaremos en la estrategia de contenidos que se utilizó para crear este micrositio web.

El primer paso fue determinar el público objetivo. Se dividió en 2 grupos principales:

• Competidores
• Espectadores

Ambos grupos podrían solaparse. La tarea consistió entonces en diseñar el sitio web de modo que sirviera de apoyo a ambos grupos y garantizara una transición fácil entre ellos. Esto se consiguió mediante distintas fases de desarrollo del sitio web:

• Lanzamiento: cuando no hay inscripciones;
• En curso: cuando había inscripciones, pero el concurso no estaba abierto;
• Cierre: cuando el concurso está cerrado y no se aceptan nuevas inscripciones, pero se pide a los participantes que voten por sus favoritos;
• Anuncio del ganador: después de que tanto los profesionales como la comunidad juzguen y determinen el ganador (ésta es la página que podemos ver actualmente).

A partir del esquema anterior, se planificó el contenido de cada página según cada fase.
En primer lugar, los autores empezaron por eliminar el contenido que no era esencial para cada fase. Los creadores siguieron el modelo "Mobile First" (puede obtener más información al respecto en la lección 10) y eliminaron todo lo que pudiera distraer al usuario o no ayudarle a alcanzar su objetivo en esa página. Después se redactó el texto de cada fase y se intentó que el contenido se contara como si estuvieras hablando con un compañero sentado a tu lado.

A continuación, el contenido se organizó en wireframes básicos (diagramas que representan la estructura y funcionalidad del sitio). Mientras se trabajaba en los wireframes, se prestó atención a dónde podía reducirse el tamaño de la página o dónde podía utilizarse el marcado (por ejemplo, HTML5) para mejorar la experiencia. Además, se dio importancia a la organización del contenido en pantallas pequeñas.

Para las interacciones más complicadas se utilizaron IxMaps (diagramas de flujo). Este sistema permite definir las distintas formas en que el usuario puede experimentar la interfaz. Por ejemplo, la página de entrada muestra la información más importante: nombre del proyecto, nombre de su/s creador/es, descripción del proyecto y un enlace a una web. La captura de pantalla de la web es útil, pero no necesaria. Por ello, se utilizaron IxMaps para cargar perezosamente las capturas de pantalla sólo cuando JavaScript estaba disponible. Además, IxMap permitía cargar una imagen en un formato alternativo para los navegadores que soportan WebP (mucho más pequeño que los JPG o PNG).

Todos estos pasos previos ayudaron al diseñador a obtener una buena visión general de las necesidades de interfaz de usuario del sitio y a crear un sistema de diseño en lugar de páginas individuales.

Conclusiones

Lo aprendido en cuanto a contenido, estrategia e información:

• Reducir las distracciones centrándose en el objetivo principal.
• Escribir para la gente como si se hablara con ella en persona.
• Dar prioridad al contenido asegurándose de que el flujo lleva a los usuarios adonde quieren ir.
• Buscar oportunidades de mejora eliminando contenidos o incluyéndolos sólo en determinadas situaciones.
• Buscar patrones para crear un sistema de diseño, no sólo páginas individuales.