En el viaje de IDA al Diseño Responsive compartimos la experiencia de cómo crear el primer medio online chileno con Diseño Responsive. Bajo una metodología de Diseño Centrado en el Usuario aplicado a Capital.cl Caso de estudio. ¿Quieres esta exposición para tu universidad o equipo? maximiliano@ida.cl o www.ida.cl

1. El viaje de IDA al
Diseño Web Responsivo
Responsive Web Desing
Bajo una metodología de
Diseño Centrado en el Usuario
Maximiliano Martin
www.ida.cl

2. www.ida.cl Maximiliano Martin
Socio fundador IDA
Algunos proyectos:
GOBIERNO COMUNIDADES
Empresas en las que he trabajado: •www.senda.gob.cl • Elquintopoder.cl
•www.cultura.gob.cl MEDIOS
IDA (2010 - 2030)
TURISMO • capital.cl
AyerViernes (2001 -2009) •Thesingular.cl • El Mostrador Mercados
•LodgeAndino.cl SISTEMAS
MOBILE • Huella Salud
• Sbif • ZEALtouch
• PUC ANTERIORES
VISUALIZACION DATA • Banco Chile
• Codelco • Banco Edwards
VTR • Descorchados
•Televisionvtr.cl • eii.ucv.cl
•Guía TV • Cocha
•VTR.com • Minrel
MUSEOS • Mineduc
• Museo de la Memoria • Política Stereo
• Museo Salvador Allende • Fundación Chile
• Banchile

3. www.ida.cl Metodología DCU
Involucra activamente a usuarios reales y potenciales
dentro de los procesos de Investigación y Desarrollo.
Determinan científicamente las necesidades,
características y limitaciones de un sistema.

4. www.ida.cl Metodología DCU
Planificamos todos los detalles de tu proyecto.
- General y profundo conocimiento del - Diseñamos para el usuario, no para el
medio digital. cliente.
- Tomamos tus ideas y trabajamos con - Comunicamos de forma atractiva y fácil.
ellas.
- Implementamos innovando y cumpliendo
- Conocemos tu consumidor final: el estándares.
usuario.
- Y siempre... siempre trabajamos en equipo
- Investigamos tu competencia y tus contigo.
pares.
El Éxito de tus Ideas.

5. www.ida.cl Metodología DCU
Evaluación, cotización y desarrollo

6. www.ida.cl Metodología DCU
Evaluación, cotización y desarrollo
Estrategia Estudio Usuarios Arquitectura Diseño Visual Pro&Des

7. ¿Cómo llegamos a hacer el primer
medio chileno
con Diseño Responsive?

8. www.ida.cl Aplicada en diversos tipos de proyectos
2010
Nicolás Sahli
Director Ejecutivo,
The Singular Hotels
“The Singular contó con el
apoyo de IDA, como
expertos en aplicar las
prácticas tradicionales del
diseño en idear y hacer
nuestro proyecto digital...

9. www.ida.cl Aplicada en diversos tipos de proyectos
2011

10. www.ida.cl Aplicada en diversos tipos de proyectos
2012 Ustedes no han visto esto

11. www.ida.cl Aplicada en diversos tipos de proyectos
Esto tampoco lo vieron

12. Casa de Herrero
IDEAS
DIGITALES
APLICADAS
Responsive Web Design

13. www.ida.cl Aplicada en diversos tipos de proyectos

14. www.ida.cl Aplicada en diversos tipos de proyectos

15. www.ida.cl Definiciones Estratégicas
Estrategia y Planificación

16. www.ida.cl Definiciones Estratégicas
¿Cómo se define el éxito o fracaso del proyecto?

17. www.ida.cl Definiciones Estratégicas

18. www.ida.cl Definiciones Estratégicas: cambiar paradigma

19. www.ida.cl Definiciones Estratégicas: cambiar paradigma

20. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
MAPAS TERMICOS DE NAVEGACIÓN ACTUAL
Monitoreo de navegación mediante seguimiento de click
para la creación de mapas de térmicos.
22 de Mayo / 9 días / 5000 visitas / 4146 clicks
Heatmaps
Scrollmaps
Confetti

21. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
Heatmaps

22. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
Heatmaps

23. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
Scrollmaps

24. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
Scrollmaps

25. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
Confetti

26. www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOS
CONCLUSIONES MAPAS TÉRMICOS
Lector incipiente: Nuevo en el círculo, con poco tiempo
y necesita validarse con sus pares y
jefes.
Lector antiguo ocasional: Familiarizada con el medio equilibra
información de poder con datos de
eventos y/o sociales.
Lector antiguo asiduo: Conocedor del medio y migrante
digital por obligación. Es fiel a la
revista de papel y sabe que online
obtiene información más actualizada.

