Tip:
Highlight text to annotate it
X
Hola, mi nombre es Olga Carreras. Soy consultora en experiencia de usuario, especializada en
usabilidad, accesibilidad y arquitectura de información, y en este vídeo os voy a explicar
la importancia de prototipar una aplicación web antes de comenzar a implementarla y a
recomendaros recursos que os ayuden a plantear con éxito vuestros propios prototipos.
Soy la autora del blog Usable y accesible, donde comparto la experiencia y los conocimientos
que he ido acumulando desde que comencé a participar en desarrollos web en el año 99.
Antes de empezar, estas son las direcciones de mi blog y de mi web en las que puedes encontrar
información sobre mí y sobre mi trabajo, así como artículos y recursos relacionados
con la experiencia de usuario. Podéis contactar conmigo a través de mi
web o de mi cuenta de Twitter. La responsabilidad de un arquitecto de información,
es, tal y como la explica Jesse James Garrett en su conocido libro “Los elementos de la
experiencia de usuario”: identificar los objetivos del proyecto y las necesidades de
los usuarios, especificar las funcionalidades y requerimientos de la aplicación web, definir
y diseñar los sistemas de navegación, organización, etiquetado y búsqueda, y finalmente realizar
el prototipado de la aplicación, que es lo que vamos a tratar en este vídeo.
Nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar
la información de manera efectiva. De la misma manera que un arquitecto realiza
los planos y la maqueta del edificio antes de que este comience a construirse; los arquitectos
de información nos valemos de la diagramación y el prototipado para especificar cuál será
la organización, estructura, navegación y funcionamiento de la aplicación web. Es
decir, al igual que ellos, realizamos planos y maquetas del sitio antes de que este comience
a construirse. Los planos, son diagramas de organización
y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo
o mapa web. Será una constante a lo largo del vídeo
que os indique los diferentes nombres que recibe un mismo tipo de diagramación o de
maqueta, pues diferentes autores los denominan de diferente manera y no es una terminología
que esté claramente asentada todavía. A la hora de realizar la diagramación de
una aplicación web lo más importante es que sea comprensible y refleje con claridad
la estructura, el flujo de navegación y la relación entre los elementos.
Existen diferentes propuestas para realizar la diagramación de una aplicación web. Un
vocabulario muy utilizado y que os recomiendo conocer es el "Vocabulario visual para describir
arquitectura de información y diseño de interacción" de James Garrett, uno de cuyos
libros os recomendaba anteriormente. Garret es un destacado arquitecto de información,
muy conocido también por acuñar el término AJAX en el año 2005.
El diagrama que veis en pantalla es un ejemplo de diagramación de Garret de la aplicación
web Yahoo Mail. En su artículo podréis descargar librerías
para aplicar su vocabulario con diferentes aplicaciones como PowerPoint o Visio.
Pero como he dicho, no es la única propuesta que existe. Lo más importante es que la diagramación
sea clara y compresible, y por ello es muy recomendable incluir una leyenda con los símbolos
utilizados. Además de estos libros, os recomiendo el
artículo “La diagramación en la arquitectura de información” de Ronda León, en el que
recopila diferentes propuestas de vocabularios, entre ellos el suyo propio.
Las maquetas, son diagramas de presentación, cuyo objetivo es crear una referencia visual
de la estructura, organización e interacción a nivel de página. Vamos a ver que hay diferentes
tipos y que distinguimos entre prototipos de baja fidelidad y alta fidelidad.
En ningún caso se debe incluir diseño gráfico en un prototipo, que se realiza en etapas
posteriores, y que es importante aclararle al cliente cuando se le presenta el prototipo.
No se deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises.
Los prototipos de baja fidelidad son dibujos estáticos.
Hablamos de sketching cuando realizamos bocetos de forma rápida e informal, con lápiz y
papel, para transmitir una idea o concepto con rapidez y claridad.
Es una técnica muy útil en las entrevista iniciales con el cliente, para comunicar conceptos
o proponerle alternativas a un problema, durante un brainstorming o en las reuniones internas
con el equipo de trabajo. Antes de comenzar un prototipo más elaborado
es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas,
ir esquematizando las páginas y definiendo las diferentes zonas de las mismas.
Os recomiendo como libro de referencia "Sketching User Experience" de Bill Buxton.
Un wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué
contenido debe estar presente en cada página. Los elementos de la misma como cabeceras,
enlaces, listas, formularios, etc; el etiquetado de los vínculos o de los títulos; el layout,
es decir, la ubicación, colocación y agrupación de los elementos de la página, así como
la estrategia de navegación y la priorización de contenidos dentro de la misma.
Un wireframe, asimismo, debería incluir el comportamiento mediante notas asociadas a
los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional.
Cuando tenemos una secuencia de wireframes hablamos de un storyboard.
Los prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo
maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas.
Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas
partes del sistema final a desarrollar como observamos en este ejemplo.
Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente,
las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información
de la aplicación web. Os recomiendo la lectura de mi artículo “Arquitectura
de información. Fundamentos” y el libro “Arquitectura de información en entornos
web” de Mario Pérez-Montoro Gutiérrez.
La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su
implementación es vital. En primer lugar, el equipo y el cliente se centran en el diseño
de contenidos e interacción y no en el diseño visual.
El cliente además ve y comprende cómo será la aplicación, mucho mejor que sí se ofrece
descrita en un documento. El prototipado evita malentendidos entre el
proveedor y el cliente o incluso entre los propios miembros del equipo, ayuda a especificar
los requerimientos, a detectar inconsistencias o falta de funcionalidad, y se convierte en
un complemento de gran valor en el análisis. En segundo lugar, el prototipo se modifica
con facilidad y rapidez, se evitan así modificaciones posteriores mucho más costosas cuando la
aplicación ya se está implementando, de modo que se reducen costes y tiempos.
Y en tercer lugar, también permite realizar pruebas de usabilidad, como test con usuarios,
en etapas tempranas del proyecto. De este modo se detectan y solucionan los problemas
antes de comenzar su implementación y el resultado son aplicaciones web más fáciles
de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.
Mi experiencia me dice que los beneficios de prototipar una aplicación web justifican
con creces el tiempo que se invierte en él, pues se reduce en gran medida el tiempo de
desarrollo posterior y aumenta considerablemente la calidad del resultado y la satisfacción
del cliente y el usuario final. Además de las referencias que os he ido dado
a lo largo del video, os recomiendo mi artículo “Wireframes”, donde se incluyen referencias
de interés, entre las que os recomiendo el artículo ”Prototipado” de la Fundación
Sidar y el blog “Wireframes” donde encontraréis ejemplos, plantillas, herramientas y otros
recursos. También puede seros útil el “Glosario
de usabilidad y accesibilidad” para consultar aspectos terminológicos.
Aquí tenéis también otras dos presentaciones sobre prototipado que os pueden ser de utilidad
y donde podéis ver más ejemplos.
Para terminar me gustaría daros cinco consejos básicos para realizar un buen prototipo,
y que se resumen en: sencillez y claridad; hazlo en blanco y ***; representa los tamaños
y proporciones de los bloques de contenido; ten en cuenta las pautas de usabilidad y accesibilidad;
y sobre todo, diseña para tus usuarios.
En resumen, en este vídeo hemos hablado de la importancia de prototipar una aplicación
web antes de realizar su diseño gráfico o comenzar su implementación, y como, a su
vez, el prototipado no debe comenzarse sin haber definido primero los objetivos del sitio,
las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información
de la aplicación web. Hemos visto que se distingue entre planos
y maquetas. Los planos o blueprints, diagramas de contenido
o flujo, o mapa web, sirven para mostrar la estructura de la aplicación y su flujo de
navegación.
Por su parte, las maquetas son diagramas de presentación, cuyo objetivo es crear una
referencia visual de la estructura, organización e interacción a nivel de página. Hemos visto
también que se distingue entre prototipos de baja fidelidad, que son estáticos, y prototipos
de alta fidelidad, que son dinámicos.
Hemos recomendado comenzar con un sketch, es decir, un boceto rápido e informal con
lápiz y papel. Y después un wireframe representará con
más detalle la aplicación, incluyendo notas asociadas a los elementos sobre cómo se deben
mostrar o su comportamiento funcional. Por último, los prototipos funcionales son
maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes
del sistema final a desarrollar. Hemos visto que la terminología es muy variada
y no siempre unívoca, pues todavía no está claramente asentada. Y por ello, al consultar
la bibliografía y las referencias, os recomiendo que no os centréis en aspectos terminológicos
sino en las recomendaciones para realizar buenos diagramas y prototipos de vuestras
aplicaciones web. Recuerda que el curso “Introducción al
desarrollo web” está disponible en la dirección idesweb.es.
Muchas gracias por tu atención.