← "Así se ha hecho siempre" | ↑ Principal | Coca-Cola rediseña su imagen →

Una interfaz para la manipulación de información en la webArtículos

Escrito por Mark hace más de un año | 10 comentarios

La visión original de Tim Berners Lee respecto a la web nunca previó que hubiera millones de personas manipulando información desde el navegador. El contenido generado por usuarios ahora constituye una parte importantísima de la web, lo malo es que los navegadores (aún los más modernos) están un tanto atrasados con respecto a este fenómeno.

La web ya no es sólo un medio para consumir información, sino que también es un medio para producir información. Es algo que las aplicaciones de escritorio han hecho desde un principio, y lo hacen de manera satisfactoria. Pero las aplicaciones web tienen que recurrir a distintos trucos difíciles de implementar en los navegadores modernos (AJAX y Javascript avanzado) para imitar en funcionamiento de las APIs de los sistemas operativos.

Antes de que Flash proporcionara una manera automática para incluir barras de escroleo (eso que usas cuando no recurres a la rueda del mouse), cada desarrollador lo implementaba a su manera, y algunas implementaciones eran mejores que otras. Pero, en general, todas eran inferiores a las proporcionadas por el sistema operativo. Lo mismo sucede con las aplicaciones web: cada desarrollador implementa su imitación de algún elemento del sistema operativo, algunas buenas pero otras muy malas.

Todos estos elementos (llamémosle widgets) son creados por diseñadores de interfaz y programados por personas muy capaces. Después son analizados por expertos en usabilidad, lo cual resulta en un widget muy responsivo y fácil de usar. Si tuviéramos acceso a estos widgets la web sería un lugar mucho más consistente y rápido. Ya no tienes que re-implementar los widgets y no se tiene que descargar el pesado código javascript que generalmente los acompaña.

Gran parte de estas inquietudes ya se están resolviendo con XForms, la propuesta de la W3 para proporcionar capacidades de manipulación de datos al navegador. Pero todo esto se mueve a paso de tortuga, así que no esperen verlo pronto.

Pero transportémonos a un mundo de fantasía donde se pueda diseñar sin preocuparse por los detalles técnicos.

Selector de rangos numéricos

El otro día estaba acosando calificando mujeres en Hot or Not. Para los (pocos) que no sepan de qué trata este sitio, te presentan la foto de una persona y tú la calificas del uno al diez. Bien, el gran problema es que tuve es que segmentan la gente en un rango de edades bastante arbitrario.

¿Quién decidió que estas edades son parteagüas de la vejez? ¿Qué tal si mi interés está en acosar mujeres de 22 a 28? Diseñemos un widget para facilitar mi acoso:

hotornot.jpg Qué placentero es el diseño de interfaz al servicio los perdedores

Pero puede servir para cosas más útiles, aquí algunos ejemplos:

candidatos.gif

En el ejemplo de Shopping.com las cajitas donde puedes escribir el rango son muy buenas, pero con un selector de rangos podríamos mejorarlo un poco.

En el ejemplo de Idealista es correcto no empezar con un rango mínimo en el caso de costo, ni con un rango máximo en el caso del área (para muy poca gente el criterio "esta casa es demasiado grande" es un factor de descalificación). Cuando el rango mínimo o máximo siempre es fijo, se usa un slider con un solo control. Un ejemplo rápido para que se den una idea:

slider.gif Más funcionalidad en un espacio menor.

Selector de fechas

No hay nada que me frustre más que escribir fechas en la web. Nunca logro escribir las fechas como los formularios lo requieren (ya hablé sobre esto en la guía para escribir el tiempo). El código para hacer estos calendarios es inmenso, si el sistema operativo o el navegador lo proporcionara sería el hit.

Este es el ejemplo de XForms, me agrada bastante:

calendario.gif

El mes se escribe de manera humana (sin números) y puedes modificarlo desde el mismo campo, y recurres al calendario solo si lo necesitas. Aunque sí le daría una modernización al aspecto visual, y proveería una manera de bloquear fechas (¿qué tal si la fecha de envío no puede ser los fines de semana?).

Un selector de imágenes

Con la revolución de los sitios sociales, y en particular los sitios para compartir fotos (Flickr) nace la necesidad de un selector de imágenes especializado, en lugar del selector de archivos tradicional.

imageupload.jpg

La propuesta de la W3 me parece algo pobre, mejoré su propuesta combinando lo que ellos tienen con lo que hace iChat.

Así está mejor. Frecuentemente usamos las mismas fotos para avatars y cosas por el estilo, y es mejor que estén a la mano.

Campos especializados

Así es como funciona normalmente la validación en los formularios en la web:

  1. Escribes algo correctamente (de acuerdo a tu criterio)
  2. El formulario te dice que eres un idiota, que lo intentes de nuevo porque no le gusta cómo lo escribiste.
  3. Corriges y reenvías.

En las aplicaciones de escritorio no se te permite escribir letras en un campo que sólo acepte números, tú especificas los caracteres aceptables y sí el usuario intenta meter uno inválido símplemente no aparece. Y esa es la manera correcta de hacerlo.

