diseño para la web social - de la idea al proyecto

161
Diseño para la Web Social De la idea al proyecto Master y Doctorado en Ingeniería Web Universidad de Oviedo 9 mayo 2008 Luis Villa [email protected]

Upload: luis-villa

Post on 03-Dec-2014

8.537 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Diseño para la Web Social - de la idea al proyecto

Diseño para la Web SocialDe la idea al proyecto

Master y Doctorado en Ingeniería WebUniversidad de Oviedo

9 mayo 2008

Luis [email protected]

Page 2: Diseño para la Web Social - de la idea al proyecto

La Coctelera

Page 3: Diseño para la Web Social - de la idea al proyecto

La Comunidad El País

Page 4: Diseño para la Web Social - de la idea al proyecto

MTV.es

Page 5: Diseño para la Web Social - de la idea al proyecto

ADN.es

Page 6: Diseño para la Web Social - de la idea al proyecto
Page 7: Diseño para la Web Social - de la idea al proyecto

Una historia

Page 8: Diseño para la Web Social - de la idea al proyecto

30’s Vannevar Bush

Page 9: Diseño para la Web Social - de la idea al proyecto
Page 10: Diseño para la Web Social - de la idea al proyecto

50’s Eugene Garfield

Page 11: Diseño para la Web Social - de la idea al proyecto

60’s Ted Nelson

Page 12: Diseño para la Web Social - de la idea al proyecto
Page 13: Diseño para la Web Social - de la idea al proyecto

60’s Doug Engelbart

Page 14: Diseño para la Web Social - de la idea al proyecto
Page 15: Diseño para la Web Social - de la idea al proyecto

80’s Microsoft

Page 16: Diseño para la Web Social - de la idea al proyecto

90’s Tim Berners Lee

Page 17: Diseño para la Web Social - de la idea al proyecto
Page 18: Diseño para la Web Social - de la idea al proyecto
Page 19: Diseño para la Web Social - de la idea al proyecto
Page 20: Diseño para la Web Social - de la idea al proyecto
Page 21: Diseño para la Web Social - de la idea al proyecto
Page 22: Diseño para la Web Social - de la idea al proyecto
Page 23: Diseño para la Web Social - de la idea al proyecto

Terra

Page 24: Diseño para la Web Social - de la idea al proyecto

Geocities

Page 25: Diseño para la Web Social - de la idea al proyecto
Page 26: Diseño para la Web Social - de la idea al proyecto
Page 27: Diseño para la Web Social - de la idea al proyecto
Page 28: Diseño para la Web Social - de la idea al proyecto

Geoffrey Moore’s Adoption Curve. Adaptación Don Norman: http://www.jnd.org

Page 29: Diseño para la Web Social - de la idea al proyecto
Page 30: Diseño para la Web Social - de la idea al proyecto
Page 31: Diseño para la Web Social - de la idea al proyecto

Desencadenante

Tecnológico

Vis

ibilid

ad

Madurez

Pico de las

Expectativas

Infladas Cuneta de la

Desilusión

Ladera de la

Iluminación

Meseta de la

Productividad

Fuente: Curva de Gartner. Gartner

Puf!

Page 32: Diseño para la Web Social - de la idea al proyecto

Google IPO19 ago 2004

Crash Puntocom

Crisis y huída de recursos del sector

Netscape IPO9 ago 1995

Page 33: Diseño para la Web Social - de la idea al proyecto

CRISIS.COM

Page 34: Diseño para la Web Social - de la idea al proyecto

Estándares Web

Page 35: Diseño para la Web Social - de la idea al proyecto
Page 36: Diseño para la Web Social - de la idea al proyecto

Blogs, RSS

Page 37: Diseño para la Web Social - de la idea al proyecto

Blogger

Page 38: Diseño para la Web Social - de la idea al proyecto

Wilkipedia

Page 39: Diseño para la Web Social - de la idea al proyecto

19 de agosto 2004IPO de Google

Page 40: Diseño para la Web Social - de la idea al proyecto

2002 - David Sifry