27. www.ida.cl Definiciones Estratégicas: verbalizar
1. ¿Qué quiere el cliente?
2. ¿Qué necesita para lograrlo?
3. ¿Con qué recursos cuenta?

28. www.ida.cl Definiciones Estratégicas: ¿Qué quiere el cliente?
✓Un blog bajo el concepto “curatoría de contenidos”
✓Actualización diaria y varias veces por día
✓Inspirarse en The Boston Globe, FayerWayer
✓Estar en dispositivos móviles
✓Migrar archivo histórico
✓Opciones sociales
✓Concepto de desayuno informativo

29. www.ida.cl Definiciones Estratégicas: ¿Por qué lo quiere?
✓Renovar imagen por cumpleaños de revista papel
✓Aumentar visitas
✓Porque son los desafíos de su cargo
✓No funciona lo actual
✓Cambio de proveedor

30. www.ida.cl Definiciones Estratégicas: ¿qué tipo de cliente es?
✓El que sabe, exige y tienes la oportunidad de innovar
✓El que no sabe tanto pero entiende y valora
✓El mando medio que tiene que validarse internamente
✓El que dirige y toma las decisiones (favorito)
✓El que no sabe y no valora (No se si llegue a ser cliente)

31. www.ida.cl Definiciones Estratégicas: Objetivos
Con objetivos verbalizados se puede realizar el levantamiento de
requerimientos:
✓Gráficos: definiciones tipográficas y estilísticas
✓Funcionales: noticias, agenda de eventos, slide de imágenes
✓Técnicos: servidores, personal capacitado
✓Comunicacionales: Personal ad-hoc, tipo de contenidos
✓Uso de herramientas: software especializado

32. www.ida.cl Definiciones Estratégicas: Metodología
Detecta Minimiza Cuantifica

33. www.ida.cl Definiciones Estratégicas: Metodología
Detecta Minimiza Cuantifica
?
? ? ?
?

34. www.ida.cl Definiciones Estratégicas: Metodología
Detecta Minimiza Cuantifica
?
?
?

35. www.ida.cl Definiciones Estratégicas: Metodología
Detecta Minimiza Cuantifica
?
?
? $

36. www.ida.cl Estrategia Capital Online
✓Técnicos: mal funcionamiento de la plataforma
✓Diseño: se requería algo sencillo pero elegante
✓Contenido: se requería una nueva arquitectura de información.
✓Usuarios: Público masculino más joven y tecnológico
✓Comerciales: rentabilizar banners
✓Equipo de trabajo pequeño y nuevo.
✓Presupuesto y tiempos acotados

37. www.ida.cl Estrategia Capital Online
Se debían considerar varios aspectos:
✓Técnicos: mal funcionamiento de la plataforma
✓Diseño: se requería algo sencillo pero elegante
✓Contenido: se requería una nueva arquitectura de información.
✓Usuarios: Público masculino más joven y tecnológico
✓Comerciales: rentabilizar banners
✓Equipo de trabajo pequeño y nuevo.
✓Presupuesto y tiempos acotados

38. www.ida.cl Estrategia Capital Online
✓Hacer un nuevo medio online (no un blog)
✓Ser el primer medio responsive de Chile (móvil y web)
✓Mobile First
✓Más rentable al ser el mismo código
✓Destacar el contenido y no lo accesorio
✓Construir una interfaz limpia y sencilla, pero moderna
✓Aumentar la legibilidad y permanancia en sitio

39. www.ida.cl BENCHMARK / REVISTA CAPITAL
BENCHMARK
DEFINICIÓN
Análisis comparativo de sitios web para destacar sus aspectos
positivos y negativos que se traducen en buenas prácticas
para el diseño y desarrollo del nuevo Sitio Web de Revista Capital.

40. www.ida.cl BENCHMARK / REVISTA CAPITAL
BENCHMARK
CRITERIOS UTILIZADOS
Facilidad de uso: estructura de navegación, etiquetados
simples y claros, layout reconocible y entendible.
Contenidos: identidad, riqueza de contenidos multimedia.
Identificación inmediata del tipo de contenido.
Socialización: integración con otras plataformas.
Inducción o persuasión: call to action.
Oferta: contenidos de valor agregado.
Look&Feel: estética visual del sitio, aspectos gráficos.