El usuario nunca se equivoca, símplemente porque no se puede equivocar.

dns.gif Intenta escribir letras en tu ventana de configuración de la red (en Windows o Mac, no importa) y verás que no pasa nada.

Tablas ordenables

Así es como se ve el administrador de este blog (gestionado por Movable Type):

mt1.gif

Siempre he querido poder ordenar a todo a mi gusto, y modificar ciertas cosas sin tener que visitar la entrada en sí. Rediseñémoslo:

mt2.gif

Estas vistas son bastante comunes en las aplicaciones web, desgraciamente por la manera en la funciona la web sería bastante difícil implementarlo sin tener que reescribir la aplicación.

Conclusiones

El hecho de que los widgets sean provistos por el navegador o el sistema operativo lo hace accesible (un gran problema de las aplicaciones en AJAX), y también lo hace adaptable a otras plataformas. Si, por ejemplo, el calendario es muy pequeño para manipularse con tus dedotes desde el iPhone, Safari mostraría un calendario más grande del que normalmente se muestra.

Hay como mil otras cosas que me gustaría hacer desde el navegador: un selector de colores y otro de fuentes tipográficas para web, un editor WYSIWYG provisto por el sistema operativo, una barra de progreso para los uploads. El concepto de "aplicación web" realmente no estará completo hasta que tengamos acceso a las herramientas de manipulación de datos que provee el sistema operativo. Los desarrolladores están haciendo un trabajo impresionante con Javascript, pero a final de cuentas todo es un gran hack.

Comentarios Escribe un comentario

Escrito por:
DamagedGoods
Julio 16, 2007 8:33 AM

Totalmente de acuerdo. Nosotros en el proyecto actual estamos utilizando Dojo para proporcionar algunos de los elementos que comentas (DatePickers, tablas ordenables, combos de autocompletar, campos con máscara) y la experiencia de usuario es muy diferente.

Pero sí, no deja de ser "un gran hack".

Escrito por:
marcos
Julio 17, 2007 1:51 PM

me parece muy interesante lo que decis. realmente creo q los formularios en general en la web no son 100% funcionales, o mejor dicho no se adaptan al usuario quien es en fin el destinatario de la informacion. tambien tenes q considerar q muchas veces se usan esos rango apra q sea mas facil la administracion de la informacion e incluso para datos estadisticos!. Gracias che!.

Escrito por:
Tzek
Julio 17, 2007 5:06 PM

Fuerte tu cierre, pero sí, es un gran hack. No se si el problema es en la primera mitad correspondiente a la diversidad de plataformas y la segunda a la diversidad de navegadores.

Sería genial conseguir al final (y muy pronto...) una especie de sub-API común entre plataformas, que piense en el manejo de info considerando aplicaciones web, pero que al mismo tiempo nos induciría otra forma de manejar aplicaciones locales. Algo más allá del combo, el radio o el checkbox... tipo el "doble" slider que pusiste arriba. Desconozco si eso está directamente relacionado con lo de XForms.. es asi?

Saludos!

Escrito por:
German
Julio 24, 2007 10:54 PM

Orales Mark, como siempre, interesante tu post, aunque no tan bueno como el de los lolcats, jajaja. =P

En mi opinión, creo que el usar controles en web apps generados por el OS sería una excelente idea. Te ahorraría trabajo y sería consistente entre compues diferentes. En este momento de mi carrera, ODIO todo lo generado por JS. Creas paginas demasiado pesads con enormes problemas de accesibilidad y con cero degradacion controlada en ausencia de JS. Ingasss. Que el OS te aliviane tu carag como desarrollador Web se me haría la neta de planeta.

Odiarian esto los diseñadores graficos? Se sentirían "limitados" por controles generados por el OS? Sería interesante discutirlo...

Saludos!

Escrito por:
jesus
Julio 25, 2007 5:09 PM

bueno, supongo que para eso están surgiendo plataformas como SilverLight y AIR que añaden otros elementos para el mejor uso del web. En lo personal lo más difícil fue integrar el sort de columnas en una tabla... fiu... al final usé un script muy bueno que saqué de la smashing magazine... tal vez no lo mejor, pero funcional...

Escrito por:
alpha
Agosto 2, 2007 1:58 AM

Si chicos, el OS debería alivir la carga al desarrollador Web, estableciendo un sistema de intercomunicación con los diferentes servidores. Un saludo.

Escrito por:
jorge
Agosto 16, 2007 8:23 AM
Escrito por:
Anónimo
Marzo 6, 2009 7:34 AM

ddddddddd
ddddddddddddd

Escrito por:
Genaro
Junio 6, 2011 4:45 PM

Jajajajaja si esta bueno esto.

Escrito por:
Yayo
Junio 6, 2011 7:53 PM

Me gusta mucho su blog, escriban mas cosas de diseño o tecnologia.

Escribe un comentario

(opcional)

(opcional)