Emprendedor Open Source¡Millones de blogs ahí fuera! Alguno tiene que ser interesante!

http://www.flickr.com/photos/thomashawk/396470587/

Page 41: Diseño para la Web Social - de la idea al proyecto

Technorati

Page 42: Diseño para la Web Social - de la idea al proyecto
Page 43: Diseño para la Web Social - de la idea al proyecto
Page 44: Diseño para la Web Social - de la idea al proyecto

http://www.flickr.com/photos/laughingsquid/260374290/

2004 - Joshua Schachter

Un programador de Morgan Stanley, NYPublica sus enlaces en un servidor de internet

Page 45: Diseño para la Web Social - de la idea al proyecto

del.icio.us

Page 46: Diseño para la Web Social - de la idea al proyecto

2002 - Stewart Butterfield, Catherina Fake

Pareja de Vancouver prepara un video juego online.

Fuente: Wikipedia

Page 47: Diseño para la Web Social - de la idea al proyecto
Page 48: Diseño para la Web Social - de la idea al proyecto
Page 49: Diseño para la Web Social - de la idea al proyecto

2004 - Kevin Rose

Programador reconvertido a presentador de televisión.Busca un experimento para que los espectadores participen en su programa.

Fuente: Wikipedia

Page 50: Diseño para la Web Social - de la idea al proyecto

Digg.com

Page 51: Diseño para la Web Social - de la idea al proyecto

Digg.com 2008

Page 52: Diseño para la Web Social - de la idea al proyecto

2002 - RC

Un estudiante de informática la Universidad de SouthhamptonPlugin de tracking de música

Programadores alemanes y austriacos crean una Radio Online y comunidad de música.

Page 53: Diseño para la Web Social - de la idea al proyecto

Audioscrobbler, Last.fm

Page 54: Diseño para la Web Social - de la idea al proyecto

2005 - Chad Hurley, Steve Chen, Jawed Karim

Empleados de PaypalAcuden a una fiesta en San Francisco donde graban videos...

Fuente: Wikipedia

Page 55: Diseño para la Web Social - de la idea al proyecto
Page 56: Diseño para la Web Social - de la idea al proyecto
Page 57: Diseño para la Web Social - de la idea al proyecto

2001 - Jason Fried

Empresario-diseñador en ChicagoBusca una herramienta de gestión de proyectos

Estudiante de CopehnagueSe ofrece como programadorLímite: 10 horas/semana.

Page 58: Diseño para la Web Social - de la idea al proyecto

Yahoo Maps. Teleatlas

Page 59: Diseño para la Web Social - de la idea al proyecto

Basecamp

Page 60: Diseño para la Web Social - de la idea al proyecto

Ruby on Rails

Page 61: Diseño para la Web Social - de la idea al proyecto
Page 62: Diseño para la Web Social - de la idea al proyecto
Page 63: Diseño para la Web Social - de la idea al proyecto

2005 - Eduardo Manchón, Joaquín Cuenca

Dos españoles. Uno consultor de usabilidad y aficionado a la fotografía establecido en Alemania.Otro, hacker, programador ubicado en Francia.

Page 64: Diseño para la Web Social - de la idea al proyecto
Page 65: Diseño para la Web Social - de la idea al proyecto

Panoramio

Page 66: Diseño para la Web Social - de la idea al proyecto

Google y Yahoo salen de compras

Page 67: Diseño para la Web Social - de la idea al proyecto

Web 2.0Institucionalización de la conversación

Page 68: Diseño para la Web Social - de la idea al proyecto
Page 69: Diseño para la Web Social - de la idea al proyecto

“Superhéroes” digitales

Page 70: Diseño para la Web Social - de la idea al proyecto
Page 71: Diseño para la Web Social - de la idea al proyecto

Google cómprame

Page 72: Diseño para la Web Social - de la idea al proyecto
Page 73: Diseño para la Web Social - de la idea al proyecto

Puf!

Puf!

Puf!

Puf!

1.0

2.0

3.0

4.0

Page 74: Diseño para la Web Social - de la idea al proyecto

Trulia.com

Page 75: Diseño para la Web Social - de la idea al proyecto

