• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
IDA Responsive webprendedor 2012 - Capital.cl
 

IDA Responsive webprendedor 2012 - Capital.cl

on

  • 788 views

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 ...

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

Statistics

Views

Total Views
788
Views on SlideShare
781
Embed Views
7

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 7

https://twitter.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    IDA Responsive webprendedor 2012 - Capital.cl IDA Responsive webprendedor 2012 - Capital.cl Presentation Transcript

    • El viaje de IDA alDiseño Web Responsivo Responsive Web Desing Bajo una metodología deDiseño Centrado en el Usuario Maximiliano Martin www.ida.cl
    • www.ida.cl Maximiliano Martin Socio fundador IDA Algunos proyectos: GOBIERNO COMUNIDADESEmpresas en las que he trabajado: •www.senda.gob.cl • Elquintopoder.cl •www.cultura.gob.cl MEDIOSIDA (2010 - 2030) TURISMO • capital.clAyerViernes (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
    • 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.
    • 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.
    • www.ida.cl Metodología DCU Evaluación, cotización y desarrollo
    • www.ida.cl Metodología DCU Evaluación, cotización y desarrolloEstrategia Estudio Usuarios Arquitectura Diseño Visual Pro&Des
    • ¿Cómo llegamos a hacer el primer medio chileno con Diseño Responsive?
    • 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...
    • www.ida.cl Aplicada en diversos tipos de proyectos 2011
    • www.ida.cl Aplicada en diversos tipos de proyectos2012 Ustedes no han visto esto
    • www.ida.cl Aplicada en diversos tipos de proyectos Esto tampoco lo vieron
    • Casa de HerreroIDEASDIGITALESAPLICADAS Responsive Web Design
    • www.ida.cl Aplicada en diversos tipos de proyectos
    • www.ida.cl Aplicada en diversos tipos de proyectos
    • www.ida.cl Definiciones Estratégicas Estrategia y Planificación
    • www.ida.cl Definiciones Estratégicas ¿Cómo se define el éxito o fracaso del proyecto?
    • www.ida.cl Definiciones Estratégicas
    • www.ida.cl Definiciones Estratégicas: cambiar paradigma
    • www.ida.cl Definiciones Estratégicas: cambiar paradigma
    • 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
    • www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOSHeatmaps
    • www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOSHeatmaps
    • www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOSScrollmaps
    • www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOSScrollmaps
    • www.ida.cl ESTUDIO DE USUARIOS MAPAS TERMICOSConfetti
    • 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.
    • www.ida.cl Definiciones Estratégicas: verbalizar1. ¿Qué quiere el cliente?2. ¿Qué necesita para lograrlo?3. ¿Con qué recursos cuenta?
    • 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
    • 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: ObjetivosCon objetivos verbalizados se puede realizar el levantamiento derequerimientos:✓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 OnlineSe 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
    • 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 BENCHMARK / REVISTA CAPITALBENCHMARKDEFINICIÓNAnálisis comparativo de sitios web para destacar sus aspectospositivos y negativos que se traducen en buenas prácticaspara el diseño y desarrollo del nuevo Sitio Web de Revista Capital.
    • www.ida.cl BENCHMARK / REVISTA CAPITALBENCHMARKCRITERIOS 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.
    • www.ida.cl BENCHMARK //REVISTA CAPITAL BENCHMARK REVISTA CAPITALBENCHMARKSITIOS ANALIZADOS http://www.theatlanticwire.com/ http://www.guardian.co.uk/ http://allthingsd.com/ http://bigthink.com/
    • www.ida.cl BENCHMARK / REVISTA CAPITALResolución 1024x768:¿Responden? Sí!... ¿Scroll? Por supuesto, y bastante...
    • www.ida.cl BENCHMARK / REVISTA CAPITALTabletsNo se distingue de la versión móvil cuando existeEn The Guardian no se ajusta a las dimensiones
    • www.ida.cl BENCHMARK / REVISTA CAPITAL http://www.theatlanticwire.com/
    • www.ida.cl BENCHMARK / REVISTA CAPITALESTRUCTURA SIMPLE Y CLASICA
    • 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.
    • www.ida.cl BENCHMARK / REVISTA CAPITALBENCHMARKCONCLUSIONES/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.
    • www.ida.cl BENCHMARK / REVISTA CAPITALBENCHMARKCONCLUSIONES/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.
    • www.ida.cl BENCHMARK / REVISTA CAPITALBENCHMARKCONCLUSIONES/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.
    • 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
    • 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 Definiciones Estratégicas: cambiar paradigma
    • IDEAS DIGITALES APLICADAS¿Quieres éxito para tu negocio digital? Toma el camino de IDA. Conoce más en www.ida.cl