Diseño 2.0 Nuevos paradigmas de la Interfaz de Usuario

Nuevos paradigmas en

Interfaces de Usuario

Chema Martínez-Priego

Rafael Muñoz

6 de Octubre, 2007

Web 1.0 -> La web es el soporte (fin) para el contenido.

Web 2.0 -> La web es la plataforma (medio) para interaccionar con el contenido.

Nuevos paradigmas en Interfaces de Usuario

Introducción

La web vista con Lynx El Organizr de Flickr

Nuevos paradigmas en

Interfaces de Usuario

Chema Martínez-Priego

Rafael Muñoz

6 de Octubre, 2007

Web 1.0 -> La web es el soporte (fin) para el contenido.

Web 2.0 -> La web es la plataforma (medio) para interaccionar con el contenido.

Introducción

La web vista con Lynx El Organizr de Flickr

Nuevos paradigmas en Interfaces de UsuarioIntroducción

Las necesidades de los productores han cambiadoDiseñar para comunidades, no para individuos

Las expectativas de los usuarios han cambiadoQuieren controlar su información

La tecnología de ambas partes ha cambiadoEvolución en la tecnología de producción

EstandarizaciónLenguajes de programación

Evolución en los dispositivos de los clientesAumento del poder de computaciónSoporte de estándares

Nuevos actores

Usabilidad

Nuevos actores

Usabilidad

Nuevos actores

Usabilidad

Accesibilidad

Nuevos actores

Usabilidad

Accesibilidad

Diseño de Interacción

Nuevos actores

Usabilidad

Accesibilidad

Nuevos actores

Usabilidad

Accesibilidad

Nuevos actores

Usabilidad

Accesibilidad

Globalización

Internacionalización, no sólo linguística sino conceptual

Mitos del Diseño 2.0

Nuevos actores

Usabilidad

Accesibilidad

Globalización

Internacionalización, no sólo linguística sino conceptual

Mitos del Diseño 2.0

Nuevos paradigmas en Interfaces de UsuarioMitos del Diseño 2.0

Todos los hemos oído:

Bordes redondeados

Reflejos en un suelo mojado virtual

Bordes redondeados

Tipografías grandes sobre fondos blancos

Bordes redondeados

Una estrellita retro donde pone "Beta"

Por qué surgen algunas de estas modas:

Los bordes redondeados son una vía de escape a lo que erael diseño futurista hace 10 años, de líneas rectas.

Bordes redondeados

Una estrellita retro donde pone "Beta"

Los reflejos son un intento de hacer las interfaces mástáctiles, de humanizar el entorno. Apple los popularizó y suevangelismo no tiene límite últimamente...

Las tipografías grandes sobre fondos blancos vienen de lacorriente más extrema del diseño usable y accesible.

Y la estrellita con el "Beta"... sin comentarios.

Pero también:

Porque las capacidades técnicas evolucionan y utilizar lasnuevas capacidades es simplemente natural, creando una moda de facto.

Y la estrellita con el "Beta"... sin comentarios.

Pero también:

Porque finalmente los dispositivos de los usuarios pueden hacer muchas cosas que siempre se han querido hacer.

Pero también:

Porque hay que tener en cuenta que la funcionalidad de los sitios web ha cambiado, y es necesario adaptarse.

Pero también:

Porque la programación es cada vez más importante.

Qué es [realmente] el Diseño 2.0

Pero también:

Porque la programación es cada vez más importante.

Qué es [realmente] el Diseño 2.0

Nuevos paradigmas en Interfaces de UsuarioQué es [realmente] el Diseño 2.0

El diseño 2.0 no es una moda, es una necesidad.

Un estilo visual no hace que una web sea 2.0.

El objeto de la web 2.0 es la creación de aplicaciones quetienen que ser usadas.

Todas las actividades en torno a la creación del web 2.0(el diseño también) están supeditadas por la funciónoperativa de aplicación.

El diseño gráfico es arte porque busca lo bello

¿Que es bello?

El diseño gráfico es arte porque busca lo bello

¿Que es bello?

¿Que es bello?Lo bello es lo que se adecua a la naturaleza de la cosa

¿Cuál es la naturaleza de la web 2.0?Aplicaciones webEl usuario genera contenido y ejecuta funciones

El papel del diseño en la web 2.0 es dar respuesta a laspreguntas que surjan sobre las posibilidades de laaplicación

Que desaparezcan todos los elementos sobrantes

El papel del diseño en la web 2.0 es dar respuesta a laspreguntas que surjan sobre las posibilidades de laaplicación

Que la marca no sea más que un distintivo necesario

Que el marketing no interfiera en este tipo de aplicaciones

La labor del diseñador es decidir que limitacionesestablece en su diseño

Esta es la verdadera creatividad de un diseño

Dos principios universales del diseño que apoyan estatesis:

Pincipio de Pareto (Teoría 80/20)Navaja de Ockham

La tarea del diseñador es ejercer su libertad