Flickr Graph

Page 76: Diseño para la Web Social - de la idea al proyecto

Programmableweb

Page 77: Diseño para la Web Social - de la idea al proyecto

Actividad socialWeb como plataforma de participación

Page 78: Diseño para la Web Social - de la idea al proyecto

TaggingEl usuario como creador de significado

Page 79: Diseño para la Web Social - de la idea al proyecto

Amgem California Tour

Page 80: Diseño para la Web Social - de la idea al proyecto

Digg Labs

Page 81: Diseño para la Web Social - de la idea al proyecto

En la web todo es diseño... TODO

Page 82: Diseño para la Web Social - de la idea al proyecto

Proyectos “laterales”Menos personas

Menos tiempoMenos presupuesto

Page 83: Diseño para la Web Social - de la idea al proyecto
Page 84: Diseño para la Web Social - de la idea al proyecto

Convertir debilidades en fortalezasSun Tzu. El Arte de la Guerra

Page 85: Diseño para la Web Social - de la idea al proyecto

Proyectos pequeños y centrados

Page 86: Diseño para la Web Social - de la idea al proyecto

Fuente: Ankaj, Gopal. Yahoo

Page 87: Diseño para la Web Social - de la idea al proyecto

Haz cosas que la gente quiera usar...¡Te ayudarán!

Page 88: Diseño para la Web Social - de la idea al proyecto

Datos abiertos: RSS,APIs, Web Services,

Page 89: Diseño para la Web Social - de la idea al proyecto

¿Televisión?

Page 90: Diseño para la Web Social - de la idea al proyecto

Uso creativo de tecnologías ya disponibles:

AJAX, microformatos, REST...

Page 91: Diseño para la Web Social - de la idea al proyecto

Comunidades de desarrolladores

Page 92: Diseño para la Web Social - de la idea al proyecto

Diseño centrado y valienteComienza por un problema cercano...

Page 93: Diseño para la Web Social - de la idea al proyecto

“Diseño y usuarios

“Si hace años le hubiera preguntado a la gente que quería para desplazarse me hubieran respondido,... caballos más rápidos”

Henry Ford

Page 94: Diseño para la Web Social - de la idea al proyecto
Page 95: Diseño para la Web Social - de la idea al proyecto

“Diseño y usuarios

“Si le preguntas al público que creen que necesitarán, siempre estarás detrás de todos. Nunca avanzarás a no ser que pienses diez años en adelante y crees un mercado para los productos que crees que el mercado necesitará entonces”

Morita, SONY

Page 96: Diseño para la Web Social - de la idea al proyecto
Page 97: Diseño para la Web Social - de la idea al proyecto

“Diseño y usuarios

“La gente no sabe lo que quiere hasta que no lo ve”

Steve Jobs

Page 98: Diseño para la Web Social - de la idea al proyecto
Page 99: Diseño para la Web Social - de la idea al proyecto
Page 100: Diseño para la Web Social - de la idea al proyecto

Aprende y crece con tus usuarios

Page 101: Diseño para la Web Social - de la idea al proyecto

Cómo evolucionar...

Page 102: Diseño para la Web Social - de la idea al proyecto

1996

Page 103: Diseño para la Web Social - de la idea al proyecto

1997

Page 104: Diseño para la Web Social - de la idea al proyecto

1998

Page 105: Diseño para la Web Social - de la idea al proyecto

Texto

1999

Page 106: Diseño para la Web Social - de la idea al proyecto

2000

Page 107: Diseño para la Web Social - de la idea al proyecto

2001

Page 108: Diseño para la Web Social - de la idea al proyecto

2002

Page 109: Diseño para la Web Social - de la idea al proyecto

2003

Page 110: Diseño para la Web Social - de la idea al proyecto

2004

Page 111: Diseño para la Web Social - de la idea al proyecto

2005

Page 112: Diseño para la Web Social - de la idea al proyecto

Hoy...

Page 113: Diseño para la Web Social - de la idea al proyecto

Todo en uno...

Page 114: Diseño para la Web Social - de la idea al proyecto