41. www.ida.cl BENCHMARK //REVISTA CAPITAL
BENCHMARK REVISTA CAPITAL
BENCHMARK
SITIOS ANALIZADOS
http://www.theatlanticwire.com/ http://www.guardian.co.uk/
http://allthingsd.com/ http://bigthink.com/

42. www.ida.cl BENCHMARK / REVISTA CAPITAL
Resolución 1024x768:
¿Responden? Sí!... ¿Scroll? Por supuesto, y bastante...

43. www.ida.cl BENCHMARK / REVISTA CAPITAL
Tablets
No se distingue de la versión móvil cuando existe
En The Guardian no se ajusta a las dimensiones

44. www.ida.cl BENCHMARK / REVISTA CAPITAL
http://www.theatlanticwire.com/

45. www.ida.cl BENCHMARK / REVISTA CAPITAL
ESTRUCTURA SIMPLE Y CLASICA

46. www.ida.cl BENCHMARK / REVISTA CAPITAL
NAVEGACIÓN SIMPLE Y CLARA
Artículos en header se pierden en una
sección dispuesta generalmente para
publicidad, termina siendo un espacio
desaprovechado.
Menú superior sin exceso de elementos que refleja una navegación simple y clara.
Elementos accesorios, tienen cabida en el menú del footer
Portada sigue lógica de “río
de noticias”, es
excesivamente largo, con un
único gran destacado inicial.

47. www.ida.cl BENCHMARK / REVISTA CAPITAL
BENCHMARK
CONCLUSIONES/RECOMENDACIONES
Es fundamental construir un menú principal estable,
diferenciándolo de etiquetados temporales y evitando así
generar confusión en los usuarios recurrentes.
La arquitectura propuesta en la mayoría de los sitios
corresponde a una navegación sencilla. La información se
clasifica en dos niveles de profundidad.
Se debe propiciar la navegación transversal del contenido,
ofreciendo al usuario información contextual que le pueda ser
relevante (artículos relacionados por tema, por autor, los más
leídos, los más comentados, etc.)
Generar fuertes llamados a la acción con la presencia de
redes sociales y opciones para comentar al inicio y final de los
artículos.

48. www.ida.cl BENCHMARK / REVISTA CAPITAL
BENCHMARK
CONCLUSIONES/RECOMENDACIONES
Generar una ley cromática clara y precisa para los
elementos y su interacción.
Buscar dinamismo dentro de las columnas de
diagramación para la entrega de contenidos.
Tratar de ser simples en el uso de la tipografías para buscar
una lectura digerible y fácil de los contenidos.

49. www.ida.cl BENCHMARK / REVISTA CAPITAL
BENCHMARK
CONCLUSIONES/RECOMENDACIONES
No olvidar que la marca esté presente en todo el sitio de
manera que el usuario jamás olvide en dónde se informó.
Las suscripciones deben ser sencillas. Cuando sean pagadas
deben ser igual de simples, con precios publicados para
favorecer la compra.
El uso de redes sociales debe ser inteligente, contextual,
original y humanizado, de manera que colabore a la
promoción del contenido del sitio por parte de los usuarios
y ayuda al posicionamiento orgánico.
Es necesario encontrar formas de generar espacios
publicitarios que sean atractivos para usuarios y avisadores,
como reviews e integración con la lectura.

50. www.ida.cl Qué es el Diseño Responsive
QUÉ ES EL DISEÑO RESPONSIVE
El diseño que se adapta o responde a
cualquier formato y/o dispositivo.
Sin modificar el HTML
Mediante la detección de las
propiedades del navegador desde la
CSS. Ancho de pantalla, navegador,
etc.
Entonces no solo optimizamos para
los usuarios. Ahora consideramos los
dispositivos.
Hover v/s touch

51. www.ida.cl Qué es el Diseño Responsive
VENTAJAS DEL DISEÑO RESPONSIVE
SEO, una sola URL consistente
Contenido simple y necesario
Administración y mantención unificada

52. www.ida.cl Qué es el Diseño Responsive
NUEVOS CONCEPTOS RESPONSIVE
Columnas o grillas elástias
Imágenes responsivas. Tamaños y
densidad de pixeles (Retina) en
evolución
Menú para despliegue nativo (Lista)
Menos bloques y menos agrupaciones
es = a mayos posibilidad de adaptación
Mobile First:
Solo lo fundamental
Identificación de lo accesorio
Usuario más exigente

53. www.ida.cl Definiciones Estratégicas: cambiar paradigma

54. IDEAS
DIGITALES
APLICADAS
¿Quieres éxito para tu negocio digital? Toma el camino de IDA.
Conoce más en www.ida.cl