Francisco Vera: Diseño web de LUN

De Casiopea
La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Encargo

De acuerdo a los contenidos estudiados durante este trimestre, se pretende re diseñar un espacio digital de una empresa que evalúa la metodología de como se abarca el encargo, si se es capaz de entender la problemática y abordarla con soluciones beneficiosas. En este caso, se re diseñará el sitio de la empresa LUN y la manera en que publica sus contenidos análogos en un medio digital, desarrollando finalmente la aplicación que permite navegar digitalmente a través del diario, y las opciones que tienen los usuarios de acceder a ellas, filtradas, de manera rápida, interactiva, etc.

Proceso

Brief

De acuerdo a lo estipulado en el Brief, se resume lo siguiente:

Nombre: Las Últimas Noticias - Grupo Edwards

Dirección: Bellavista 122, Santiago.

Rubro: Prensa Escrita y Digital.

Encargado del Proyecto: Carlos Barros, c.barros@lun.com, 93408601

Encargado de Contenidos: Marta Fuentes, marta.fuen@lun.com, 96687250

Actualmente, los sitios que encabezan el ranking de visita a nivel mundial son: "New York Times", "USA Today" y "Washington Post", principalmente por el manejo de información mundial y la calidad del servicio digital que entregan; a nivel nacional, el sitio LUN.com es el más visitado ya teniendo un prestigio en su diario análogo por sus años de posicionamiento en el mercado y las materias que trata.

El Diario LUN, está dirigido a un público C1, C2, C3 y E, interesados principalmente en farándula y espectáculos, prensa rosa, conectados televisivamente y lectores expeditos; contando con recursos humanos como: 26 Periodistas, 7 Fotógrafos, Director de Arte, Director de Contenidos, 4 Críticos, 10 Columnistas; materiales: 30 Computadores, 15 Cámaras Fotográficas, 6 Vehículos, 5 Proyectores y espaciales: una oficina principal y otra anexa, una sala de exposición, 3 oficinas de reuniones, además de un Manual de Marca.

La Empresa ya ha trabajado con publicidad digital, en forma de banners, y ha generado un aumento del 10% en el ingreso de nuevos lectores digitales, y posee un presupuesto único para Medios Digitales de 5 millones de pesos anuales.

Los deseos de LUN, como agrupación de medios masivos, consiste en generar un mayor ingreso de usuarios nuevos hacia su sitio, principalmente extranjeros, que puedan acceder fácilmente al contenido de un modo similar al medio análogo y aprovechando los soportes tecnológicos e-reader. Cabe destacar la atención que genera la aplicación "Times Reader" del NY.Times.com por su maleabilidad en otros OS y su facilidad de navegación y la forma en que www.lanacion.com.ar expone sus contenidos digitales.

Estadísticas Diarios Chilenos

Benchmark

De acuerdo al último ranking realizado por 4 International Media & Newspapers , se estudia el sistema de lectura digital de los diarios que encabezan la lista, y se realiza un análisis que resalta las fortalezas de cada sistema como características posibles de la aplicación a construir.

Times Reader

Times reader.png Times reader1.png


Diagramación

Cabe destacar que la aplicación del NYTimes, distingue dos zonas, el de los contenidos y las secciones, facilitando la navegación a través del diario, por su simple visualización y en la economía de navegación, sin tener que pasar por todos los contenidos anteriores para llegar al que se desea.

Pestaña de Ediciones

Rápido acceso a Ediciones anteriores

Herramientas

La Aplicación permite modificar el tamaño de letra, imprimir lo que se está viendo y recomendar via mail. Al clickear en un foto, esta se muestra independiente en la zona de contenidos, con un mostrador inferior de las fotos que posee el artículo que estamos leyendo, y por último posee un buscador que muestra en la zona de artículos, las publicaciones que poseen lo que estamos buscando

Navegación

En la parte superior, permite retroceder y adelantar de acuerdo al historial de navegación que hemos realizado durante la aplicación, como también un segundo modo de visualización del diario.

The Guardian

The guardian.png


Herramientas

En su costado izquierdo, la navegación posee herramientas para compartir datos en distintos medios, así como la capacidad de exportar lo que se está viendo. A su inferior, las herramientas se centran en la visualización de la página, zoom, mostrar en dobles páginas, página siguiente, etc.

Tabla de Contenidos

La tabla de contenidos permite el acceso a las secciones del impreso y en la página (folio) que se encuentra.

Miniaturas

Las miniaturas permiten una rapido acceso a las páginas que familiarizan aún más al lector, transformando el espacio digital, en un pestañeo de páginas del impreso.

La Nación

La nacion.png


Estrategia