1998

Page 115: Diseño para la Web Social - de la idea al proyecto

1999

Page 116: Diseño para la Web Social - de la idea al proyecto

2001

Page 117: Diseño para la Web Social - de la idea al proyecto

2002

Page 118: Diseño para la Web Social - de la idea al proyecto

2003

Page 119: Diseño para la Web Social - de la idea al proyecto

2004

Page 120: Diseño para la Web Social - de la idea al proyecto

2005

Page 121: Diseño para la Web Social - de la idea al proyecto

2007

Page 122: Diseño para la Web Social - de la idea al proyecto

Hoy...

Page 123: Diseño para la Web Social - de la idea al proyecto

Hacer una cosa y bien

Page 124: Diseño para la Web Social - de la idea al proyecto

Cuidado con la tecnología!

Page 125: Diseño para la Web Social - de la idea al proyecto
Page 126: Diseño para la Web Social - de la idea al proyecto
Page 127: Diseño para la Web Social - de la idea al proyecto
Page 128: Diseño para la Web Social - de la idea al proyecto
Page 129: Diseño para la Web Social - de la idea al proyecto

Código MSIE sucio y pesado, no accesibles, URLs tecnodependientes, dificultan colaboración, no evolutivos

devoradores de recursos, falsa escalabilidad...

Page 130: Diseño para la Web Social - de la idea al proyecto

¡Oblígales a cumplir con los estándares!

¡En serio!

Page 131: Diseño para la Web Social - de la idea al proyecto

Cuidado con la metodología!

Que me lea... qué?!

Page 132: Diseño para la Web Social - de la idea al proyecto

Los usuarios son tontos

Desarrollador: exige soporte de usabilidad y diseño

Page 133: Diseño para la Web Social - de la idea al proyecto
Page 134: Diseño para la Web Social - de la idea al proyecto

La web social

Page 135: Diseño para la Web Social - de la idea al proyecto

Creación de espacios de información que generen valor a partir de la

interacción egoísta de sus usuarios

Page 136: Diseño para la Web Social - de la idea al proyecto

de la jerarquía a la red

Lectura Conversacional

Page 137: Diseño para la Web Social - de la idea al proyecto

adactio.com/extras/lifestream

Page 138: Diseño para la Web Social - de la idea al proyecto

Redes Sociales

Personas

LinkedinMySpaceFacebook

BeboFriendster

Orkut

Geo Servicios

Cartografía

GMapsYahoo Maps

OpenStreet Map

Objetos sociales

Digitales / físicos

del.icio.usDopplr

Upcoming.orgLast.fmPlazesOdeo11870FlickrJaiku

Page 139: Diseño para la Web Social - de la idea al proyecto

Aquellos que sirven a las personas para hablar y establecer conversaciones en torno a ellos.

Objetos sociales

Page 140: Diseño para la Web Social - de la idea al proyecto

Comentar

Recomendar

Ver

Puntuar

Compartir

MúsicaMySpaceLast.fmPandora

FotosFlickr

Photobucket

StatusTwitterJaiku

Pownce

VideosYoutubeVimeoBlip.tv

Unvlog.com

Favoritosdel.icio.us

ma.gnolia.com

MascotasDogsterCatster

“Celebrities”TechcrunchLugares

11870Plazes

Algo de que hablar...

Page 141: Diseño para la Web Social - de la idea al proyecto

Widgets

Contenido

Comentarios / participación

Acciones sobre objeto

Compartir, guardar, puntuar...

Autor

Perfil, contacto

Archivos

Fecha / temas

Tags / datos

Red/grupos

Nombre del sitio

Navegación secciones

RSS

Post Foto

Vídeo

Widgets

Actividad en otros sites

Música, fotos, redes

Sitio

Page 142: Diseño para la Web Social - de la idea al proyecto

?

Contenido

Perfil

Identidad

Contactos

Intereses

Creación

Compartir

Comentar

Etiquetar

Críticar

Valorar

Guardar como contacto

Consumir

Filtrar

Descubrir

Contenido ¿mejorado?

Filtros

Inteligencia colectiva

