Nosotros prácticamente somos arquitectos y manejamos la tarea de crear información útil y nuestra responsabilidad, es, tal y como la explica Jesse James Garrett en su conocido libro “Los elementos de la experiencia de usuario” donde menciona que debemos 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.
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.
Por una parte cuando construimos un sitio web debemos plantearnos como dividiremos el contenido, es decir identificar que tipo de información contendrá el sitio y como lo clasificaremos, bajo que categorías o etiquetas.
Los planos, son diagramas de organización y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo o mapa web son básicamente el esquema bajo el cual se enlistan dichas secciones o categorías a tratar dentro del sitio y a su vez las subcategorias a manejar.
 |
| Mapa del sitio: un mapa del sitio es un archivo en el que puedes enumerar las páginas de tu sitio web para informar a Google y otros motores de búsqueda acerca de la organización del contenido del sitio. Los rastreadores web en buscadores como Googlebot leen este archivo para rastrear de forma más inteligente tu sitio. |
A la hora de realizar la diagramación de una aplicación o sitio 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.
Otro punto importante a tratar como comentabamos es el diseño o mejor dicho aspecto del sitio web, antes de meternos a programar directamente el sitio es importante tener una idea sobre como lucirá este una vez terminado, es aquí donde empleamos las maquetas.
| Bosquejo de un sitio Web |
En todo caso, recordemos que estamos generando simplemente un bosquejo, una idea simple de como estructuraremos el contenido así que en ningún caso se debe incluir diseño gráfico en un prototipo, esto se realiza en etapas posteriores. Por lo tanto no se deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises.
Ahora hemos hablado de que existen varios tipos de prototipos, primeramente tenemos los prototipos de baja fidelidad que básicamente son dibujos estáticos. En desarrollo Web podemos clasificarlos en:
Scketching:
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.
Wireframe:
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.
 |
| Ejemplo de Wireframe |
Es decir un wireframe se lleva acabo cuando tengamos la estructura general y la jerarquización de contenidos. Es básicamente una maqueta más fiel a lo que será el sitio o la aplicación en real. No es un diseño como tal, no tiene imágenes, tipografía ni colores, pero puede que tenga textos bastante definitivos e incluso puede contener las diferentes interacciones. De esta forma, podemos ver cómo será en realidad, pero sin tenerlo desarrollado. Así cuando el diseñador y desarrollador empiecen a trabajar ya tendrán todo validado y cerrado.
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. Un storyboard son una evolución de los diferentes wirefreames, ya que además del interfaz, se muestra la secuencia de acciones, o escenarios, que se deben realizar con el sitio.
 |
| Ejemplo de 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.
 |
| Ejemplo de Mockup |
Fuentes:
https://docs.google.com/document/d/1GLQyEovkrDFSNFOAMTwFWiSkAKZUh03rVH12ANeDyIQ/edit
https://www.ecured.cu/Prototipo
http://fp.uoc.edu/blog/que-es-prototipar-y-que-tipo-de-prototipos-hay/
https://www.rankingcoach.com/es-es/news/sitemaps-que-son-y-para-qu%C3%A9-se-utilizan-los-mapas-de-sitio
Notas: Esta información ademas esta basada en gran parte por el programa "Actívate, Google España", yo soy/fui alumno del programa para las fechas de redacción de la entrada, te recomiendo si deseas ampliar aun mas tu conocimiento inscribirte y/o checar sus cursos disponibles visitando su link: http://google.es/activate.
Comentarios
Publicar un comentario