Post on 13-Jun-2015
description
Maximiliano Martin
El viaje de IDA al Diseño Web Responsivo
Responsive Web Desing
Bajo una metodología de
Diseño Centrado en el Usuario
www.ida.cl
Maximiliano Martin
Socio fundador IDA
GOBIERNO •www.senda.gob.cl•www.cultura.gob.cl
TURISMO•Thesingular.cl•LodgeAndino.cl
MOBILE• Sbif• PUC
VISUALIZACION DATA• Codelco
VTR•Televisionvtr.cl•Guía TV•VTR.com
MUSEOS• Museo de la Memoria• Museo Salvador Allende
Algunos proyectos:
www.ida.cl
Empresas en las que he trabajado:
IDA (2010 - 2030) AyerViernes (2001 -2009)
COMUNIDADES• Elquintopoder.cl
MEDIOS• capital.cl• El Mostrador Mercados
SISTEMAS• Huella Salud• ZEALtouch
ANTERIORES • Banco Chile• Banco Edwards• Descorchados• eii.ucv.cl• Cocha• Minrel• Mineduc• Política Stereo• Fundación Chile• Banchile• Casa de Moneda•
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.
www.ida.cl
Metodología DCU
- General y profundo conocimiento del medio digital.
- Tomamos tus ideas y trabajamos con ellas.
- Conocemos tu consumidor final: el usuario.
- Investigamos tu competencia y tus pares.
Planificamos todos los detalles de tu proyecto.
- Diseñamos para el usuario, no para el cliente.
- Comunicamos de forma atractiva y fácil.- Implementamos innovando y cumpliendo
estándares.
- Y siempre... siempre trabajamos en equipo contigo.
El Éxito de tus Ideas.
www.ida.cl
Metodología DCU
Pro&DesDiseño VisualArquitecturaEstudio UsuariosEstrategia
Evaluación, cotización y desarrollo
www.ida.cl
¿Cómo llegamos a hacer el primer medio chileno
con Diseño Responsive?
Nicolás SahliDirector 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...
Aplicada en diversos tipos de proyectoswww.ida.cl
2010
2012
Aplicada en diversos tipos de proyectoswww.ida.cl
Ustedes no han visto esto
Aplicada en diversos tipos de proyectoswww.ida.cl
Esto tampoco lo vieron
Responsive Web Design
IDEAS DIGITALES APLICADAS
Casa de Herrero
¿Cómo se define el éxito o fracaso del proyecto?
Definiciones Estratégicaswww.ida.cl
ESTUDIO DE USUARIOS MAPAS TERMICOSwww.ida.cl
MAPAS TERMICOS DE NAVEGACIÓN ACTUAL
HeatmapsScrollmapsConfetti
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
www.ida.cl
CONCLUSIONES MAPAS TÉRMICOS
Lector incipiente:
Lector antiguo ocasional:
Lector antiguo asiduo:
Nuevo en el círculo, con poco tiempo y necesita validarse con sus pares y jefes.Familiarizada con el medio equilibra información de poder con datos de eventos y/o sociales.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.
ESTUDIO DE USUARIOS MAPAS TERMICOS
1. ¿Qué quiere el cliente?
2. ¿Qué necesita para lograrlo?
3. ¿Con qué recursos cuenta?
Definiciones Estratégicas: verbalizarwww.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
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
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)
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
www.ida.cl
Definiciones Estratégicas: Metodología
Detecta Minimiza Cuantifica
www.ida.cl
Definiciones Estratégicas: Metodología
?? ?? ?
Detecta Minimiza Cuantifica
www.ida.cl
Definiciones Estratégicas: Metodología
?? ?
Detecta Minimiza Cuantifica
www.ida.cl
Definiciones Estratégicas: Metodología
?$? ? $$$
Detecta Minimiza Cuantifica
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
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
Se debían considerar varios aspectos:
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
www.ida.cl
BENCHMARKDEFINICIÓ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.
BENCHMARK / REVISTA CAPITALwww.ida.cl
BENCHMARKCRITERIOS 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.
BENCHMARK / REVISTA CAPITALwww.ida.cl
BENCHMARKSITIOS ANALIZADOS
BENCHMARK / REVISTA CAPITAL
http://www.theatlanticwire.com/ http://www.guardian.co.uk/
http://allthingsd.com/ http://bigthink.com/
BENCHMARK / REVISTA CAPITALwww.ida.cl
Resolución 1024x768: ¿Responden? Sí!... ¿Scroll? Por supuesto, y bastante...
BENCHMARK / REVISTA CAPITALwww.ida.cl
TabletsNo se distingue de la versión móvil cuando existeEn The Guardian no se ajusta a las dimensiones
BENCHMARK / REVISTA CAPITALwww.ida.cl
http://www.theatlanticwire.com/
BENCHMARK / REVISTA CAPITALwww.ida.cl
BENCHMARK / REVISTA CAPITALwww.ida.cl
ESTRUCTURA SIMPLE Y CLASICA
BENCHMARK / REVISTA CAPITALwww.ida.cl
Artículos en header se pierden en una sección dispuesta generalmente para publicidad, termina siendo un espacio desaprovechado.
Portada sigue lógica de “río de noticias”, es excesivamente largo, con un único gran destacado inicial.
Menú superior sin exceso de elementos que refleja una navegación simple y clara.
NAVEGACIÓN SIMPLE Y CLARA
Elementos accesorios, tienen cabida en el menú del footer
BENCHMARKCONCLUSIONES/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.
BENCHMARK / REVISTA CAPITALwww.ida.cl
BENCHMARKCONCLUSIONES/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.
BENCHMARK / REVISTA CAPITALwww.ida.cl
BENCHMARKCONCLUSIONES/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.
BENCHMARK / REVISTA CAPITALwww.ida.cl
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
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
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
www.ida.cl Qué es el Diseño Responsive
IDEAS DIGITALES
APLICADAS
¿Quieres éxito para tu negocio digital? Toma el camino de IDA.Conoce más en www.ida.cl