De acuerdo a los objetivos y el estudio del mercado que se han realizado, la estrategia reconocerá cinco puntos que abarcan -actualmente- una idónea forma de leer los contenidos digitales. Principalmente, la estrategia encabeza:

  • Aplicación compatible con todos los navegador y visualización en móviles, elocuente con las resoluciones que cada dispositivo posee.
  • Convención, continuar con el modo en que se presentan los contenidos, la lógica de ranking y una presentación fiel del impreso.
  • Redes Sociales, expandir los canales de comunicación digital hacia las redes sociales, de tal manera, que el flujo de contenidos se realiza por recomendaciones y/o publicaciones de los mismos lectores.
  • Visualización de Videos, la mejora de la aplicación que visualiza los videos anexados a cada noticia, como un apartado que permite ranking, publicar y recomendar.

Modo

El desarrollo que tendrá la estrategia será:

  • Indice de Contenidos, donde todo el contenido del sitio y la aplicación, se expone para reorganizarlo de una manera natural para el lector.
  • Cardsorting, los contenidos del índice son presentados al target para que ellos lo ordenen con su criterio de lectura.
  • Mapa de Navegación, se define la forma en que se navegará por el sitio, controlando los niveles de acceso (cantidad de clicks para llegar a lo que queremos).
  • Wireframes, proposición gráfica de la interacción visual que tendrá la persona con los contenidos, siendo esta evaluada por el target.


Indice de Contenidos

Los contenidos que presenta el sitio se organizan de acuerdo al orden en que se exponen, de esta manera, se reorganizan de acuerdo a pruebas realizadas a personas que correspondan al target al cual alude la entidad. En este caso en particular, al contenido se agregan herramientas u opciones de interacción con la visualización del articulo que pretenden ser construídas en la aplicación.

Home

  1. Revistas Anexas
  2. Ediciones Anteriores
  3. Búsqueda de Noticias
    1. Secciones
    2. Página
  4. Tráfico del sitio (Google Analytics)
  5. Medir Velocidad de Conexión
  6. Hojear Diario Online (eliminado)
  7. Noticias
    1. (orden de) Ranking
    2. (orden de) Sección
    3. Página
      1. Zoom
      2. Pág. siguiente
      3. Pág. anterior
      4. Miniaturas
      5. Enviar vía mail
      6. "Compartir"
        1. Facebook
        2. Twitter
      7. Imprimir
    4. Secciones
      1. Folio
      2. Deportes
      3. Internacional
      4. Tiempo Libre
      5. Economía
      6. El Día
      7. Sociedad
      8. Política
      9. Pymes
      10. Cultura
  8. Ediciones Anexas
    1. Solo Auto
    2. Edición Especial
    3. Primera Fila
    4. Reportajes
    5. Mercado Mayorista
    6. Transporte


Cardsorting

Puesto que los contenidos del sitio son las noticias del diario, el cardsorting se centra en la aplicación que recibe las publicaciones, organizando la interacción que posee el lector con la noticia a través de dicha aplicación en un jerarquía de clicks. Los diagramas expuestos corresponden al orden designado por personas distintas.



El orden de los contenidos que rigió en las personas mientras hacían el cardsorting era el mismo, todos privilegiaban la noticia por sobre las herramientas que presta el LUN, mientras que las ediciones anexas se encontraban en el medio de las preferencias. La visualización de la noticia debía ser inmediata y la portada de la Edición del día, así como un fácil acceso a las publicaciones por ranking, por sección y las miniaturas de cada página.


Mapa de Navegación

Archivo:Mapa de navegación LUN.png
Mapa de Navegación, rediseño de LUN


Wireframe

La construcción del wireframe parte con designar una grilla que se adapte a las distintas resoluciones que poseen los navegadores, esa resolución es de 4:3 -widescreen- y el alto de las horizontales es la mínima altura de visualización que pueden poseer las portadas, mientras que el ancho, es el ancho mínimo de barra izquierda de navegación, por el contenido que este alberga; sobre esta base, se genera una grilla entonces de 4 x 6.


La distribución de las zonas de navegación, está dada por la convención que posee el sitio y por la interacción que tiene este con el contenido y, de acuerdo a las prioridades establecidas en el cardsorting, los contenidos de mayor relevancia tienen una ubicación más próxima a la vista, pero sin forzar a una navegación de muchas jerarquías, que requiera de muchos clicks para acceder a ella; además, se añaden interacciones de aplicaciones interactivas que agregan un mejor control en la visualización de los contenidos.


Wireframe grilla lun.jpg Wireframe zonas lun.jpg


Wireframe ejemplos.jpg


Layout

Layout1.png


Layout2.png


Layout3.png