¿Propuesta de valor?

Registro

Barreras de entrada

Mecánica de participación

Grupos

Líderes

Expertos

Page 143: Diseño para la Web Social - de la idea al proyecto
Page 144: Diseño para la Web Social - de la idea al proyecto

67.860.860 vistas

Page 145: Diseño para la Web Social - de la idea al proyecto
Page 146: Diseño para la Web Social - de la idea al proyecto

¿Y el modelo de negocio?O cómo no morir de éxito

Page 147: Diseño para la Web Social - de la idea al proyecto

Basecamp - 37 Signals

Page 148: Diseño para la Web Social - de la idea al proyecto

MercadoUsuarios/Clientes

Competidores

Márketing

InfraestructuraPersonal

Procesos

Tecnología

Partners

CostesPersonal

Instalaciones

Hosting

Hardware

Licencias

IngresosPublicidad

Cuotas

Servicios

Intermediación

Ventas

Producto / ServicioEntrega = Interfaz

ResultadoIngresos - Costes

Page 149: Diseño para la Web Social - de la idea al proyecto

Beneficios

1. Publicidad Technorati, Digg, menéame

2. Cuentas “Freemium” Flickr, Last.fm, Linkedin

3. Servicios inteligencia Technorati, Trulia

4. Mejora lateral de otros servicios Last.fm, del.icio.us, Amazon...

5. Experimentación e innovación Digg Labs, Twitter, del.icio.us

Page 150: Diseño para la Web Social - de la idea al proyecto

ProductosSoftware

ServicioAplicación

Contenidos

Gratuito Pago LibreDonaciones

Uso LibrePago por servicios

FreemiumCuenta Pro

Pago Libre Pago

Neg

oci

o

Modelo de Ingresos

Flickrdel.icio.us

digg

YouTube

MySpace

Blogger

Google Docs

last.fmLinkedin

Pandora

Match

Ning

Wordpress

Movable Type

VOX

La Coctelera

Menéame

Wikimedia

Gmail

Skype

Technorati

Proveedor servicios-datos

Open Source

Basecamp

Contenido abiertoRedes Sociales

SoftwareComerciantes

Intermediación

Netflix

Amazon

iTunes

Publicidad

Adaware-se

Twitter

Wikipedia

Creative Commons

Musicbrainz

Google Adsense

Revver Blip.tv

Squidoo

Newsvine

eBay

Facebook

Fuente (Adaptado)L. GrivetWeb Business Models 2.0

Page 151: Diseño para la Web Social - de la idea al proyecto

España“proyectos laterales”

Page 152: Diseño para la Web Social - de la idea al proyecto

Menéame

Page 153: Diseño para la Web Social - de la idea al proyecto

nvivo.es

Page 154: Diseño para la Web Social - de la idea al proyecto

Panoramio

Page 155: Diseño para la Web Social - de la idea al proyecto

La Coctelera

Page 156: Diseño para la Web Social - de la idea al proyecto

Unvlog.com

Page 157: Diseño para la Web Social - de la idea al proyecto

Piensa...

Ninguno de estos proyectos se hubiera hecho si se hubiera pensado en el

dinero desde el comienzo.

Page 158: Diseño para la Web Social - de la idea al proyecto

¿Te apasiona esto?

1. Tu carrera profesional depende de tí, no de las empresas.

2. Busca proyectos laterales, si no sale bien aprenderás mucho.

3. Busca una idea: detecta un problema o necesidad y pégate a él.

4. Haz las cosas bien: tus usuarios son lo primero

5. Mantén la simplicidad o haz sencillo lo complejo.

6. No te ciegues con la tecnología.

7. Siempre en evolución: itera, itera...

8. Busca colegas, relaciónate, intercambia experiencias, aprende.

Page 159: Diseño para la Web Social - de la idea al proyecto

¡Disfruta del viaje!

Page 160: Diseño para la Web Social - de la idea al proyecto
Page 161: Diseño para la Web Social - de la idea al proyecto

Contactoblog > [email protected]

Fotos: Luis Villawww.flickr.com/photos/maguisso