Dos principios universales del diseño que apoyan estatesis:

Pincipio de Pareto (Teoría 80/20)Navaja de Ockham

El diseñador tiene que configurar EspacioTiempoOrden

Para ello se sirve de:La formaEl colorEl tamaño

El papel de la estética en la utilidadParece más fácil de utilizar

¿Nos dejamos llevar por las apariencias?

Vinculación emocional. ¿Ventaja o inconveniente?

Aplicaciones

Vinculación emocional. ¿Ventaja o inconveniente?

Aplicaciones

Nuevos paradigmas en Interfaces de UsuarioAplicaciones

¿Qué es una aplicación?

Una herramienta que ayuda al usuario.

¿Cuál es la diferencia?

Para muchos usuarios, ninguna. Eso es bueno.

Todos estamos acostumbrados a utilizar las aplicaciones en el entorno de escritorio, así que tenemos expectativas.

Las aplicaciones son un medio, no un fin.

¿Cómo afecta al diseño?

El volumen de los contenidos es variable

La estructura y el contenido de la página puedemodificarse dinámicamente

La longitud de los textos puede cambiar notablemente enfunción del idioma

Nuevos elementos de interacción con sus estándares decomportamiento heredados del escritorio

Evitar el manual de instrucciones

Diseño modular

Nuevos paradigmas en Interfaces de UsuarioDiseño modular

La web se ha llenado de aplicaciones de uso individual o en grupo.

Diseño modular

Estamos entrando de lleno a una nueva forma de hacer web.

Internet ya no es una ventana al mundo sino unahabitación personalizada MySpace.

El diseño gráfico uno de los principales afectados en estecambio de paradigma. Surgen nuevas limitaciones.

La importancia de Facebook y la revolución deOpenSocial.

El diseño gráfico uno de los principales afectados en estecambio de paradigma. Surgen nuevas limitaciones.

Los módulos o widgets afectan a toda la web 2.0.

Las aplicaciones son exportables a cualquier plataforma.

Los banners se conviertes en microaplicaciones.

No podemos controlar el contexto.

Todo es 100% personalizable.

En el extremo opuesto encontramos el diseño paradispositivos móviles.

Todo es 100% personalizable.

Los protagonistas soniPhone/iPodTeléfono móvilPDA

ImplicacionesReducción del tamaño de pantallaBaja resoluciónDesaparece el mouse overPoca precisión de los punteros

Sustrato tecnológico

Nuevos paradigmas en Interfaces de UsuarioSustrato tecnológico

Facilitadores

Estandarización

Programación cliente en JavaScript

Programación cliente en Flash

Comunicación asíncrona con el servidor

Sustrato tecnológico

Facilitadores

Estandarización

Programación cliente en JavaScript

Programación cliente en Flash

Comunicación asíncrona con el servidor

Estandarización

Una liberación y una esclavitud a la vez.

Estandarización

Los diseñadores tienen que conocer el medio, susposibilidades y sus limitaciones.

Estandarización

Hay que ser conscientes de la pluralidad de soportes y suscaracterísticas.

Estandarización

Hay que ser conscientes de la pluralidad de soportes y suscaracterísticas.

Programación cliente

Nuevas posibilidades de interacción

Eye Candy *y* funcionalidad

Ejemplo: http://secuoyas.fluxiom.com

Ejemplo: http://flickr.com/

Ejemplo: http://maps.google.es

Ejemplo: http://secuoyas.fluxiom.com

Ejemplo: http://flickr.com/

Ejemplo: http://maps.google.es

Flash & Flex

No sólo animación.

Flash & Flex

No tiene elementos estándares

Flash & Flex

Muy potente

Flash & Flex

Muy potente

Flash & Flex

Muy potente

Ejemplo: http://kuler.adobe.com/

Ejemplo: http://preview.buzzword.com

Nuevos paradigmas en Interfaces de UsuarioConclusiones

Ya no es sólo Diseño, es Experiencia de Usuario

El Diseño es una pieza más, junto con la AI, la usabilidad,la accesibilidad, la interacción... Cada vez intervienen másperfiles en un producto

Flash & Flex

Muy potente

Ejemplo: http://kuler.adobe.com/

Ejemplo: http://preview.buzzword.com

Hay que conocer el medio y lo que hace el resto del equipo.

Hay que hacer diseños tolerantes y flexibles con losdistintos dispositivos y situaciones de los usuarios.

Mil Gracias

Secuoyashttp://www.secuoyas.comhttp://www.secuoyas.com/blog/[email protected]

Chema Martí[email protected]

Rafael Muñ[email protected]

Mil Gracias

Secuoyashttp://www.secuoyas.comhttp://www.secuoyas.com/blog/[email protected]

Chema Martí[email protected]

Rafael Muñ[email protected]

Diseño 2.0 Nuevos paradigmas de la Interfaz de Usuario

Technology

Transcript of Diseño 2.0 Nuevos paradigmas de la Interfaz de Usuario