En estos últimos años han aparecido muchos conceptos e ideas para facilitar la interacción del usuario con la web, yo diría que desde el momento en que se pueden realizar llamadas asíncronas a servidores web.

Uno de estos conceptos es el “edit in place”, que no me atrevo a traducir, pero si me atreviera sería algo como “editar en el sitio”.

El concepto de “edit in place” es muy simple. Se trata de convertir en editable un texto que a priori no lo es.  La idea de esto es evitar usar formularios o campos de formularios para que la información quede más bonita en pantalla, pero al mismo tiempo, permitiendo editar esa misma información sin tener que ir a otra página.

En Google, Flickr y otros muchos sitios lo usan desde hace tiempo.

A continuación un ejemplo de Google Analytics:

Como se puede ver, al cargar la página de Analytics sale un listado con todas las cuentas e información asociada a cada una de ellas (información que he borrado y aparece en blanco).

A priori no hay nada editable, sin embargo si pongo el ratón encima de Artypist (puesto que visualmente parece un enlace), resulta que cambia el estilo de esa celda, y me aparece un botón con un  lapiz dibujado (claramente me está diciendo, si me pinchas me convierto en editable). Vease la siguiente imágen:

Finalmente, puedo optar por pinchar en Artypist y seguir el enlace, o bien pulsar el botón de editar. Si finalmente lo pincho, tendríamos el edit-in-place:

Como veis, el texto de “Artypist” en azul se ha cambiado por un text input, y me ha aparecido el botón de Save y Cancel.

El problema de utilizar los edit in place, es que los campos que son editables y los que no lo son, a priori son indistinguibles, por lo que hay que establecer pistas visuales que ayuden al usuario a identificarlos fácilmente. Por ejemplo usar un color distinto, poner un Edit pequeñito, poner un botón, que al pasar el ratón por encima aparezca el botón…

En el caso de Google Analytics, para este ejemplo en concreto, se puede ver que necesariamente tengo que pasar el ratón por encima de Artypist  y el hecho de que se me ilumine esa celda y me aparezca un botoncito con un lapiz, es un claro signo de que ese campo es editable. Está bien pensado porque necesariamente tengo que pasar el ratón por encima para seguir viendo estadísticas.

La otra cosa que me gusta, es que cuando el campo se convierte en editable, me aparece el botón de guardar y la palabra “cancelar” a la derecha, y esto es algo que visualmente no deja lugar a dudas.

Trackback URL

ajax, edit in place